/* ============================================================ Design tokens. Pattern borrowed from ThreeUI's data-attribute theming (see README credit): data-scheme / data-palette / data-style on cascade CSS custom properties. The ad/prompt "card-native" subtree re-pins the same variable names to fixed Meta brand values, so it renders platform-accurate no matter which app theme is active. ============================================================ */ :root { color-scheme: dark; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bg: #18191a; --card: #242526; --card2: #3a3b3c; --border: #3e4042; --text: #e4e6eb; --text-dim: #b0b3b8; --accent: #2374e1; --green: #45bd62; --red: #f3425f; --amber: #f0b429; --safe: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); /* Fixed Meta brand tokens for the platform-accurate ad card (dark variant) */ --meta-bg: #18191a; --meta-card: #242526; --meta-card2: #3a3b3c; --meta-border: #3e4042; --meta-text: #e4e6eb; --meta-textdim: #b0b3b8; --meta-accent: #2374e1; } /* ---------- scheme: light / dark / system ---------- */ html[data-scheme="light"] { color-scheme: light; --bg: #f0f2f5; --card: #ffffff; --card2: #e4e6eb; --border: #d8dade; --text: #050505; --text-dim: #65676b; --meta-bg: #f0f2f5; --meta-card: #ffffff; --meta-card2: #e4e6eb; --meta-border: #d8dade; --meta-text: #050505; --meta-textdim: #65676b; } @media (prefers-color-scheme: light) { html:not([data-scheme]) { color-scheme: light; --bg: #f0f2f5; --card: #ffffff; --card2: #e4e6eb; --border: #d8dade; --text: #050505; --text-dim: #65676b; --meta-bg: #f0f2f5; --meta-card: #ffffff; --meta-card2: #e4e6eb; --meta-border: #d8dade; --meta-text: #050505; --meta-textdim: #65676b; } } /* ---------- accent palette (app chrome only — never the native ad card) ---------- */ html[data-palette="emerald"] { --accent: #16a34a; } html[data-palette="amber"] { --accent: #d97706; } html[data-palette="rose"] { --accent: #e11d48; } html[data-palette="violet"] { --accent: #7c3aed; } /* ---------- shell style variants (app chrome only) ---------- */ html[data-style="glass"] .card:not(.card-native), html[data-style="glass"] .sheet, html[data-style="glass"] .chip, html[data-style="glass"] .mic-chip, html[data-style="glass"] .list-item, html[data-style="glass"] .subnav button, html[data-style="glass"] .login-box input, html[data-style="glass"] .onboard-card { background: rgba(36, 37, 38, 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-color: rgba(255, 255, 255, 0.14); } html[data-style="glass"][data-scheme="light"] .card:not(.card-native), html[data-style="glass"][data-scheme="light"] .sheet, html[data-style="glass"][data-scheme="light"] .chip, html[data-style="glass"][data-scheme="light"] .mic-chip, html[data-style="glass"][data-scheme="light"] .list-item, html[data-style="glass"][data-scheme="light"] .subnav button, html[data-style="glass"][data-scheme="light"] .login-box input, html[data-style="glass"][data-scheme="light"] .onboard-card { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.08); } html[data-style="glass"] .topbar, html[data-style="glass"] .tabbar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: color-mix(in srgb, var(--bg) 75%, transparent); } html[data-style="minimal"] { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 4px; } html[data-style="minimal"] .card:not(.card-native), html[data-style="minimal"] .chip, html[data-style="minimal"] .sheet, html[data-style="minimal"] .list-item, html[data-style="minimal"] .login-box input, html[data-style="minimal"] .onboard-card { border-width: 2px; box-shadow: none; border-radius: var(--radius-md); } html[data-style="minimal"] .outcomes button, html[data-style="minimal"] .mic-chip, html[data-style="minimal"] .cancel, html[data-style="minimal"] .confirm, html[data-style="minimal"] .login-box button { border-radius: var(--radius-sm); } html[data-style="editorial"] { --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; } html[data-style="editorial"] .topbar .title, html[data-style="editorial"] .login-box h1, html[data-style="editorial"] .empty-state .big, html[data-style="editorial"] .sheet h2, html[data-style="editorial"] .onboard-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2px; } html[data-style="editorial"] .content { padding: 18px 16px 12px; } html[data-style="editorial"] .outcomes { gap: 12px; } html[data-style="editorial"] .card:not(.card-native) { border-radius: 4px; } /* ---------- style: Ledger (default) ---------- Ported verbatim from vp0.com/source/ledger-business (VP0 "Ledger — Business" React Native starter, fetched via api.vp0.com/designs/ledger-business/manifest) — dark ledger/fintech canvas, mint accent, KPI-tile + chart-card + pill patterns. Wins over scheme (Ledger has no light variant in the source) and over the generic accent palette (its mint accent is part of the design, not a swap). */ html[data-style="ledger"] { --bg: #07120D; --card: #0C1C16; --card2: #0B1813; --border: rgba(111, 175, 149, 0.14); --text: #E6F2EC; --text-dim: #6FAF95; --accent: #34D399; --green: #34D399; --red: #F87171; --amber: #FBBF24; } html[data-style="ledger"] .list-item { background: var(--card2); } html[data-style="ledger"] .outcomes .reject-btn { background: color-mix(in srgb, var(--red) 13%, transparent); border-color: transparent; } html[data-style="ledger"] .outcomes .revision-btn { background: color-mix(in srgb, var(--amber) 13%, transparent); border-color: transparent; } html[data-style="ledger"] .outcomes .approve-btn { background: color-mix(in srgb, var(--green) 13%, transparent); border-color: transparent; } html[data-style="ledger"] .toast { background: var(--card2); } html[data-style="ledger"] .topbar { display: none; } html[data-style="ledger"] .content { padding: 22px 22px 8px; } html[data-style="ledger"] .subnav { padding: 8px 22px; } /* Ledger header: kicker + friendly h1, replaces the plain topbar title */ .ledger-header { display: none; padding: calc(16px + var(--safe-top)) 22px 6px; } html[data-style="ledger"] .ledger-header { display: block; } .ledger-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin: 0 0 6px; } .ledger-h1 { font-size: 30px; font-weight: 800; color: #fff; margin: 0; } /* KPI grid: 2-column tiles reused across Ads/Prompts/Optimizations queues */ .kpi-grid { display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px; margin: 14px 0 6px; } html[data-style="ledger"] .kpi-grid:not(:empty) { display: grid; } .kpi-tile { background: var(--card); border-radius: 16px; padding: 16px; } .kpi-label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 0; } .kpi-value { font-size: 24px; font-weight: 800; color: #fff; margin: 8px 0 0; } .kpi-delta { font-size: 13px; font-weight: 700; margin: 4px 0 0; } /* Chart card wrapper around the hand-rolled inline SVG charts (no-op outside Ledger) */ html[data-style="ledger"] .chart-card { background: var(--card); border-radius: 18px; padding: 12px; } html[data-style="ledger"] .chart-card.tall { height: 110px; display: flex; align-items: flex-end; } html[data-style="ledger"] .chart-svg rect { rx: 5px; } html[data-style="ledger"] .chart-svg .bar-pos, html[data-style="ledger"] .chart-svg .funnel-fill { fill: #34D399; } html[data-style="ledger"] .chart-svg .bar-neg { fill: #F87171; } html[data-style="ledger"] .chart-svg .chart-gridline { stroke: rgba(230, 242, 236, 0.14); } html[data-style="ledger"] .chart-svg .line-spend { stroke: #6FAF95; } html[data-style="ledger"] .chart-svg .line-rev { stroke: #34D399; } html[data-style="ledger"] .chart-svg .funnel-track { fill: rgba(111, 175, 149, 0.16); } html[data-style="ledger"] .chart-svg .funnel-text-dim, html[data-style="ledger"] .chart-svg .funnel-text { fill: #E6F2EC; } html[data-style="ledger"] .dot.spend { background: #6FAF95; } /* Status pill: color at 13% alpha background + the color as text, 13px/700 */ .status-pill { display: none; border-radius: 12px; padding: 6px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; } html[data-style="ledger"] .status-pill { display: inline-flex; align-items: center; } .status-pill.approve, .status-pill.top { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); } .status-pill.testing { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); } /* ---------- card-native: forces the ad/prompt/optimization card frame back to fixed Meta brand values regardless of style/palette (scheme still applies, matching how Meta itself renders light vs dark mode). ---------- */ .card.card-native { --bg: var(--meta-bg); --card: var(--meta-card); --card2: var(--meta-card2); --border: var(--meta-border); --text: var(--meta-text); --text-dim: var(--meta-textdim); --accent: var(--meta-accent); border-radius: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-width: 1px !important; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; height: 100%; overscroll-behavior-y: none; } #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } button { font-family: inherit; } input, textarea { font-family: inherit; } /* ---------- Login ---------- */ .login-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-box { width: 100%; max-width: 340px; text-align: center; } .login-box h1 { font-size: 22px; margin: 0 0 4px; } .login-box p { color: var(--text-dim); font-size: 14px; margin: 0 0 24px; } .login-box input { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 16px; margin-bottom: 12px; } .login-box button { width: 100%; padding: 14px 16px; border-radius: 10px; border: none; background: var(--accent); color: white; font-size: 16px; font-weight: 600; } .login-error { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 16px; } /* ---------- Shell ---------- */ .topbar { padding: calc(10px + var(--safe-top)) 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 5; } .topbar .title { font-size: 17px; font-weight: 700; } .topbar .progress { font-size: 13px; color: var(--text-dim); } .subnav { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); } .subnav button { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; } .subnav button.active { background: var(--card2); color: var(--text); border-color: var(--card2); } .content { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 8px; position: relative; display: flex; flex-direction: column; } .tabbar { display: flex; border-top: 1px solid var(--border); background: var(--bg); padding-bottom: var(--safe); } .tabbar button { flex: 1; border: none; background: transparent; color: var(--text-dim); padding: 10px 4px 8px; font-size: 12px; font-weight: 600; position: relative; } .tabbar button.active { color: var(--accent); } .tabbar .badge { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: white; font-size: 10px; line-height: 16px; font-weight: 700; } /* ---------- Deck / card ---------- */ .deck { position: relative; flex: 1 1 auto; min-height: 320px; } .card { position: absolute; inset: 0; background: var(--card); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; touch-action: pan-y; will-change: transform; } .card.behind-1 { transform: scale(0.97) translateY(10px); z-index: 1; opacity: 0.9; } .card.behind-2 { transform: scale(0.94) translateY(18px); z-index: 0; opacity: 0.75; } .card.top { z-index: 2; } .card.dragging { transition: none; } .card.snap { transition: transform 0.28s cubic-bezier(.2,.8,.2,1); } .card.fly { transition: transform 0.35s ease-out, opacity 0.35s ease-out; } .stamp { position: absolute; top: 22px; padding: 6px 14px; border: 3px solid; border-radius: 8px; font-weight: 900; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; opacity: 0; z-index: 5; pointer-events: none; } .stamp.approve { right: 18px; color: var(--green); border-color: var(--green); transform: rotate(-8deg); } .stamp.reject { left: 18px; color: var(--red); border-color: var(--red); transform: rotate(8deg); } .stamp.revision { left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-4deg); color: var(--amber); border-color: var(--amber); } .card-row1 { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; } .card-row1 .who { display: flex; align-items: center; gap: 8px; min-width: 0; } .avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg,#3a3b3c,#57585a); flex: 0 0 auto; display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:700; color:var(--text-dim); } .who-text { min-width: 0; } .page-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; } .sponsored { font-size: 12px; color: var(--text-dim); display:flex; align-items:center; gap:3px; } .platform-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: 0 0 auto; } .platform-toggle button { border: none; background: transparent; color: var(--text-dim); font-size: 11px; font-weight: 800; padding: 5px 9px; } .platform-toggle button.active { background: var(--accent); color: white; } /* SP -> EN copy toggle: sits under the FB/IG pill, same visual language, deliberately quieter so the Meta-native preview stays the dominant read. */ .toggle-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; } .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: 0 0 auto; } .lang-toggle button { border: none; background: transparent; color: var(--text-dim); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 8px; } .lang-toggle button.active { background: var(--text-dim); color: var(--bg); } .en-note { padding: 6px 12px 10px; font-size: 10px; line-height: 1.3; color: var(--text-dim); font-style: italic; } .prompt-script-en { opacity: 0.85; } .primary-text { padding: 0 12px 10px; font-size: 14px; line-height: 1.35; } .primary-text .more { color: var(--text-dim); font-weight: 600; } .media-wrap { position: relative; flex: 1; min-height: 0; background: #000; display:flex; align-items:center; justify-content:center; overflow:hidden; } .media-wrap video, .media-wrap .poster { width: 100%; height: 100%; object-fit: contain; background:#000; } .mute-btn { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); color: white; font-size: 15px; display:flex;align-items:center;justify-content:center; } .prompt-scroll { flex:1; overflow-y:auto; padding: 4px 14px 14px; font-size:15px; line-height:1.5; white-space: pre-wrap; } .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); } .headline { font-size: 13px; font-weight: 700; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cta-btn { flex: 0 0 auto; background: var(--card2); color: var(--text); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; } .description { padding: 0 12px 12px; font-size: 12px; color: var(--text-dim); } /* fb vs ig skin */ .card.skin-ig .card-row1 { padding-top: 12px; } .card.skin-ig .page-name { font-size: 13px; font-weight: 700; } .card.skin-ig .avatar { border: 2px solid var(--red); background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b 50%, #8134af 80%); } .card.skin-ig .cta-btn { background: transparent; border: 1px solid var(--card2); } .card.skin-ig .cta-row { border-top: none; } /* ---------- prompt card ---------- */ .prompt-toprow { display: flex; gap: 8px; padding: 12px 12px 0; align-items: flex-start; } .prompt-id-box { flex: 0 0 auto; background: var(--card2); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 800; } .prompt-hook { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.3; padding-top: 4px; } .label-tiny { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); padding: 10px 12px 4px; } .prompt-script { margin: 0 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1.4; max-height: 88px; overflow-y: auto; color: var(--text-dim); white-space: pre-wrap; } .prompt-block-wrap { position: relative; flex: 1; margin: 0 12px 12px; margin-top: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .prompt-block { flex: 1; overflow-y: auto; padding: 30px 12px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); } .copy-btn { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; padding: 5px 9px; border-radius: 6px; } .copy-btn.copied { color: var(--green); border-color: var(--green); } .empty-block { color: var(--text-dim); font-size: 12px; font-style: italic; padding: 10px 12px; } /* ---------- outcome buttons ---------- */ .outcomes { display: flex; gap: 8px; margin-top: 10px; flex-shrink: 0; } .outcomes button { flex: 1; padding: 13px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; } .outcomes .reject-btn { color: var(--red); } .outcomes .revision-btn { color: var(--amber); } .outcomes .approve-btn { color: var(--green); } .outcomes button:active { transform: scale(0.96); } .outcomes.two button { padding: 14px 4px; } /* ---------- chip row ---------- */ .chiprow { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; flex-shrink: 0; } .chip { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-size: 11px; color: var(--text-dim); overflow:hidden; } .chip b { display:block; color: var(--text); font-size: 12px; font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip .sub { margin-top: 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mic-chip { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: var(--accent); font-size: 20px; position: relative; } .mic-chip.recording { color: var(--red); border-color: var(--red); } .mic-chip .rec-time { position:absolute; bottom:3px; font-size:9px; color: var(--text-dim); } .mic-chip.has-clip { color: var(--green); border-color: var(--green); } /* ---------- empty state ---------- */ .empty-state { text-align: center; padding: 60px 20px 20px; } .empty-state .big { font-size: 22px; font-weight: 700; margin-bottom: 6px; } .empty-state .sub { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; } .approved-mini { text-align: left; max-width: 360px; margin: 0 auto; } .approved-mini h3 { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .approved-mini-row { display:flex; gap:10px; align-items:center; padding: 8px 0; border-bottom: 1px solid var(--border); } .approved-mini-row img, .approved-mini-row .ph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--card2); flex: 0 0 auto; } .approved-mini-row .name { font-size: 13px; font-weight: 600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .approved-mini-row .meta { font-size: 11px; color: var(--text-dim); } /* ---------- list views (approved / top / testing) ---------- */ .list-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--card); align-items: center; } .list-item .thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--card2); flex: 0 0 auto; } .list-item .body { min-width: 0; flex: 1; } .list-item .name { font-weight: 700; font-size: 14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .list-item .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .list-item .metrics { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; } .list-item .metrics span { font-size: 11px; color: var(--text-dim); } .list-item .metrics b { color: var(--text); } /* ---------- optimization card ---------- */ .opt-toprow { display: flex; gap: 8px; padding: 12px 12px 0; } .opt-suggestion { padding: 10px 12px; font-size: 15px; font-weight: 800; line-height: 1.3; } .opt-analysis-wrap { flex: 1; overflow-y: auto; margin: 0 12px 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; min-height: 0; } .opt-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .opt-metrics .m { background: var(--card2); border-radius: 8px; padding: 6px 10px; font-size: 12px; } .opt-metrics .m b { display: block; font-size: 14px; } .chart-block { margin-top: 12px; } .chart-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 4px; } .dot.spend { background: #b0b3b8; } .dot.rev { background: var(--accent); } .opt-reasoning { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; } /* Inline SVG chart color hooks (default = Meta-ish, overridden per data-style="ledger" above) */ .chart-card { border-radius: 0; } .chart-svg .bar-pos { fill: #45bd62; } .chart-svg .bar-neg { fill: #f3425f; } .chart-svg .chart-gridline { stroke: #3a3b3c; } .chart-svg .line-spend { stroke: #b0b3b8; } .chart-svg .line-rev { stroke: #2374e1; } .chart-svg .funnel-track { fill: #3a3b3c; } .chart-svg .funnel-fill { fill: #f0b429; } .chart-svg .funnel-text-dim { fill: #b0b3b8; } .chart-svg .funnel-text { fill: #e4e6eb; } .mic-row { display: flex; justify-content: center; margin-top: 10px; flex-shrink: 0; } .mic-chip.standalone { flex: 0 0 auto; width: 100px; } /* ---------- panel / sheet ---------- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; z-index: 30; } .sheet { width: 100%; background: var(--card); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + var(--safe)); border-top: 1px solid var(--border); } .sheet h2 { font-size: 16px; margin: 0 0 4px; } .sheet .hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; } .sheet textarea { width: 100%; min-height: 80px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 10px 12px; font-size: 14px; resize: vertical; margin-bottom: 12px; } .sheet .rec-row { display:flex; align-items:center; gap: 10px; margin-bottom: 14px; } .sheet .rec-btn { width: 46px; height: 46px; border-radius: 999px; border: none; background: var(--accent); color: white; font-size: 18px; flex: 0 0 auto; } .sheet .rec-btn.recording { background: var(--red); } .sheet .rec-status { font-size: 13px; color: var(--text-dim); } .sheet .clip-actions button { background: none; border: none; color: var(--red); font-size: 12px; } .sheet-actions { display: flex; gap: 10px; } .sheet-actions button { flex: 1; padding: 13px; border-radius: 10px; border: none; font-size: 14px; font-weight: 700; } .sheet-actions .cancel { background: var(--card2); color: var(--text); } .sheet-actions .confirm { background: var(--accent); color: white; } .sheet-actions .confirm:disabled { opacity: 0.4; } .sheet-actions .confirm.revision { background: var(--amber); color: #1a1300; } .toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe)); transform: translateX(-50%); background: #2a2b2c; border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 999px; font-size: 13px; display: flex; align-items: center; gap: 12px; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .toast button { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; } .gear-btn { flex: 0 0 44px !important; font-size: 17px !important; } /* ---------- onboarding / settings ---------- */ .onboard-overlay { position: fixed; inset: 0; background: var(--bg); color: var(--text); z-index: 50; display: flex; flex-direction: column; padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe)); overflow-y: auto; } .onboard-close { position: absolute; top: calc(16px + var(--safe-top)); right: 16px; background: none; border: none; color: var(--text-dim); font-size: 18px; } .onboard-steps { display: flex; gap: 6px; margin: 24px 0 20px; } .onboard-steps .dot { flex: 1; height: 4px; border-radius: 999px; background: var(--card2); } .onboard-steps .dot.done, .onboard-steps .dot.active { background: var(--accent); } .onboard-title { font-size: 20px; font-weight: 800; margin: 6px 0 4px; } .onboard-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; } .onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .onboard-card { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); padding: 14px; text-align: left; } .onboard-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .onboard-card .swatch { height: 34px; border-radius: 8px; margin-bottom: 10px; } .onboard-card b { display: block; font-size: 13px; margin-bottom: 2px; color: var(--text); } .onboard-card span { font-size: 11px; color: var(--text-dim); } .onboard-row { display: flex; gap: 10px; margin-bottom: 24px; } .onboard-row button { flex: 1; padding: 12px 4px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; } .onboard-row button.selected { border-color: var(--accent); color: var(--accent); } .palette-row { display: flex; gap: 12px; margin-bottom: 24px; } .palette-swatch { width: 40px; height: 40px; border-radius: 999px; border: 2px solid transparent; } .palette-swatch.selected { border-color: var(--text); } .onboard-preview { flex: 1; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .onboard-actions { display: flex; gap: 10px; margin-top: auto; } .onboard-actions button { flex: 1; padding: 14px; border-radius: var(--radius-md); border: none; font-size: 14px; font-weight: 700; } .onboard-actions .back { background: var(--card2); color: var(--text); } .onboard-actions .next { background: var(--accent); color: white; } .loading, .err-box { padding: 40px 20px; text-align: center; color: var(--text-dim); } .err-box { color: var(--red); } ::-webkit-scrollbar { width: 0; height: 0; } /* ============================================================ data-style="duo" — Duolingo-inspired shell. Signatures borrowed: chunky 16px geometry, 2px borders, a rounded display face, saturated primaries, and above all the "3D" button — a solid fill sitting on a darker bottom edge that compresses under the thumb. The .card-native ad preview is deliberately excluded so the Meta/IG mock stays platform-accurate. PALETTE SWAP POINT: every colour below is declared once here. To re-theme (e.g. onto Nova's identity) repoint these six --duo-* pairs and nothing else needs to change. ============================================================ */ html[data-style="duo"] { --duo-green: #58CC02; --duo-green-edge: #48A800; --duo-blue: #1CB0F6; --duo-blue-edge: #1899D6; --duo-red: #FF4B4B; --duo-red-edge: #E23D3D; --duo-amber: #FFC800; --duo-amber-edge: #E0AF00; --duo-ink: #3C3C3C; --duo-dim: #AFAFAF; --duo-line: #E5E5E5; --duo-surface: #FFFFFF; --duo-canvas:#F7F7F7; color-scheme: light; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 16px; --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", "Varela Round", system-ui, sans-serif; --bg: var(--duo-canvas); --card: var(--duo-surface); --card2: #F0F0F0; --border: var(--duo-line); --text: var(--duo-ink); --text-dim: var(--duo-dim); --accent: var(--duo-blue); --green: var(--duo-green); --red: var(--duo-red); --amber: var(--duo-amber); } html[data-style="duo"] body { font-family: var(--font-display); } /* Chunky 2px-bordered surfaces */ html[data-style="duo"] .card:not(.card-native), html[data-style="duo"] .sheet, html[data-style="duo"] .chip, html[data-style="duo"] .mic-chip, html[data-style="duo"] .list-item, html[data-style="duo"] .login-box input, html[data-style="duo"] .onboard-card { border: 2px solid var(--duo-line); border-radius: var(--radius-md); background: var(--duo-surface); box-shadow: none; } /* The signature: solid fill on a darker edge, compressing on press. */ html[data-style="duo"] .outcomes button { border: none; border-radius: var(--radius-md); padding: 15px 4px 15px; font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; transition: transform 60ms ease, box-shadow 60ms ease; } html[data-style="duo"] .outcomes .approve-btn { background: var(--duo-green); box-shadow: 0 4px 0 var(--duo-green-edge); } html[data-style="duo"] .outcomes .revision-btn { background: var(--duo-amber); box-shadow: 0 4px 0 var(--duo-amber-edge); color: #7A5C00; } html[data-style="duo"] .outcomes .reject-btn { background: var(--duo-red); box-shadow: 0 4px 0 var(--duo-red-edge); } html[data-style="duo"] .outcomes button:active { transform: translateY(4px); box-shadow: none; } html[data-style="duo"] .outcomes { gap: 10px; margin-top: 14px; } /* Chrome: flat, bordered, bold */ html[data-style="duo"] .topbar { background: var(--duo-surface); border-bottom: 2px solid var(--duo-line); } html[data-style="duo"] .topbar .title { font-weight: 800; letter-spacing: -0.01em; } html[data-style="duo"] .tabbar { background: var(--duo-surface); border-top: 2px solid var(--duo-line); } html[data-style="duo"] .tabbar button { font-weight: 800; } html[data-style="duo"] .tabbar button.active { color: var(--duo-blue); } html[data-style="duo"] .subnav button { border: 2px solid var(--duo-line); border-radius: 999px; background: var(--duo-surface); color: var(--duo-dim); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } html[data-style="duo"] .subnav button.active { background: #DDF4FF; border-color: var(--duo-blue); color: #1878A8; } html[data-style="duo"] .chip b { font-weight: 800; } html[data-style="duo"] .label-tiny { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; color: var(--duo-dim); } /* Stamps read as loud badges rather than thin outlines */ html[data-style="duo"] .stamp { border-radius: 14px; border-width: 4px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } html[data-style="duo"] .lang-toggle button.active { background: var(--duo-blue); color: #fff; } html[data-style="duo"] .empty-state .big { font-weight: 800; font-size: 20px; } /* Dark variant — same accents, Duolingo's night palette */ html[data-style="duo"][data-scheme="dark"] { color-scheme: dark; --duo-surface: #131F24; --duo-canvas: #0F171A; --duo-line: #2C3B41; --duo-ink: #F1F7FB; --duo-dim: #8FA3AD; --card2: #1C2A30; }