/* Label CMS LP — device frames and the HTML/CSS recreations of the admin
   screens and the public site (fictional group "HARMONIA"). */

/* ---------- shared admin bits ---------- */
.admin-logo { display: flex; align-items: center; gap: 4px; font-weight: 800; color: #3c4b66; }
.admin-logo .icon { color: #4c94e8; }
.side-label { font-size: 6px; font-weight: 700; color: #7c8aa3; margin: 7px 0 3px; }
.side-org { display: flex; align-items: center; gap: 4px; font-size: 7px; font-weight: 800; color: var(--navy); }
.side-org b { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 3px; background: #1e2a44; color: #fff; font-size: 5px; }
.admin-side ul, .ba-side ul { display: grid; gap: 1px; margin-top: 3px; }
.admin-side li, .ba-side li { display: flex; align-items: center; gap: 4px; padding: 2.5px 4px; border-radius: 4px; color: #4a5a76; }
.admin-side li .icon, .ba-side li .icon { width: 8px; height: 8px; }
.admin-side li.on, .ba-side li.on { background: #dfedff; color: #0b78ff; font-weight: 700; }
.dot { width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: #f05252; }
.dot.off { background: #c9cfd8; }
.admin-h1 { font-weight: 800; color: var(--navy); }
.card-h { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--navy); }
.card-h .icon { color: #2f7be8; }
.ph-img { border-radius: 4px; background: #dfe7f5 center 30% / cover no-repeat; }
.sw { position: relative; width: 16px; height: 9px; margin-left: auto; border-radius: 9px; background: #1677f2; }
.sw::after { content: ""; position: absolute; top: 1.5px; right: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sw.off { background: #b6c0ce; }
.sw.off::after { right: auto; left: 1.5px; }
.toggles { display: grid; }
.toggles li { display: flex; align-items: center; gap: 4px; padding: 2.6px 0; border-bottom: 1px solid #eef2f8; color: #3c4b66; font-weight: 600; }
.toggles li .icon { width: 7px; height: 7px; color: #9aa6b8; }

/* ---------- FV laptop ---------- */
.laptop { position: absolute; left: 552px; top: 136px; width: 536px; }
.laptop-screen { margin-left: 66px; width: 470px; height: 404px; padding: 13px 13px 18px; border-radius: 16px 16px 4px 4px; background: #1b1f27; box-shadow: 0 30px 60px rgba(20, 50, 110, .22); }
.laptop-base { height: 22px; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, #e9edf3, #c7ced9); box-shadow: 0 18px 30px rgba(20, 50, 110, .18); }
.admin { display: grid; grid-template-columns: 88px 1fr 104px; height: 100%; overflow: hidden; border-radius: 4px; background: #f5f9fd; font-size: 6.5px; line-height: 1.4; }
.admin-side { padding: 7px 6px; background: #f6faff; border-right: 1px solid #e2ebf5; }
.admin-side .admin-logo { font-size: 8px; }
.admin-side .admin-logo .icon { width: 10px; height: 10px; }
.admin-main { padding: 7px 8px; display: grid; align-content: start; gap: 5px; }
.crumb { font-size: 5.5px; color: #7c8aa3; }
.admin .admin-h1 { font-size: 9px; }
.admin-card { padding: 6px; border-radius: 6px; background: #fff; border: 1px solid #e6eef8; }
.admin-card .card-h { font-size: 7px; margin-bottom: 4px; }
.admin-card .card-h .icon { width: 8px; height: 8px; }
.admin-card .ph-img { height: 70px; }
.row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.row-btns span { padding: 2px; text-align: center; border: 1px solid #dfe8f3; border-radius: 3px; font-size: 5.5px; color: #3c4b66; }
.row-btns .danger { color: #e14848; }
.admin-preview { padding: 7px 6px; background: #fff; border-left: 1px solid #e2ebf5; display: grid; align-content: start; gap: 4px; }
.admin-preview .card-h { font-size: 6.5px; }
.admin-preview .card-h .icon { width: 8px; height: 8px; }
.ph-img.tall { height: 88px; }
.pv-line { height: 4px; border-radius: 2px; background: #e3e9f2; }
.pv-line.short { width: 60%; }
.pv-dark { height: 60px; border-radius: 3px; background: linear-gradient(180deg, #1d2333, #3a2f5c); }

/* ---------- phones (public site) ---------- */
.phone { position: absolute; left: 1034px; top: 185px; width: 277px; height: 558px; padding: 11px; border-radius: 42px; background: #15181f; box-shadow: 0 30px 60px rgba(20, 50, 110, .28), inset 0 0 0 2px #3b404c; }
.phone::before { content: ""; position: absolute; top: 11px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #15181f; z-index: 2; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 32px; background: #fff; }
.pub { padding: 30px 12px 0; }
.pub-top { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #6b7a92; }
.pub-top b { font-family: "Times New Roman", serif; font-size: 15px; letter-spacing: .12em; color: #2a3350; font-weight: 600; }
.pub-hero { height: 190px; margin: 12px -12px 0; background: #dfe7f5 center 30% / cover no-repeat; }
.pub-catch { margin-top: 10px; text-align: center; font-family: "Times New Roman", serif; font-style: italic; font-size: 12px; color: #2a3350; }
.pub-sub { text-align: center; font-size: 7px; letter-spacing: .2em; color: #8a96ab; }
.pub-h { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #1d2333; }
.pub-h span { font-size: 6px; letter-spacing: .1em; color: #8a96ab; }
.pub-news { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pub-news i { display: block; height: 66px; border-radius: 6px; background: #dfe7f5 center / cover; }
.pub-news span { display: block; margin-top: 4px; font-size: 6px; color: #8a96ab; }
.pub-news b { display: block; font-size: 7px; line-height: 1.4; color: #1d2333; }
.pub-list p { display: flex; gap: 6px; padding: 4px 0; border-bottom: 1px solid #eef1f6; font-size: 6.5px; color: #1d2333; }
.pub-list span { color: #8a96ab; }

/* ---------- feature-card mini UIs ---------- */
.mini { position: absolute; left: 44px; right: 30px; top: 134px; bottom: -14px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(30, 80, 160, .09); font-size: 9px; line-height: 1.4; color: #3c4b66; overflow: hidden; }
.mini-h { font-size: 9px; font-weight: 800; color: var(--navy); margin-bottom: 7px; }
.m-row { display: grid; grid-template-columns: 22px 1fr auto 26px; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid #f0f3f8; }
.m-row b { font-size: 9px; color: var(--navy); }
.m-row em { font-style: normal; font-size: 7.5px; color: #12a26b; background: #e3f8ee; border-radius: 6px; padding: 1px 4px; text-align: center; }
/* Face crops from images/group.webp (positions measured on that photo). */
.av { width: 22px; height: 22px; border-radius: 50%; background: url(../images/group.webp) no-repeat; background-size: 454px auto; }
.a1 { background-position: -161px -56px; } .a2 { background-position: -182px -96px; } .a3 { background-position: -218px -95px; } .a4 { background-position: -287px -133px; }
.chip { font-size: 7.5px; padding: 1px 6px; border-radius: 6px; }
.c1 { background: #e3eefe; color: #2f7be8; } .c2 { background: #fde6ef; color: #e1467d; } .c3 { background: #efe7fe; color: #8a52e5; } .c4 { background: #fff4d1; color: #c99400; }
.fl { display: block; font-size: 7.5px; font-weight: 700; color: #5c6a84; margin: 5px 0 2px; }
.fi { display: block; min-height: 18px; padding: 3px 6px; border: 1px solid #e1e8f2; border-radius: 4px; font-size: 8px; color: #33415c; background: #fff; }
.fi.area { min-height: 46px; }
.fi .tb { display: block; padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid #eef2f8; color: #8a96ab; letter-spacing: .1em; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-row { display: flex; justify-content: space-between; padding: 5px 8px; margin-bottom: 5px; border: 1px solid #e1e8f2; border-radius: 4px; font-size: 8.5px; }
.price-row b { color: var(--navy); }
.goods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 104px; }
.tee { display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #f2f4f8; }
.tee .icon { width: 64px; height: 64px; stroke-width: 1; }
.tee.dark .icon { fill: #1d2333; stroke: #1d2333; }
.tee.light { background: linear-gradient(160deg, #5e7a86, #9fb3b9); }
.tee.light .icon { fill: #7fd3c9; stroke: #3d6b70; }
.jackets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.jackets i { display: block; aspect-ratio: 1; border-radius: 4px; background: #dfe7f5 center / cover; box-shadow: 0 3px 8px rgba(20, 40, 80, .12); }
.jackets .j2 { background-position: 30% center; }
.jackets .j3 { background-position: 80% center; filter: hue-rotate(-20deg) saturate(1.1); }
.mini.video { left: 40px; right: 26px; top: 134px; bottom: 26px; padding: 0; background: #1d2333 center / cover; display: flex; align-items: center; justify-content: center; }
.play { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #3c4b66; }
.play .icon { width: 16px; height: 16px; fill: currentColor; margin-left: 3px; }

/* ---------- FEATURE section: large admin + phone + bubbles ---------- */
.big-admin { position: absolute; left: 508px; top: 22px; width: 755px; height: 520px; display: grid; grid-template-columns: 148px 1fr; grid-template-rows: 34px 1fr; border-radius: 14px 14px 0 0; background: #f5f9fd; box-shadow: 0 30px 60px rgba(30, 80, 160, .14); overflow: hidden; font-size: 8.5px; line-height: 1.45; }
.ba-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 46px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e6eef8; }
.ba-top .admin-logo { font-size: 11px; }
.ba-top .admin-logo .icon { width: 13px; height: 13px; }
.ba-crumb { font-size: 7.5px; color: #7c8aa3; }
.ba-side { padding: 8px 10px; background: #f6faff; border-right: 1px solid #e2ebf5; font-size: 8px; }
.ba-side .side-label { font-size: 7px; }
.ba-side .side-org { font-size: 8.5px; }
.ba-side li .icon { width: 10px; height: 10px; }
.ba-main { padding: 14px 18px; display: grid; align-content: start; gap: 8px; }
.ba-main .admin-h1 { font-size: 13px; }
.ba-sub { font-size: 7.5px; color: #7c8aa3; margin-top: -4px; }
.ba-card { width: 300px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e6eef8; }
.ba-card .card-h { font-size: 9px; margin-bottom: 7px; }
.ba-card .card-h .icon { width: 11px; height: 11px; }
.ba-card .ph-img { height: 96px; }
.ba-meta { margin-top: 5px; font-size: 7px; color: #7c8aa3; }
.save { margin-left: auto; padding: 2px 8px; border-radius: 4px; background: #1677f2; color: #fff; font-size: 7px; }
.toggles.big li { padding: 4.5px 0; font-size: 8px; }
.toggles.big .sw { width: 22px; height: 12px; }
.toggles.big .sw::after { width: 8px; height: 8px; top: 2px; }
.phone.phone-sm { left: 999px; top: 104px; width: 250px; height: 380px; padding: 9px; border-radius: 30px; }
.phone.phone-sm::before { top: 9px; width: 76px; height: 16px; }
.phone-sm .phone-screen { border-radius: 22px; }
.phone-sm .pub { padding-top: 24px; }
.phone-sm .pub-hero { height: 128px; }
.bubble { position: absolute; display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 28px 0 26px; border-radius: 48px; background: #fff; box-shadow: 0 16px 40px rgba(30, 80, 160, .14); font-size: 14.5px; line-height: 24px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.b-ic { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: #e7f1ff; color: #1677f2; flex-shrink: 0; }
.b-ic .icon { width: 24px; height: 24px; }
.b-preview { left: 1069px; top: 5px; width: 265px; }
.b-drag { left: 441px; top: 254px; width: 278px; }
.b-toggle { left: 1069px; top: 377px; width: 265px; }

/* The group photo has a wide studio backdrop; zoom in on the members wherever
   it is used as a cover image (mocks, jackets, use-case card). */
[style*="group.webp"] { background-size: 165% auto !important; background-position: 52% 42% !important; }
/* Wide, short frames (admin FV previews): less zoom so faces aren't cut. */
.ph-img[style*="group.webp"]:not(.tall) { background-size: 118% auto !important; background-position: 50% 38% !important; }