:root{
  --bg:#08090b;
  --bg-soft:#0d0f12;
  --panel:#14171b;
  --panel-strong:#1a1e23;
  --panel-hover:#20252b;
  --text:#ffffff;
  --text-soft:#e5e7eb;
  --muted:#9299a3;
  --red:#ed1b2f;
  --red-bright:#ff3347;
  --red-dark:#9f1020;
  --green:#3fe18e;
  --orange:#ffb547;
  --violet:#ae78ff;
  --border:#2b3037;
  --border-soft:rgba(255,255,255,.08);
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow:0 20px 60px rgba(0,0,0,.42);
  --shadow-red:0 0 0 1px rgba(237,27,47,.35),0 10px 35px rgba(237,27,47,.24);
  --safe-bottom:calc(92px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 85% -5%,rgba(237,27,47,.18),transparent 28%),
    radial-gradient(circle at 8% 28%,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(180deg,#090a0c 0%,#07080a 100%);
  font:17px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.005em;
  padding-bottom:var(--safe-bottom);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:76px;
  padding:14px 20px;
  padding-top:calc(14px + env(safe-area-inset-top));
  background:rgba(8,9,11,.86);
  backdrop-filter:blur(22px) saturate(130%);
  border-bottom:1px solid var(--border-soft);
}
.brand{
  position:relative;
  font-weight:950;
  font-size:1.05rem;
  letter-spacing:.15em;
  line-height:1;
  padding-left:16px;
}
.brand::before{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:5px;
  height:25px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--red-bright),var(--red-dark));
  box-shadow:0 0 18px rgba(237,27,47,.7);
}
.brand span{color:var(--red-bright)}
.subline{font-size:.76rem;color:var(--muted);margin-top:7px;letter-spacing:.025em}
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.08em;
  border:1px solid currentColor;
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.badge-online{color:var(--green);background:rgba(63,225,142,.08)}
.badge-offline{color:var(--red-bright);background:rgba(237,27,47,.09)}

main{max-width:980px;margin:auto;padding:20px 18px 32px}
.view{display:none;animation:viewIn .28s ease}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero-card,.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(28,32,37,.98),rgba(16,19,23,.98));
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.hero-card::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-105px;
  top:-135px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,27,47,.24),transparent 68%);
  pointer-events:none;
}
.hero-card{padding:26px 24px 28px;border-color:rgba(237,27,47,.18)}
.hero-card h1{
  max-width:720px;
  margin:.28em 0 .35em;
  font-size:clamp(2rem,6.2vw,3.65rem);
  line-height:1.03;
  letter-spacing:-.045em;
  font-weight:950;
}
.hero-card p:last-child{max-width:620px;color:var(--text-soft);margin-bottom:0}
.eyebrow{color:var(--red-bright);font-weight:950;letter-spacing:.13em;font-size:.72rem;margin:0}

h1,h2,h3{letter-spacing:-.025em}
h1,h2{margin-top:0}
h2{font-size:1.12rem;font-weight:900;margin-bottom:15px}
.hint{color:var(--muted);font-size:.9rem}
.section-title{display:flex;align-items:center;gap:13px;margin:4px 0 18px}
.section-title span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--red-bright),var(--red-dark));
  color:white;
  font-weight:950;
  box-shadow:0 8px 25px rgba(237,27,47,.32);
}
.section-title h1{margin:0;font-size:clamp(1.55rem,4vw,2.15rem);font-weight:950}

.grid{display:grid;gap:13px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-stack{display:grid;gap:14px}
label{display:grid;gap:8px;color:var(--text-soft);font-weight:800;font-size:.86rem;letter-spacing:.01em}
input,select,textarea{
  width:100%;
  min-height:52px;
  border:1px solid var(--border);
  background:#0b0d10;
  color:var(--text);
  border-radius:var(--radius-md);
  padding:14px 15px;
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s,transform .18s;
}
textarea{min-height:110px;resize:vertical}
input:hover,select:hover,textarea:hover{background:#0e1115;border-color:#3a414a}
input:focus,select:focus,textarea:focus{
  border-color:var(--red-bright);
  box-shadow:0 0 0 4px rgba(237,27,47,.14),0 0 24px rgba(237,27,47,.08);
  background:#101318;
}
input[readonly]{color:#c7cbd1;background:#111318}

.btn{
  position:relative;
  width:100%;
  min-height:54px;
  border:1px solid transparent;
  border-radius:15px;
  padding:15px 18px;
  font-weight:950;
  letter-spacing:.025em;
  cursor:pointer;
  margin-top:13px;
  background:#272c33;
  color:white;
  transition:transform .16s,filter .16s,box-shadow .16s,border-color .16s;
  touch-action:manipulation;
}
.btn:active{transform:scale(.985)}
.btn:hover{filter:brightness(1.08)}
.btn.glow{
  background:linear-gradient(135deg,var(--red-bright),var(--red-dark));
  color:#fff;
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow-red),inset 0 1px rgba(255,255,255,.18);
}
.btn.glow::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),transparent 45%);
  pointer-events:none;
}
.btn.secondary{border-color:rgba(237,27,47,.65);color:#fff;background:rgba(237,27,47,.08)}
.btn.danger{background:linear-gradient(135deg,#ff3850,#9c0d1d);color:white;box-shadow:0 10px 30px rgba(237,27,47,.25)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text-soft)}

.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.status-grid div{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#0f1216,#0a0c0f);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:18px;
}
.status-grid div::after{content:"";position:absolute;right:-30px;bottom:-30px;width:85px;height:85px;border-radius:50%;background:rgba(237,27,47,.08)}
.status-grid strong{display:block;font-size:2.3rem;line-height:1;color:var(--red-bright);font-weight:950;margin-bottom:8px}
.status-grid span{color:var(--muted);font-size:.82rem;font-weight:750}

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  overflow-x:auto;
  background:rgba(9,10,12,.93);
  backdrop-filter:blur(24px) saturate(145%);
  border-top:1px solid var(--border-soft);
  padding:9px 9px calc(9px + env(safe-area-inset-bottom));
  gap:5px;
  box-shadow:0 -15px 40px rgba(0,0,0,.38);
}
.bottom-nav button{
  position:relative;
  flex:1;
  min-width:76px;
  min-height:48px;
  background:transparent;
  color:var(--muted);
  border:0;
  padding:11px 8px;
  border-radius:13px;
  font-size:.7rem;
  font-weight:900;
  transition:.18s;
}
.bottom-nav button.active{color:#fff;background:rgba(237,27,47,.14);box-shadow:inset 0 0 0 1px rgba(237,27,47,.23)}
.bottom-nav button.active::after{content:"";position:absolute;left:28%;right:28%;bottom:5px;height:3px;border-radius:99px;background:var(--red-bright);box-shadow:0 0 11px rgba(237,27,47,.9)}

.control-card{border-left:5px solid var(--orange);transition:transform .18s,border-color .18s,background .18s}
.control-card:hover{transform:translateY(-2px);background:linear-gradient(145deg,var(--panel-hover),var(--panel))}
.control-card.done{border-left-color:var(--green);opacity:.86}
.control-card.later{border-left-color:var(--violet)}
.control-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.control-head h2{font-size:1.2rem;margin:.15rem 0 .3rem}
.control-number{font-size:.68rem;color:var(--red-bright);font-weight:950;letter-spacing:.12em}
.pill{padding:6px 10px;border-radius:999px;background:#0b0d10;border:1px solid var(--border-soft);color:var(--text-soft);font-size:.7rem;font-weight:850;white-space:nowrap}
.progress{height:9px;background:#08090b;border:1px solid var(--border-soft);border-radius:99px;overflow:hidden;margin:14px 0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--red-dark),var(--red-bright));box-shadow:0 0 16px rgba(237,27,47,.5);transition:width .3s ease}

.filter-row{display:flex;gap:8px;overflow:auto;margin-bottom:15px;padding-bottom:2px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--border);background:#101318;color:var(--muted);border-radius:999px;padding:10px 15px;font-weight:850;white-space:nowrap}
.chip.active{border-color:var(--red-bright);color:#fff;background:rgba(237,27,47,.14);box-shadow:0 0 17px rgba(237,27,47,.1)}

.toggle-question{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--border-soft)}
.toggle-question:last-child{border-bottom:0}
.toggle-actions{display:flex;gap:7px}
.toggle-actions button,.seg{border:1px solid var(--border);background:#0b0d10;color:var(--muted);border-radius:12px;padding:10px 14px;font-weight:900;transition:.16s}
.toggle-actions button.selected.yes,.seg.active{background:rgba(63,225,142,.13);border-color:var(--green);color:var(--green);box-shadow:0 0 17px rgba(63,225,142,.1)}
.toggle-actions button.selected.no{background:rgba(237,27,47,.13);border-color:var(--red-bright);color:var(--red-bright);box-shadow:0 0 17px rgba(237,27,47,.1)}
.segmented{display:flex;gap:9px}.seg{flex:1;min-height:48px}

.check-line{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border-soft);font-weight:750}
.check-line:last-child{border-bottom:0}
.check-line.ok{color:var(--green)}
.check-line.bad{color:var(--red-bright)}

canvas{width:100%;height:190px;background:#fff;border:3px solid #30343a;border-radius:16px;touch-action:none;box-shadow:inset 0 0 22px rgba(0,0,0,.08)}
.button-row{display:flex;gap:10px}.button-row .btn{flex:1}

dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(92vw,640px)}
dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(9px)}
.modal-card{background:linear-gradient(145deg,#1b1f24,#111418);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.modal-card h2{font-size:1.45rem;margin-bottom:0}

.toast{
  position:fixed;
  left:50%;
  bottom:110px;
  transform:translateX(-50%) translateY(28px);
  opacity:0;
  max-width:min(88vw,540px);
  background:#fff;
  color:#0b0c0e;
  padding:13px 18px;
  border-radius:13px;
  font-weight:900;
  box-shadow:0 18px 55px rgba(0,0,0,.5);
  transition:.24s;
  z-index:99;
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}

@media(max-width:650px){
  body{font-size:16px}
  main{padding:16px 13px 28px}
  .topbar{padding-left:15px;padding-right:15px}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .card,.hero-card{padding:18px;border-radius:21px}
  .hero-card h1{font-size:2.35rem}
  .bottom-nav button{min-width:70px;font-size:.66rem}
  .button-row{flex-direction:column}
  .toggle-question{grid-template-columns:1fr}
  .toggle-actions button{flex:1}
  .control-head{align-items:flex-start}
}

@media(min-width:900px){
  .bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(940px,calc(100% - 30px));bottom:12px;border:1px solid var(--border-soft);border-radius:20px;padding:8px;box-shadow:0 18px 55px rgba(0,0,0,.5)}
  body{padding-bottom:115px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}