:root {
  --sa-bg: #171317;
  --sa-bg-2: #211b20;
  --sa-panel: rgba(255,255,255,.075);
  --sa-panel-strong: rgba(255,255,255,.12);
  --sa-line: rgba(255,255,255,.13);
  --sa-text: #fff;
  --sa-muted: rgba(255,255,255,.64);
  --sa-faint: rgba(255,255,255,.40);
  --sa-primary: #92278f;
  --sa-pink: #ec008c;
  --sa-red: #f5232d;
  --sa-orange: #ff7417;
  --sa-cyan: #19a4bd;
  --sa-green: #20a17a;
  --sa-lime: #c9df22;
  --sa-blue: #2478d8;
  --sa-purple: #7c3cc9;
  --sa-success: #1dbb82;
  --sa-danger: #f0444b;
  --sa-warning: #ffac28;
  --sa-radius-xl: 34px;
  --sa-radius: 24px;
  --sa-radius-sm: 16px;
  --sa-shadow: 0 30px 90px rgba(0,0,0,.34);
  --sa-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sa-bg); overscroll-behavior: none; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--sa-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(236,0,140,.16), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(25,164,189,.17), transparent 34%),
    linear-gradient(145deg, #141113, #211a20 58%, #151214);
  font-family: var(--sa-font);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  user-select: none;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
input, textarea { user-select: text; }
img { max-width: 100%; }
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript { padding: 18px; background: var(--sa-danger); color:#fff; text-align:center; font-weight:800; }

.app-root { min-height: 100vh; }
.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  padding: 40px;
}
.boot-logo { width: min(690px, 78vw); filter: drop-shadow(0 18px 50px rgba(0,0,0,.28)); }
.boot-screen p { margin: 0; color: var(--sa-muted); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.boot-spinner { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.13); border-top-color: var(--sa-pink); border-radius: 50%; animation: spin .78s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* activation */
.activation-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(430px, 620px) 1fr;
}
.activation-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 78px);
  background: rgba(20,17,19,.90);
  border-right: 1px solid var(--sa-line);
  backdrop-filter: blur(28px);
  position: relative;
  z-index: 2;
}
.activation-brand img { width: min(430px, 100%); }
.activation-kicker { margin: 18px 0 0; color: var(--sa-muted); font-size: 15px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.activation-title { margin: 45px 0 10px; font-size: clamp(34px, 5vw, 56px); line-height: 1.02; }
.activation-subtitle { margin: 0 0 34px; color: var(--sa-muted); font-size: 17px; max-width: 580px; }
.activation-form { display:grid; gap:18px; }
.activation-meta { margin-top: 28px; display:flex; flex-wrap:wrap; gap:10px; }
.meta-chip { border:1px solid var(--sa-line); background:var(--sa-panel); border-radius:100px; padding:7px 12px; font-size:12px; color:var(--sa-muted); }
.activation-visual {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 60px;
}
.activation-visual::before, .activation-visual::after {
  content:""; position:absolute; border-radius:50%; filter: blur(2px); opacity:.9;
}
.activation-visual::before { width: 620px; height:620px; top:-250px; right:-150px; background:linear-gradient(145deg,var(--sa-pink),var(--sa-purple)); }
.activation-visual::after { width:480px; height:480px; bottom:-210px; left:-130px; background:linear-gradient(145deg,var(--sa-lime),var(--sa-cyan)); }
.activation-card {
  position: relative;
  z-index: 1;
  width: min(820px, 92%);
  padding: clamp(30px, 5vw, 60px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(20px);
  border-radius: 36px;
  box-shadow: var(--sa-shadow);
}
.activation-card h2 { margin:0 0 16px; font-size:clamp(38px,5vw,72px); line-height:1; }
.activation-card p { color:var(--sa-muted); font-size:clamp(17px,2vw,24px); max-width:650px; }
.activation-points { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.activation-point { padding:20px; border:1px solid var(--sa-line); border-radius:20px; background:rgba(0,0,0,.12); }
.activation-point strong { display:block; margin-bottom:5px; font-size:18px; }
.activation-point span { color:var(--sa-muted); font-size:13px; }

/* controls */
.field { display:grid; gap:8px; }
.field label { color:var(--sa-muted); font-size:13px; font-weight:800; letter-spacing:.02em; }
.input, .select, .textarea {
  width:100%; min-height:54px; padding:13px 16px; color:#fff;
  background:rgba(255,255,255,.075); border:1px solid var(--sa-line); border-radius:15px;
  outline:none; transition:border-color .16s,box-shadow .16s,background .16s;
}
.input:focus,.select:focus,.textarea:focus { border-color:var(--sa-pink); box-shadow:0 0 0 4px rgba(236,0,140,.14); background:rgba(255,255,255,.10); }
.input::placeholder,.textarea::placeholder { color:rgba(255,255,255,.34); }
.select option { color:#222; }
.textarea { min-height:110px; resize:vertical; }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-error { min-height:20px; color:#ff8a90; font-size:13px; }
.form-help { color:var(--sa-faint); font-size:12px; }

.btn {
  border:0; min-height:48px; padding:11px 18px; border-radius:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:820;
  text-decoration:none; transition:transform .12s,filter .16s,opacity .16s,box-shadow .16s;
}
.btn:hover { filter:brightness(1.04); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none; }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--sa-primary),var(--sa-pink)); box-shadow:0 14px 34px rgba(236,0,140,.24); }
.btn-secondary { background:rgba(255,255,255,.08); border:1px solid var(--sa-line); color:#fff; }
.btn-danger { background:var(--sa-danger); color:#fff; }
.btn-success { background:var(--sa-success); color:#fff; }
.btn-ghost { background:transparent; color:var(--sa-muted); }
.btn-block { width:100%; }
.btn-lg { min-height:58px; font-size:17px; border-radius:17px; }
.btn-icon { width:48px; padding:0; }
.btn svg { width:21px; height:21px; }

/* Kiosk shell */
.station-shell { min-height:100vh; display:flex; flex-direction:column; }
.station-topbar {
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);
  align-items:center;
  gap:20px;
  padding:18px clamp(22px,3.4vw,52px);
  border-bottom:1px solid var(--sa-line);
  background:rgba(19,16,18,.78);
  backdrop-filter:blur(24px);
  position:sticky; top:0; z-index:20;
}
.station-brand { display:flex; align-items:center; gap:18px; min-width:0; }
.station-brand img { width:min(270px,26vw); display:block; }
.station-location { min-width:0; padding-left:18px; border-left:1px solid var(--sa-line); }
.station-location strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px; }
.station-location span { display:block; color:var(--sa-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.clock { text-align:center; min-width:210px; }
.clock-time { font-size:clamp(28px,4vw,48px); line-height:1; font-weight:900; letter-spacing:.02em; }
.clock-date { margin-top:7px; color:var(--sa-muted); font-size:13px; text-transform:capitalize; }
.station-actions { display:flex; justify-content:flex-end; gap:9px; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:100px; border:1px solid var(--sa-line); background:var(--sa-panel); color:var(--sa-muted); font-size:12px; font-weight:760; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--sa-success); box-shadow:0 0 0 5px rgba(29,187,130,.12); }
.status-pill.offline .status-dot { background:var(--sa-danger); box-shadow:0 0 0 5px rgba(240,68,75,.12); }

.station-main { flex:1; width:min(1500px,100%); margin:0 auto; padding:clamp(22px,3.2vw,48px); display:grid; gap:26px; }
.welcome-row { display:grid; grid-template-columns:1fr auto; align-items:end; gap:22px; }
.welcome-row h1 { margin:0; font-size:clamp(34px,5vw,68px); line-height:1; }
.welcome-row p { margin:12px 0 0; color:var(--sa-muted); font-size:clamp(15px,1.6vw,20px); }
.presence-card { display:flex; align-items:center; gap:16px; min-width:240px; padding:18px 22px; border:1px solid var(--sa-line); background:var(--sa-panel); border-radius:22px; }
.presence-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(135deg,rgba(25,164,189,.25),rgba(201,223,34,.17)); color:#bff5ff; }
.presence-icon svg { width:27px; height:27px; }
.presence-card strong { display:block; font-size:30px; line-height:1; }
.presence-card span { display:block; margin-top:5px; color:var(--sa-muted); font-size:12px; }

.action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.action-card {
  min-height:220px;
  padding:26px;
  border:1px solid var(--sa-line);
  border-radius:var(--sa-radius);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  position:relative;
  overflow:hidden;
  text-align:left;
  cursor:pointer;
  box-shadow:0 16px 45px rgba(0,0,0,.14);
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.action-card::after { content:""; position:absolute; width:190px; height:190px; border-radius:50%; right:-85px; bottom:-90px; background:var(--accent); opacity:.18; filter:blur(2px); }
.action-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.25); box-shadow:0 25px 65px rgba(0,0,0,.23); }
.action-card:active { transform:translateY(-1px); }
.action-icon { width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:color-mix(in srgb,var(--accent) 22%, transparent); color:var(--accent); }
.action-icon svg { width:34px; height:34px; }
.action-card h2 { margin:24px 0 7px; font-size:clamp(23px,2.4vw,34px); line-height:1.05; }
.action-card p { margin:0; color:var(--sa-muted); font-size:14px; max-width:90%; }
.action-card .arrow { position:absolute; right:24px; top:24px; color:var(--sa-faint); }
.action-card .arrow svg { width:25px; height:25px; }
.action-card.checkin { --accent:var(--sa-green); }
.action-card.checkout { --accent:var(--sa-red); }
.action-card.breakstart { --accent:var(--sa-orange); }
.action-card.breakend { --accent:var(--sa-cyan); }
.action-card.leave { --accent:var(--sa-purple); }
.action-card.return { --accent:var(--sa-lime); }
.action-card.transferdepart { --accent:#f6b93b; }
.action-card.transferarrive { --accent:#43d6b1; }
.transfer-destination-head{text-align:center}.transfer-destination-head h3{font-size:34px;margin:0 0 8px}.transfer-destination-head p{margin:0;color:var(--sa-muted)}
.transfer-destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}.transfer-destination-card{display:grid;grid-template-columns:62px 1fr 30px;gap:16px;align-items:center;padding:22px;border:1px solid var(--sa-line);border-radius:20px;background:rgba(255,255,255,.055);color:var(--sa-text);text-align:left;cursor:pointer}.transfer-destination-card:hover{border-color:rgba(67,214,177,.55);transform:translateY(-2px)}.transfer-destination-card>span{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(67,214,177,.14);color:#43d6b1}.transfer-destination-card svg{width:25px;height:25px}.transfer-destination-card h3{margin:0 0 6px;font-size:22px}.transfer-destination-card p{margin:0;color:var(--sa-muted);font-size:13px}

.station-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px clamp(22px,3.4vw,52px); color:var(--sa-faint); font-size:12px; border-top:1px solid var(--sa-line); }
.station-footer strong { color:var(--sa-muted); }

/* full screen workflows */
.workflow-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:clamp(18px,3vw,46px); background:rgba(12,10,11,.93); backdrop-filter:blur(22px); }
.workflow-panel { width:min(1080px,100%); min-height:min(720px,calc(100vh - 60px)); border:1px solid var(--sa-line); border-radius:34px; background:linear-gradient(145deg,rgba(39,32,37,.98),rgba(22,18,21,.98)); box-shadow:var(--sa-shadow); overflow:hidden; display:flex; flex-direction:column; }
.workflow-header { min-height:88px; display:grid; grid-template-columns:90px 1fr 90px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--sa-line); }
.workflow-header h2 { margin:0; text-align:center; font-size:26px; }
.workflow-header p { margin:5px 0 0; text-align:center; color:var(--sa-muted); font-size:13px; }
.workflow-body { flex:1; padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; }
.workflow-progress { display:flex; justify-content:center; gap:8px; margin-bottom:28px; }
.progress-dot { width:34px; height:5px; border-radius:8px; background:rgba(255,255,255,.12); }
.progress-dot.active { background:linear-gradient(90deg,var(--sa-primary),var(--sa-pink)); }

.method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:auto 0; }
.method-card { min-height:300px; padding:36px; border-radius:28px; border:1px solid var(--sa-line); background:var(--sa-panel); cursor:pointer; text-align:center; transition:transform .16s,border-color .16s,background .16s; }
.method-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.27); background:var(--sa-panel-strong); }
.method-card .method-icon { width:100px; height:100px; display:grid; place-items:center; margin:0 auto 24px; border-radius:30px; background:linear-gradient(135deg,rgba(236,0,140,.18),rgba(25,164,189,.14)); }
.method-card svg { width:52px; height:52px; }
.method-card h3 { margin:0 0 10px; font-size:30px; }
.method-card p { margin:0 auto; max-width:380px; color:var(--sa-muted); }

.break-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:auto 0; }
.break-type { min-height:210px; border:1px solid var(--sa-line); border-radius:24px; background:var(--sa-panel); padding:28px; cursor:pointer; text-align:center; }
.break-type:hover { border-color:var(--sa-orange); background:rgba(255,116,23,.10); }
.break-type svg { width:45px; height:45px; color:var(--sa-orange); }
.break-type h3 { font-size:25px; margin:18px 0 7px; }
.break-type p { margin:0; color:var(--sa-muted); }

.scanner-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:24px; flex:1; }
.camera-card { min-height:450px; position:relative; overflow:hidden; border-radius:28px; background:#050505; border:1px solid var(--sa-line); }
.camera-card video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.camera-placeholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:15px; color:var(--sa-muted); padding:40px; text-align:center; }
.camera-placeholder svg { width:66px; height:66px; color:var(--sa-cyan); }
.scan-frame { position:absolute; inset:50% auto auto 50%; width:min(310px,64%); aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.9); border-radius:30px; box-shadow:0 0 0 999px rgba(0,0,0,.35); pointer-events:none; }
.scan-frame::before,.scan-frame::after { content:""; position:absolute; left:10%; right:10%; height:2px; background:linear-gradient(90deg,transparent,var(--sa-pink),transparent); animation:scan 2.2s ease-in-out infinite; }
.scan-frame::before { top:18%; }
.scan-frame::after { bottom:18%; animation-delay:1.1s; }
@keyframes scan { 0%,100%{opacity:.25;transform:translateY(-25px)} 50%{opacity:1;transform:translateY(25px)} }
.scanner-side { display:flex; flex-direction:column; gap:18px; }
.info-box { padding:20px; border-radius:20px; border:1px solid var(--sa-line); background:var(--sa-panel); }
.info-box h3 { margin:0 0 8px; font-size:18px; }
.info-box p { margin:0; color:var(--sa-muted); font-size:13px; }
.manual-token { min-height:124px; }

.pin-layout { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(340px,1fr); gap:32px; align-items:center; flex:1; max-width:900px; width:100%; margin:0 auto; }
.pin-form { display:grid; gap:20px; }
.pin-display { display:flex; justify-content:center; gap:14px; padding:20px; }
.pin-dot { width:24px; height:24px; border-radius:50%; border:2px solid rgba(255,255,255,.32); background:transparent; }
.pin-dot.filled { border-color:var(--sa-pink); background:var(--sa-pink); box-shadow:0 0 0 7px rgba(236,0,140,.12); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.key { min-height:78px; border:1px solid var(--sa-line); border-radius:20px; background:var(--sa-panel); font-size:28px; font-weight:850; cursor:pointer; }
.key:hover { background:var(--sa-panel-strong); }
.key.action { color:var(--sa-muted); font-size:16px; }
.key.action .key-action-icon { width:30px; height:30px; display:block; margin:auto; pointer-events:none; }

.processing { flex:1; display:grid; place-content:center; justify-items:center; gap:24px; text-align:center; }
.processing .big-spinner { width:84px; height:84px; border:7px solid rgba(255,255,255,.12); border-top-color:var(--sa-pink); border-radius:50%; animation:spin .72s linear infinite; }
.processing h3 { margin:0; font-size:34px; }
.processing p { margin:0; color:var(--sa-muted); }

.result-view { flex:1; display:grid; place-content:center; justify-items:center; text-align:center; padding:30px; }
.result-icon { width:140px; height:140px; display:grid; place-items:center; border-radius:50%; margin-bottom:28px; }
.result-icon.success { background:rgba(29,187,130,.16); color:#4ae0a9; box-shadow:0 0 0 18px rgba(29,187,130,.05); }
.result-icon.error { background:rgba(240,68,75,.16); color:#ff7b82; box-shadow:0 0 0 18px rgba(240,68,75,.05); }
.result-icon svg { width:72px; height:72px; }
.result-view h3 { margin:0 0 12px; font-size:clamp(34px,5vw,58px); }
.result-view p { margin:0; color:var(--sa-muted); font-size:18px; max-width:700px; }
.result-details { margin-top:22px; padding:16px 20px; border:1px solid var(--sa-line); background:var(--sa-panel); border-radius:18px; color:var(--sa-muted); }
.result-countdown { margin-top:28px; font-size:13px; color:var(--sa-faint); }

/* settings */
.modal-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.66); backdrop-filter:blur(16px); }
.modal { width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid var(--sa-line); border-radius:28px; background:#211b20; box-shadow:var(--sa-shadow); }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; border-bottom:1px solid var(--sa-line); }
.modal-header h2 { margin:0; font-size:25px; }
.modal-body { padding:24px; display:grid; gap:20px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.setting-card { padding:17px; border:1px solid var(--sa-line); border-radius:18px; background:var(--sa-panel); }
.setting-card span { display:block; color:var(--sa-muted); font-size:12px; }
.setting-card strong { display:block; margin-top:5px; word-break:break-word; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; }
.language-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.language-option { min-height:52px; border-radius:15px; border:1px solid var(--sa-line); background:var(--sa-panel); cursor:pointer; font-weight:800; }
.language-option.active { border-color:var(--sa-pink); background:rgba(236,0,140,.12); }

.signature-card { border:1px solid var(--sa-line); border-radius:20px; overflow:hidden; background:#fff; }
.signature-canvas { width:100%; height:240px; display:block; touch-action:none; cursor:crosshair; }
.signature-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; background:#f2f2f2; color:#222; }
.pressure-meter { width:130px; height:8px; border-radius:10px; background:#ddd; overflow:hidden; }
.pressure-fill { height:100%; width:0; background:linear-gradient(90deg,var(--sa-cyan),var(--sa-pink)); }

.toast-region { position:fixed; z-index:200; right:22px; bottom:22px; display:grid; gap:10px; pointer-events:none; }
.toast { min-width:280px; max-width:430px; padding:15px 17px; border-radius:16px; border:1px solid var(--sa-line); background:rgba(33,27,32,.96); box-shadow:0 16px 50px rgba(0,0,0,.3); color:#fff; animation:toastIn .2s ease-out; }
.toast.error { border-color:rgba(240,68,75,.55); }
.toast.success { border-color:rgba(29,187,130,.55); }
.toast strong { display:block; margin-bottom:3px; }
.toast span { color:var(--sa-muted); font-size:13px; }
.queue-pill { min-height:38px; display:flex; align-items:center; padding:0 13px; border-radius:999px; border:1px solid rgba(255,190,64,.5); background:rgba(255,190,64,.12); color:#ffd27a; font-size:12px; font-weight:800; white-space:nowrap; }
.queue-pill.issue { border-color:rgba(240,68,75,.58); background:rgba(240,68,75,.12); color:#ff9ca1; }
.offline-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border:1px solid rgba(255,190,64,.38); border-radius:16px; background:rgba(255,190,64,.09); color:#ffd27a; }
.offline-banner span { color:var(--sa-muted); font-size:13px; line-height:1.45; text-align:right; }
.offline-banner.issue { border-color:rgba(240,68,75,.5); background:rgba(240,68,75,.09); color:#ff9ca1; }
.hidden { display:none !important; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

@media (max-width: 1100px) {
  .activation-page { grid-template-columns:1fr; }
  .activation-visual { display:none; }
  .activation-panel { min-height:100vh; border-right:0; }
  .station-topbar { grid-template-columns:1fr auto; }
  .clock { order:3; grid-column:1/-1; padding-top:12px; border-top:1px solid var(--sa-line); }
  .action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scanner-layout { grid-template-columns:1fr; }
  .camera-card { min-height:420px; }
}

@media (max-width: 760px) {
  .station-topbar { padding:14px 16px; gap:12px; }
  .station-location { display:none; }
  .station-brand img { width:220px; max-width:52vw; }
  .status-pill span:last-child { display:none; }
  .queue-pill { max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  .offline-banner { align-items:flex-start; flex-direction:column; gap:6px; }
  .offline-banner span { text-align:left; }
  .station-main { padding:18px 14px; }
  .welcome-row { grid-template-columns:1fr; align-items:start; }
  .presence-card { width:100%; }
  .action-grid { grid-template-columns:1fr; }
  .action-card { min-height:165px; }
  .method-grid,.break-types,.pin-layout { grid-template-columns:1fr; }
  .transfer-destination-grid { grid-template-columns:1fr; }
  .method-card { min-height:220px; }
  .workflow-overlay { padding:0; }
  .workflow-panel { min-height:100vh; border-radius:0; border:0; }
  .workflow-header { grid-template-columns:58px 1fr 58px; padding:12px; }
  .workflow-body { padding:18px 14px; }
  .settings-grid { grid-template-columns:1fr; }
  .language-grid { grid-template-columns:1fr; }
  .activation-panel { padding:30px 22px; }
  .field-row { grid-template-columns:1fr; }
  .activation-title { margin-top:34px; }
}

@media (orientation: landscape) and (max-height: 740px) {
  .station-topbar { min-height:74px; padding-top:10px; padding-bottom:10px; }
  .clock-time { font-size:32px; }
  .station-main { padding-top:18px; gap:18px; }
  .welcome-row h1 { font-size:42px; }
  .action-card { min-height:175px; padding:22px; }
  .action-icon { width:55px; height:55px; border-radius:18px; }
  .action-icon svg { width:28px; height:28px; }
  .action-card h2 { margin-top:18px; font-size:25px; }
}


/* v1.0.1 compact identity workflows */
.camera-column { display:grid; gap:12px; min-width:0; }
.camera-status { display:flex; align-items:center; justify-content:center; gap:9px; min-height:36px; color:var(--sa-muted); font-size:12px; }
.camera-status-dot { width:9px; height:9px; border-radius:50%; background:var(--sa-faint); box-shadow:0 0 0 5px rgba(255,255,255,.04); }
.camera-status-dot.active { background:var(--sa-green); box-shadow:0 0 0 5px rgba(29,187,130,.10); }
.manual-disclosure { border:1px solid var(--sa-line); border-radius:18px; background:var(--sa-panel); overflow:hidden; }
.manual-disclosure summary { min-height:54px; display:flex; align-items:center; gap:10px; padding:0 16px; cursor:pointer; color:var(--sa-muted); font-weight:800; list-style:none; }
.manual-disclosure summary::-webkit-details-marker { display:none; }
.manual-disclosure summary svg { width:18px; height:18px; transition:transform .18s ease; }
.manual-disclosure[open] summary svg { transform:rotate(90deg); }
.manual-disclosure-body { padding:0 16px 16px; border-top:1px solid var(--sa-line); }
.manual-disclosure-body p { color:var(--sa-muted); font-size:13px; }
.manual-token-form { display:grid; gap:10px; }
.pin-identity-head { display:flex; align-items:center; gap:15px; }
.pin-identity-head h3 { margin:0; font-size:26px; }
.pin-identity-head p { margin:5px 0 0; color:var(--sa-muted); font-size:13px; line-height:1.45; }
.pin-identity-icon { width:62px; height:62px; flex:0 0 62px; display:grid; place-items:center; border-radius:19px; color:var(--sa-pink); background:linear-gradient(135deg,rgba(236,0,140,.18),rgba(25,164,189,.12)); }
.pin-identity-icon svg { width:31px; height:31px; }
.pin-employee-input { font-size:18px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.pin-code-field { margin-top:-4px; }
.pin-submit { margin-top:2px; }
@media (max-width:1100px){
  .scanner-layout { align-content:start; }
  .camera-card { min-height:360px; }
  .scanner-side { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .scanner-instruction,.manual-disclosure,#scanner-error { grid-column:1/-1; }
}
@media (max-width:760px){
  .workflow-header { min-height:72px; }
  .workflow-header h2 { font-size:22px; }
  .workflow-header p { font-size:11px; }
  .workflow-progress { margin-bottom:14px; }
  .camera-card { min-height:300px; max-height:42vh; }
  .scan-frame { width:min(235px,66%); border-radius:24px; }
  .scanner-side { grid-template-columns:1fr; gap:12px; }
  .scanner-instruction { display:none; }
  .pin-layout { gap:16px; align-content:start; }
  .pin-form { gap:12px; }
  .pin-identity-head { gap:12px; }
  .pin-identity-head h3 { font-size:22px; }
  .pin-identity-icon { width:48px; height:48px; flex-basis:48px; border-radius:15px; }
  .pin-identity-icon svg { width:25px; height:25px; }
  .pin-display { padding:10px; gap:10px; }
  .pin-dot { width:18px; height:18px; }
  .keypad { gap:9px; }
  .key { min-height:62px; border-radius:16px; font-size:24px; }
  .key.action { font-size:13px; }
  .key.action .key-action-icon { width:26px; height:26px; }
  .btn-lg { min-height:58px; font-size:16px; }
}
@media (max-width:420px){
  .workflow-body { padding:12px 10px; }
  .camera-card { min-height:260px; }
  .pin-identity-head p { display:none; }
  .pin-employee-input { min-height:52px; }
  .key { min-height:56px; }
}

/* v1.3.0 Offline Recovery quarantine */
.offline-quarantine-list { display:grid; gap:10px; }
.offline-quarantine-item { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:14px 16px; border:1px solid var(--sa-line); border-radius:14px; background:var(--sa-panel); }
.offline-quarantine-item > div { display:grid; gap:4px; }
.offline-quarantine-item span,.offline-quarantine-item small { color:var(--sa-muted); font-size:12px; }
.quarantine-server-badge,.quarantine-local-badge { display:inline-flex; width:max-content; padding:4px 8px; border-radius:999px; font-size:11px !important; font-weight:700; }
.quarantine-server-badge { background:rgba(32,164,123,.12); color:#15785b !important; }
.quarantine-local-badge { background:rgba(213,0,143,.10); color:#92278f !important; }
@media (max-width:720px) { .offline-quarantine-item { align-items:flex-start; flex-direction:column; } }