/* ═════════════════════════════════════════════════════════════════════════ SELLERIO ACCOUNT DASHBOARD — the signed-in shell at /account. LAYOUT only. Every colour, radius, shadow and type treatment comes from styles.css's tokens, and the components below are shaped to match the marketing site's own: pill nav items with a soft-tint active state (the same one .navlinks a.active uses), --r-xl cards on --shadow-sm, Space Grotesk headings, a translucent blurred top bar at the site's 64px nav height, and the site's own body gradient wash showing through. This file used to carry a --dash-* palette of its own — near-identical greys, a heavier border, its own shadow, square-ish cards and a solid blue block for the active nav item. Near-identical is the problem: it read as a different product the moment you crossed from sellerio.in into your account. There is now ONE set of brand values and this file states none of them. DARK MODE also moved into styles.css, as overrides of those same tokens, so /login and /signup get it from the same place. What is left here is the handful of status colours (verified green, error red) that are not in the token set. ═════════════════════════════════════════════════════════════════════════ */ /* No background of its own: styles.css's body rule already paints the site's background colour AND its three-point gradient wash, and overriding `background` here is what used to flatten the account page to plain grey while every other page had depth. */ body.dash { margin: 0; color: var(--text-primary); -webkit-font-smoothing: antialiased; } /* ── Layout ── */ .dash-shell { display: flex; min-height: 100vh; } /* Translucent over the body wash, like the site's own sticky nav, rather than an opaque white panel sitting on top of it. */ .dash-side { width: 248px; flex: 0 0 248px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } /* 64px tall — the site's nav height — so the logo sits at the same optical height as it does on every marketing page, and 36px to match .logo img there. It was 26px in a 18px-padded box, which read as a smaller brand. */ .dash-brand { display: flex; align-items: center; height: 64px; padding: 0 18px; flex: 0 0 auto; } .dash-brand img { height: 36px; width: auto; } /* The colour wordmark is near-black type; on the dark surface it disappeared into it. The light (white) file is the one the site already ships for dark backgrounds. Swapped in CSS so the right one is painted immediately — a script-set src flashes the wrong logo first. */ .dash-brand .on-dark { display: none; } html[data-theme="dark"] .dash-brand .on-light { display: none; } html[data-theme="dark"] .dash-brand .on-dark { display: block; } /* styles.css styles the marketing header with a BARE element selector — `nav { position:sticky; background:rgba(247,248,250,.88); backdrop-filter: blur(12px); z-index:300 }`. That lands on this