:root{
  --bg: #1a1712;
  --panel: #211d17;
  --panel-2: #2a251d;
  --line: #3a3327;
  --ink: #ece4d3;
  --ink-dim: #9c9182;
  --accent: #e8a33d;
  --accent-2: #c96a4e;
  --ok: #7fae6f;
  --danger: #c9584e;
  --mono: 'SF Mono', 'Consolas', 'Menlo', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }

/* ---------- Navbar (shared) ---------- */
header.topbar{
  display:flex; align-items:center; gap:14px;
  padding:10px 18px;
  background: var(--panel);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.logo{
  display:flex; align-items:center; gap:9px;
  font-family: var(--mono);
  font-weight:700; letter-spacing:0.5px;
  font-size:15px;
  text-decoration:none;
  color: var(--ink);
  cursor:pointer;
  background:none; border:none;
}
.logo .dots{
  display:grid; grid-template-columns: repeat(3,6px); grid-template-rows: repeat(3,6px); gap:2px;
}
.logo .dots div{ background: var(--accent); }
.logo .dots div:nth-child(2), .logo .dots div:nth-child(4), .logo .dots div:nth-child(6), .logo .dots div:nth-child(8){ background: var(--accent-2); }
.logo .dots div:nth-child(5){ background: var(--ink); }
header.topbar .sep{ width:1px; height:22px; background:var(--line); }
header.topbar .status{ font-family: var(--mono); font-size:12px; color: var(--ink-dim); }
header.topbar .spacer{ flex:1; }

/* ---------- Buttons ---------- */
button{
  font-family: var(--sans); cursor:pointer;
  background: var(--panel-2); color: var(--ink);
  border:1px solid var(--line); border-radius:5px;
  padding:8px 10px; font-size:12.5px;
  transition: all .12s ease;
}
button:hover{ border-color: var(--accent); color:var(--accent); }
button:active{ transform: translateY(1px); }
button.active{
  background: var(--accent); color:#1a1712; border-color:var(--accent); font-weight:600;
}
button.primary{
  background: var(--accent-2); border-color:var(--accent-2); color:#fff; font-weight:600;
}
button.primary:hover{ filter:brightness(1.1); color:#fff; border-color:var(--accent-2); }
button.danger{ border-color: var(--danger); color: var(--danger); background:transparent; }
button.danger:hover{ background: var(--danger); color:#fff; }
button.block{ width:100%; }
button:disabled{ opacity:.4; cursor:not-allowed; }
button:disabled:hover{ border-color:var(--line); color:var(--ink); }

/* ---------- Inputs ---------- */
input[type=number], input[type=text]{
  background: var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:5px;
  padding:9px 10px; font-family:var(--mono); font-size:13px;
  width:100%;
}
input[type=number]:focus, input[type=text]:focus{ outline:none; border-color:var(--accent); }
label.lbl{ font-size:11px; color:var(--ink-dim); display:block; margin-bottom:4px; }

.section-title{
  font-family: var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--accent); margin:0 0 8px 0; display:flex; align-items:center; gap:6px;
}
.section-title::before{ content:''; width:8px; height:1px; background:var(--accent); }

/* ---------- Modal (shared) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(10,8,5,0.7);
  display:none; align-items:center; justify-content:center; z-index:100;
  backdrop-filter: blur(2px);
}
.modal-backdrop.open{ display:flex; }
.modal{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  width:340px;
  max-width:90vw;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.modal h2{
  margin:0 0 4px 0; font-size:16px; font-family: var(--mono);
}
.modal p.desc{ margin:0 0 18px 0; font-size:12px; color:var(--ink-dim); }
.modal .field{ margin-bottom:14px; }
.modal .res-row{ display:flex; gap:8px; }
.modal .res-row > div{ flex:1; }
.modal .presets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.modal .presets button{ flex:1; min-width:44px; padding:6px 4px; font-size:11px; }
.modal .actions{ display:flex; gap:8px; margin-top:20px; }
.modal .actions button{ flex:1; padding:10px; }
.modal .error-text{ color: var(--danger); font-size:11px; margin-top:6px; min-height:14px; }

/* ---------- Toggle switch (shared) ---------- */
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.toggle-row .switch{
  width:36px; height:20px; border-radius:10px; background:var(--bg);
  border:1px solid var(--line); position:relative; cursor:pointer; flex-shrink:0;
}
.toggle-row .switch::after{
  content:''; position:absolute; width:14px; height:14px; border-radius:50%;
  background: var(--ink-dim); top:2px; left:2px; transition: all .15s ease;
}
.toggle-row .switch.on{ border-color:var(--accent); }
.toggle-row .switch.on::after{ background: var(--accent); left:18px; }

.field-sub{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);
}
.field-sub.hidden{ display:none; }
.field-sub .hint-text{ font-size:10.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5; }