:root[data-theme="dark"]{
  --bg:#000000;
  --panel:#161616;
  --panel-2:#1f1f1f;
  --panel-3:#262626;
  --border:#2c2c2c;
  --border-soft:#232323;
  --text:#f4f4f0;
  --text-dim:#8f8f8a;
  --text-faint:#5a5a56;
  --accent:#CCFF00;
  --accent-ink:#0a0d00;
  --accent-dim:rgba(204,255,0,.14);
  --accent-dim-2:rgba(204,255,0,.30);
  --danger:#ff5c5c;
  --scrim:rgba(0,0,0,.72);
  --shadow:0 12px 40px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --panel:#edeceA;
  --panel-2:#e4e3e0;
  --panel-3:#dad9d5;
  --border:#d2d1cc;
  --border-soft:#e0dfdb;
  --text:#141310;
  --text-dim:#67655f;
  --text-faint:#a3a19a;
  --accent:#a6d400;
  --accent-ink:#0a0d00;
  --accent-dim:rgba(140,180,0,.14);
  --accent-dim-2:rgba(140,180,0,.30);
  --danger:#c62d2d;
  --scrim:rgba(20,19,16,.45);
  --shadow:0 12px 32px rgba(20,19,16,.14);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  overscroll-behavior:none;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
button{font-family:inherit; color:inherit; cursor:pointer;}
input,textarea{font-family:inherit; color:inherit;}
a{color:inherit;}
.hidden{display:none !important;}
::-webkit-scrollbar{width:0;height:0;}

.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border-soft);
}
.icon-btn svg{width:17px;height:17px;}
.icon-btn:active{background:var(--panel-2);}

.btn{
  padding:12px 18px; border-radius:12px; border:1px solid var(--border-soft);
  background:var(--panel-2); font-size:13.5px; font-weight:600; text-align:center;
}
.btn.primary{background:var(--accent); color:var(--accent-ink); border:none;}
.btn.danger{background:transparent; color:var(--danger); border:1px solid rgba(255,92,92,.35);}
.btn:active{opacity:.8;}
.btn:disabled{opacity:.45; pointer-events:none;}
.btn.block{width:100%; display:block;}

.field{margin-bottom:16px;}
.field label{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); margin-bottom:7px; font-weight:600;
}
.field input, .field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--border-soft);
  border-radius:12px; padding:11px 12px; font-size:13.5px; outline:none;
}
.field input:focus, .field textarea:focus{border-color:var(--accent-dim-2);}
.field-hint{font-size:11px; color:var(--text-faint); margin-top:6px; line-height:1.5;}
.field-error{font-size:11.5px; color:var(--danger); margin-top:6px; display:none;}
.field-error.show{display:block;}

.brand{display:flex; align-items:center; gap:8px; min-width:0;}
.brand-mark{width:9px; height:9px; border-radius:2px; background:var(--accent); flex:0 0 auto; box-shadow:0 0 10px var(--accent-dim-2);}
.brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint);}

.theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-2); border:1px solid var(--border-soft);
  border-radius:14px; padding:12px 14px;
}
.theme-toggle-row .t-label{font-size:13.5px; font-weight:600;}
.theme-toggle-row .t-sub{font-size:11px; color:var(--text-dim); margin-top:2px;}
.switch{position:relative; width:46px; height:27px; border-radius:100px; background:var(--panel-3); border:1px solid var(--border-soft); flex:0 0 auto;}
.switch .knob{position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--text-dim); transition:transform .18s ease, background .18s ease;}
.switch.on{background:var(--accent-dim);}
.switch.on .knob{transform:translateX(19px); background:var(--accent);}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px);
  background:var(--panel-2); border:1px solid var(--accent-dim-2);
  color:var(--text); padding:10px 16px; border-radius:100px;
  font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow); z-index:200; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; max-width:86vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .tdot{width:7px;height:7px;border-radius:50%;background:var(--accent); flex:0 0 auto;}

.sheet-scrim{
  position:fixed; inset:0; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:140;
}
.sheet-scrim.show{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--panel); border-top:1px solid var(--border-soft);
  border-radius:22px 22px 0 0; box-shadow:var(--shadow);
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:141; max-height:86dvh; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sheet.show{transform:translateY(0);}
.sheet-grip-row{display:flex; justify-content:center; padding:10px 0 4px; flex:0 0 auto;}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--border);}
.sheet-head{display:flex; align-items:flex-start; justify-content:space-between; padding:6px 18px 12px; flex:0 0 auto; gap:10px;}
.sheet-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;}
.sheet-sub{font-size:11.5px; color:var(--text-dim); margin-top:3px;}
.sheet-scroll{overflow-y:auto; padding:0 18px 18px; flex:1 1 auto; min-height:0;}