:root {
  color-scheme: light;
  --fog: #e9eef0;
  --paper: #f8faf9;
  --ink: #172226;
  --muted: #66767b;
  --teal: #264b56;
  --teal-soft: #dbe7e7;
  --orange: #e06c43;
  --orange-soft: #f8e7df;
  --green: #3f826b;
  --green-soft: #e0eee9;
  --red: #aa463a;
  --line: #cad5d7;
  --shadow: 0 18px 54px rgba(29, 49, 55, .09);
  --display: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --body: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--fog); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 12px; top: 10px; z-index: 100; padding: 10px 14px; color: white; background: var(--teal); border-radius: 6px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid rgba(224,108,67,.48); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { display: block; margin-bottom: 12px; color: var(--muted); font: 600 11px/1.1 var(--mono); letter-spacing: .16em; }

.brand-lockup { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-lockup strong { font: 750 24px/1 var(--display); letter-spacing: -.06em; }
.brand-lockup > span:last-child { padding-left: 11px; border-left: 1px solid currentColor; font: 600 9px/1.2 var(--mono); letter-spacing: .12em; opacity: .62; }
.brand-signal { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px 11px 11px 3px; color: white; background: var(--teal); font: 28px/1 var(--mono); }
.brand-lockup.compact .brand-signal { width: 35px; height: 35px; font-size: 23px; }
.brand-lockup.compact strong { font-size: 21px; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, 1.2fr) minmax(400px, .8fr); background: var(--paper); }
.auth-intro { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: clamp(48px, 8vw, 120px); overflow: hidden; color: white; background: var(--teal); }
.auth-intro::after { content: ""; position: absolute; right: -85px; bottom: -130px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 104px rgba(255,255,255,.018); }
.auth-intro .brand-lockup { position: absolute; top: 45px; left: clamp(48px, 8vw, 120px); }
.auth-intro .brand-signal { color: var(--teal); background: white; }
.route-kicker { margin: 0 0 24px; font: 600 11px/1 var(--mono); letter-spacing: .2em; color: #bbd1d4; }
.auth-intro h1 { position: relative; z-index: 1; max-width: 720px; margin: 0; font: 760 clamp(38px, 5.5vw, 76px)/1.13 var(--display); letter-spacing: -.055em; }
.auth-lede { max-width: 530px; margin: 30px 0 42px; color: #d7e4e5; font-size: 16px; line-height: 1.85; }
.route-line { position: relative; z-index: 1; display: grid; grid-template-columns: 10px max-content minmax(24px, 80px) max-content minmax(24px, 80px) max-content; align-items: center; gap: 10px; color: #c5d9dc; font: 500 11px/1 var(--mono); }
.route-line i { display: block; height: 1px; background: rgba(255,255,255,.35); }
.route-line i:first-child { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--orange); }
.auth-panel { display: grid; align-content: center; padding: clamp(32px, 7vw, 94px); background: var(--paper); }
.auth-tabs { display: flex; gap: 28px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.auth-tabs button { position: relative; border: 0; padding: 0 2px 15px; color: var(--muted); background: none; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.auth-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--orange); }
.auth-form { width: min(100%, 440px); }
.auth-form header { margin-bottom: 32px; }
.auth-form h2, .admin-login-card h1 { margin: 0 0 10px; font: 760 31px/1.2 var(--display); letter-spacing: -.045em; }
.auth-form header p, .admin-login-card > p { margin: 0; color: var(--muted); line-height: 1.65; }
.auth-form label, .admin-login-card label, .action-dialog label { display: grid; gap: 9px; margin: 0 0 20px; color: #415156; font-size: 13px; font-weight: 650; }
.auth-form input, .admin-login-card input, .action-dialog input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 14px 15px; color: var(--ink); background: white; box-shadow: 0 1px 0 rgba(255,255,255,.6); transition: border-color .18s, box-shadow .18s; }
.auth-form input:focus, .admin-login-card input:focus, .action-dialog input:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 4px rgba(38,75,86,.1); }
.primary-action { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 28px; border: 0; border-radius: 9px; padding: 15px 17px; color: white; background: var(--teal); font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px rgba(38,75,86,.18); }
.primary-action b { color: #f7aa8e; font: 21px/1 var(--mono); }
.primary-action:disabled, .primary-inline:disabled { opacity: .55; cursor: wait; }
.form-error { margin: 4px 0 14px; border-left: 3px solid var(--red); padding: 10px 12px; color: #853a32; background: #faece8; font-size: 13px; line-height: 1.55; }

.portal-shell { min-height: 100vh; background: var(--fog); }
.portal-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; min-height: 72px; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(248,250,249,.94); backdrop-filter: blur(16px); }
.header-status { display: flex; align-items: center; gap: 9px; margin-left: auto; margin-right: 28px; color: var(--muted); font: 500 12px/1 var(--mono); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(63,130,107,.1); }
.quiet-button, .icon-action { border: 1px solid var(--line); border-radius: 7px; padding: 9px 13px; color: #4f6065; background: rgba(255,255,255,.55); cursor: pointer; }
.quiet-button:hover, .icon-action:hover { border-color: #9cadb0; background: white; }
.portal-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: calc(100vh - 72px); }
.manifest { padding: clamp(36px, 5vw, 68px) clamp(24px, 4vw, 52px); border-right: 1px solid var(--line); background: var(--paper); }
.manifest h1 { margin: 0 0 38px; font: 760 29px/1.2 var(--display); letter-spacing: -.045em; }
.identity-block { display: grid; gap: 8px; margin-bottom: 22px; }
.identity-block span, .membership-stamp > span { color: var(--muted); font-size: 12px; }
.identity-block strong { overflow-wrap: anywhere; font: 720 21px/1.3 var(--display); }
.identity-block code { color: #738488; font: 10px/1.3 var(--mono); letter-spacing: .12em; }
.membership-stamp { position: relative; display: grid; gap: 8px; margin: 30px 0; border: 1px solid #a9c1ba; border-radius: 10px 10px 10px 3px; padding: 18px; background: var(--green-soft); overflow: hidden; }
.membership-stamp::after { content: "VALID"; position: absolute; right: -5px; bottom: -8px; color: rgba(63,130,107,.09); font: 800 41px/1 var(--mono); transform: rotate(-8deg); }
.membership-stamp.expired { border-color: #dfb5a7; background: var(--orange-soft); }
.membership-stamp.expired::after { content: "HOLD"; color: rgba(170,70,58,.08); }
.membership-stamp strong { position: relative; z-index: 1; color: var(--green); font: 750 20px/1.2 var(--display); }
.membership-stamp.expired strong { color: var(--red); }
.membership-stamp small { position: relative; z-index: 1; color: #516a63; font: 500 11px/1.4 var(--mono); }
.manifest-notes { margin: 0; border-top: 1px solid var(--line); }
.manifest-notes div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.manifest-notes dt { color: var(--muted); }
.manifest-notes dd { margin: 0; font-weight: 650; }
.privacy-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.device-deck { padding: clamp(36px, 5vw, 70px) clamp(20px, 6vw, 86px) 80px; min-width: 0; }
.deck-header, .office-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.deck-header h2, .office-title h1 { margin: 0 0 9px; font: 760 clamp(28px, 3vw, 42px)/1.16 var(--display); letter-spacing: -.05em; }
.deck-header p, .office-title p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.icon-action { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font: 22px/1 var(--mono); }
.device-list { display: grid; gap: 18px; max-width: 980px; }
.device-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 170px 160px; min-height: 146px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 8px 30px rgba(38,75,86,.055); overflow: hidden; }
.device-card::before, .device-card::after { content: ""; position: absolute; right: 149px; z-index: 2; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; background: var(--fog); }
.device-card::before { top: -11px; }.device-card::after { bottom: -11px; }
.device-main { padding: 27px 30px; min-width: 0; }
.device-route { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: .1em; }
.device-route i { width: 6px; height: 6px; border-radius: 50%; background: #a8b5b8; }
.device-card.online .device-route i { background: var(--green); box-shadow: 0 0 0 4px rgba(63,130,107,.12); }
.device-main h3 { margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 730 22px/1.25 var(--display); letter-spacing: -.035em; }
.device-main p { margin: 0; color: var(--muted); font-size: 12px; }
.device-meta { display: grid; align-content: center; gap: 8px; border-left: 1px dashed #b8c6c8; padding: 22px; }
.device-meta span { color: var(--muted); font-size: 10px; }.device-meta strong { font: 600 12px/1.5 var(--mono); }
.boarding-zone { display: grid; align-content: center; justify-items: center; gap: 11px; border-left: 1px dashed #b8c6c8; padding: 22px 20px; text-align: center; }
.boarding-zone small { color: var(--muted); font: 600 9px/1 var(--mono); letter-spacing: .12em; }
.board-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 112px; border: 0; border-radius: 7px; padding: 12px 13px; color: white; background: var(--teal); text-decoration: none; font-size: 13px; font-weight: 700; }
.board-button[aria-disabled="true"] { color: #7e8a8d; background: #e1e7e8; pointer-events: none; }
.device-remove { border: 0; padding: 3px; color: var(--muted); background: none; font-size: 11px; text-decoration: underline; cursor: pointer; }
.notice-panel { display: flex; gap: 16px; max-width: 760px; margin-bottom: 24px; border: 1px solid #e0b8ab; border-radius: 10px; padding: 20px; background: var(--orange-soft); }
.notice-icon { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 50%; color: white; background: var(--orange); font: 20px/1 var(--mono); }
.notice-panel strong { display: block; margin-bottom: 6px; }.notice-panel p { margin: 0; color: #765a50; font-size: 13px; line-height: 1.65; }
.empty-state { display: grid; justify-items: start; max-width: 580px; border: 1px dashed #b8c6c8; border-radius: 12px; padding: 34px; color: var(--muted); background: rgba(248,250,249,.55); }
.empty-state > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 11px; color: white; background: var(--teal); font-size: 26px; }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); font: 700 19px/1.3 var(--display); }.empty-state p { margin: 0; line-height: 1.7; font-size: 13px; }
.skeleton-ticket { height: 146px; border-radius: 13px; background: linear-gradient(100deg,#eef2f2 25%,#f8fafa 40%,#eef2f2 55%); background-size: 220% 100%; animation: scan 1.3s ease infinite; }
@keyframes scan { to { background-position-x: -220%; } }

.notification-console { max-width: 980px; margin-top: clamp(60px,8vw,104px); padding-top: 34px; border-top: 1px solid var(--line); }
.notification-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.notification-heading h2 { margin: 0 0 8px; font: 760 clamp(27px,3vw,38px)/1.15 var(--display); letter-spacing: -.05em; }
.notification-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.route-state { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; color: #6b797c; background: #e2e8e9; font-size: 11px; font-weight: 700; }
.route-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.route-state.is-live { color: #326b57; background: var(--green-soft); }.route-state.is-live i { box-shadow: 0 0 0 4px rgba(63,130,107,.12); }
.route-state.is-blocked { color: #a54e3e; background: #f6e3dc; }.route-state.is-blocked i { box-shadow: 0 0 0 4px rgba(165,78,62,.12); }

.notification-route-map { display: grid; grid-template-columns: minmax(170px,1fr) minmax(90px,.72fr) minmax(170px,.9fr); align-items: center; min-height: 118px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; padding: 18px 22px; background: #eef3f3; overflow: hidden; }
.route-events { display: grid; gap: 7px; }.route-events span { position: relative; width: max-content; border: 1px solid #c6d2d4; border-radius: 5px; padding: 6px 9px 6px 20px; color: #788689; background: rgba(248,250,249,.62); font-size: 10px; }
.route-events span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #a6b3b5; transform: translateY(-50%); }
.route-events span.is-selected { border-color: #a7c2b9; color: #326b57; background: var(--green-soft); }.route-events span.is-selected::before { background: var(--green); }
.route-track { display: grid; grid-template-columns: 1fr auto; align-items: center; min-width: 0; color: #94a4a7; }.route-track i { height: 1px; background: repeating-linear-gradient(90deg,#9dadaf 0 5px,transparent 5px 9px); }.route-track b { font: 17px/1 var(--mono); }
.route-destination { position: relative; display: grid; gap: 5px; border-left: 4px solid #aebbbd; padding: 12px 14px; background: var(--paper); box-shadow: 0 5px 18px rgba(38,75,86,.05); }
.route-destination small { color: var(--muted); font: 600 8px/1 var(--mono); letter-spacing: .14em; }.route-destination strong { font: 720 16px/1.2 var(--display); }.route-destination span { max-width: 220px; overflow: hidden; color: var(--muted); font: 500 9px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.notification-route-map.is-live { background: linear-gradient(90deg,#eef3f3 0,#edf4f0 76%,#e4efe9 100%); }.notification-route-map.is-live .route-track { color: var(--green); }.notification-route-map.is-live .route-track i { background: repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 10px); animation: route-flow .9s linear infinite; }.notification-route-map.is-live .route-destination { border-left-color: var(--green); }
@keyframes route-flow { to { background-position-x: 10px; } }

.notification-form { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr); border: 1px solid var(--line); border-radius: 13px; background: var(--paper); overflow: hidden; box-shadow: 0 8px 30px rgba(38,75,86,.05); }
.notification-controls { min-width: 0; padding: clamp(22px,3.5vw,34px); }
.notification-master { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 4px; padding-bottom: 24px; border-bottom: 1px solid var(--line); cursor: pointer; }
.notification-master > span,.privacy-choice > span,.event-fieldset label > span,.notification-device > span { display: grid; gap: 4px; }.notification-master strong { font: 730 18px/1.3 var(--display); }.notification-master small,.privacy-choice small,.event-fieldset small,.notification-device small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-master input[role="switch"],.privacy-choice input[role="switch"] { appearance: none; position: relative; flex: 0 0 auto; width: 42px; height: 23px; margin: 0; border: 1px solid #aab8ba; border-radius: 999px; background: #d9e0e1; cursor: pointer; transition: background .18s,border-color .18s; }
.notification-master input[role="switch"]::after,.privacy-choice input[role="switch"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(25,42,47,.2); transition: transform .18s; }
.notification-master input[role="switch"]:checked,.privacy-choice input[role="switch"]:checked { border-color: var(--green); background: var(--green); }.notification-master input[role="switch"]:checked::after,.privacy-choice input[role="switch"]:checked::after { transform: translateX(19px); }
.notification-master input[role="switch"]:disabled,.privacy-choice input[role="switch"]:disabled { cursor: not-allowed; opacity: .55; }
.notification-fieldset { min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); padding: 24px 0; }.notification-fieldset legend { padding: 0 0 15px; font: 700 12px/1.2 var(--display); }
.token-input { display: grid; grid-template-columns: 55px minmax(0,1fr); align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }.token-input input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; color: var(--ink); background: white; }.token-input input:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 3px rgba(38,75,86,.09); }
.token-state { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 9px 0 0 67px; color: var(--muted); font-size: 10px; line-height: 1.55; }.text-action { flex: 0 0 auto; border: 0; padding: 0; color: var(--teal); background: none; font-size: 10px; text-decoration: underline; cursor: pointer; }.danger-text { color: var(--red); }
.token-help { display: grid; gap: 5px; margin: 12px 0 0 67px; color: var(--muted); font-size: 10px; line-height: 1.6; }.token-help a { width: fit-content; color: var(--teal); font-weight: 750; text-decoration: none; }.token-help a:hover { text-decoration: underline; text-underline-offset: 3px; }
.event-fieldset { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.event-fieldset legend { grid-column: 1 / -1; }.event-fieldset label { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #f5f8f7; cursor: pointer; }.event-fieldset label:has(input:checked) { border-color: #a8c3ba; background: var(--green-soft); }.event-fieldset input,.notification-device input,.scope-options input { margin: 2px 0 0; accent-color: var(--green); }.event-fieldset strong { font-size: 11px; }
.privacy-choice { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; cursor: pointer; }.privacy-choice strong { font-size: 12px; }
.scope-options { display: flex; gap: 20px; margin-bottom: 14px; }.scope-options label { display: flex; align-items: center; gap: 7px; font-size: 11px; cursor: pointer; }
.notification-device-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; transition: opacity .18s; }.notification-device-list.is-disabled { opacity: .48; }.notification-device { display: flex; align-items: flex-start; gap: 9px; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: white; cursor: pointer; }.notification-device strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.field-note { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.notification-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 22px; }.notification-controls > .form-error { margin-top: 20px; }

.delivery-log { min-width: 0; border-left: 1px dashed #b5c3c5; padding: clamp(22px,3vw,30px); background: #eef3f3; }.delivery-log > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }.delivery-log h3 { margin: 0; font: 730 18px/1.2 var(--display); }.compact-action { width: 32px; height: 32px; font-size: 17px; }
.delivery-list { display: grid; }.delivery-item { position: relative; display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 10px; padding: 0 0 18px; }.delivery-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: -1px; border-left: 1px dashed #aebcbe; }.delivery-item > i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 3px solid #eef3f3; border-radius: 50%; background: #94a4a7; box-shadow: 0 0 0 1px #94a4a7; }.delivery-item.sent > i { background: var(--green); box-shadow: 0 0 0 1px var(--green); }.delivery-item.failed > i,.delivery-item.blocked > i { background: var(--red); box-shadow: 0 0 0 1px var(--red); }.delivery-item.retry > i,.delivery-item.working > i { background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.delivery-copy { min-width: 0; }.delivery-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }.delivery-event { color: var(--muted); font: 600 8px/1 var(--mono); letter-spacing: .1em; }.delivery-status { border-radius: 999px; padding: 4px 6px; color: #66777a; background: #dde4e5; font-size: 8px; font-weight: 700; }.delivery-status.sent { color: #326b57; background: #d9eae4; }.delivery-status.failed,.delivery-status.blocked { color: #8d4137; background: #f5dfd9; }.delivery-status.retry,.delivery-status.working { color: #87523d; background: #f5e4dc; }
.delivery-title { display: block; overflow: hidden; margin-bottom: 4px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.delivery-meta { color: var(--muted); font: 500 8px/1.4 var(--mono); }.delivery-error { margin: 7px 0 0; border-left: 2px solid var(--orange); padding-left: 7px; color: #805145; font-size: 9px; line-height: 1.5; }
.delivery-empty { border: 1px dashed #b8c6c8; border-radius: 9px; padding: 23px 18px; color: var(--muted); text-align: center; }.delivery-empty > span { display: block; margin-bottom: 11px; color: #91a1a4; font: 700 12px/1 var(--mono); letter-spacing: .18em; }.delivery-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; }.delivery-empty p { margin: 0; font-size: 10px; line-height: 1.6; }

.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: var(--fog); }
.admin-login::before { content: ""; position: fixed; inset: 0 0 auto; height: 9px; background: repeating-linear-gradient(90deg,var(--teal) 0 46px,var(--orange) 46px 58px,var(--paper) 58px 63px); }
.admin-login-card { width: min(100%, 430px); border: 1px solid var(--line); border-radius: 14px; padding: clamp(28px, 6vw, 48px); background: var(--paper); box-shadow: var(--shadow); }
.admin-login-card .brand-lockup { margin-bottom: 47px; }.admin-login-card > .eyebrow { margin-top: 0; }.admin-login-card > p { margin-bottom: 30px; }
.back-link { display: block; margin-top: 24px; color: var(--muted); text-align: center; font-size: 12px; }
.admin-shell { min-height: 100vh; background: var(--fog); }.admin-header .admin-identity { margin-left: auto; margin-right: 18px; color: var(--muted); font: 500 11px/1 var(--mono); }
.admin-main { width: min(100% - 40px, 1280px); margin: 0 auto; padding: clamp(38px, 6vw, 76px) 0 90px; }
.primary-inline { border: 0; border-radius: 7px; padding: 11px 15px; color: white; background: var(--teal); font-weight: 700; cursor: pointer; }
.manifest-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.search-field { display: flex; align-items: center; width: min(100%, 420px); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.search-field b { padding-left: 14px; color: var(--muted); font: 20px/1 var(--mono); }.search-field input { min-width: 0; flex: 1; border: 0; padding: 12px 13px; outline: 0; background: transparent; }
.search-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(38,75,86,.09); }.result-count { color: var(--muted); font: 500 11px/1.4 var(--mono); }
.user-table-wrap { border: 1px solid var(--line); border-radius: 11px; background: var(--paper); overflow: hidden; }
.user-table { width: 100%; border-collapse: collapse; text-align: left; }
.user-table th { padding: 13px 18px; color: var(--muted); background: #eff3f3; font: 600 10px/1.3 var(--mono); letter-spacing: .08em; }
.user-table td { padding: 17px 18px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.user-name { display: grid; gap: 4px; }.user-name strong { font-size: 14px; }.user-name code { color: var(--muted); font: 9px/1 var(--mono); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; color: #326b57; background: var(--green-soft); font-size: 11px; font-weight: 700; }
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status-chip.expired { color: #915340; background: var(--orange-soft); }.status-chip.disabled { color: #6a7476; background: #e5e9ea; }
.date-code { color: #4d5b5f; font: 500 11px/1.5 var(--mono); }
.row-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.row-actions button { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; color: #526266; background: white; font-size: 11px; cursor: pointer; }.row-actions button:hover { border-color: #9dacaf; }.row-actions .danger { color: var(--red); }
.transaction-section { margin-top: 52px; }.transaction-section > header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 15px; }.transaction-section h2 { margin: 0; font: 730 22px/1.2 var(--display); letter-spacing: -.035em; }
.service-settings { margin-top: 52px; border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px,4vw,34px); background: rgba(248,250,249,.78); }
.service-settings > header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 28px; }
.service-settings h2 { margin: 0 0 7px; font: 730 22px/1.2 var(--display); letter-spacing: -.035em; }.service-settings header p { margin: 0; color: var(--muted); font-size: 12px; }
.service-settings-form { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(260px,1.15fr) minmax(240px,1fr); gap: 18px; align-items: end; }
.service-settings-form label { display: grid; gap: 8px; color: #415156; font-size: 12px; font-weight: 650; }.service-settings-form input[type="url"],.service-settings-form input[type="password"] { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; background: white; }
.service-settings-form input:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 4px rgba(38,75,86,.1); }.service-switch { grid-template-columns: auto 1fr!important; align-items: center; align-self: stretch; border-right: 1px solid var(--line); padding-right: 18px; }.service-switch input { width: 18px; height: 18px; accent-color: var(--teal); }.service-switch span { display: grid; gap: 4px; }.service-switch small,.setting-note { color: var(--muted); font-size: 10px; font-weight: 500; }
.service-settings-form .setting-note { grid-column: 2 / 3; margin: -10px 0 0; }.service-settings-form .form-error { grid-column: 1 / -1; }.service-settings-form footer { grid-column: 3 / 4; display: flex; justify-content: flex-end; gap: 9px; }
.transaction-list { border-top: 1px solid var(--line); }.transaction-row { display: grid; grid-template-columns: minmax(160px,1fr) 130px 190px; gap: 20px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 12px; }.transaction-row strong { display: block; margin-bottom: 4px; }.transaction-row span, .transaction-row code { color: var(--muted); }.transaction-row code { font: 500 10px/1.5 var(--mono); }
.compact-empty { max-width: none; margin: 25px; padding: 27px; }.compact-empty > span { width: 34px; height: 34px; margin-bottom: 12px; font-size: 19px; }
.action-dialog { width: min(calc(100% - 32px), 470px); border: 1px solid var(--line); border-radius: 13px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(19,37,43,.23); }.action-dialog::backdrop { background: rgba(20,34,39,.46); backdrop-filter: blur(3px); }.action-dialog form { padding: 28px; }.action-dialog header { position: relative; margin-bottom: 24px; }.action-dialog h2 { margin: 0; font: 730 23px/1.25 var(--display); }.dialog-close { position: absolute; right: -5px; top: -7px; border: 0; padding: 5px; color: var(--muted); background: none; font: 24px/1 var(--mono); cursor: pointer; }.action-dialog footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 9px; width: min(calc(100% - 36px), 370px); }.toast { border-left: 4px solid var(--green); border-radius: 8px; padding: 13px 15px; color: white; background: #21383e; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease both; }.toast.error { border-left-color: var(--orange); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }.auth-intro { min-height: auto; padding: 105px 28px 44px; }.auth-intro .brand-lockup { top: 30px; left: 28px; }.auth-intro h1 { font-size: clamp(34px, 9vw, 52px); }.auth-lede { margin: 22px 0 28px; }.route-line { display: none; }.auth-panel { padding: 36px 28px 60px; }.auth-tabs { margin-bottom: 33px; }
  .portal-grid { grid-template-columns: 1fr; }.manifest { border-right: 0; border-bottom: 1px solid var(--line); padding: 30px 24px; }.manifest h1 { margin-bottom: 25px; }.identity-block { grid-template-columns: auto 1fr; align-items: baseline; }.identity-block code { grid-column: 1 / -1; }.membership-stamp { margin: 22px 0; }.manifest-notes, .privacy-note { display: none; }.device-deck { padding: 35px 20px 65px; }
  .device-card { grid-template-columns: minmax(0,1fr) 145px; }.device-meta { grid-column: 1; grid-row: 2; border-top: 1px dashed #b8c6c8; border-left: 0; padding: 14px 22px; }.boarding-zone { grid-column: 2; grid-row: 1 / span 2; }.device-card::before,.device-card::after { right: 134px; }
  .user-table-wrap { overflow-x: auto; }.user-table { min-width: 860px; }
  .notification-form { grid-template-columns: 1fr; }.delivery-log { border-top: 1px dashed #b5c3c5; border-left: 0; }.delivery-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
}

@media (max-width: 560px) {
  .portal-header { min-height: 64px; padding: 0 15px; }.brand-lockup.compact > span:last-child { display: none; }.header-status { margin-right: 11px; }.quiet-button { padding: 8px 9px; font-size: 11px; }.portal-grid { min-height: calc(100vh - 64px); }.manifest { padding: 25px 18px; }.manifest .eyebrow, .manifest h1 { display: none; }.identity-block { margin-bottom: 15px; }.identity-block strong { font-size: 18px; }.membership-stamp { margin: 0; padding: 15px; }.device-deck { padding: 28px 15px 55px; }.deck-header { align-items: center; margin-bottom: 25px; }.deck-header h2 { font-size: 27px; }.deck-header p { font-size: 12px; }.deck-header .eyebrow { margin-bottom: 8px; }
  .device-card { display: block; min-height: 0; }.device-card::before,.device-card::after { display: none; }.device-main { padding: 22px 20px 18px; }.device-main h3 { font-size: 20px; }.device-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #b8c6c8; padding: 12px 20px; }.boarding-zone { display: flex; justify-content: space-between; border-top: 1px dashed #b8c6c8; border-left: 0; padding: 15px 20px; text-align: left; }.boarding-zone small { max-width: 95px; line-height: 1.4; }.board-button { width: auto; }.skeleton-ticket { height: 190px; }
  .admin-main { width: min(100% - 24px,1280px); padding-top: 30px; }.office-title { align-items: flex-start; flex-direction: column; gap: 20px; }.office-title h1 { font-size: 31px; }.manifest-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }.search-field { width: 100%; }.transaction-row { grid-template-columns: 1fr auto; gap: 8px 14px; }.transaction-row code { grid-column: 1 / -1; }.admin-header .admin-identity { display: none; }
  .service-settings > header { flex-direction: column; gap: 12px; }.service-settings-form { grid-template-columns: 1fr; }.service-settings-form > *,.service-settings-form .setting-note,.service-settings-form footer { grid-column: 1!important; }.service-switch { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 18px; }.service-settings-form footer { justify-content: stretch; }.service-settings-form footer button { flex: 1; }
  .notification-console { margin-top: 56px; padding-top: 26px; }.notification-heading { align-items: flex-start; flex-direction: column; gap: 13px; }.notification-heading h2 { font-size: 29px; }.notification-route-map { grid-template-columns: 1fr; gap: 10px; padding: 15px; }.route-events { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }.route-events span { width: auto; padding: 7px 5px; text-align: center; }.route-events span::before { display: none; }.route-track { width: 100%; }.route-destination { padding: 10px 12px; }.notification-controls,.delivery-log { padding: 20px 17px; }.notification-master { gap: 16px; }.notification-master strong { font-size: 16px; }.token-input { grid-template-columns: 1fr; gap: 7px; }.token-state,.token-help { align-items: flex-start; margin-left: 0; }.event-fieldset { grid-template-columns: 1fr; }.notification-device-list { grid-template-columns: 1fr; }.notification-actions { display: grid; grid-template-columns: 1fr 1fr; }.notification-actions button { width: 100%; }.delivery-list { grid-template-columns: 1fr; }.delivery-title { white-space: normal; }.scope-options { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}