/* DisplayMe dark mode: loaded after glass.css, active only when <html data-theme="dark"> (button in the top bar). */
html[data-theme="dark"], :root[data-theme="dark"]:not([data-x]) {
  --bg: #0d1118; --surface: rgba(34,42,58,.62); --surface-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.10);
  --text: #e8ecf3; --muted: #9aa5b6; --accent: #e8ecf3; --accent-ink: #11151c; --accent-soft: rgba(255,255,255,.12);
  --danger: #ff6b6f; --danger-soft: rgba(255,107,111,.14); --warn: #f0b24a; --warn-soft: rgba(240,178,74,.14); --ok: #3ccf91; --ok-soft: rgba(60,207,145,.14);
  --shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.45); color-scheme: dark;
}
html[data-theme="dark"], html[data-theme="dark"] body { background: #0d1118; color: var(--text); }
html[data-theme="dark"] body::before {
  background: radial-gradient(520px 520px at 6% 62%, rgba(70,84,120,.40), transparent 70%), radial-gradient(560px 460px at 72% -4%, rgba(90,110,160,.28), transparent 70%),
    radial-gradient(620px 620px at 104% 100%, rgba(40,50,80,.55), transparent 70%), linear-gradient(160deg, #141a25 0%, #0d1118 55%, #090c12 100%);
}
html[data-theme="dark"] a { color: #cfd8ea; }
html[data-theme="dark"] .card, html[data-theme="dark"] .modal, html[data-theme="dark"] .login {
  background: linear-gradient(135deg, rgba(40,49,68,.78), rgba(24,30,44,.62)); border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 38px rgba(0,0,0,.45); color: var(--text);
}
html[data-theme="dark"] .modal { background: linear-gradient(135deg, rgba(36,44,62,.97), rgba(26,32,46,.96)); }
html[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.55); }
html[data-theme="dark"] .btn { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.14); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.35); }
html[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.2); }
html[data-theme="dark"] .btn.primary { background: linear-gradient(180deg, #f4f6fa, #cdd4e0); border-color: rgba(255,255,255,.5); color: #11151c; box-shadow: inset 0 1px 0 #fff, 0 10px 22px rgba(0,0,0,.4); }
html[data-theme="dark"] .btn.primary:hover { background: linear-gradient(180deg, #fff, #dbe1ec); }
html[data-theme="dark"] .btn.danger { color: var(--danger); }
html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=time], html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); color: var(--text);
}
html[data-theme="dark"] ::placeholder { color: #7f8a9d; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus { outline-color: #cfd8ea; }
html[data-theme="dark"] .drop { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .drop.over { background: rgba(255,255,255,.14); border-color: #cfd8ea; }
html[data-theme="dark"] .targets, html[data-theme="dark"] .thumb { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .progress { background: rgba(255,255,255,.14); } html[data-theme="dark"] .progress i { background: #e8ecf3; }
html[data-theme="dark"] .switch i { background: rgba(255,255,255,.2); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
html[data-theme="dark"] .switch input:checked + i { background: linear-gradient(180deg, #f4f6fa, #b9c3d6); }
html[data-theme="dark"] .badge, html[data-theme="dark"] .role, html[data-theme="dark"] .ver { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); color: var(--muted); }
html[data-theme="dark"] .role.owner { background: linear-gradient(180deg, #f4f6fa, #c4ccdb); color: #11151c; }
html[data-theme="dark"] .toast { background: rgba(232,236,243,.95); color: #11151c; }
html[data-theme="dark"] #appView { background: rgba(20,26,38,.55); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.55); }
html[data-theme="dark"] .side { background: rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] .logo i { background: linear-gradient(180deg, #f4f6fa, #b9c3d6); box-shadow: 0 6px 14px rgba(0,0,0,.5); }
html[data-theme="dark"] .logo i::after { border-color: #11151c; }
html[data-theme="dark"] nav button { color: #b6c0d1; }
html[data-theme="dark"] nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="dark"] nav button.active { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.4); }
html[data-theme="dark"] nav .sub { border-left-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .me { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .me .av { background: linear-gradient(180deg, #8d93a5, #4a4f5e); }
html[data-theme="dark"] .tsearch input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: none; }
html[data-theme="dark"] .iconbtn { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.35); color: var(--text); }
html[data-theme="dark"] .iconbtn:hover { background: rgba(255,255,255,.2); color: #fff; }
html[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,.05); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .stat.t-screens, html[data-theme="dark"] .stat.t-stores, html[data-theme="dark"] .stat.t-wait { --tint: #cfd8ea; --tint-bg: rgba(255,255,255,.10); }
html[data-theme="dark"] .stat.t-online { --tint: #3ccf91; --tint-bg: rgba(255,255,255,.10); }
html[data-theme="dark"] .stat.hero { background: linear-gradient(160deg, #3a4660 0%, #1b2233 100%); color: #fff; border-color: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.5); }
html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal h3, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--text); }
html[data-theme="dark"] .muted, html[data-theme="dark"] small, html[data-theme="dark"] .hint { color: var(--muted); }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: rgba(255,255,255,.08); color: #dbe3f2; }
html[data-theme="dark"] .setitem:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .setitem.on { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.4); }
html[data-theme="dark"] .setitem.on .ss, html[data-theme="dark"] .setitem.on .sc { color: #c2cbdb; }
html[data-theme="dark"] .setgrp { background: rgba(26,32,46,.94); color: var(--text); }
html[data-theme="dark"] .setlist, html[data-theme="dark"] .setdetail { border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .stat:not(.hero) { background: linear-gradient(135deg, rgba(40,49,68,.78), rgba(24,30,44,.62)) !important; color: var(--text); }
html[data-theme="dark"] .stat:not(.hero) .lbl, html[data-theme="dark"] .stat:not(.hero) span { color: var(--muted); }
html[data-theme="dark"] .stat b { color: var(--text); }
/* custom dropdowns and pickers */
html[data-theme="dark"] .cs-btn { color: var(--text); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
html[data-theme="dark"] .cs-btn:hover { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .cs-btn.is-open { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .cs-btn.ph .cs-label { color: #8a95a8; }
html[data-theme="dark"] .cs-pop { background: linear-gradient(135deg, rgba(38,46,64,.98), rgba(26,32,46,.97)); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.6); }
html[data-theme="dark"] .cs-opt { color: var(--text); }
html[data-theme="dark"] .cs-opt:hover, html[data-theme="dark"] .cs-opt.hot { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .cs-opt.sel { background: rgba(90,130,240,.28); }
html[data-theme="dark"] .cs-box { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .pk-title, html[data-theme="dark"] .pk-d, html[data-theme="dark"] .pk-t, html[data-theme="dark"] .pk-link, html[data-theme="dark"] .pk-mo { color: var(--text); }
html[data-theme="dark"] .pk-nav { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: var(--text); }
html[data-theme="dark"] .pk-hint, html[data-theme="dark"] .mi-i { color: var(--muted); }
html[data-theme="dark"] .chip { color: var(--text); }