*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", "SF Pro Text", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.num{ font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; font-weight:800; letter-spacing:-0.01em; }
p{margin:0;}
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{ max-width:1320px; margin:0 auto; padding:20px 20px 64px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* Subtle, deliberate motion — a short fade+rise on load, tasteful press
   feedback on buttons, smooth color/shadow transitions. Nothing loops,
   nothing calls attention to itself; it should read as "solid," not "flashy." */
@keyframes riseIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* Deliberately NOT applied to .topbar: animating transform there would leave
   it in its own stacking context for as long as the animation is attached
   (a well-known CSS gotcha), trapping the bell dropdown's z-index behind
   later siblings like .stat-row. The topbar appears instantly instead —
   a fine trade since it holds interactive controls, not read-only content. */
.content > .grid2 > *,
.content > .card,
.content > .stat-row{
  animation: riseIn .38s cubic-bezier(.16,1,.3,1) both;
}
.content > .stat-row{ animation-delay: 40ms; }
.content > .grid2 > *:nth-child(1){ animation-delay: 70ms; }
.content > .grid2 > *:nth-child(2){ animation-delay: 120ms; }
.content > .card.full{ animation: riseIn .38s cubic-bezier(.16,1,.3,1) both; animation-delay: 160ms; }

.btn{ transition: filter .12s ease, transform .08s ease, background-color .15s ease, opacity .15s ease; }
.btn:active:not(:disabled){ transform: scale(0.97); }
.pill{ transition: background-color .2s ease, color .2s ease; }
.card{ transition: box-shadow .2s ease; }
input, textarea, select{ transition: border-color .15s ease, box-shadow .15s ease; }

/* Toast host — top-right, stacks upward, auto-dismisses */
.toast-host{ position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; box-shadow:var(--shadow-lg); padding:11px 16px; font-size:13px; font-weight:600; color:var(--ink); max-width:320px; animation: toastIn .25s cubic-bezier(.16,1,.3,1) both; }
.toast.error{ border-left-color: var(--st-alert); }
.toast.leaving{ animation: toastOut .18s ease both; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(16px) scale(.96); } }

/* Auth shell (login / change-password) */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:32px 30px; }
.auth-brand{ text-align:center; margin-bottom:24px; }
.brand-wordmark{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; }
.brand-wordmark-main{ font-weight:800; font-size:20px; letter-spacing:0.02em; color:var(--ink); }
.brand-wordmark-sub{ font-weight:700; font-size:11px; letter-spacing:0.18em; color:var(--ink-faint); text-transform:uppercase; }
.auth-title{ font-weight:800; font-size:17px; }
.auth-sub{ color:var(--ink-soft); font-size:13px; }
.auth-field{ margin-bottom:14px; }
.field-label{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.field-input{ width:100%; font-family:inherit; font-size:14px; padding:10px 12px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); }
.field-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.error-banner{ background:var(--st-alert-soft); color:var(--st-alert); border:1px solid var(--st-alert); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:16px; }
.success-banner{ background:var(--st-work-soft); color:var(--st-work); border:1px solid var(--st-work); border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:16px; }
.auth-link{ display:block; text-align:center; margin-top:16px; font-size:12.5px; color:var(--ink-soft); text-decoration:none; }
.auth-link:hover{ color:var(--accent); text-decoration:underline; }