:root { --navy:#123c69; --blue:#1769aa; --teal:#159a9c; --red:#b84e5b; --ink:#17324d; --muted:#6b7d90; --line:#dce6ee; --bg:#f4f8fb; --white:#fff; }
@font-face { font-family:'BYekan'; src:url('/web/static/fonts/BYekan-DF-onkNB.woff2') format('woff2'),url('/web/static/fonts/BYekan-BIf5ivDQ.woff') format('woff'),url('/web/static/fonts/BYekan-rW7voEY9.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(145deg,#eef8fa,var(--bg)); color:var(--ink); font-family:'BYekan',Tahoma,Arial,sans-serif; line-height:1.7; }
.web-shell { width:min(100%,460px); margin:auto; padding:14px 12px 28px; }
.visitor-shell { min-height:100vh; background:#dcebed; } .visitor-app { width:min(100%,390px); min-height:100vh; padding-top:12px; background:#effafb url('/web/static/icons/nasim/bg-CO-8W5dV.jpg') center top / 100% auto repeat-y; box-shadow:0 0 28px #17324d1c; }
.ui-icon { display:block; width:24px; height:24px; object-fit:contain; color:#159a9c; } .breadcrumb-icon { width:17px; height:17px; } .arrow-icon { width:20px; height:20px; } .large-icon { width:38px; height:38px; } .menu-icon .ui-icon { width:27px; height:27px; } .panel-icon .ui-icon { width:21px; height:21px; } .menu-icon .ui-icon { filter:brightness(0) invert(1); opacity:.95; } .panel-icon .ui-icon,.large-content-icon .ui-icon { filter: invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); } .breadcrumb-icon,.arrow-icon { filter: invert(42%) sepia(20%) saturate(863%) hue-rotate(135deg) brightness(89%) contrast(86%); }
.visitor-header { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:8px 4px 14px; } .visitor-brand { display:flex; align-items:center; gap:10px; } .visitor-brand h1 { margin:0; font-size:1.18rem; direction:rtl; unicode-bidi:isolate; } .visitor-brand .eyebrow { display:none; } .visitor-role-label { border-radius:999px; padding:4px 12px; background:#d9f3f3; color:#177d80; font-size:.78rem; font-weight:bold; }
.visitor-breadcrumb { display:flex; align-items:center; gap:10px; min-height:42px; margin-bottom:18px; padding:4px 10px; border-radius:12px; background:#fff; color:var(--muted); box-shadow:0 4px 14px #1a405e0b; font-size:.76rem; } .visitor-breadcrumb a { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#dff6f7; color:#159a9c; font-size:1.35rem; line-height:1; text-decoration:none; }
.menu-list { display:grid; gap:12px; } .menu-card { display:flex; align-items:center; gap:12px; min-height:84px; padding:14px 13px; border:1px solid #e2edf0; border-radius:18px; background:#fff url('/web/static/icons/nasim/icon-list-bg-p4zkEFs_.png') left center / cover no-repeat; box-shadow:0 7px 18px #1a405e12; color:var(--ink); text-decoration:none; transition:transform .15s,box-shadow .15s; } .menu-card:active { transform:scale(.985); } .menu-card > span:nth-child(2) { flex:1; } .menu-card strong,.menu-card small { display:block; } .menu-card strong { font-size:.88rem; } .menu-card small { margin-top:3px; color:var(--muted); font-size:.72rem; } .menu-icon { display:grid; place-items:center; flex:0 0 58px; height:58px; background:transparent url('/web/static/icons/nasim/important-item.e0f1340.svg') center / contain no-repeat; } .menu-arrow { display:grid; place-items:center; color:#7cabb1; }
.menu-message { margin:14px 0 0; padding:10px 12px; border-radius:10px; background:#fff5da; color:#86630e; font-size:.8rem; } .content-card { padding:30px 20px; border:1px solid #e2edf0; border-radius:20px; background:rgba(255,255,255,.92); box-shadow:0 8px 22px #1a405e12; text-align:center; } .content-card h2 { font-size:1.05rem; } .content-card p { color:var(--muted); font-size:.84rem; } .large-content-icon { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 16px; border-radius:22px; background:linear-gradient(145deg,#159a9c,#1769aa 58%,#6b5bd6); box-shadow:0 8px 18px #1769aa30; } .large-content-icon .ui-icon { filter:brightness(0) invert(1); } .panel-icon { background:linear-gradient(145deg,#159a9c,#1769aa 58%,#6b5bd6) !important; box-shadow:0 5px 12px #1769aa26; } .panel-icon .ui-icon { filter:brightness(0) invert(1) !important; } .service-status-card { padding:4px; } .service-status-card .large-content-icon { width:50px; height:50px; margin-bottom:8px; border-radius:16px; } .service-status-card .large-icon { width:29px; height:29px; } .service-status-card h2 { margin-bottom:2px; font-size:.98rem; } .service-status-card p { margin-bottom:6px; } .service-status-card .full-width { margin-top:8px; } .muted-text { color:#9aabb3 !important; }
.location-panel { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); text-align:right; } .location-heading { display:flex; align-items:center; gap:8px; color:var(--navy); } .location-heading .ui-icon { width:22px; height:22px; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); } .location-heading strong { font-size:.9rem; } .location-panel .notice { margin:10px 0; } .coordinates { display:grid; gap:5px; padding:10px; border-radius:10px; background:#eef8f7; color:#267574; direction:rtl; font-size:.8rem; } .coordinates b { direction:ltr; display:inline-block; font-family:monospace; }
.station-page-intro { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:14px; border:1px solid #e2edf0; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 8px 22px #1a405e12; } .station-page-intro h2 { margin-bottom:3px; font-size:.98rem; } .station-page-intro p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.8; } .station-page-icon { flex:0 0 54px; width:54px; height:54px; margin:0; border-radius:17px; } .station-page-icon .large-icon { width:30px; height:30px; }
.station-list-panel { padding:15px; border:1px solid #e2edf0; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 8px 22px #1a405e0d; } .station-list-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .station-list-heading h2 { margin-bottom:2px; font-size:.95rem; } .station-list-heading p { margin:0; color:var(--muted); font-size:.73rem; } .icon-button { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:12px; background:#e4f5f5; cursor:pointer; } .icon-button:disabled { opacity:.5; cursor:wait; } .icon-button .ui-icon { width:20px; height:20px; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); } .station-state { display:grid; place-items:center; gap:6px; min-height:130px; padding:18px; color:var(--muted); text-align:center; } .station-state p { margin:0; font-size:.8rem; } .station-state .loader { margin:0 auto; } .state-icon { width:34px; height:34px; opacity:.55; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); }
.station-list { display:grid; gap:12px; } .station-card { padding:13px; border:1px solid #dce9ed; border-radius:16px; background:linear-gradient(145deg,#fff,#f4fbfb); box-shadow:0 6px 16px #1a405e0c; } .station-card-unavailable { opacity:.75; } .station-card-top { display:flex; align-items:center; gap:9px; } .station-card-icon { display:grid; place-items:center; flex:0 0 39px; width:39px; height:39px; border-radius:13px; background:linear-gradient(145deg,#159a9c,#1769aa 58%,#6b5bd6); box-shadow:0 5px 12px #1769aa26; } .station-card-icon .ui-icon { width:22px; height:22px; filter:brightness(0) invert(1); } .station-card-title { min-width:0; flex:1; } .station-card-title h3 { overflow:hidden; margin:0; color:var(--navy); font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; } .station-card-title small { display:block; margin-top:1px; color:var(--muted); font-size:.68rem; } .station-status-dot { flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:#aab8be; } .station-status-dot.available { background:#29a46d; box-shadow:0 0 0 4px #29a46d1c; } .station-status-dot.unavailable { background:#d49a2c; box-shadow:0 0 0 4px #d49a2c1c; } .station-card-details { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; } .station-detail,.station-coordinates { display:flex; align-items:center; gap:5px; color:#55717d; font-size:.72rem; } .station-detail { padding:7px 8px; border-radius:9px; background:#eef8f7; } .station-detail .ui-icon,.station-coordinates .ui-icon { flex:0 0 16px; width:16px; height:16px; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); } .station-coordinates { margin-top:9px; direction:rtl; } .station-coordinates span { direction:ltr; font-family:monospace; font-size:.68rem; } .station-select-button { width:100%; margin-top:12px; min-height:38px; padding:6px 10px; font-size:.76rem; } .station-select-button:disabled { background:#dfe8eb; color:#71828a; opacity:1; }
.web-header { display:flex; align-items:center; gap:14px; padding:12px 4px 22px; }
.brand-mark { display:block; flex:0 0 48px; width:48px; height:58px; border-radius:12px; background:transparent url('/web/static/icons/nasim/logo-sazman.png') center / contain no-repeat; color:transparent; font-size:0; overflow:hidden; }
.eyebrow { margin:0; color:var(--teal); direction:ltr; font-size:.72rem; font-weight:bold; letter-spacing:.1em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:3px; color:var(--navy); font-size:clamp(1.35rem,5vw,1.9rem); } h2 { margin-bottom:3px; color:var(--navy); font-size:1.1rem; } .web-header p:last-child,.panel-title p,.hint { margin-bottom:0; color:var(--muted); font-size:.82rem; }
.auth-badge { margin-right:auto; border-radius:999px; padding:4px 10px; background:#f2ead0; color:#896b19; font-size:.72rem; white-space:nowrap; }
.panel { margin-bottom:14px; border:1px solid var(--line); border-radius:18px; padding:18px; background:rgba(255,255,255,.9); box-shadow:0 8px 22px #1a405e0d; }
.panel-title { display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; } .panel-icon { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:12px; background:#e8f3f7; font-size:1.15rem; }
.loading-card { text-align:center; } .loader { width:28px; height:28px; margin:2px auto 10px; border:3px solid #d8e6ed; border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
label { display:grid; gap:5px; color:var(--ink); font-size:.82rem; font-weight:bold; } .field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } input,textarea,select { width:100%; border:1px solid #cbd8e3; border-radius:10px; padding:9px 11px; background:white; color:var(--ink); font:inherit; font-size:.88rem; } input,select { min-height:44px; } input:focus,textarea:focus,select:focus { outline:3px solid #1769aa22; border-color:var(--blue); } input[readonly] { background:#f3f6f8; cursor:pointer; } .birth-date-field { grid-column:1 / -1; } .birth-date-field input { cursor:pointer; } .birth-date-grid { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:8px; } .field-error { min-height:0; color:#c62828; font-size:.74rem; font-weight:normal; line-height:1.4; } .invalid { border-color:#c62828 !important; background:#fff8f8 !important; }
.button { min-height:42px; border:0; border-radius:10px; padding:8px 14px; cursor:pointer; font:inherit; font-size:.82rem; font-weight:bold; } .button:disabled { cursor:not-allowed; opacity:.45; } .primary { background:var(--navy); color:white; } .secondary { background:#e8f0f6; color:var(--navy); } .full-width { width:100%; margin-top:16px; }
.notice { margin-bottom:12px; border-radius:9px; padding:8px 10px; background:#f3f7fa; color:var(--muted); font-size:.8rem; } .notice.warning { background:#fff5da; color:#86630e; } .notice.success { background:#e2f4eb; color:#24724c; }
.verification-box { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; } .verification-heading { display:flex; align-items:flex-start; gap:10px; } .verification-heading p { margin:0; color:var(--muted); font-size:.82rem; } .verification-heading h2 { margin-bottom:2px; } .verification-box .full-width { margin-top:10px; }
.role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .role-button { display:grid; gap:4px; min-height:125px; border:1px solid; border-radius:14px; padding:15px; cursor:pointer; text-align:right; font:inherit; } .role-button:disabled { cursor:not-allowed; filter:grayscale(.6); opacity:.5; } .role-button span { font-size:1.6rem; } .role-button strong { font-size:.88rem; } .role-button small { color:var(--muted); font-size:.75rem; } .visitor-role { border-color:#e2aeb5; background:#fff2f3; color:#a3404e; } .staff-role { border-color:#a9cbea; background:#eef6ff; color:#205b91; }
footer { padding:10px 4px; text-align:center; font-size:.78rem; } footer a { color:var(--blue); }
.hidden { display:none !important; }
@media (max-width:560px) { .web-header { align-items:flex-start; } .auth-badge { font-size:.68rem; } .field-grid,.role-grid { grid-template-columns:1fr; } .panel { padding:15px; } }

.reservation-view { display:grid; gap:13px; }
.reservation-hero { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e2edf0; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 8px 22px #1a405e12; }
.reservation-hero h2 { margin-bottom:3px; font-size:1rem; } .reservation-hero p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.8; }
.reservation-details { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; border:1px solid #dce9ed; border-radius:15px; background:#fff; box-shadow:0 6px 16px #1a405e0b; }
.reservation-details div { display:grid; gap:4px; min-width:0; text-align:center; } .reservation-details span { color:var(--muted); font-size:.68rem; } .reservation-details strong { overflow:hidden; color:var(--navy); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.reservation-details div:first-child strong { display:-webkit-box; overflow:hidden; white-space:normal; text-overflow:clip; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.reservation-countdown { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:14px; background:#fff5da; color:#86630e; font-size:.78rem; } .reservation-countdown strong { direction:ltr; font-family:monospace; font-size:1.2rem; }
.notice.info { background:#eaf5fb; color:#28627e; } .button-icon { width:18px; height:18px; margin-left:5px; vertical-align:middle; filter:brightness(0) invert(1); }
.reservation-actions { display:grid; gap:8px; } .reservation-actions .full-width { margin-top:0; } .scanner-panel { padding:13px; border:1px solid #dce9ed; border-radius:16px; background:#fff; } .scanner-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .scanner-heading h3 { margin:0; color:var(--navy); font-size:.9rem; } .scanner-panel video { display:block; width:100%; min-height:210px; max-height:300px; border-radius:13px; background:#12232b; object-fit:cover; } .scanner-panel .hint { margin:8px 0 0; text-align:center; } .manual-qr-wrap { gap:7px; margin-top:12px; } .manual-qr-wrap input { direction:ltr; } .manual-qr-wrap .button { width:100%; margin-top:5px; } .qr-camera-frame { position:relative; overflow:hidden; border-radius:13px; background:#12232b; } .qr-camera-frame video { display:block; width:100%; min-height:210px; max-height:300px; border-radius:13px; background:#12232b; object-fit:cover; } .qr-corners { position:absolute; inset:17% 12%; pointer-events:none; } .qr-corners i { position:absolute; width:28px; height:28px; border-color:#fff; border-style:solid; filter:drop-shadow(0 1px 2px #000); } .qr-corners i:nth-child(1) { inset:0 auto auto 0; border-width:4px 0 0 4px; } .qr-corners i:nth-child(2) { inset:0 0 auto auto; border-width:4px 4px 0 0; } .qr-corners i:nth-child(3) { inset:auto auto 0 0; border-width:0 0 4px 4px; } .qr-corners i:nth-child(4) { inset:auto 0 0 auto; border-width:0 4px 4px 0; } .qr-scan-line { position:absolute; top:17%; left:12%; right:12%; height:3px; background:#fff; box-shadow:0 0 8px #fff; animation:qr-scan 2.2s ease-in-out infinite; pointer-events:none; } @keyframes qr-scan { 0%,100% { top:17%; opacity:.7; } 50% { top:83%; opacity:1; } } .unlock-processing { display:grid; place-items:center; gap:8px; min-height:150px; margin-top:12px; padding:24px 18px; border:1px solid #dce9ed; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px #1a405e12; text-align:center; } .unlock-processing strong { color:var(--navy); font-size:1rem; } .unlock-processing p { margin:0; color:var(--muted); font-size:.8rem; } .unlock-loader { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#e8f7f6; } .unlock-loader img { width:34px; height:34px; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); animation:unlock-spin .9s linear infinite; } @keyframes unlock-spin { to { transform:rotate(360deg); } }
@media (max-width:380px) { .reservation-details { grid-template-columns:1fr; } .reservation-details div { grid-template-columns:1fr 1fr; text-align:right; } }

/* Active visitor custody state */
.active-custody-card { margin: 14px 0; padding: 16px; border: 1px solid #b9deda; border-radius: 20px; background: linear-gradient(145deg, #f4fffd, #fff); box-shadow: 0 8px 22px #1a405e12; }
.active-custody-heading { display: flex; align-items: center; gap: 10px; }
.active-custody-heading h2 { margin: 2px 0 0; color: var(--navy); font-size: 1rem; }
.active-custody-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(145deg, #159a9c, #1769aa 58%, #6b5bd6); box-shadow: 0 5px 12px #1769aa26; }
.active-custody-icon .ui-icon { width: 25px; height: 25px; filter: brightness(0) invert(1); }
.active-custody-card .eyebrow { color: #2f8f88; font-size: .7rem; }
.active-custody-intro { margin: 12px 0; color: var(--muted); font-size: .78rem; line-height: 1.9; }
.active-custody-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.active-custody-details div { display: grid; gap: 3px; min-width: 0; padding: 9px; border-radius: 11px; background: #eef8f7; }
.active-custody-details span { color: var(--muted); font-size: .68rem; }
.active-custody-details strong { overflow: hidden; color: var(--navy); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.return-stations,.pending-return { display:grid; gap:9px; margin-top:12px; padding:12px; border:1px solid #d8e8ed; border-radius:14px; background:#fff; }
.return-stations > strong,.pending-return > strong { color:var(--navy); font-size:.84rem; }
.return-stations p,.pending-return small { margin:0; color:var(--muted); font-size:.74rem; line-height:1.9; }
.return-station-option { display:grid; gap:2px; width:100%; padding:11px 12px; border:1px solid #deebef; border-radius:12px; background:#f6fbfc; color:var(--ink); font:inherit; text-align:right; cursor:pointer; }
.return-station-option:active { transform:scale(.99); }
.return-station-option strong { color:var(--navy); font-size:.8rem; }
.return-station-option small,.pending-return > span { color:var(--muted); font-size:.72rem; }
.pending-return > span { color:var(--ink); }
.pending-return-details { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; direction:ltr; }
.pending-return-facts { display:grid; min-width:0; gap:7px; direction:rtl; }
.pending-return-facts > span { display:flex; align-items:center; gap:5px; color:var(--ink); font-size:.76rem; line-height:1.8; }
.pending-return-number { flex:0 0 auto; }
.pending-return-countdown { justify-self:start; padding:0; background:transparent; color:#d6293e; font-size:1.35rem; font-weight:800; line-height:1; white-space:nowrap; animation:pending-return-blink .8s ease-in-out infinite; }
.pending-return-countdown.is-expired { color:#b5162b; }
@keyframes pending-return-blink { 50% { opacity:.38; } }
@media (prefers-reduced-motion: reduce) { .pending-return-countdown { animation:none; } }
.active-custody-card + .notice { margin:0 0 14px; }
.verification-check { display:grid; place-items:center; width:38px; height:38px; margin:8px auto 0; border:1px solid #b9e7c8; border-radius:50%; background:#e9f8ee; }
.verification-check img { width:25px; height:25px; filter:invert(45%) sepia(39%) saturate(662%) hue-rotate(88deg) brightness(94%) contrast(88%); }
.return-station-option:disabled { opacity:.55; cursor:wait; }
.menu-card-disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .48; pointer-events: auto; }
.menu-card-disabled:active { transform: none; }
@media (max-width: 380px) { .active-custody-details { grid-template-columns: 1fr; } }

.qr-slot-number { display:inline-grid; place-items:center; min-width:2rem; height:2rem; margin-inline:.2rem; padding-inline:.35rem; border:2px solid #fff; border-radius:50%; background:#16834b; color:#fff; font-size:1rem; line-height:1; box-shadow:0 0 0 2px #16834b; vertical-align:middle; animation:qr-slot-blink 2s ease-in-out infinite; }
@keyframes qr-slot-blink { 0%,100% { opacity:1; box-shadow:0 0 0 2px #16834b, 0 0 0 0 rgba(22,131,75,.42); } 50% { opacity:.72; box-shadow:0 0 0 2px #16834b, 0 0 0 7px rgba(22,131,75,0); } }
@media (prefers-reduced-motion: reduce) { .qr-slot-number { animation:none; } }

/* Full-screen success animation shown only after Tracker confirms the unlock. */
.unlock-celebration { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:clamp(10px,4vw,20px); }
.unlock-celebration.hidden { display:none; }
.unlock-celebration-backdrop { position:absolute; inset:0; background:linear-gradient(145deg,rgba(11,45,78,.76),rgba(23,127,117,.72),rgba(81,75,160,.72)); backdrop-filter:blur(7px); animation:unlock-backdrop-in .35s ease-out both; }
.unlock-celebration-card { position:relative; z-index:1; display:grid; justify-items:center; width:min(100%,390px); max-height:calc(100dvh - 20px); padding:clamp(16px,5vw,25px) clamp(12px,5vw,22px); overflow:auto; border:1px solid rgba(255,255,255,.85); border-radius:28px; background:linear-gradient(160deg,#fff 0%,#f0fffa 52%,#f1f3ff 100%); box-shadow:0 25px 80px rgba(6,27,53,.34); text-align:center; animation:unlock-card-in .5s cubic-bezier(.18,.85,.3,1.2) both; }
.unlock-animation-stage { position:relative; width:min(100%,300px); height:clamp(160px,55vw,210px); overflow:hidden; border-radius:24px; background:radial-gradient(circle at 50% 46%,#fff 0 23%,transparent 24%),linear-gradient(135deg,#dcfff1,#dff5ff 55%,#f0eaff); }
.unlock-phase-lock,.unlock-phase-wheelchair { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .3s ease,transform .3s ease; }
.unlock-phase-lock { opacity:1; transform:scale(1); }
.unlock-phase-wheelchair { opacity:0; transform:translateX(80px) scale(.82); }
.is-wheelchair .unlock-phase-lock { opacity:0; transform:scale(.72) rotate(-12deg); }
.is-wheelchair .unlock-phase-wheelchair { opacity:1; transform:translateX(0) scale(1); }
.unlock-art-orb,.wheelchair-art-orb { position:relative; z-index:2; display:grid; place-items:center; width:112px; height:112px; border:5px solid rgba(255,255,255,.9); border-radius:38px; background:linear-gradient(145deg,#ffd66e,#ff9f43 55%,#ff6d83); box-shadow:0 13px 30px rgba(227,108,69,.27),inset 0 2px 4px #fff8; animation:unlock-art-bounce 1s ease-in-out infinite alternate; }
.unlock-art-orb img { width:62px; height:62px; filter:invert(1); }
.unlock-art-spark { position:absolute; width:13px; height:13px; border-radius:4px; background:#28bd88; box-shadow:0 0 0 5px rgba(40,189,136,.13); animation:unlock-spark-pop .8s ease-in-out infinite alternate; }
.spark-one { top:28px; left:54px; background:#25b99a; } .spark-two { top:51px; right:43px; background:#ffbd36; animation-delay:.2s; } .spark-three { bottom:35px; left:68px; background:#8b69e8; animation-delay:.4s; }
.wheelchair-art-orb { width:132px; height:132px; border-radius:50%; background:linear-gradient(145deg,#31d6a2,#16a9bd 58%,#5479ed); box-shadow:0 15px 34px rgba(24,154,174,.28),inset 0 2px 4px #fff8; animation:wheelchair-roll 1.15s cubic-bezier(.4,0,.2,1) infinite alternate; }
.wheelchair-art-orb img { width:78px; height:78px; filter:brightness(0) invert(1); }
.wheelchair-speed { position:absolute; z-index:1; right:calc(50% + 64px); width:30px; height:5px; border-radius:5px; background:#ffac3e; animation:speed-dash .7s ease-in-out infinite; }
.speed-one { top:76px; } .speed-two { top:101px; right:calc(50% + 82px); width:43px; background:#8668e8; animation-delay:.16s; } .speed-three { top:127px; background:#ff7188; animation-delay:.32s; }
.wheelchair-ground { position:absolute; right:17%; bottom:32px; left:17%; height:7px; border-radius:100%; background:linear-gradient(90deg,transparent,#42b78f 20%,#42b78f 80%,transparent); box-shadow:0 8px 14px #38a88245; }
.unlock-celebration-card h2 { margin:19px 0 5px; color:#153b55; font-size:1.35rem; } .unlock-celebration-card p { min-height:1.5em; margin:0; color:#55717d; font-size:.92rem; } .unlock-celebration-asset { margin-top:12px; padding:7px 16px; border-radius:999px; background:#e5f8ee; color:#16834b; font-size:.95rem; }
@keyframes unlock-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes unlock-card-in { from { opacity:0; transform:translateY(20px) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes unlock-art-bounce { to { transform:translateY(-8px) rotate(3deg); } }
@keyframes unlock-spark-pop { to { transform:scale(.55) rotate(40deg); opacity:.48; } }
@keyframes wheelchair-roll { from { transform:translateX(24px) rotate(-5deg); } to { transform:translateX(-24px) rotate(5deg); } }
@keyframes speed-dash { 50% { opacity:.25; transform:translateX(-10px) scaleX(.75); } }
@media (prefers-reduced-motion: reduce) { .unlock-celebration-backdrop,.unlock-celebration-card,.unlock-art-orb,.unlock-art-spark,.wheelchair-art-orb,.wheelchair-speed { animation:none; } .unlock-phase-lock,.unlock-phase-wheelchair { transition:none; } }

.return-animation-stage { background:radial-gradient(circle at 72% 53%,#fff 0 20%,transparent 21%),linear-gradient(135deg,#e0fff0,#dff5ff 55%,#f0eaff); }
.return-station-art,.return-wheelchair-art,.return-station-check { position:absolute; z-index:2; display:grid; place-items:center; border:5px solid rgba(255,255,255,.9); box-shadow:0 13px 30px rgba(32,114,126,.2),inset 0 2px 4px #fff8; }
.return-station-art { top:50%; right:22px; width:91px; height:91px; border-radius:29px; background:linear-gradient(145deg,#78d6a4,#24a77d 58%,#168f9a); transform:translateY(-50%); }
.return-station-art img { width:51px; height:51px; filter:brightness(0) invert(1); }
.return-wheelchair-art { top:50%; left:24px; width:81px; height:81px; border-radius:50%; background:linear-gradient(145deg,#31d6a2,#16a9bd 58%,#5479ed); transform:translateY(-50%); }
.return-wheelchair-art img { width:49px; height:49px; filter:brightness(0) invert(1); }
.is-returning .return-wheelchair-art { animation:return-roll-in 2.3s cubic-bezier(.35,.05,.25,1) both; }
.return-station-check { top:calc(50% - 51px); right:8px; width:37px; height:37px; border:3px solid #fff; border-radius:50%; background:#19a768; opacity:0; transform:scale(.35); }
.return-station-check img { width:22px; height:22px; filter:brightness(0) invert(1); }
.is-returned .return-wheelchair-art { left:calc(100% - 135px); animation:return-arrive .45s cubic-bezier(.18,.85,.3,1.2) both; }
.is-returned .return-station-check { opacity:1; transform:scale(1); transition:opacity .3s ease .12s,transform .42s cubic-bezier(.18,.85,.3,1.3) .12s; }
.return-path-dot { position:absolute; top:calc(50% - 2px); left:32%; width:8px; height:8px; border-radius:50%; background:#ffbd36; opacity:.7; }
.return-path-dot.dot-two { left:43%; width:6px; height:6px; background:#8b69e8; } .return-path-dot.dot-three { left:53%; width:9px; height:9px; background:#ff7188; }
.is-returning .return-path-dot { animation:return-dot 1s ease-in-out infinite alternate; } .return-path-dot.dot-two { animation-delay:.2s; } .return-path-dot.dot-three { animation-delay:.4s; }
@keyframes return-roll-in { from { left:24px; transform:translateY(-50%) rotate(-8deg); } to { left:calc(100% - 135px); transform:translateY(-50%) rotate(8deg); } }
@keyframes return-arrive { from { transform:translateY(-50%) scale(.8) rotate(-12deg); } to { transform:translateY(-50%) scale(1) rotate(0); } }
@keyframes return-dot { to { opacity:.15; transform:scale(.55); } }
@media (prefers-reduced-motion: reduce) { .is-returning .return-wheelchair-art,.is-returning .return-path-dot,.is-returned .return-wheelchair-art { animation:none; } .is-returned .return-wheelchair-art { left:calc(100% - 135px); transform:translateY(-50%); } .return-station-check { transition:none !important; } }

.active-custody-intro { font-size:.94rem; color:#365b70; }
.active-custody-intro.is-typing { position:relative; padding:11px 13px; border-right:3px solid #159a9c; border-radius:10px; background:linear-gradient(110deg,#effbf7,#f5fbff); box-shadow:0 4px 13px rgba(21,154,156,.09); }
.active-custody-intro.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#159a9c; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.active-custody-intro.is-complete::after { animation:none; opacity:0; }
.return-message-typing.is-typing { position:relative; min-height:3.4em; }
.return-message-typing.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#159a9c; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.return-message-typing.is-complete::after { animation:none; opacity:0; }
@keyframes typing-caret { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .active-custody-intro.is-typing::after { animation:none; } }
.wrong-qr-stage { background:radial-gradient(circle at 50% 47%,#fff 0 23%,transparent 24%),linear-gradient(135deg,#fff0ed,#ffe6e4 52%,#f2eaff); }
.wrong-qr-orb { position:absolute; top:50%; left:50%; z-index:2; display:grid; place-items:center; width:112px; height:112px; border:5px solid rgba(255,255,255,.92); border-radius:38px; background:linear-gradient(145deg,#ff9a70,#f0535e 58%,#d83f76); box-shadow:0 14px 32px rgba(211,55,83,.27),inset 0 2px 4px #fff8; transform:translate(-50%,-56%); animation:wrong-hand-wave .62s ease-in-out infinite alternate; }
.wrong-qr-orb img { width:68px; height:68px; filter:brightness(0) invert(1); transform:rotate(-90deg); }
.wrong-qr-cross { position:absolute; top:calc(50% + 35px); left:50%; z-index:3; display:grid; place-items:center; width:49px; height:49px; border:4px solid #fff; border-radius:50%; background:linear-gradient(145deg,#ff5264,#cf2547); box-shadow:0 7px 18px rgba(181,31,62,.3); opacity:0; transform:translateX(-50%) scale(.25); }
.wrong-qr-cross img { width:30px; height:30px; filter:brightness(0) invert(1); }
.is-wrong-confirmed .wrong-qr-cross { opacity:1; transform:translateX(-50%) scale(1); transition:opacity .22s ease,transform .4s cubic-bezier(.18,.85,.3,1.3); }
.wrong-qr-spark { position:absolute; z-index:1; width:13px; height:13px; border-radius:4px; background:#ffb13b; animation:wrong-spark .65s ease-in-out infinite alternate; }
.wrong-spark-one { top:38px; left:calc(50% - 76px); } .wrong-spark-two { top:46px; right:calc(50% - 78px); background:#8a69e8; animation-delay:.2s; }
.wrong-qr-card h2 { color:#a72f49; } .wrong-qr-card .unlock-celebration-asset { background:#ffe8ec; color:#af2947; }
.notice.warning.wrong-qr-notice { position:relative; padding:12px 14px; border:1px solid #efb9c3; border-right:4px solid #d7475c; border-radius:13px; background:linear-gradient(120deg,#fff2f2,#fff8f0); color:#812c3e; font-size:.94rem; font-weight:600; line-height:2; box-shadow:0 5px 15px rgba(191,48,71,.1); }
.notice.success.unlock-success-notice { position:relative; padding:12px 14px; border:1px solid #b6e2c8; border-right:4px solid #219765; border-radius:13px; background:linear-gradient(120deg,#effbf3,#f2fbff); color:#245f47; font-size:.94rem; font-weight:600; line-height:2; box-shadow:0 5px 15px rgba(31,145,91,.1); }
.unlock-success-notice.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#219765; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.unlock-success-notice.is-complete::after { animation:none; opacity:0; }
.wrong-qr-notice.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#d7475c; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.wrong-qr-notice.is-complete::after { animation:none; opacity:0; }
@keyframes wrong-hand-wave { from { transform:translate(-50%,-56%) rotate(-11deg); } to { transform:translate(-50%,-56%) rotate(11deg); } }
@keyframes wrong-spark { to { opacity:.3; transform:scale(.55) rotate(35deg); } }
@media (prefers-reduced-motion: reduce) { .is-wrong-confirmed .wrong-qr-orb,.wrong-qr-spark { animation:none; } .is-wrong-confirmed .wrong-qr-cross { transition:none; } .wrong-qr-notice.is-typing::after { animation:none; } }

body.camera-scanning { padding-bottom:55vh; }
.visitor-breadcrumb span a.breadcrumb-title { display:inline; width:auto; height:auto; padding:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:inherit; text-decoration:none; }

.service-custody-guard { margin-top:16px; text-align:center; }
.service-custody-guard > .large-content-icon { margin:0 auto 14px; }
.service-custody-guard h2 { margin-bottom:8px; color:var(--navy); }
.service-custody-guard-message { min-height:3.4em; margin:0 0 18px; padding:11px 13px; border-right:3px solid #159a9c; border-radius:10px; background:linear-gradient(110deg,#effbf7,#f5fbff); color:#365b70; font-size:.98rem; line-height:1.9; text-align:center; }
.service-custody-guard-message.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#159a9c; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.service-custody-guard-message.is-complete::after { animation:none; opacity:0; }

/* Intro animation for selecting the manual wheelchair-return slot. */
.return-assignment-stage { position:relative; width:min(100%,330px); height:220px; overflow:hidden; border-radius:24px; background:radial-gradient(circle at 50% 44%,#fff 0 22%,transparent 23%),linear-gradient(135deg,#e0fff0,#dff5ff 55%,#f0eaff); }
.return-assignment-slots { position:absolute; z-index:2; right:10px; top:24px; left:10px; display:flex; gap:6px; direction:rtl; }
.return-assignment-slot { position:relative; display:grid; flex:1; place-items:center; height:78px; min-width:0; border:2px solid #c5d9df; border-bottom:5px solid #91b7c0; border-radius:11px 11px 7px 7px; background:linear-gradient(160deg,#fff,#eaf5f7); color:#426574; font-size:1.03rem; font-weight:800; transition:border-color .25s,background .25s,box-shadow .25s,transform .25s; }
.return-assignment-slot bdi { position:absolute; z-index:6; top:-14px; left:50%; display:grid; place-items:center; width:28px; height:28px; border:2px solid #fff; border-radius:50%; background:linear-gradient(145deg,#fff,#dff4ed); box-shadow:0 3px 10px #245c6b30; color:#285768; font-size:.82rem; transform:translateX(-50%); }
.return-assignment-slot.is-selected { z-index:3; border-color:#29aa77; border-bottom-color:#16885b; background:linear-gradient(160deg,#f2fff8,#d8f8e8); color:#14784f; box-shadow:0 5px 16px #28a87545; transform:translateY(-5px); }
.return-assignment-check { position:absolute; top:-12px; left:-7px; display:grid; place-items:center; width:30px; height:30px; border:3px solid #fff; border-radius:50%; background:linear-gradient(145deg,#29c780,#159664); box-shadow:0 4px 12px #168c5b55; opacity:0; transform:scale(.25); }
.return-assignment-check img { width:20px; height:20px; filter:brightness(0) invert(1); }
.is-assigned .return-assignment-slot.is-selected .return-assignment-check { opacity:1; transform:scale(1); transition:opacity .25s ease,transform .4s cubic-bezier(.18,.85,.3,1.3); }
.return-assignment-wheelchair { position:absolute; z-index:4; top:calc(100% - 70px); left:50%; display:grid; place-items:center; width:58px; height:58px; border:4px solid #fff; border-radius:50%; background:linear-gradient(145deg,#31d6a2,#16a9bd 58%,#5479ed); box-shadow:0 10px 24px #168e9b45,inset 0 2px 4px #fff8; transform:translateX(-50%); }
.return-assignment-wheelchair img { width:38px; height:38px; filter:brightness(0) invert(1); }
.is-moving .return-assignment-wheelchair { animation:return-assignment-roll 3.35s cubic-bezier(.32,.08,.2,1) both; }
.return-footsteps { position:absolute; z-index:3; inset:0; pointer-events:none; }
.return-footstep { position:absolute; left:calc(var(--assignment-target-left,50%) + var(--step-x,0px)); top:calc(var(--assignment-target-top,50%) + var(--step-y,0px)); width:14px; height:22px; background:linear-gradient(160deg,#aab2b8,#76818a); clip-path:polygon(49% 0%,61% 2%,71% 8%,80% 13%,89% 22%,95% 32%,93% 42%,87% 50%,83% 59%,79% 69%,76% 81%,71% 92%,63% 98%,53% 100%,43% 99%,34% 95%,28% 88%,25% 78%,23% 67%,19% 58%,13% 50%,7% 42%,5% 32%,9% 22%,17% 15%,27% 10%,39% 7%); filter:drop-shadow(0 2px 2px #314c6933); opacity:0; transform:translate(-50%,0) rotate(var(--step-angle,0deg)) scale(.4); }
.is-moving .return-footstep { animation:return-footstep-appear .38s ease-out both; }
.return-footstep:nth-child(1) { --step-y:135px; --step-x:-7px; --step-angle:-18deg; animation-delay:.80s; }
.return-footstep:nth-child(2) { --step-y:120px; --step-x:7px; --step-angle:18deg; animation-delay:1.05s; }
.return-footstep:nth-child(3) { --step-y:105px; --step-x:-7px; --step-angle:-18deg; animation-delay:1.30s; }
.return-footstep:nth-child(4) { --step-y:90px; --step-x:7px; --step-angle:18deg; animation-delay:1.55s; }
.return-footstep:nth-child(5) { --step-y:75px; --step-x:-7px; --step-angle:-18deg; animation-delay:1.80s; }
.return-footstep:nth-child(6) { --step-y:60px; --step-x:7px; --step-angle:18deg; animation-delay:2.05s; }
@keyframes return-footstep-appear { 0% { opacity:0; transform:translate(-50%,0) rotate(var(--step-angle)) scale(.35); } 55% { opacity:.78; transform:translate(-50%,0) rotate(var(--step-angle)) scale(1.08); } 100% { opacity:.46; transform:translate(-50%,0) rotate(var(--step-angle)) scale(.9); } }
.return-assignment-ground { position:absolute; right:7%; bottom:12px; left:7%; height:5px; border-radius:50%; background:linear-gradient(90deg,transparent,#36a986 15%,#36a986 85%,transparent); }
@keyframes return-assignment-roll { 0% { left:50%; top:calc(100% - 70px); transform:translateX(-50%) rotate(0) scale(1); } 20% { left:var(--assignment-target-left,50%); top:calc(100% - 70px); transform:translateX(-50%) rotate(0) scale(1); } 24% { left:var(--assignment-target-left,50%); top:calc(100% - 70px); transform:translateX(-50%) rotate(0) scale(1); } 100% { left:var(--assignment-target-left,50%); top:var(--assignment-target-top,135px); transform:translateX(-50%) rotate(0) scale(.88); } }
@media (max-width:380px) { .return-assignment-stage { height:205px; } .return-assignment-slots { right:7px; top:20px; left:7px; gap:3px; } .return-assignment-slot { height:70px; } .return-assignment-wheelchair { width:52px; height:52px; } .return-assignment-wheelchair img { width:34px; height:34px; } }
@media (prefers-reduced-motion: reduce) { .is-moving .return-assignment-wheelchair { animation:none; left:var(--assignment-target-left,50%); top:var(--assignment-target-top,135px); } .return-assignment-slot,.return-assignment-check { transition:none !important; } .return-footstep { display:none; } }
.login-shell { background:#fff; }
.login-app { width:min(100%,680px); min-height:100vh; margin:auto; background:#fff; }
.login-header { height:58px; padding:14px 10%; color:#fff; font-weight:bold; background:linear-gradient(to left,rgb(120 157 223 / 84%),rgb(31 93 204 / 84%)),url('/web/static/icons/nasim/bg-CO-8W5dV.jpg') left center/cover no-repeat; background-color:#789ddf; }
.login-content { max-width:600px; margin:auto; padding:145px 6% 32px; text-align:center; }
.login-logo { width:150px; height:auto; margin-bottom:72px; }
.login-prompt { margin:0 0 14px; text-align:right; color:var(--ink); font-size:.82rem; }
.login-input { min-height:44px; border-radius:6px; direction:ltr; text-align:right; }
.login-button { width:100%; min-height:42px; margin-top:16px; border:0; border-radius:12px; background:#789be2; color:#fff; font:inherit; font-weight:bold; cursor:pointer; }
.otp-row { display:flex; justify-content:center; gap:14px; margin:22px 0; }
.otp-input { width:40px; height:40px; padding:0; border:1px solid #8798ff; border-radius:4px; text-align:center; direction:ltr; }
.login-links { display:flex; justify-content:space-between; margin:10px 0 14px; }
.login-links button { border:0; background:none; color:#789be2; font:inherit; font-size:.72rem; cursor:pointer; }
.login-message { min-height:28px; margin-top:14px; font-size:.76rem; }
.login-message.error { margin-inline:auto; padding:9px 12px; border-radius:4px; background:#d92d35; color:#fff; }
.login-message.info { color:#657bd4; }
@media (max-width:480px) { .login-content { padding-top:145px; } }
.login-header { display:flex; align-items:center; justify-content:flex-start; padding:8px 4px 8px; background-image:linear-gradient(to left,rgb(120 157 223 / 84%),rgb(31 93 204 / 84%)),url('/web/static/icons/nasim/bg-CO-8W5dV.jpg'); background-position:left center; background-size:cover; background-repeat:no-repeat; background-color:#789ddf; }
.login-brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:bold; }
.login-brand img { width:53px; height:53px; object-fit:contain; }
.login-brand span { color:var(--navy); font-size:1rem; direction:rtl; unicode-bidi:isolate; }
.login-logo { width:min(375px, 75vw); margin-bottom:72px; }



.login-button:disabled,.login-links button:disabled { opacity:.55; cursor:wait; }
.login-content { padding-top:42px; }
.login-logo { display:block; margin:0 auto 22px; }
.login-role-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 14px; padding:4px; border-radius:14px; background:#f0f2f5; }
.login-role-tab { min-height:46px; border:0; border-radius:11px; background:transparent; color:#667085; font:inherit; font-size:.88rem; cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; }
.login-role-tab.is-active { background:#fff; color:#17356e; font-weight:bold; box-shadow:0 2px 8px #142c4a12; }
.login-role-tab:focus-visible { outline:2px solid #789be2; outline-offset:2px; }
.login-role-image { display:block; width:min(100%,390px); height:250px; margin:0 auto 22px; object-fit:contain; }
@media (max-width:480px) { .login-content { padding-top:38px; } .login-role-image { height:225px; margin-bottom:18px; } }
.otp-input[aria-invalid="true"] { border-color:#d92d35; }
/* Shared visitor navigation */
.visitor-header .visitor-brand { gap:7px; min-width:0; }
.visitor-header .visitor-brand > div { min-width:0; }
.visitor-menu-toggle,.visitor-drawer-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:10px; border:0; background:transparent; cursor:pointer; }
.visitor-menu-toggle img,.visitor-drawer-close img,.visitor-drawer-item img { width:24px; height:24px; object-fit:contain; filter:invert(37%) sepia(54%) saturate(722%) hue-rotate(135deg) brightness(91%) contrast(91%); }
.visitor-menu-toggle:focus-visible,.visitor-drawer-close:focus-visible,.visitor-drawer-item:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.visitor-menu-open,.visitor-menu-open body { overflow:hidden; }
.visitor-drawer { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--ink); overflow:hidden; direction:rtl; }
.visitor-drawer[open] { display:flex; justify-content:flex-start; padding-inline-start:max(0px,calc((100vw - 390px)/2)); }
.visitor-drawer::backdrop { background:#123c6966; backdrop-filter:blur(3px); animation:visitor-backdrop-in .2s ease-out; }
.visitor-drawer-panel { width:min(300px,calc(100vw - 48px)); height:100%; padding:18px 16px max(24px,env(safe-area-inset-bottom)); overflow-y:auto; border-radius:24px 0 0 24px; background:#effafb url('/web/static/icons/nasim/bg-CO-8W5dV.jpg') center top / 100% auto repeat-y; box-shadow:-12px 0 40px #123c6929; animation:visitor-drawer-in .24s ease-out; }
.visitor-drawer-heading { position:relative; display:grid; place-items:center; min-height:150px; padding:35px 0 12px; }
.visitor-drawer-close { position:absolute; top:0; left:0; width:40px; height:40px; padding:9px; }
.visitor-drawer-logo { display:block; width:100%; max-width:250px; height:auto; }
.visitor-drawer-divider { margin:14px 0 20px; border:0; border-top:1px solid #cce1e6; }
.visitor-drawer-links { display:grid; gap:9px; }
.visitor-drawer-item { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:13px 14px; border:1px solid #dce9ed; border-radius:14px; background:#ffffffdf; color:var(--navy); font:inherit; font-size:.94rem; text-align:right; text-decoration:none; cursor:pointer; transition:background .15s,transform .15s; }
.visitor-drawer-item[aria-current="page"] { border-color:#abd9d8; background:#e2f5f3; }
.visitor-drawer-logout { color:#ae4050; }
.visitor-drawer-logout img { filter:invert(35%) sepia(28%) saturate(1330%) hue-rotate(302deg) brightness(90%) contrast(89%); }
.visitor-drawer-item:hover { background:#e7f5f5; }
.visitor-drawer-item:active { transform:scale(.985); }
.visitor-drawer.is-closing .visitor-drawer-panel { animation:visitor-drawer-out .18s ease-in forwards; }
.visitor-drawer.is-closing::backdrop { animation:visitor-backdrop-in .18s ease-in reverse forwards; }
@keyframes visitor-drawer-in { from { transform:translateX(100%); opacity:.5; } to { transform:translateX(0); opacity:1; } }
@keyframes visitor-drawer-out { to { transform:translateX(100%); opacity:0; } }
@keyframes visitor-backdrop-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:359px) { .visitor-header .brand-mark { flex-basis:36px; width:36px; } .visitor-brand h1 { font-size:1rem; } .visitor-role-label { padding-inline:8px; } }
@media (prefers-reduced-motion:reduce) { .visitor-drawer-panel,.visitor-drawer::backdrop,.visitor-drawer.is-closing .visitor-drawer-panel,.visitor-drawer.is-closing::backdrop { animation:none; } .visitor-drawer-item { transition:none; } }

/* Staff pages use the lavender visual theme and local staff background asset. */
.staff-shell { --navy:#403d78; --blue:#625bb3; --teal:#7770d0; --ink:#302e58; --muted:#6f6d8d; --line:#d3d0f3; background:#e2e1ff; }
.staff-shell .visitor-app { background:#e2e1ff url('/web/static/icons/nasim/bg-PO-8W5dV.png') center top / 100% auto repeat-y; }
.staff-shell .visitor-role-label { background:#d7d5ff; color:#514b9d; }
.staff-shell .visitor-breadcrumb { background:#ffffffed; }
.staff-shell .visitor-breadcrumb a { background:#e6e4ff; color:#625bb3; }
.staff-shell .content-card,.staff-shell .panel { border-color:#d9d6f3; background:rgba(255,255,255,.93); box-shadow:0 8px 22px #403d7818; }
.staff-shell .large-content-icon,.staff-shell .panel-icon { background:linear-gradient(145deg,#7770d0,#625bb3 58%,#9690ed) !important; box-shadow:0 8px 18px #625bb330; }
.staff-shell .menu-card { border-color:#d9d6f3; box-shadow:0 7px 18px #403d7818; }
.staff-shell .secondary { background:#e8e6ff; color:#514b9d; }
.staff-shell footer a { color:#514b9d; }
.staff-shell .staff-drawer .visitor-drawer-panel { background:#e2e1ff url('/web/static/icons/nasim/bg-PO-8W5dV.png') center top / 100% auto repeat-y; }
.staff-shell .visitor-drawer-item[aria-current="page"] { border-color:#bcb8eb; background:#e6e4ff; }
.staff-shell .visitor-drawer-item:hover { background:#efeeff; }
.staff-shell .visitor-drawer-item:focus-visible,.staff-shell .visitor-menu-toggle:focus-visible,.staff-shell .visitor-drawer-close:focus-visible { outline-color:#625bb3; }

/* Staff wheelchair custody check (mock UI until the Tracker endpoint is wired). */
.staff-custody-panel { padding:20px; }
.staff-service-heading { margin:0 0 17px; }
.staff-service-heading h2 { margin:0 0 5px; color:#403d78; font-size:1.12rem; }
.staff-service-heading p { margin:0; color:#6f6d8d; font-size:.86rem; line-height:1.9; }
.staff-shell #check-wheelchair { border-color:#625bb3; background:linear-gradient(135deg,#7770d0,#5b54aa); box-shadow:0 7px 16px #625bb333; }
.staff-custody-result { margin-top:15px; padding:15px; border:1px solid #d3d0f3; border-right:4px solid #7770d0; border-radius:16px; background:linear-gradient(125deg,#f7f6ff,#fff 72%); }
.staff-custody-result[hidden],.staff-ready-button[hidden],.staff-wheelchair-plate[hidden] { display:none !important; }
.staff-custody-message { min-height:19em; margin:0; color:#403d78; font-size:.93rem; line-height:2.05; }
.staff-custody-message.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#7770d0; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.staff-custody-message.is-complete::after { animation:none; opacity:0; }
.staff-wheelchair-plate:not([hidden]) { display:inline-flex; position:relative; align-items:center; justify-content:center; min-width:76px; margin-inline:5px; padding:0 9px; border:2px solid #514b9d; border-radius:7px; background:linear-gradient(180deg,#fff 0%,#eeedff 100%); box-shadow:0 2px 0 #514b9d,0 4px 9px #403d7824,inset 0 0 0 2px #fff; color:#302e58; font-family:Arial,sans-serif; font-size:1.16rem; font-weight:800; letter-spacing:.08em; line-height:1.65; text-align:center; vertical-align:middle; }
.staff-wheelchair-plate:not([hidden])::before { position:absolute; inset:3px; border:1px solid #c4c0ed; border-radius:3px; content:""; pointer-events:none; }
.staff-ready-button { margin-top:15px; border:0; background:linear-gradient(135deg,#625bb3,#49438f); color:#fff; box-shadow:0 6px 15px #625bb333; }
.staff-ready-button:hover { filter:brightness(1.05); }
.staff-demo-hint { margin:13px 0 0; color:#777493; font-size:.74rem; line-height:1.8; }
.staff-service-ready-view[hidden],#custody-view[hidden] { display:none !important; }
.staff-service-ready-view { display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; }
.staff-service-ready-view h2 { align-self:stretch; margin:0; padding-bottom:11px; border-bottom:1px solid #e2e0f5; color:#403d78; font-size:1.12rem; }
.staff-service-ready-message { max-width:36rem; margin:0; color:#403d78; font-size:.96rem; font-weight:600; line-height:2.1; }
.staff-service-ready-message.is-typing::after { display:inline-block; width:2px; height:1.05em; margin-inline-start:2px; background:#7770d0; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.staff-service-ready-message.is-complete::after { animation:none; opacity:0; }
.staff-service-ready-message .staff-wheelchair-plate { margin-inline:4px; }
.staff-animation-tap-target { display:block; width:min(100%,260px); padding:0; overflow:hidden; border:0; border-radius:18px; outline:0; background:#f6f6f6; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; }
.staff-animation-tap-target[hidden] { display:none !important; }
.staff-animation-tap-target:hover,.staff-animation-tap-target:active { transform:none; filter:none; box-shadow:none; background:#f6f6f6; }
.staff-animation-tap-target:focus:not(:focus-visible) { outline:none; box-shadow:none; }
.staff-animation-tap-target:disabled { cursor:wait; }
.staff-service-ready-animation { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.staff-accepted-service-location { width:100%; max-width:520px; }
.staff-accepted-service-map { height:clamp(190px,34vh,300px); }
.staff-accepted-service-map[hidden],.staff-accepted-service-map-message[hidden] { display:none !important; }
.staff-accepted-service-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(100%,360px); min-height:60px; max-height:none; margin:0; overflow:visible; background:transparent; }
.staff-accepted-service-stage.has-post-pickup-instruction { width:100%; min-height:0; max-height:none; }
.staff-accepted-service-stage[hidden],.staff-accepted-service-animation[hidden],.staff-post-pickup-instruction[hidden] { display:none !important; }
.staff-accepted-service-animation { display:flex; direction:ltr; align-items:center; justify-content:center; gap:11px; width:100%; height:60px; max-height:60px; overflow:hidden; }
.staff-service-animation-icon { display:grid; flex:0 0 46px; place-items:center; width:46px; height:46px; border:2px solid #fff; border-radius:16px; box-shadow:0 6px 16px #514b9d2e; }
.staff-service-animation-icon img { display:block; width:28px; height:28px; filter:brightness(0) invert(1); }
.staff-service-animation-wheelchair { background:linear-gradient(145deg,#31c5d5,#536bdc 68%,#7857d8); animation:staff-wheelchair-glide 1.8s ease-in-out infinite; }
.staff-service-animation-visitor { background:linear-gradient(145deg,#ffbf58,#fa785c 55%,#e44f9f); animation:staff-visitor-bob 1.5s ease-in-out infinite; }
.staff-service-route-track { position:relative; flex:1 1 auto; min-width:28px; height:7px; overflow:hidden; border-radius:99px; background:repeating-linear-gradient(90deg,#42cbd0 0 9px,#8370e2 9px 18px,#f28b91 18px 27px,transparent 27px 35px); background-size:70px 7px; animation:staff-route-dashes .7s linear infinite; }
.staff-visitor-details { width:100%; margin:8px 0 0; padding:12px 16px; border:1px solid #e5e1f5; border-radius:16px; background:linear-gradient(135deg,#faf9ff,#f2fbfb); color:#403d78; text-align:right; }
.staff-visitor-details[hidden] { display:none !important; }
.staff-visitor-details h3 { margin:0 0 6px; font-size:.92rem; }
.staff-visitor-details p { margin:3px 0; font-size:.86rem; line-height:1.7; }
.staff-visitor-details p span { color:#77738e; }
.staff-visitor-phone-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.staff-visitor-phone-link { display:inline-flex; direction:ltr; align-items:center; gap:8px; color:inherit; text-decoration:none !important; -webkit-tap-highlight-color:transparent; }
.staff-visitor-phone-link[hidden] { display:none !important; }
.staff-visitor-phone-link:hover,.staff-visitor-phone-link:active { color:inherit; text-decoration:none !important; }
.staff-visitor-phone-link:focus-visible { border-radius:999px; outline:2px solid #7770d0; outline-offset:3px; }
.staff-visitor-phone-icon { display:grid; flex:0 0 32px; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,#789ddf,#536bdc 65%,#7857d8); box-shadow:0 3px 9px #514b9d35; }
.staff-visitor-phone-icon img { display:block; width:17px; height:17px; filter:brightness(0) invert(1); }
.staff-post-pickup-instruction { display:block; width:100%; height:auto; min-height:0; margin:0; color:#403d78; font-size:.88rem; font-weight:700; line-height:1.9; text-align:center; }
.staff-post-pickup-instruction.is-typing::after { display:inline-block; flex:0 0 2px; width:2px; height:1.05em; margin-inline-start:2px; background:#7770d0; vertical-align:middle; content:""; animation:typing-caret .75s steps(1,end) infinite; }
.staff-post-pickup-instruction.is-complete::after { animation:none; opacity:0; }
@keyframes staff-route-dashes { to { background-position:35px 0; } }
@keyframes staff-wheelchair-glide { 0%,100% { transform:translateX(-3px) rotate(-4deg); } 50% { transform:translateX(3px) rotate(4deg); } }
@keyframes staff-visitor-bob { 0%,100% { transform:translateY(1px) scale(.97); } 50% { transform:translateY(-3px) scale(1.04); } }
.staff-stop-service-button { max-width:360px; border:1px solid #d7b2bd; background:linear-gradient(135deg,#a94f6a,#873b58); color:#fff; box-shadow:0 6px 15px #873b5828; }
.staff-service-action-button { max-width:360px; }
.staff-service-action-button[hidden] { display:none !important; }
@media (prefers-reduced-motion:reduce) { .staff-custody-message.is-typing::after,.staff-service-ready-message.is-typing::after,.staff-post-pickup-instruction.is-typing::after { animation:none; } .staff-service-route-track,.staff-service-animation-wheelchair,.staff-service-animation-visitor { animation:none; } }
.staff-dispatch-status { min-height:1.5em; margin:0; color:#514b9d; font-size:.82rem; line-height:1.8; }
.staff-dispatch-status.error { color:#a6384d; }
.staff-dispatch-status.success { color:#34765b; }
.staff-offer-dialog { width:min(520px,calc(100vw - 24px)); max-width:none; max-height:min(92dvh,760px); padding:0; overflow:auto; border:1px solid #d3d0f3; border-radius:22px; background:#e2e1ff url('/web/static/icons/nasim/bg-PO-8W5dV.png') center top/cover no-repeat; color:#302e58; box-shadow:0 18px 60px #25204c55; }
.staff-offer-dialog::backdrop { background:#211e45a8; backdrop-filter:blur(3px); }
.staff-offer-card { display:grid; gap:12px; padding:20px; }
.staff-offer-card h2 { margin:0; color:#403d78; font-size:1.18rem; }
.staff-offer-visitor,.staff-offer-coordinates,.staff-offer-message { margin:0; font-size:.86rem; line-height:1.8; }
.staff-offer-map { width:100%; height:clamp(230px,42vh,360px); border:1px solid #d3d0f3; border-radius:15px; background:#f5f4ff; }
.staff-offer-coordinates { direction:rtl; color:#6f6d8d; font-size:.72rem; }
.staff-offer-countdown-label { margin:2px 0 -10px; color:#6f6d8d; font-size:.8rem; }
.staff-offer-countdown { margin:0; color:#514b9d; font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; }
.staff-offer-message { min-height:1.6em; color:#a6384d; }
.staff-offer-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.staff-offer-actions button { min-height:46px; margin:0; }
.staff-offer-actions .secondary { border:1px solid #d6c1cf; background:#fff; color:#8c4058; }
.staff-offer-actions button:disabled { opacity:.55; cursor:wait; }
.staff-offer-dialog[open] { animation:staff-offer-appear .18s ease-out; }
@keyframes staff-offer-appear { from { transform:translateY(10px) scale(.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@media (max-width:420px) { .staff-offer-card { padding:16px; } .staff-offer-map { height:34vh; min-height:210px; } }
@media (prefers-reduced-motion:reduce) { .staff-offer-dialog[open] { animation:none; } }