:root {
  --bg:#06080f; --panel:#0f1320; --text:#e8ecf7; --muted:#9ea5bf;
  --accent:#d82036; --accent2:#2d6dff; --shadow:0 18px 48px rgba(0,0,0,.45);
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Montserrat",Arial,sans-serif;
  background:#06080f;
  color:var(--text);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(circle at 25% 20%,rgba(45,109,255,.14),transparent 32%),
    radial-gradient(circle at 78% 30%,rgba(216,32,54,.12),transparent 32%),
    radial-gradient(circle at 40% 75%,rgba(45,109,255,.08),transparent 28%),
    linear-gradient(140deg,#090c14 0%,#0b1020 60%,#080b14 100%);
  z-index:-1;
}
a{color:var(--accent2);text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:22px 16px;}
.card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,0.03);
}
.btn{
  border:none;border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
  color:#fff;
  cursor:pointer;
  transition:transform .12s,box-shadow .12s,filter .12s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  gap:6px;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.35);filter:brightness(1.03);}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ff4d6d);}
.btn-secondary{background:linear-gradient(135deg,#1a2235,var(--accent2));}
.role-toggle{min-width:140px;justify-content:center;}
.role-toggle.active{background:linear-gradient(135deg,var(--accent2),#5c8dff);box-shadow:0 12px 26px rgba(45,109,255,.35);color:#fff;}
@media(max-width:720px){
  .role-toggle{flex:1 1 48%; text-align:center; justify-content:center;}
}
form button.btn{height:44px;}
.alert-dot{position:relative;}
.alert-dot .dot{position:absolute;top:-6px;right:-6px;width:10px;height:10px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 4px rgba(255,77,109,0.25);}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #202a3c;
  background:#0c101a;
  color:var(--text);
  margin-top:6px;
  transition:border .12s,box-shadow .12s,background .12s;
}
.input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(45,109,255,.2);background:#0f1522;}
.input.err{border-color:var(--accent);box-shadow:0 0 0 2px rgba(216,32,54,.25);}
label{display:block;font-size:13px;color:var(--muted);margin-top:8px;}
.row{display:flex;gap:10px;align-items:center;}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;}
table{width:100%;border-collapse:collapse;color:var(--text);font-size:14px;}
th,td{padding:10px;border-bottom:1px solid #1f2433;text-align:left;}
.sort-link{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;}
.sort-link .arrow{font-size:11px;color:var(--muted);}
.sort-link:hover{color:var(--accent2);}
.badge{padding:5px 9px;border-radius:999px;font-size:12px;background:#1f2433;color:var(--muted);}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(30px);background:var(--panel);padding:12px 16px;border-radius:12px;opacity:0;transition:all .25s ease;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.05);}
.toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
.pill{display:inline-block;padding:6px 10px;border-radius:12px;font-size:12px;background:#1f2536;color:var(--muted);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hint{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1f2536;color:var(--muted);font-weight:700;font-size:12px;margin-left:6px;cursor:pointer;vertical-align:middle;transition:background .12s,color .12s,box-shadow .12s;}
.hint:hover,.hint.active{background:var(--accent2);color:#fff;box-shadow:0 6px 14px rgba(45,109,255,.35);}
.hint-bubble{
  position:fixed;
  z-index:9999;
  max-width:260px;
  padding:10px 12px;
  border-radius:10px;
  background:#12192b;
  color:var(--text);
  font-size:13px;
  line-height:1.4;
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.input-error{
  position:fixed;
  z-index:9999;
  max-width:240px;
  padding:8px 10px;
  border-radius:10px;
  background:#2e1b24;
  color:#ffb8c4;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 1px rgba(255,84,120,.35);
  border:1px solid rgba(255,84,120,.6);
  pointer-events:none;
}
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9000;
}
.modal.active{display:flex;}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
}
.modal-dialog{
  position:relative;
  background:var(--panel);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
  width:100%;
  max-width:520px;
  border:1px solid rgba(255,255,255,0.05);
  z-index:1;
}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.modal-close{cursor:pointer;font-size:18px;color:var(--muted);}
.slider-wrap{margin-top:10px;}
.slider-label{font-size:13px;color:var(--muted);margin-bottom:4px;}
.slider{
  position:relative;
  height:48px;
  background:#0c101a;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
}
.slider-large{height:52px; border-radius:14px;}
.slider input[type=range]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  background:transparent;
  position:absolute;
  inset:0;
  margin:0;
}
.slider::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--accent2),#5c8dff);
  width:0%;
  transition:width .15s;
}
.slider.filled::before{width:100%;}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:72px;height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent2),#7aa2ff);
  box-shadow:0 10px 22px rgba(45,109,255,.35),0 0 0 2px rgba(0,0,0,0.35);
  border:1px solid #0b1020;
  cursor:pointer;
  margin-top:3px;
  animation: slider-pulse 1.6s ease-in-out infinite;
}
.slider input[type=range]::-moz-range-thumb{
  width:72px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),#7aa2ff);border:1px solid #0b1020;box-shadow:0 10px 22px rgba(45,109,255,.35),0 0 0 2px rgba(0,0,0,0.35);cursor:pointer;margin-top:3px;animation: slider-pulse 1.6s ease-in-out infinite;
}

@keyframes slider-pulse{
  0%{box-shadow:0 10px 22px rgba(45,109,255,.35),0 0 0 2px rgba(0,0,0,0.35),0 0 0 0 rgba(92,141,255,0.4);}
  60%{box-shadow:0 10px 22px rgba(45,109,255,.35),0 0 0 2px rgba(0,0,0,0.35),0 0 0 18px rgba(92,141,255,0);}
  100%{box-shadow:0 10px 22px rgba(45,109,255,.35),0 0 0 2px rgba(0,0,0,0.35),0 0 0 0 rgba(92,141,255,0);}
}

.plate-preview{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:10px;
  background:#0c101a;
}
.plate-preview .input{
  background:#141a26;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:100%;}
.slider input[type=range]::-moz-range-track{height:100%;background:transparent;}
@media(max-width:720px){.grid-2{grid-template-columns:1fr;}.row-between{flex-direction:column;align-items:flex-start;}.wrap{padding:18px 12px;}}