:root{
  --bg:#0d1114; --panel:#161c21; --panel-2:#1e262c;
  --teal:#2dd4bf; --teal-d:#149484; --teal-dim:rgba(45,212,191,.14);
  --text:#e8eef2; --muted:#8b98a2; --danger:#f26d6d; --ok:#2dd4bf;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Rubik,Arial,sans-serif;
  overscroll-behavior:none; user-select:none; -webkit-user-select:none;
}
#app{min-height:100dvh;display:flex;flex-direction:column}
.screen{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));
}
.screen.center{justify-content:center}
[hidden]{display:none!important}

/* ---- PIN ---- */
#pinScreen{justify-content:center;gap:4px}
.logo{margin-bottom:6px}
h1{font-size:2rem;margin:2px 0 2px;font-weight:700;letter-spacing:.02em}
.sub{color:var(--muted);margin:0 0 18px;font-size:.98rem}
.pin-dots{display:flex;gap:16px;height:20px;margin-bottom:10px;flex-direction:row-reverse}
.pin-dots .dot{width:14px;height:14px;border-radius:50%;background:var(--panel-2);
  border:1px solid #2b343b;transition:transform .12s,background .12s}
.pin-dots .dot.on{background:var(--teal);border-color:var(--teal);transform:scale(1.05)}
.pin-error{min-height:22px;color:var(--danger);font-size:.9rem;margin-bottom:6px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(320px,86vw);direction:ltr}
.key{
  aspect-ratio:1/1;border:none;border-radius:50%;background:var(--panel);
  color:var(--text);font-size:1.7rem;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .1s,transform .06s;
}
.key:active{background:var(--panel-2);transform:scale(.95)}
.key-ghost{background:transparent;font-size:1.3rem;color:var(--muted)}
.key-ghost:active{background:var(--panel)}
.shake{animation:shake .38s}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(6px)}50%{transform:translateX(-8px)}}

/* ---- Gates ---- */
#gatesScreen{gap:0}
.top{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.brand{font-size:1.35rem;font-weight:700}
.logout{background:transparent;border:1px solid #2b343b;color:var(--muted);
  padding:7px 14px;border-radius:999px;font-size:.85rem;cursor:pointer}
.logout:active{background:var(--panel)}
.gates{width:100%;max-width:520px;display:flex;flex-direction:column;gap:20px;flex:1;justify-content:center}

.gate{background:var(--panel);border-radius:var(--radius);padding:20px 18px 22px;border:1px solid #212a30}
.gate-name{font-size:1.5rem;font-weight:600;margin-bottom:16px;text-align:center}

/* slide-to-open */
.slider{position:relative;height:72px;border-radius:999px;background:var(--panel-2);
  overflow:hidden;touch-action:none}
.slider-track{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.slider-hint{color:var(--muted);font-size:1.02rem;font-weight:500;transition:opacity .15s;pointer-events:none}
.slider-fill{position:absolute;inset:0;background:var(--teal-dim);width:0;transition:width .05s linear}
/* thumb sits at the RIGHT (start, RTL) and is dragged LEFT */
.slider-thumb{position:absolute;top:6px;right:6px;width:60px;height:60px;border-radius:50%;
  background:var(--teal);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(45,212,191,.35);touch-action:none;transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
.slider.dragging .slider-thumb{transition:none}
.slider.busy{pointer-events:none}
.gate.state-ok .slider{background:rgba(45,212,191,.18)}
.gate.state-ok .slider-hint{color:var(--teal);opacity:1}
.gate.state-err .slider{background:rgba(242,109,109,.14)}
.gate.state-err .slider-hint{color:var(--danger);opacity:1}
.spin-thumb{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:max(26px,env(safe-area-inset-bottom));background:var(--panel-2);
  color:var(--text);padding:12px 20px;border-radius:999px;font-size:.95rem;
  border:1px solid #2b343b;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--teal-d)}
.toast.err{border-color:var(--danger);color:#ffd9d9}

/* spinner */
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--panel-2);border-top-color:var(--teal);animation:spin .8s linear infinite}