/* ========================================================================== Aeloria Dash — Stripe-caliber dashboard system for the creator portal and the admin. Light and dark themes share the public site's refinement tokens: white ground, navy ink, slate body, violet accent, hairline borders, layered shadows. Inter Tight (display numbers) + Inter (UI) + JetBrains Mono (micro-labels). Shell anatomy: .shell > aside.side (fixed rail) + .main > .topbar + .page Pages are .view sections toggled by hash routing in each page's JS. ========================================================================== */ :root { --ink: #0A2540; --body-c: #425466; --muted: #6F7F95; --faint: #97A6B8; --bg: #FFFFFF; --bg-alt: #F6F9FC; --inset: #EDF2F7; --hairline: rgba(10, 37, 64, 0.10); --hairline-strong: rgba(10, 37, 64, 0.18); --accent: #E25D3F; --accent-deep: #C64B30; --accent-soft: #F07A5C; --accent-wash: rgba(226, 93, 63, 0.08); --accent-ring: rgba(226, 93, 63, 0.24); --ok: #217A54; --ok-wash: rgba(33, 122, 84, 0.09); --warn: #B45309; --warn-wash: rgba(180, 83, 9, 0.10); --danger: #DF1B41; --danger-wash: rgba(223, 27, 65, 0.08); --violet: #7B5CFF; --violet-wash: rgba(123, 92, 255, 0.10); --sky: #38BDF8; /* Chart palette */ --chart-line: #E25D3F; --chart-fill-top: rgba(226, 93, 63, 0.16); --chart-fill-bottom: rgba(226, 93, 63, 0); --chart-compare: #AFBDCE; --chart-grid: rgba(10, 37, 64, 0.06); --chart-axis: #97A6B8; --g-amber: #FFB23E; --g-coral: #FF5A3C; --g-pink: #F857A6; --g-violet: #7B5CFF; --g-sky: #38BDF8; --grad-text: linear-gradient(92deg, var(--g-coral) 0%, var(--g-pink) 52%, var(--g-violet) 100%); --grad-ribbon: linear-gradient(90deg, var(--g-amber), var(--g-coral) 28%, var(--g-pink) 55%, var(--g-violet) 80%, var(--g-sky)); --r: 8px; --r-md: 12px; --r-lg: 16px; --ease: cubic-bezier(.16, 1, .3, 1); --shadow-sm: 0 2px 5px -1px rgba(50, 50, 93, 0.10), 0 1px 3px -1px rgba(0, 0, 0, 0.06); --shadow-md: 0 13px 27px -5px rgba(50, 50, 93, 0.14), 0 8px 16px -8px rgba(0, 0, 0, 0.10); --shadow-lg: 0 30px 60px -12px rgba(50, 50, 93, 0.20), 0 18px 36px -18px rgba(0, 0, 0, 0.16); --side-w: 238px; --topbar-bg: rgba(255, 255, 255, 0.86); --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; color-scheme: light; } /* Dark theme — opt-in via , persisted by the topbar toggle in localStorage 'aeloria-dash-theme'. Everything below re-tunes the same tokens; components never hard-code theme colors. */ [data-theme="dark"] { color-scheme: dark; --ink: #E9EFF7; --body-c: #A9B9CE; --muted: #7E92AC; --faint: #56698A; --bg: #0C1626; --bg-alt: #111E31; --inset: #1B2C45; --hairline: rgba(148, 178, 215, 0.14); --hairline-strong: rgba(148, 178, 215, 0.28); --topbar-bg: rgba(12, 22, 38, 0.86); --accent: #F07A5C; --accent-deep: #F49075; --accent-soft: #F79B82; --accent-wash: rgba(240, 122, 92, 0.13); --accent-ring: rgba(240, 122, 92, 0.30); --ok: #43CF97; --ok-wash: rgba(67, 207, 151, 0.13); --warn: #E4B468; --warn-wash: rgba(228, 180, 104, 0.13); --danger: #F47C7C; --danger-wash: rgba(244, 124, 124, 0.12); --violet: #A18CFF; --violet-wash: rgba(161, 140, 255, 0.14); --chart-line: #F07A5C; --chart-fill-top: rgba(240, 122, 92, 0.22); --chart-fill-bottom: rgba(240, 122, 92, 0); --chart-compare: #46617D; --chart-grid: rgba(148, 178, 215, 0.09); --chart-axis: #64789A; --shadow-sm: 0 2px 5px -1px rgba(0, 0, 0, 0.35), 0 1px 3px -1px rgba(0, 0, 0, 0.30); --shadow-md: 0 13px 27px -5px rgba(0, 0, 0, 0.50), 0 8px 16px -8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 30px 60px -12px rgba(0, 0, 0, 0.60), 0 18px 36px -18px rgba(0, 0, 0, 0.50); } *, *::before, *::after { box-sizing: border-box; } /* Horizontal-overflow guard: `hidden` first for older iOS Safari (<16 has no overflow:clip and would let stray overflow make the page pannable), then `clip` for modern engines so no scroll container is created. */ html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; } body { overflow-x: clip; } body { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--body-c); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } button { -webkit-tap-highlight-color: transparent; } img { max-width: 100%; display: block; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } ul { list-style: none; } button { font-family: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 640; color: var(--ink); letter-spacing: -0.02em; line-height: 1.12; } h1 em, h2 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } ::selection { background: rgba(123, 92, 255, 0.18); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring), 0 0 0 1px var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* =========================== Shell =========================== */ .shell { display: flex; min-height: 100vh; } .side { width: var(--side-w); flex: 0 0 var(--side-w); position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 18px 12px 14px; border-right: 1px solid var(--hairline); background: var(--bg); z-index: 60; } .side-logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px 16px; } .side-logo img { height: 26px; width: auto; } .side-logo .side-app { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 8px; } .snav { flex: 1; overflow-y: auto; scrollbar-width: none; } .snav::-webkit-scrollbar { display: none; } .snav-group { margin-bottom: 18px; } .snav-group > .snav-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding: 0 10px; margin-bottom: 6px; } .snav a, .snav button.snav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: transparent; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--body-c); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); text-align: left; } .snav a svg, .snav button.snav-item svg { width: 17px; height: 17px; flex: none; stroke: currentColor; opacity: .82; } .snav a:hover, .snav button.snav-item:hover { background: var(--bg-alt); color: var(--ink); } .snav a.active { color: var(--accent); font-weight: 600; background: var(--accent-wash); } .snav a.active svg { opacity: 1; } .snav a .snav-count { margin-left: auto; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--inset); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; } .snav a.active .snav-count { background: rgba(226, 93, 63, 0.14); color: var(--accent); } .side-foot { border-top: 1px solid var(--hairline); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; } .side-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-width: 0; } .side-user .avatar { width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--grad-ribbon); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-display); } .side-user .who { min-width: 0; } .side-user .who .nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-user .who .rl { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =========================== Main / topbar =========================== */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; padding: 14px 36px; border-bottom: 1px solid var(--hairline); background: var(--topbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; } .topbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-ribbon); opacity: .9; } .menu-btn { display: none; border: 1px solid var(--hairline-strong); background: var(--bg); border-radius: var(--r); width: 36px; height: 36px; place-items: center; cursor: pointer; color: var(--ink); } .menu-btn svg { width: 18px; height: 18px; } .top-search { flex: 0 1 460px; display: flex; align-items: center; gap: 9px; padding: 8px 13px; background: var(--bg-alt); border: 1px solid transparent; border-radius: 999px; color: var(--muted); transition: border-color .15s, background .15s, box-shadow .15s; } .top-search svg { width: 15px; height: 15px; flex: none; stroke: currentColor; } .top-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); padding: 0; } .top-search input:focus { outline: none; box-shadow: none; } .top-search:focus-within { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .top-spacer { flex: 1; } .top-actions { display: flex; align-items: center; gap: 10px; } .top-link { font-size: 13px; font-weight: 500; color: var(--body-c); padding: 7px 10px; border-radius: var(--r); } .top-link:hover { color: var(--ink); background: var(--bg-alt); } .live-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ok); background: var(--ok-wash); border: 1px solid rgba(33, 122, 84, 0.18); border-radius: 999px; padding: 4px 11px; white-space: nowrap; } .live-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); } .page { width: 100%; max-width: 1148px; padding: 30px 36px 110px; margin: 0; } /* =========================== Views (hash pages) =========================== */ .view { display: none; } .view.active { display: block; animation: viewIn .28s var(--ease); } @keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-head h1 { font-size: 28px; } .page-head .page-sub { font-size: 13.5px; color: var(--muted); margin-top: 5px; } .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 34px 0 14px; } .section-head:first-child { margin-top: 0; } .section-head h2 { font-size: 18.5px; } .section-head .sh-side { display: flex; align-items: center; gap: 10px; } .section-head .sh-note { font-size: 12.5px; color: var(--muted); } /* =========================== Panels & bento =========================== */ .panel { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 18px 20px; min-width: 0; position: relative; } .panel.flush { padding: 0; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .b-4 { grid-column: span 4; } .b-3 { grid-column: span 3; } .b-6 { grid-column: span 6; } .b-8 { grid-column: span 8; } .b-12 { grid-column: span 12; } .p-label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.006em; } .p-label .info { width: 14px; height: 14px; color: var(--faint); flex: none; cursor: help; } .p-value { font-family: var(--font-display); font-weight: 640; font-size: 27px; letter-spacing: -0.022em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 7px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .p-prev { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .p-chart { margin-top: 14px; position: relative; } .p-chart canvas { width: 100%; display: block; } .p-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); } .p-foot a { color: var(--accent); font-weight: 500; } .p-foot a:hover { color: var(--accent-deep); } .delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; letter-spacing: 0; } .delta.up { color: var(--ok); background: var(--ok-wash); } .delta.down { color: var(--danger); background: var(--danger-wash); } .delta.flat { color: var(--muted); background: var(--inset); } /* =========================== Today hero =========================== */ .hero { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px 14px; margin-bottom: 14px; } .hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hero-kicker { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .hero-value { font-family: var(--font-display); font-weight: 640; font-size: clamp(34px, 4.4vw, 44px); letter-spacing: -0.028em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hero-sub { font-size: 13px; color: var(--muted); margin-top: 6px; } .hero-chart { position: relative; margin-top: 16px; } .hero-chart canvas { width: 100%; display: block; } /* Stat strip under the hero */ .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat-strip .stat { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 14px 17px; min-width: 0; } .stat .s-k { font-size: 12.5px; font-weight: 550; color: var(--muted); } .stat .s-v { font-family: var(--font-display); font-weight: 640; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 3px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .stat .s-s { font-size: 11.5px; color: var(--faint); margin-top: 2px; } /* =========================== Charts =========================== */ .chart-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); border-radius: 9px; padding: 8px 11px; font-size: 12px; line-height: 1.5; color: var(--body-c); white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .12s; z-index: 6; } .chart-tip .tt-date { font-weight: 600; color: var(--ink); margin-bottom: 2px; } .chart-tip .tt-row { display: flex; align-items: center; gap: 7px; } .chart-tip .tt-row i { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--chart-line); } .chart-tip .tt-row i.cmp { background: var(--chart-compare); } .chart-tip .tt-row b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; margin-left: auto; padding-left: 12px; } .chart-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--chart-line); } .chart-legend i.cmp { background: var(--chart-compare); } .chart-legend i.dot { width: 8px; height: 8px; border-radius: 3px; } /* Segmented range control */ .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--r); padding: 2px; flex: none; } .seg button { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 550; font-family: var(--font-ui); padding: 5px 11px; border-radius: 6px; cursor: pointer; line-height: 1.2; transition: background .15s, color .15s; } .seg button:hover:not(.active) { color: var(--ink); } .seg button.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; } /* =========================== Tables =========================== */ .tbl-card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl thead th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 11px 18px; border-bottom: 1px solid var(--hairline); background: var(--bg-alt); white-space: nowrap; } .tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); color: var(--body-c); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: var(--bg-alt); } .tbl .strong { color: var(--ink); font-weight: 550; } .tbl .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .tbl .num.hot { color: var(--accent); font-weight: 600; } .tbl a.tlink { color: var(--accent); font-weight: 500; } .tbl a.tlink:hover { text-decoration: underline; } .tbl .sub { font-size: 12px; color: var(--muted); margin-top: 1px; } /* Truncating cell: give the td max-width:0 + this class on its content and the column shares leftover space, ellipsizing instead of stretching the table. */ .tbl .trunc { max-width: 0; width: 100%; } .tbl .trunc > a, .tbl .trunc > .strong, .tbl .trunc > .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl .rank { font-family: var(--font-display); font-weight: 640; font-size: 15px; color: var(--faint); width: 34px; font-variant-numeric: tabular-nums; } .tbl tr:first-child .rank { color: var(--accent); } /* Share bar (relative magnitude inside tables) */ .bar-cell { width: 24%; min-width: 110px; } .bar-track { height: 6px; border-radius: 4px; background: var(--inset); overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .5s var(--ease); } .bar-fill.cmp { background: var(--chart-compare); } .empty { padding: 46px 24px; text-align: center; color: var(--muted); font-size: 14px; } .empty .e-title { font-weight: 600; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; } /* =========================== Pills & badges =========================== */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .pill-ok { background: var(--ok-wash); color: var(--ok); } .pill-warn { background: var(--warn-wash); color: var(--warn); } .pill-danger { background: var(--danger-wash); color: var(--danger); } .pill-muted { background: var(--inset); color: var(--muted); } .pill-accent { background: var(--accent-wash); color: var(--accent); } .pill-violet { background: var(--violet-wash); color: var(--violet); } .tier-starter { background: var(--accent-wash); color: var(--accent); } .tier-growth { background: var(--ok-wash); color: var(--ok); } .tier-elite { background: var(--violet-wash); color: var(--violet); } .mono-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } /* =========================== Buttons =========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--hairline-strong); background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 600; font-family: var(--font-ui); border-radius: var(--r); padding: 8px 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s; white-space: nowrap; line-height: 1.3; } .btn:hover { border-color: var(--faint); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--body-c); } .btn-ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: transparent; } .btn-danger { color: var(--danger); } .btn-danger:hover { border-color: var(--danger); background: var(--danger-wash); } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 7px; box-shadow: none; } /* =========================== Forms =========================== */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); } .field .hint { font-size: 12px; color: var(--muted); } input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="number"], input[type="search"], select, textarea { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--r); color: var(--ink); font-family: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s; } textarea { resize: vertical; min-height: 72px; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } .form-grid { display: grid; gap: 14px; } .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: 2fr 1fr 1fr; } .msg { padding: 10px 14px; border-radius: var(--r); font-size: 13.5px; border: 1px solid transparent; } .msg-ok { background: var(--ok-wash); border-color: rgba(33, 122, 84, 0.22); color: var(--ok); } .msg-err { background: var(--danger-wash); border-color: rgba(223, 27, 65, 0.22); color: var(--danger); } /* =========================== Notes / callouts =========================== */ .note { border-radius: 10px; padding: 13px 16px; font-size: 13px; line-height: 1.6; border: 1px solid var(--hairline); background: var(--bg-alt); color: var(--body-c); } .note .note-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; color: var(--ink); } .note-accent { background: var(--accent-wash); border-color: rgba(226, 93, 63, 0.20); } .note-accent .note-title { color: var(--accent); } .note-ok { background: var(--ok-wash); border-color: rgba(33, 122, 84, 0.20); } .note-ok .note-title { color: var(--ok); } /* =========================== Collapsibles =========================== */ .disclosure { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; } .disclosure + .disclosure { margin-top: 10px; } .disclosure summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink); } .disclosure summary::-webkit-details-marker { display: none; } .disclosure summary::after { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid var(--hairline-strong); background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)); background-size: 9px 1.5px, 1.5px 9px; background-position: center, center; background-repeat: no-repeat; transition: transform .3s var(--ease); } .disclosure[open] summary::after { transform: rotate(45deg); } .disclosure-body { padding: 0 20px 18px; font-size: 14px; line-height: 1.65; color: var(--body-c); } .disclosure-body > * + * { margin-top: 10px; } .disclosure-body strong { color: var(--ink); } .disclosure-body ol { padding-left: 20px; } .disclosure-body ol li { margin-bottom: 5px; } /* =========================== Filters / toolbars =========================== */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .toolbar .t-spacer { flex: 1; } .toolbar input[type="search"] { max-width: 300px; } .filters { display: inline-flex; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--r); padding: 2px; } .filters button { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 550; padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .filters button:hover:not(.active) { color: var(--ink); } .filters button.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; } /* =========================== Wallet =========================== */ .wallet-hero { background: radial-gradient(120% 160% at 0% 0%, var(--accent-wash) 0%, transparent 52%), var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; } .wallet-hero .w-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wallet-balance { font-family: var(--font-display); font-weight: 640; font-size: clamp(32px, 4vw, 40px); letter-spacing: -0.026em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.08; margin-top: 6px; } .wallet-progress { height: 7px; border-radius: 99px; background: var(--inset); overflow: hidden; margin: 20px 0 8px; } .wallet-progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .5s var(--ease); } /* =========================== Song catalog =========================== */ .songs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } .song-card { display: flex; gap: 15px; padding: 16px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); } .song-card:hover { transform: translateY(-2px); border-color: var(--hairline-strong); box-shadow: var(--shadow-md); } .song-artwork { width: 66px; height: 66px; border-radius: 10px; object-fit: cover; flex: none; background: var(--inset); box-shadow: var(--shadow-sm); } .song-info { flex: 1; min-width: 0; } .song-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.008em; } .song-artist { font-size: 12.5px; color: var(--muted); margin: 1px 0 7px; } .song-meta { font-size: 11.5px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; } .song-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #1DB954; margin-top: 7px; } .song-link:hover { text-decoration: underline; } .song-link svg { width: 15px; height: 15px; } .song-new { display: inline-flex; padding: 1px 7px; margin-left: 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; background: var(--accent-wash); color: var(--accent); vertical-align: 2px; } /* =========================== Misc =========================== */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--hairline); background: var(--bg-alt); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .pager .pg-controls { display: flex; align-items: center; gap: 8px; } .code-chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--r); padding: 8px 12px; word-break: break-all; } .divider { height: 1px; background: var(--hairline); border: 0; margin: 18px 0; } .skeleton { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, var(--inset) 25%, var(--bg-alt) 50%, var(--inset) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; color: transparent !important; min-width: 48px; user-select: none; } @keyframes shimmer { to { background-position: -200% 0; } } /* =========================== Auth pages =========================== */ .auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 44px 22px; background: radial-gradient(90% 60% at 50% -12%, var(--bg-alt) 0%, transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 420px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 40px 38px 34px; position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-ribbon); } .auth-card .auth-logo { margin-bottom: 20px; } .auth-card .auth-logo img { height: 28px; } .auth-card h1 { font-size: 26px; margin: 10px 0 6px; } .auth-card .lede { font-size: 14px; color: var(--body-c); margin-bottom: 26px; line-height: 1.6; } .auth-card form { display: flex; flex-direction: column; gap: 16px; } .auth-foot { margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--muted); } .auth-foot a { color: var(--accent); font-weight: 500; } .auth-foot a:hover { text-decoration: underline; } /* =========================== Drawer (mobile nav) =========================== */ .scrim { display: none; position: fixed; inset: 0; background: rgba(10, 37, 64, 0.32); backdrop-filter: blur(2px); z-index: 70; opacity: 0; transition: opacity .25s; } @media (max-width: 1023px) { .side { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-102%); transition: transform .3s var(--ease); box-shadow: none; z-index: 80; background: var(--bg); } .shell.nav-open .side { transform: none; box-shadow: var(--shadow-lg); } .shell.nav-open .scrim { display: block; opacity: 1; } .menu-btn { display: grid; } /* Solid topbar on mobile — sticky + backdrop-blur repaints jitter on iOS. */ .topbar { padding: 12px 20px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .page { padding: 22px 20px 90px; } .b-3, .b-4 { grid-column: span 6; } .stat-strip { grid-template-columns: repeat(2, 1fr); } /* iOS Safari auto-zooms (and leaves the page pannable) when a focused control's font-size is under 16px — keep every control at 16px here. */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="number"], input[type="search"], select, textarea, .top-search input { font-size: 16px; } } @media (max-width: 640px) { .b-3, .b-4, .b-6, .b-8 { grid-column: span 12; } .page-head h1 { font-size: 24px; } .hero { padding: 18px 16px 10px; } .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } .top-search { display: none; } .top-search.always { display: flex; } .bar-cell { display: none; } .hide-sm { display: none; } .auth-card { padding: 32px 24px 28px; } .toolbar input[type="search"] { max-width: none; width: 100%; } } /* Stripe refinement — shared with the public surface (2026-09-08). */ :root { --accent: #635BFF; --accent-deep: #5146E5; --accent-soft: #7A73FF; --accent-wash: rgba(99, 91, 255, 0.09); --accent-ring: rgba(99, 91, 255, 0.22); --chart-line: #635BFF; --chart-fill-top: rgba(99, 91, 255, 0.18); --chart-fill-bottom: rgba(99, 91, 255, 0); --hairline: rgba(10, 37, 64, 0.11); --hairline-strong: rgba(10, 37, 64, 0.20); --r: 8px; --r-md: 12px; --r-lg: 14px; --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 3px 8px -3px rgba(10, 37, 64, 0.10); --shadow-md: 0 12px 26px -10px rgba(10, 37, 64, 0.18), 0 3px 8px -4px rgba(10, 37, 64, 0.10); } .topbar { padding: 16px 40px; } .top-search { background: var(--bg-alt); border-color: transparent; } .top-search:focus-within { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .snav a.active .snav-count { background: rgba(99, 91, 255, 0.14); } .panel, .hero, .stat-strip .stat { box-shadow: var(--shadow-sm); } .panel:hover, .stat-strip .stat:hover { box-shadow: var(--shadow-md); } .btn-primary { box-shadow: 0 7px 16px -8px rgba(99, 91, 255, 0.60); } .btn-primary:hover { transform: translateY(-1px); } /* Small contrast corrections after the shared light-palette refinement. */ [data-theme="dark"] { --muted: #99AAC2; --faint: #8A9DB8; --chart-axis: #8A9DB8; --accent: #8B82FF; --accent-wash: rgba(139, 130, 255, 0.12); --hairline: rgba(148, 178, 215, 0.14); --hairline-strong: rgba(148, 178, 215, 0.32); } /* Keep white button labels on the existing, deeper violet. */ [data-theme="dark"] .btn-primary { background: #635BFF; border-color: #635BFF; } [data-theme="dark"] .btn-primary:hover { background: #5146E5; border-color: #5146E5; } [data-theme="dark"] .top-search { border-color: var(--hairline-strong); } [data-theme="dark"] .top-search:focus-within { border-color: var(--accent); } @media (max-width: 700px) { .topbar { padding: 12px 18px; } }