/* Dark palette. Higher specificity than the :root block in each page,
   so it wins regardless of stylesheet order. */
:root[data-theme="dark"]{
  --ink:#e8eaef;
  --ink-2:#9aa3b2;
  --ink-3:#6b7484;
  --line:#252a33;
  --bg:#0e1014;
  --card:#161a20;
  --accent:#e8eaef;
  --ok:#4ade80; --ok-bg:#12241b;
  --warn:#fbbf24; --warn-bg:#2a2113;
  --err:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .top,
:root[data-theme="dark"] table,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] a.brandcard,
:root[data-theme="dark"] .bulk,
:root[data-theme="dark"] #drop,
:root[data-theme="dark"] .empty{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] th{background:#1b2027;color:var(--ink-3);border-color:var(--line)}
:root[data-theme="dark"] td{border-color:#1e232b}
:root[data-theme="dark"] .thumb,
:root[data-theme="dark"] .th,
:root[data-theme="dark"] .dz-icon{background:#1e232b}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:#1b2027;border-color:#2d333d;color:var(--ink)}
:root[data-theme="dark"] input::-webkit-calendar-picker-indicator{filter:invert(.75)}
:root[data-theme="dark"] .tab{background:#1b2027;border-color:var(--line);color:var(--ink-2)}
:root[data-theme="dark"] .tab.on{background:var(--ink);color:#0e1014}
:root[data-theme="dark"] button.send{background:var(--ink);color:#0e1014}
:root[data-theme="dark"] .mark{background:var(--ink);color:#0e1014}
:root[data-theme="dark"] .bar{background:rgba(22,26,32,.95);border-color:var(--line)}
:root[data-theme="dark"] .who a{color:var(--ink-2);border-color:#2d333d}
:root[data-theme="dark"] #drop{border-color:#333a45}
:root[data-theme="dark"] #drop:hover,
:root[data-theme="dark"] #drop.over{background:#1b2027;border-color:var(--ink-2)}
:root[data-theme="dark"] a.brandcard:hover{border-color:#3a4250}
:root[data-theme="dark"] .err{background:#2a1613;border-color:#5c2a24;color:var(--err)}

/* login page has its own tinted backdrop */
:root[data-theme="dark"] body.login{
  background:radial-gradient(900px 500px at 12% -10%, #161c28 0%, transparent 60%),
             radial-gradient(700px 460px at 95% 108%, #1e1a17 0%, transparent 60%), #0e1014;
}

/* the toggle itself */
.themebtn{
  background:none;border:1px solid var(--line);border-radius:8px;width:30px;height:30px;
  cursor:pointer;color:var(--ink-2);display:grid;place-items:center;padding:0;flex:none;
  font-family:inherit;transition:.14s
}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
.themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:block}

.limits{
  margin-top:14px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.6
}
.limits b{color:var(--ink-2);font-weight:620}