/* Shared look for every page: colour tokens, type, buttons, focus, motion. The app page (body.app) adds its own layout on top. */
/* Opteru brand (Oct 2026): Opteroo brand guidance (navy + #2563eb blue, slate text, system font, weight 500, no bold)
   with the "Essential" feel Mariano picked: light-grey page, white cards, pill controls, 20px cards, soft layered shadows.
   Light is the default; dark (brand navy) only when chosen (html[data-theme="dark"]). */
:root{
  --paper:#EEF2F6; --surface:#FFFFFF; --sunk:#F1F5F9; --ink:#1E293B; --muted:#64748B; --line:#E2E8F0; --grid:#EDF1F5;
  --accent:#2563EB; --accent-ink:#FFFFFF; --accent-soft:#EFF4FF; --area:rgba(37,99,235,.09);
  --up:#16A34A; --down:#DC2626; --warn:#B45309; --warn-soft:#FFF8E6; --warn-line:#FDE68A;
  --navy:#1E3A6E; --eyebrow:#2563EB;
  --f-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-body:var(--f-display); --f-mono:var(--f-display);
  --r-card:20px; --r-inner:14px; --r-ctl:999px;
  --shadow:0 1px 2px rgba(15,22,41,.04),0 2px 6px rgba(15,22,41,.04),0 12px 32px -8px rgba(15,22,41,.08);
  --shadow-sm:0 1px 2px rgba(15,22,41,.06),0 1px 1px rgba(15,22,41,.03);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0F1629; --surface:#162040; --sunk:#1B2750; --ink:#FFFFFF; --muted:#94A3B8; --line:rgba(255,255,255,.1); --grid:rgba(255,255,255,.06);
  --accent:#3B82F6; --accent-ink:#FFFFFF; --accent-soft:rgba(37,99,235,.18); --area:rgba(96,165,250,.14);
  --up:#4ADE80; --down:#F87171; --warn:#FBBF24; --warn-soft:rgba(245,158,11,.12); --warn-line:rgba(245,158,11,.3);
  --navy:#FFFFFF; --eyebrow:#60A5FA;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px -8px rgba(0,0,0,.45); --shadow-sm:inset 0 1px 0 rgba(255,255,255,.04);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
b,strong{font-weight:500}
.btn{font:500 13px var(--f-body);padding:8px 16px;min-height:36px;border-radius:var(--r-ctl);border:.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 1px 2px rgba(37,99,235,.3),0 4px 12px -2px rgba(37,99,235,.35)}
.btn.primary:hover{background:var(--accent);opacity:.9}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.btn.small{padding:6px 10px;font-size:12px;min-height:32px}
.link{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{background:var(--surface);border:.5px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.wordmark img{width:28px;height:28px}
.wordmark b{font-weight:500;color:#2563EB}
body:not(.app) input[type=text],body:not(.app) input[type=email]{width:100%;font:15px var(--f-body);padding:10px 14px;border:.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
body:not(.app) label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.err{color:var(--down);font-size:13px;min-height:1.5em;margin:8px 0 0}
.muted{color:var(--muted)}

/* Motion: short, quiet feedback on hover and press; off when the system asks for reduced motion */
.btn,.link,.tab,.chip,.seg button,.subtabs button,a{transition:background-color .15s ease,border-color .15s ease,color .15s ease,filter .15s ease,box-shadow .15s ease}
.btn:active:not([disabled]){filter:brightness(.96)}
/* Loading placeholders */
.skel{position:relative;overflow:hidden;background:var(--sunk);border-radius:6px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent);animation:skel 1.4s ease-in-out infinite}
@keyframes skel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Side menu layout (18 Oct) */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px 14px 18px;background:var(--surface);border-right:.5px solid var(--line)}
.side .brandrow{padding:0 8px}
.side .ws{padding:0 4px}
.side .tabs{display:flex;flex-direction:column;gap:2px;border:0;box-shadow:none;background:none;padding:0;margin:6px 0 0;border-radius:0;max-width:none;overflow:visible}
.side .tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:500 14px var(--f-body);color:var(--muted);background:none;border:0;border-radius:10px;padding:9px 10px;text-decoration:none;cursor:pointer}
.side .tab:hover{background:var(--sunk);color:var(--ink)}
.side .tab[aria-selected="true"],:root[data-theme="dark"] .side .tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.side .tab .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nbadge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font:600 11.5px/20px var(--f-body);text-align:center;font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px 6px 0;border-top:.5px solid var(--line)}
.side-foot .eyebrow{margin:0 0 2px}
.shell .wrap{max-width:1320px;width:100%;margin:0 auto}
@media (max-width:900px){
  .shell{display:block}
  .side{position:static;height:auto;border-right:0;border-bottom:.5px solid var(--line);padding:14px 16px;gap:10px}
  .side .tabs{flex-direction:row;overflow-x:auto;margin:0}
  .side .tab{width:auto;white-space:nowrap;padding:8px 10px}
  .side-foot{margin-top:0}
}