/* ════════════════════════════════════════════════════════════════════════ Brainpost mockup — design tokens + components Hybrid system: Light = "A Figma Clean" shapes (8px controls, grey-filled borderless inputs, 16px cards, grey nav tiles, solid brand-blue active item, blue-tint secondary buttons) + "C Bright Glass" ambience (soft blue/cyan page glow, frosted cards, brand-gradient heroes with a faint "Brain" watermark, gold gradient CTA). Dark = pure "C Bright Glass" (midnight #070B1F, pill controls/tabs, 22px cards, cyan active states). Source of truth: Brainpost/src/index.css + tailwind.config.ts Theme lives on (set by assets/app.js). ════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Raw brand palette (HSL triplets so `/ alpha` works) */ --brand-blue: 225 99% 45%; /* #013AE3 */ --brand-cyan: 190 99% 50%; /* #01D2FD */ --brand-navy: 229 63% 35%; /* #213693 */ --brand-mint: 149 85% 58%; /* #37EF91 */ --brand-orange: 16 100% 63%; /* #FF7542 */ --brand-gold: 40 100% 67%; /* #FFC859 */ --brand-purple: 245 91% 69%; /* #7569F8 */ --brand-ink: 240 6% 15%; /* #26262A */ /* Surfaces */ --background: 222 100% 98%; /* #F6F9FF */ --foreground: 240 6% 15%; --card: 0 0% 100%; --glass-fill: hsl(0 0% 100% / .72); --glass-edge: hsl(0 0% 100% / .7); --popover: 0 0% 100%; /* Roles */ --primary: 225 99% 45%; --primary-fg: 0 0% 100%; --primary-hover: 225 99% 38%; --active: 225 99% 45%; /* active-state accent: blue (light) / cyan (dark) */ --muted: 222 30% 95%; --fill: 225 20% 96%; /* grey-filled inputs + nav tiles */ --muted-fg: 226 12% 47%; --accent: 225 100% 96%; /* hover surface — faint blue */ --accent-fg: 225 99% 45%; --destructive: 16 88% 50%; --destructive-fg: 0 0% 100%; --success: 149 80% 34%; --warning: 40 95% 42%; --warning-text: 38 100% 26%; --border: 225 55% 92%; --ring: 225 99% 45%; /* Sidebar */ --sidebar: hsl(0 0% 100% / .8); --sidebar-border: 225 55% 94%; --sidebar-fg: 229 12% 22%; --nav-tile: hsl(225 20% 96%); --nav-tile-hover: hsl(225 100% 95%); --nav-active-bg: hsl(225 99% 45%); --nav-active-fg: #fff; --nav-active-shadow: 0 8px 18px -10px hsl(225 99% 45% / .8); /* Shape — A "Figma Clean" */ --r-ctl: 8px; /* buttons, inputs, tabs, chips */ --r-ta: 8px; /* textareas */ --r-tile: 12px; /* nav tiles, list rows, menus items */ --r-card: 16px; --r-menu: 12px; /* Elevation — blue-tinted, soft */ --shadow-sm: 0 1px 3px hsl(225 99% 45% / .06); --shadow-md: 0 8px 24px -12px hsl(225 99% 45% / .22); --shadow-lg: 0 20px 50px -20px hsl(225 99% 45% / .28); --shadow-card: inset 0 1px 0 hsl(0 0% 100% / .9), 0 20px 50px -20px hsl(225 99% 45% / .22); --shadow-menu: 0 24px 60px -16px hsl(225 99% 45% / .30); --shadow-cta: 0 8px 20px -10px hsl(38 95% 50% / .9); --shadow-primary: 0 8px 18px -10px hsl(225 99% 45% / .8); --gradient-cta: linear-gradient(180deg, #FFD57A 0%, #FFC859 55%, #F5B634 100%); --gradient-brand: linear-gradient(145deg, #013AE3 0%, #0A5BF0 55%, #01D2FD 130%); --glow-1: hsl(190 99% 50% / .28); --glow-2: hsl(225 99% 45% / .16); --chart-1: 225 99% 45%; --chart-2: 190 99% 50%; --chart-3: 40 100% 60%; --chart-4: 245 91% 69%; --chart-5: 149 80% 45%; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: 180ms; --dur-base: 300ms; --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; --font-body: 'Satoshi', ui-sans-serif, system-ui, sans-serif; } /* Dark — pure "C Bright Glass": midnight, glass at low opacity, pills, cyan */ [data-theme="dark"] { color-scheme: dark; --background: 231 63% 7%; /* #070B1F */ --foreground: 226 100% 96%; --card: 230 45% 12%; --glass-fill: hsl(0 0% 100% / .06); --glass-edge: hsl(0 0% 100% / .08); --popover: 230 50% 14%; --primary: 225 100% 58%; --primary-fg: 0 0% 100%; --primary-hover: 225 100% 64%; --active: 190 99% 50%; --muted: 230 40% 15%; --fill: 230 35% 16%; --muted-fg: 226 25% 70%; --accent: 205 70% 16%; --accent-fg: 190 99% 60%; --destructive: 16 100% 62%; --destructive-fg: 231 63% 7%; --success: 149 85% 58%; --warning: 40 100% 67%; --warning-text: 40 100% 67%; --border: 230 35% 20%; --ring: 190 99% 50%; --sidebar: hsl(0 0% 100% / .03); --sidebar-border: 0 0% 100% / .07; --sidebar-fg: 226 45% 88%; --nav-tile: hsl(0 0% 100% / .04); --nav-tile-hover: hsl(0 0% 100% / .08); --nav-active-bg: hsl(190 99% 50% / .14); --nav-active-fg: hsl(190 99% 58%); --nav-active-shadow: inset 0 0 0 1px hsl(190 99% 50% / .35), 0 0 22px -8px hsl(190 99% 50% / .55); /* Shape — C "Bright Glass": pills, rounder cards and menus */ --r-ctl: 999px; --r-ta: 18px; --r-tile: 16px; --r-card: 22px; --r-menu: 18px; --shadow-sm: 0 1px 3px rgb(0 0 0 / .4); --shadow-md: 0 8px 24px -12px rgb(0 0 0 / .6); --shadow-lg: 0 20px 50px -20px rgb(0 0 0 / .7); --shadow-card: inset 0 1px 0 hsl(0 0% 100% / .06), 0 20px 50px -20px rgb(0 0 0 / .7); --shadow-menu: 0 24px 60px -16px rgb(0 0 0 / .8); --shadow-primary: 0 8px 18px -10px hsl(225 100% 58% / .7); --glow-1: hsl(190 99% 50% / .22); --glow-2: hsl(225 99% 58% / .26); --chart-1: 225 100% 62%; --chart-2: 190 99% 50%; --chart-3: 40 100% 67%; --chart-4: 245 91% 74%; --chart-5: 149 85% 58%; } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: hsl(var(--foreground)); background-color: hsl(var(--background)); background-image: radial-gradient(40rem 32rem at 100% 0%, var(--glow-1), transparent 70%), radial-gradient(36rem 30rem at 0% 100%, var(--glow-2), transparent 70%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; line-height: 1.2; letter-spacing: -0.02em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 16px 0; } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } ::selection { background: hsl(var(--primary) / .18); } .ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ic-xs { width: 12px; height: 12px; } .ic-sm { width: 14px; height: 14px; } .ic-md { width: 18px; height: 18px; } .ic-lg { width: 20px; height: 20px; } .ic-xl { width: 24px; height: 24px; } .ic-2xl { width: 28px; height: 28px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: hsl(var(--card)); padding: 10px 14px; border-radius: var(--r-ctl); box-shadow: var(--shadow-md); font-weight: 700; } .skip-link:focus { top: 12px; } /* ── Type helpers ───────────────────────────────────────────────────────── */ .display { font-family: var(--font-display); letter-spacing: -0.02em; } .page-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .page-sub { margin-top: 4px; color: hsl(var(--muted-fg)); } .h-card { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .h-sm { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .h-xs { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-fg)); } .muted { color: hsl(var(--muted-fg)); } .t-xs { font-size: 11px; } .t-11 { font-size: 11.5px; } .t-12 { font-size: 12.5px; } .t-13 { font-size: 13px; } .t-sm { font-size: 13.5px; } .t-15 { font-size: 15px; } .t-lg { font-size: 18px; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; } .num { font-variant-numeric: tabular-nums; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .t-primary { color: hsl(var(--primary)); } [data-theme="dark"] .t-primary { color: hsl(var(--brand-cyan)); } .t-success { color: hsl(var(--success)); } .t-danger { color: hsl(var(--destructive)); } .t-warning { color: hsl(var(--warning-text)); } .t-purple { color: hsl(var(--brand-purple)); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .link { color: hsl(var(--primary)); font-weight: 700; } .link:hover { text-decoration: underline; text-underline-offset: 4px; } [data-theme="dark"] .link { color: hsl(var(--brand-cyan)); } .underline { text-decoration: underline; text-underline-offset: 3px; } /* ── Layout helpers ─────────────────────────────────────────────────────── */ .row { display: flex; align-items: center; gap: 8px; } .row-top { display: flex; align-items: flex-start; gap: 12px; } .between { justify-content: space-between; } .end { justify-content: flex-end; } .center { justify-content: center; } .wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; } .grow { flex: 1; min-width: 0; } .shrink-0 { flex-shrink: 0; } .ml-auto { margin-left: auto; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .stack > * + * { margin-top: 16px; } .stack-sm > * + * { margin-top: 8px; } .stack-md > * + * { margin-top: 12px; } .stack-lg > * + * { margin-top: 24px; } .stack-xl > * + * { margin-top: 32px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .w-full { width: 100%; } .center-text { text-align: center; } .right-text { text-align: right; } .mx-auto { margin-left: auto; margin-right: auto; } .max-6xl { max-width: 1152px; margin-inline: auto; } .max-7xl { max-width: 1280px; margin-inline: auto; } .max-sm { max-width: 384px; } .max-md { max-width: 448px; } .max-lg { max-width: 560px; } .relative { position: relative; } .hidden { display: none !important; } .grid { display: grid; gap: 16px; } .g-2, .g-3, .g-4, .g-kpi { display: grid; gap: 16px; } @media (min-width: 640px) { .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4, .g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .g-stats { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { .g-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── Surfaces ───────────────────────────────────────────────────────────── */ .card { background-color: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: var(--r-card); } .card-solid { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); } [data-theme="dark"] .card-solid { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .08); } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; } .soft { background: hsl(var(--muted) / .6); border-radius: var(--r-tile); } [data-theme="dark"] .soft { background: hsl(0 0% 100% / .04); } .dashed-box { border: 1px dashed hsl(var(--border)); border-radius: var(--r-tile); } /* Brand-gradient hero with the faint giant "Brain" watermark */ .hero { position: relative; overflow: hidden; border-radius: var(--r-card); background-image: var(--gradient-brand); color: #fff; padding: 24px; } .hero > * { position: relative; } .hero .hero-mark { position: absolute; right: -20px; bottom: -40px; font-family: var(--font-display); font-size: 140px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; opacity: .08; pointer-events: none; user-select: none; } .hero-eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .hero-title { margin-top: 6px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .hero-sub { margin-top: 8px; opacity: .85; } @media (max-width: 639px) { .hero-title { font-size: 26px; } } /* Ghost frame — dotted placeholder with a faint brand gradient */ .ghost { position: relative; overflow: hidden; border-radius: 12px; border: 2px dotted hsl(var(--primary) / .25); } [data-theme="dark"] .ghost { border-color: hsl(0 0% 100% / .15); } .ghost::before { content: ""; position: absolute; inset: 0; opacity: .10; background-image: linear-gradient(135deg, hsl(var(--brand-blue)), hsl(var(--brand-cyan))); pointer-events: none; } [data-theme="dark"] .ghost::before { opacity: .14; } .ghost.mint::before { background-image: linear-gradient(135deg, hsl(var(--brand-mint)), hsl(var(--brand-cyan))); } .ghost.purple::before { background-image: linear-gradient(135deg, hsl(var(--brand-purple)), hsl(var(--brand-blue))); } .ghost.gold::before { background-image: linear-gradient(135deg, hsl(var(--brand-gold)), hsl(var(--brand-orange))); } .ghost > * { position: relative; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; background: hsl(var(--primary)); color: hsl(var(--primary-fg)); box-shadow: var(--shadow-primary); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-base) var(--ease-spring); } .btn:hover { background: hsl(var(--primary-hover)); transform: translateY(-1px); } .btn:active { transform: scale(.97); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn .ic { width: 16px; height: 16px; } .btn-secondary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); box-shadow: none; } .btn-secondary:hover { background: hsl(var(--primary) / .15); } [data-theme="dark"] .btn-secondary { background: hsl(0 0% 100% / .08); color: hsl(var(--foreground)); border-color: hsl(0 0% 100% / .1); } [data-theme="dark"] .btn-secondary:hover { background: hsl(0 0% 100% / .12); } .btn-outline { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); box-shadow: none; } .btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } [data-theme="dark"] .btn-outline { background: hsl(0 0% 100% / .04); } .btn-ghost { background: transparent; color: hsl(var(--muted-fg)); box-shadow: none; } .btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } .btn-cta { background: var(--gradient-cta); color: hsl(var(--brand-ink)); box-shadow: var(--shadow-cta); } .btn-cta:hover { background: var(--gradient-cta); filter: brightness(1.03); } .btn-danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); box-shadow: none; } .btn-danger:hover { background: hsl(var(--destructive)); color: hsl(var(--destructive-fg)); } .btn-ink { background: hsl(var(--brand-ink)); color: #fff; box-shadow: var(--shadow-md); } .btn-ink:hover { background: hsl(var(--brand-ink) / .9); } .btn-white { background: #fff; color: hsl(var(--brand-blue)); box-shadow: none; } .btn-white:hover { background: hsl(0 0% 100% / .9); } .btn-link { background: none; box-shadow: none; color: hsl(var(--primary)); padding: 0; height: auto; } .btn-link:hover { background: none; text-decoration: underline; transform: none; } .btn-sm { height: 32px; padding: 0 14px; font-size: 13px; } .btn-xs { height: 28px; padding: 0 12px; font-size: 12px; } .btn-lg { height: 48px; padding: 0 32px; font-size: 15px; } .btn-icon { width: 40px; padding: 0; } .btn-icon-sm { width: 32px; height: 32px; padding: 0; } .btn-block { width: 100%; } .btn .cost { margin-left: 2px; padding-left: 8px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent); font-size: .92em; font-weight: 600; opacity: .85; } .btn-split { display: inline-flex; } .btn-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-split > .btn:last-child, .btn-split > [data-dropdown] > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid hsl(0 0% 100% / .25); } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } } .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-ctl); color: hsl(var(--muted-fg)); position: relative; transition: background var(--dur-fast), color var(--dur-fast); } .icon-btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } .icon-btn .dot-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: hsl(var(--destructive)); color: hsl(var(--destructive-fg)); font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; } /* Clickable chip (suggestions, filters, platform toggles). "Pill" controls become 8px in light (Figma Clean) and stay pills in dark (Bright Glass). */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-ctl); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); font-size: 12.5px; font-weight: 600; color: hsl(var(--muted-fg)); transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .4); } [data-theme="dark"] .chip { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); } .chip[aria-pressed="true"], .chip.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } [data-theme="dark"] .chip[aria-pressed="true"], [data-theme="dark"] .chip.is-on { border-color: hsl(var(--brand-cyan)); background: hsl(var(--brand-cyan) / .1); color: hsl(var(--brand-cyan)); } .chip.is-solid, .chip[aria-pressed="true"].solid { background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary)); box-shadow: var(--shadow-primary); } [data-theme="dark"] .chip.is-solid { background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary)); } .chip-md { padding: 8px 12px; font-size: 13px; } .chip-soft { border: 0; background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 500; font-size: 11.5px; padding: 5px 12px; box-shadow: var(--shadow-sm); } [data-theme="dark"] .chip-soft { background: hsl(0 0% 100% / .08); } /* Option tile (onboarding choices, tone picker, aspect picker) */ .option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; border-radius: var(--r-tile); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); font-size: 13.5px; font-weight: 600; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); } .option:hover { border-color: hsl(var(--primary) / .4); } [data-theme="dark"] .option { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); } .option[aria-pressed="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } [data-theme="dark"] .option[aria-pressed="true"] { border-color: hsl(var(--brand-cyan)); background: hsl(var(--brand-cyan) / .1); color: hsl(var(--brand-cyan)); } .option .check-mark { margin-left: auto; opacity: 0; } .option[aria-pressed="true"] .check-mark { opacity: 1; } .option.stacked { flex-direction: column; align-items: flex-start; gap: 2px; } .option .sub { font-size: 11.5px; font-weight: 400; color: hsl(var(--muted-fg)); } /* ── Form controls ──────────────────────────────────────────────────────── */ .label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; } .label .opt { font-weight: 400; color: hsl(var(--muted-fg)); font-size: 12px; } .help { margin-top: 6px; font-size: 11.5px; color: hsl(var(--muted-fg)); } .field + .field { margin-top: 16px; } .input, .select, .textarea { display: block; width: 100%; height: 40px; padding: 8px 14px; border-radius: var(--r-ctl); border: 1px solid transparent; background: hsl(var(--fill)); font-size: 14px; color: hsl(var(--foreground)); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .textarea { height: auto; min-height: 96px; border-radius: var(--r-ta); resize: vertical; line-height: 1.5; padding: 10px 14px; } [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background: hsl(0 0% 100% / .07); border-color: hsl(0 0% 100% / .1); padding-left: 16px; padding-right: 16px; } .input::placeholder, .textarea::placeholder { color: hsl(var(--muted-fg)); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 4px hsl(var(--ring) / .15); } .select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; font-weight: 500; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237580a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } [data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-color: hsl(0 0% 100% / .07); } .select option { background: hsl(var(--popover)); color: hsl(var(--foreground)); } .input-sm, .select-sm { height: 32px; font-size: 13px; } .input-wrap { position: relative; } .input-wrap > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-fg)); pointer-events: none; } .input-wrap > .ic + .input { padding-left: 38px; } .input-wrap .trail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-fg)); display: grid; place-items: center; } .input-wrap .trail:hover { color: hsl(var(--foreground)); } .input-wrap .input.has-trail { padding-right: 42px; } /* Checkbox */ .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; } .check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid hsl(var(--primary) / .6); background: hsl(var(--card)); display: grid; place-items: center; cursor: pointer; } .check input:checked { background: hsl(var(--primary)); border-color: hsl(var(--primary)); } .check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } /* Switch */ .switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px; background: hsl(var(--input, var(--border))); background: hsl(var(--muted-fg) / .3); transition: background var(--dur-fast); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform var(--dur-base) var(--ease-spring); } .switch[aria-checked="true"] { background: hsl(var(--primary)); } [data-theme="dark"] .switch[aria-checked="true"] { background: hsl(var(--brand-cyan)); } .switch[aria-checked="true"]::after { transform: translateX(20px); } .switch.on-gold[aria-checked="true"] { background: hsl(var(--brand-gold)); } /* OTP */ .otp { display: flex; gap: 10px; } .otp input { width: 52px; height: 58px; text-align: center; font-size: 22px; font-weight: 700; border-radius: var(--r-ctl); border: 1px solid transparent; background: hsl(0 0% 100% / .95); color: hsl(var(--brand-ink)); } [data-theme="dark"] .otp input { border-radius: 16px; } .otp input:focus { outline: none; box-shadow: 0 0 0 4px hsl(var(--brand-gold) / .5); } @media (max-width: 420px) { .otp { gap: 6px; } .otp input { width: 44px; height: 52px; } } /* ── Tabs (grey track, white active; dark: glass pill track, cyan) ───────── */ .tabs { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 4px; border-radius: calc(var(--r-ctl) + 2px); background: hsl(var(--fill)); color: hsl(var(--muted-fg)); max-width: 100%; overflow-x: auto; scrollbar-width: none; } [data-theme="dark"] .tabs { background: hsl(0 0% 100% / .05); border: 1px solid hsl(0 0% 100% / .1); border-radius: 999px; } .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 0 16px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .tab:hover { color: hsl(var(--foreground)); } .tab[aria-selected="true"] { background: hsl(var(--card)); color: hsl(var(--primary)); box-shadow: var(--shadow-md); } [data-theme="dark"] .tab[aria-selected="true"] { background: hsl(0 0% 100% / .1); color: hsl(var(--brand-cyan)); box-shadow: none; } .tab .count { border-radius: 999px; background: hsl(var(--muted)); padding: 0 6px; font-size: 11px; font-weight: 700; color: hsl(var(--muted-fg)); } .tabs.full { display: flex; width: 100%; } .tabs.full .tab { flex: 1; } .tabs-sm { height: 40px; } .tabs-sm .tab { padding: 0 12px; } [hidden] { display: none !important; } /* Segmented theme control */ .seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: calc(var(--r-ctl) + 2px); background: hsl(var(--fill)); } [data-theme="dark"] .seg { border: 1px solid hsl(0 0% 100% / .1); background: hsl(0 0% 100% / .05); border-radius: 999px; } .seg button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-ctl); color: hsl(var(--muted-fg)); } .seg button:hover { color: hsl(var(--foreground)); } .seg button[aria-checked="true"] { background: hsl(var(--card)); color: hsl(var(--primary)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .seg button[aria-checked="true"] { background: hsl(0 0% 100% / .1); color: hsl(var(--brand-cyan)); } /* ── Badges / status pills (tone-on-tone; never controls, always pills) ── */ .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 1px 10px; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } [data-theme="dark"] .badge { background: hsl(var(--primary) / .2); color: hsl(var(--brand-cyan)); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-muted { background: hsl(var(--muted)) !important; color: hsl(var(--muted-fg)) !important; } .badge-success { background: hsl(var(--brand-mint) / .2) !important; color: hsl(var(--success)) !important; } .badge-warning { background: hsl(var(--brand-gold) / .28) !important; color: hsl(var(--warning-text)) !important; } .badge-danger { background: hsl(var(--destructive) / .1) !important; color: hsl(var(--destructive)) !important; } .badge-purple { background: hsl(var(--brand-purple) / .15) !important; color: hsl(var(--brand-purple)) !important; } .badge-cyan { background: hsl(var(--brand-cyan) / .15) !important; color: hsl(192 100% 30%) !important; } [data-theme="dark"] .badge-cyan { color: hsl(var(--brand-cyan)) !important; } .badge-solid { background: hsl(var(--primary)) !important; color: #fff !important; } .badge-outline { background: transparent !important; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)) !important; } .badge-lg { padding: 3px 12px; font-size: 12px; } .count-pill { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: hsl(var(--brand-orange)); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; } /* Tinted icon discs */ .disc { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .disc-lg { width: 44px; height: 44px; } .disc-xl { width: 56px; height: 56px; border-radius: 16px; } .disc-sq { border-radius: 12px; } .tint-blue { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } [data-theme="dark"] .tint-blue { color: hsl(var(--brand-cyan)); } .tint-cyan { background: hsl(var(--brand-cyan) / .15); color: hsl(192 100% 30%); } [data-theme="dark"] .tint-cyan { color: hsl(var(--brand-cyan)); } .tint-gold { background: hsl(var(--brand-gold) / .25); color: hsl(38 100% 27%); } [data-theme="dark"] .tint-gold { color: hsl(var(--brand-gold)); } .tint-purple { background: hsl(var(--brand-purple) / .15); color: hsl(var(--brand-purple)); } .tint-mint { background: hsl(var(--brand-mint) / .2); color: hsl(var(--success)); } .tint-orange { background: hsl(var(--brand-orange) / .15); color: hsl(var(--destructive)); } .tint-danger { background: hsl(var(--destructive) / .15); color: hsl(var(--destructive)); } .tint-muted { background: hsl(var(--muted)); color: hsl(var(--muted-fg)); } .tint-grad { background-image: var(--gradient-brand); color: #fff; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bg-blue { background: hsl(var(--brand-blue)); } .bg-cyan { background: hsl(var(--brand-cyan)); } .bg-navy { background: hsl(var(--brand-navy)); } .bg-mint { background: hsl(var(--brand-mint)); } .bg-orange { background: hsl(var(--brand-orange)); } .bg-gold { background: hsl(var(--brand-gold)); } .bg-purple { background: hsl(var(--brand-purple)); } .bg-ink { background: hsl(var(--brand-ink)); } [data-theme="dark"] .bg-ink { background: #fff; } .bg-muted-fg { background: hsl(var(--muted-fg)); } .bg-grad { background-image: var(--gradient-brand); } /* Avatars */ .avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background-image: var(--gradient-brand); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; } .avatar-sm { width: 32px; height: 32px; font-size: 12px; } .avatar-xs { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 64px; height: 64px; font-size: 22px; } .avatar-ring { border: 2px solid hsl(var(--card)); box-shadow: var(--shadow-md); } .org-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 11px; text-transform: uppercase; flex-shrink: 0; } .org-av-md { width: 36px; height: 36px; border-radius: 16px; font-size: 13px; } /* Progress */ .bar { height: 6px; border-radius: 999px; overflow: hidden; background: hsl(var(--muted-fg) / .15); } .bar-lg { height: 8px; background: hsl(var(--muted)); } .bar > span { display: block; height: 100%; border-radius: 999px; background: hsl(var(--primary)); } [data-theme="dark"] .bar > span { background: hsl(var(--brand-cyan)); } .bar > span.gold { background: hsl(var(--brand-gold)); } .bar.on-grad { background: hsl(0 0% 100% / .25); } .bar.on-grad > span { background: hsl(var(--brand-gold)); } /* ── Menus / popovers ───────────────────────────────────────────────────── */ [data-dropdown] { position: relative; display: inline-flex; } .menu { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 6px; border-radius: var(--r-menu); background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top; transition: opacity var(--dur-fast), transform var(--dur-fast), visibility 0s linear var(--dur-fast); } [data-theme="dark"] .menu { border-color: hsl(0 0% 100% / .1); } .menu.align-end { left: auto; right: 0; } .menu.drop-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; } .is-open > .menu, .menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-fast), transform var(--dur-fast); } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: calc(var(--r-menu) - 4px); font-size: 13.5px; text-align: left; color: hsl(var(--foreground)); } .menu-item:hover, .menu-item:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); outline: none; } .menu-item .ic { color: hsl(var(--muted-fg)); } .menu-item:hover .ic { color: inherit; } .menu-item .hint { margin-left: auto; font-size: 12px; color: hsl(var(--muted-fg)); } .menu-item.danger, .menu-item.danger .ic { color: hsl(var(--destructive)); } .menu-item.danger:hover { background: hsl(var(--destructive) / .1); } .menu-item[aria-disabled="true"] { opacity: .5; pointer-events: none; } .menu-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-fg)); } .menu-sep { height: 1px; margin: 6px -6px; background: hsl(var(--border)); } .menu-radio { position: relative; padding-left: 34px; } .menu-radio::before { content: ""; position: absolute; left: 10px; width: 16px; height: 16px; border-radius: 50%; } .menu-radio[aria-checked="true"]::before { background: hsl(var(--primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; } .menu-sub { position: relative; } .menu-sub > .menu { top: -6px; left: calc(100% + 6px); } .menu-sub.is-open > .menu { opacity: 1; visibility: visible; transform: none; } @media (max-width: 700px) { .menu-sub > .menu { left: auto; right: 0; top: calc(100% + 4px); } } .popover { min-width: 320px; padding: 0; } /* ── Dialogs (native ) ──────────────────────────────────────────── */ dialog.dialog { width: min(94vw, 512px); max-height: 90vh; padding: 24px; overflow-y: auto; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: hsl(var(--popover)); color: hsl(var(--foreground)); box-shadow: var(--shadow-menu); } [data-theme="dark"] dialog.dialog { border-color: hsl(0 0% 100% / .1); } dialog.dialog::backdrop { background: hsl(231 63% 7% / .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } dialog.dialog[open] { animation: dlg-in var(--dur-base) var(--ease-out); } @keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } dialog.dialog-xl { width: min(96vw, 1152px); } dialog.dialog-lg { width: min(94vw, 640px); } .dialog-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-ctl); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-fg)); } .dialog-close:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); } .dialog-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; padding-right: 40px; } .dialog-desc { margin-top: 6px; font-size: 14px; color: hsl(var(--muted-fg)); } .dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; } /* Toast */ .toast-host { position: fixed; z-index: 300; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-tile); background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-menu); font-weight: 600; font-size: 13.5px; animation: dlg-in var(--dur-base) var(--ease-out); } .toast .ic { color: hsl(var(--success)); } /* ── Table ──────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .table { font-size: 13.5px; } .table th { text-align: left; font-size: 12px; font-weight: 600; color: hsl(var(--muted-fg)); padding: 10px 16px; background: hsl(var(--primary) / .06); white-space: nowrap; } [data-theme="dark"] .table th { background: hsl(0 0% 100% / .04); } .table th:first-child { border-radius: 8px 0 0 8px; } .table th:last-child { border-radius: 0 8px 8px 0; } [data-theme="dark"] .table th:first-child { border-radius: 999px 0 0 999px; } [data-theme="dark"] .table th:last-child { border-radius: 0 999px 999px 0; } .table td { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border) / .7); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table .r { text-align: right; } /* ── Loader (animated logomark) ─────────────────────────────────────────── */ .bp-loader { overflow: visible; } @keyframes bp-loader-plane { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 65% { transform: translate(650px, -650px) scale(1.15); opacity: 1; } 100% { transform: translate(1000px, -1000px) scale(1.3); opacity: 0; } } @keyframes bp-loader-fold { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.15); } } @keyframes bp-loader-frame { 0%, 100% { opacity: .88; } 50% { opacity: 1; } } .bp-loader-plane { transform-origin: 3907px 3841px; animation: bp-loader-plane 1.7s cubic-bezier(.4, 0, .2, 1) infinite; } .bp-loader-fold { transform-origin: 2670px 4634px; animation: bp-loader-fold 1.7s ease-in-out infinite; } .bp-loader-frame { animation: bp-loader-frame 1.7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .bp-loader-plane, .bp-loader-fold, .bp-loader-frame { animation: none; } } .loader-block { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; } .loader-block .cap { font-size: 14px; font-weight: 500; color: hsl(var(--muted-fg)); } .page-loader { display: flex; min-height: 40vh; align-items: center; justify-content: center; } /* AI glow — the one element allowed to draw attention to itself */ @keyframes eb-glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px hsl(var(--primary) / .35), 0 0 18px -4px hsl(var(--primary) / .35), var(--shadow-md); } 50% { box-shadow: 0 0 0 1px hsl(var(--primary) / .6), 0 0 26px -2px hsl(var(--primary) / .55), var(--shadow-md); } } .ai-glow { animation: eb-glow-pulse 3.2s var(--ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .ai-glow { animation: none; box-shadow: 0 0 0 1px hsl(var(--primary) / .45), 0 0 20px -4px hsl(var(--primary) / .4), var(--shadow-md); } } /* ── Brand lockup ───────────────────────────────────────────────────────── */ .brand { display: inline-flex; align-items: center; gap: 10px; } .brand .wordmark { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .brand .w-brain { color: hsl(var(--foreground)); } .brand .w-post { color: hsl(var(--brand-blue)); } [data-theme="dark"] .brand .w-post { color: hsl(var(--brand-cyan)); } .brand.on-dark .w-brain { color: #fff; } .brand.on-dark .w-post { color: hsl(var(--brand-cyan)); } /* ════════════════════════════════════════════════════════════════════════ App shell ════════════════════════════════════════════════════════════════════════ */ .shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar { width: 256px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid hsl(var(--sidebar-border)); background: var(--sidebar); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: hsl(var(--sidebar-fg)); } [data-theme="dark"] .sidebar { border-right-color: hsl(0 0% 100% / .07); } .sb-head { height: 68px; flex-shrink: 0; display: flex; align-items: center; padding: 0 16px 0 20px; } .sb-head .icon-btn { margin-left: auto; width: 32px; height: 32px; } .sb-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .nav { display: grid; gap: 6px; padding: 8px 12px; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-tile); background: var(--nav-tile); font-size: 13.5px; font-weight: 500; color: hsl(var(--sidebar-fg) / .9); text-align: left; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .nav-item .ic { width: 18px; height: 18px; } .nav-item:hover { background: var(--nav-tile-hover); color: hsl(var(--accent-fg)); } .nav-item.is-active, .nav-item.is-active:hover { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 700; box-shadow: var(--nav-active-shadow); } .nav-item .chev { margin-left: auto; width: 14px; height: 14px; opacity: .6; transition: transform var(--dur-fast); } .nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); } /* A group whose child is active: tinted, not solid — the child carries the solid state */ .nav-item.is-parent { color: hsl(var(--active)); font-weight: 700; background: hsl(var(--active) / .08); box-shadow: none; } .nav-sub { display: grid; gap: 2px; padding: 4px 0 4px 42px; } .nav-sub[hidden] { display: none; } .nav-subitem { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: hsl(var(--muted-fg)); } [data-theme="dark"] .nav-subitem { border-radius: 999px; } .nav-subitem:hover { background: var(--nav-tile-hover); color: hsl(var(--accent-fg)); } .nav-subitem.is-active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 700; box-shadow: var(--nav-active-shadow); } .nav-subitem .count-pill { margin-left: auto; } .nav-subitem.is-locked { opacity: .5; cursor: not-allowed; } .sb-label { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 6px; } .sb-label .eyebrow { font-size: 11px; } .sb-label a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: hsl(var(--muted-fg)); } .sb-label a:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } .channel-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-tile); font-size: 13px; color: hsl(var(--sidebar-fg) / .9); } .channel-link:hover { background: var(--nav-tile-hover); color: hsl(var(--accent-fg)); } .channel-link.is-active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 700; } .channel-link.is-active .p-ic { color: inherit; } .sb-foot { flex-shrink: 0; padding: 12px; display: grid; gap: 8px; } .credits-card { border-radius: var(--r-card); padding: 16px; background: linear-gradient(135deg, hsl(var(--primary) / .07), hsl(var(--brand-cyan) / .12)); } [data-theme="dark"] .credits-card { background: linear-gradient(135deg, hsl(0 0% 100% / .04), hsl(var(--brand-cyan) / .08)); border: 1px solid hsl(0 0% 100% / .06); } .credits-card .amt { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.2; } .credits-card .note { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: hsl(var(--muted-fg)); } .sb-settings { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid hsl(var(--sidebar-border)); } [data-theme="dark"] .sb-settings { border-top-color: hsl(0 0% 100% / .07); } .sb-settings .nav-item { flex: 1; background: transparent; } .sb-settings .nav-item:hover { background: var(--nav-tile-hover); } .sb-settings .nav-item.is-active { background: var(--nav-active-bg); } .sb-settings .icon-btn { border-radius: 50%; width: 40px; height: 40px; } /* Settings sidebar ("Account and Billing") */ .sb-back { display: flex; align-items: center; gap: 12px; margin: 0 12px 12px; padding: 10px 12px; border-radius: var(--r-tile); } .sb-back:hover { background: var(--nav-tile-hover); } .sb-back span { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .settings-nav { display: grid; gap: 8px; padding: 0 12px; } .settings-nav .nav-item { padding: 12px 16px; font-size: 14px; font-weight: 600; } .sb-theme { display: flex; align-items: center; justify-content: space-between; margin: 16px 24px 0; padding: 20px 0; border-top: 1px solid hsl(var(--sidebar-border)); } [data-theme="dark"] .sb-theme { border-top-color: hsl(0 0% 100% / .07); } .sb-theme span { font-size: 15px; font-weight: 600; } .main-col { flex: 1; min-width: 0; overflow-y: auto; position: relative; } .topbar { position: sticky; top: 0; z-index: 30; height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: hsl(var(--background) / .7); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .topbar .menu-btn { display: none; } .crumb { min-width: 0; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: hsl(var(--muted-fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb .sep { opacity: .4; } .crumb.greet { font-size: 16px; font-weight: 600; color: hsl(var(--foreground)); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .ws-card { display: flex; align-items: center; gap: 10px; height: 44px; max-width: 260px; padding: 4px 12px 4px 6px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .8); box-shadow: var(--shadow-sm); text-align: left; } [data-theme="dark"] .ws-card { border-radius: 999px; background: hsl(0 0% 100% / .05); border-color: hsl(0 0% 100% / .1); } .ws-card:hover { background: hsl(var(--accent)); } .ws-card .nm { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; } .ws-card .rl { display: block; font-size: 11px; line-height: 1.2; color: hsl(var(--muted-fg)); } .credit-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-ctl); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .8); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 700; } [data-theme="dark"] .credit-chip { background: hsl(0 0% 100% / .05); border-color: hsl(0 0% 100% / .1); } .credit-chip:hover { background: hsl(var(--accent)); } .avatar-btn { margin-left: 4px; border-radius: 50%; } .content { max-width: 1280px; margin: 0 auto; padding: 24px; } /* Collapsed sidebar */ body.sb-collapsed .sidebar { width: 76px; } body.sb-collapsed .sidebar .hide-collapsed { display: none !important; } body.sb-collapsed .sb-head { justify-content: center; padding: 0; } body.sb-collapsed .nav-item { justify-content: center; padding: 10px 0; } body.sb-collapsed .nav-item > span, body.sb-collapsed .nav-item .chev { display: none; } body.sb-collapsed .nav-sub { display: none; } .show-collapsed { display: none !important; } body.sb-collapsed .show-collapsed { display: grid !important; } /* Floating assistant */ .fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 700; font-size: 13.5px; } [data-theme="dark"] .fab { background: hsl(var(--popover)); } .fab .ic { color: hsl(var(--primary)); } [data-theme="dark"] .fab .ic { color: hsl(var(--brand-cyan)); } /* Mobile */ .scrim { display: none; } @media (max-width: 1023px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 90; width: 288px; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out); background: hsl(var(--background)); } [data-theme="dark"] .sidebar { background: hsl(231 55% 9%); } body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-menu); } body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 80; background: hsl(231 63% 7% / .45); } .topbar .menu-btn { display: grid; } .topbar .ws-desktop { display: none; } .sb-mobile-ws { display: block !important; } .content { padding: 12px; } body.sb-collapsed .sidebar { width: 288px; } } @media (min-width: 1024px) { .sb-mobile-ws { display: none !important; } .only-mobile { display: none !important; } } @media (max-width: 639px) { .topbar { padding: 0 12px; gap: 6px; } .credit-chip { display: none; } .page-title { font-size: 26px; } .fab span { display: none; } .fab { padding: 0; width: 48px; justify-content: center; right: 16px; bottom: 16px; } } @media (min-width: 640px) { .only-xs { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════ Page components ════════════════════════════════════════════════════════════════════════ */ /* KPI / stat tiles */ .kpi { padding: 20px; } .kpi .lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: hsl(var(--muted-fg)); } .kpi .val { margin-top: 8px; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .kpi .chg { margin-top: 8px; display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; } .kpi .chg .vs { margin-left: 4px; font-weight: 400; color: hsl(var(--muted-fg)); } .up { color: hsl(var(--success)); } .down { color: hsl(var(--destructive)); } .stat .lab { font-size: 13px; font-weight: 600; } .stat .val { font-size: 32px; } /* AI console */ .console { background: hsl(var(--card)); border-radius: var(--r-card); overflow: hidden; } [data-theme="dark"] .console { background: hsl(var(--card)); } .console-thread { display: none; } .console.is-expanded .console-rest { display: none; } .console.is-expanded .console-thread { display: flex; flex-direction: column; min-height: 460px; } .bubble-q { margin-left: auto; width: fit-content; max-width: 80%; padding: 8px 14px; border-radius: 16px; background: hsl(var(--accent)); color: hsl(var(--accent-fg)); font-size: 13px; } .bubble-a { padding: 16px; border-radius: 16px; background: hsl(var(--background)); font-size: 13px; } /* Progress ring */ .ring text { font-family: var(--font-display); } /* Action rows */ .action-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid hsl(var(--border)); } .action-row:last-child { border-bottom: 0; } .tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid hsl(var(--border)); flex-shrink: 0; color: #fff; } .tick:hover { border-color: hsl(var(--primary) / .5); } .tick[aria-pressed="true"] { background: hsl(var(--primary)); border-color: hsl(var(--primary)); } .tick .ic { width: 12px; height: 12px; stroke-width: 3; opacity: 0; } .tick[aria-pressed="true"] .ic { opacity: 1; } .action-row.is-done .grow { color: hsl(var(--muted-fg)); text-decoration: line-through; } .action-row.is-done .detail { display: none; } .mini-stat { padding: 10px 12px; } .mini-stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; } .list-link { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; } .list-link:hover { background: hsl(var(--accent)); } .up-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } .up-row:hover { background: hsl(var(--accent)); } .quick { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px; font-size: 13px; font-weight: 600; min-height: 76px; } .quick:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } .quick .ic { width: 20px; height: 20px; color: hsl(var(--primary)); } [data-theme="dark"] .quick .ic { color: hsl(var(--brand-cyan)); } /* Platform icon colour (PlatformIcon.tsx) */ .p-ic { color: hsl(var(--primary)); } .p-ic.x, .p-ic.threads { color: hsl(var(--foreground)); } [data-theme="dark"] .p-ic.x, [data-theme="dark"] .p-ic.threads { color: hsl(var(--muted-fg)); } .p-ic.youtube { color: hsl(var(--destructive)); } .p-disc { display: inline-grid; place-items: center; padding: 8px; border-radius: 50%; background: hsl(var(--primary) / .15); } .p-disc.youtube { background: hsl(var(--destructive) / .15); } .p-disc.x { background: hsl(var(--muted-fg) / .15); } /* Chart */ .chart { width: 100%; height: 260px; } .chart .grid-line { stroke: hsl(var(--border)); stroke-dasharray: 3 3; } .chart .tick-label { fill: hsl(var(--muted-fg)); font-size: 11px; font-family: var(--font-body); } .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12.5px; } .legend li { display: flex; align-items: center; gap: 6px; } /* Top content cards */ .thumb { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; background-image: var(--gradient-brand); } .thumb .badge-ic { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--background) / .9); } .thumb-art { position: absolute; inset: 0; } /* Calendar */ .cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cal-title { display: flex; align-items: center; } .cal-title .select { width: auto; height: 36px; background-color: transparent !important; border-color: transparent !important; font-family: var(--font-display); font-size: 18px; font-weight: 700; padding-left: 10px; box-shadow: none; } .cal-title .select:hover { background-color: hsl(var(--accent)) !important; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .cal-dow { padding: 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-fg)); } .cal-cell { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 8px; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .7); } [data-theme="dark"] .cal-cell { background: hsl(0 0% 100% / .03); border-color: hsl(0 0% 100% / .08); border-radius: 16px; } .cal-cell.out { background: hsl(var(--muted) / .4); border-color: transparent; } .cal-cell.past { opacity: .6; } .cal-cell.today { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .25); } [data-theme="dark"] .cal-cell.today { border-color: hsl(var(--brand-cyan)); box-shadow: 0 0 0 2px hsl(var(--brand-cyan) / .25); } .cal-cell .d { display: flex; align-items: center; justify-content: space-between; } .cal-cell .dn { display: grid; place-items: center; height: 24px; min-width: 24px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; } .cal-cell.out .dn { color: hsl(var(--muted-fg)); } .cal-cell.today .dn { background: hsl(var(--primary)); color: #fff; } .cal-cell .add { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: hsl(var(--muted-fg)); opacity: 0; } .cal-cell:hover .add, .cal-cell .add:focus-visible { opacity: 1; } .cal-cell .add:hover { background: hsl(var(--primary)); color: #fff; } .post-chip { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 8px; border-radius: 6px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-size: 11px; font-weight: 600; text-align: left; color: hsl(var(--foreground) / .8); transition: transform var(--dur-fast); } [data-theme="dark"] .post-chip { border-radius: 999px; background: hsl(0 0% 100% / .05); border-color: hsl(0 0% 100% / .1); } .post-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .post-chip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-chip .tm { font-size: 10px; font-weight: 500; opacity: .7; } .post-chip .dot, .cal-dots .dot { width: 6px; height: 6px; } .st-pending { background: hsl(var(--brand-gold) / .2) !important; color: hsl(38 100% 24%) !important; border-color: hsl(var(--brand-gold) / .4) !important; } [data-theme="dark"] .st-pending { color: hsl(var(--brand-gold)) !important; } .st-approved { background: hsl(var(--brand-mint) / .15) !important; color: hsl(149 80% 24%) !important; border-color: hsl(var(--brand-mint) / .4) !important; } [data-theme="dark"] .st-approved { color: hsl(var(--brand-mint)) !important; } .st-scheduled { background: hsl(var(--primary) / .1) !important; color: hsl(var(--primary)) !important; border-color: hsl(var(--primary) / .2) !important; } [data-theme="dark"] .st-scheduled { color: hsl(var(--brand-cyan)) !important; } .st-published { background: hsl(var(--primary)) !important; color: #fff !important; border-color: hsl(var(--primary)) !important; } .st-rejected { background: hsl(var(--destructive) / .1) !important; color: hsl(var(--destructive)) !important; border-color: hsl(var(--destructive) / .25) !important; } .st-draft { background: hsl(var(--card)) !important; } .cal-more { padding: 0 4px; font-size: 11px; font-weight: 700; color: hsl(var(--primary)); text-align: left; } .cal-dots { display: none; flex-wrap: wrap; gap: 4px; } .status-pill { display: inline-flex; border-radius: 999px; border: 1px solid hsl(var(--border)); padding: 1px 8px; font-size: 11px; font-weight: 600; } @media (max-width: 639px) { .cal-grid { gap: 4px; } .cal-cell { min-height: 64px; padding: 6px; } .cal-cell .chips { display: none; } .cal-cell .cal-dots { display: flex; } .cal-dow .long { display: none; } } @media (min-width: 640px) { .cal-dow .short { display: none; } } /* Content list rows */ .c-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-tile); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); cursor: pointer; } [data-theme="dark"] .c-row { background: hsl(0 0% 100% / .03); border-color: hsl(0 0% 100% / .08); } .c-row:hover { border-color: hsl(var(--primary) / .4); } .c-thumb { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, hsl(var(--primary) / .1), hsl(var(--brand-cyan) / .15)); display: grid; place-items: center; color: hsl(var(--primary)); } .c-thumb.art { background-image: var(--gradient-brand); } .c-when { text-align: right; flex-shrink: 0; } @media (max-width: 767px) { .c-when { display: none; } } /* Post dialog: two columns */ .post-cols { display: grid; gap: 24px; align-items: start; } @media (min-width: 1024px) { .post-cols { grid-template-columns: minmax(0, 1fr) 380px; } .post-cols .sticky { position: sticky; top: 0; } } .ai-toggle { display: flex; flex: 1; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px dashed hsl(var(--border)); font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); } .ai-toggle:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); background: hsl(var(--primary) / .05); } .preview-phone { overflow: hidden; border-radius: 22px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: var(--shadow-md); } [data-theme="dark"] .preview-phone { border-color: hsl(0 0% 100% / .1); } .preview-media { aspect-ratio: 1; position: relative; overflow: hidden; background-image: var(--gradient-brand); } .approval { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-tile); } /* Publishing queue rows */ .q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-tile); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); } [data-theme="dark"] .q-row { background: hsl(0 0% 100% / .03); border-color: hsl(0 0% 100% / .08); } @media (min-width: 640px) { .q-row { flex-wrap: nowrap; } } .q-ic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: hsl(var(--primary) / .1); } [data-theme="dark"] .q-ic { background: hsl(0 0% 100% / .06); } .notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-tile); font-size: 13.5px; } .notice-gold { background: hsl(var(--brand-gold) / .2); color: hsl(38 100% 24%); } [data-theme="dark"] .notice-gold { color: hsl(var(--brand-gold)); } .notice-danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); } /* Create studio */ .studio { display: grid; gap: 24px; } @media (min-width: 1024px) { .studio { grid-template-columns: 420px minmax(0, 1fr); } } .aspect-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); font-size: 11.5px; font-weight: 600; color: hsl(var(--muted-fg)); } [data-theme="dark"] .aspect-opt { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); } .aspect-opt[aria-pressed="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .06); color: hsl(var(--primary)); } [data-theme="dark"] .aspect-opt[aria-pressed="true"] { border-color: hsl(var(--brand-cyan)); color: hsl(var(--brand-cyan)); } .aspect-opt .box { border: 2px solid currentColor; border-radius: 4px; } .seg-num { display: flex; padding: 4px; border-radius: var(--r-ctl); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); } [data-theme="dark"] .seg-num { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); } .seg-num button { flex: 1; padding: 6px 0; border-radius: calc(var(--r-ctl) - 2px); font-size: 12.5px; font-weight: 700; color: hsl(var(--muted-fg)); } .seg-num button[aria-pressed="true"] { background: hsl(var(--primary)); color: #fff; } .result-card { overflow: hidden; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); } [data-theme="dark"] .result-card { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .08); } .recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (min-width: 640px) { .recent-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1280px) { .recent-grid { grid-template-columns: repeat(6, 1fr); } } .recent-grid > * { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid hsl(var(--border)); position: relative; } .aspect-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; } /* AI model picker, grouped by provider (Create studio + post-dialog popovers) */ .prov { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; font-size: 9.5px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: 0; text-transform: none; } .prov-openai { background: hsl(var(--brand-ink)); } [data-theme="dark"] .prov-openai { background: #fff; color: hsl(var(--brand-ink)); } .prov-gemini { background: linear-gradient(135deg, #013AE3, #7569F8 55%, #01D2FD); } .prov-higgs { background: hsl(var(--brand-mint)); color: hsl(var(--brand-ink)); } .model-list { display: grid; gap: 6px; } .model-group-h { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 2px; font-size: 12px; font-weight: 700; color: hsl(var(--muted-fg)); } .model-group-h:first-child { margin-top: 0; } .model-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border-radius: var(--r-tile); border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); } .model-opt:hover { border-color: hsl(var(--primary) / .4); } [data-theme="dark"] .model-opt { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); } .model-opt[aria-pressed="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .07); box-shadow: inset 0 0 0 1px hsl(var(--primary)); } [data-theme="dark"] .model-opt[aria-pressed="true"] { border-color: hsl(var(--brand-cyan)); background: hsl(var(--brand-cyan) / .08); box-shadow: inset 0 0 0 1px hsl(var(--brand-cyan)); } .model-opt .radio { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid hsl(var(--muted-fg) / .5); background: hsl(var(--card)); transition: border var(--dur-fast); } .model-opt[aria-pressed="true"] .radio { border: 5px solid hsl(var(--primary)); background: #fff; } [data-theme="dark"] .model-opt .radio { background: transparent; } [data-theme="dark"] .model-opt[aria-pressed="true"] .radio { border-color: hsl(var(--brand-cyan)); background: hsl(var(--background)); } .model-opt .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; } .model-opt .sub { display: block; margin-top: 2px; font-size: 11.5px; color: hsl(var(--muted-fg)); } .model-opt .cost-tag { margin-left: auto; flex-shrink: 0; text-align: right; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.1; white-space: nowrap; } .model-opt .cost-tag small { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; color: hsl(var(--muted-fg)); } .model-opt:disabled, .model-opt[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; background: transparent; box-shadow: none; } .model-opt:disabled > :not(.grow), .model-opt:disabled .sub { opacity: .5; } .model-opt:disabled .nm { color: hsl(var(--muted-fg)); } .model-list-compact { gap: 2px; } .model-list-compact .model-group-h { margin-top: 8px; font-size: 11px; } .model-list-compact .model-opt { padding: 7px 10px; gap: 10px; border-color: transparent; background: transparent; } .model-list-compact .model-opt:hover { background: hsl(var(--accent)); } .model-list-compact .model-opt .nm { font-size: 13px; } .model-list-compact .model-opt .cost-tag { font-family: var(--font-body); font-size: 12px; color: hsl(var(--muted-fg)); } .model-list-compact .model-opt[aria-pressed="true"] .cost-tag { color: hsl(var(--primary)); } [data-theme="dark"] .model-list-compact .model-opt[aria-pressed="true"] .cost-tag { color: hsl(var(--brand-cyan)); } .gen-pop { width: 300px; padding: 12px; } .gen-pop-head { padding: 0 2px 8px; margin-bottom: 4px; border-bottom: 1px solid hsl(var(--border)); } [data-theme="dark"] .gen-pop-head { border-color: hsl(0 0% 100% / .08); } /* Generation in progress (results card, list thumb, inline in the post dialog) */ .gen-media { position: relative; overflow: hidden; display: grid; place-items: center; padding: 20px; background: linear-gradient(145deg, hsl(var(--brand-blue) / .07), hsl(var(--brand-cyan) / .14)); } [data-theme="dark"] .gen-media { background: linear-gradient(145deg, hsl(var(--brand-blue) / .18), hsl(var(--brand-cyan) / .1)); } .gen-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, hsl(0 0% 100% / .35) 50%, transparent 65%); background-size: 250% 100%; animation: gen-shimmer 2.4s linear infinite; pointer-events: none; } [data-theme="dark"] .gen-media::after { background-image: linear-gradient(100deg, transparent 35%, hsl(0 0% 100% / .06) 50%, transparent 65%); } @keyframes gen-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } } .gen-progress { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 4px; border-radius: 999px; overflow: hidden; background: hsl(var(--primary) / .15); } .gen-progress > span { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--gradient-brand); animation: gen-indet 1.6s var(--ease-out) infinite; } @keyframes gen-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .gen-media::after, .gen-progress > span { animation: none; } } .gen-inline { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-tile); border: 1px solid hsl(var(--primary) / .2); background: linear-gradient(145deg, hsl(var(--brand-blue) / .05), hsl(var(--brand-cyan) / .1)); } [data-theme="dark"] .gen-inline { border-color: hsl(var(--brand-cyan) / .25); background: hsl(var(--brand-cyan) / .06); } .media-tag { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgb(15 20 45 / .55); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .play-btn { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: hsl(0 0% 100% / .92); color: hsl(var(--brand-ink)); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .5); transition: transform var(--dur-base) var(--ease-spring); } .play-btn:hover { transform: scale(1.06); } .play-btn .ic { fill: currentColor; margin-left: 3px; } .dur-tag { position: absolute; right: 10px; bottom: 10px; padding: 1px 8px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; } .media-new { box-shadow: 0 0 0 2px hsl(var(--primary)), 0 0 0 5px hsl(var(--primary) / .18); } [data-theme="dark"] .media-new { box-shadow: 0 0 0 2px hsl(var(--brand-cyan)), 0 0 0 5px hsl(var(--brand-cyan) / .2); } .media-new .media-tag { font-size: 10px; padding: 0 6px; } .media-x { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; } .gen-list > li { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-bottom: 1px solid hsl(var(--border) / .7); } .gen-list > li:last-child { border-bottom: 0; } .gen-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; padding: 0; overflow: hidden; } .gen-list .when { width: 88px; flex-shrink: 0; } .gen-list .cost { width: 48px; flex-shrink: 0; text-align: right; } .gen-list .badge { flex-shrink: 0; } @media (max-width: 767px) { .gen-list .when { display: none; } } /* Generated "art" swatches (stand-ins for images) */ .art { position: relative; overflow: hidden; } .art-1 { background: radial-gradient(60% 60% at 30% 30%, #FFD57A 0%, transparent 60%), radial-gradient(70% 70% at 80% 80%, #01D2FD 0%, transparent 60%), linear-gradient(135deg, #013AE3, #7569F8); } .art-2 { background: radial-gradient(50% 50% at 70% 30%, #37EF91 0%, transparent 60%), linear-gradient(160deg, #213693, #01D2FD); } .art-3 { background: radial-gradient(55% 55% at 35% 65%, #FF7542 0%, transparent 60%), linear-gradient(135deg, #FFC859, #FF7542 90%); } .art-4 { background: radial-gradient(50% 50% at 60% 40%, #fff 0%, transparent 55%), linear-gradient(135deg, #7569F8, #013AE3); } .art-5 { background: linear-gradient(180deg, #F6E7D2 0%, #E9CFA8 100%); } .art-6 { background: radial-gradient(60% 60% at 50% 40%, #37EF91 0%, transparent 60%), linear-gradient(135deg, #26262A, #213693); } .art .cup { position: absolute; left: 50%; top: 52%; width: 36%; aspect-ratio: 1 / .9; transform: translate(-50%, -50%); border-radius: 8% 8% 40% 40%; background: #fff; box-shadow: 0 18px 30px -12px rgb(0 0 0 / .35); } .art .cup::after { content: ""; position: absolute; right: -22%; top: 18%; width: 30%; height: 42%; border: 6px solid #fff; border-left: 0; border-radius: 0 50% 50% 0; } .art .cup::before { content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 14%; border-radius: 50%; background: #6b3d1e; } .art .label { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 18px; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgb(0 0 0 / .25); } /* Library finder */ .finder { display: grid; gap: 16px; } @media (min-width: 1024px) { .finder { grid-template-columns: 240px minmax(0, 1fr) 300px; align-items: stretch; min-height: 560px; } } .tree-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: hsl(var(--sidebar-fg) / .9); text-align: left; } [data-theme="dark"] .tree-item { border-radius: 999px; } .tree-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); } .tree-item.is-active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 700; box-shadow: var(--nav-active-shadow); } .tree-item .chev-sm { width: 14px; height: 14px; color: hsl(var(--muted-fg)); } .masonry { columns: 2; column-gap: 12px; } @media (min-width: 640px) { .masonry { columns: 3; } } @media (min-width: 1024px) { .masonry { columns: 2; } } @media (min-width: 1280px) { .masonry { columns: 3; } } .tile { break-inside: avoid; margin-bottom: 12px; display: block; width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); text-align: left; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } [data-theme="dark"] .tile { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .08); border-radius: 18px; } .tile:hover { box-shadow: var(--shadow-md); } .tile.is-active { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .3); } [data-theme="dark"] .tile.is-active { border-color: hsl(var(--brand-cyan)); box-shadow: 0 0 0 2px hsl(var(--brand-cyan) / .3); } .tile .media { position: relative; } .tile .meta { padding: 8px 10px; } .tile .meta .nm { font-size: 12.5px; font-weight: 700; } .tile .kind { position: absolute; top: 8px; left: 8px; } .ghost-board { position: absolute; inset: 0; columns: 2; column-gap: 12px; padding: 4px; opacity: .7; -webkit-mask-image: radial-gradient(ellipse at center, transparent 22%, black 75%); mask-image: radial-gradient(ellipse at center, transparent 22%, black 75%); pointer-events: none; } @media (min-width: 640px) { .ghost-board { columns: 3; } } @media (min-width: 1280px) { .ghost-board { columns: 4; } } .ghost-board .ghost { margin-bottom: 12px; break-inside: avoid; } .dropzone { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--r-card); border: 2px dashed hsl(var(--primary) / .25); background: hsl(var(--card) / .6); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); } [data-theme="dark"] .dropzone { background: hsl(0 0% 100% / .03); border-color: hsl(0 0% 100% / .15); } .dropzone:hover, .dropzone.is-drag { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .06); } @media (min-width: 640px) { .dropzone { flex-direction: row; align-items: center; justify-content: space-between; } } /* Channels */ .ch-card { position: relative; display: flex; flex-direction: column; padding: 16px; } .ch-card:hover { box-shadow: var(--shadow-lg); } .ch-av { position: relative; flex-shrink: 0; } .ch-av .av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: 12px; font-weight: 800; } [data-theme="dark"] .ch-av .av { color: hsl(var(--brand-cyan)); } .ch-av .pb { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: hsl(var(--background)); box-shadow: 0 0 0 1px hsl(var(--border)); } .stretch { position: absolute; inset: 0; border-radius: var(--r-card); } .above { position: relative; z-index: 1; } /* Integrations app cards */ .app-card { display: flex; flex-direction: column; } .app-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid hsl(var(--border)); flex-shrink: 0; font-weight: 800; font-size: 15px; } .section-rule { border-top: 1px solid hsl(var(--border)); } /* Refer & earn */ .stat-card { padding: 16px; border-radius: 16px; background: hsl(var(--card)); box-shadow: 0 2px 8px rgb(11 44 61 / .07); } [data-theme="dark"] .stat-card { background: hsl(0 0% 100% / .05); border-radius: 22px; } .stat-card.hero-stat { background: hsl(var(--primary)); color: #fff; } .stat-card .v { margin-top: 3px; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; } .ref-hero { display: grid; gap: 24px; } @media (min-width: 1024px) { .ref-hero { grid-template-columns: minmax(0, 1fr) 440px; align-items: center; } } .fact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: hsl(0 0% 100% / .15); font-size: 12px; font-weight: 600; } .share-panel { padding: 18px; border-radius: calc(var(--r-card) - 2px); background: hsl(0 0% 100% / .12); border: 1px solid hsl(0 0% 100% / .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hero .hero-input { background: #fff; color: hsl(var(--brand-ink)); } [data-theme="dark"] .hero .hero-input { background: hsl(0 0% 100% / .14); border-color: hsl(0 0% 100% / .22); color: #fff; } .code-pill { padding: 4px 10px; border-radius: var(--r-ctl); border: 1px dashed hsl(0 0% 100% / .5); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; } .share-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-ctl); background: hsl(0 0% 100% / .16); border: 1px solid hsl(0 0% 100% / .22); color: #fff; transition: background var(--dur-fast); } .share-btn:hover { background: hsl(0 0% 100% / .28); } .share-btn .ic, .share-btn .p-ic { color: #fff !important; } .btn-glass { background: hsl(0 0% 100% / .14); color: #fff; border-color: hsl(0 0% 100% / .25); box-shadow: none; } .btn-glass:hover { background: hsl(0 0% 100% / .24); } .bal-card { padding: 20px; } .stat-card.hero-stat.bal-card { background-image: var(--gradient-brand); } .bal-card .btn-cta:disabled { opacity: 1; background: hsl(0 0% 100% / .2); color: hsl(0 0% 100% / .75); box-shadow: none; } .ref-split { display: grid; gap: 24px; } @media (min-width: 1024px) { .ref-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .ref-split-even { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } } .how-steps { display: grid; gap: 16px; } @media (min-width: 640px) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .how-steps li { display: flex; flex-direction: column; gap: 10px; } .step-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background-image: var(--gradient-brand); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 800; } .faq details { border-bottom: 1px solid hsl(var(--border)); } .faq details:last-child { border-bottom: 0; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { color: hsl(var(--muted-fg)); transition: transform var(--dur-fast); } .faq details[open] summary .ic { transform: rotate(180deg); } .faq summary:hover { color: hsl(var(--primary)); } [data-theme="dark"] .faq summary:hover { color: hsl(var(--brand-cyan)); } .faq .ans { padding: 0 2px 14px; font-size: 13.5px; color: hsl(var(--muted-fg)); } .lead-sym { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: hsl(var(--muted-fg)); pointer-events: none; } [data-theme="dark"] .lead-sym { left: 16px; } /* Settings */ .settings-label { margin-bottom: 16px; font-size: 13px; font-weight: 600; color: hsl(var(--muted-fg)); } .plan-grid { display: grid; gap: 20px; } @media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .plan-featured { margin: -12px 0; padding-top: 36px !important; padding-bottom: 36px !important; } } .plan { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 24px; } .plan-featured { background-image: var(--gradient-brand); color: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-lg); } .plan-featured .topbar-gold { position: absolute; left: 24px; right: 24px; top: 0; height: 8px; border-radius: 0 0 999px 999px; background: var(--gradient-cta); } .plan .price { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .plan .feat { display: flex; align-items: flex-start; gap: 8px; } .plan .feat .ic { margin-top: 2px; color: hsl(var(--primary)); } [data-theme="dark"] .plan .feat .ic { color: hsl(var(--brand-cyan)); } .plan-featured .feat .ic { color: hsl(var(--brand-gold)) !important; } .plan-name { align-self: flex-start; padding: 6px 16px; border-radius: 999px; background: hsl(var(--muted)); font-size: 13px; font-weight: 700; } .plan-featured .plan-name { background: transparent; border: 1px solid hsl(0 0% 100% / .6); } .blurred { filter: blur(5px); pointer-events: none; user-select: none; } .cost-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 13.5px; } .kv { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; padding: 16px 20px; font-size: 14px; } .kv + .kv { border-top: 1px solid hsl(var(--border)); } @media (max-width: 520px) { .kv { grid-template-columns: 1fr; gap: 4px; } } .bars4 { display: flex; align-items: flex-end; gap: 10px; height: 80px; } .bars4 span { width: 36px; border-radius: 8px; background: hsl(var(--muted)); } .bars4 span.on { background: hsl(var(--primary)); } [data-theme="dark"] .bars4 span.on { background: hsl(var(--brand-cyan)); } .stack-tabs { position: relative; padding-top: 20px; } .stack-tabs::before, .stack-tabs::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; border-radius: var(--r-card) var(--r-card) 0 0; } .stack-tabs::before { top: 0; background: hsl(var(--primary)); } .stack-tabs::after { top: 12px; background: hsl(var(--brand-gold)); } .stack-tabs > .card { position: relative; z-index: 1; } .tone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 640px) { .tone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .swatch-pick { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-tile); background: hsl(var(--fill)); } [data-theme="dark"] .swatch-pick { background: hsl(0 0% 100% / .06); border-radius: 999px; } .swatch-pick .sw { width: 32px; height: 32px; border-radius: 8px; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-fg)); } [data-theme="dark"] .theme-opt { background: hsl(0 0% 100% / .04); border-color: hsl(0 0% 100% / .1); border-radius: 18px; } .theme-opt[aria-checked="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); color: hsl(var(--primary)); } [data-theme="dark"] .theme-opt[aria-checked="true"] { border-color: hsl(var(--brand-cyan)); color: hsl(var(--brand-cyan)); } /* Notifications feed */ .feed-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; border-radius: 16px; text-align: left; } .feed-item:hover { background: hsl(var(--accent) / .6); } .feed-item.unread .ttl { font-weight: 700; } .divide > * + * { border-top: 1px solid hsl(var(--border) / .7); } /* ════════════════════════════════════════════════════════════════════════ Auth + onboarding ════════════════════════════════════════════════════════════════════════ */ .auth { display: grid; min-height: 100vh; } @media (min-width: 1024px) { .auth { grid-template-columns: 1fr 1fr; } } .auth-left { display: none; flex-direction: column; padding: 40px; } @media (min-width: 1024px) { .auth-left { display: flex; } } .auth-art { width: 100%; max-width: 520px; margin: auto; padding: 40px; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); } [data-theme="dark"] .auth-art { background: hsl(0 0% 100% / .06); } .auth-art img { width: 100%; max-width: 440px; margin: 0 auto; } .auth-copy { text-align: center; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-fg)); } .auth-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 48px 24px; color: #fff; background-image: var(--gradient-brand); container-type: inline-size; } .auth-panel.gold { background: hsl(var(--brand-gold)); color: hsl(var(--brand-ink)); } @media (min-width: 640px) { .auth-panel { padding: 48px; } } @media (min-width: 1280px) { .auth-panel { padding: 48px 80px; } } .auth-panel .wm { position: absolute; left: 50%; bottom: -0.3em; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-size: 38cqw; font-weight: 800; line-height: 1; letter-spacing: -0.04em; opacity: .08; pointer-events: none; user-select: none; } .auth-inner { position: relative; z-index: 1; width: 100%; max-width: 448px; margin: 0 auto; } .auth-inner h1 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } @media (max-width: 639px) { .auth-inner h1 { font-size: 34px; } } .auth-inner .sub { margin-top: 12px; font-size: 15px; line-height: 1.6; color: hsl(0 0% 100% / .8); } .auth-panel.gold .sub { color: hsl(var(--brand-ink) / .75); } .auth-form { margin-top: 32px; } .auth-form .label { color: inherit; } .auth-form .input { background: hsl(0 0% 100% / .95); color: hsl(var(--brand-ink)); border-color: transparent; } [data-theme="dark"] .auth-form .input { background: hsl(0 0% 100% / .95); color: hsl(var(--brand-ink)); } .auth-form .input::placeholder { color: hsl(226 12% 47%); } .auth-form .input:focus { box-shadow: 0 0 0 4px hsl(0 0% 100% / .35); border-color: #fff; } .auth-form .check input { border-color: currentColor; background: transparent; } .auth-panel:not(.gold) .auth-form .check input:checked { background: #fff; border-color: #fff; } .auth-panel:not(.gold) .auth-form .check input:checked::after { border-color: hsl(var(--brand-blue)); } .auth-panel.gold .auth-form .check input:checked { background: hsl(var(--brand-ink)); border-color: hsl(var(--brand-ink)); } .auth-foot { margin-top: 32px; text-align: center; font-size: 14px; opacity: .9; } .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12px; font-weight: 600; opacity: .8; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; } .btn-google { background: #fff; color: hsl(var(--brand-ink)); box-shadow: var(--shadow-md); border-color: hsl(0 0% 0% / .06); } .btn-google:hover { background: #fff; filter: brightness(.98); } .err-pill { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: hsl(0 0% 100% / .92); color: hsl(16 88% 42%); font-size: 12px; } .turnstile { display: flex; align-items: center; gap: 12px; height: 65px; padding: 0 14px; border-radius: 8px; background: #fafafa; border: 1px solid #e0e0e0; color: #333; font-size: 13px; } .turnstile .ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1f9a4c; color: #fff; } .state-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .state-switch button { padding: 4px 12px; border-radius: 999px; background: hsl(0 0% 100% / .15); font-size: 12px; font-weight: 700; color: #fff; } .state-switch button[aria-pressed="true"] { background: #fff; color: hsl(var(--brand-blue)); } .wizard { min-height: 100vh; padding: 48px 16px; } .wizard-inner { max-width: 672px; margin: 0 auto; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 32px; } .steps .bar { height: 6px; background: hsl(var(--muted)); } .steps .on .bar > span { width: 100%; } .steps p { margin-top: 8px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-fg)); } .steps .cur p { color: hsl(var(--foreground)); } .logo-drop { display: grid; place-items: center; width: 80px; height: 80px; flex-shrink: 0; border-radius: 16px; border: 2px dashed hsl(var(--primary) / .3); background: hsl(var(--primary) / .04); color: hsl(var(--primary)); } [data-theme="dark"] .logo-drop { color: hsl(var(--brand-cyan)); border-radius: 22px; } .logo-drop:hover { border-color: hsl(var(--primary)); } .fade-in { animation: fade-in .5s ease-out both; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } } /* ════════════════════════════════════════════════════════════════════════ Gallery (index.html) ════════════════════════════════════════════════════════════════════════ */ .gallery { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; } .gal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .gal-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .gal-card { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-fast); } .gal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .gal-card .shot { aspect-ratio: 1440 / 1000; overflow: hidden; background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); } .gal-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; } .gal-card .body { padding: 14px 16px 16px; } .gal-card .body h3 { font-size: 16px; font-weight: 700; } .gal-card .body p { margin-top: 4px; font-size: 12.5px; color: hsl(var(--muted-fg)); } .gal-section { margin-top: 40px; } .gal-section > h2 { font-size: 20px; margin-bottom: 14px; } .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatches span { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: hsl(var(--card)); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 600; } [data-theme="dark"] .swatches span { background: hsl(0 0% 100% / .06); } .swatches i { width: 22px; height: 22px; border-radius: 50%; display: block; } @media (max-width: 1023px) { .only-desktop { display: none !important; } } .cal-cell .chips > * + * { margin-top: 4px; } .block { display: block; } .cal-title .select { padding-top: 0; padding-bottom: 0; line-height: 36px; } .thumb .thumb-art { position: absolute; inset: 0; } .tab[aria-pressed="true"] { background: hsl(var(--card)); color: hsl(var(--primary)); box-shadow: var(--shadow-md); } [data-theme="dark"] .tab[aria-pressed="true"] { background: hsl(0 0% 100% / .1); color: hsl(var(--brand-cyan)); box-shadow: none; } .tree-item[aria-selected="true"] { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 700; box-shadow: var(--nav-active-shadow); } .tree-item[aria-selected="true"] .ic { color: inherit; } .ic-giant { width: 144px; height: 144px; } .steps .bar > span { width: 0; transition: width var(--dur-base) var(--ease-out); } .label.row { display: flex; } [data-theme="dark"] .select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } @media (max-width: 639px) { .action-row { flex-wrap: wrap; } .action-row .grow { flex-basis: calc(100% - 32px); } .action-row .badge { margin-left: 32px; } } .gen-inline.is-done { border-color: hsl(var(--brand-mint) / .5); background: hsl(var(--brand-mint) / .1); } [data-theme="dark"] .gen-inline.is-done { border-color: hsl(var(--brand-mint) / .3); background: hsl(var(--brand-mint) / .06); }