/* ==========================================================================
   ZENITH — GALLERY / CINEMA 3D
   Loaded after themes.css. Applies to the default "midnight" theme only.
   Concept: a dark gallery at night — one warm key light, smoked-glass slabs,
   brushed champagne metal, deep negative space, film grain, quiet motion.
   ========================================================================== */

html[data-theme="midnight"]{
  --page-bg:#08080a;
  --glow-1:rgba(217,197,162,.10);
  --glow-2:rgba(96,116,150,.07);
  --card-bg:linear-gradient(180deg,rgba(23,23,27,.66),rgba(11,11,14,.74));
  --card-line:rgba(255,255,255,.07);
  --card-shadow:0 40px 90px -55px rgba(0,0,0,.95),0 90px 160px -115px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  --a:#d9c5a2; --b:#bda983; --c:#8e7e61;
  --sys:#b9ae9a; --sys2:#8c8273;
  --line:rgba(255,255,255,.075);
  --grad:linear-gradient(120deg,#fffaf1,#e8d8ba 55%,#b9a37e);
  --glass:rgba(17,17,20,.66);
  --ok:#a3c9b0; --bad:#d98e8e; --gold:#e3c893;
  --ink:#f2ede2; --muted:#8e897f;
  --display:'Space Grotesk',Alexandria,system-ui,sans-serif;
  --num:'Space Grotesk',Alexandria,system-ui,sans-serif;
  --acc:#d9c5a2;
}

/* ---------------------------------------------------------------- stage -- */
html[data-theme="midnight"]{background:#08080a}
html[data-theme="midnight"] body{
  background:
    radial-gradient(1250px 780px at 12% -14%,rgba(226,200,156,.105),transparent 60%),
    radial-gradient(1000px 720px at 104% 8%,rgba(130,150,190,.055),transparent 60%),
    linear-gradient(180deg,#09090b 0%,#070708 52%,#09090b 100%);
  color:var(--ink);
  font-family:Alexandria,system-ui,sans-serif;
}
html[data-theme="midnight"] body:before{
  background:
    radial-gradient(ellipse 56% 42% at 84% -9%,rgba(217,197,162,.10),transparent 62%),
    radial-gradient(ellipse 46% 40% at 3% 74%,rgba(96,118,152,.075),transparent 64%);
}
html[data-theme="midnight"] .bg{background:transparent}
html[data-theme="midnight"] .bg canvas,
html[data-theme="midnight"] .bg .scan-lines{display:none!important}
html[data-theme="midnight"] .bg .vignette{
  background:radial-gradient(ellipse at 50% 36%,transparent 26%,rgba(3,3,4,.42) 74%,rgba(1,1,2,.92) 100%);
}
html[data-theme="midnight"] .bg:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:soft-light;
}
html[data-theme="midnight"] ::selection{background:rgba(217,197,162,.28);color:#fff}
html[data-theme="midnight"] :focus-visible{outline:2px solid rgba(217,197,162,.55);outline-offset:3px}
html[data-theme="midnight"] *{scrollbar-color:rgba(255,255,255,.14) transparent;scrollbar-width:thin}
html[data-theme="midnight"] ::-webkit-scrollbar{width:8px;height:8px}
html[data-theme="midnight"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
html[data-theme="midnight"] ::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------- typography */
html[data-theme="midnight"] .card-head h2,
html[data-theme="midnight"] .card h2{
  font:500 16px/1.35 var(--num);letter-spacing:-.012em;text-transform:none;
  color:#eee8dc;text-shadow:none;
}
html[data-theme="midnight"] .label,
html[data-theme="midnight"] .date{
  font:500 8.5px var(--num);letter-spacing:.20em;text-transform:uppercase;color:#8a8377;
}
html[data-theme="midnight"] .sys{display:none!important}
html[data-theme="midnight"] .subhead{
  margin:22px 0 8px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05);
  font:500 8.5px var(--num);letter-spacing:.20em;text-transform:uppercase;color:#8a8377;
}
html[data-theme="midnight"] .hud-dot{
  width:5px;height:5px;background:#e2cda8;box-shadow:0 0 0 4px rgba(226,205,168,.07);animation:none;
}

/* ----------------------------------------------------------------- cards -- */
html[data-theme="midnight"] .card{
  border-radius:22px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(27,27,32,.68),rgba(12,12,15,.76));
  box-shadow:
    0 40px 90px -55px rgba(0,0,0,.95),
    0 80px 150px -115px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(26px) saturate(125%);
  backdrop-filter:blur(26px) saturate(125%);
  padding:26px;
}
html[data-theme="midnight"] .card:before{
  display:block!important;content:"";position:absolute;inset:0;border-radius:inherit;
  border:0;box-shadow:none;pointer-events:none;
  opacity:0!important;transition:opacity .45s ease;z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.055),transparent 55%);
}
html[data-theme="midnight"] .card.hot:before{opacity:1!important}
html[data-theme="midnight"] .card-head{margin-bottom:20px}
html[data-theme="midnight"] .content{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
html[data-theme="midnight"] .alert{
  border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);color:#b7b0a3;
  padding:10px 14px;font:500 10.5px var(--num);letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="midnight"] .alert .ico{filter:grayscale(1) brightness(1.6);opacity:.55;font-size:14px}
html[data-theme="midnight"] .alert button{
  border-radius:999px;border:1px solid rgba(217,197,162,.25);
  background:rgba(217,197,162,.08);color:#dfcba9;
  font:500 8.5px var(--num);letter-spacing:.12em;padding:6px 10px;text-transform:uppercase;
}
html[data-theme="midnight"] .tilt{
  transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform;
}
html[data-theme="midnight"] .tilt.hot{transition:transform .12s ease-out}
html[data-theme="midnight"] .empty{
  padding:26px 10px;text-align:center;border:1px dashed rgba(255,255,255,.10);border-radius:14px;
  color:#7e786d;font:400 12px Alexandria,sans-serif;background:rgba(255,255,255,.015);
}
html[data-theme="midnight"] .install-note{
  margin:18px 0 0;color:#6f6a61;font:400 11px/1.6 Alexandria,sans-serif;
  border:0;background:none;padding:0;
}

/* --------------------------------------------------------------- buttons -- */
html[data-theme="midnight"] .btn,
html[data-theme="midnight"] .mini,
html[data-theme="midnight"] .today-btn{
  border-radius:10px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);color:#cfc7b8;box-shadow:none;text-shadow:none;
  font:500 9px var(--num);letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
html[data-theme="midnight"] .btn:hover,
html[data-theme="midnight"] .mini:hover,
html[data-theme="midnight"] .today-btn:hover{
  border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#fff;box-shadow:none;
}
html[data-theme="midnight"] .btn.primary{
  background:linear-gradient(135deg,#f2e4c9,#cbb68e);color:#17130d;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 12px 26px -18px rgba(217,197,162,.55),inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="midnight"] .btn.primary:hover{color:#17130d;filter:brightness(1.04);border-color:rgba(255,255,255,.5)}
html[data-theme="midnight"] .btn.danger{
  background:rgba(217,142,142,.06);border-color:rgba(217,142,142,.25);color:#e0a1a1;box-shadow:none;
}
html[data-theme="midnight"] .mini.on,
html[data-theme="midnight"] .btn.on{
  background:rgba(217,197,162,.12);border-color:rgba(217,197,162,.28);color:#f0e5d2;box-shadow:none;
}
html[data-theme="midnight"] .round{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);color:#a8a194;box-shadow:none;font-size:16px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
html[data-theme="midnight"] .round:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#fff}
html[data-theme="midnight"] .round:disabled{opacity:.3}
html[data-theme="midnight"] .date-nav{gap:6px}
html[data-theme="midnight"] .dlabel{
  font:500 8.5px var(--num);letter-spacing:.14em;text-transform:uppercase;color:#a49d90;
  min-width:116px;text-align:center;
}
html[data-theme="midnight"] .today-btn{
  display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;
  background:rgba(217,197,162,.08);border-color:rgba(217,197,162,.18);color:#dfcba9;
}
html[data-theme="midnight"] .today-btn[hidden]{display:none!important}

/* ---------------------------------------------------------------- inputs -- */
html[data-theme="midnight"] .ck-text,
html[data-theme="midnight"] .task-form input,
html[data-theme="midnight"] .add-row input,
html[data-theme="midnight"] .note-search,
html[data-theme="midnight"] .acc-form input,
html[data-theme="midnight"] #sttLang{
  border-radius:12px;border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.22);color:#e8e1d4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
html[data-theme="midnight"] .ck-text:focus,
html[data-theme="midnight"] .task-form input:focus,
html[data-theme="midnight"] .add-row input:focus,
html[data-theme="midnight"] .note-search:focus,
html[data-theme="midnight"] .acc-form input:focus{
  border-color:rgba(217,197,162,.38);box-shadow:0 0 0 3px rgba(217,197,162,.07);outline:none;
}
html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder{color:#6b665d}
html[data-theme="midnight"] select{color-scheme:dark}

/* ------------------------------------------------------------ habit list -- */
html[data-theme="midnight"] .habit-list{display:grid;gap:0}
html[data-theme="midnight"] .habit{
  border:0;border-radius:10px;border-bottom:1px solid rgba(255,255,255,.045);
  background:transparent;box-shadow:none;padding:11px 8px;
  transition:background .2s ease,border-color .2s ease;
}
html[data-theme="midnight"] .habit:last-child{border-bottom:0}
html[data-theme="midnight"] .habit:hover{
  background:rgba(255,255,255,.03);border-color:transparent;
  border-bottom-color:rgba(255,255,255,.045);box-shadow:none;transform:none;
}
html[data-theme="midnight"] .habit.done{
  background:linear-gradient(90deg,rgba(217,197,162,.055),transparent 68%);
  border-left:0;border-color:transparent;border-bottom-color:rgba(255,255,255,.045);
}
html[data-theme="midnight"] .habit.done:before{display:none!important}
html[data-theme="midnight"] #quitList .habit.done{
  background:linear-gradient(90deg,rgba(159,199,174,.075),rgba(159,199,174,.012) 70%,transparent);
  border-color:transparent;border-bottom-color:rgba(255,255,255,.045);
}
html[data-theme="midnight"] #quitList .check:checked{
  background:linear-gradient(145deg,#c9e1d1,#8fb8a1);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 0 0 3px rgba(159,199,174,.08),0 6px 14px -8px rgba(159,199,174,.4);
}
html[data-theme="midnight"] #quitList .check:checked:after{border-color:#16211b}
html[data-theme="midnight"] #quitList .habit.done .habit-name{color:#9db5a6}
html[data-theme="midnight"] #quitList .habit.done .emoji{filter:grayscale(.45) saturate(.6);opacity:.6}
html[data-theme="midnight"] .habit .emoji{
  width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  font-size:15px;filter:saturate(.75) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="midnight"] .habit-name{font:500 13.5px var(--num);letter-spacing:.005em;color:#dcd5c8}
html[data-theme="midnight"] .habit.done .habit-name{color:#8f887b}
html[data-theme="midnight"] .habit.done .emoji{opacity:.55;filter:grayscale(.35)}
html[data-theme="midnight"] .habit .streak{
  font:500 9px var(--num);letter-spacing:.06em;color:#d3bd97;
  background:rgba(217,197,162,.08);border:1px solid rgba(217,197,162,.12);
  border-radius:999px;padding:3px 7px;box-shadow:none;
}
html[data-theme="midnight"] .habit .icon-btn,
html[data-theme="midnight"] .habit .remove{
  width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:#7e786d;
  opacity:0;box-shadow:none;transition:opacity .18s ease,background .18s ease,color .18s ease;
}
html[data-theme="midnight"] .habit:hover .icon-btn,
html[data-theme="midnight"] .habit:hover .remove{opacity:1}
html[data-theme="midnight"] .habit .icon-btn:hover{background:rgba(255,255,255,.06);color:#e9e2d5}
html[data-theme="midnight"] .habit .remove:hover{background:rgba(217,142,142,.10);color:#e0a1a1}
html[data-theme="midnight"] .check{
  width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
html[data-theme="midnight"] .check:hover{border-color:rgba(217,197,162,.55)}
html[data-theme="midnight"] .check:checked{
  background:linear-gradient(145deg,#f0e2c7,#c9b48d);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(217,197,162,.08),0 6px 14px -8px rgba(217,197,162,.5);
}
html[data-theme="midnight"] .check:checked:after{
  content:"";width:9px;height:5px;border-left:1.6px solid #171410;border-bottom:1.6px solid #171410;
  transform:rotate(-45deg) translate(1px,-1px);
}
html[data-theme="midnight"] .task{
  border:0;border-radius:10px;border-bottom:1px solid rgba(255,255,255,.045);
  background:transparent;box-shadow:none;padding:10px 8px;
}
html[data-theme="midnight"] .task:hover{background:rgba(255,255,255,.03);border-color:transparent;border-bottom-color:rgba(255,255,255,.045);transform:none;box-shadow:none}
html[data-theme="midnight"] .task .check{width:20px;height:20px}
html[data-theme="midnight"] .due{
  font:500 9px var(--num);letter-spacing:.06em;color:#9b9386;
  background:rgba(255,255,255,.04);border-radius:999px;padding:4px 8px;
}
html[data-theme="midnight"] .task-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
html[data-theme="midnight"] .task-form input:first-child{grid-column:1/-1}
html[data-theme="midnight"] .task-form .add{grid-column:3;min-width:82px;min-height:46px;padding:0 18px}
html[data-theme="midnight"] .task-form .add,
html[data-theme="midnight"] .add-row .add{
  border-radius:11px;border:1px solid rgba(255,255,255,.30);
  background:linear-gradient(135deg,#f2e4c9,#cbb68e);color:#17130d;
  font:600 9px var(--num);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 24px -18px rgba(217,197,162,.55),inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="midnight"] .task-form .add:hover,
html[data-theme="midnight"] .add-row .add:hover{filter:brightness(1.04);box-shadow:0 10px 24px -16px rgba(217,197,162,.6)}
html[data-theme="midnight"] .task .due.soon{color:#e0c79c;background:rgba(217,197,162,.09)}

/* --------------------------------------------------------- daily check-in */
html[data-theme="midnight"] .mood-row{gap:8px;margin-top:14px}
html[data-theme="midnight"] .mood-opt{
  border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03);
  color:#b8b0a2;padding:12px 8px 10px;font:500 10px var(--num);letter-spacing:.04em;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
html[data-theme="midnight"] .mood-opt svg{
  width:22px;height:22px;display:block;margin:0 auto 7px;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
html[data-theme="midnight"] .mood-opt:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.035);color:#d8d1c3}
html[data-theme="midnight"] .mood-opt.on{
  border-color:rgba(217,197,162,.30);color:#f0e7d6;
  background:linear-gradient(160deg,rgba(217,197,162,.12),rgba(217,197,162,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -18px rgba(217,197,162,.5);
}
html[data-theme="midnight"] .ck-text{height:96px;padding:13px;font:400 13.5px/1.6 Alexandria,sans-serif;resize:vertical}
html[data-theme="midnight"] .save-checkin{
  margin-top:12px;border-radius:11px;border:1px solid rgba(255,255,255,.30);
  background:linear-gradient(135deg,#f2e4c9,#cbb68e);color:#17130d;
  padding:12px 18px;font:600 9px var(--num);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(217,197,162,.55),inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .2s ease,transform .2s ease;
}
html[data-theme="midnight"] .save-checkin:hover{filter:brightness(1.04);transform:translateY(-1px)}
html[data-theme="midnight"] .save-checkin:active{transform:none}
html[data-theme="midnight"] .quit-score{
  border-radius:999px;border:1px solid rgba(159,199,174,.16);
  background:rgba(159,199,174,.07);color:#a9c9b5;
  font:500 9px var(--num);letter-spacing:.06em;padding:3px 8px;
}

/* ----------------------------------------------------------------- modals */
html[data-theme="midnight"] .modal{background:rgba(4,4,5,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-theme="midnight"] .modal-box{
  border-radius:22px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(24,24,28,.98),rgba(12,12,15,.99));
  box-shadow:0 50px 120px -40px #000,inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="midnight"] .modal-box:before{display:none!important}
html[data-theme="midnight"] .modal-box h3{font:500 19px var(--num);letter-spacing:-.01em;color:#f0e9dc;text-shadow:none}
html[data-theme="midnight"] .toast{
  border-radius:12px;border:1px solid rgba(255,255,255,.10);
  background:rgba(20,20,24,.92);color:#eee7da;
  box-shadow:0 30px 60px -30px #000;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  font:500 11px var(--num);letter-spacing:.02em;
}
html[data-theme="midnight"] .toast:before{content:"";display:none}

/* -------------------------------------------------------------- boot/gate */
html[data-theme="midnight"] .boot{background:#070708}
html[data-theme="midnight"] .boot-core{
  width:58px;height:58px;
  background:conic-gradient(from 0deg,rgba(217,197,162,0),#d9c5a2 38%,rgba(217,197,162,0) 72%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:gallery-spin 1.15s linear infinite;
}
@keyframes gallery-spin{to{transform:rotate(360deg)}}
html[data-theme="midnight"] .boot pre{color:#8a8377;font:500 9px var(--num);letter-spacing:.24em}
html[data-theme="midnight"] .gate{
  background:
    radial-gradient(900px 620px at 50% -10%,rgba(217,197,162,.11),transparent 62%),
    radial-gradient(820px 620px at 82% 112%,rgba(100,120,150,.07),transparent 62%),
    #070708;
}
html[data-theme="midnight"] .gate-box{
  width:min(420px,100%);padding:38px 30px 32px;border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(24,24,28,.78),rgba(11,11,14,.88));
  box-shadow:0 60px 120px -50px #000,inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(30px) saturate(130%);backdrop-filter:blur(30px) saturate(130%);
  text-align:center;
}
html[data-theme="midnight"] .gate-box canvas{display:none!important}
html[data-theme="midnight"] .gate-box .brand-mark{margin:0 auto 4px;width:48px;height:48px;border-radius:15px;font-size:21px}
html[data-theme="midnight"] .gate-box h1{
  margin:16px 0 0;font:500 25px var(--num);letter-spacing:.38em;padding-left:.38em;
  color:#f5eddf;text-shadow:none;
}
html[data-theme="midnight"] .gate-box small{
  margin-top:10px;font:500 8px var(--num);letter-spacing:.30em;color:#8a8377;
}
html[data-theme="midnight"] .gate-box .acc-msg{color:#9a9386;font:400 12px/1.7 Alexandria,sans-serif;text-align:center}
html[data-theme="midnight"] .gate-box .acc-msg.bad{color:#e0a1a1}
html[data-theme="midnight"] .gate-box .acc-msg.ok{color:#a8cdb6}
html[data-theme="midnight"] .gate-box .acc-form{text-align:center}
html[data-theme="midnight"] .gate-box .acc-form .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-theme="midnight"] .gate-box .acc-form .btns .btn{min-height:40px;justify-content:center}
html[data-theme="midnight"] .gate-box .acc-form .btns .btn:first-child{grid-column:1/-1}
html[data-theme="midnight"] .gate-box .acc-form .btns .btn:last-child{grid-column:1/-1;background:transparent;border-color:transparent;color:#8a8377;font-size:8px;letter-spacing:.12em}
html[data-theme="midnight"] .gate-box .acc-form .btns .btn:last-child:hover{color:#d8d1c3;background:transparent}
html[data-theme="midnight"] .gate-box .acc-form input{
  min-height:48px;border-radius:12px;background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.08);
  text-align:left;
}
html[data-theme="midnight"] .gbtn{
  min-height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  font:600 13px var(--num);letter-spacing:.01em;
  box-shadow:0 18px 34px -24px #000;
}
html[data-theme="midnight"] .acc-or{color:#6f6a61;font:500 8px var(--num);letter-spacing:.24em}
html[data-theme="midnight"] .acc-or:before,
html[data-theme="midnight"] .acc-or:after{background:rgba(255,255,255,.08)}

/* --------------------------------------------------------- player / nav -- */
html[data-theme="midnight"] .brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;
  font:500 18px var(--num);color:#f3e9d7;letter-spacing:.02em;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.16),transparent 52%),
    linear-gradient(145deg,#24221d,#111110 70%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 14px rgba(0,0,0,.45),0 14px 24px -14px #000;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
html[data-theme="midnight"] .side a.player:before{
  content:"";position:absolute;top:-70px;right:-60px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,197,162,.16),transparent 65%);pointer-events:none;
}
html[data-theme="midnight"] .pl-tag{font:500 8px var(--num);letter-spacing:.24em;color:#8b8478;text-transform:uppercase}
html[data-theme="midnight"] .pl-lv{
  display:block;margin:9px 0 2px;font:500 27px/1 var(--num);letter-spacing:-.025em;
  color:#f5eede;background:none;-webkit-text-fill-color:currentColor;filter:none;
}
html[data-theme="midnight"] .pl-rank{font:500 10.5px var(--num);letter-spacing:.02em;color:#b3ab9c;margin:0 0 11px}
html[data-theme="midnight"] .pl-plan{
  position:static;display:inline-flex;align-items:center;
  border-radius:999px;padding:3px 8px;font:500 7.5px var(--num);letter-spacing:.16em;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:#a8a193;
  text-shadow:none;
}
html[data-theme="midnight"] .pl-plan.free{color:#a8a193;border-color:rgba(255,255,255,.10)}
html[data-theme="midnight"] .pl-plan.pro{color:#e9d4a8;border-color:rgba(217,197,162,.35);background:rgba(217,197,162,.08)}
html[data-theme="midnight"] .pl-bar{height:3px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:6px}
html[data-theme="midnight"] .pl-bar i{height:100%;border-radius:999px;background:linear-gradient(90deg,#b9a47f,#e7d6b6);box-shadow:0 0 10px rgba(217,197,162,.35)}
html[data-theme="midnight"] .pl-bar.q i{background:linear-gradient(90deg,#7f8ba0,#b8c4d8);box-shadow:none}
html[data-theme="midnight"] .pl-sub{font:500 8.5px var(--num);letter-spacing:.04em;color:#7f796e;margin-top:9px}
html[data-theme="midnight"] .pl-sub .ps{display:inline-block;width:5px;height:5px;border-radius:50%;margin:0 4px 1px 0;vertical-align:middle}
html[data-theme="midnight"] .pl-sub .ps-do{background:#d9c5a2;box-shadow:0 0 0 2px rgba(217,197,162,.10)}
html[data-theme="midnight"] .pl-sub .ps-av{background:#9fc7ae;box-shadow:0 0 0 2px rgba(159,199,174,.10);margin-left:7px}

/* ================================================================ DESKTOP */
@media(min-width:901px){
  html[data-theme="midnight"] .shell{
    display:grid;grid-template-columns:268px minmax(0,1fr);gap:22px;
    max-width:1680px;margin:0 auto;padding:20px;min-height:100vh;
  }
  html[data-theme="midnight"] .app{
    padding:8px 6px calc(52px + env(safe-area-inset-bottom));
    max-width:none;width:100%;
  }
  html[data-theme="midnight"] .side{
    position:sticky;top:20px;height:calc(100vh - 40px);
    padding:22px 16px 18px;gap:3px;border-radius:24px;
    border:1px solid rgba(255,255,255,.065)!important;
    background:linear-gradient(180deg,rgba(22,22,26,.72),rgba(11,11,14,.62));
    -webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px #000;
  }
  html[data-theme="midnight"] .side .brand{
    display:flex;align-items:center;gap:12px;margin:0 6px 20px;padding:4px 2px 18px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  html[data-theme="midnight"] .brand-cv{display:none!important}
  html[data-theme="midnight"] .brand-text b{
    display:block;font:500 17px var(--num);letter-spacing:.34em;line-height:1;
    color:#f4efe4;background:none;-webkit-text-fill-color:currentColor;filter:none;
  }
  html[data-theme="midnight"] .brand-text small{
    display:block;margin-top:7px;font:500 8px var(--num);letter-spacing:.30em;color:#8a8478;
  }
  html[data-theme="midnight"] .side a.player{
    display:block;border-radius:16px;border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    padding:14px;margin:0 2px 18px;overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 36px -30px #000;
  }
  html[data-theme="midnight"] .side a:not(.player){
    position:relative;min-height:42px;padding:0 12px;margin:1px 0;gap:13px;
    border:1px solid transparent;border-inline-start:1px solid transparent;border-radius:12px;
    color:#a39d92;font:500 13px var(--num);letter-spacing:.005em;
  }
  html[data-theme="midnight"] .side a:not(.player) .ic{color:#8b857a;transition:color .2s ease}
  html[data-theme="midnight"] .side a:not(.player) svg{stroke-width:1.5}
  html[data-theme="midnight"] .side a:not(.player):hover{
    background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.04);color:#f0ebe0;
    border-inline-start-color:rgba(255,255,255,.04);
  }
  html[data-theme="midnight"] .side a:not(.player):hover .ic{color:#cfc7b8}
  html[data-theme="midnight"] .side a.on{
    background:linear-gradient(90deg,rgba(217,197,162,.12),rgba(217,197,162,.02));
    border-color:rgba(217,197,162,.14);color:#f7f0e2;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -22px #000;
  }
  html[data-theme="midnight"] .side a.on .ic{color:#e3d2b4}
  html[data-theme="midnight"] .side a.on:after{
    content:"";position:absolute;inset-inline-start:-1px;inset-inline-end:auto;
    top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;
    background:var(--a);box-shadow:0 0 12px rgba(217,197,162,.35);
  }
  html[data-theme="midnight"] .side a[data-page="journal"]{margin-top:16px}
  html[data-theme="midnight"] .side a[data-page="journal"]:before{
    content:"";position:absolute;top:-9px;left:12px;right:12px;height:1px;background:rgba(255,255,255,.055);
  }
  html[data-theme="midnight"] .top{margin:0 2px 20px;min-height:34px;align-items:center}
  html[data-theme="midnight"] .lv-chip{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid rgba(255,255,255,.08);border-radius:999px;
    background:rgba(255,255,255,.025);padding:8px 14px;
    font:500 10px var(--num);letter-spacing:.16em;color:#cfc8bb;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  html[data-theme="midnight"] .lv-chip:before{
    content:"";width:5px;height:5px;border-radius:50%;background:var(--a);
    box-shadow:0 0 0 3px rgba(217,197,162,.10);
  }
  html[data-theme="midnight"] .month-switch{
    border:1px solid rgba(255,255,255,.075);border-radius:999px;
    background:rgba(255,255,255,.025);padding:4px;gap:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  html[data-theme="midnight"] .month-switch #monthLabel{
    font:500 9.5px var(--num);letter-spacing:.18em;color:#a9a294;text-transform:uppercase;min-width:148px;
  }
  html[data-theme="midnight"] .month-switch .round{
    width:30px;height:30px;border-radius:50%;border:1px solid transparent;background:transparent;
    color:#8f897e;font-size:15px;box-shadow:none;
  }
  html[data-theme="midnight"] .month-switch .round:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);color:#fff}
  html[data-theme="midnight"] .hdr-left{display:flex;align-items:center;gap:16px}
  html[data-theme="midnight"] .hdr-page{
    display:inline-flex;align-items:center;gap:9px;
    font:500 8.5px var(--num);letter-spacing:.26em;color:#8a8377;text-transform:uppercase;
  }
  html[data-theme="midnight"] .hdr-page:before{content:"";width:18px;height:1px;background:rgba(255,255,255,.12)}
  html[data-theme="midnight"] body:not([data-page="home"]) .hdr-page{display:none}
  html[data-theme="midnight"] .side:after{
    content:"ZENITH OS · 4.0";margin-top:auto;padding:18px 0 2px;
    font:500 7px var(--num);letter-spacing:.26em;color:#5f5a52;text-align:center;
  }
}

/* =================================================================== HERO */
html[data-theme="midnight"] .hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;gap:36px;
  padding:52px 48px 40px;margin-bottom:24px;min-height:470px;
  border-radius:28px;border:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(500px 380px at 6% -6%,rgba(255,255,255,.035),transparent 62%),
    radial-gradient(620px 430px at 80% 28%,rgba(224,196,150,.15),transparent 62%),
    radial-gradient(520px 520px at 106% 112%,rgba(105,125,160,.09),transparent 60%),
    radial-gradient(420px 420px at 6% 104%,rgba(105,125,160,.06),transparent 60%),
    linear-gradient(155deg,rgba(27,27,32,.82) 0%,rgba(13,13,16,.90) 55%,rgba(10,10,12,.94) 100%);
  box-shadow:
    0 60px 120px -70px rgba(0,0,0,.95),
    0 100px 180px -125px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.075);
}
html[data-theme="midnight"] .hero:after{
  display:block!important;content:"";position:absolute;z-index:0;
  right:-150px;top:50%;transform:translateY(-50%);
  width:640px;height:640px;border-radius:50%;
  border:1px solid rgba(217,197,162,.06);
  box-shadow:0 0 120px rgba(217,197,162,.04),inset 0 0 120px rgba(217,197,162,.03);
  pointer-events:none;opacity:1!important;background:none;
}
html[data-theme="midnight"] .hero-copy{position:relative;z-index:2;max-width:610px}
html[data-theme="midnight"] .hero .eyebrow{
  border:0;background:none;padding:0;gap:9px;
  font:500 9.5px var(--num);letter-spacing:.26em;color:#c9b995;text-transform:uppercase;
}
html[data-theme="midnight"] .hero h1{
  margin:22px 0 14px;
  font:500 clamp(40px,4.4vw,64px)/.98 var(--num);letter-spacing:-.045em;text-transform:uppercase;
  text-wrap:balance;
  background:linear-gradient(180deg,#fffdf8 0%,#ece4d6 55%,#b7ae9d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#f7f1e6;text-shadow:0 30px 60px rgba(0,0,0,.35);
}
html[data-theme="midnight"] .hero h2{
  margin:0 0 8px;font:500 14px/1.4 var(--num);letter-spacing:.01em;color:#cfc6b6;
}
html[data-theme="midnight"] .hero p{
  margin:0;font:400 12px/1.6 Alexandria,sans-serif;color:#8f887b;letter-spacing:.01em;
}
html[data-theme="midnight"] .hero .kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
}
html[data-theme="midnight"] .hero .kpi{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0 18px;border-inline-start:1px solid rgba(255,255,255,.06);
}
html[data-theme="midnight"] .hero .kpi:first-child{padding-inline-start:0;border-inline-start:0}
html[data-theme="midnight"] .kpi small{
  display:block;font:500 8px var(--num);letter-spacing:.18em;color:#7f796d;
  text-transform:uppercase;margin-bottom:9px;white-space:nowrap;
}
html[data-theme="midnight"] .kpi b{
  font:500 24px/1 var(--num);letter-spacing:-.02em;color:#f1eadd;
  background:none;-webkit-text-fill-color:currentColor;
}
html[data-theme="midnight"] .hero-orb{
  position:relative;display:grid;place-items:center;min-height:0;perspective:1100px;z-index:2;
}
html[data-theme="midnight"] .hero-orb:before{
  content:"";position:absolute;left:50%;top:50%;width:116%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(217,197,162,.09);
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(-14deg);
  box-shadow:0 0 40px rgba(217,197,162,.04);
  pointer-events:none;
}
html[data-theme="midnight"] .hero-orb:after{
  content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:60%;height:30px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(217,197,162,.14),rgba(217,197,162,0) 70%);
  filter:blur(10px);pointer-events:none;
}
html[data-theme="midnight"] .reactor{
  position:relative;width:min(380px,100%);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(217,197,162,.14);border-radius:50%;
  background:
    radial-gradient(circle at 50% 2px,#f0dfbf 0 1.6px,transparent 2.4px),
    radial-gradient(circle,transparent calc(100% - 18px),rgba(255,255,255,.045) calc(100% - 17px),transparent calc(100% - 15px));
  box-shadow:0 0 90px -20px rgba(217,197,162,.22),0 50px 80px -50px rgba(0,0,0,.9);
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));
}
html[data-theme="midnight"] .reactor canvas{display:none!important}
html[data-theme="midnight"] .reactor:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,#f3e3c4 0 calc(var(--zpct,0) * 1%),rgba(217,197,162,.14) calc(var(--zpct,0) * 1%) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  filter:drop-shadow(0 0 14px rgba(236,220,189,.25));
}
html[data-theme="midnight"] .reactor:after{
  content:"";position:absolute;inset:22px;border-radius:50%;
  background:
    linear-gradient(125deg,transparent 26%,rgba(255,255,255,.09) 33%,transparent 40%),
    radial-gradient(60% 45% at 30% 18%,rgba(255,255,255,.16),transparent 60%),
    radial-gradient(circle at 31% 24%,rgba(255,255,255,.42),transparent 7%),
    radial-gradient(circle at 70% 82%,rgba(217,197,162,.20),transparent 38%),
    radial-gradient(circle at 50% 50%,#2e2c31 0%,#19181c 52%,#0b0b0d 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 8px 10px 26px rgba(150,170,200,.05),
    inset -14px -18px 34px rgba(217,197,162,.09),
    inset 0 -50px 90px rgba(0,0,0,.55),
    0 30px 50px -30px rgba(0,0,0,.8);
}
html[data-theme="midnight"] .reactor .orb-text{transform:none}
html[data-theme="midnight"] .reactor .orb-text:before{
  content:"TODAY";display:block;margin-bottom:14px;
  font:500 8px var(--num);letter-spacing:.34em;color:#8a8376;
}
html[data-theme="midnight"] .reactor .orb-text strong{
  font:500 clamp(46px,5vw,64px)/1 var(--num);letter-spacing:-.045em;color:#f4ecdd;
  text-shadow:0 20px 50px rgba(0,0,0,.5);background:none;-webkit-text-fill-color:currentColor;
}
html[data-theme="midnight"] .reactor .orb-text span{
  margin-top:12px;font:500 8.5px var(--num);letter-spacing:.28em;color:#8b8477;text-transform:uppercase;
}
html[data-theme="midnight"] .reactor .prog{display:none!important}

/* page entrance */
@media (prefers-reduced-motion:no-preference){
  html[data-theme="midnight"] .page:not([hidden]) > .card,
  html[data-theme="midnight"] .page:not([hidden]) > .content > .col > .card{
    animation:gallery-rise .65s cubic-bezier(.2,.8,.2,1) both;
  }
  html[data-theme="midnight"] .page:not([hidden]) > .content > .col:nth-child(2) > .card{animation-delay:.06s}
  html[data-theme="midnight"] .page:not([hidden]) > .content > .col:nth-child(2) > .card:nth-child(2){animation-delay:.12s}
  html[data-theme="midnight"] .reactor{animation:gallery-float 9s ease-in-out infinite}
  html[data-theme="midnight"] .bg:after{animation:gallery-grain 1.2s steps(3) infinite}
}
@keyframes gallery-rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes gallery-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes gallery-grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}

/* ------------------------------------------------------------ other pages */
html[data-theme="midnight"] .settings-grid{gap:24px}
html[data-theme="midnight"] .set-row{border-color:rgba(255,255,255,.06)}
html[data-theme="midnight"] .lbl{color:#d7d0c3;font-family:var(--num)}
html[data-theme="midnight"] .hint{color:#7f796e}
html[data-theme="midnight"] .switch input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
html[data-theme="midnight"] .switch input:checked{background:rgba(217,197,162,.22);border-color:rgba(217,197,162,.5)}
html[data-theme="midnight"] .switch input:after{background:#8b857a}
html[data-theme="midnight"] .switch input:checked:after{background:#ecd9b8}
html[data-theme="midnight"] .theme-dot{border-color:rgba(255,255,255,.14)}
html[data-theme="midnight"] .theme-dot.on{border-color:#f0e5d2;box-shadow:0 0 0 3px rgba(240,229,210,.12)}
html[data-theme="midnight"] .theme-dot[data-theme="midnight"]{background:linear-gradient(135deg,#f2e4c9,#5c554a)}
html[data-theme="midnight"] .stats .stat-total strong,
html[data-theme="midnight"] .stat-total strong{font-family:var(--num);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="midnight"] .chart-box,
html[data-theme="midnight"] .table-box{border-color:rgba(255,255,255,.06);background:rgba(0,0,0,.14)}
html[data-theme="midnight"] .perf-list .perf{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.06)}
html[data-theme="midnight"] .ck{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
html[data-theme="midnight"] .notes-side .note-list .note.on{border-color:rgba(217,197,162,.2);background:rgba(217,197,162,.07)}

/* --------------------------------------------------------------- mobile -- */
@media(max-width:900px){
  html[data-theme="midnight"] .mbar{
    background:rgba(9,9,11,.78);
    border-bottom:1px solid rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
    height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;
  }
  html[data-theme="midnight"] .mbar-btn{
    border:1px solid rgba(255,255,255,.10);border-radius:12px;
    background:rgba(255,255,255,.03);color:#e9e2d5;
  }
  html[data-theme="midnight"] .mbar-brand{font:500 15px var(--num);letter-spacing:.34em;color:#f2ebde}
  html[data-theme="midnight"] .mbar-brand:after{background:#d9c5a2;box-shadow:0 0 10px rgba(217,197,162,.5)}
  html[data-theme="midnight"] .app{padding:calc(78px + env(safe-area-inset-top)) 14px calc(36px + env(safe-area-inset-bottom))!important}
  html[data-theme="midnight"] .content{grid-template-columns:1fr}
  html[data-theme="midnight"] .side{
    background:linear-gradient(180deg,#0f0f12,#0a0a0c 70%)!important;
    border-right:1px solid rgba(255,255,255,.07)!important;
    box-shadow:40px 0 100px -40px #000!important;
  }
  html[data-theme="midnight"] .side.open a,
  html[data-theme="midnight"] .side a{
    border-radius:12px!important;color:#b9b2a5!important;background:transparent!important;
    font:500 13.5px var(--num)!important;
  }
  html[data-theme="midnight"] .side.open a.on,
  html[data-theme="midnight"] .side a.on{
    background:linear-gradient(90deg,rgba(217,197,162,.12),rgba(217,197,162,.02))!important;
    color:#f7f0e2!important;box-shadow:inset 2px 0 0 #d9c5a2!important;
  }
  html[data-theme="midnight"] .side a i.ic{color:#8b857a}
  html[data-theme="midnight"] .side a.on i.ic{color:#e3d2b4}
  html[data-theme="midnight"] .side a.player{
    display:block!important;margin:0 0 14px;border-radius:16px!important;
    border:1px solid rgba(255,255,255,.07)!important;
    background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
    padding:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 36px -30px #000!important;
  }
  html[data-theme="midnight"] .side a.player .pl-lv{display:block!important;margin:8px 0 2px;font-size:25px}
  html[data-theme="midnight"] .side a.player .pl-rank{display:block!important;margin:0 0 10px;font-size:10.5px}
  html[data-theme="midnight"] .pl-tag{display:inline-block!important}
  html[data-theme="midnight"] .pl-plan{display:inline-flex!important}
  html[data-theme="midnight"] .pl-bar{display:block!important}
  html[data-theme="midnight"] .pl-sub{display:block!important}
  html[data-theme="midnight"] .hero{
    grid-template-columns:1fr;gap:26px;padding:32px 24px 28px;min-height:0;border-radius:24px;
  }
  html[data-theme="midnight"] .hero:after{width:460px;height:460px;right:-190px}
  html[data-theme="midnight"] .hero h1{font-size:clamp(36px,9.6vw,52px);margin:18px 0 12px}
  html[data-theme="midnight"] .hero .kpis{grid-template-columns:1fr 1fr;gap:20px 0;margin-top:30px;padding-top:20px}
  html[data-theme="midnight"] .hero .kpi{padding:0 14px}
  html[data-theme="midnight"] .hero .kpi:nth-child(odd){padding-inline-start:0;border-inline-start:0}
  html[data-theme="midnight"] .hero .kpi:nth-child(n+3){padding-top:2px}
  html[data-theme="midnight"] .hero-orb{min-height:auto;padding:6px 0 10px}
  html[data-theme="midnight"] .reactor{width:min(78vw,320px)}
  html[data-theme="midnight"] .reactor .orb-text strong{font-size:clamp(42px,13vw,56px)}
  html[data-theme="midnight"] .card{padding:22px;border-radius:20px}
  html[data-theme="midnight"] .hdr-left{display:none}
  html[data-theme="midnight"] .top{justify-content:flex-end;margin:0 2px 14px;min-height:0}
  html[data-theme="midnight"] .top:not(:has(.month-switch:not([hidden]))){display:none}
  html[data-theme="midnight"] .card-head h2{font-size:15px}
  html[data-theme="midnight"] .dlabel{min-width:104px;font-size:8px}
  html[data-theme="midnight"] .habit .icon-btn,
  html[data-theme="midnight"] .habit .remove{opacity:.55}
}
@media(hover:none){
  html[data-theme="midnight"] .habit .icon-btn,
  html[data-theme="midnight"] .habit .remove{opacity:.55}
}
@media(max-width:1180px) and (min-width:901px){
  html[data-theme="midnight"] .shell{grid-template-columns:236px minmax(0,1fr);gap:18px;padding:16px}
  html[data-theme="midnight"] .side{top:16px;height:calc(100vh - 32px);padding:18px 12px 16px}
  html[data-theme="midnight"] .side .brand{margin-bottom:16px}
  html[data-theme="midnight"] .side a:not(.player){padding:0 10px;font-size:12.5px;gap:11px}
  html[data-theme="midnight"] .hero{grid-template-columns:1fr;gap:28px;padding:38px 34px 32px;min-height:0}
  html[data-theme="midnight"] .hero-orb{padding:4px 0 12px}
  html[data-theme="midnight"] .reactor{width:min(340px,72%)}
  html[data-theme="midnight"] .hero-copy{max-width:none}
  html[data-theme="midnight"] .hero h1{font-size:clamp(38px,5vw,54px)}
}
@media(max-width:600px){
  html[data-theme="midnight"] .hero{padding:28px 20px 24px}
  html[data-theme="midnight"] .hero .eyebrow{display:none}
  html[data-theme="midnight"] .hero h1{font-size:clamp(30px,9.6vw,38px);letter-spacing:-.04em}
  html[data-theme="midnight"] .hero .kpi b{font-size:20px}
  html[data-theme="midnight"] .hero .kpi small{font-size:6.5px;letter-spacing:.12em}
  html[data-theme="midnight"] .reactor{width:min(230px,72vw)}
  html[data-theme="midnight"] .card{padding:18px;border-radius:18px}
  html[data-theme="midnight"] .task-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html[data-theme="midnight"] .task-form .add{grid-column:1/-1}
  html[data-theme="midnight"] .task-form input{min-width:0}
}

/* native date field — keep Chromium's shadow editor dark (must stay last) */
html[data-theme="midnight"] input[type="date"],
html[data-theme="midnight"] input[type="time"]{
  color-scheme:dark!important;-webkit-appearance:none!important;appearance:none!important;
  background:#0b0b0d!important;color:#e8e1d4!important;
  -webkit-text-fill-color:#e8e1d4!important;
}
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit{
  background:#0b0b0d!important;color:#e8e1d4!important;
  -webkit-text-fill-color:#e8e1d4!important;
}
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  background:#0b0b0d!important;color:#e8e1d4!important;
  -webkit-text-fill-color:#e8e1d4!important;
}
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit-text{color:#8f887b!important;-webkit-text-fill-color:#8f887b!important}
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit-month-field,
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit-day-field,
html[data-theme="midnight"] input[type="date"]::-webkit-datetime-edit-year-field{color:#e8e1d4!important;-webkit-text-fill-color:#e8e1d4!important}
html[data-theme="midnight"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="midnight"] input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(.25);opacity:.55;cursor:pointer}