:root { color-scheme: dark; --bg:#0a0d12; --surface:#11161e; --surface-2:#151b24; --line:#252d39; --text:#f1f3f6; --muted:#8f99a8; --accent:#93b9ff; --green:#55d69b; --red:#fa7d7d; --sidebar:244px; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); min-width:320px; }
button { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:10px 14px; color:#07101f; background:var(--accent); border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:28px 16px 20px; background:#0d1117; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 28px; }
.brand-mark { width:37px; height:37px; border-radius:11px; display:grid; place-items:center; color:#07101f; background:linear-gradient(145deg,#b4d1ff,#709eff); font-weight:900; box-shadow:0 8px 26px #5789e52b; }
.brand-mark span { border-bottom:2px solid currentColor; }
.brand strong,.brand small { display:block; }.brand strong { font-size:17px; letter-spacing:-.02em; }.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
.nav-list { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.nav-item { width:100%; border:0; border-radius:9px; padding:11px 12px; display:flex; gap:12px; align-items:center; background:transparent; color:#aab2bf; cursor:pointer; text-align:left; transition:.18s ease; }
.nav-item span { width:18px; text-align:center; color:#778292; }.nav-item:hover { color:var(--text); background:#171d26; }.nav-item.active { color:var(--text); background:#1a2230; box-shadow:inset 3px 0 var(--accent); }.nav-item.active span { color:var(--accent); }
.sidebar-note { margin-top:auto; border:1px solid var(--line); background:#121821; border-radius:10px; padding:12px; display:flex; gap:10px; align-items:center; }.sidebar-note strong,.sidebar-note small { display:block; font-size:11px; }.sidebar-note small { color:var(--muted); margin-top:3px; }.status-dot { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px #55d69b1a; }
main { margin-left:var(--sidebar); min-height:100vh; }.topbar { height:82px; padding:0 clamp(20px,4vw,52px); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#0c1016e6; backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }.topbar h1 { font-size:20px; margin:2px 0 0; }.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-size:9px; margin:0; }.topbar-actions { display:flex; align-items:center; gap:12px; }.demo-badge { color:var(--accent); border:1px solid #83aeef4d; background:#77aaff12; border-radius:5px; font-size:9px; letter-spacing:.12em; padding:5px 7px; }.icon-button { border:0; background:transparent; color:#798391; cursor:pointer; }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#293344; color:#c9d8ed; font-size:11px; font-weight:700; }.menu-button { display:none; border:0; color:var(--text); background:transparent; font-size:20px; }
.content { max-width:1500px; padding:34px clamp(20px,4vw,52px) 60px; margin:auto; }.intro { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.intro p { margin:0 0 6px; color:var(--accent); font-size:12px; }.intro h2 { margin:0; font-size:clamp(22px,2.5vw,31px); letter-spacing:-.035em; font-weight:580; }.as-of { text-align:right; }.as-of span,.as-of strong { display:block; }.as-of span { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.12em; }.as-of strong { font-size:12px; margin-top:5px; }
.demo-callout { border:1px solid #4c6d9a55; background:#101a29; border-radius:8px; color:#aebed3; padding:10px 14px; display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:11px; }.demo-callout span { display:grid; place-items:center; flex:0 0 18px; height:18px; border:1px solid var(--accent); color:var(--accent); border-radius:50%; }.demo-callout p { margin:0; }
.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.metric-card,.panel,.withdraw-card { border:1px solid var(--line); background:linear-gradient(145deg,var(--surface-2),var(--surface)); border-radius:12px; }.metric-card { padding:18px 19px; min-height:118px; }.metric-label { display:flex; justify-content:space-between; color:#a8b0bc; font-size:11px; }.metric-label span { color:#5c6877; }.metric-card>strong { display:block; margin:14px 0 7px; font-size:23px; letter-spacing:-.025em; }.metric-card small { color:var(--muted); font-size:10px; }.metric-card.positive>strong { color:var(--green); }
.withdraw-card { margin-top:12px; padding:20px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; border-color:#315d4e; background:linear-gradient(100deg,#14221e,#111820); }.withdraw-icon { width:42px; height:42px; border-radius:10px; background:#55d69b14; color:var(--green); display:grid; place-items:center; font-size:22px; }.withdraw-card span { font-size:10px; text-transform:uppercase; color:#9ca9a5; letter-spacing:.07em; }.withdraw-card strong { display:block; font-size:25px; margin:4px 0; color:var(--green); }.withdraw-card p { margin:0; color:var(--muted); font-size:10px; }.preservation { min-width:150px; }.preservation strong { color:var(--text); font-size:14px; text-align:right; }.progress { height:5px; border-radius:5px; overflow:hidden; background:#26342f; }.progress span { display:block; height:100%; width:100%; background:var(--green); }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }.panel { padding:20px; min-width:0; }.panel header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:19px; }.panel h3 { font-size:15px; margin:4px 0 0; }.kicker { color:#778291; font-size:8px; letter-spacing:.14em; }.text-button { border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:10px; padding:5px; }.distribution-bar { display:flex; height:9px; overflow:hidden; gap:2px; background:#222a34; border-radius:5px; }.distribution-bar span { display:block; }.legend { list-style:none; padding:4px 0 0; margin:0; }.legend li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:12px 0; border-bottom:1px solid #222a34; font-size:11px; }.legend li:last-child { border:0; }.legend-dot { width:7px; height:7px; border-radius:50%; }.legend strong,.legend small { display:block; }.legend small { color:var(--muted); margin-top:3px; }.legend b { font-size:10px; }.policy { display:flex; justify-content:space-between; gap:10px; border-radius:7px; background:#0e131a; padding:10px; font-size:9px; }.policy span { color:var(--muted); }.policy strong { font-weight:500; }
.assets-panel { grid-column:1/-1; }.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; font-size:11px; }th { text-align:left; color:#707b8a; font-size:8px; text-transform:uppercase; letter-spacing:.1em; font-weight:500; padding:0 10px 9px; }td { padding:13px 10px; border-top:1px solid #222a34; color:#aeb6c2; }td:first-child { display:flex; align-items:center; gap:10px; color:var(--text); }td small,td strong { display:block; }td small { color:var(--muted); margin-top:3px; }.asset-icon { width:31px; height:31px; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); border-radius:7px; display:grid; place-items:center; }
.movements { list-style:none; padding:0; margin:0; }.movements li { display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid #222a34; }.movements time { color:#7d8795; font-size:9px; text-transform:uppercase; }.movements strong,.movements small { display:block; font-size:10px; }.movements small { color:var(--muted); margin-top:3px; }.movements>li>span { text-align:right; }
.healthy { color:var(--green); font-size:9px; }.preservation-visual { display:flex; align-items:center; justify-content:center; gap:38px; }.ring { --progress:98; width:116px; height:116px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--green) calc(var(--progress)*1%),#26302e 0); position:relative; }.ring:after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface); }.ring div { z-index:1; text-align:center; }.ring strong,.ring small { display:block; }.ring strong { font-size:17px; }.ring small { color:var(--muted); font-size:9px; margin-top:3px; }.capital-steps { min-width:180px; }.capital-steps p { display:flex; justify-content:space-between; gap:20px; font-size:10px; padding:8px 0; margin:0; border-bottom:1px solid #222a34; }.capital-steps span { color:var(--muted); }.capital-steps p:last-child strong { color:var(--green); }
.placeholder { min-height:calc(100vh - 180px); display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }.placeholder-icon { width:64px; height:64px; border:1px solid #375071; background:#152033; border-radius:18px; color:var(--accent); display:grid; place-items:center; font-size:28px; margin-bottom:24px; }.placeholder h2 { margin:8px 0; font-size:30px; }.placeholder>p { max-width:500px; color:var(--muted); line-height:1.6; }.placeholder-note { max-width:540px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:14px 18px; color:#aab3bf; font-size:11px; margin:16px 0 22px; }.primary-button { border:0; border-radius:8px; padding:11px 16px; background:var(--accent); color:#08111d; font-weight:700; cursor:pointer; }.scrim { position:fixed; inset:0; z-index:9; background:#0009; }
@media (max-width:1050px) { .metrics-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.assets-panel { grid-column:auto; } }
@media (max-width:760px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:20px 0 60px #0008; }.sidebar.open { transform:none; }.menu-button { display:block; }.topbar { height:70px; justify-content:flex-start; gap:14px; }.topbar-actions { margin-left:auto; }.eyebrow,.icon-button { display:none; } main { margin-left:0; }.content { padding-top:24px; }.metrics-grid { grid-template-columns:1fr 1fr; }.withdraw-card { grid-template-columns:auto 1fr; }.preservation { grid-column:1/-1; }.preservation strong { text-align:left; }.intro { align-items:start; }.preservation-visual { gap:20px; } }
@media (max-width:520px) { .metrics-grid { grid-template-columns:1fr; }.intro { display:block; }.as-of { text-align:left; margin-top:14px; }.demo-badge { display:none; }.panel { padding:16px; }.preservation-visual { flex-direction:column; }.capital-steps { width:100%; }.withdraw-card { grid-template-columns:1fr; }.withdraw-icon { display:none; }.movements li { grid-template-columns:34px 1fr; }.movements>li>span { grid-column:2; text-align:left; }.topbar { padding:0 16px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.workspace-picker { display:grid; grid-template-columns:auto auto; align-items:center; gap:2px 7px; font-size:9px; color:var(--muted); }.workspace-picker select,input,select { color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:7px; }.workspace-picker small { grid-column:2; color:var(--accent); text-transform:uppercase; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.settings-wide { grid-column:1/-1; }.settings-grid dl { display:grid; grid-template-columns:120px 1fr; gap:10px; font-size:12px; }.settings-grid dt,.muted { color:var(--muted); }.settings-grid dd { margin:0; }.settings-grid form { display:flex; gap:8px; margin:16px 0; }.invite-row { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:8px 0; font-size:11px; }.toast-region { position:fixed; right:20px; bottom:20px; z-index:30; display:grid; gap:8px; }.toast { max-width:360px; padding:12px 15px; border:1px solid var(--line); background:var(--surface-2); border-radius:9px; box-shadow:0 10px 30px #0008; font-size:12px; }.toast.success { border-color:#315d4e; }.toast.error { border-color:#713939; }
.public-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#18263a,#090d12 58%)}.public-card{width:min(520px,100%);border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:clamp(28px,6vw,54px);box-shadow:0 24px 80px #0008}.public-card h1{margin-top:52px;font-size:clamp(30px,6vw,48px);letter-spacing:-.04em}.public-card>p{color:var(--muted);line-height:1.6}.public-card label{display:flex;justify-content:space-between;align-items:center;margin-top:28px;color:var(--muted)}.auth-actions{display:flex;gap:10px;margin-top:28px}.secondary-button{border:1px solid var(--line);border-radius:8px;padding:11px 16px;color:var(--text);background:transparent;cursor:pointer}