*{box-sizing:border-box}
body{font-family:system-ui;margin:0;background:#111318;color:#e8e8e8}
.wrap{max-width:980px;margin:24px auto;padding:0 14px 28px}
.card{background:#1a1f28;border:1px solid #2c3442;border-radius:10px;padding:16px;margin:10px 0}
input,textarea,button,select{background:#0f131a;color:#e8e8e8;border:1px solid #324056;border-radius:8px;padding:10px}
input,textarea,select{width:100%}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:10px}
.cols-2{grid-template-columns:1fr 1fr}
.muted{color:#9aa3b2;font-size:.9rem}
.item{border:1px solid #2c3442;border-radius:8px;padding:10px;margin:8px 0}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.danger{border-color:#7a2c2c;background:#2b1313}
.toast-box{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:20;max-width:min(360px,calc(100vw - 32px))}
.toast{border:1px solid #3b4a60;background:#151b25;color:#f1f5f9;border-radius:8px;padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.toast.error{border-color:#7a2c2c;background:#2b1313}
.toast.success{border-color:#2f6b44;background:#122519}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:30;padding:16px}
.modal{width:min(420px,100%);background:#1a1f28;border:1px solid #3b4a60;border-radius:8px;padding:16px}
.help{display:inline-grid;place-items:center;width:19px;height:19px;border:1px solid #53657e;border-radius:999px;color:#cbd5e1;background:#101620;font-size:.78rem;font-weight:700;cursor:help}
.help-popover{position:fixed;width:260px;max-width:calc(100vw - 24px);padding:9px 10px;border:1px solid #40516c;border-radius:8px;background:#0b0f16;color:#e8e8e8;font-weight:400;line-height:1.35;text-align:left;z-index:100;box-shadow:0 12px 26px rgba(0,0,0,.35);pointer-events:none}
.topnav{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.navlinks{display:flex;gap:8px;flex-wrap:wrap}
.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.preset-row button{padding:7px 9px}
@media (max-width:768px){
  .wrap{margin:10px auto;padding:0 10px 20px}
  .cols-2{grid-template-columns:1fr}
  input,textarea,button,select{font-size:16px}
  .actions{width:100%}
  .actions button{flex:1}
  .topnav{align-items:stretch}
  .navlinks,.navlinks button{width:100%}
}