:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --surface: #fff;
  --surface-2: #f7f8fa;
  --ink: #122234;
  --muted: #718092;
  --line: #dfe4e9;
  --navy: #071b2d;
  --navy-2: #0e3049;
  --gold: #c99b32;
  --gold-bright: #e7bf5c;
  --green: #13a480;
  --blue: #2477df;
  --violet: #7856d8;
  --red: #c94343;
  --shadow: 0 18px 50px rgba(18, 34, 52, .08);
  --radius: 26px;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --bg: #061725;
    --surface: #0c263a;
    --surface-2: #102d43;
    --ink: #f4f7fa;
    --muted: #93a9ba;
    --line: #234259;
    --navy: #04121f;
    --navy-2: #123c59;
    --shadow: 0 18px 50px rgba(0, 0, 0, .22);
  }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061725;
  --surface: #0c263a;
  --surface-2: #102d43;
  --ink: #f4f7fa;
  --muted: #93a9ba;
  --line: #234259;
  --navy: #04121f;
  --navy-2: #123c59;
  --shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.45 Inter, Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.topbar {
  position: sticky; z-index: 50; top: 0; min-height: 74px; display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(280px, 1fr); align-items: center;
  gap: 24px; padding: 11px max(24px, calc((100vw - 1320px)/2));
  background: color-mix(in srgb, var(--surface) 91%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand, .auth-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; color: var(--gold); }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.brand > span:last-child, .auth-brand > span:last-child { display: grid; line-height: 1; letter-spacing: .06em; }
.brand strong, .auth-brand strong { font-size: 21px; }
.brand small, .auth-brand small { margin-top: 5px; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.desktop-nav { display: flex; gap: 5px; padding: 5px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.desktop-nav a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: 13px; color: var(--muted); font-weight: 700; }
.desktop-nav a:hover { background: var(--surface); color: var(--ink); box-shadow: 0 5px 14px rgba(0,0,0,.06); }
.account-tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.profile-chip { display: flex; align-items: center; gap: 10px; }
.profile-chip img, .avatar-initial { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); background: var(--navy-2); color: #fff; display: grid; place-items: center; font-weight: 800; }
.profile-text { display: grid; max-width: 180px; }
.profile-text strong, .profile-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-text small { color: var(--muted); font-size: 11px; }
.language-menu { position: relative; }
.language-menu summary { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; list-style: none; font-size: 12px; }
.language-menu summary::-webkit-details-marker { display: none; }
.menu-popover { position: absolute; right: 0; top: calc(100% + 9px); z-index: 10; min-width: 190px; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.menu-popover button { width: 100%; display: grid; grid-template-columns: 22px 30px 1fr; gap: 8px; align-items: center; padding: 10px; border: 0; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; }
.menu-popover button:hover, .menu-popover button.active { background: var(--surface-2); }
.flag { width: 21px; height: 15px; display: inline-block; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.flag-ru { background: linear-gradient(#fff 0 33%, #1846a1 33% 66%, #da2b36 66%); }
.flag-en { background: linear-gradient(135deg,#19346f 0 43%,#fff 43% 49%,#d82837 49% 55%,#fff 55% 61%,#19346f 61%); }
.flag-th { background: linear-gradient(#d92f3b 0 18%,#fff 18% 32%,#273676 32% 68%,#fff 68% 82%,#d92f3b 82%); }

.page-shell { width: min(1220px, calc(100% - 34px)); margin: 0 auto; padding: 34px 0 110px; }
.eyebrow { margin: 0 0 7px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -.045em; }
h2 { margin-bottom: 7px; font-size: 24px; letter-spacing: -.035em; }
h3 { margin-bottom: 5px; font-size: 17px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, .7fr); gap: 18px; }
.hero-card { position: relative; min-height: 230px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; padding: 34px; color: #fff; border-radius: 32px; background: radial-gradient(circle at 82% 12%, #1a5975 0, transparent 36%), linear-gradient(135deg,#071b2d,#0a2a43); box-shadow: var(--shadow); }
.hero-card h1 { margin: 0; }
.hero-card p:not(.eyebrow) { color: #aebdca; }
.hero-orb { position: absolute; right: 7%; top: -80px; width: 220px; height: 220px; border: 1px solid rgba(231,191,92,.25); border-radius: 50%; box-shadow: 0 0 0 25px rgba(231,191,92,.04), 0 0 0 55px rgba(231,191,92,.025); pointer-events: none; }
.hero-scan { position: relative; z-index: 2; min-width: 185px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 2px 12px; padding: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 21px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); transition: .2s ease; }
.hero-scan:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); }
.hero-scan > span { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--gold); color: #071b2d; font-size: 24px; }
.hero-scan small { color: #b9c8d4; font-size: 10px; }
.task-summary { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 27px; border-radius: 32px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.task-summary > div { display: flex; align-items: center; gap: 15px; }
.task-summary > div > div { display: grid; }
.task-summary strong { font-size: 42px; line-height: 1; }
.task-summary small { color: var(--muted); font-weight: 700; }
.task-summary > a { width: max-content; font-weight: 800; }
.round-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--gold); background: color-mix(in srgb,var(--gold) 13%,var(--surface)); }
.camera-reminder { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border: 1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); border-radius: 16px; background: color-mix(in srgb,var(--gold) 8%,var(--surface)); }
.camera-reminder p { flex: 1; margin: 0; font-size: 13px; }
.camera-reminder button { border: 0; background: none; cursor: pointer; font-size: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 31px 0 14px; }
.section-head h1,.section-head h2 { margin: 0; }
.section-head > a { color: var(--gold); font-weight: 800; }
.action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.action-card { position: relative; min-height: 145px; display: grid; grid-template-columns: 52px 1fr 20px; align-items: start; gap: 15px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: 0 10px 30px rgba(18,34,52,.04); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.action-card::after { content:""; position:absolute; inset:auto -40px -65px auto; width:140px; height:140px; border-radius:50%; background: currentColor; opacity:.045; }
.action-card:hover { transform: translateY(-4px); border-color: currentColor; box-shadow: var(--shadow); }
.action-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: color-mix(in srgb,currentColor 12%,var(--surface)); font-size: 25px; }
.action-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.action-card .arrow { align-self: center; opacity: .5; }
.accent-gold { color: #a77a14; }.accent-blue { color: var(--blue); }.accent-green { color: var(--green); }.accent-violet { color: var(--violet); }.accent-navy,.accent-slate { color: var(--ink); }
.action-card h3 { color: var(--ink); }
.content-card { margin-top: 18px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.content-card > .section-head:first-child { margin-top: 0; }
.task-list { display: grid; }
.task-row { display: grid; grid-template-columns: 38px 1fr auto 20px; align-items: center; gap: 14px; min-height: 68px; border-top: 1px solid var(--line); }
.task-row:first-child { border-top: 0; }
.task-row:hover strong { color: var(--gold); }
.task-check { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: color-mix(in srgb,var(--green) 10%,var(--surface)); font-size: 11px; font-weight: 800; }
.task-row div { display: grid; }.task-row small,.task-row time { color: var(--muted); font-size: 11px; }
.status-good { color: var(--green); font-size: 12px; font-weight: 800; }.status-bad { color: var(--red); font-size: 12px; font-weight: 800; }
.count-pill { min-width: 34px; height: 30px; display: grid; place-items: center; padding: 0 8px; border-radius: 30px; background: var(--surface-2); font-weight: 800; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-weight: 800; }
.back-link:hover { color: var(--gold); }.back-link.light { color: #fff; }
.page-title { margin-bottom: 24px; }.page-title p:last-child { color: var(--muted); }.page-title.compact h1 { font-size: 38px; }
.two-column { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: 18px; }.two-column .content-card { margin-top: 0; }

.form-stack { display: grid; gap: 18px; }
.form-stack label,.form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
input,select,textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; outline: none; }
textarea { min-height: 90px; resize: vertical; }
input:focus,select:focus,textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent); }
.password-field { position: relative; }.password-field button { position: absolute; right: 7px; top: 7px; width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.span-2 { grid-column: span 2; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; cursor: pointer; font-weight: 800; transition: transform .15s ease,filter .15s ease; }
.button:hover { filter: brightness(1.05); }.button:active { transform: scale(.975); }
.button-primary { color: #fff; background: linear-gradient(135deg,#0c3858,#071b2d); box-shadow: 0 9px 24px rgba(7,27,45,.2); }
.button-secondary { color: var(--ink); background: var(--surface); border-color: var(--line); }
.button-gold { color: #091b2a; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); }
.button-danger { color: var(--red); border-color: color-mix(in srgb,var(--red) 40%,var(--line)); }
.button-large { min-height: 54px; }.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.text-danger { padding: 4px; border: 0; background: transparent; color: var(--red); cursor: pointer; font-weight: 800; }
.divider { height: 1px; margin: 20px 0; background: var(--line); }
.profile-editor-head { display: flex; align-items: center; gap: 18px; }.profile-editor-head img,.avatar-xl { width: 88px; height: 88px; object-fit: cover; border-radius: 25px; }.avatar-large { width: 58px; height: 58px; }.profile-editor-head > div { display: grid; gap: 8px; }.profile-editor-head small { color: var(--muted); }
.device-list { display: grid; }.device-row,.device-request { display: flex; align-items: center; gap: 13px; min-height: 66px; border-top: 1px solid var(--line); }.device-row:first-child { border-top: 0; }.device-row > div,.device-request > div { flex: 1; display: grid; }.device-row small,.device-request small { color: var(--muted); font-size: 11px; }
.device-request { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }.device-request > span { font-size: 25px; }.device-request > b { color: var(--gold); font-size: 11px; }.device-request.prominent { margin: 20px 0; }
.empty-state { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }.empty-state > span { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--green) 12%,var(--surface)); color: var(--green); font-size: 24px; }.empty-state.compact { min-height: 80px; }

.auth-body { background: var(--navy); }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(380px,.9fr) minmax(460px,1.1fr); }
.auth-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(32px,5vw,78px); color: #fff; background: radial-gradient(circle at 90% 15%,#164a66 0,transparent 35%),linear-gradient(145deg,#061724,#0a2d46); }
.auth-brand-panel::after { content:""; position:absolute; right:-180px; bottom:-200px; width:520px; height:520px; border-radius:50%; border:1px solid rgba(224,179,73,.25); box-shadow:0 0 0 45px rgba(224,179,73,.035),0 0 0 90px rgba(224,179,73,.02); }
.auth-brand-panel h1 { max-width: 720px; font-size: clamp(39px,5vw,72px); }
.auth-brand-panel p:not(.eyebrow) { max-width: 570px; color: #a7bbc9; font-size: 17px; }
.trust-line { position:relative; z-index:1; display:flex; gap:9px; color:#a7bbc9; }.trust-line span { color:var(--gold); }
.auth-form-panel { position: relative; display: grid; place-items: center; padding: 26px; background: var(--bg); }
.auth-language { position: absolute; z-index: 5; top: 22px; right: 22px; }
.auth-card { width: min(480px,100%); padding: 40px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); }
.auth-card h2 { font-size: 32px; }.form-footnote { margin: 22px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.alert { margin: 15px 0; padding: 12px 14px; border-radius: 13px; font-size: 12px; font-weight: 700; }.alert-error { color: var(--red); background: color-mix(in srgb,var(--red) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--red) 28%,var(--line)); }
.identity-preview { display: flex; align-items: center; gap: 15px; margin: 18px 0; }.identity-preview h2,.identity-preview p { margin: 0; }.identity-preview small { color:var(--muted); }
.security-note { display:flex; gap:12px; padding:14px; margin:18px 0; border-radius:15px; background:color-mix(in srgb,var(--gold) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line)); }.security-note > span { width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:#071b2d; font-weight:900; }.security-note p { margin:0; font-size:12px; }
.state-icon { width:66px;height:66px;display:grid;place-items:center;margin-bottom:20px;border-radius:50%;font-size:30px }.state-icon.error { color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--surface)); }
.qr-frame { width: 225px; max-width: 100%; margin: 20px auto; padding: 12px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }.qr-frame img { display:block;width:100%; }

.admin-shell { width:min(1420px,calc(100% - 34px));margin:0 auto;padding:26px 0 110px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px; }
.admin-sidebar { position:sticky;top:100px;align-self:start;display:grid;gap:24px;padding:23px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow); }.admin-sidebar .back-link { margin:0; }.admin-sidebar nav { display:grid;gap:5px; }.admin-sidebar nav a { padding:12px;border-radius:12px;color:var(--muted);font-weight:800; }.admin-sidebar nav a:hover { color:var(--ink);background:var(--surface-2); }.admin-sidebar > small { color:var(--muted);font-size:10px;line-height:1.6; }
.admin-content { min-width:0; }.sticky-head { margin-top:0; }.metric-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }.metric-grid a { display:grid;grid-template-columns:45px 1fr 16px;align-items:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface); }.metric-grid a > span { width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:var(--surface-2);color:var(--gold);font-size:19px; }.metric-grid a div { display:grid; }.metric-grid strong { font-size:26px; }.metric-grid small { color:var(--muted); }.metric-grid a:hover { border-color:var(--gold); }
.data-list { display:grid; }.data-row { display:grid;grid-template-columns:180px 1fr 130px 16px;gap:12px;align-items:center;min-height:48px;border-top:1px solid var(--line);font-size:12px; }.data-row:first-child { border-top:0; }.data-row time { color:var(--muted); }
.service-row { display:flex;align-items:center;gap:12px;min-height:62px;border-top:1px solid var(--line); }.service-row:first-child { border-top:0; }.service-row > div { flex:1;display:grid;min-width:0; }.service-row small { overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:10px;white-space:nowrap; }
code { color:var(--green);font-weight:800; }.search-line { display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:8px 8px 8px 14px;margin-bottom:13px;border:1px solid var(--line);border-radius:18px;background:var(--surface); }.search-line input { border:0;background:transparent;box-shadow:none; }
.table-card { padding:0;overflow:hidden; }.user-list { display:grid; }.user-row { display:grid;grid-template-columns:45px minmax(190px,1fr) minmax(150px,.6fr) 100px 18px;gap:13px;align-items:center;min-height:72px;padding:12px 18px;border-top:1px solid var(--line); }.user-row:first-child { border-top:0; }.user-row:hover { background:var(--surface-2); }.user-row > img { width:42px;height:42px;object-fit:cover;border-radius:50%; }.user-row > div { display:grid; }.user-row small { color:var(--muted);font-size:10px; }.role-chips { display:flex;flex-wrap:wrap;gap:4px; }.role-chips i { padding:4px 7px;border-radius:10px;background:var(--surface-2);font-size:9px;font-style:normal;font-weight:800; }
.form-section-title { display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line); }.form-section-title > span { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--navy);color:var(--gold);font-size:10px;font-weight:800; }.form-section-title > div { display:grid; }.form-section-title small { color:var(--muted); }
.checkbox-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }.checkbox-grid label { display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;cursor:pointer; }.checkbox-grid label:has(input:checked) { border-color:var(--green);background:color-mix(in srgb,var(--green) 7%,var(--surface)); }.checkbox-grid input { width:17px;min-height:17px; }.checkbox-grid span { display:grid; }.checkbox-grid small { color:var(--muted);font-size:9px; }
.qr-identity-card { width:min(680px,100%);margin:10px auto;padding:42px;border:1px solid var(--line);border-radius:32px;background:var(--surface);box-shadow:var(--shadow);text-align:center; }.qr-person img,.qr-person .avatar-xl { margin:0 auto 14px; }.qr-person p { color:var(--muted); }.qr-print { margin:24px auto; }.qr-print img { width:270px;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:24px;background:#fff; }.qr-print p { color:var(--muted);font-size:11px; }.qr-identity-card .button-row { justify-content:center; }.qr-identity-card > form { margin-top:20px; }
.create-panel summary { cursor:pointer;font-weight:800; }.create-panel[open] summary { margin-bottom:20px; }
.data-table-scroll { max-width:100%;overflow:auto; }.data-table-scroll table { width:100%;min-width:900px;border-collapse:collapse;font-size:11px; }.data-table-scroll th { position:sticky;top:0;padding:12px 14px;background:var(--surface-2);color:var(--muted);text-align:left;white-space:nowrap; }.data-table-scroll td { padding:12px 14px;border-top:1px solid var(--line);vertical-align:top; }.data-table-scroll td small { display:block;max-width:310px;overflow:hidden;text-overflow:ellipsis;color:var(--muted);white-space:nowrap; }.data-table-scroll details pre { max-width:440px;overflow:auto;white-space:pre-wrap; }.data-table-scroll tbody tr:target { background:color-mix(in srgb,var(--gold) 10%,var(--surface)); }
.table-heading { padding:20px 22px 0; }.access-list { display:grid; }.access-row { display:grid;grid-template-columns:48px minmax(170px,1fr) minmax(300px,1.5fr) 80px 70px;align-items:center;gap:12px;min-height:78px;border-top:1px solid var(--line); }.access-row:first-child { border-top:0; }.access-row > div:nth-child(2) { display:grid; }.access-row small { color:var(--muted);font-size:9px; }.mini-checks { display:flex;flex-wrap:wrap;gap:5px; }.mini-checks label { position:relative;cursor:pointer; }.mini-checks input { position:absolute;opacity:0;pointer-events:none; }.mini-checks span { display:block;padding:5px 7px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:8px;font-weight:800; }.mini-checks input:checked + span { border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface));color:var(--green); }.switch { display:grid;place-items:center;gap:2px;font-size:8px;color:var(--muted); }.switch input { width:18px;min-height:18px; }
.preview-banner { display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--gold) 9%,var(--surface)); }.preview-banner span { padding:5px 8px;border-radius:9px;background:var(--gold);color:#071b2d;font-size:9px;font-weight:900; }.preview-banner p { flex:1;margin:0;font-size:12px; }.preview-banner a { font-weight:800; }.preview-hero { display:flex;align-items:center;gap:20px;padding:25px;border-radius:24px;background:var(--navy);color:#fff; }.preview-hero h1 { margin:0;font-size:35px; }.preview-hero p { margin-bottom:0;color:#9fb4c3; }.preview-disabled { pointer-events:none;opacity:.82; }

.scan-shell { min-height:calc(100vh - 74px);padding:28px max(17px,calc((100vw - 680px)/2)) 100px;background:radial-gradient(circle at 50% 20%,#123e5b,#04131f 70%);color:#fff; }.scanner-card { text-align:center; }.scan-head p { color:#a7bbc9; }.camera-box { position:relative;aspect-ratio:3/4;max-height:58vh;overflow:hidden;margin:20px auto;border-radius:28px;background:#020b12;box-shadow:0 20px 70px rgba(0,0,0,.4); }.camera-box video { width:100%;height:100%;object-fit:cover; }.scan-frame { position:absolute;inset:12%;pointer-events:none; }.scan-frame i { position:absolute;width:55px;height:55px;border-color:var(--gold);border-style:solid; }.scan-frame i:nth-child(1){left:0;top:0;border-width:4px 0 0 4px;border-radius:15px 0 0}.scan-frame i:nth-child(2){right:0;top:0;border-width:4px 4px 0 0;border-radius:0 15px 0 0}.scan-frame i:nth-child(3){left:0;bottom:0;border-width:0 0 4px 4px;border-radius:0 0 0 15px}.scan-frame i:nth-child(4){right:0;bottom:0;border-width:0 4px 4px 0;border-radius:0 0 15px}.scan-frame span { position:absolute;left:5%;right:5%;top:50%;height:2px;background:var(--gold);box-shadow:0 0 15px var(--gold);animation:scanLine 2.4s ease-in-out infinite; }.camera-box #camera-placeholder { position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:#7790a1; }.camera-box #camera-placeholder span { font-size:52px; }.camera-box.active #camera-placeholder { display:none; }.scanner-card .button-row { justify-content:center; }.scanner-card .button-secondary { color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2); }
@keyframes scanLine { 0%,100%{transform:translateY(-150px);opacity:.3}50%{transform:translateY(150px);opacity:1} }
.pairing-notice { position:fixed;right:20px;bottom:20px;z-index:60;width:min(390px,calc(100% - 40px));padding:18px;border-radius:20px;background:var(--navy);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.3); }.pairing-notice a { display:block;margin-top:9px;color:var(--gold-bright);font-weight:800; }
.toast { position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,25px);padding:12px 18px;border-radius:14px;background:var(--navy);color:#fff;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow); }.toast.show { transform:translate(-50%,0);opacity:1; }
.mobile-nav { display:none; }

@media print {
  .topbar,.admin-sidebar,.back-link,.qr-identity-card .button-row,.qr-identity-card > form,.mobile-nav { display:none!important; }
  .admin-shell { display:block;width:100%;padding:0; }.qr-identity-card { box-shadow:none;border:0;margin:0 auto; }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns:auto 1fr;min-height:64px;padding:8px 14px; }.desktop-nav { display:none; }.account-tools { grid-column:2; }.profile-text { display:none; }.brand small { display:none; }
  .page-shell { width:min(100% - 24px,720px);padding-top:20px; }.welcome-grid { grid-template-columns:1fr; }.task-summary { min-height:115px;display:grid;grid-template-columns:1fr auto;align-items:center; }.task-summary > a,.task-summary > .status-good { grid-column:2;grid-row:1; }
  .action-grid { grid-template-columns:repeat(2,1fr); }.two-column { grid-template-columns:1fr; }
  .mobile-nav { position:fixed;z-index:45;left:9px;right:9px;bottom:max(9px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);min-height:66px;padding:6px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 15px 50px rgba(0,0,0,.18);backdrop-filter:blur(18px); }.mobile-nav a { display:grid;place-items:center;align-content:center;gap:2px;color:var(--muted); }.mobile-nav a span { font-size:20px; }.mobile-nav a small { font-size:8px;font-weight:800; }.mobile-nav .scan-main span { width:42px;height:42px;display:grid;place-items:center;margin-top:-20px;border:4px solid var(--bg);border-radius:15px;background:var(--gold);color:#071b2d;box-shadow:0 8px 22px rgba(201,155,50,.35); }
  .auth-layout { grid-template-columns:1fr; }.auth-brand-panel { min-height:230px;padding:27px; }.auth-brand-panel > div:nth-child(2) { margin-top:35px; }.auth-brand-panel h1 { font-size:36px; }.auth-brand-panel p:not(.eyebrow),.trust-line { display:none; }.auth-form-panel { align-items:start;margin-top:-20px;padding:58px 12px 45px; }.auth-language { top:8px;right:16px; }.auth-card { position:relative;padding:25px;border-radius:26px; }
  .admin-shell { width:min(100% - 24px,720px);display:block;padding-top:18px; }.admin-sidebar { position:static;display:flex;align-items:center;overflow:auto;margin-bottom:18px;padding:9px;border-radius:17px; }.admin-sidebar > div,.admin-sidebar > small,.admin-sidebar > .back-link { display:none; }.admin-sidebar nav { display:flex;min-width:max-content; }.admin-sidebar nav a { padding:9px 11px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }.user-row { grid-template-columns:45px 1fr 18px; }.user-row .role-chips,.user-row .status-good,.user-row .status-bad { display:none; }.checkbox-grid { grid-template-columns:repeat(2,1fr); }
  .access-row { grid-template-columns:44px 1fr auto;padding:12px 0; }.access-row .mini-checks { grid-column:2 / 4; }.access-row > .button { grid-column:3;grid-row:1; }.access-row > .switch { display:none; }
}
@media (max-width: 560px) {
  .topbar .brand > span:last-child { display:none; }.language-menu summary b { display:none; }
  .hero-card { min-height:265px;display:grid;align-content:space-between;padding:24px; }.hero-scan { min-width:100%; }.task-summary { padding:20px; }
  .action-grid { grid-template-columns:1fr; }.action-card { min-height:112px;padding:18px; }.camera-reminder { align-items:flex-start; }
  .content-card { padding:18px;border-radius:21px; }.task-row { grid-template-columns:34px 1fr 15px; }.task-row time { display:none; }
  .form-grid { grid-template-columns:1fr; }.span-2 { grid-column:span 1; }.button-row .button { flex:1; }
  .metric-grid { grid-template-columns:1fr 1fr; }.metric-grid a { grid-template-columns:38px 1fr;padding:13px; }.metric-grid a > b { display:none; }.metric-grid a > span { width:38px;height:38px; }.metric-grid strong { font-size:22px; }
  .data-row { grid-template-columns:1fr auto; }.data-row span,.data-row b { display:none; }.checkbox-grid { grid-template-columns:1fr; }.qr-identity-card { padding:25px 17px; }
  .auth-card h2 { font-size:27px; }.auth-brand-panel h1 { font-size:31px; }
}