/* Midnight Nightlife OS · demo interactiva */
body.demo{overflow:hidden;height:100vh;height:100dvh}
.dbanner{position:fixed;left:0;right:0;top:0;z-index:60;height:30px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;background:repeating-linear-gradient(135deg,#2A1A00 0 14px,#3A2400 14px 28px);border-bottom:1px solid rgba(255,181,71,.5);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#FFCB7A;white-space:nowrap;overflow:hidden}
.dbanner small{font-weight:500;letter-spacing:.02em;color:#E8C690;text-overflow:ellipsis;overflow:hidden}
.dtop{position:fixed;left:0;right:0;top:30px;z-index:50;height:60px;display:flex;align-items:center;gap:14px;padding:0 18px;background:rgba(6,6,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,182,92,.16)}
.dtop .brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}.dtop .brand img{width:36px;height:36px}
.dtop .brand b{display:block;font-size:12.5px;letter-spacing:.24em;white-space:nowrap}.dtop .brand small{display:block;font-size:10px;letter-spacing:.2em;color:var(--gold);white-space:nowrap}
.dctl{display:flex;align-items:center;gap:10px;margin-left:auto}
.sel{display:flex;flex-direction:column;gap:1px}.sel span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2)}
.sel select{background:rgba(255,255,255,.04);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font:600 13px var(--f)}
.sel select option{background:#111}
.btn.xs{min-height:34px;padding:6px 14px;font-size:11.5px}
.exit{border-color:rgba(255,92,122,.55)!important;color:#FFB3C1}
.dwrap{position:fixed;left:0;right:0;top:90px;bottom:0;display:grid;grid-template-columns:236px minmax(0,1fr)}
.dside{overflow-y:auto;padding:14px 10px 30px;border-right:1px solid rgba(226,182,92,.12);background:rgba(8,7,14,.6)}
.dside h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mu2);margin:14px 10px 6px}
.dside a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:13.5px;color:#C9C5D6}
.dside a:hover{background:rgba(255,255,255,.04)}
.dside a[aria-current="page"]{background:linear-gradient(90deg,rgba(226,182,92,.16),rgba(138,92,255,.08));color:var(--gold2);box-shadow:inset 2px 0 0 var(--gold)}
.dside a i{width:7px;height:7px;border-radius:50%;background:var(--mu2)}.dside a[aria-current="page"] i{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.dside .cnt{margin-left:auto;font-size:11px;font-weight:700;color:#16110A;background:var(--gold);border-radius:999px;padding:1px 7px}
.dmain{overflow-y:auto;padding:22px 26px 60px}
.vh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.vh h1{font-size:26px;letter-spacing:-.01em}.vh .kick{font-size:10.5px}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.card{background:var(--panel);border:1px solid rgba(226,182,92,.16);border-radius:16px;padding:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:0}
.card h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi{padding:14px 16px}.kpi small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}.kpi strong{display:block;font-size:24px;margin-top:4px;font-variant-numeric:tabular-nums}.kpi em{font-style:normal;font-size:11px;color:var(--mu2)}
.kpi.hl{border-color:rgba(226,182,92,.45);background:linear-gradient(140deg,rgba(226,182,92,.1),rgba(20,18,34,.6))}
.kpi.warn strong{color:#FFCB7A}.kpi.bad strong{color:#FF9DB0}.kpi.ok strong{color:#8BF0C4}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;border-bottom:1px solid rgba(255,255,255,.08)}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.bars i{display:block;width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold2),rgba(138,92,255,.35));transition:height .8s}
.bars i.fc{background:repeating-linear-gradient(135deg,rgba(185,163,255,.5) 0 5px,rgba(185,163,255,.15) 5px 10px)}
.bars small{font-size:10px;color:var(--mu2);white-space:nowrap}
.hb{display:grid;gap:8px}.hb div{display:grid;grid-template-columns:minmax(80px,140px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.hb b{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--pur))}.hb span{color:var(--mu);font-variant-numeric:tabular-nums}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu2);font-weight:600;padding:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.tbl td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tscroll{overflow-x:auto}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap}
.p-ok{color:#8BF0C4;border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.08)}.p-warn{color:#FFCB7A;border-color:rgba(255,181,71,.45);background:rgba(255,181,71,.08)}
.p-bad{color:#FF9DB0;border-color:rgba(255,92,122,.5);background:rgba(255,92,122,.08)}.p-pur{color:var(--pur2);border-color:rgba(138,92,255,.5);background:rgba(138,92,255,.1)}.p-mu{color:var(--mu);border-color:rgba(167,163,181,.3)}
.p-blue{color:#9BDCFF;border-color:rgba(79,195,255,.45);background:rgba(79,195,255,.08)}
.mini{padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;font-weight:600}
.mini:hover{border-color:var(--gold)}.mini.g{background:linear-gradient(120deg,#B88B3A,#F6D894);color:#16110A;border-color:transparent}.mini:disabled{opacity:.4;cursor:not-allowed}
.feed{display:grid;gap:8px;max-height:320px;overflow-y:auto}.feed div{display:flex;gap:10px;font-size:13px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);animation:fin .5s}
.feed time{color:var(--mu2);font-size:11.5px;flex:0 0 44px;font-variant-numeric:tabular-nums}
@keyframes fin{from{opacity:0;transform:translateY(-6px)}}
.ai{border-color:rgba(138,92,255,.4);background:linear-gradient(150deg,rgba(138,92,255,.14),rgba(20,18,34,.6))}
.ai li{list-style:none;position:relative;padding:8px 0 8px 22px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.05)}.ai li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#B9A3FF 30%,#8A5CFF)}
.note{font-size:12.5px;color:#FFCB7A;padding:10px 12px;border:1px solid rgba(255,181,71,.3);border-radius:12px;background:rgba(255,181,71,.05)}
.note.v{color:#D9CCFF;border-color:rgba(138,92,255,.35);background:rgba(138,92,255,.06)}
.muted{color:var(--mu);font-size:13px}
.floorwrap{position:relative;padding:12px;border-radius:16px;overflow:hidden;background:#0A090F;border:1px solid rgba(255,255,255,.08)}
.floorctl{position:absolute;left:12px;top:12px;z-index:5;display:flex;gap:6px;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}.dl dt{color:var(--mu)}.dl dd{font-weight:600}
.phone-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.phone{flex:0 0 auto;width:360px;max-width:100%;height:720px;border-radius:44px;padding:14px;background:linear-gradient(145deg,#2A2A33,#0B0B10);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 0 2px #000}
.scr{position:relative;height:100%;border-radius:32px;overflow:hidden;background:radial-gradient(500px 300px at 80% 0,rgba(138,92,255,.22),transparent 60%),#07060D;display:flex;flex-direction:column}
.scr-h{display:flex;align-items:center;gap:8px;padding:30px 18px 12px;border-bottom:1px solid rgba(226,182,92,.15)}.scr-h img{width:28px;height:28px}.scr-h b{font-size:11px;letter-spacing:.22em}.scr-h small{display:block;font-size:9px;letter-spacing:.2em;color:var(--gold)}
.scr-b{flex:1;overflow-y:auto;padding:16px 16px 22px;display:flex;flex-direction:column;gap:12px}
.scr .card{padding:13px;border-radius:14px}
.scr .big{font-size:20px;font-weight:700}
.pbtn{width:100%;min-height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:700;font-size:14px;letter-spacing:.04em}
.pbtn.g{background:linear-gradient(120deg,#B88B3A,#F6D894 45%,#E2B65C);color:#16110A;border:0}.pbtn.v{background:rgba(138,92,255,.2);border-color:rgba(138,92,255,.6)}
.pbtn.ok{background:linear-gradient(120deg,#1E8F5E,#3DDC97);color:#03140C;border:0}.pbtn.red{border-color:rgba(255,92,122,.6);color:#FF9DB0;background:rgba(255,92,122,.08)}
.pbtn:disabled{opacity:.35;cursor:not-allowed}
.prod{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.prod .ic{flex:0 0 40px;height:40px;border-radius:10px;background:linear-gradient(160deg,rgba(226,182,92,.35),rgba(138,92,255,.25));display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--gold2)}
.prod div{flex:1;min-width:0}.prod b{display:block;font-size:13.5px}.prod small{color:var(--mu);font-size:11.5px}
.qty{display:flex;align-items:center;gap:6px}.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-weight:700}
.okbox{text-align:center;padding:18px 12px;border-radius:16px;border:1px solid rgba(61,220,151,.45);background:rgba(61,220,151,.07)}.okbox b{display:block;font-size:19px;color:#8BF0C4;margin-bottom:6px}.okbox p{font-weight:700;font-size:13px;letter-spacing:.04em}
.small{font-size:10.5px;line-height:1.5;color:var(--mu)}
.trk{display:grid;gap:6px}.trk div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mu2)}.trk div::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--mu2)}
.trk div.on{color:var(--tx)}.trk div.on::before{border-color:var(--ok);background:var(--ok)}.trk div.bad{color:#FF9DB0}.trk div.bad::before{border-color:var(--bad);background:var(--bad)}
.srv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;display:grid;gap:7px}.srv div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(255,255,255,.08);padding-bottom:6px}.srv span{color:var(--mu)}
.kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ocard{padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);display:grid;gap:8px;animation:fin .4s}
.ocard.hot{border-color:rgba(226,182,92,.55);box-shadow:0 0 20px rgba(226,182,92,.15)}
.ocard header{display:flex;justify-content:space-between;align-items:center;gap:8px}.ocard ul{list-style:none;font-size:13px}.ocard li{display:flex;justify-content:space-between}
.ocard .tmr{font-variant-numeric:tabular-nums;font-size:12px;color:var(--mu)}
.meter{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}.meter b{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--gold),var(--bad));transition:width .8s}
.cams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cams div{aspect-ratio:16/9;border-radius:12px;border:1px dashed rgba(167,163,181,.35);display:grid;place-items:center;font-size:12px;color:var(--mu2);text-align:center;padding:8px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chat{display:grid;gap:10px}.chat .q{justify-self:end;max-width:85%;padding:9px 12px;border-radius:14px 14px 2px 14px;background:rgba(226,182,92,.14);font-size:13.5px}.chat .a{max-width:92%;padding:10px 12px;border-radius:14px 14px 14px 2px;background:rgba(138,92,255,.14);border:1px solid rgba(138,92,255,.3);font-size:13.5px}
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}.toggle input{width:40px;height:22px;accent-color:var(--gold)}
.tour{position:fixed;z-index:80;max-width:340px;padding:16px;border-radius:16px;background:#130F22;border:1px solid var(--gold);box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 9999px rgba(0,0,0,.45);font-size:14px}
.tour footer{display:flex;align-items:center;gap:8px;margin-top:12px}.tour footer span{margin-right:auto;font-size:12px;color:var(--mu)}
.hl-el{position:relative;z-index:79;box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(226,182,92,.5)!important;border-radius:14px}
.toast{position:fixed;right:18px;bottom:18px;z-index:90;max-width:360px;padding:12px 16px;border-radius:14px;background:#151024;border:1px solid var(--line);box-shadow:var(--sh);font-size:13.5px;animation:fin .3s}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g21,.g12{grid-template-columns:1fr}}
@media (max-width:860px){
  .dwrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .dside{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:8px;border-right:0;border-bottom:1px solid rgba(226,182,92,.12)}
  .dside h4{display:none}.dside a{flex:0 0 auto;white-space:nowrap;padding:7px 11px;font-size:12.5px}.dside .cnt{margin-left:4px}
  .dmain{padding:16px 14px 60px}.dtop{height:auto;min-height:60px;flex-wrap:wrap;padding:8px 12px;gap:8px}.dtop .brand small{display:none}
  .dctl{margin-left:0;width:100%;flex-wrap:wrap}.dwrap{top:var(--th,150px)}.kan{grid-template-columns:1fr}.g2{grid-template-columns:1fr}.cams{grid-template-columns:1fr 1fr}
  .dbanner small{display:none}
}
@media (max-width:420px){.phone{width:100%;height:660px;border-radius:36px;padding:10px}.g4{grid-template-columns:1fr 1fr}.kpi strong{font-size:19px}}
select.mini,input.mini{color:var(--tx);font:600 12.5px var(--f)}select.mini option{background:#111;color:#eee}
.vh h1{font-family:var(--fd);font-size:34px;font-weight:600}.btn.xs{text-transform:none;letter-spacing:.01em;font-size:13px}
.floorctl{position:absolute;right:14px;top:14px;left:auto;z-index:5}