:root{
  --bg:#12151c;
  --bg-panel:#191d26;
  --bg-panel-2:#20242f;
  --amber:#ffb238;
  --amber-soft:#ffcd7a;
  --amber-dim:#6b4a1f;
  --mint:#6fcf97;
  --coral:#e2685a;
  --text:#eeebe2;
  --text-muted:#8d919e;
  --border:rgba(255,178,56,0.16);
  --border-soft:rgba(238,235,226,0.08);
  --radius-s:3px;
  --radius-m:6px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  margin:0;
  font-weight:600;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* layout shells */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.narrow{max-width:420px;margin:0 auto;padding:0 24px;}

/* topbar */
.topbar{
  border-bottom:1px solid var(--border-soft);
  padding:18px 0;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{
  font-family:'JetBrains Mono',monospace;
  font-size:16px;
  font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.logo::before{
  content:"";
  width:8px;height:8px;
  background:var(--amber);
  border-radius:1px;
  box-shadow:0 0 8px var(--amber);
  display:inline-block;
}
.topbar-right{display:flex;align-items:center;gap:16px;}
.topbar-user{font-size:14px;color:var(--text-muted);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--radius-s);
  font-size:14px;font-weight:600;font-family:'Inter',sans-serif;
  cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-amber{background:var(--amber);color:#1a1305;}
.btn-amber:hover{background:var(--amber-soft);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-soft);}
.btn-ghost:hover{border-color:var(--border);}
.btn-danger{background:transparent;color:var(--coral);border-color:rgba(226,104,90,0.35);}
.btn-danger:hover{border-color:var(--coral);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
button.btn{font-family:inherit;}

/* forms */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;color:var(--text-muted);margin-bottom:6px;}
.field input,.field select{
  width:100%;background:var(--bg-panel-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-s);padding:11px 13px;color:var(--text);
  font-family:'Inter',sans-serif;font-size:14.5px;
}
.field input:focus,.field select:focus{border-color:var(--border);}
.alert{
  padding:12px 14px;border-radius:var(--radius-s);font-size:13.5px;margin-bottom:18px;
  border:1px solid rgba(226,104,90,0.35);color:var(--coral);background:rgba(226,104,90,0.08);
}
.alert-mint{border-color:rgba(111,207,151,0.35);color:var(--mint);background:rgba(111,207,151,0.08);}

/* auth card */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.auth-card{width:100%;max-width:400px;border:1px solid var(--border-soft);border-radius:var(--radius-m);background:var(--bg-panel);padding:36px;}
.auth-card h1{font-size:22px;margin-bottom:6px;}
.auth-card p.sub{color:var(--text-muted);font-size:14px;margin-bottom:26px;}
.auth-foot{margin-top:20px;font-size:13.5px;color:var(--text-muted);text-align:center;}
.auth-foot a{color:var(--amber);}

/* dashboard */
.page-head{padding:36px 0 28px;}
.page-head h1{font-size:26px;}
.page-head p{color:var(--text-muted);margin-top:8px;font-size:15px;}

.child-row{
  display:grid;grid-template-columns:auto 1fr auto auto auto;gap:20px;align-items:center;
  padding:20px;border:1px solid var(--border-soft);border-radius:var(--radius-m);
  background:var(--bg-panel);margin-bottom:12px;
}
.child-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-panel-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--amber);
}
.child-name{font-size:16px;font-weight:600;}
.child-meta{font-size:13px;color:var(--text-muted);margin-top:3px;}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;}
.status-dot.on{background:var(--mint);box-shadow:0 0 6px var(--mint);}
.status-dot.off{background:#4a4e5a;}
.timer-display{
  font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--amber);
  text-shadow:0 0 10px rgba(255,178,56,0.4);
}
.badge{
  font-size:11.5px;padding:3px 8px;border-radius:20px;border:1px solid var(--border);
  color:var(--amber);white-space:nowrap;
}
.badge-warn{border-color:rgba(226,104,90,0.4);color:var(--coral);}

.empty-state{
  border:1px dashed var(--border-soft);border-radius:var(--radius-m);
  padding:48px 24px;text-align:center;color:var(--text-muted);
}
.empty-state h3{color:var(--text);margin-bottom:8px;font-size:17px;}

.add-child-form{
  display:flex;gap:10px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border-soft);
}
.add-child-form input{flex:1;}

/* child detail */
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start;}
.panel{
  border:1px solid var(--border-soft);border-radius:var(--radius-m);
  background:var(--bg-panel);padding:24px;margin-bottom:20px;
}
.panel h3{font-size:16px;margin-bottom:16px;}
.panel-sub{color:var(--text-muted);font-size:13.5px;margin-bottom:16px;margin-top:-10px;}

.stat-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-soft);}
.stat-row:last-child{border-bottom:none;}
.stat-label{color:var(--text-muted);font-size:14px;}
.stat-value{font-family:'JetBrains Mono',monospace;font-size:14.5px;}

.chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:10px;}
.chart-bar-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;}
.chart-bar{width:100%;max-width:26px;background:linear-gradient(180deg,var(--amber-soft),var(--amber-dim));border-radius:2px 2px 0 0;min-height:2px;}
.chart-bar-label{font-size:10.5px;color:var(--text-muted);}

.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.action-grid form{margin:0;}
.action-grid .btn{width:100%;}

.list-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px;
}
.list-row:last-child{border-bottom:none;}
.list-row-meta{color:var(--text-muted);}

.pairing-code{
  font-family:'JetBrains Mono',monospace;font-size:26px;letter-spacing:0.12em;
  color:var(--amber);text-shadow:0 0 12px rgba(255,178,56,0.4);
  padding:16px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-s);
  margin-bottom:14px;
}

.rule-form{display:flex;gap:10px;align-items:flex-end;}
.rule-form .field{flex:1;margin-bottom:0;}

/* scrollable panel body + "Detail" modal — used by panels that can grow
   long (device list, recent activity, command history) so the page
   itself stays a reasonable length instead of scrolling forever. */
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.panel-head h3{margin-bottom:0;}
.panel-scroll{
  max-height:260px;overflow-y:auto;
  margin:0 -24px;padding:0 24px; /* bleed to the panel edge so the scrollbar doesn't look inset */
}
.panel-scroll::-webkit-scrollbar{width:6px;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:3px;}
.panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--border);}

.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(9,10,14,0.72);
  align-items:center;justify-content:center;padding:24px;z-index:100;
}
.modal-backdrop.is-open{display:flex;}
.modal-box{
  width:100%;max-width:520px;max-height:min(640px,86vh);
  background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-m);
  padding:24px;display:flex;flex-direction:column;
}
.modal-box .panel-head{flex-shrink:0;}
.modal-box .panel-scroll{max-height:none;flex:1;overflow-y:auto;margin:0 -24px;padding:0 24px;}
.modal-close{
  background:transparent;border:none;color:var(--text-muted);font-size:22px;line-height:1;
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-s);
}
.modal-close:hover{color:var(--text);background:var(--bg-panel-2);}

@media (max-width:820px){
  .detail-grid{grid-template-columns:1fr;}
  .child-row{grid-template-columns:auto 1fr;row-gap:12px;}
  .action-grid{grid-template-columns:1fr;}
}