/* The hidden attribute always wins: an author display:flex/grid/block on the same
   element would otherwise beat the browser's own [hidden]{display:none}. */
[hidden]{display:none!important}
/* ==========================================================================
   Auralata — component layer v1.0
   Requires tokens.css. Every value here comes from a semantic token;
   a component never reaches for a primitive.
   ========================================================================== */

/* --- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.18}
h1{font-size:30px;letter-spacing:-.025em}
h2{font-size:23px}
h3{font-size:18px;letter-spacing:-.015em}
h4{font-size:16px;letter-spacing:-.01em}
a{color:var(--marine)}
button{font:inherit;color:inherit;cursor:pointer}
code,.mono{font-family:var(--font-mono);font-size:.86em;font-variant-numeric:tabular-nums}
::selection{background:var(--aura);color:#fff}
:focus-visible{outline:var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- type utilities ------------------------------------------------------ */
.t-display{font-family:var(--font-display);font-size:42px;line-height:1.06;letter-spacing:-.035em;font-weight:600}
.t-num{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.t-over{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--text-3)}
.muted{color:var(--text-3)}
.small{font-size:12.5px}
.note{font-size:12.5px;color:var(--text-3);line-height:1.5}

/* --- layout -------------------------------------------------------------- */
.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.grid{display:grid;gap:var(--s-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* --- card ---------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-1)}
.card>.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);flex-wrap:wrap}
.card>.hd h3{font-size:14px}
.card>.bd{padding:var(--s-4)}
.card.sel{border-color:var(--aura);box-shadow:0 0 0 3px var(--aura-soft)}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  border:1px solid var(--border-2);background:var(--surface);color:var(--text);
  border-radius:var(--r-sm);padding:7px 13px;font-size:13.5px;font-weight:500;
  transition:background var(--t-micro),border-color var(--t-micro),transform var(--t-micro)}
.btn:hover{border-color:var(--ink-400)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper)}
.btn.primary:hover{background:var(--ink-700);border-color:var(--ink-700)}
.btn.accent{background:var(--aura);border-color:var(--aura);color:#fff}
.btn.accent:hover{background:var(--aura-600);border-color:var(--aura-600)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{background:transparent;border-color:var(--rose);color:var(--rose)}
.btn.danger-solid{background:var(--rose);border-color:var(--rose);color:#fff}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:var(--r-xs)}
.btn.lg{padding:10px 18px;font-size:15px;border-radius:var(--r-md)}
.btn[disabled]{opacity:.45;pointer-events:none}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;display:inline-block;animation:au-spin .7s linear infinite}
@keyframes au-spin{to{transform:rotate(360deg)}}

/* --- form ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:5px}
.field>label{font-size:12.5px;font-weight:500;color:var(--text-2)}
.input,input[type=text],input[type=email],input[type=number],input[type=date],input[type=time],select,textarea{
  font:inherit;font-size:13.5px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:8px 11px;width:100%;
  transition:border-color var(--t-micro),box-shadow var(--t-micro)}
.input::placeholder{color:var(--ink-400)}
.input:hover{border-color:var(--ink-400)}
.input:focus,select:focus,textarea:focus{outline:0;border-color:var(--aura);box-shadow:0 0 0 3px var(--aura-soft)}
.input.err{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}
.input[readonly]{background:var(--surface)}
.input[disabled]{background:var(--surface-2);color:var(--text-3)}
.help{font-size:12px;color:var(--text-3)}
.help.err{color:var(--rose)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.tgl{position:relative;width:34px;height:20px;border-radius:var(--r-full);background:var(--ink-300);
  border:0;padding:0;flex:0 0 34px;transition:background var(--t-base)}
.tgl.on{background:var(--mint)}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left var(--t-base);box-shadow:var(--e-1)}
.tgl.on::after{left:16px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--aura-soft);color:var(--aura-600);
  border-radius:var(--r-xs);padding:3px 7px;font-size:12px;font-weight:500}
.multi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--border-2);
  border-radius:var(--r-sm);padding:6px 8px;background:var(--surface)}
.multi input{border:0;outline:0;flex:1;min-width:110px;padding:2px;background:none}
.dropz{border:1px dashed var(--border-2);border-radius:var(--r-md);background:var(--surface-2);
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}

/* --- status -------------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid transparent;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.pill.neutral{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.pill.accent{background:var(--aura-soft);color:var(--aura-600)}
.pill.marine{background:var(--marine-soft);color:var(--marine)}
.pill.ok{background:var(--mint-soft);color:var(--mint)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--rose-soft);color:var(--rose)}
.note-box{border-radius:var(--r-sm);padding:10px 12px;font-size:13px}
.note-box.warn{background:var(--amber-soft);color:var(--amber)}
.note-box.ok{background:var(--mint-soft);color:var(--mint)}
.note-box.info{background:var(--marine-soft);color:var(--marine)}
.note-box.bad{background:var(--rose-soft);color:var(--rose)}
.meter{height:8px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.meter>i{display:block;height:100%;background:var(--aura)}
.meter>i.warn{background:var(--amber)}
.meter>i.bad{background:var(--rose)}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink-900);color:var(--paper);
  border-radius:var(--r-md);padding:11px 14px;font-size:13.5px;box-shadow:var(--e-3);max-width:380px;z-index:var(--z-toast)}
.empty{border:1px dashed var(--border-2);border-radius:var(--r-lg);padding:32px;text-align:center;background:var(--surface-2)}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:au-sh 1.3s ease infinite;border-radius:var(--r-xs)}
@keyframes au-sh{0%{background-position:100% 0}100%{background-position:0 0}}

/* --- navigation ---------------------------------------------------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.tabs>button{background:none;border:0;padding:9px 12px;font-size:13.5px;color:var(--text-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.tabs>button.on{color:var(--text);border-bottom-color:var(--aura)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:2px}
.seg>button{border:0;background:none;padding:5px 12px;font-size:13px;
  border-radius:calc(var(--r-md) - 3px);color:var(--text-3);font-weight:500}
.seg>button.on{background:var(--surface);color:var(--text);box-shadow:var(--e-1)}
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;flex-wrap:wrap}
.crumbs a{color:var(--text-3);text-decoration:none}
.crumbs a:hover{color:var(--aura)}
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);
  border-radius:var(--r-full);padding:4px 11px;font-size:12px;color:var(--text-3)}
.fchip.on{border-color:var(--aura);background:var(--aura-soft);color:var(--aura-600);font-weight:600}

/* --- table --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);
  font-weight:600;padding:9px 12px;border-bottom:1px solid var(--border)}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--surface-2)}
tr.sel td{box-shadow:inset 3px 0 0 var(--aura)}
.dense td{padding:6px 12px}
.dense th{padding:7px 12px}

/* --- overlays ------------------------------------------------------------ */
.backdrop{position:fixed;inset:0;background:rgba(16,22,25,.55);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e-3);width:100%;max-width:560px;padding:22px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,92vw);background:var(--surface);
  border-left:1px solid var(--border);box-shadow:var(--e-3);z-index:var(--z-modal)}
.menu{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);
  box-shadow:var(--e-2);padding:4px;min-width:180px;z-index:var(--z-pop);display:flex;flex-direction:column}
.menu>button{border:0;background:none;text-align:left;padding:7px 9px;border-radius:var(--r-xs);
  font-size:12.5px;color:var(--text-2)}
.menu>button:hover{background:var(--surface-2);color:var(--aura)}
.menu>.sep{height:1px;background:var(--border);margin:4px 0}
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--border-2);color:var(--text-3);font-size:10px;font-weight:600;
  background:var(--surface);cursor:help;flex:0 0 15px}
.tip::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  background:var(--ink-900);color:var(--paper);font-size:12px;font-weight:400;line-height:1.4;padding:7px 10px;
  border-radius:5px;width:max-content;max-width:280px;white-space:normal;text-align:left;opacity:0;visibility:hidden;
  transition:opacity var(--t-micro);z-index:var(--z-tip);box-shadow:var(--e-2)}
.tip:hover::after,.tip:focus-visible::after{opacity:1;visibility:visible}

/* --- app shell ----------------------------------------------------------- */
.app{display:flex;min-height:100vh}
.side{width:200px;flex:0 0 200px;background:var(--brand-ink);color:#fff;
  position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;font-size:13px}
.side .nav-group{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.36);padding:12px 12px 4px}
.side a,.side .navbtn{display:flex;align-items:center;gap:9px;padding:6px 12px;border:0;background:none;
  width:100%;text-align:left;color:rgba(255,255,255,.72);text-decoration:none;font-size:13px;border-radius:0}
.side a:hover,.side .navbtn:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on,.side .navbtn.on{background:rgba(255,255,255,.1);color:#fff;font-weight:500;
  box-shadow:inset 3px 0 0 var(--aura)}
.side .todo{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:0 0 7px;margin-left:auto}
.main{flex:1;min-width:0;padding:0 var(--s-6) var(--s-10)}
.appbar{position:sticky;top:0;z-index:var(--z-bar);display:flex;align-items:center;gap:var(--s-3);
  background:var(--surface);border-bottom:1px solid var(--border);margin:0 calc(var(--s-6) * -1);
  padding:9px var(--s-6);flex-wrap:wrap}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) 0;border-bottom:1px solid var(--border);margin-bottom:var(--s-5);flex-wrap:wrap}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 15px}
.stat .l{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);font-weight:600}
.stat .v{font-family:var(--font-mono);font-size:23px;font-weight:500;margin:5px 0 2px;letter-spacing:-.02em}
.stat .d{font-size:12px;color:var(--text-3)}
@media (max-width:640px){.side{display:none}.main{padding:0 var(--s-4) var(--s-8)}}