/* gater - borstat stal / aluminium tema */
:root{
  --bg1:#202327;--bg2:#101214;--txt:#eef1f4;--mut:#a3acb6;--edge:#555c64;--edge2:rgba(255,255,255,.22);
  --c1:#454b52;--c2:#2d3136;--in1:#14161a;--in2:#22262b;
  --acc1:#49e06c;--acc2:#1fa845;--acct:#ffffff;--accedge:#157a31;--accglow:rgba(57,232,100,.38);
  --ok:#41e07a;--bad:#ff5a5a;--warn:#ffd24a;--off:#5d656e;
  --sh:0 12px 26px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg2)}
body{
  margin:0;min-height:100vh;color:var(--txt);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.09),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,rgba(0,0,0,.2) 2px 4px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 2px,rgba(0,0,0,.15) 2px 4px),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
}
.wrap{max-width:760px;margin:0 auto}
h1,h2,h3{margin:0;letter-spacing:.01em}
.brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:18px}
.sub{color:var(--mut);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* appbar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.bar .ttl{display:flex;flex-direction:column;line-height:1.15}
.icons{display:flex;gap:10px}
.ib{
  width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--txt);text-decoration:none;cursor:pointer;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 var(--edge2),0 3px 8px rgba(0,0,0,.25);
}
.ib:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.ib svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ib b{font-size:19px}

/* cards */
.card{
  border:1px solid var(--edge);border-radius:18px;padding:16px;margin:14px 0;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 var(--edge2),var(--sh);
}
.card h2{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.inset{
  background:linear-gradient(180deg,var(--in1),var(--in2));border:1px solid var(--edge);border-radius:12px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:12px;border:1px solid var(--edge);font:600 15px/1 inherit;cursor:pointer;color:var(--txt);
  background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 var(--edge2),0 3px 8px rgba(0,0,0,.2);
  text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5}
.btn.primary{
  color:var(--acct);text-shadow:0 1px 2px rgba(0,0,0,.45);border-color:var(--accedge);
  background:linear-gradient(180deg,var(--acc1),var(--acc2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px var(--accglow);
}
.btn.danger{color:var(--bad)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* camera */
.cam{
  position:relative;aspect-ratio:4/3;max-width:760px;margin:4px auto 0;border-radius:16px;overflow:hidden;background:#05070a;
  border:1px solid var(--edge);box-shadow:inset 0 0 0 3px rgba(0,0,0,.55),var(--sh);
}
.cam img{width:100%;height:100%;object-fit:contain;display:block}
.ov{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:9px 12px;
  font:600 14px/1.2 ui-monospace,Menlo,Consolas,monospace;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,1px 1px 2px #000;pointer-events:none}
.cam .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cbd3dc;font-size:14px;pointer-events:none}

/* status LEDs */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{padding:11px 8px;text-align:center;border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 var(--edge2),0 4px 10px rgba(0,0,0,.18)}
.stat small{display:block;color:var(--mut);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.stat b{display:inline-flex;align-items:center;gap:7px;margin-top:3px;font-size:15px}
.led{width:10px;height:10px;border-radius:50%;background:var(--off);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.s-closed .led{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.s-open .led{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.s-moving .led{background:var(--warn);box-shadow:0 0 8px var(--warn);animation:bl 1s infinite}
@keyframes bl{50%{opacity:.35}}

#go{width:100%;padding:22px;font-size:19px;letter-spacing:.04em;border-radius:18px}
.toast{text-align:center;color:var(--mut);min-height:22px;font-size:14px;margin:8px 0}

/* forms */
label.f{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:14px 0 5px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--txt);padding:12px;border-radius:11px;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--in1),var(--in2));box-shadow:inset 0 2px 5px rgba(0,0,0,.3);appearance:none;-webkit-appearance:none;
}
select{background-image:linear-gradient(180deg,var(--in1),var(--in2))}
input:focus,select:focus{outline:2px solid var(--acc2);outline-offset:1px}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.err{color:var(--bad);text-align:center;min-height:20px;margin-top:12px;font-size:14px}

/* segmented tabs */
.seg{display:flex;padding:4px;gap:4px;border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--in1),var(--in2));box-shadow:inset 0 2px 5px rgba(0,0,0,.35);margin:6px 0 4px;overflow:auto}
.seg button{flex:1;white-space:nowrap;border:0;background:transparent;color:var(--mut);font:600 14px/1 inherit;padding:11px 10px;border-radius:10px;cursor:pointer}
.seg button.on{color:var(--txt);background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 var(--edge2),0 2px 6px rgba(0,0,0,.3)}

/* switch */
.sw{position:relative;width:50px;height:30px;flex:none;display:inline-block}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.sw i{position:absolute;inset:0;border-radius:30px;border:1px solid var(--edge);background:linear-gradient(180deg,var(--in1),var(--in2));box-shadow:inset 0 2px 5px rgba(0,0,0,.35);transition:.2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 2px 5px rgba(0,0,0,.4);transition:.2s}
.sw input:checked+i{background:linear-gradient(180deg,var(--acc2),var(--acc1))}
.sw input:checked+i::after{transform:translateX(20px)}

/* chips and pills */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:12px;padding:4px 9px;border-radius:20px;border:1px solid var(--edge);background:linear-gradient(180deg,var(--in2),var(--in1));color:var(--mut)}
.pill{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:20px;border:1px solid currentColor}
.p-ok{color:var(--ok)}.p-bad{color:var(--bad)}.p-warn{color:var(--warn)}.p-off{color:var(--mut)}
.days{display:flex;gap:6px;flex-wrap:wrap}
.days button{flex:1;min-width:40px;padding:10px 0;border-radius:10px;border:1px solid var(--edge);color:var(--txt);cursor:pointer;font:600 13px/1 inherit;background:linear-gradient(180deg,var(--c1),var(--c2))}
.days button.on{color:var(--acct);background:linear-gradient(180deg,var(--acc1),var(--acc2));border-color:var(--accedge)}

/* FAB */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--accedge);cursor:pointer;z-index:20;
  background:linear-gradient(180deg,var(--acc1),var(--acc2));color:var(--acct);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(0,0,0,.4)}
.fab svg{width:28px;height:28px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.fab:active{transform:scale(.96)}

/* dialog / sheet */
dialog{border:0;padding:0;background:transparent;color:var(--txt);max-width:min(640px,100vw);width:100%;margin:auto auto 0;max-height:94vh}
dialog::backdrop{background:rgba(5,8,12,.62);backdrop-filter:blur(3px)}
.sheet{border:1px solid var(--edge);border-radius:22px 22px 0 0;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 var(--edge2),0 -10px 40px rgba(0,0,0,.5);
  max-height:92vh;display:flex;flex-direction:column}
.sh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--edge)}
.sh b{font-size:17px}
.sh button{border:0;background:transparent;color:var(--txt);font-size:28px;line-height:1;cursor:pointer}
.sb{padding:4px 18px 18px;overflow:auto;-webkit-overflow-scrolling:touch}
.sf{display:flex;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--edge)}
.sf .btn{flex:1}
@media (min-width:700px){dialog{margin:auto}.sheet{border-radius:22px}}

/* limit block */
.lim{border:1px solid var(--edge);border-radius:14px;margin:10px 0;overflow:hidden;background:linear-gradient(180deg,var(--c1),var(--c2))}
.lim>.h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.lim>.h span{font-weight:600;font-size:14px}
.lim>.b{padding:0 14px 14px;display:none}
.lim.on>.b{display:block}
.lim small{display:block;color:var(--mut);margin:0 0 6px;font-size:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border:1px solid var(--edge);padding:6px 8px;text-align:left}
th{background:rgba(127,127,127,.15)}
code{background:rgba(127,127,127,.2);padding:1px 6px;border-radius:6px}

/* entries */
.ent{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.ent .t{font-weight:700;font-size:16px}
.ent .code{font:600 18px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;cursor:pointer;margin-top:6px;display:inline-block}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.empty{text-align:center;color:var(--mut);padding:26px 8px}

/* qr */
.qrbox{background:#fff;padding:14px;border-radius:16px;border:1px solid var(--edge);max-width:300px;margin:0 auto;box-shadow:var(--sh)}
.qrbox svg{display:block;width:100%;height:auto}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;font-size:12px;color:var(--mut)}

/* keypad (guest) */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:340px;margin:18px auto 0}
.pad button{aspect-ratio:1.25;font-size:28px;font-weight:600;border-radius:18px;border:1px solid var(--edge);color:var(--txt);cursor:pointer;
  background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 var(--edge2),0 4px 10px rgba(0,0,0,.25)}
.pad button:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
.pad .ok{color:var(--acct);border-color:var(--accedge);background:linear-gradient(180deg,var(--acc1),var(--acc2))}
.pad .aux{font-size:20px;color:var(--mut)}
.dots{display:flex;justify-content:center;gap:12px;min-height:30px;margin:18px 0 2px}
.dots i{width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,var(--acc1),var(--acc2));box-shadow:0 0 8px var(--accglow)}
.center{text-align:center}
.shake{animation:sh .35s}
@keyframes sh{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.big-ok{font-size:64px;line-height:1;color:var(--ok)}

/* map */
.map svg{width:100%;height:auto;display:block}
.comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.comp .c{border:1px solid var(--edge);border-radius:14px;padding:12px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.comp h3{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.comp .dot{width:14px;height:14px;border-radius:50%;flex:none}
.comp p{margin:3px 0;font-size:13.5px;color:var(--mut)}
.comp b{color:var(--txt)}

.hide{display:none!important}

@media print{
  body{background:#fff!important;color:#000}
  .noprint,.bar,.seg,.fab{display:none!important}
  .poster{display:block!important}
}
.poster{display:none;text-align:center;padding:30px}
.poster h1{font-size:40px;letter-spacing:.2em;margin-bottom:8px}
.poster .qrbox{max-width:420px;box-shadow:none;border:2px solid #000}

/* metallic title */
.brand.metal{background:linear-gradient(180deg,#ffffff,#9aa2ab 55%,#d6dbe0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.ib{position:relative}
.badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:var(--warn);color:#2a1d00;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.badge svg{width:13px;height:13px;stroke:#2a1d00;stroke-width:2.6;fill:none}
.warnbox{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--warn);border-radius:14px;padding:12px 14px;margin:12px 0;background:rgba(255,210,74,.09)}
.warnbox svg{flex:none;width:26px;height:26px;stroke:var(--warn);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.warnbox b{color:var(--warn)}
.okbox{display:flex;gap:12px;align-items:center;border:1px solid var(--ok);border-radius:14px;padding:12px 14px;margin:12px 0;background:rgba(65,224,122,.08)}
.tri{display:inline-flex;vertical-align:-3px;margin-left:5px;color:var(--warn)}
.tri svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* big round steel button */
.rwrap{display:flex;flex-direction:column;align-items:center;margin:20px 0 6px}
.rbtn{
  --ring:var(--ok);--ringglow:rgba(65,224,122,.55);
  position:relative;width:196px;height:196px;border-radius:50%;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.0) 0 58%,rgba(0,0,0,.3) 100%),
    conic-gradient(from 20deg,#dfe3e7,#8d949b,#eef0f3,#7d848b,#e2e5e9,#8a9198,#f1f3f5,#80878e,#dfe3e7);
  box-shadow:0 0 0 7px #14161a,0 0 0 9px #5b626a,0 0 0 13px var(--ring),0 0 34px 10px var(--ringglow),0 16px 30px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.8),inset 0 -6px 12px rgba(0,0,0,.35);
  transition:box-shadow .3s,transform .08s;
}
.rbtn::before{content:"";position:absolute;inset:14px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.12) 0 1px,rgba(0,0,0,.08) 1px 2px),radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 3px 6px rgba(0,0,0,.35)}
.rbtn svg{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;stroke:var(--ring);stroke-width:4.4;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--ringglow)) drop-shadow(0 0 2px var(--ring))}
.rbtn:active,.rbtn.hold{transform:scale(.975)}
.rbtn.red{--ring:var(--bad);--ringglow:rgba(255,90,90,.6)}
.rbtn.amber{--ring:var(--warn);--ringglow:rgba(255,210,74,.5)}
.rbtn.pulse{animation:rp 1.1s ease-in-out infinite}
@keyframes rp{50%{box-shadow:0 0 0 7px #14161a,0 0 0 9px #5b626a,0 0 0 13px var(--ring),0 0 16px 4px var(--ringglow),0 16px 30px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.8),inset 0 -6px 12px rgba(0,0,0,.35)}}
.rbtn:disabled{filter:saturate(.6)}
.rprog{position:absolute;inset:-22px;width:calc(100% + 44px);height:calc(100% + 44px);pointer-events:none;transform:rotate(-90deg)}
.rprog circle{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 1000;opacity:.9}
.rcap{margin-top:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:center}
.rstate{font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.rstate.good{color:var(--ok)}.rstate.badc{color:var(--bad)}.rstate.warnc{color:var(--warn)}

/* login look */
.login-title{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:21px;text-align:center;line-height:1.25;background:linear-gradient(180deg,#ffffff,#8b939c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-icon{display:block;width:132px;height:132px;border-radius:30px;margin:6px auto 18px;box-shadow:0 14px 30px rgba(0,0,0,.65),0 0 24px rgba(65,224,122,.15)}
.trace td,.trace th{font-size:13px}
.ipl{color:var(--acc1);cursor:pointer;text-decoration:underline;text-decoration-style:dotted}
.tmap{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--edge)}
.tnote{color:var(--mut);font-size:13px;margin:8px 0}
.thops{max-height:260px;overflow:auto;margin-top:8px}
.dim{color:var(--mut)}
/* ---- allt i borstat stal ---- */
.btn.primary,.fab,.pad .ok{
  color:#14171a;text-shadow:0 1px 0 rgba(255,255,255,.55);border-color:#69717a;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,rgba(0,0,0,.05) 1px 2px),linear-gradient(180deg,#f4f6f8,#a3aab1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px rgba(0,0,0,.45);
}
.btn.primary svg,.fab svg{stroke:#14171a}
.btn.primary:active,.fab:active{background:linear-gradient(180deg,#b9bfc6,#e2e6ea)}
.days button.on{color:var(--ok);border-color:var(--ok);background:linear-gradient(180deg,var(--in1),var(--in2));box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 0 8px rgba(65,224,122,.3)}
.sw input:checked+i{background:linear-gradient(180deg,#0e2a18,#1a4a2b);border-color:var(--ok);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 9px rgba(65,224,122,.45)}
.lim.dis{opacity:.38;filter:grayscale(1);pointer-events:none}
.dots i{background:radial-gradient(circle at 35% 30%,#f1f3f5,#7b838b);box-shadow:inset 0 -2px 3px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.4)}
.chip,.pill{background:linear-gradient(180deg,var(--in2),var(--in1))}
a.btn{color:inherit}
body.login{display:flex;align-items:center;justify-content:center}
.field-dark{background:linear-gradient(180deg,#0e1013,#1b1e22)!important;border-color:#585f67!important}
.rbtn svg.rprog{left:-22px;top:-22px;width:calc(100% + 44px);height:calc(100% + 44px);margin:0;stroke:none;filter:none;transform:rotate(-90deg)}