/* FluffCams sales site: the drawn product pictures of the feature pages (app/scenes.php). The script's own screens, cropped to one idea.
   Colours only from tokens.css. Loaded by the feature pages after components.css. */
.sc { position: relative; padding: 18px 0 28px; }
.sc .glow { inset: 8% 10% 0 14%; }
.sc > .frame, .sc > .sc-panel, .sc > .sc-dialog, .sc > .sc-tiers, .sc > .sc-media, .sc > .sc-provs, .sc > .sc-group, .sc > .cards, .sc > .sc-looks, .sc > .sc-designer, .sc > .sc-serp, .sc > .sc-lock, .sc > .sc-mphone { position: relative; }
.sc-shot { width: 100%; height: auto; display: block; }
.sc-fl { position: absolute; }
.sc-f-tr { right: -18px; top: -2px; left: auto; bottom: auto; }
.sc-f-bl { left: -24px; bottom: 0; right: auto; top: auto; animation-delay: -3s; }

/* panels: the script's dark panels */
.sc-panel { background: var(--room-panel); border: 1px solid var(--frame-border); border-radius: var(--r-lg); box-shadow: var(--shadow-frame); padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--text-2); }
.sc-panel-h { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; }
.sc-panel-h > b { font-weight: 700; }
.sc-panel-h > :last-child:not(b) { margin-left: auto; }
.sc-panel-h .si { width: 18px; height: 18px; color: var(--accent); }
.sc-dim { color: var(--subtle); font-size: 12px; }
.sc-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.sc-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.sc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--muted); white-space: nowrap; }
.sc-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.sc-pill.is-ok { color: var(--text); border-color: var(--accent-35); background: var(--accent-12); }
.sc-pill.is-ok i { background: var(--online); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips > span { font-size: 12px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--text-2); }
.sc-chips > span.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.sc-chips.is-dim > span { color: var(--muted); }
.sc-fld { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; background: var(--room-bg); border: 1px solid var(--room-line); border-radius: var(--r-sm); }
.sc-fld > span { color: var(--subtle); font-size: 12px; }
.sc-fld > b { color: var(--text); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-fld > em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent); }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sc-btn.is-p { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sc-buy { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.sc-st { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.sc-st.is-ready { background: var(--accent-12); color: var(--accent); }
.sc-st.is-sent { background: var(--surface-4); color: var(--text-2); }
.sc-st.is-paid { background: transparent; color: var(--subtle); border: 1px solid var(--border-3); }
.sc-st.is-urgent { background: var(--live); color: var(--on-live); }

/* quality menu over the picture + the same show on a phone */
.sc-video { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stream-bg); }
.sc-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-video .live { position: absolute; left: 12px; top: 12px; }
.sc-video .rm-vctl > span.is-on { background: var(--accent); color: var(--on-accent); }
.sc-menu { position: absolute; right: 10px; top: 44px; width: 190px; background: var(--glass-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc-menu > b { color: var(--text); font-size: 12px; padding: 2px 6px 6px; }
.sc-menu > span { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; }
.sc-menu > span > i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.sc-menu > span.is-on { background: var(--surface-4); color: var(--text); }
.sc-menu > span.is-on > i { border-color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--surface-4), inset 0 0 0 6px var(--accent); }
.sc-menu small { color: var(--subtle); margin-left: auto; }
.sc-menu-sw { border-top: 1px solid var(--border-3); margin-top: 4px; padding-top: 8px !important; } /* beats the row's own padding above */
.sc-menu-sw em { margin-left: auto; width: 28px; height: 16px; border-radius: var(--r-pill); background: var(--accent); position: relative; }
.sc-menu-sw em::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--on-accent); }
.sc-phone { position: absolute; left: -30px; bottom: -6px; width: 150px; aspect-ratio: 9 / 18; border-radius: 26px; border: 6px solid var(--bezel); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-phone); }
.sc-phone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-phone .live { position: absolute; left: 8px; top: 10px; font-size: 9px; padding: 3px 6px; }
.sc-phone-chat { position: absolute; left: 6px; right: 6px; bottom: 8px; font-size: 10px; color: var(--text); background: var(--shade); padding: 5px 7px; border-radius: 8px; }

/* private show: request window + the running show's strip */
.sc-dialog { max-width: 400px; margin-left: auto; background: var(--room-panel); border: 1px solid var(--frame-border); border-radius: var(--r-lg); box-shadow: var(--shadow-frame); padding: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--text-2); }
.sc-dialog-h { display: flex; gap: 12px; align-items: center; }
.sc-dialog-h img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--accent); }
.sc-dialog-h b { display: block; color: var(--text); font-size: 15px; }
.sc-dialog-h span { color: var(--subtle); font-size: 12px; }
.sc-price { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--room-bg); border: 1px solid var(--room-line); }
.sc-price span { color: var(--muted); }
.sc-price b { font-family: var(--font-display); font-size: 26px; color: var(--accent); }
.sc-price small { color: var(--subtle); }
.sc-opt { display: flex; align-items: center; gap: 10px; }
.sc-opt > i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--muted); flex: none; }
.sc-opt small { color: var(--subtle); }
.sc-btns { display: flex; gap: 8px; justify-content: flex-end; }
.sc-strip { position: absolute; left: -10px; bottom: -6px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; max-width: 360px; background: var(--card-float); border: 1px solid var(--border-3); border-radius: 14px; box-shadow: var(--shadow-float); font-size: 12px; }
.sc-strip > .si { width: 20px; height: 20px; color: var(--accent); }
.sc-strip b { display: block; color: var(--text); font-size: 13px; }
.sc-strip span { color: var(--muted); }

/* group show: the model's card with its banner + who joined */
.sc-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.sc-cc { box-shadow: var(--shadow-frame); }
.sc-list { background: var(--room-panel); border: 1px solid var(--frame-border); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; box-shadow: var(--shadow-frame); }
.sc-list-h b { display: block; color: var(--text); font-size: 14px; }
.sc-list-h span { color: var(--subtle); }
.sc-list .kv { padding: 8px 10px; background: var(--room-bg); border-radius: 8px; color: var(--text-2); }
.sc-list .kv b { color: var(--text); }
.sc-warn { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--gold); color: var(--on-accent); font-weight: 600; }
.sc-warn .si { width: 14px; height: 14px; }

/* wallet (monetization hero) */
.sc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-tile { background: var(--room-bg); border: 1px solid var(--room-line); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.sc-tile small { color: var(--subtle); font-size: 11px; }
.sc-tile b { font-family: var(--font-display); font-size: 20px; color: var(--text); }

/* tip menu */
.sc-tm { gap: 0; padding: 0; overflow: hidden; }
.sc-tabs { display: flex; gap: 18px; padding: 0 16px; height: 46px; align-items: center; border-bottom: 1px solid var(--room-line); color: var(--muted); }
.sc-tabs > span { display: inline-flex; gap: 7px; align-items: center; height: 100%; }
.sc-tabs > span.is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.sc-tabs .si { width: 15px; height: 15px; }
.sc-tm-h { display: flex; justify-content: space-between; padding: 12px 16px 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.sc-tm-r { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--room-line); color: var(--text); }
.sc-tm-r .si { width: 13px; height: 13px; color: var(--accent); }
.sc-tm-r b { margin-left: auto; }
.sc-amts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 16px; border-top: 1px solid var(--room-line); }
.sc-amts span { text-align: center; padding: 8px 0; border-radius: 7px; background: var(--surface-4); color: var(--text); font-weight: 600; }
.sc-amts span.is-on { background: var(--accent); color: var(--on-accent); }
.sc-goal { margin: 0 16px 16px; }
.sc-dot { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--accent-20); }
.sc-dot::before { content: attr(data-n); }
.sc-x-tipmenu .sc-dot[data-n="1"] { left: -12px; top: 34%; }
.sc-x-tipmenu .sc-dot[data-n="2"] { right: -12px; top: 74%; }
.sc-x-tipmenu .sc-dot[data-n="3"] { left: 40%; bottom: 4px; }

/* toys */
.sc-lv { display: grid; grid-template-columns: 64px 76px minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--room-line); }
.sc-lv b { color: var(--text); }
.sc-lv small { color: var(--subtle); text-align: right; }
.sc-meter { height: 8px; border-radius: 4px; background: var(--surface-4); overflow: hidden; }
.sc-meter i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.sc-meter .w1 { width: 25%; } .sc-meter .w2 { width: 50%; } .sc-meter .w3 { width: 75%; } .sc-meter .w4 { width: 100%; }
.sc-chatline { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-chatline .si { width: 15px; height: 15px; color: var(--accent); }
.sc-toys .sc-panel-h .si-badge { color: var(--accent); }

/* fan club levels */
.sc-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; }
.sc-tier { background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sc-tier.is-on { background: var(--surface-2); border-color: var(--accent); transform: translateY(-14px); box-shadow: 0 30px 80px var(--accent-shadow); }
.sc-tier-n { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.sc-tier-n .si { width: 15px; height: 15px; color: var(--gold); }
.sc-tier.is-on .sc-tier-n { color: var(--accent); }
.sc-tier > b { font-family: var(--font-display); font-size: 26px; color: var(--text); }
.sc-tier > small { color: var(--subtle); margin-top: -6px; }
.sc-tier ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; color: var(--text-2); }
.sc-tier li { display: flex; gap: 7px; align-items: flex-start; }
.sc-tier .ck { width: 15px; height: 15px; }

/* paid messages on a phone */
.sc-mphone { width: 300px; height: 560px; margin: 0 auto; border-radius: 44px; border: 8px solid var(--bezel); background: var(--surface); box-shadow: var(--shadow-frame); overflow: hidden; display: flex; flex-direction: column; }
.sc-mp-h { padding: 26px 20px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--divider); }
.sc-mp-h img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sc-mp-h b { display: block; font-size: 14px; }
.sc-mp-h small { font-size: 11px; }
.sc-mp-b { flex: 1; padding: 16px; justify-content: flex-end; }
.sc-locked { position: relative; align-self: flex-end; width: 170px; height: 120px; border-radius: 14px; overflow: hidden; }
.sc-locked img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.15); }
.sc-locked span { position: absolute; inset: auto 8px 8px 8px; display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--glass-2); padding: 6px; border-radius: 8px; color: var(--text); }
.sc-locked .si { width: 13px; height: 13px; }
.sc-mp-in { margin: 0 14px 22px; height: 44px; border-radius: 22px; background: var(--frame-url); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 16px; font-size: 13px; color: var(--subtle); }
.sc-mp-in span { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.sc-mp-in .si { width: 15px; height: 15px; }

/* buy window, providers, payouts */
.sc-buyw { max-width: 420px; margin-left: auto; }
.sc-pk { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--room-line); background: var(--room-bg); }
.sc-pk > i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.sc-pk b { color: var(--text); }
.sc-pk em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--gold); padding: 2px 8px; border-radius: var(--r-pill); }
.sc-pk > span { margin-left: auto; color: var(--text); font-weight: 600; }
.sc-pk.is-on { border-color: var(--accent); }
.sc-pk.is-on > i { border-color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--room-bg), inset 0 0 0 7px var(--accent); }
.sc-code { color: var(--accent); font-size: 12px; font-weight: 600; }
.sc-provs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-prov { background: var(--room-panel); border: 1px solid var(--frame-border); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-float); }
.sc-prov b { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.sc-prov small { color: var(--subtle); font-size: 12px; }
.sc-prov .sc-pill { align-self: flex-start; margin-top: 4px; }
.sc-po { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-po b { display: block; color: var(--text); }
.sc-po small { color: var(--subtle); }
.sc-po .sc-st { justify-self: end; }

/* model dashboard, media, statistics, studio */
.sc-md { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.sc-md-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-todo { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--text-2); }
.sc-todo li { display: flex; gap: 8px; align-items: center; }
.sc-todo li > i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.sc-todo .ck { width: 15px; height: 15px; }
.sc-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-mc { background: var(--room-panel); border: 1px solid var(--frame-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-float); }
.sc-mc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sc-mc-b { padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.sc-mc-b b { color: var(--text); }
.sc-acc { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.sc-acc.is-free { background: var(--surface-4); color: var(--text-2); }
.sc-acc.is-fan { background: var(--gold); color: var(--on-accent); }
.sc-acc.is-sale { background: var(--accent); color: var(--on-accent); }
.sc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-kpis > div { background: var(--room-bg); border: 1px solid var(--room-line); border-radius: var(--r-md); padding: 12px; }
.sc-kpis small { display: block; color: var(--subtle); font-size: 11px; }
.sc-kpis b { font-family: var(--font-display); font-size: 22px; color: var(--text); }
.sc-kpis b.acc { color: var(--accent); }
.sc-chart { height: 110px; }
.sc-from { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
.sc-from span { display: inline-flex; gap: 6px; align-items: center; }
.sc-from b { color: var(--text); }
.sc-sr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 64px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-sr img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sc-sr b { display: block; color: var(--text); }
.sc-sr small { color: var(--subtle); display: inline-flex; align-items: center; gap: 5px; }
.sc-live { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.sc-sr .sc-dim { text-align: right; }

/* age checks, reports, bugs */
.sc-layer { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-layer b { display: block; color: var(--text); }
.sc-layer small { color: var(--subtle); }
.sc-layer em { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--border-3); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.sc-rep { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-rep .sc-st { justify-self: start; }
.sc-rep b { display: block; color: var(--text); }
.sc-rep small { color: var(--subtle); }
.sc-bug { padding: 14px; border-radius: var(--r-md); background: var(--room-bg); display: flex; flex-direction: column; gap: 8px; }
.sc-bug .mono { color: var(--text); font-size: 13px; }
.sc-bug small { color: var(--subtle); }
.sc-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sc-steps span { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--muted); }
.sc-steps span.is-done { color: var(--text); border-color: var(--accent-35); }
.sc-steps span.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* phone lock screen with alerts */
.sc-lock { width: 300px; height: 520px; margin: 0 auto; border-radius: 44px; border: 8px solid var(--bezel); background: var(--cam-bg); box-shadow: var(--shadow-frame); padding: 40px 14px; display: flex; flex-direction: column; gap: 10px; }
.sc-lock-t { text-align: center; font-family: var(--font-display); font-size: 54px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
.sc-notif { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface-4); font-size: 12px; }
.sc-notif-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.sc-notif-ic .mark { width: 20px; height: 24px; }
.sc-notif b { display: block; color: var(--text); }
.sc-notif small { color: var(--muted); }
.sc-notif em { font-style: normal; font-size: 10px; color: var(--subtle); align-self: start; }

/* other sites' models, search result, link preview */
.sc-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-prog { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; background: var(--bg); color: var(--text); padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-3); }
.sc-serp { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-float); }
.sc-serp small { color: var(--subtle); font-size: 12px; }
.sc-serp b { font-size: 18px; color: var(--text); font-weight: 600; }
.sc-serp p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sc-share { position: relative; width: 78%; margin: 16px 0 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow-frame); }
.sc-share-img { position: relative; aspect-ratio: 1200 / 630; }
.sc-share-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-share-img .live { position: absolute; left: 12px; top: 12px; }
.sc-share-img em { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); background: var(--shade); }
.sc-share-t { padding: 10px 14px; }
.sc-share-t small { display: block; color: var(--subtle); font-size: 11px; }
.sc-share-t b { color: var(--text); font-size: 14px; }

/* customization: looks, colours, card designer, languages */
.sc-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sc-look { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--shadow-float); }
.sc-look-bar { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 12px; }
.sc-look-bar i { width: 34px; height: 14px; border-radius: var(--r-pill); }
.sc-look-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.sc-look-g i { aspect-ratio: 4 / 3; border-radius: 6px; }
.sc-look.is-lime .sc-look-bar { background: var(--lk-lime-bar); color: var(--text); } .sc-look.is-lime .sc-look-bar i { background: var(--accent); } .sc-look.is-lime .sc-look-g { background: var(--lk-lime-bg); } .sc-look.is-lime .sc-look-g i { background: var(--lk-lime-card); }
.sc-look.is-red .sc-look-bar { background: var(--lk-red-bar); color: var(--text); } .sc-look.is-red .sc-look-bar i { background: var(--lk-red-acc); } .sc-look.is-red .sc-look-g { background: var(--lk-red-bg); } .sc-look.is-red .sc-look-g i { background: var(--lk-red-card); }
.sc-look.is-violet .sc-look-bar { background: var(--lk-vio-bar); color: var(--text); } .sc-look.is-violet .sc-look-bar i { background: var(--lk-vio-acc); } .sc-look.is-violet .sc-look-g { background: var(--lk-vio-bg); } .sc-look.is-violet .sc-look-g i { background: var(--lk-vio-card); }
.sc-look.is-light .sc-look-bar { background: var(--pv3-bar); color: var(--pv3-ink); } .sc-look.is-light .sc-look-bar i { background: var(--pv3-accent); } .sc-look.is-light .sc-look-g { background: var(--pv3-bg); } .sc-look.is-light .sc-look-g i { background: var(--pv3-card); }
.sc-sws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-sw { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--muted); }
.sc-sw i { height: 38px; border-radius: 8px; border: 1px solid var(--border-3); }
.sc-sw .c1 { background: var(--bg); } .sc-sw .c2 { background: var(--room-panel); } .sc-sw .c3 { background: var(--text); } .sc-sw .c4 { background: var(--accent); } .sc-sw .c5 { background: var(--on-accent); }
.sc-sw .c6 { background: var(--accent); } .sc-sw .c7 { background: var(--frame-bar); } .sc-sw .c8 { background: var(--live); } .sc-sw .c9 { background: var(--live); }
.sc-designer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.sc-tgs { gap: 8px; }
.sc-tg { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.sc-tg > i { width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--surface-4); position: relative; flex: none; }
.sc-tg > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.sc-tg.is-on > i { background: var(--accent); }
.sc-tg.is-on > i::after { left: auto; right: 3px; background: var(--on-accent); }
.sc-tr { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-sm); background: var(--room-bg); }
.sc-tr b { color: var(--text); }
.sc-tr .sc-dim { display: flex; align-items: center; gap: 6px; }
.sc-tr .si { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .sc-tiles, .sc-kpis, .sc-provs, .sc-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-tiers { grid-template-columns: minmax(0, 1fr); }
  .sc-tier.is-on { transform: none; }
  .sc-group, .sc-designer { grid-template-columns: minmax(0, 1fr); }
  .sc-md-g { grid-template-columns: minmax(0, 1fr); }
  .sc-fld { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-fld > span { grid-column: 1 / -1; }
  .sc-fld > em + em { display: none; }
  .sc-lv { grid-template-columns: 56px 70px minmax(0, 1fr); }
  .sc-lv small { display: none; }
  .sc-share { width: 100%; }
  .sc-po { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-po .sc-st { display: none; }
  .sc-sr { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .sc-sr .sc-dim { display: none; }
  .sc-rep { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-rep .sc-st { grid-column: 1 / -1; }
}
/* kept clear of what they float beside */
.sc-x-wallet .sc-f-bl { bottom: -34px; left: 24px; }
.sc-strip { max-width: 400px; }
.sc-strip span { white-space: nowrap; }

/* three screens (live streaming hero) */
.sc-x-screens { padding-bottom: 60px; }
.sc-scr-pc { width: 82%; }
.sc-cap { position: absolute; left: 10px; bottom: 10px; font-size: 11px; font-weight: 600; color: var(--text); background: var(--shade); padding: 4px 9px; border-radius: var(--r-pill); }
.sc-scr-tab, .sc-scr-ph { position: absolute; overflow: hidden; background: var(--surface); border: 6px solid var(--bezel); box-shadow: var(--shadow-phone); }
.sc-scr-tab { right: 0; bottom: 6px; width: 46%; aspect-ratio: 4 / 3; border-radius: 18px; }
.sc-scr-ph { right: 34%; bottom: -10px; width: 120px; aspect-ratio: 9 / 18; border-radius: 22px; }
.sc-scr-tab > img, .sc-scr-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-scr-tab .live, .sc-scr-ph .live { position: absolute; left: 8px; top: 8px; font-size: 9px; padding: 3px 6px; }
.sc-scr-ph .sc-cap, .sc-scr-tab .sc-cap { left: 8px; bottom: 8px; font-size: 10px; }

/* drawn admin dashboard */
.sc-ad { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 300px; font-size: 12px; }
.sc-ad-side { border-right: 1px solid var(--divider); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.sc-ad-side span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; }
.sc-ad-side span.is-on { background: var(--surface-4); color: var(--text); }
.sc-ad-side .si { width: 14px; height: 14px; }
.sc-ad-side span.is-on .si { color: var(--accent); }
.sc-ad-main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sc-ad-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-ad-box { background: var(--room-panel); border: 1px solid var(--room-line); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.sc-ad-box > b { color: var(--text); font-size: 13px; }
.sc-ad-box > span { display: flex; align-items: center; gap: 8px; }
.sc-ad-box em { font-style: normal; min-width: 22px; height: 20px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sc-ad-live { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-ad-av { position: relative; width: 38px; height: 38px; }
.sc-ad-av img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--live); }
.sc-ad-av i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--live); border: 2px solid var(--room-panel); }
@media (max-width: 640px) { .sc-scr-pc { width: 100%; } .sc-ad { grid-template-columns: minmax(0, 1fr); } .sc-ad-side { display: none; } .sc-ad-row { grid-template-columns: minmax(0, 1fr); } }

/* the full feature list card */
.sc-flist { gap: 0; }
.sc-search { grid-template-columns: 20px minmax(0, 1fr); margin-bottom: 8px; }
.sc-search .si { width: 15px; height: 15px; color: var(--muted); }
.sc-search b { color: var(--muted); }
.sc-flist-r { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--room-line); color: var(--text); }
.fit-in .sc-dialog, .fit-in .sc-buyw { margin: 0 auto; } /* centred in the overview frame, not pushed right */

/* the browser Studio (live streaming) */
.sc-st-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start; }
.sc-st-cam { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.sc-st-cam img { width: 100%; height: 100%; object-fit: cover; }
.sc-st-cam .sc-pill { position: absolute; left: 10px; bottom: 10px; background: var(--glass-2); }
.sc-st-side { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.sc-st-row { display: flex; flex-direction: column; gap: 6px; }
.sc-st-sel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--room-bg); border: 1px solid var(--room-line); color: var(--text-2); }
.sc-st-sel .si { width: 14px; height: 14px; color: var(--accent); }
.sc-st-go { justify-content: center; }
.sc-st-tabs { height: auto; padding: 0 0 8px; gap: 10px; font-size: 11px; flex-wrap: wrap; }
.sc-st-tabs > span { height: auto; padding-bottom: 4px; }
.sc-st-chat { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: var(--room-bg); color: var(--text-2); }
.sc-st-chat b { color: var(--text); }
.sc-st-chat b.acc { color: var(--accent); }
@media (max-width: 640px) { .sc-st-body { grid-template-columns: minmax(0, 1fr); } }

/* other uses */
.sc-x-reading .sc-video .meter { position: absolute; right: 14px; bottom: 14px; }
.sc-book .sc-panel-h img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--accent); }
.sc-book .sc-panel-h b { display: block; font-size: 14px; }
.sc-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-slot { text-align: center; padding: 10px 0; border-radius: 8px; border: 1px solid var(--room-line); color: var(--text); font-weight: 600; }
.sc-slot.is-off { color: var(--faint); text-decoration: line-through; }
.sc-slot.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sc-voice { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-4); }
.sc-voice .si { width: 16px; height: 16px; color: var(--accent); }
.sc-wave { display: flex; align-items: center; gap: 3px; }
.sc-wave i { width: 3px; border-radius: 2px; background: var(--accent); }
.sc-wave i:nth-child(odd) { height: 14px; } .sc-wave i:nth-child(even) { height: 8px; } .sc-wave i:nth-child(3n) { height: 18px; }
.sc-course { position: absolute; right: -18px; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--card-float); border: 1px solid var(--border-3); border-radius: 14px; box-shadow: var(--shadow-float); font-size: 12px; color: var(--muted); }
.sc-course b { color: var(--text); font-size: 14px; }
.sc-course em { align-self: flex-start; font-style: normal; font-size: 10px; font-weight: 700; background: var(--accent); color: var(--on-accent); padding: 3px 8px; border-radius: var(--r-pill); }
.sc-ex-n { color: var(--text); font-size: 14px; }
.sc-niche { gap: 14px; }

/* other uses overview: switches and the site's words */
.sc-uses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 16px; }
.sc-uses .sc-panel { margin: 0; display: flex; flex-direction: column; }
.sc-uses .sc-tg:not(.is-on) > i { box-shadow: inset 0 0 0 1px var(--border-3); }
.sc-uses .sc-panel-h { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; }
.sc-uses .sc-panel-h > span { margin-left: 0; color: var(--subtle); font-size: 12px; }
.sc-use-w { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 8px; flex: 1; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.sc-use-w span { color: var(--subtle); text-decoration: line-through; }
.sc-use-w b { color: var(--text); font-weight: 600; }
.sc-use-w .si { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 560px) { .sc-uses { grid-template-columns: minmax(0, 1fr); } }
.sc-book .sc-panel-h > span { margin-left: 0; display: flex; flex-direction: column; gap: 2px; }

/* paid call receipt */
.sc-rc .sc-sub { margin: 4px 0 10px; }
.sc-rc-r { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-2); }
.sc-rc-r b { color: var(--text); font-weight: 600; white-space: nowrap; }
.sc-rc-r.is-back b { color: var(--online); }
.sc-rc-r.is-sum { border-top-color: var(--border-3); }
.sc-rc-r.is-sum b { color: var(--accent); font-size: 15px; }

/* niche category rule */
.sc-rule-f { display: grid; gap: 6px; margin-top: 12px; }
.sc-rule .sc-st-sel.is-txt { height: auto; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; white-space: normal; }

/* About: what we look after */
.sc-care { padding: 18px; display: grid; gap: 10px; }
.sc-care .sc-panel-h { margin-bottom: 4px; }
.sc-care-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border); }
.sc-care-r b { display: block; color: var(--text); font-size: 14px; }
.sc-care-ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-12); border: 1px solid var(--accent-35); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sc-care-ic .si { width: 20px; height: 20px; }
@media (max-width: 480px) { .sc-care-r small { display: none; } .sc-care-ic { width: 36px; height: 36px; } .sc-care-r { grid-template-columns: 36px minmax(0, 1fr) auto; } }

/* Hosting: server status */
.sc-hs { padding: 18px; display: grid; gap: 14px; }
.sc-hs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sc-hs-s { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border); }
.sc-hs-s b { color: var(--text); font-size: 14px; }
.sc-hs-s small { grid-column: 2; }
.sc-hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 3px var(--accent-12); }
.sc-hs-trh { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.sc-hs-trh b { color: var(--text); font-weight: 600; }
.sc-hs-meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-4); overflow: hidden; }
.sc-hs-meter i { display: block; width: 42%; height: 100%; background: var(--accent); border-radius: inherit; }
.sc-hs-chart { display: flex; align-items: flex-end; gap: 6px; height: 84px; padding-top: 4px; }
.sc-hs-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent-35); }
.sc-hs-chart i:last-child { background: var(--accent); }
.sc-hs-chart i:nth-child(1) { height: 30%; }
.sc-hs-chart i:nth-child(2) { height: 42%; }
.sc-hs-chart i:nth-child(3) { height: 38%; }
.sc-hs-chart i:nth-child(4) { height: 55%; }
.sc-hs-chart i:nth-child(5) { height: 48%; }
.sc-hs-chart i:nth-child(6) { height: 62%; }
.sc-hs-chart i:nth-child(7) { height: 70%; }
.sc-hs-chart i:nth-child(8) { height: 58%; }
.sc-hs-chart i:nth-child(9) { height: 66%; }
.sc-hs-chart i:nth-child(10) { height: 80%; }
.sc-hs-chart i:nth-child(11) { height: 74%; }
.sc-hs-chart i:nth-child(12) { height: 88%; }
.sc-hs-chart i:nth-child(13) { height: 69%; }
.sc-hs-chart i:nth-child(14) { height: 77%; }
.sc-hs-cap { margin-top: -6px; }
@media (max-width: 480px) { .sc-hs-grid { grid-template-columns: minmax(0, 1fr); } }

/* Demo: one sign-in per side */
.sc-lgs { padding: 18px; display: grid; gap: 14px; }
.sc-lg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-lg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border); }
.sc-lg.is-main { border-color: var(--accent-35); }
.sc-lg .sc-care-ic { margin-bottom: 6px; }
.sc-lg b { color: var(--text); font-size: 14px; }
.sc-lg .sc-btn { margin-top: auto; align-self: stretch; text-align: center; }
.sc-lg small { margin-bottom: 10px; }
@media (max-width: 560px) { .sc-lg-row { grid-template-columns: minmax(0, 1fr); } .sc-lg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; } .sc-lg .sc-care-ic { grid-row: span 2; margin: 0; } .sc-lg .sc-btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; } .sc-lg small { margin: 0; } }