/* ---------- Theme tokens ---------- */
:root, [data-theme="light"] {
  --bg:#f8fafc; --bg-image:none; --surface:#ffffff; --text:#1f2937; --muted:#4b5563;
  --border:#d1d5db; --border-w:1px; --primary:#2563eb; --on-primary:#ffffff; --primary-bg:#2563eb;
  --accent:#0369a1; --danger:#b91c1c; --danger-bg:#fee2e2; --success:#15803d; --success-bg:#dcfce7;
  --warn:#92400e; --warn-bg:#fef3c7; --info:#1d4ed8; --info-bg:#dbeafe;
  --header-bg:#ffffff; --header-text:#1f2937;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.06); --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:var(--font-body); --head-weight:700; --head-transform:none; --head-spacing:0; --cols:1;
}
[data-theme="dark"] {
  --bg:#0f172a; --surface:#1e293b; --text:#f8fafc; --muted:#cbd5e1; --border:#475569;
  --primary:#818cf8; --on-primary:#0f172a; --primary-bg:#818cf8; --accent:#7dd3fc;
  --danger:#fecaca; --danger-bg:#7f1d1d; --success:#bbf7d0; --success-bg:#14532d;
  --warn:#fde68a; --warn-bg:#78350f; --info:#bfdbfe; --info-bg:#1e3a8a;
  --header-bg:#0b1220; --header-text:#f8fafc; --shadow:0 1px 3px rgba(0,0,0,.5);
}
[data-theme="divi"] {
  --bg:#f5f3ff; --bg-image:linear-gradient(135deg,#ede9fe 0%,#dbeafe 100%); --surface:#ffffff; --text:#1e1b4b; --muted:#4b4776;
  --border:#c4b5fd; --primary:#6d28d9; --on-primary:#ffffff; --primary-bg:linear-gradient(135deg,#7c3aed,#2563eb);
  --accent:#6d28d9; --header-bg:linear-gradient(135deg,#5b21b6,#1d4ed8); --header-text:#ffffff;
  --radius:16px; --shadow:0 10px 25px -10px rgba(91,33,182,.35); --head-weight:800; --head-spacing:-.02em;
}
[data-theme="ocean"] {
  --bg:#0b2545; --bg-image:linear-gradient(180deg,#0b2545 0%,#0e3a5f 100%); --surface:#13315c; --text:#eef9f6; --muted:#b8e6dc;
  --border:#2a6f8f; --primary:#2dd4bf; --on-primary:#04202c; --primary-bg:#2dd4bf; --accent:#8ee4c8;
  --danger:#fecaca; --danger-bg:#7f1d1d; --success:#a7f3d0; --success-bg:#065f46; --warn:#fde68a; --warn-bg:#78350f;
  --info:#bae6fd; --info-bg:#0c4a6e; --header-bg:#071a33; --header-text:#eef9f6; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.35);
}
[data-theme="ciaos"] {
  --bg:#fff7ed; --bg-image:none; --surface:#ffffff; --text:#1f1235; --muted:#4f3f6b;
  --border:#1f1235; --border-w:2px; --primary:#be185d; --on-primary:#ffffff; --primary-bg:#be185d; --accent:#b45309;
  --header-bg:#fde047; --header-text:#1f1235; --radius:20px; --shadow:4px 4px 0 #1f1235; --head-weight:800;
}
[data-theme="adios"] {
  --bg:#ffffff; --surface:#ffffff; --text:#000000; --muted:#262626; --border:#000000; --border-w:2px;
  --primary:#000000; --on-primary:#ffffff; --primary-bg:#000000; --accent:#000000;
  --danger:#000000; --danger-bg:#ffffff; --success:#000000; --success-bg:#ffffff; --warn:#000000; --warn-bg:#ffffff;
  --info:#000000; --info-bg:#ffffff; --header-bg:#000000; --header-text:#ffffff;
  --radius:0px; --shadow:none; --head-transform:uppercase; --head-spacing:.08em; --head-weight:800;
}
[data-theme="philosophy"] {
  --bg:#f6f0e4; --surface:#fffaf0; --text:#2b2118; --muted:#5a4a3a; --border:#b9a988;
  --primary:#8b3a2f; --on-primary:#ffffff; --primary-bg:#8b3a2f; --accent:#8b3a2f;
  --header-bg:#efe6d2; --header-text:#2b2118; --radius:4px; --shadow:0 1px 0 rgba(0,0,0,.05);
  --font-head:Georgia,"Times New Roman",serif; --font-body:Georgia,"Times New Roman",serif; --head-weight:600;
}
[data-theme="magazine"] {
  --bg:#f2efe8; --surface:#ffffff; --text:#111111; --muted:#3f3f3f; --border:#111111; --border-w:1px;
  --primary:#b91c1c; --on-primary:#ffffff; --primary-bg:#b91c1c; --accent:#b91c1c;
  --header-bg:#ffffff; --header-text:#111111; --radius:0px; --shadow:none; --cols:2;
  --font-head:Georgia,"Times New Roman",serif; --head-weight:800; --head-transform:uppercase; --head-spacing:.04em;
}

/* ---------- Base ---------- */
body { background-color:var(--bg); background-image:var(--bg-image); background-attachment:fixed; color:var(--text); font-family:var(--font-body); }
h1,h2,h3,.brand { font-family:var(--font-head); font-weight:var(--head-weight); text-transform:var(--head-transform); letter-spacing:var(--head-spacing); }
.skip-link { position:absolute; left:8px; top:8px; background:var(--primary-bg); color:var(--on-primary); padding:8px 12px; z-index:100; }
.app-header { background:var(--header-bg); color:var(--header-text); border-bottom:var(--border-w) solid var(--border); }
[data-theme="magazine"] .app-header { border-bottom:4px double #111; }
.hdr-label { opacity:.9; }
.muted { color:var(--muted); }

.card { background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }
[data-theme="magazine"] .card { border-top:4px solid #111; }

.field { background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border); border-radius:calc(var(--radius) * .6); padding:.5rem .65rem; width:100%; font:inherit; }
.field-sm { padding:.3rem .5rem; width:auto; font-size:.875rem; }
.field:focus-visible, .btn:focus-visible, .nav-btn:focus-visible, select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
label.lbl { display:block; font-size:.8rem; font-weight:600; margin-bottom:.2rem; color:var(--muted); }

.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .9rem; border-radius:calc(var(--radius) * .6); font-weight:600; cursor:pointer;
  border:var(--border-w) solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-weight:600; }
.btn-primary { background:var(--primary-bg); color:var(--on-primary); border-color:transparent; }
[data-theme="adios"] .btn-primary, [data-theme="ciaos"] .btn-primary { border-color:var(--text); }
.btn-ghost { background:transparent; }
.btn-danger { color:var(--danger); }
.btn-sm { padding:.25rem .55rem; font-size:.8rem; }
.btn:hover { filter:brightness(1.06); }
[data-theme="ciaos"] .btn:hover { transform:translate(-1px,-1px); }

.nav-btn { padding:.4rem .8rem; border-radius:calc(var(--radius) * .6); background:transparent; color:var(--header-text); font:inherit; font-weight:600; cursor:pointer; border:var(--border-w) solid transparent; }
.nav-btn[aria-current="page"] { border-color:currentColor; background:rgba(127,127,127,.18); }
.app-header .field { color:var(--text); }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; border:1px solid currentColor; }
.b-pending { color:var(--warn); background:var(--warn-bg); }
.b-progress { color:var(--info); background:var(--info-bg); }
.b-done { color:var(--success); background:var(--success-bg); }
.b-overdue { color:var(--danger); background:var(--danger-bg); }
.b-bell { color:var(--accent); background:transparent; }

/* ---------- Tasks ---------- */
.task-grid { display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:768px){ .task-grid { grid-template-columns:repeat(var(--cols),1fr); } }
.task { border-left-width:6px; }
.task.overdue { border-left-color:var(--danger); }
.task.done { opacity:.8; }
.task.done .t-title { text-decoration:line-through; }
.task.alerting { border-left-color:var(--accent); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent); } }
@media (prefers-reduced-motion:reduce){ .task.alerting { animation:none; } }

.stat { text-align:center; }
.stat b { display:block; font-size:1.6rem; font-family:var(--font-head); }

table.grid { width:100%; border-collapse:collapse; min-width:760px; }
table.grid th { text-align:left; font-size:.78rem; color:var(--muted); padding:.35rem .4rem; }
table.grid td { padding:.3rem .3rem; vertical-align:top; }

/* ---------- Dialogs / toasts ---------- */
.dlg { border:var(--border-w) solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); padding:0; width:min(92vw,520px); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.dlg::backdrop { background:rgba(0,0,0,.55); }
.toast { background:var(--primary-bg); color:var(--on-primary); padding:.6rem .9rem; border-radius:calc(var(--radius) * .6); box-shadow:var(--shadow); max-width:320px; border:var(--border-w) solid var(--border); }
.toast.err { background:var(--danger-bg); color:var(--danger); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.focus\:not-sr-only:focus { position:absolute; width:auto; height:auto; clip:auto; }