:root {
  --bg: #f3faf7;
  --surface: #ffffff;
  --surface-2: #e7f4ef;
  --text: #102a24;
  --muted: #49645d;
  --border: #bfd8cf;
  --primary: #0b5d4f;
  --primary-strong: #073f36;
  --on-primary: #ffffff;
  --accent: #b96b00;
  --danger: #a51d2d;
  --success: #0a6a3a;
  --shadow: 0 14px 34px rgba(13, 71, 61, 0.11);
  --focus: #7b3ff2;
}
html[data-theme="dark"] {
  --bg: #061b17;
  --surface: #0b2a23;
  --surface-2: #123c33;
  --text: #f3fff9;
  --muted: #bed9d1;
  --border: #356b5e;
  --primary: #53e0b8;
  --primary-strong: #8aefd2;
  --on-primary: #04241d;
  --accent: #ffd166;
  --danger: #ff9ca8;
  --success: #85efad;
  --shadow: 0 18px 40px rgba(0,0,0,.28);
  --focus: #ffcf66;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); line-height:1.55; }
a { color:var(--primary); font-weight:700; }
html[data-theme="dark"] a { color:#8aefd2; }
button, input, select, textarea { font:inherit; }
button, .btn { min-height:44px; border-radius:12px; border:1px solid transparent; padding:.7rem 1rem; cursor:pointer; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.btn-primary { background:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-strong); }
.btn-secondary { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-danger { background:var(--danger); color:#fff; }
html[data-theme="dark"] .btn-danger { color:#2a0308; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 94%, transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }
.nav { max-width:1480px; margin:auto; padding:.65rem 1rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.65rem; margin-right:auto; text-decoration:none; color:var(--text); }
.brand-mark { width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:grid; place-items:center; color:var(--on-primary); font-size:1.25rem; box-shadow:var(--shadow); }
.brand strong { display:block; font-size:.98rem; }
.brand small { display:block; color:var(--muted); font-weight:650; }
.navlinks { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.navlinks a { text-decoration:none; padding:.55rem .7rem; border-radius:10px; color:var(--text); font-size:.92rem; }
.navlinks a:hover { background:var(--surface-2); }
.container { width:min(1480px, calc(100% - 2rem)); margin:1.25rem auto 3rem; }
.hero { background:linear-gradient(135deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:24px; padding:clamp(1.25rem,3vw,2.5rem); box-shadow:var(--shadow); display:grid; gap:1.2rem; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); align-items:center; }
.hero h1 { margin:0; font-size:clamp(1.8rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.03em; }
.hero p { color:var(--muted); font-size:1.08rem; max-width:75ch; }
.eyebrow { color:var(--accent); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.col-12 { grid-column:span 12; }.col-8 { grid-column:span 8; }.col-6 { grid-column:span 6; }.col-4 { grid-column:span 4; }.col-3 { grid-column:span 3; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow:var(--shadow); min-width:0; }
.card h2,.card h3 { margin-top:0; }
.metric { font-size:2rem; font-weight:900; line-height:1; margin:.35rem 0; }
.muted { color:var(--muted); }
.toolbar { display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; margin:.75rem 0; }
.stack { display:grid; gap:.85rem; }
.form-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.8rem; }
.field { grid-column:span 6; }
.field.full { grid-column:span 12; }
.field.third { grid-column:span 4; }
label { display:block; font-weight:800; margin-bottom:.3rem; }
input, select, textarea { width:100%; background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:11px; padding:.75rem .8rem; min-height:44px; }
textarea { min-height:110px; resize:vertical; }
.help { color:var(--muted); font-size:.87rem; margin-top:.25rem; }
.alert { border-radius:13px; padding:.8rem 1rem; margin:.75rem 0; border:1px solid var(--border); background:var(--surface-2); }
.alert.error { border-color:var(--danger); }.alert.success { border-color:var(--success); }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:.75rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:var(--surface-2); font-size:.86rem; text-transform:uppercase; letter-spacing:.03em; }
.badge { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-weight:800; font-size:.8rem; }
.badge.high,.badge.critical { border-color:var(--danger); }.badge.done { border-color:var(--success); }
.actions { display:flex; flex-wrap:wrap; gap:.35rem; }
.actions form { margin:0; }
.actions .btn, .actions button { min-height:36px; padding:.45rem .65rem; font-size:.84rem; }
.empty { padding:1.3rem; text-align:center; border:1px dashed var(--border); border-radius:14px; color:var(--muted); }
.kicker { display:flex; align-items:center; gap:.45rem; font-weight:900; }
.quick-add { display:grid; grid-template-columns:1fr auto auto; gap:.5rem; }
.quick-add input { min-width:0; }
.progress { height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.progress > span { display:block; height:100%; background:var(--primary); }
.case-card { height:100%; display:flex; flex-direction:column; }
.case-card .actions { margin-top:auto; padding-top:.8rem; }
.case-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0; }
.guide-step { display:grid; grid-template-columns:48px 1fr; gap:.85rem; align-items:start; }
.step-num { width:42px; height:42px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-weight:900; }
.footer { border-top:1px solid var(--border); padding:1.5rem 1rem 3rem; color:var(--muted); }
.footer-inner { max-width:1480px; margin:auto; display:grid; gap:.7rem; grid-template-columns:2fr 1fr; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.pagination a { padding:.45rem .7rem; border:1px solid var(--border); border-radius:9px; text-decoration:none; color:var(--text); }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.stat { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:.9rem; }
.auth-shell { min-height:70vh; display:grid; place-items:center; }
.auth-card { width:min(560px,100%); }
.speech-controls { display:flex; gap:.35rem; flex-wrap:wrap; }
.speech-controls button { min-height:38px; padding:.45rem .65rem; }
.list-clean { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.list-clean li { padding:.65rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.checkbox-row { display:flex; align-items:center; gap:.6rem; }
.checkbox-row input { width:20px; min-height:20px; }
.notice { border-left:5px solid var(--accent); padding:.75rem 1rem; background:var(--surface-2); border-radius:10px; }
@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; }
  .col-8,.col-6,.col-4,.col-3 { grid-column:span 12; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .field,.field.third { grid-column:span 12; }
  .navlinks { width:100%; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 1rem,1480px); }
  .quick-add { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .brand small { display:none; }
}
@media print {
  .topbar,.footer,.no-print,.speech-controls { display:none!important; }
  body { background:#fff; color:#000; }
  .card,.hero { box-shadow:none; border:1px solid #aaa; }
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] a.btn-primary { color: var(--on-primary); }
html[data-theme="dark"] a.btn-secondary,
html[data-theme="dark"] a.btn-ghost { color: var(--text); }
html[data-theme="dark"] a.btn-danger { color: #2a0308; }

/* PWA + premium mobile application shell */
.desktop-account { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.desktop-account form { margin:0; }
.mobile-bottom-nav,.mobile-more-menu { display:none; }
.pwa-toast { position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); z-index:80; width:min(560px,calc(100% - 2rem)); background:var(--text); color:var(--bg); border-radius:14px; padding:.8rem 1rem; box-shadow:var(--shadow); text-align:center; font-weight:750; }
.pwa-toast[hidden] { display:none; }

@media (max-width: 760px) {
  body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .topbar .nav { min-height:58px; padding:.45rem .75rem; flex-wrap:nowrap; }
  .topbar .brand { min-width:0; }
  .topbar .brand strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:calc(100vw - 92px); }
  .topbar .navlinks,.topbar .speech-controls,.topbar .desktop-account { display:none; }
  .container { margin-top:.8rem; margin-bottom:1.5rem; }
  .footer { padding-bottom:1rem; }
  .mobile-bottom-nav { display:grid; position:fixed; left:0; right:0; bottom:0; z-index:60; grid-template-columns:repeat(5,1fr); align-items:end; min-height:68px; padding:.35rem max(.35rem,env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left)); background:color-mix(in srgb,var(--surface) 97%,transparent); border-top:1px solid var(--border); box-shadow:0 -12px 28px rgba(3,35,29,.14); backdrop-filter:blur(16px); }
  .mobile-nav-item { appearance:none; border:0; background:transparent; color:var(--muted); text-decoration:none; min-width:0; min-height:56px; padding:.3rem .12rem; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem; font-size:.68rem; font-weight:850; line-height:1.15; }
  .mobile-nav-item.active { color:var(--primary); background:var(--surface-2); }
  html[data-theme="dark"] .mobile-nav-item.active { color:var(--primary-strong); }
  .mobile-nav-icon { display:block; font-size:1.25rem; line-height:1.15; }
  .mobile-nav-add { position:relative; margin-top:-19px; min-height:64px; width:64px; justify-self:center; border-radius:22px; background:var(--primary); color:var(--on-primary); border:4px solid var(--bg); box-shadow:var(--shadow); }
  .mobile-nav-add.active { background:var(--primary-strong); color:var(--on-primary); }
  .mobile-nav-add .mobile-nav-icon { font-size:1.45rem; }
  .mobile-more-menu { display:block; position:fixed; left:.65rem; right:.65rem; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:70; max-height:min(70vh,540px); overflow:auto; padding:1rem; border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:0 22px 60px rgba(0,0,0,.28); }
  .mobile-more-menu[hidden] { display:none; }
  .mobile-more-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; font-size:1.05rem; }
  .mobile-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
  .mobile-more-grid a { display:flex; align-items:center; min-height:48px; padding:.65rem .7rem; border:1px solid var(--border); border-radius:13px; text-decoration:none; color:var(--text); background:var(--surface-2); }
  .mobile-signout { width:100%; margin-top:.7rem; }
  .mobile-menu-open::before { content:""; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.24); }
  .pwa-toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
  .table-wrap { border-radius:12px; }
}

@media (display-mode: standalone) {
  .topbar { padding-top:env(safe-area-inset-top); }
}
@media (max-width: 760px) {
  .mobile-more-grid button { width:100%; min-height:48px; padding:.65rem .7rem; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); color:var(--text); justify-content:flex-start; }
  .mobile-speech-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:.65rem; }
}