/* GENERATED from sites/private/home/shared/ld.css by scripts/sync-tokens.mjs — edit it there, not here. */
/* LofiDawn design system v2 (2026) — tokens, light/dark modes, page skeleton, shared components.
   Load first: <link rel="stylesheet" href="https://home.lofidawn.com/shared/ld.css?v=2">
   Order: ld.css (global) → /<site>.css (site) → page <style>.
   Rules: colours only via the tokens below (they switch with the mode); no hex values in pages
   except artwork (device illustrations, brand logos, chart series). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* @tokens:start — single source for every LofiDawn site; scripts/sync-tokens.mjs copies this block to the public sites */
/* ── Modes: system by default; ld-shell sets <html data-theme="light|dark"> from the ld_theme cookie ── */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Tokens: light-dark(<light>, <dark>) ── */
:root {
    --bg: light-dark(#f7f7f8, #09090b);
    --bg2: light-dark(#ffffff, #111113);          /* cards, panels, inputs */
    --bg3: light-dark(#f2f2f4, #18181b);          /* subtle fills, table headers, hover */
    --bg4: light-dark(#e8e8ec, #222226);          /* pressed / strong fills */
    --border: light-dark(#e4e4e7, #27272a);
    --border2: light-dark(#eeeef1, #1e1e22);      /* hairlines inside cards */
    --text: light-dark(#27272a, #e4e4e7);
    --text-bright: light-dark(#09090b, #fafafa);
    --text-dim: light-dark(#52525b, #a1a1aa);
    --text-muted: light-dark(#71717a, #8b8b94);

    --accent: light-dark(#ea580c, #fb923c);       /* LofiDawn orange */
    --accent-strong: light-dark(#c2410c, #fdba74);
    --accent-text: light-dark(#c2410c, #fdba74);  /* accent used as text (AA contrast) */
    --accent-soft: light-dark(#fff1e7, rgba(251, 146, 60, .12));
    --on-accent: light-dark(#ffffff, #1c1006);

    --green: light-dark(#15803d, #4ade80);   --green-bg: light-dark(#dcfce7, rgba(74, 222, 128, .12));
    --blue: light-dark(#1d4ed8, #60a5fa);    --blue-bg: light-dark(#dbeafe, rgba(96, 165, 250, .12));
    --red: light-dark(#b91c1c, #f87171);     --red-bg: light-dark(#fee2e2, rgba(248, 113, 113, .12));
    --amber: light-dark(#b45309, #fbbf24);   --amber-bg: light-dark(#fef3c7, rgba(251, 191, 36, .12));
    --purple: light-dark(#7e22ce, #c084fc);  --purple-bg: light-dark(#f3e8ff, rgba(192, 132, 252, .12));
    --accent-blue: var(--blue); --accent-green: var(--green); --accent-red: var(--red); --accent-yellow: var(--amber);

    --code-bg: light-dark(#18181b, #0c0c0e);
    --code-text: #e4e4e7;
    --shadow-color: light-dark(rgba(16, 16, 24, .06), rgba(0, 0, 0, .5));
    --shadow: 0 1px 2px var(--shadow-color), 0 1px 3px var(--shadow-color);
    --shadow-lg: 0 12px 32px -8px var(--shadow-color), 0 2px 6px var(--shadow-color);

    --sb-bg: light-dark(#fbfbfc, #0c0c0e);
    --sb-hover: light-dark(#f0f0f3, #17171a);
    --sb-active: light-dark(#ebebef, #1d1d21);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
}
/* @tokens:end */

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; min-height: 100vh; font-feature-settings: 'cv11', 'ss01'; }
a { color: inherit; text-decoration: none; }
code, kbd, pre, samp { font-family: var(--font-mono); }
::selection { background: var(--accent-soft); color: var(--text-bright); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.up { color: var(--green); }
.dn { color: var(--red); }

/* ── Skeleton: the shell draws the sidebar; every page = .main > .topbar + .content ── */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .6rem 1.5rem; position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--border); }
.topbar-left { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .9rem; }
.tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--accent); flex-shrink: 0; }
.topbar-brand { font-size: .82rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.topbar-sub { font-size: .82rem; font-weight: 600; color: var(--text-bright); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub::before { content: '/'; margin-right: .55rem; color: var(--text-muted); font-weight: 400; }
.topbar-date { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.topbar-time { font-size: .75rem; color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.content { padding: 1.75rem 1.75rem 4rem; }

/* ── Components ── */
.section-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 1.75rem 0 .75rem; }
.panel, .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { margin-bottom: 1.25rem; overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border2); }
.panel-header h2, .panel-header h3 { font-size: .9rem; font-weight: 600; color: var(--text-bright); }
.panel-subtitle { font-size: .75rem; color: var(--text-muted); }
.panel-body { padding: 1.1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.15rem; }
.stat-label { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; margin: .3rem 0 .15rem; }
.stat-change { font-size: .75rem; color: var(--text-muted); }
.stat-value.up, .stat-change.up { color: var(--green); }
.stat-value.dn, .stat-change.dn { color: var(--red); }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; line-height: 1; padding: .3rem .5rem; border-radius: 999px; white-space: nowrap; background: var(--bg3); color: var(--text-dim); }
.badge-live, .badge-app, .badge-success { background: var(--green-bg); color: var(--green); }
.badge-beta, .badge-info { background: var(--blue-bg); color: var(--blue); }
.badge-wip, .badge-warn, .badge-ready { background: var(--amber-bg); color: var(--amber); }
.badge-error { background: var(--red-bg); color: var(--red); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg2); color: var(--text-bright); font: 500 .82rem var(--font-sans); cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--bg3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--bg3); color: var(--text-bright); }
.btn-danger { background: var(--red-bg); border-color: transparent; color: var(--red); }
.btn-sm { height: 28px; padding: 0 .65rem; font-size: .76rem; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .7rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: .72rem; font-weight: 600; text-align: left; color: var(--text-muted); }
pre { background: var(--code-bg); color: var(--code-text); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; font-size: .8rem; line-height: 1.6; }
:not(pre) > code { background: var(--bg3); color: var(--text-bright); border: 1px solid var(--border2); padding: .1em .35em; border-radius: 4px; font-size: .86em; }

@media (max-width: 800px) {
    .topbar { padding: .55rem 1rem; }
    .content { padding: 1.1rem 1rem 3rem; }
    .panel-header { flex-wrap: wrap; gap: .25rem .75rem; }
}

/* ── Shell: sidebar, mode switch, command palette (markup from ld-shell.js) ── */
.ld-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 50; display: flex; flex-direction: column; background: var(--sb-bg); border-right: 1px solid var(--border); font-family: var(--font-sans); transition: transform .22s ease; }
.ld-sidebar button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ld-ic { width: 16px; height: 16px; flex-shrink: 0; }
.ld-sb-hdr { padding: 1rem 1rem .75rem; }
.ld-sb-logo { display: flex; align-items: center; gap: .55rem; }
.ld-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; flex-shrink: 0; }
.ld-mark::after { content: ''; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--on-accent); }
.ld-sb-brand { font-size: .92rem; font-weight: 650; letter-spacing: -.01em; color: var(--text-bright); }
.ld-sb-sub { display: block; margin: .15rem 0 0 1.95rem; font-size: .72rem; color: var(--text-muted); }
.ld-search { display: flex; align-items: center; gap: .5rem; margin: 0 .75rem .5rem; padding: .45rem .6rem; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); background: var(--bg2) !important; color: var(--text-muted) !important; font-size: .8rem !important; }
.ld-search span { flex: 1; text-align: left; }
.ld-search kbd, .ld-pal kbd { font: 500 .65rem var(--font-mono); padding: .1rem .35rem; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); }
.ld-sb-nav { flex: 1; overflow-y: auto; padding: .25rem .5rem 1rem; }
.ld-section { padding: 1rem .55rem .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ld-row { display: flex; align-items: center; border-radius: var(--radius-sm); }
.ld-row:hover { background: var(--sb-hover); }
.ld-link { flex: 1; display: flex; align-items: center; gap: .6rem; min-height: 30px; padding: .3rem .55rem; font-size: .84rem; color: var(--text-dim); border-radius: var(--radius-sm); }
.ld-link:hover, .ld-cur > .ld-row .ld-link { color: var(--text-bright); }
.ld-link.ld-active { background: var(--sb-active); color: var(--text-bright); font-weight: 500; }
.ld-cur > .ld-row .ld-ic { color: var(--accent); }
.ld-caret { display: grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; color: var(--text-muted); border-radius: 5px; }
.ld-caret:hover { color: var(--text-bright); background: var(--sb-active); }
.ld-caret .ld-ic { width: 13px; height: 13px; transition: transform .15s; }
.ld-open .ld-caret .ld-ic { transform: rotate(90deg); }
.ld-pages { display: none; margin: .1rem 0 .35rem 1.3rem; padding-left: .55rem; border-left: 1px solid var(--border); }
.ld-open .ld-pages { display: block; }
.ld-group { padding: .5rem .5rem .15rem; font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ld-page { display: block; padding: .3rem .5rem; font-size: .8rem; color: var(--text-dim); border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-page:hover { color: var(--text-bright); background: var(--sb-hover); }
.ld-page.ld-active { color: var(--text-bright); background: var(--sb-active); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.ld-sb-ftr { padding: .75rem 1rem .9rem; border-top: 1px solid var(--border); }
.ld-sb-user { font-size: .75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-sb-role { font-size: .66rem; font-weight: 600; color: var(--accent-text); text-transform: capitalize; margin-bottom: .55rem; }
.ld-ftr-row { display: flex; align-items: center; justify-content: space-between; }
.ld-modes { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; }
.ld-modes button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; color: var(--text-muted); }
.ld-modes button[aria-pressed="true"] { background: var(--bg2); color: var(--text-bright); box-shadow: var(--shadow); }
.ld-logout { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-muted); }
.ld-logout:hover { background: var(--sb-hover); color: var(--text-bright); }
.ld-overlay { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .45); }
.ld-overlay.open { display: block; }
#ld-burger { display: none; place-items: center; width: 32px; height: 32px; margin-right: .1rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); cursor: pointer; }
#ld-burger.ld-float { position: fixed; top: 10px; left: 10px; z-index: 48; background: var(--bg2); border: 1px solid var(--border); }
.ld-pal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 14vh; background: rgba(0, 0, 0, .4); backdrop-filter: blur(2px); }
.ld-pal[hidden] { display: none; }
.ld-pal-box { width: min(560px, 92vw); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-sans); }
.ld-pal-box input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 1rem 1.1rem; font-size: .95rem; background: transparent; box-shadow: none; }
#ld-pal-list { max-height: 50vh; overflow-y: auto; padding: .35rem; }
.ld-pal-item { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .86rem; color: var(--text); }
.ld-pal-item.ld-sel, .ld-pal-item:hover { background: var(--bg3); color: var(--text-bright); }
.ld-pal-hint, .ld-pal-empty { font-size: .75rem; color: var(--text-muted); }
.ld-pal-empty { padding: 1rem; text-align: center; }
@media (min-width: 801px) { body { margin-left: 248px !important; } }
@media (max-width: 800px) {
    .ld-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .ld-sidebar.open { transform: none; }
    #ld-burger { display: grid; }
    body:has(#ld-burger.ld-float) { padding-top: 52px; }
}