:root {
  --bg: #02040A;
  --bg-grad: radial-gradient(1200px 600px at 50% -10%, #0B101C 0%, #02040A 60%);
  --panel: #0B101C;
  --panel-2: #10162A;
  --panel-border: #1c2338;
  --text: #F5F7FF;
  --muted: #687087;
  --muted-2: #4d5468;
  --accent: #00FF9D;
  --accent-rgb: 0, 255, 157;
  --accent-soft: rgba(0, 255, 157, 0.12);
  --danger: #ff5d6c;
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-grad), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.1px;
}

.icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}
.icon-lg { width: 28px; height: 28px; }
.icon-sm { width: 15px; height: 15px; }

/* Custom Room/Music/Automation entries have no matching SVG sprite —
   they show the user's actual emoji glyph instead. Sized/aligned to
   sit visually even with the 19px .icon SVGs used by built-ins. */
.icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: rgba(2,4,10,0.85);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 15px;
}
.brand span { color: var(--accent); }
.icon-btn {
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:active { background: var(--panel-2); color: var(--text); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.logout-form { margin: 0; }
.logout-form .icon-btn { border: none; background: transparent; cursor: pointer; }

/* Content */
.content { padding: 22px 18px 10px; flex: 1; }

.hero { text-align: center; padding: 20px 0 8px; }
.logo { font-size: 32px; letter-spacing: 5px; margin: 0; font-weight: 700; }
.sys-line {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: 0.5px;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.status-dot.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-dot.off { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

.bot-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 8px;
}
.bot-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px 8px 16px;
  transition: transform .1s ease, border-color .15s ease;
}
.bot-card:active { transform: scale(0.97); border-color: var(--muted-2); }
.bot-circle {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.bot-name {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 500;
}
.dot { width: 7px; height: 7px; border-radius: 50%; position: absolute; top: 12px; right: 12px; }
.dot.up { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot.down { background: var(--danger); }

.divider { border: none; border-top: 1px solid var(--panel-border); margin: 26px 0 20px; }

section.quick-control h2,
.panel h2 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.page-title {
  font-size: 21px;
  margin: 6px 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.page-title .icon { color: var(--accent); width: 22px; height: 22px; }
.bot-status {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bot-status .up { color: var(--accent); }
.bot-status .down { color: var(--danger); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qc-btn, .action-btn, .cmd-fire-btn {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.qc-btn .icon, .action-btn .icon, .cmd-fire-btn .icon { color: var(--muted); flex-shrink: 0; }
.qc-btn:active, .action-btn:active, .cmd-fire-btn:active { transform: scale(0.97); background: #141a2e; border-color: var(--muted-2); }

.btn-col { display: flex; flex-direction: column; gap: 10px; }
.action-btn.ghost { background: transparent; border: 1px solid var(--panel-border); color: var(--muted); }

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.health-card {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.health-card .icon { color: var(--accent); margin-bottom: 2px; }
.health-card span { color: var(--muted); font-size: 11.5px; letter-spacing: 0.5px; }
.health-card b { font-size: 16px; font-weight: 600; }

.cmd-table { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}
.cmd-row code { color: var(--accent); font-size: 11.5px; }
.cmd-row span:nth-child(2) { flex: 1; }
.cmd-emoji-btn {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  font-size: 17px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.cmd-emoji-btn:active { transform: scale(0.92); background: #141a2e; border-color: var(--accent); }
.panel .hint { font-size: 11.5px; margin: -6px 0 12px; }
.section-heading {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.section-heading .icon { color: var(--accent); width: 18px; height: 18px; }
.mini-btn {
  background: none; border: none; color: var(--danger);
  cursor: pointer; display: flex; align-items: center; padding: 4px;
}
.mini-btn-solid {
  background: var(--accent);
  color: #02040A;
  border: none;
  border-radius: 9px;
  width: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 1.5; }

/* Room / Music / Automation — editable panels */
.panel h2 { justify-content: space-between; }
.panel h2 > span:first-of-type { flex: 1; }
.add-icon-btn {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--accent);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.add-icon-btn:active { transform: scale(0.92); background: #141a2e; }
.qc-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.qc-wrap .qc-btn { flex: 1; }
.qc-edit-btn {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qc-edit-btn:active { transform: scale(0.92); background: #141a2e; border-color: var(--muted-2); }
.emoji-ico {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}
.action-btn.danger { color: var(--danger); border-color: var(--danger); margin-top: 4px; }

/* Tabbar */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  background: rgba(2,4,10,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--panel-border);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted-2);
  text-decoration: none;
  font-size: 10px;
}
.tab .icon { width: 20px; height: 20px; }
.tab.active { color: var(--accent); }
.tab span { font-size: 10px; letter-spacing: 0.3px; }

/* Toast */
.toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  max-width: 90%;
  text-align: center;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px;
  width: 88%;
  max-width: 360px;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-box h3 { margin: 0 0 4px; font-size: 15px; }
.modal-box input {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 11px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.btn-row { display: flex; gap: 10px; }
.btn-row .action-btn { flex: 1; justify-content: center; }

/* Terminal */
.term-output {
  background: #010205;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  height: 220px;
  overflow-y: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  color: #00FF9D;
  margin-bottom: 10px;
}
.term-input-row { display: flex; gap: 8px; }
.term-input-row .prompt { color: var(--accent); align-self: center; font-family: monospace; }
.term-input-row input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 11px;
  border-radius: var(--radius-sm);
  font-family: monospace;
}

/* ==========================================================================
   RYNX OS — Premium Glass / Space UI layer (cosmetic pass, v2)
   Floating glass cards, drifting space background, breathing icons,
   tap "wave" feedback, and a heartbeat-style ONLINE/OFFLINE core indicator.
   Nothing structural below this line — visuals only.
   ========================================================================== */

html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ---- Space background: slow drifting glow orbs behind everything ---- */
.bg-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.4;
  will-change: transform;
  animation: rynxDrift 24s ease-in-out infinite;
}
.bg-orb.o1 {
  width: 240px; height: 240px; top: -60px; left: -50px;
  background: radial-gradient(circle, rgba(0,255,157,0.55), rgba(0,255,157,0) 70%);
  animation-duration: 26s;
}
.bg-orb.o2 {
  width: 220px; height: 220px; bottom: 140px; right: -60px;
  background: radial-gradient(circle, rgba(0,255,157,0.28), rgba(0,255,157,0) 70%);
  animation-duration: 32s; animation-delay: -8s;
}
.bg-orb.o3 {
  width: 200px; height: 200px; top: 42%; left: 55%;
  background: radial-gradient(circle, rgba(0,255,157,0.18), rgba(0,255,157,0) 70%);
  animation-duration: 30s; animation-delay: -14s;
}
.bg-orb.o4 {
  width: 180px; height: 180px; bottom: -50px; left: 20%;
  background: radial-gradient(circle, rgba(0,255,157,0.25), rgba(0,255,157,0) 70%);
  animation-duration: 34s; animation-delay: -4s;
}
@keyframes rynxDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(22px,-26px) scale(1.08); }
  66% { transform: translate(-18px,18px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none; }
}

/* ---- Background particles: small drifting dots, layered over the orbs ---- */
.bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: rgba(0,255,157,0.8);
  box-shadow: 0 0 4px 1px rgba(0,255,157,0.5);
  opacity: 0;
  animation: rynxParticleFloat 14s linear infinite;
}
/* 14 particles, deterministic scattered positions/timings via nth-child */
.particle.p0  { left: 6%;  top: 82%; animation-duration: 16s; animation-delay: -1s;  }
.particle.p1  { left: 14%; top: 30%; animation-duration: 12s; animation-delay: -4s;  }
.particle.p2  { left: 22%; top: 64%; animation-duration: 18s; animation-delay: -9s;  }
.particle.p3  { left: 31%; top: 12%; animation-duration: 15s; animation-delay: -2s;  }
.particle.p4  { left: 40%; top: 88%; animation-duration: 13s; animation-delay: -7s;  }
.particle.p5  { left: 48%; top: 46%; animation-duration: 17s; animation-delay: -11s; }
.particle.p6  { left: 57%; top: 20%; animation-duration: 12s; animation-delay: -3s;  }
.particle.p7  { left: 65%; top: 70%; animation-duration: 19s; animation-delay: -6s;  }
.particle.p8  { left: 73%; top: 38%; animation-duration: 14s; animation-delay: -13s; }
.particle.p9  { left: 81%; top: 90%; animation-duration: 16s; animation-delay: -5s;  }
.particle.p10 { left: 88%; top: 24%; animation-duration: 13s; animation-delay: -10s; }
.particle.p11 { left: 10%; top: 55%; animation-duration: 20s; animation-delay: -8s;  }
.particle.p12 { left: 60%; top: 6%;  animation-duration: 15s; animation-delay: -12s; }
.particle.p13 { left: 92%; top: 60%; animation-duration: 18s; animation-delay: -4s;  }
@keyframes rynxParticleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-90px) scale(1.3); opacity: 0.6; }
  90%  { opacity: 0; }
  100% { transform: translateY(-180px) scale(0.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .particle { animation: none; opacity: 0; }
}

.app-shell { position: relative; z-index: 1; }
.topbar, .tabbar { position: sticky; z-index: 10; }
.tabbar { position: fixed; }

/* ---- Glass card treatment: transparent glass, border shine, inner shadow, depth ---- */
.panel, .bot-card, .health-card, .qc-btn, .action-btn, .action-box,
.cmd-emoji-btn, .cmd-fire-btn, .modal-box, .cmd-row {
  background-color: rgba(19, 23, 33, 0.5);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -16px 26px -20px rgba(0,0,0,0.7),
    0 10px 26px -14px rgba(0,0,0,0.55);
}
.bot-circle {
  background-color: rgba(22,27,39,0.6);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.01) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -8px 14px -10px rgba(0,0,0,0.6);
}
.panel { overflow: hidden; }
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 35%, rgba(0,255,157,0.4) 65%, transparent);
  opacity: 0.7;
}

/* ---- Floating icons — ONLY the main/hero icons (bot-circle, login mark).
   Everything else (button icons, panel headers, nav) stays still so
   buttons never look like they're "moving". ---- */
@keyframes rynxIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes rynxIconBreathe {
  0%, 100% { filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 0 rgba(0,255,157,0)); opacity: 0.82; }
  50% { filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px rgba(0,255,157,0.5)); opacity: 1; }
}
.icon-lg {
  animation: rynxIconFloat 3s ease-in-out infinite, rynxIconBreathe 3s ease-in-out infinite;
}
.bot-circle .icon { width: 26px; height: 26px; }

/* ---- Tap feedback: green wave pulse + shrink (shrink already via :active) ---- */
.qc-btn, .action-btn, .bot-card, .cmd-emoji-btn, .cmd-fire-btn, .add-icon-btn,
.qc-edit-btn, .mini-btn, .mini-btn-solid, .action-box {
  position: relative;
  overflow: hidden;
}
.qc-btn::after, .action-btn::after, .bot-card::after, .cmd-emoji-btn::after,
.cmd-fire-btn::after, .add-icon-btn::after, .qc-edit-btn::after, .mini-btn::after, .mini-btn-solid::after,
.action-box::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  background: radial-gradient(circle, rgba(0,255,157,0.95), rgba(0,255,157,0) 70%);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.tap-wave::after {
  animation: rynxWave 0.6s ease-out;
}
.tap-wave {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(0,255,157,0.45),
    0 0 20px 2px rgba(0,255,157,0.4) !important;
}
@keyframes rynxWave {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.9; }
  70% { opacity: 0.35; }
  100% { transform: translate(-50%,-50%) scale(22); opacity: 0; }
}

/* ---- Status orb: heartbeat-style ONLINE / OFFLINE indicator ---- */
.core-line { justify-content: center; gap: 10px; }
.core-tag { font-weight: 700; letter-spacing: 2.5px; font-size: 11px; color: var(--muted); }
.core-state { font-weight: 700; letter-spacing: 1.5px; font-size: 12.5px; }
.core-state.on { color: var(--accent); text-shadow: 0 0 12px rgba(0,255,157,0.55); }
.core-state.off { color: var(--danger); text-shadow: 0 0 12px rgba(255,93,108,0.4); }

.status-orb {
  position: relative;
  width: 10px; height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.orb-core {
  width: 7px; height: 7px;
  border-radius: 50%;
  z-index: 2;
  animation: rynxCoreBeat 2.4s ease-in-out infinite;
}
.status-orb.on .orb-core { background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 18px rgba(0,255,157,0.6); }
.status-orb.off .orb-core { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: none; }
.orb-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
}
.status-orb.on .orb-ring { animation: rynxHeartbeat 2.4s ease-out infinite; }
.status-orb.on .orb-ring.r2 { animation-delay: 1.2s; }
.status-orb.off .orb-ring { border-color: var(--danger); animation: none; opacity: 0; }
@keyframes rynxHeartbeat {
  0% { transform: scale(1); opacity: 0.55; }
  80% { transform: scale(2.8); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rynxCoreBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---- Boxed action grid: Control / Gotify / AI sections, same box language
   as Room / Music, instead of plain stacked buttons ---- */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.action-grid.single { grid-template-columns: 1fr; }
.action-box {
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  font-size: 12.5px;
  transition: transform .06s ease, border-color .15s ease;
}
.action-box .icon { color: var(--accent); }
.action-box:active { transform: scale(0.96); }

/* ---- Notify / Automation commands: boxed grid + edit gear, like Room/Music ---- */
.cmd-grid { margin-top: 4px; }
.cmd-wrap { position: relative; display: flex; align-items: stretch; gap: 6px; }
.cmd-wrap .cmd-fire-btn { flex: 1; }
.cmd-wrap .qc-edit-btn, .cmd-wrap .mini-btn {
  border-radius: var(--radius-sm);
  width: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cmd-wrap .mini-btn { background-color: rgba(255,93,108,0.06); }

@media (prefers-reduced-motion: reduce) {
  .icon, .orb-core, .orb-ring, .tap-wave::after { animation: none !important; }
}

/* ---- Login page ---- */
.login-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-box {
  width: 100%;
  max-width: 340px;
  background-color: rgba(11, 16, 28, 0.6);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: 32px 26px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -16px 26px -20px rgba(0,0,0,0.7),
    0 10px 26px -14px rgba(0,0,0,0.55);
  text-align: center;
}
.login-mark {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.login-logo { font-size: 24px; letter-spacing: 4px; margin: 0 0 2px; }
.login-sub { font-size: 13px; margin: 0 0 20px; }
.login-error {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--danger);
  font-size: 12.5px;
  margin: -8px 0 16px;
}
.login-form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.login-label { font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
.login-form input {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-submit { justify-content: center; margin-top: 18px; }

/* ---- Responsive: tablet & desktop ----
   Everything above is mobile-first and stays exactly as-is up to 640px.
   Past that, .app-shell/.tabbar were hard-locked to 480px, so on a
   tablet or desktop browser the whole dashboard sat as a narrow column
   with huge empty margins on both sides. These breakpoints widen the
   shell in steps and give the boxed grids (Quick Control, health
   stats, action grids) extra columns so the wider space is actually
   used instead of just stretched. */
@media (min-width: 640px) {
  .app-shell, .tabbar { max-width: 640px; }
  .content { padding-left: 26px; padding-right: 26px; }
}

@media (min-width: 900px) {
  .app-shell, .tabbar { max-width: 820px; }
  .content { padding-left: 34px; padding-right: 34px; padding-top: 26px; }
  .grid-2,
  .health-grid,
  .action-grid:not(.single) {
    grid-template-columns: repeat(3, 1fr);
  }
  .bot-row { gap: 18px; }
  .login-box { max-width: 380px; }
}

@media (min-width: 1280px) {
  .app-shell, .tabbar { max-width: 960px; }
  .grid-2,
  .health-grid,
  .action-grid:not(.single) {
    grid-template-columns: repeat(4, 1fr);
  }
}