/* NirvanaIoT — Light Design System */

/* ── Page loader ─────────────────────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
#page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}
[data-theme="dark"],[data-theme="crimson"],[data-theme="ocean"],
[data-theme="forest"],[data-theme="ember"],[data-theme="charcoal"],
[data-theme="aurora"],[data-theme="sakura"],[data-theme="forge"],[data-theme="void"] {
  /* keeps bg matching theme on dark modes */
}
[data-theme="dark"] #page-loader,
[data-theme="charcoal"] #page-loader,
[data-theme="void"] #page-loader { background: #0f0f0f; }
[data-theme="crimson"] #page-loader { background: #1a0a0a; }
[data-theme="ocean"] #page-loader { background: #060e1a; }
[data-theme="forest"] #page-loader { background: #070f07; }
[data-theme="ember"] #page-loader { background: #130a00; }
[data-theme="aurora"] #page-loader { background: #07090f; }
[data-theme="sakura"] #page-loader { background: #180c0f; }
[data-theme="forge"] #page-loader { background: #0d0a07; }
.page-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 151, 157, 0.2);
  border-top-color: #00979D;
  border-radius: 50%;
  animation: page-spin 0.75s linear infinite;
}
@keyframes page-spin {
  to { transform: rotate(360deg); }
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }

:root {
  /* ── Palette ── */
  --bg:              #f5f5f5;
  --surface:         #ffffff;
  --surface-1:       #ffffff;
  --surface-2:       #f0f0f0;
  --surface-3:       #e8e8e8;
  --border:          #e5e5e5;
  --border-subtle:   #ebebeb;
  --border-mid:      #d4d4d4;
  --border-focus:    #0f0f0f;

  --text:            #0f0f0f;
  --text-secondary:  #6b7280;
  --text-tertiary:   #9ca3af;

  --teal:            #00979D;
  --teal-dark:       #007A80;
  --teal-dim:        rgba(0, 151, 157, 0.08);
  --teal-glow:       0 0 0 3px rgba(0, 151, 157, 0.15);

  --red:             #ef4444;
  --red-dim:         rgba(239, 68, 68, 0.08);
  --green:           #16a34a;

  /* ── Shape ── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  26px;

  /* ── Shadow ── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow:     0 2px 16px rgba(0,0,0,0.08);
  --shadow-md:  0 8px 40px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);

  /* ── Transition ── */
  --t: 0.18s ease;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Reset ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; }
a:focus { outline: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }
::-webkit-scrollbar-track { background: var(--bg); }

/* ═══════════════════════════════════════
   INPUTS
═══════════════════════════════════════ */
.input,
.input-box {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
  caret-color: var(--teal);
}
.input:focus,
.input-box:focus {
  border-color: var(--teal);
  box-shadow: var(--teal-glow);
  background: var(--surface);
}
.input::placeholder,
.input-box::placeholder { color: var(--text-tertiary); }

/* Large login input */
.input-lg {
  font-size: 17px;
  padding: 15px 18px;
  border-radius: var(--radius);
}

/* ── OTP Input ── */
.otp-input {
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius);
  font-family: 'Inter', monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 18px;
  text-align: center;
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  caret-color: var(--teal);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
}
.otp-input:focus {
  border-color: var(--teal);
  box-shadow: var(--teal-glow);
  background: var(--surface);
}
.otp-input::placeholder {
  color: var(--text-tertiary);
  letter-spacing: 12px;
  font-size: 22px;
  font-weight: 400;
}

/* ── Label ── */
.label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ── Form group ── */
.form-group { margin-bottom: 16px; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.1px;
}

.btn-primary {
  background: var(--teal);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.btn-primary:hover  { background: var(--teal-dark); box-shadow: 0 4px 18px rgba(0,0,0,0.18); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1.5px solid var(--border-mid);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-focus); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  width: auto;
}
.btn-ghost:hover { color: var(--text); }

.btn-danger { background: var(--red); color: #fff; box-shadow: 0 4px 16px rgba(255,80,80,0.2); }
.btn-danger:hover { background: #e03a3a; }

.btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px;
}

/* ═══════════════════════════════════════
   ALERT
═══════════════════════════════════════ */
.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.5;
}
.alert-error   { background: var(--red-dim); color: #ff7a7a; border: 1px solid rgba(255,80,80,0.2); }
.alert-success { background: rgba(22,163,74,0.08); color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }

/* ═══════════════════════════════════════
   iOS TOGGLE
═══════════════════════════════════════ */
.toggle {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-mid);
  border-radius: 31px;
  cursor: pointer;
  transition: background 0.22s ease;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.22s ease, background 0.22s ease;
}
.toggle input:checked + .toggle-slider { background: var(--teal); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; }
.toggle input:disabled + .toggle-slider { opacity: 0.3; cursor: not-allowed; }

/* ═══════════════════════════════════════
   STATUS DOT
═══════════════════════════════════════ */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-mid);
  flex-shrink: 0;
}
.status-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}

/* ═══════════════════════════════════════
   APP NAV
═══════════════════════════════════════ */
.app-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-nav .logo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* Dashboard nav — matches page-wide padding so logo sits above content */
.dash-nav { padding: 0 28px; }

.app-nav .logo span {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
}
.app-nav .logo .logo-by {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-tertiary);
  margin-left: 7px;
  letter-spacing: 0.01em;
}

/* ── Account Avatar ── */
.account-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-dim);
  border: 1.5px solid var(--border-mid);
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  letter-spacing: 0;
  user-select: none;
  overflow: hidden;
  transition: opacity var(--t), border-color var(--t);
}
.account-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.account-btn:hover .account-avatar {
  border-color: var(--teal);
}

/* ── Account Dropdown ── */
.account-dropdown {
  position: absolute;
  top: 62px;
  right: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 230px;
  overflow: hidden;
  display: none;
  z-index: 300;
  animation: dropIn 0.15s ease;
}
.account-dropdown.open { display: block; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.account-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.account-email-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
}
.account-email-val {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
}
.account-menu-item {
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t);
  display: block;
  text-decoration: none;
}
.account-menu-item:hover { background: var(--surface); }
.account-menu-item.danger { color: var(--red); }
.divider { height: 1px; background: var(--border); }

/* ═══════════════════════════════════════
   PAGE CONTAINERS
═══════════════════════════════════════ */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}
.page-wide {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}

/* ═══════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════ */
.dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.dash-left h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
  margin-bottom: 4px;
}
.dash-left p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Stats row */
.stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.stat-chip strong { color: var(--text); font-weight: 700; }
.stat-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-mid); flex-shrink: 0; }
.stat-chip .chip-dot.green { background: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.stat-chip .chip-dot.teal  { background: var(--teal); box-shadow: 0 0 0 2px var(--teal-dim); }

/* Section title */
.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* Device grid */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .device-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 360px) {
  .device-grid { grid-template-columns: 1fr; }
}

/* Device card */
.device-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color var(--t), box-shadow var(--t);
  cursor: default;
}
.device-card:hover { border-color: var(--border-mid); }
.device-card.online-card {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.device-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.device-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.relay-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.relay-label.on { color: var(--teal); }

/* Delete button */
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  border-radius: var(--radius-xs);
  line-height: 0;
  transition: color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.delete-btn:hover { color: var(--red); }

/* Add device card */
.add-device-card {
  background: transparent;
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  min-height: 110px;
  transition: all var(--t);
  -webkit-tap-highlight-color: transparent;
}
.add-device-card:hover {
  border-color: var(--border-focus);
  background: var(--surface-2);
}
.add-device-card .plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 300;
  transition: background var(--t);
}
.add-device-card:hover .plus { background: var(--surface-3); }
.add-device-card span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px 32px;
}
.empty-state svg { margin-bottom: 14px; color: var(--text-tertiary); }
.empty-state p { font-size: 14px; color: var(--text-secondary); }
.empty-state strong { color: var(--text-primary); }

/* ═══════════════════════════════════════
   MODAL (bottom sheet → center on desktop)
═══════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  padding: 0;
  animation: fadeOverlay 0.2s ease;
}
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 24px 36px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border-mid);
  border-radius: 2px;
  margin: 10px auto 22px;
}
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }
.modal > p { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

@media (min-width: 500px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal { border-radius: var(--radius-xl); padding: 28px; max-width: 400px; }
  .modal-handle { display: none; }
  .modal-actions { flex-direction: row; }
  .modal-actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════
   SETUP PAGE
═══════════════════════════════════════ */
.progress-wrap {
  background: var(--border);
  border-radius: 100px;
  height: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--teal);
  border-radius: 100px;
  transition: width 0.4s ease;
  width: 0%;
}
.progress-section { margin-top: 20px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}
.progress-pct { font-weight: 700; color: var(--teal); font-size: 15px; }

.step-list { display: flex; flex-direction: column; }
.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}
.step-num.active { background: var(--teal); border-color: var(--teal); color: #ffffff; }
.step-num.done   { background: var(--green); border-color: var(--green); color: #ffffff; }
.step-content { flex: 1; }
.step-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--text); }
.step-desc  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.file-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2);
  width: 100%;
  text-align: left;
  transition: border-color var(--t);
}
.file-btn:hover { border-color: var(--teal); }
.file-btn.has-file { border-color: var(--teal); color: var(--text); border-style: solid; }
input[type=file] { display: none; }

.circuit-wrap {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
}

/* Credential steps */
.cred-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.3;
  transition: opacity 0.35s ease;
}
.cred-step:last-child { border-bottom: none; }
.cred-step.cred-active { opacity: 1; }
.cred-step.cred-done   { opacity: 1; }
.cred-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  transition: background var(--t);
}
.cred-step.cred-done .cred-icon { background: rgba(46,212,122,0.12); }
.cred-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-mid); }
.cred-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-mid);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cred-label { font-size: 14px; font-weight: 500; color: var(--text); }
.cred-step:not(.cred-active):not(.cred-done) .cred-label { color: var(--text-secondary); }

.log-box {
  background: #111111;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: #d1d5db;
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-top: 10px;
}
.flash-hint {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════ */
.legal-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.legal-page h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.5px; }
.legal-page .meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 40px; }
.legal-page h2 { font-size: 15px; font-weight: 700; margin: 32px 0 10px; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; }
.legal-page p  { font-size: 14.5px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; }
.legal-page ul { padding-left: 20px; margin-bottom: 12px; }
.legal-page ul li { font-size: 14.5px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 4px; }
.legal-page a  { color: var(--teal); text-decoration: none; }
.legal-page a:hover { text-decoration: underline; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color var(--t);
}
.legal-back:hover  { color: var(--teal); }
.legal-back:active,
.legal-back:visited,
.legal-back:focus  { text-decoration: none; }

/* ═══════════════════════════════════════
   PC / DESKTOP LAYOUT
═══════════════════════════════════════ */
@media (min-width: 768px) {
  /* Nav */
  .app-nav {
    height: 68px;
    padding: 0 52px;
  }
  .dash-nav { padding: 0 60px; }
  .app-nav .logo {
    font-size: 17px;
    letter-spacing: -0.3px;
  }
  .account-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .account-dropdown {
    top: 76px;
    right: 28px;
    min-width: 260px;
  }

  /* Dashboard page */
  .page-wide {
    padding: 52px 60px 100px;
  }
  .dash-header {
    margin-bottom: 36px;
    align-items: center;
  }
  .dash-left h1 {
    font-size: 32px;
    letter-spacing: -0.8px;
    margin-bottom: 6px;
  }
  .dash-left p {
    font-size: 15px;
  }
  .stats-row {
    margin-bottom: 36px;
    gap: 12px;
  }
  .stat-chip {
    font-size: 14px;
    padding: 8px 18px 8px 12px;
  }
  .section-title {
    font-size: 13px;
    margin-bottom: 18px;
  }

  /* Device grid — bigger cards on desktop */
  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .device-card {
    padding: 22px;
    gap: 22px;
    border-radius: var(--radius-lg);
  }
  .device-name {
    font-size: 15px;
  }
  .status-dot {
    width: 9px;
    height: 9px;
  }

  /* Generic page container */
  .page {
    max-width: 560px;
    padding: 48px 40px 100px;
  }

  /* Modal — already centered, just tweak */
  .modal {
    max-width: 460px;
  }
}

/* ══════════════════════════════════════════════════════════════
   THEMES
══════════════════════════════════════════════════════════════ */

/* ─── Crimson ── blood-red luxury, dark velvet ──────────────── */
[data-theme="crimson"] {
  --bg:             #0a0003;
  --surface:        #180008;
  --surface-1:      #180008;
  --surface-2:      #220010;
  --surface-3:      #2e0018;
  --border:         rgba(220,38,72,0.25);
  --border-subtle:  rgba(220,38,72,0.11);
  --border-mid:     rgba(251,113,133,0.38);
  --border-focus:   #fb7185;
  --text:           #fff0f2;
  --text-secondary: #fda4af;
  --text-tertiary:  #9f1239;
  --teal:           #e11d48;
  --teal-dark:      #be123c;
  --teal-dim:       rgba(225,29,72,0.14);
  --teal-glow:      0 0 0 3px rgba(225,29,72,0.24);
  --red:            #fca5a5;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="crimson"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.2 0 0 0 0.08 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.072'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 130% 70% at 0%   0%,   rgba(158,0,30,0.68)  0%, transparent 50%),
    radial-gradient(ellipse 85%  70% at 100% 100%, rgba(110,0,22,0.58)  0%, transparent 50%),
    radial-gradient(ellipse 65%  90% at 88%  5%,   rgba(185,20,58,0.34) 0%, transparent 46%),
    radial-gradient(ellipse 45%  60% at 12%  88%,  rgba(120,0,20,0.3)   0%, transparent 50%),
    radial-gradient(ellipse 35%  35% at 50%  50%,  rgba(55,0,10,0.55)   0%, transparent 72%),
    #0a0003;
  background-attachment: fixed;
}
[data-theme="crimson"] ::selection { background: rgba(225,29,72,0.38); color: #fff0f2; }
[data-theme="crimson"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="crimson"] ::-webkit-scrollbar-track { background: #0a0003; }
[data-theme="crimson"] ::-webkit-scrollbar-thumb { background: rgba(225,29,72,0.38); border-radius: 3px; }
[data-theme="crimson"] ::-webkit-scrollbar-thumb:hover { background: rgba(225,29,72,0.65); }
[data-theme="crimson"] .app-nav {
  background: rgba(8,0,2,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(225,29,72,0.2) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="crimson"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(14,0,5,0.98) 0%, rgba(8,0,2,0.995) 100%) !important;
  border-right: 1px solid rgba(225,29,72,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(225,29,72,0.06) !important;
}
[data-theme="crimson"] .device-card,
[data-theme="crimson"] .profile-card,
[data-theme="crimson"] .mcu-card {
  background: linear-gradient(160deg, rgba(32,0,14,0.97) 0%, rgba(18,0,7,0.99) 55%, rgba(12,0,4,1) 100%) !important;
  border: 1px solid rgba(200,20,55,0.24) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,100,130,0.09), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="crimson"] .device-card:hover {
  border-color: rgba(225,29,72,0.42) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(225,29,72,0.22), inset 0 1px 0 rgba(255,110,130,0.12) !important;
  transform: translateY(-1px);
}
[data-theme="crimson"] .device-card.online-card {
  border: 1px solid rgba(225,29,72,0.48) !important;
  box-shadow: 0 6px 44px rgba(170,0,28,0.24), 0 0 0 1px rgba(225,29,72,0.16), inset 0 1px 0 rgba(255,120,140,0.12) !important;
}
[data-theme="crimson"] .status-dot.online {
  background: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225,29,72,0.22), 0 0 12px rgba(225,29,72,0.55) !important;
}
[data-theme="crimson"] .input,
[data-theme="crimson"] .input-box,
[data-theme="crimson"] .input-lg {
  background: rgba(22,0,8,0.95) !important;
  border-color: rgba(220,38,72,0.22) !important;
  color: #fff0f2 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="crimson"] .input:focus,
[data-theme="crimson"] .input-box:focus,
[data-theme="crimson"] .input-lg:focus {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225,29,72,0.22), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="crimson"] .modal-overlay { background: rgba(0,0,0,0.78) !important; backdrop-filter: blur(5px) !important; }
[data-theme="crimson"] .modal {
  background: linear-gradient(160deg, rgba(28,0,10,0.99) 0%, rgba(12,0,4,1) 100%) !important;
  border: 1px solid rgba(225,29,72,0.24) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,100,130,0.08) !important;
}
[data-theme="crimson"] .stat-chip {
  background: rgba(26,0,10,0.88) !important;
  border-color: rgba(225,29,72,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,100,130,0.05), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="crimson"] .add-device-card {
  background: rgba(22,0,8,0.55) !important;
  border: 2px dashed rgba(225,29,72,0.22) !important;
}
[data-theme="crimson"] .add-device-card:hover {
  background: rgba(32,0,14,0.78) !important;
  border-color: rgba(225,29,72,0.45) !important;
  box-shadow: 0 0 28px rgba(225,29,72,0.16) !important;
}
[data-theme="crimson"] .pref-card {
  background: linear-gradient(150deg, rgba(24,0,10,0.97), rgba(14,0,5,0.99)) !important;
  border-color: rgba(225,29,72,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,100,130,0.05) !important;
}
[data-theme="crimson"] .toggle input:checked + .toggle-slider { background: #e11d48 !important; box-shadow: 0 0 10px rgba(225,29,72,0.4) !important; }
[data-theme="crimson"] .sidebar-new-btn,
[data-theme="crimson"] .btn-primary {
  background: linear-gradient(135deg, #c9143a 0%, #7f1d1d 100%) !important;
  box-shadow: 0 4px 22px rgba(225,29,72,0.44), inset 0 1px 0 rgba(255,180,180,0.18) !important;
  border: 1px solid rgba(255,100,130,0.2) !important;
}
[data-theme="crimson"] .btn-primary:hover,
[data-theme="crimson"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #e11d48 0%, #991b2e 100%) !important;
  box-shadow: 0 6px 30px rgba(225,29,72,0.58), inset 0 1px 0 rgba(255,180,180,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="crimson"] .btn-secondary {
  background: rgba(28,0,10,0.92) !important;
  border-color: rgba(225,29,72,0.3) !important;
  color: #fda4af !important;
}
[data-theme="crimson"] .btn-ghost { color: #fda4af !important; }
[data-theme="crimson"] .btn-ghost:hover { background: rgba(225,29,72,0.12) !important; }

/* ─── Ocean ── deep-sea abyss, bioluminescent cyan ───────────── */
[data-theme="ocean"] {
  --bg:             #010b18;
  --surface:        #061724;
  --surface-1:      #061724;
  --surface-2:      #0c2235;
  --surface-3:      #112e47;
  --border:         rgba(6,182,212,0.22);
  --border-subtle:  rgba(6,182,212,0.1);
  --border-mid:     rgba(34,211,238,0.35);
  --border-focus:   #22d3ee;
  --text:           #e0f8ff;
  --text-secondary: #67e8f9;
  --text-tertiary:  #0891b2;
  --teal:           #06b6d4;
  --teal-dark:      #0891b2;
  --teal-dim:       rgba(6,182,212,0.13);
  --teal-glow:      0 0 0 3px rgba(6,182,212,0.22);
  --red:            #f87171;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="ocean"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0.4 0 0 0.04 0 0 1.2 0 0.06 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 120% 65% at 0%   0%,   rgba(5,90,138,0.62)  0%, transparent 50%),
    radial-gradient(ellipse 90%  70% at 100% 100%, rgba(3,70,120,0.55)  0%, transparent 50%),
    radial-gradient(ellipse 55%  80% at 80%  8%,   rgba(6,182,212,0.22) 0%, transparent 46%),
    radial-gradient(ellipse 50%  55% at 20%  85%,  rgba(2,50,100,0.38)  0%, transparent 52%),
    radial-gradient(ellipse 40%  40% at 55%  45%,  rgba(1,30,70,0.5)    0%, transparent 68%),
    #010b18;
  background-attachment: fixed;
}
[data-theme="ocean"] ::selection { background: rgba(6,182,212,0.38); color: #e0f8ff; }
[data-theme="ocean"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="ocean"] ::-webkit-scrollbar-track { background: #010b18; }
[data-theme="ocean"] ::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.35); border-radius: 3px; }
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.65); }
[data-theme="ocean"] .app-nav {
  background: rgba(1,6,14,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(6,182,212,0.18) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="ocean"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(4,12,24,0.98) 0%, rgba(1,6,14,0.995) 100%) !important;
  border-right: 1px solid rgba(6,182,212,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(6,182,212,0.05) !important;
}
[data-theme="ocean"] .device-card,
[data-theme="ocean"] .profile-card,
[data-theme="ocean"] .mcu-card {
  background: linear-gradient(160deg, rgba(8,24,44,0.97) 0%, rgba(4,14,28,0.99) 55%, rgba(2,8,18,1) 100%) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(34,211,238,0.08), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="ocean"] .device-card:hover {
  border-color: rgba(6,182,212,0.42) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(6,182,212,0.2), inset 0 1px 0 rgba(34,211,238,0.1) !important;
  transform: translateY(-1px);
}
[data-theme="ocean"] .device-card.online-card {
  border: 1px solid rgba(6,182,212,0.48) !important;
  box-shadow: 0 6px 44px rgba(0,120,180,0.22), 0 0 0 1px rgba(6,182,212,0.16), inset 0 1px 0 rgba(34,211,238,0.1) !important;
}
[data-theme="ocean"] .status-dot.online {
  background: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.22), 0 0 12px rgba(6,182,212,0.58) !important;
}
[data-theme="ocean"] .input,
[data-theme="ocean"] .input-box,
[data-theme="ocean"] .input-lg {
  background: rgba(4,14,28,0.95) !important;
  border-color: rgba(6,182,212,0.2) !important;
  color: #e0f8ff !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="ocean"] .input:focus,
[data-theme="ocean"] .input-box:focus,
[data-theme="ocean"] .input-lg:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.22), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="ocean"] .modal-overlay { background: rgba(0,0,0,0.78) !important; backdrop-filter: blur(5px) !important; }
[data-theme="ocean"] .modal {
  background: linear-gradient(160deg, rgba(8,22,42,0.99) 0%, rgba(2,8,18,1) 100%) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(34,211,238,0.07) !important;
}
[data-theme="ocean"] .stat-chip {
  background: rgba(4,16,32,0.88) !important;
  border-color: rgba(6,182,212,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(34,211,238,0.05), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="ocean"] .add-device-card {
  background: rgba(4,14,28,0.55) !important;
  border: 2px dashed rgba(6,182,212,0.22) !important;
}
[data-theme="ocean"] .add-device-card:hover {
  background: rgba(8,22,42,0.78) !important;
  border-color: rgba(6,182,212,0.45) !important;
  box-shadow: 0 0 28px rgba(6,182,212,0.14) !important;
}
[data-theme="ocean"] .pref-card {
  background: linear-gradient(150deg, rgba(8,22,42,0.97), rgba(2,8,18,0.99)) !important;
  border-color: rgba(6,182,212,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(34,211,238,0.05) !important;
}
[data-theme="ocean"] .toggle input:checked + .toggle-slider { background: #06b6d4 !important; box-shadow: 0 0 10px rgba(6,182,212,0.42) !important; }
[data-theme="ocean"] .sidebar-new-btn,
[data-theme="ocean"] .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #0c4a6e 100%) !important;
  box-shadow: 0 4px 22px rgba(6,182,212,0.38), inset 0 1px 0 rgba(150,240,255,0.18) !important;
  border: 1px solid rgba(34,211,238,0.2) !important;
}
[data-theme="ocean"] .btn-primary:hover,
[data-theme="ocean"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #0e6a9a 100%) !important;
  box-shadow: 0 6px 30px rgba(6,182,212,0.52), inset 0 1px 0 rgba(150,240,255,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="ocean"] .btn-secondary {
  background: rgba(4,14,28,0.92) !important;
  border-color: rgba(6,182,212,0.3) !important;
  color: #67e8f9 !important;
}
[data-theme="ocean"] .btn-ghost { color: #67e8f9 !important; }
[data-theme="ocean"] .btn-ghost:hover { background: rgba(6,182,212,0.12) !important; }

/* ─── Forest ── ancient rainforest, emerald canopy ───────────── */
[data-theme="forest"] {
  --bg:             #010c03;
  --surface:        #061508;
  --surface-1:      #061508;
  --surface-2:      #0c2210;
  --surface-3:      #112e18;
  --border:         rgba(16,185,129,0.22);
  --border-subtle:  rgba(16,185,129,0.10);
  --border-mid:     rgba(52,211,153,0.35);
  --border-focus:   #34d399;
  --text:           #d1fae5;
  --text-secondary: #6ee7b7;
  --text-tertiary:  #059669;
  --teal:           #10b981;
  --teal-dark:      #059669;
  --teal-dim:       rgba(16,185,129,0.13);
  --teal-glow:      0 0 0 3px rgba(16,185,129,0.22);
  --red:            #f87171;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="forest"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 1.2 0 0 0.05 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23n)' opacity='0.065'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 110% 70% at 0%   100%, rgba(4,80,20,0.65)   0%, transparent 50%),
    radial-gradient(ellipse 85%  65% at 100% 0%,   rgba(5,95,28,0.55)   0%, transparent 50%),
    radial-gradient(ellipse 60%  85% at 70%  75%,  rgba(16,185,129,0.14) 0%, transparent 46%),
    radial-gradient(ellipse 45%  55% at 25%  25%,  rgba(2,52,12,0.42)   0%, transparent 52%),
    radial-gradient(ellipse 35%  35% at 55%  50%,  rgba(1,30,8,0.55)    0%, transparent 70%),
    #010c03;
  background-attachment: fixed;
}
[data-theme="forest"] ::selection { background: rgba(16,185,129,0.38); color: #d1fae5; }
[data-theme="forest"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="forest"] ::-webkit-scrollbar-track { background: #010c03; }
[data-theme="forest"] ::-webkit-scrollbar-thumb { background: rgba(16,185,129,0.35); border-radius: 3px; }
[data-theme="forest"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,185,129,0.65); }
[data-theme="forest"] .app-nav {
  background: rgba(1,8,3,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(16,185,129,0.18) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="forest"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(4,14,6,0.98) 0%, rgba(1,8,3,0.995) 100%) !important;
  border-right: 1px solid rgba(16,185,129,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(16,185,129,0.05) !important;
}
[data-theme="forest"] .device-card,
[data-theme="forest"] .profile-card,
[data-theme="forest"] .mcu-card {
  background: linear-gradient(160deg, rgba(8,26,12,0.97) 0%, rgba(4,16,7,0.99) 55%, rgba(2,10,4,1) 100%) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(52,211,153,0.08), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="forest"] .device-card:hover {
  border-color: rgba(16,185,129,0.42) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(16,185,129,0.2), inset 0 1px 0 rgba(52,211,153,0.1) !important;
  transform: translateY(-1px);
}
[data-theme="forest"] .device-card.online-card {
  border: 1px solid rgba(16,185,129,0.48) !important;
  box-shadow: 0 6px 44px rgba(0,120,50,0.22), 0 0 0 1px rgba(16,185,129,0.16), inset 0 1px 0 rgba(52,211,153,0.1) !important;
}
[data-theme="forest"] .status-dot.online {
  background: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.22), 0 0 12px rgba(16,185,129,0.58) !important;
}
[data-theme="forest"] .input,
[data-theme="forest"] .input-box,
[data-theme="forest"] .input-lg {
  background: rgba(4,14,7,0.95) !important;
  border-color: rgba(16,185,129,0.2) !important;
  color: #d1fae5 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="forest"] .input:focus,
[data-theme="forest"] .input-box:focus,
[data-theme="forest"] .input-lg:focus {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.22), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="forest"] .modal-overlay { background: rgba(0,0,0,0.78) !important; backdrop-filter: blur(5px) !important; }
[data-theme="forest"] .modal {
  background: linear-gradient(160deg, rgba(8,24,12,0.99) 0%, rgba(2,10,4,1) 100%) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(52,211,153,0.07) !important;
}
[data-theme="forest"] .stat-chip {
  background: rgba(4,16,8,0.88) !important;
  border-color: rgba(16,185,129,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(52,211,153,0.05), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="forest"] .add-device-card {
  background: rgba(4,14,7,0.55) !important;
  border: 2px dashed rgba(16,185,129,0.22) !important;
}
[data-theme="forest"] .add-device-card:hover {
  background: rgba(8,24,12,0.78) !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: 0 0 28px rgba(16,185,129,0.14) !important;
}
[data-theme="forest"] .pref-card {
  background: linear-gradient(150deg, rgba(8,22,12,0.97), rgba(2,10,4,0.99)) !important;
  border-color: rgba(16,185,129,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(52,211,153,0.05) !important;
}
[data-theme="forest"] .toggle input:checked + .toggle-slider { background: #10b981 !important; box-shadow: 0 0 10px rgba(16,185,129,0.42) !important; }
[data-theme="forest"] .sidebar-new-btn,
[data-theme="forest"] .btn-primary {
  background: linear-gradient(135deg, #059669 0%, #064e3b 100%) !important;
  box-shadow: 0 4px 22px rgba(16,185,129,0.38), inset 0 1px 0 rgba(150,255,200,0.18) !important;
  border: 1px solid rgba(52,211,153,0.2) !important;
}
[data-theme="forest"] .btn-primary:hover,
[data-theme="forest"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%) !important;
  box-shadow: 0 6px 30px rgba(16,185,129,0.52), inset 0 1px 0 rgba(150,255,200,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="forest"] .btn-secondary {
  background: rgba(4,14,7,0.92) !important;
  border-color: rgba(16,185,129,0.3) !important;
  color: #6ee7b7 !important;
}
[data-theme="forest"] .btn-ghost { color: #6ee7b7 !important; }
[data-theme="forest"] .btn-ghost:hover { background: rgba(16,185,129,0.12) !important; }

/* ─── Textured Yellow ── aged amber, gold, whiskey ───────────── */
[data-theme="ember"] {
  --bg:             #160f00;
  --surface:        #221700;
  --surface-1:      #221700;
  --surface-2:      #2e2000;
  --surface-3:      #3c2c00;
  --border:         rgba(217,119,6,0.28);
  --border-subtle:  rgba(217,119,6,0.13);
  --border-mid:     rgba(245,158,11,0.4);
  --border-focus:   #f59e0b;
  --text:           #fffbeb;
  --text-secondary: #fcd34d;
  --text-tertiary:  #b45309;
  --teal:           #d97706;
  --teal-dark:      #b45309;
  --teal-dim:       rgba(217,119,6,0.14);
  --teal-glow:      0 0 0 3px rgba(217,119,6,0.24);
  --red:            #fca5a5;
  --green:          #6ee7b7;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.6);
  --shadow:         0 3px 24px rgba(0,0,0,0.7);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.78);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.88);
}
[data-theme="ember"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.58' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.3 0 0 0 0.1 0 0.8 0 0 0.04 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.082'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 120% 70% at 0%   100%, rgba(130,60,5,0.68)  0%, transparent 52%),
    radial-gradient(ellipse 90%  65% at 100% 0%,   rgba(170,100,6,0.55) 0%, transparent 52%),
    radial-gradient(ellipse 65%  80% at 55%  80%,  rgba(95,48,4,0.38)   0%, transparent 48%),
    radial-gradient(ellipse 45%  55% at 80%  20%,  rgba(140,75,5,0.3)   0%, transparent 52%),
    radial-gradient(ellipse 35%  35% at 35%  45%,  rgba(55,30,0,0.55)   0%, transparent 70%),
    #160f00;
  background-attachment: fixed;
}
[data-theme="ember"] ::selection { background: rgba(217,119,6,0.42); color: #fffbeb; }
[data-theme="ember"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="ember"] ::-webkit-scrollbar-track { background: #160f00; }
[data-theme="ember"] ::-webkit-scrollbar-thumb { background: rgba(217,119,6,0.4); border-radius: 3px; }
[data-theme="ember"] ::-webkit-scrollbar-thumb:hover { background: rgba(217,119,6,0.7); }
[data-theme="ember"] .app-nav {
  background: rgba(14,10,0,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(217,119,6,0.22) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.62) !important;
}
[data-theme="ember"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(22,15,0,0.98) 0%, rgba(14,10,0,0.995) 100%) !important;
  border-right: 1px solid rgba(217,119,6,0.15) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.52), inset -1px 0 0 rgba(217,119,6,0.06) !important;
}
[data-theme="ember"] .device-card,
[data-theme="ember"] .profile-card,
[data-theme="ember"] .mcu-card {
  background: linear-gradient(160deg, rgba(38,26,0,0.97) 0%, rgba(24,16,0,0.99) 55%, rgba(16,10,0,1) 100%) !important;
  border: 1px solid rgba(200,100,6,0.26) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,200,80,0.08), inset 0 -1px 0 rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="ember"] .device-card:hover {
  border-color: rgba(217,119,6,0.44) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(217,119,6,0.22), inset 0 1px 0 rgba(255,200,80,0.1) !important;
  transform: translateY(-1px);
}
[data-theme="ember"] .device-card.online-card {
  border: 1px solid rgba(245,158,11,0.48) !important;
  box-shadow: 0 6px 44px rgba(150,80,0,0.22), 0 0 0 1px rgba(217,119,6,0.18), inset 0 1px 0 rgba(255,200,80,0.1) !important;
}
[data-theme="ember"] .status-dot.online {
  background: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.22), 0 0 12px rgba(217,119,6,0.58) !important;
}
[data-theme="ember"] .input,
[data-theme="ember"] .input-box,
[data-theme="ember"] .input-lg {
  background: rgba(26,18,0,0.95) !important;
  border-color: rgba(217,119,6,0.22) !important;
  color: #fffbeb !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.42) !important;
}
[data-theme="ember"] .input:focus,
[data-theme="ember"] .input-box:focus,
[data-theme="ember"] .input-lg:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.22), inset 0 2px 8px rgba(0,0,0,0.28) !important;
}
[data-theme="ember"] .modal-overlay { background: rgba(0,0,0,0.76) !important; backdrop-filter: blur(5px) !important; }
[data-theme="ember"] .modal {
  background: linear-gradient(160deg, rgba(36,24,0,0.99) 0%, rgba(16,10,0,1) 100%) !important;
  border: 1px solid rgba(217,119,6,0.24) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,200,80,0.07) !important;
}
[data-theme="ember"] .stat-chip {
  background: rgba(28,18,0,0.88) !important;
  border-color: rgba(217,119,6,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.06), 0 2px 8px rgba(0,0,0,0.32) !important;
}
[data-theme="ember"] .add-device-card {
  background: rgba(24,16,0,0.55) !important;
  border: 2px dashed rgba(217,119,6,0.24) !important;
}
[data-theme="ember"] .add-device-card:hover {
  background: rgba(36,26,0,0.78) !important;
  border-color: rgba(217,119,6,0.48) !important;
  box-shadow: 0 0 28px rgba(217,119,6,0.16) !important;
}
[data-theme="ember"] .pref-card {
  background: linear-gradient(150deg, rgba(32,22,0,0.97), rgba(16,10,0,0.99)) !important;
  border-color: rgba(217,119,6,0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,200,80,0.05) !important;
}
[data-theme="ember"] .toggle input:checked + .toggle-slider { background: #d97706 !important; box-shadow: 0 0 10px rgba(217,119,6,0.42) !important; }
[data-theme="ember"] .sidebar-new-btn,
[data-theme="ember"] .btn-primary {
  background: linear-gradient(135deg, #c07a06 0%, #7c3a00 100%) !important;
  box-shadow: 0 4px 22px rgba(217,119,6,0.42), inset 0 1px 0 rgba(255,220,120,0.18) !important;
  border: 1px solid rgba(245,158,11,0.22) !important;
}
[data-theme="ember"] .btn-primary:hover,
[data-theme="ember"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%) !important;
  box-shadow: 0 6px 30px rgba(217,119,6,0.55), inset 0 1px 0 rgba(255,220,120,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="ember"] .btn-secondary {
  background: rgba(26,18,0,0.92) !important;
  border-color: rgba(217,119,6,0.3) !important;
  color: #fcd34d !important;
}
[data-theme="ember"] .btn-ghost { color: #fcd34d !important; }
[data-theme="ember"] .btn-ghost:hover { background: rgba(217,119,6,0.12) !important; }

/* ─── Charcoal ── precision engineered, brushed titanium ─────── */
[data-theme="charcoal"] {
  --bg:             #0a0a0a;
  --surface:        #161616;
  --surface-1:      #161616;
  --surface-2:      #202020;
  --surface-3:      #2a2a2a;
  --border:         rgba(255,255,255,0.09);
  --border-subtle:  rgba(255,255,255,0.05);
  --border-mid:     rgba(255,255,255,0.15);
  --border-focus:   rgba(255,255,255,0.6);
  --text:           #f4f4f4;
  --text-secondary: #a0a0a0;
  --text-tertiary:  #585858;
  --teal:           #00979D;
  --teal-dark:      #007A80;
  --teal-dim:       rgba(0,151,157,0.12);
  --teal-glow:      0 0 0 3px rgba(0,151,157,0.2);
  --red:            #f87171;
  --green:          #4ade80;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="charcoal"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 110% 70% at 0%   0%,   rgba(55,55,55,0.72)  0%, transparent 52%),
    radial-gradient(ellipse 80%  65% at 100% 100%, rgba(40,40,40,0.58)  0%, transparent 52%),
    radial-gradient(ellipse 60%  80% at 85%  10%,  rgba(48,48,48,0.3)   0%, transparent 48%),
    radial-gradient(ellipse 45%  55% at 15%  85%,  rgba(35,35,35,0.32)  0%, transparent 52%),
    radial-gradient(ellipse 100% 100% at 50% 50%,  rgba(20,20,20,0.9)   0%, #0a0a0a 100%);
  background-attachment: fixed;
}
[data-theme="charcoal"] ::selection { background: rgba(0,151,157,0.38); color: #f4f4f4; }
[data-theme="charcoal"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="charcoal"] ::-webkit-scrollbar-track { background: #0a0a0a; }
[data-theme="charcoal"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
[data-theme="charcoal"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
[data-theme="charcoal"] .app-nav {
  background: rgba(8,8,8,0.9) !important;
  backdrop-filter: blur(32px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(150%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="charcoal"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(14,14,14,0.98) 0%, rgba(8,8,8,0.995) 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(255,255,255,0.03) !important;
}
[data-theme="charcoal"] .device-card,
[data-theme="charcoal"] .profile-card,
[data-theme="charcoal"] .mcu-card {
  background: linear-gradient(160deg, rgba(26,26,26,0.97) 0%, rgba(18,18,18,0.99) 55%, rgba(14,14,14,1) 100%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="charcoal"] .device-card:hover {
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transform: translateY(-1px);
}
[data-theme="charcoal"] .device-card.online-card {
  border: 1px solid rgba(0,151,157,0.38) !important;
  box-shadow: 0 6px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,151,157,0.14), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
[data-theme="charcoal"] .status-dot.online {
  background: #00979D !important;
  box-shadow: 0 0 0 3px rgba(0,151,157,0.2), 0 0 12px rgba(0,151,157,0.5) !important;
}
[data-theme="charcoal"] .input,
[data-theme="charcoal"] .input-box,
[data-theme="charcoal"] .input-lg {
  background: rgba(14,14,14,0.95) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f4f4f4 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="charcoal"] .input:focus,
[data-theme="charcoal"] .input-box:focus,
[data-theme="charcoal"] .input-lg:focus {
  border-color: rgba(255,255,255,0.4) !important;
  box-shadow: 0 0 0 3px rgba(0,151,157,0.2), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="charcoal"] .modal-overlay { background: rgba(0,0,0,0.82) !important; backdrop-filter: blur(5px) !important; }
[data-theme="charcoal"] .modal {
  background: linear-gradient(160deg, rgba(24,24,24,0.99) 0%, rgba(12,12,12,1) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
[data-theme="charcoal"] .stat-chip {
  background: rgba(18,18,18,0.88) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="charcoal"] .add-device-card {
  background: rgba(16,16,16,0.55) !important;
  border: 2px dashed rgba(255,255,255,0.1) !important;
}
[data-theme="charcoal"] .add-device-card:hover {
  background: rgba(26,26,26,0.78) !important;
  border-color: rgba(0,151,157,0.4) !important;
  box-shadow: 0 0 28px rgba(0,151,157,0.12) !important;
}
[data-theme="charcoal"] .pref-card {
  background: linear-gradient(150deg, rgba(22,22,22,0.97), rgba(12,12,12,0.99)) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
[data-theme="charcoal"] .toggle input:checked + .toggle-slider { background: #00979D !important; box-shadow: 0 0 10px rgba(0,151,157,0.4) !important; }
[data-theme="charcoal"] .sidebar-new-btn,
[data-theme="charcoal"] .btn-primary {
  background: linear-gradient(135deg, #007A80 0%, #004a4e 100%) !important;
  box-shadow: 0 4px 22px rgba(0,151,157,0.36), inset 0 1px 0 rgba(100,255,255,0.14) !important;
  border: 1px solid rgba(0,200,210,0.2) !important;
}
[data-theme="charcoal"] .btn-primary:hover,
[data-theme="charcoal"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #00979D 0%, #005f64 100%) !important;
  box-shadow: 0 6px 30px rgba(0,151,157,0.5), inset 0 1px 0 rgba(100,255,255,0.18) !important;
  transform: translateY(-1px) !important;
}
[data-theme="charcoal"] .btn-secondary {
  background: rgba(20,20,20,0.92) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #a0a0a0 !important;
}
[data-theme="charcoal"] .btn-ghost { color: #a0a0a0 !important; }
[data-theme="charcoal"] .btn-ghost:hover { background: rgba(255,255,255,0.06) !important; }

/* ─── Manage button — dark theme overrides ─── */
[data-theme="crimson"] .dc-manage-btn {
  background: rgba(225,29,72,0.14) !important;
  border-color: rgba(225,29,72,0.32) !important;
  color: #fda4af !important;
}
[data-theme="crimson"] .dc-manage-btn:hover {
  background: rgba(225,29,72,0.26) !important;
  border-color: rgba(225,29,72,0.52) !important;
}
[data-theme="ocean"] .dc-manage-btn {
  background: rgba(6,182,212,0.13) !important;
  border-color: rgba(6,182,212,0.32) !important;
  color: #67e8f9 !important;
}
[data-theme="ocean"] .dc-manage-btn:hover {
  background: rgba(6,182,212,0.24) !important;
  border-color: rgba(6,182,212,0.52) !important;
}
[data-theme="forest"] .dc-manage-btn {
  background: rgba(16,185,129,0.13) !important;
  border-color: rgba(16,185,129,0.32) !important;
  color: #6ee7b7 !important;
}
[data-theme="forest"] .dc-manage-btn:hover {
  background: rgba(16,185,129,0.24) !important;
  border-color: rgba(16,185,129,0.52) !important;
}
[data-theme="ember"] .dc-manage-btn {
  background: rgba(217,119,6,0.15) !important;
  border-color: rgba(217,119,6,0.35) !important;
  color: #fcd34d !important;
}
[data-theme="ember"] .dc-manage-btn:hover {
  background: rgba(217,119,6,0.26) !important;
  border-color: rgba(217,119,6,0.55) !important;
}
[data-theme="charcoal"] .dc-manage-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #d0d0d0 !important;
}
[data-theme="charcoal"] .dc-manage-btn:hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.32) !important;
}

/* ─── Aurora ── arctic borealis, luminous green on polar dark ── */
[data-theme="aurora"] {
  --bg:             #020c0e;
  --surface:        #061418;
  --surface-1:      #061418;
  --surface-2:      #0b1f24;
  --surface-3:      #102a31;
  --border:         rgba(0,255,163,0.2);
  --border-subtle:  rgba(0,255,163,0.09);
  --border-mid:     rgba(0,255,163,0.34);
  --border-focus:   #00ffa3;
  --text:           #e0fff5;
  --text-secondary: #5fffc4;
  --text-tertiary:  #0d9b72;
  --teal:           #00e696;
  --teal-dark:      #00b87a;
  --teal-dim:       rgba(0,230,150,0.13);
  --teal-glow:      0 0 0 3px rgba(0,230,150,0.24);
  --red:            #ff6b8a;
  --green:          #00ffa3;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="aurora"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 1.3 0 0 0.06 0 0 0.8 0 0.04 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 200% 18% at 50%  28%,  rgba(0,230,150,0.22) 0%, transparent 100%),
    radial-gradient(ellipse 160% 12% at 30%  42%,  rgba(0,180,255,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 120% 10% at 70%  55%,  rgba(100,255,200,0.1) 0%, transparent 100%),
    radial-gradient(ellipse 100% 70% at 0%   0%,   rgba(0,80,60,0.55)   0%, transparent 52%),
    radial-gradient(ellipse 80%  65% at 100% 100%, rgba(0,60,80,0.48)   0%, transparent 52%),
    radial-gradient(ellipse 60%  40% at 50%  50%,  rgba(0,30,28,0.6)    0%, transparent 70%),
    #020c0e;
  background-attachment: fixed;
}
[data-theme="aurora"] ::selection { background: rgba(0,230,150,0.38); color: #e0fff5; }
[data-theme="aurora"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="aurora"] ::-webkit-scrollbar-track { background: #020c0e; }
[data-theme="aurora"] ::-webkit-scrollbar-thumb { background: rgba(0,230,150,0.35); border-radius: 3px; }
[data-theme="aurora"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,230,150,0.65); }
[data-theme="aurora"] .app-nav {
  background: rgba(1,8,10,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(0,230,150,0.18) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65), 0 1px 0 rgba(0,255,163,0.06) !important;
}
[data-theme="aurora"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(4,16,20,0.98) 0%, rgba(1,8,10,0.995) 100%) !important;
  border-right: 1px solid rgba(0,230,150,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(0,230,150,0.05) !important;
}
[data-theme="aurora"] .device-card,
[data-theme="aurora"] .profile-card,
[data-theme="aurora"] .mcu-card {
  background: linear-gradient(160deg, rgba(8,28,32,0.97) 0%, rgba(4,18,22,0.99) 55%, rgba(2,10,14,1) 100%) !important;
  border: 1px solid rgba(0,230,150,0.2) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(0,255,163,0.09), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="aurora"] .device-card:hover {
  border-color: rgba(0,230,150,0.4) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(0,230,150,0.2), inset 0 1px 0 rgba(0,255,163,0.11) !important;
  transform: translateY(-1px);
}
[data-theme="aurora"] .device-card.online-card {
  border: 1px solid rgba(0,230,150,0.46) !important;
  box-shadow: 0 6px 44px rgba(0,150,100,0.2), 0 0 0 1px rgba(0,230,150,0.15), inset 0 1px 0 rgba(0,255,163,0.1) !important;
}
[data-theme="aurora"] .status-dot.online {
  background: #00e696 !important;
  box-shadow: 0 0 0 3px rgba(0,230,150,0.22), 0 0 14px rgba(0,230,150,0.6) !important;
}
[data-theme="aurora"] .input,
[data-theme="aurora"] .input-box,
[data-theme="aurora"] .input-lg {
  background: rgba(4,16,20,0.95) !important;
  border-color: rgba(0,230,150,0.2) !important;
  color: #e0fff5 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="aurora"] .input:focus,
[data-theme="aurora"] .input-box:focus,
[data-theme="aurora"] .input-lg:focus {
  border-color: #00ffa3 !important;
  box-shadow: 0 0 0 3px rgba(0,230,150,0.22), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="aurora"] .modal-overlay { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(5px) !important; }
[data-theme="aurora"] .modal {
  background: linear-gradient(160deg, rgba(6,24,28,0.99) 0%, rgba(2,10,14,1) 100%) !important;
  border: 1px solid rgba(0,230,150,0.22) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(0,255,163,0.08) !important;
}
[data-theme="aurora"] .stat-chip {
  background: rgba(4,18,22,0.88) !important;
  border-color: rgba(0,230,150,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(0,255,163,0.06), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="aurora"] .add-device-card {
  background: rgba(4,16,20,0.55) !important;
  border: 2px dashed rgba(0,230,150,0.22) !important;
}
[data-theme="aurora"] .add-device-card:hover {
  background: rgba(8,28,32,0.78) !important;
  border-color: rgba(0,230,150,0.45) !important;
  box-shadow: 0 0 30px rgba(0,230,150,0.14) !important;
}
[data-theme="aurora"] .pref-card {
  background: linear-gradient(150deg, rgba(6,22,26,0.97), rgba(2,10,14,0.99)) !important;
  border-color: rgba(0,230,150,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,255,163,0.05) !important;
}
[data-theme="aurora"] .toggle input:checked + .toggle-slider { background: #00e696 !important; box-shadow: 0 0 12px rgba(0,230,150,0.45) !important; }
[data-theme="aurora"] .dc-manage-btn {
  background: rgba(0,230,150,0.12) !important;
  border-color: rgba(0,230,150,0.3) !important;
  color: #5fffc4 !important;
}
[data-theme="aurora"] .dc-manage-btn:hover { background: rgba(0,230,150,0.22) !important; border-color: rgba(0,230,150,0.52) !important; }
[data-theme="aurora"] .sidebar-new-btn,
[data-theme="aurora"] .btn-primary {
  background: linear-gradient(135deg, #00b87a 0%, #005c45 100%) !important;
  box-shadow: 0 4px 22px rgba(0,230,150,0.4), inset 0 1px 0 rgba(150,255,220,0.18) !important;
  border: 1px solid rgba(0,255,163,0.22) !important;
}
[data-theme="aurora"] .btn-primary:hover,
[data-theme="aurora"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #00e696 0%, #007a58 100%) !important;
  box-shadow: 0 6px 30px rgba(0,230,150,0.54), inset 0 1px 0 rgba(150,255,220,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="aurora"] .btn-secondary { background: rgba(4,16,20,0.92) !important; border-color: rgba(0,230,150,0.3) !important; color: #5fffc4 !important; }
[data-theme="aurora"] .btn-ghost { color: #5fffc4 !important; }
[data-theme="aurora"] .btn-ghost:hover { background: rgba(0,230,150,0.1) !important; }

/* ─── Sakura ── midnight cherry blossom, deep plum night ─────── */
[data-theme="sakura"] {
  --bg:             #09000d;
  --surface:        #150018;
  --surface-1:      #150018;
  --surface-2:      #1e0025;
  --surface-3:      #280032;
  --border:         rgba(244,114,182,0.22);
  --border-subtle:  rgba(244,114,182,0.10);
  --border-mid:     rgba(249,168,212,0.36);
  --border-focus:   #f9a8d4;
  --text:           #fdf2f8;
  --text-secondary: #f9a8d4;
  --text-tertiary:  #9d174d;
  --teal:           #ec4899;
  --teal-dark:      #be185d;
  --teal-dim:       rgba(236,72,153,0.14);
  --teal-glow:      0 0 0 3px rgba(236,72,153,0.24);
  --red:            #fca5a5;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="sakura"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.2 0 0 0 0.08 0 0 0 0 0 0 0 1.1 0 0.05 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.065'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 110% 65% at 0%   0%,   rgba(120,0,100,0.62)  0%, transparent 50%),
    radial-gradient(ellipse 85%  70% at 100% 100%, rgba(90,0,70,0.55)    0%, transparent 50%),
    radial-gradient(ellipse 65%  85% at 85%  5%,   rgba(180,20,120,0.3)  0%, transparent 46%),
    radial-gradient(ellipse 45%  55% at 15%  90%,  rgba(80,0,60,0.35)    0%, transparent 52%),
    radial-gradient(ellipse 40%  40% at 50%  50%,  rgba(40,0,35,0.6)     0%, transparent 68%),
    #09000d;
  background-attachment: fixed;
}
[data-theme="sakura"] ::selection { background: rgba(236,72,153,0.38); color: #fdf2f8; }
[data-theme="sakura"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="sakura"] ::-webkit-scrollbar-track { background: #09000d; }
[data-theme="sakura"] ::-webkit-scrollbar-thumb { background: rgba(236,72,153,0.38); border-radius: 3px; }
[data-theme="sakura"] ::-webkit-scrollbar-thumb:hover { background: rgba(236,72,153,0.65); }
[data-theme="sakura"] .app-nav {
  background: rgba(6,0,9,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(236,72,153,0.2) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="sakura"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(14,0,18,0.98) 0%, rgba(6,0,9,0.995) 100%) !important;
  border-right: 1px solid rgba(236,72,153,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(236,72,153,0.05) !important;
}
[data-theme="sakura"] .device-card,
[data-theme="sakura"] .profile-card,
[data-theme="sakura"] .mcu-card {
  background: linear-gradient(160deg, rgba(28,0,36,0.97) 0%, rgba(16,0,20,0.99) 55%, rgba(10,0,14,1) 100%) !important;
  border: 1px solid rgba(236,72,153,0.22) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(249,168,212,0.09), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="sakura"] .device-card:hover {
  border-color: rgba(236,72,153,0.42) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(236,72,153,0.22), inset 0 1px 0 rgba(249,168,212,0.11) !important;
  transform: translateY(-1px);
}
[data-theme="sakura"] .device-card.online-card {
  border: 1px solid rgba(236,72,153,0.48) !important;
  box-shadow: 0 6px 44px rgba(160,0,100,0.22), 0 0 0 1px rgba(236,72,153,0.16), inset 0 1px 0 rgba(249,168,212,0.1) !important;
}
[data-theme="sakura"] .status-dot.online {
  background: #ec4899 !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.22), 0 0 13px rgba(236,72,153,0.58) !important;
}
[data-theme="sakura"] .input,
[data-theme="sakura"] .input-box,
[data-theme="sakura"] .input-lg {
  background: rgba(18,0,22,0.95) !important;
  border-color: rgba(236,72,153,0.2) !important;
  color: #fdf2f8 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="sakura"] .input:focus,
[data-theme="sakura"] .input-box:focus,
[data-theme="sakura"] .input-lg:focus {
  border-color: #f9a8d4 !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.22), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="sakura"] .modal-overlay { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(5px) !important; }
[data-theme="sakura"] .modal {
  background: linear-gradient(160deg, rgba(26,0,32,0.99) 0%, rgba(10,0,14,1) 100%) !important;
  border: 1px solid rgba(236,72,153,0.24) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(249,168,212,0.07) !important;
}
[data-theme="sakura"] .stat-chip {
  background: rgba(18,0,24,0.88) !important;
  border-color: rgba(236,72,153,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(249,168,212,0.06), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="sakura"] .add-device-card {
  background: rgba(16,0,20,0.55) !important;
  border: 2px dashed rgba(236,72,153,0.22) !important;
}
[data-theme="sakura"] .add-device-card:hover {
  background: rgba(28,0,36,0.78) !important;
  border-color: rgba(236,72,153,0.46) !important;
  box-shadow: 0 0 28px rgba(236,72,153,0.15) !important;
}
[data-theme="sakura"] .pref-card {
  background: linear-gradient(150deg, rgba(22,0,28,0.97), rgba(10,0,14,0.99)) !important;
  border-color: rgba(236,72,153,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(249,168,212,0.05) !important;
}
[data-theme="sakura"] .toggle input:checked + .toggle-slider { background: #ec4899 !important; box-shadow: 0 0 11px rgba(236,72,153,0.44) !important; }
[data-theme="sakura"] .dc-manage-btn {
  background: rgba(236,72,153,0.12) !important;
  border-color: rgba(236,72,153,0.3) !important;
  color: #f9a8d4 !important;
}
[data-theme="sakura"] .dc-manage-btn:hover { background: rgba(236,72,153,0.22) !important; border-color: rgba(236,72,153,0.52) !important; }
[data-theme="sakura"] .sidebar-new-btn,
[data-theme="sakura"] .btn-primary {
  background: linear-gradient(135deg, #be185d 0%, #701a45 100%) !important;
  box-shadow: 0 4px 22px rgba(236,72,153,0.42), inset 0 1px 0 rgba(255,190,220,0.18) !important;
  border: 1px solid rgba(249,168,212,0.2) !important;
}
[data-theme="sakura"] .btn-primary:hover,
[data-theme="sakura"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #ec4899 0%, #9d174d 100%) !important;
  box-shadow: 0 6px 30px rgba(236,72,153,0.56), inset 0 1px 0 rgba(255,190,220,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="sakura"] .btn-secondary { background: rgba(18,0,22,0.92) !important; border-color: rgba(236,72,153,0.3) !important; color: #f9a8d4 !important; }
[data-theme="sakura"] .btn-ghost { color: #f9a8d4 !important; }
[data-theme="sakura"] .btn-ghost:hover { background: rgba(236,72,153,0.1) !important; }

/* ─── Forge ── volcanic dark, molten iron, raw metal heat ─────── */
[data-theme="forge"] {
  --bg:             #0c0400;
  --surface:        #1a0a00;
  --surface-1:      #1a0a00;
  --surface-2:      #251200;
  --surface-3:      #311a00;
  --border:         rgba(234,88,12,0.26);
  --border-subtle:  rgba(234,88,12,0.11);
  --border-mid:     rgba(251,146,60,0.38);
  --border-focus:   #fb923c;
  --text:           #fff7ed;
  --text-secondary: #fdba74;
  --text-tertiary:  #c2410c;
  --teal:           #ea580c;
  --teal-dark:      #c2410c;
  --teal-dim:       rgba(234,88,12,0.14);
  --teal-glow:      0 0 0 3px rgba(234,88,12,0.24);
  --red:            #fca5a5;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="forge"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.58' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.4 0 0 0 0.12 0 0.3 0 0 0.02 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 50%  30% at 50%  98%,  rgba(255,80,0,0.28)   0%, transparent 100%),
    radial-gradient(ellipse 30%  20% at 50%  100%, rgba(255,120,0,0.18)  0%, transparent 100%),
    radial-gradient(ellipse 120% 65% at 0%   100%, rgba(140,45,0,0.68)   0%, transparent 52%),
    radial-gradient(ellipse 90%  60% at 100% 0%,   rgba(100,30,0,0.55)   0%, transparent 52%),
    radial-gradient(ellipse 65%  80% at 80%  90%,  rgba(180,60,0,0.32)   0%, transparent 48%),
    radial-gradient(ellipse 40%  40% at 45%  45%,  rgba(50,15,0,0.58)    0%, transparent 68%),
    #0c0400;
  background-attachment: fixed;
}
[data-theme="forge"] ::selection { background: rgba(234,88,12,0.4); color: #fff7ed; }
[data-theme="forge"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="forge"] ::-webkit-scrollbar-track { background: #0c0400; }
[data-theme="forge"] ::-webkit-scrollbar-thumb { background: rgba(234,88,12,0.38); border-radius: 3px; }
[data-theme="forge"] ::-webkit-scrollbar-thumb:hover { background: rgba(234,88,12,0.68); }
[data-theme="forge"] .app-nav {
  background: rgba(10,3,0,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(234,88,12,0.22) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="forge"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(18,6,0,0.98) 0%, rgba(10,3,0,0.995) 100%) !important;
  border-right: 1px solid rgba(234,88,12,0.15) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(234,88,12,0.06) !important;
}
[data-theme="forge"] .device-card,
[data-theme="forge"] .profile-card,
[data-theme="forge"] .mcu-card {
  background: linear-gradient(160deg, rgba(34,14,0,0.97) 0%, rgba(20,8,0,0.99) 55%, rgba(14,5,0,1) 100%) !important;
  border: 1px solid rgba(200,70,8,0.26) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,140,60,0.09), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="forge"] .device-card:hover {
  border-color: rgba(234,88,12,0.44) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(234,88,12,0.22), inset 0 1px 0 rgba(255,140,60,0.11) !important;
  transform: translateY(-1px);
}
[data-theme="forge"] .device-card.online-card {
  border: 1px solid rgba(251,146,60,0.48) !important;
  box-shadow: 0 6px 44px rgba(180,50,0,0.24), 0 0 0 1px rgba(234,88,12,0.18), inset 0 1px 0 rgba(255,140,60,0.1) !important;
}
[data-theme="forge"] .status-dot.online {
  background: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.22), 0 0 13px rgba(234,88,12,0.62) !important;
}
[data-theme="forge"] .input,
[data-theme="forge"] .input-box,
[data-theme="forge"] .input-lg {
  background: rgba(20,8,0,0.95) !important;
  border-color: rgba(234,88,12,0.22) !important;
  color: #fff7ed !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="forge"] .input:focus,
[data-theme="forge"] .input-box:focus,
[data-theme="forge"] .input-lg:focus {
  border-color: #fb923c !important;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.24), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="forge"] .modal-overlay { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(5px) !important; }
[data-theme="forge"] .modal {
  background: linear-gradient(160deg, rgba(30,12,0,0.99) 0%, rgba(14,5,0,1) 100%) !important;
  border: 1px solid rgba(234,88,12,0.26) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,140,60,0.08) !important;
}
[data-theme="forge"] .stat-chip {
  background: rgba(22,9,0,0.88) !important;
  border-color: rgba(234,88,12,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,140,60,0.06), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="forge"] .add-device-card {
  background: rgba(18,8,0,0.55) !important;
  border: 2px dashed rgba(234,88,12,0.24) !important;
}
[data-theme="forge"] .add-device-card:hover {
  background: rgba(32,13,0,0.78) !important;
  border-color: rgba(234,88,12,0.48) !important;
  box-shadow: 0 0 28px rgba(234,88,12,0.16) !important;
}
[data-theme="forge"] .pref-card {
  background: linear-gradient(150deg, rgba(28,11,0,0.97), rgba(14,5,0,0.99)) !important;
  border-color: rgba(234,88,12,0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,140,60,0.05) !important;
}
[data-theme="forge"] .toggle input:checked + .toggle-slider { background: #ea580c !important; box-shadow: 0 0 12px rgba(234,88,12,0.44) !important; }
[data-theme="forge"] .dc-manage-btn {
  background: rgba(234,88,12,0.13) !important;
  border-color: rgba(234,88,12,0.32) !important;
  color: #fdba74 !important;
}
[data-theme="forge"] .dc-manage-btn:hover { background: rgba(234,88,12,0.24) !important; border-color: rgba(234,88,12,0.52) !important; }
[data-theme="forge"] .sidebar-new-btn,
[data-theme="forge"] .btn-primary {
  background: linear-gradient(135deg, #c2410c 0%, #7c1d06 100%) !important;
  box-shadow: 0 4px 22px rgba(234,88,12,0.44), inset 0 1px 0 rgba(255,180,100,0.18) !important;
  border: 1px solid rgba(251,146,60,0.22) !important;
}
[data-theme="forge"] .btn-primary:hover,
[data-theme="forge"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #ea580c 0%, #9a2d0a 100%) !important;
  box-shadow: 0 6px 30px rgba(234,88,12,0.58), inset 0 1px 0 rgba(255,180,100,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="forge"] .btn-secondary { background: rgba(20,8,0,0.92) !important; border-color: rgba(234,88,12,0.3) !important; color: #fdba74 !important; }
[data-theme="forge"] .btn-ghost { color: #fdba74 !important; }
[data-theme="forge"] .btn-ghost:hover { background: rgba(234,88,12,0.12) !important; }

/* ─── Void ── electric indigo, absolute abyss ────────────────── */
[data-theme="void"] {
  --bg:             #04000e;
  --surface:        #0a0020;
  --surface-1:      #0a0020;
  --surface-2:      #10002e;
  --surface-3:      #16003c;
  --border:         rgba(129,140,248,0.22);
  --border-subtle:  rgba(129,140,248,0.09);
  --border-mid:     rgba(165,180,252,0.35);
  --border-focus:   #a5b4fc;
  --text:           #eef2ff;
  --text-secondary: #a5b4fc;
  --text-tertiary:  #4338ca;
  --teal:           #818cf8;
  --teal-dark:      #6366f1;
  --teal-dim:       rgba(129,140,248,0.14);
  --teal-glow:      0 0 0 3px rgba(129,140,248,0.24);
  --red:            #f87171;
  --green:          #34d399;
  --shadow-sm:      0 1px 8px rgba(0,0,0,0.65);
  --shadow:         0 3px 24px rgba(0,0,0,0.75);
  --shadow-md:      0 8px 48px rgba(0,0,0,0.82);
  --shadow-xl:      0 24px 72px rgba(0,0,0,0.92);
}
[data-theme="void"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.3 0 0 0 0.02 0 0 0 0 0 0 0 1.4 0 0.06 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 120% 70% at 0%   0%,   rgba(67,30,180,0.62)  0%, transparent 50%),
    radial-gradient(ellipse 90%  70% at 100% 100%, rgba(45,0,160,0.55)   0%, transparent 50%),
    radial-gradient(ellipse 65%  90% at 90%  5%,   rgba(99,55,210,0.32)  0%, transparent 46%),
    radial-gradient(ellipse 50%  55% at 10%  90%,  rgba(55,10,140,0.35)  0%, transparent 52%),
    radial-gradient(ellipse 40%  40% at 50%  50%,  rgba(20,0,60,0.62)    0%, transparent 68%),
    #04000e;
  background-attachment: fixed;
}
[data-theme="void"] ::selection { background: rgba(129,140,248,0.38); color: #eef2ff; }
[data-theme="void"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="void"] ::-webkit-scrollbar-track { background: #04000e; }
[data-theme="void"] ::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.36); border-radius: 3px; }
[data-theme="void"] ::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,0.65); }
[data-theme="void"] .app-nav {
  background: rgba(2,0,8,0.88) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(129,140,248,0.18) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.65) !important;
}
[data-theme="void"] nav.app-nav.dash-nav {
  background: linear-gradient(180deg, rgba(8,0,22,0.98) 0%, rgba(2,0,8,0.995) 100%) !important;
  border-right: 1px solid rgba(129,140,248,0.14) !important;
  box-shadow: 2px 0 32px rgba(0,0,0,0.55), inset -1px 0 0 rgba(129,140,248,0.05) !important;
}
[data-theme="void"] .device-card,
[data-theme="void"] .profile-card,
[data-theme="void"] .mcu-card {
  background: linear-gradient(160deg, rgba(18,0,48,0.97) 0%, rgba(10,0,28,0.99) 55%, rgba(6,0,18,1) 100%) !important;
  border: 1px solid rgba(129,140,248,0.22) !important;
  box-shadow: 0 6px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(165,180,252,0.09), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}
[data-theme="void"] .device-card:hover {
  border-color: rgba(129,140,248,0.42) !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(129,140,248,0.2), inset 0 1px 0 rgba(165,180,252,0.11) !important;
  transform: translateY(-1px);
}
[data-theme="void"] .device-card.online-card {
  border: 1px solid rgba(129,140,248,0.48) !important;
  box-shadow: 0 6px 44px rgba(60,0,180,0.22), 0 0 0 1px rgba(129,140,248,0.16), inset 0 1px 0 rgba(165,180,252,0.1) !important;
}
[data-theme="void"] .status-dot.online {
  background: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.22), 0 0 13px rgba(129,140,248,0.6) !important;
}
[data-theme="void"] .input,
[data-theme="void"] .input-box,
[data-theme="void"] .input-lg {
  background: rgba(10,0,26,0.95) !important;
  border-color: rgba(129,140,248,0.2) !important;
  color: #eef2ff !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.45) !important;
}
[data-theme="void"] .input:focus,
[data-theme="void"] .input-box:focus,
[data-theme="void"] .input-lg:focus {
  border-color: #a5b4fc !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.24), inset 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="void"] .modal-overlay { background: rgba(0,0,0,0.82) !important; backdrop-filter: blur(5px) !important; }
[data-theme="void"] .modal {
  background: linear-gradient(160deg, rgba(16,0,42,0.99) 0%, rgba(6,0,18,1) 100%) !important;
  border: 1px solid rgba(129,140,248,0.24) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.88), inset 0 1px 0 rgba(165,180,252,0.07) !important;
}
[data-theme="void"] .stat-chip {
  background: rgba(12,0,32,0.88) !important;
  border-color: rgba(129,140,248,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(165,180,252,0.06), 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="void"] .add-device-card {
  background: rgba(10,0,26,0.55) !important;
  border: 2px dashed rgba(129,140,248,0.22) !important;
}
[data-theme="void"] .add-device-card:hover {
  background: rgba(18,0,48,0.78) !important;
  border-color: rgba(129,140,248,0.46) !important;
  box-shadow: 0 0 28px rgba(129,140,248,0.15) !important;
}
[data-theme="void"] .pref-card {
  background: linear-gradient(150deg, rgba(14,0,38,0.97), rgba(6,0,18,0.99)) !important;
  border-color: rgba(129,140,248,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(165,180,252,0.05) !important;
}
[data-theme="void"] .toggle input:checked + .toggle-slider { background: #818cf8 !important; box-shadow: 0 0 12px rgba(129,140,248,0.46) !important; }
[data-theme="void"] .dc-manage-btn {
  background: rgba(129,140,248,0.12) !important;
  border-color: rgba(129,140,248,0.3) !important;
  color: #a5b4fc !important;
}
[data-theme="void"] .dc-manage-btn:hover { background: rgba(129,140,248,0.22) !important; border-color: rgba(129,140,248,0.52) !important; }
[data-theme="void"] .sidebar-new-btn,
[data-theme="void"] .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #312e81 100%) !important;
  box-shadow: 0 4px 22px rgba(129,140,248,0.42), inset 0 1px 0 rgba(200,210,255,0.18) !important;
  border: 1px solid rgba(165,180,252,0.22) !important;
}
[data-theme="void"] .btn-primary:hover,
[data-theme="void"] .sidebar-new-btn:hover {
  background: linear-gradient(135deg, #818cf8 0%, #4338ca 100%) !important;
  box-shadow: 0 6px 30px rgba(129,140,248,0.56), inset 0 1px 0 rgba(200,210,255,0.22) !important;
  transform: translateY(-1px) !important;
}
[data-theme="void"] .btn-secondary { background: rgba(10,0,26,0.92) !important; border-color: rgba(129,140,248,0.3) !important; color: #a5b4fc !important; }
[data-theme="void"] .btn-ghost { color: #a5b4fc !important; }
[data-theme="void"] .btn-ghost:hover { background: rgba(129,140,248,0.1) !important; }