/* RecoveryTrack skins: a visual layer over the normal styles. Pick one with <html data-skin="...">.
   Nothing here changes layout or features; remove the attribute to get the classic look back. */

/* ---------- shared polish for every skin ---------- */
:root[data-skin] body { font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
:root[data-skin] { --radius: 12px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.06);
  --shadow-2: 0 20px 50px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08); }
:root[data-skin] .brand h1, :root[data-skin] .dr-head h2 { font-stretch: 100%; font-weight: 700; letter-spacing: -0.02em; }
:root[data-skin] .btn { border-radius: 9px; padding: 8px 15px; font-weight: 600; transition: background .15s, box-shadow .15s, transform .08s, filter .15s; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
:root[data-skin] .btn:active { transform: translateY(1px); }
:root[data-skin] .btn.primary { box-shadow: 0 1px 2px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.12); }
:root[data-skin] .tools input[type=search], :root[data-skin] .tools select, :root[data-skin] .f input, :root[data-skin] .f select, :root[data-skin] .f textarea {
  border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
:root[data-skin] .f input:focus, :root[data-skin] .f select:focus, :root[data-skin] .f textarea:focus, :root[data-skin] .tools input[type=search]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:root[data-skin] .tbl-wrap, :root[data-skin] .hm-card, :root[data-skin] .bcol, :root[data-skin] fieldset, :root[data-skin] .today, :root[data-skin] .modal-card { border-radius: 14px; }
:root[data-skin] th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
:root[data-skin] td, :root[data-skin] th { padding: 11px 14px; }
:root[data-skin] tbody tr { transition: background .12s; }
:root[data-skin] .pill { font-size: 12px; font-weight: 600; padding: 3px 10px; letter-spacing: .01em; }
:root[data-skin] .pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; opacity: .85; }
:root[data-skin] .pill.none::before { display: none; }
:root[data-skin] .hm-stat b { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
:root[data-skin] .hm-card h3 { font-size: 11.5px; letter-spacing: .08em; }
:root[data-skin] .hm-stat { transition: transform .15s, box-shadow .15s, border-color .15s; }
:root[data-skin] .hm-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
:root[data-skin] .bcard { border-radius: 10px; transition: transform .12s, box-shadow .12s, border-color .12s; }
:root[data-skin] .bcard:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
:root[data-skin] .tag { border-radius: 7px; transform: rotate(-1deg); box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.12); }
:root[data-skin] .form-nav button { padding: 6px 12px; }
:root[data-skin] fieldset legend { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
:root[data-skin] .drawer { box-shadow: -24px 0 60px rgba(15,23,42,.22); }
:root[data-skin] .s-item { border-radius: 10px; transition: background .12s, color .12s; }
:root[data-skin] .s-sep { font-size: 10.5px; letter-spacing: .1em; }

/* ---------- 1. Clean light (Stripe-like): airy white, indigo accent ---------- */
:root[data-skin="clean"] {
  --bg: #F6F8FC; --panel: #FFFFFF; --ink: #0F172A; --muted: #64748B; --line: #E4E8F0;
  --accent: #4F46E5; --accent-ink: #FFFFFF; --sticker: #FACC15; --sticker-ink: #1C1A05;
  --open: #B45309; --open-bg: #FEF3C7; --done: #047857; --done-bg: #D1FAE5; --dead: #BE123C; --dead-bg: #FFE4E6;
  --hover: #F1F4FA; --sel: #EEF2FF; }
:root[data-skin="clean"] body.has-side .side { background: #FFFFFF; border-right: 1px solid var(--line); }
:root[data-skin="clean"] .s-item.on { background: #EEF2FF; color: #4338CA; }
:root[data-skin="clean"] .s-new { background: linear-gradient(180deg, #6366F1, #4F46E5); }
:root[data-skin="clean"] header.bar { background: rgba(246,248,252,.85); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: transparent; }
:root[data-skin="clean"] .tbl-wrap, :root[data-skin="clean"] .hm-card, :root[data-skin="clean"] .bcol { border-color: #E9EDF4; }

/* ---------- 2. Navy & gold (premium lab): deep navy sidebar, gold accents ---------- */
:root[data-skin="navy"] {
  --bg: #F3F4F8; --panel: #FFFFFF; --ink: #0E1630; --muted: #5E6782; --line: #E1E4EC;
  --accent: #14306B; --accent-ink: #FFFFFF; --sticker: #E9B949; --sticker-ink: #1E1604;
  --open: #9A6200; --open-bg: #FBF0D6; --done: #1F7A4D; --done-bg: #DCF3E6; --dead: #A3263A; --dead-bg: #FBE3E7;
  --hover: #F2F4F9; --sel: #FFF7E0; --gold: #D4A537; }
:root[data-skin="navy"] body.has-side .side { background: linear-gradient(180deg, #0B1733 0%, #0F2047 100%); border-right: 0; color: #DCE3F5; }
:root[data-skin="navy"] .s-top .logo { filter: brightness(0) invert(1); opacity: .95; }
:root[data-skin="navy"] .s-sep { color: #7C8BB3; }
:root[data-skin="navy"] .s-item, :root[data-skin="navy"] .s-user { color: #C9D3EC; }
:root[data-skin="navy"] .s-item svg { color: #8A9AC4; }
:root[data-skin="navy"] .s-item:hover { background: rgba(255,255,255,.06); color: #fff; }
:root[data-skin="navy"] .s-item.on { background: rgba(212,165,55,.14); color: #F3D58A; box-shadow: inset 3px 0 0 var(--gold); }
:root[data-skin="navy"] .s-item.on svg { color: #F3D58A; }
:root[data-skin="navy"] .s-new { background: linear-gradient(180deg, #E9C15E, #D4A537); color: #1E1604; box-shadow: 0 6px 16px rgba(212,165,55,.25); }
:root[data-skin="navy"] .s-new svg { color: #1E1604; }
:root[data-skin="navy"] .s-user { border-top-color: rgba(255,255,255,.1); }
:root[data-skin="navy"] .s-av { background: var(--gold); color: #1E1604; }
:root[data-skin="navy"] .s-collapse { color: #8A9AC4; } :root[data-skin="navy"] .s-collapse:hover { background: rgba(255,255,255,.06); color: #fff; }
:root[data-skin="navy"] .s-menu button { color: #C9D3EC; } :root[data-skin="navy"] .s-menu button:hover { background: rgba(255,255,255,.06); }
:root[data-skin="navy"] .side-mini .s-menu { background: #0F2047; border-color: rgba(255,255,255,.1); }
:root[data-skin="navy"] .s-badge { background: #E5484D; }
:root[data-skin="navy"] header.bar { background: rgba(243,244,248,.88); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: transparent; }
:root[data-skin="navy"] .btn.primary { background: linear-gradient(180deg, #1C3C80, #14306B); border-color: #14306B; }
:root[data-skin="navy"] .btn.sticker { background: linear-gradient(180deg, #F0C965, #E0AF3E); border-color: #C9962A; }
:root[data-skin="navy"] .hm-stat b { color: #0E1630; }
:root[data-skin="navy"] .hm-card { border-color: #E6E9F0; }
:root[data-skin="navy"] .hm-stat { border-top: 3px solid var(--gold); }
:root[data-skin="navy"] .form-nav button.on, :root[data-skin="navy"] #bdGroup button[aria-pressed="true"], :root[data-skin="navy"] .seg button[aria-pressed="true"] { background: #14306B; color: #fff; }
:root[data-skin="navy"] .dr-head { background: linear-gradient(180deg, #FFFFFF, #FAFBFD); }
:root[data-skin="navy"] .bcol h3 { border-bottom-color: #ECEEF4; }
:root[data-skin="navy"] .bport { background: #14306B; }

/* ---------- 3. Full dark (tech lab): charcoal with electric blue ---------- */
:root[data-skin="dark"] {
  --bg: #0B0F17; --panel: #121826; --ink: #E6EAF2; --muted: #8B95AB; --line: #222B3D;
  --accent: #4C8DFF; --accent-ink: #06101F; --sticker: #F5C542; --sticker-ink: #1A1404;
  --open: #F5B454; --open-bg: rgba(245,180,84,.13); --done: #4ADE9B; --done-bg: rgba(74,222,155,.12); --dead: #FF6B7A; --dead-bg: rgba(255,107,122,.13);
  --hover: #182032; --sel: #1B2A45;
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 24px 60px rgba(0,0,0,.55); color-scheme: dark; }
:root[data-skin="dark"] body.has-side .side { background: #080B12; border-right: 1px solid #161D2C; }
:root[data-skin="dark"] .s-top .logo { filter: brightness(0) invert(1); opacity: .9; }
:root[data-skin="dark"] .s-item.on { background: rgba(76,141,255,.14); color: #8FB6FF; box-shadow: inset 3px 0 0 var(--accent); }
:root[data-skin="dark"] .s-item.on svg { color: #8FB6FF; }
:root[data-skin="dark"] .s-new { background: linear-gradient(180deg, #5B98FF, #3B7BF0); color: #fff; box-shadow: 0 6px 18px rgba(76,141,255,.3); }
:root[data-skin="dark"] .s-new svg { color: #fff; }
:root[data-skin="dark"] header.bar { background: rgba(11,15,23,.85); backdrop-filter: blur(10px); border-bottom-color: #161D2C; }
:root[data-skin="dark"] .btn { background: #172033; border-color: #263149; }
:root[data-skin="dark"] .btn:hover { background: #1D2840; }
:root[data-skin="dark"] .btn.primary { background: linear-gradient(180deg, #5B98FF, #3B7BF0); border-color: #3B7BF0; color: #fff; }
:root[data-skin="dark"] .hm-card, :root[data-skin="dark"] .tbl-wrap, :root[data-skin="dark"] .bcol, :root[data-skin="dark"] fieldset { background: linear-gradient(180deg, #131A29, #111725); }
:root[data-skin="dark"] .hm-stat b { color: #fff; }
:root[data-skin="dark"] .hm-stat b.bad { color: var(--dead); text-shadow: 0 0 24px rgba(255,107,122,.35); }
:root[data-skin="dark"] .bcard { background: #0F1421; border-color: #212A3C; }
:root[data-skin="dark"] .bcard.is-late { border-left-color: var(--dead); }
:root[data-skin="dark"] .form-nav button.on, :root[data-skin="dark"] .seg button[aria-pressed="true"] { background: rgba(76,141,255,.18); color: #A9C6FF; }
:root[data-skin="dark"] .pchip.busy { background: rgba(76,141,255,.18); color: #A9C6FF; border-color: rgba(76,141,255,.35); }
:root[data-skin="dark"] .bsvc.pr { background: rgba(245,180,84,.16); color: #F5B454; } :root[data-skin="dark"] .bsvc.em { background: rgba(255,107,122,.16); color: #FF8A96; }
:root[data-skin="dark"] .bdue { background: rgba(245,180,84,.16); color: #F5B454; }
:root[data-skin="dark"] input, :root[data-skin="dark"] select, :root[data-skin="dark"] textarea { background: #0E1320 !important; border-color: #263149 !important; color: var(--ink); }
:root[data-skin="dark"] .mx-frame { background: #fff; }
:root[data-skin="dark"] .seg button { background: #131A29; color: var(--muted); border-color: #263149; }
:root[data-skin="dark"] .seg button[aria-pressed="true"] { background: rgba(76,141,255,.18); color: #A9C6FF; }
:root[data-skin="dark"] .notice { background: #131A29; }