:root {
    --graphite-950: #101518;
    --graphite-900: #171d21;
    --graphite-850: #1d252a;
    --graphite-800: #263137;
    --ink-900: #172126;
    --ink-700: #46565f;
    --ink-500: #74838b;
    --cyan-600: #008fa3;
    --cyan-500: #00a9bd;
    --cyan-300: #61cbd5;
    --cyan-100: #e3f5f7;
    --cool-100: #f3f6f7;
    --cool-150: #edf1f2;
    --cool-200: #e1e7e9;
    --cool-300: #cbd4d8;
    --white: #ffffff;
    --green: #27836c;
    --green-soft: #e7f4ef;
    --amber: #b77727;
    --amber-soft: #fbf0df;
    --red: #b94b50;
    --red-soft: #fae9ea;
    --shadow-sm: 0 5px 18px rgba(18, 31, 38, 0.06);
    --shadow-md: 0 18px 48px rgba(18, 31, 38, 0.12);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --sidebar: 244px;
    --ease: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-900); background: var(--cool-150); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.43; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(0, 169, 189, 0.28); outline-offset: 2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 12px; color: #fff; border-radius: 6px; background: var(--cyan-600); transform: translateY(-160%); transition: transform var(--ease); }
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar); padding: 25px 17px 18px; flex-direction: column; color: #fff; background: radial-gradient(circle at 10% 0%, rgba(0, 169, 189, 0.13), transparent 26%), linear-gradient(180deg, var(--graphite-900), var(--graphite-950)); }
.brand { display: flex; min-height: 58px; padding: 0 7px 22px; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-mark { display: grid; width: 42px; height: 42px; padding: 8px; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 1px solid rgba(97,203,213,0.3); border-radius: 10px; background: rgba(0,169,189,0.08); }
.brand-mark i { border: 1px solid var(--cyan-300); border-radius: 2px; }
.brand-mark i:nth-child(2) { grid-row: span 2; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: 0.3px; }
.brand small { margin-top: 2px; color: rgba(255,255,255,0.43); font-size: 8px; letter-spacing: 1.2px; }
.main-nav { display: grid; margin-top: 22px; gap: 5px; }
.nav-button { display: grid; min-height: 57px; padding: 8px 11px; grid-template-columns: 29px 1fr; align-items: center; gap: 9px; color: rgba(255,255,255,0.55); border: 0; border-radius: 9px; background: transparent; text-align: left; transition: color var(--ease), background var(--ease), transform var(--ease); }
.nav-button:hover { color: #fff; background: rgba(255,255,255,0.05); transform: translateX(2px); }
.nav-button.active { color: #fff; background: linear-gradient(90deg, rgba(0,169,189,0.22), rgba(0,169,189,0.04)); box-shadow: inset 3px 0 var(--cyan-300); }
.nav-index { display: grid; width: 27px; height: 27px; place-items: center; color: var(--cyan-300); border: 1px solid rgba(97,203,213,0.2); border-radius: 7px; font-size: 8px; font-weight: 800; }
.nav-button > span:last-child, .nav-button small { display: block; }
.nav-button > span:last-child { font-size: 12px; font-weight: 700; }
.nav-button small { margin-top: 1px; color: rgba(255,255,255,0.33); font-size: 8px; font-weight: 500; }
.sidebar-foot { display: flex; margin-top: auto; padding: 13px 10px; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; background: rgba(255,255,255,0.025); }
.live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #5ac6a7; box-shadow: 0 0 0 4px rgba(90,198,167,0.1); }
.sidebar-foot p { margin: 0; }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-size: 9px; }
.sidebar-foot small { color: rgba(255,255,255,0.4); font-size: 8px; }

.main-content { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 94px; padding: 17px 32px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--cool-200); background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); }
.breadcrumb { margin: 0 0 2px; color: var(--cyan-600); font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.topbar h1 { margin: 0; font-size: 21px; line-height: 1.2; }
.topbar > div:first-child > p:last-child { margin: 3px 0 0; color: var(--ink-500); font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.role-picker { display: grid; color: var(--ink-500); font-size: 7px; text-transform: uppercase; letter-spacing: 0.6px; }
.role-picker select { min-width: 132px; margin-top: 3px; padding: 6px 28px 6px 9px; color: var(--ink-900); border: 1px solid var(--cool-200); border-radius: 7px; background: #fff; font-size: 10px; font-weight: 700; }
.clock { min-width: 112px; padding: 5px 9px; border-left: 1px solid var(--cool-200); }
.clock span, .clock strong, .clock small { display: block; }
.clock span { color: var(--cyan-600); font-size: 7px; font-weight: 800; }
.clock strong { font-variant-numeric: tabular-nums; font-size: 12px; }
.clock small { color: var(--ink-500); font-size: 7px; }
.button { min-height: 35px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 750; transition: transform var(--ease), box-shadow var(--ease), background var(--ease); }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(110deg, #00889d, #00a7b8); box-shadow: 0 6px 16px rgba(0,143,163,0.15); }
.button-secondary { color: var(--cyan-600); border-color: rgba(0,143,163,0.24); background: var(--cyan-100); }
.button-success { color: #fff; background: var(--green); }
.button-danger { color: #fff; background: var(--red); }
.button-quiet { color: var(--ink-700); border-color: var(--cool-200); background: #fff; }
.button.full { width: 100%; margin-top: 9px; }

.scenario-bar { display: grid; min-height: 66px; margin: 19px 32px 0; padding: 8px 10px 8px 17px; grid-template-columns: 1.45fr repeat(4, minmax(90px, .7fr)) auto; align-items: center; gap: 12px; color: rgba(255,255,255,0.64); border-radius: 11px; background: var(--graphite-850); box-shadow: var(--shadow-sm); }
.scenario-bar > div { padding-left: 13px; border-left: 1px solid rgba(255,255,255,0.08); }
.scenario-bar .scenario-title { display: flex; padding-left: 0; align-items: center; gap: 10px; border-left: 0; }
.scenario-bar p { margin: 0; }
.scenario-bar small, .scenario-bar strong { display: block; }
.scenario-bar small { color: rgba(255,255,255,0.35); font-size: 7px; letter-spacing: .5px; }
.scenario-bar strong { margin-top: 2px; color: #fff; font-size: 9px; }
.pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 0 5px rgba(97,203,213,0.09); }
.scenario-bar .button { white-space: nowrap; }

.view { display: none; padding: 27px 32px 48px; animation: view-in 220ms ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; margin-bottom: 20px; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { color: var(--cyan-600); font-size: 8px; font-weight: 850; letter-spacing: 1.3px; }
.section-heading h2 { margin: 5px 0 0; font-size: 27px; letter-spacing: -0.5px; }
.section-heading p { max-width: 650px; margin: 5px 0 0; color: var(--ink-500); font-size: 11px; }
.role-scope { min-width: 225px; padding: 11px 14px; border-left: 2px solid var(--cyan-500); background: #fff; box-shadow: var(--shadow-sm); }
.role-scope span, .role-scope strong { display: block; }
.role-scope span { color: var(--ink-500); font-size: 7px; }
.role-scope strong { margin-top: 3px; font-size: 9px; }

.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.metric-card { position: relative; min-height: 112px; padding: 15px; overflow: hidden; border: 1px solid var(--cool-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.metric-card::after { position: absolute; right: -23px; bottom: -28px; width: 72px; height: 72px; content: ""; border: 1px solid var(--cool-200); border-radius: 50%; }
.metric-card.accent { color: #fff; border-color: transparent; background: linear-gradient(135deg, #15333c, #1c4c55); }
.metric-card.warning { border-top: 2px solid var(--amber); }
.metric-card span, .metric-card strong, .metric-card small { display: block; }
.metric-card span { color: var(--ink-500); font-size: 8px; }
.metric-card.accent span, .metric-card.accent small { color: rgba(255,255,255,0.48); }
.metric-card strong { margin-top: 6px; font-size: 23px; letter-spacing: -0.5px; }
.metric-card small { color: var(--ink-500); font-size: 8px; }
.metric-card > i { display: inline-block; margin-top: 9px; padding: 3px 6px; color: var(--cyan-600); border-radius: 4px; background: var(--cyan-100); font-size: 7px; font-style: normal; }
.metric-card > i.good { color: var(--green); background: var(--green-soft); }

.panel { padding: 18px; border: 1px solid var(--cool-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-head small, .panel-head h3 { display: block; }
.panel-head small { color: var(--cyan-600); font-size: 7px; font-weight: 850; letter-spacing: 1px; }
.panel-head h3 { margin: 3px 0 0; font-size: 15px; }
.panel-head > span { color: var(--ink-500); font-size: 8px; }
.status-badge { display: inline-flex; padding: 5px 7px; align-items: center; border-radius: 5px; font-size: 7px !important; font-weight: 800; letter-spacing: .3px; }
.status-badge.online { color: var(--green); background: var(--green-soft); }
.status-badge.alert { color: var(--red); background: var(--red-soft); }
.status-badge.neutral { color: var(--ink-500); background: var(--cool-150); }
.status-badge.processing { color: var(--cyan-600); background: var(--cyan-100); }
.status-badge.warning { color: var(--amber); background: var(--amber-soft); }

.network-layout { display: grid; margin-top: 11px; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 10px; }
.city-filter, .size-filter { display: flex; margin-top: 14px; gap: 5px; flex-wrap: wrap; }
.filter-chip { padding: 5px 9px; color: var(--ink-500); border: 1px solid var(--cool-200); border-radius: 999px; background: #fff; font-size: 8px; }
.filter-chip:hover, .filter-chip.active { color: var(--cyan-600); border-color: rgba(0,143,163,0.27); background: var(--cyan-100); }
.city-map { position: relative; min-height: 260px; margin-top: 11px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 24% 48%, rgba(0,169,189,0.09), transparent 24%), linear-gradient(145deg, #f0f5f5, #e7edef); }
.city-map::before { position: absolute; inset: 28px 15%; content: ""; border: 1px dashed #c5d2d6; border-radius: 50% 42% 46% 53%; transform: rotate(-8deg); }
.map-line { position: absolute; height: 1px; background: #b7c9cd; transform-origin: left; }
.map-line::after { position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--cyan-500); }
.map-line.l1 { top: 117px; left: 31%; width: 28%; transform: rotate(-25deg); }
.map-line.l2 { top: 119px; left: 31%; width: 27%; transform: rotate(27deg); }
.map-line.l3 { top: 124px; left: 59%; width: 23%; transform: rotate(39deg); }
.map-line.l4 { top: 190px; left: 55%; width: 28%; transform: rotate(-18deg); }
.city-node { position: absolute; z-index: 2; display: grid; padding: 6px 8px 6px 22px; color: var(--ink-700); border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,0.77); text-align: left; box-shadow: 0 3px 10px rgba(30,50,57,0.06); }
.city-node:hover, .city-node.active { color: var(--ink-900); border-color: rgba(0,143,163,.25); background: #fff; }
.city-node i { position: absolute; top: 12px; left: 9px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(39,131,108,.16); }
.city-node small, .city-node strong { display: block; }
.city-node strong { font-size: 9px; }
.city-node small { color: var(--ink-500); font-size: 6px; }
.city-node.berlin { top: 88px; left: 52%; }.city-node.hamburg { top: 35px; left: 43%; }.city-node.paris { top: 145px; left: 23%; }.city-node.amsterdam { top: 78px; left: 23%; }.city-node.vienna { right: 11%; bottom: 28px; }
.city-node[hidden] { display: none; }
.incident-card { display: grid; margin-top: 14px; padding: 12px; grid-template-columns: 40px 1fr; gap: 10px; border: 1px solid var(--red-soft); border-radius: 9px; background: #fff8f8; }
.severity { display: grid; width: 37px; height: 37px; place-items: center; color: #fff; border-radius: 8px; background: var(--red); font-size: 7px; font-weight: 850; }
.incident-card strong, .incident-card small { display: block; font-size: 9px; }
.incident-card p { margin: 2px 0; color: var(--ink-700); font-size: 8px; }
.incident-card small { color: var(--ink-500); font-size: 7px; }
.sensor-row { display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 6px; }
.sensor-row span { padding: 8px; color: var(--ink-500); border: 1px solid var(--cool-200); border-radius: 7px; font-size: 7px; }
.sensor-row strong { display: block; margin-top: 3px; color: var(--green); font-size: 8px; }
.danger { color: var(--red) !important; }
.reason-select { display: grid; margin-top: 11px; color: var(--ink-500); font-size: 8px; }
.reason-select select { margin-top: 4px; padding: 7px 9px; border: 1px solid var(--cool-200); border-radius: 7px; background: #fff; font-size: 9px; }
.anomaly-panel > .button { width: 100%; margin-top: 7px; }
.audit-hint { margin: 7px 0 0; color: var(--ink-500); font-size: 7px; text-align: center; }
.minor-incidents { display: grid; margin-top: 12px; gap: 5px; }
.minor-incidents p { display: grid; margin: 0; padding: 7px; grid-template-columns: auto 1fr auto; gap: 7px; border-radius: 6px; background: var(--cool-100); color: var(--ink-700); font-size: 7px; }
.minor-incidents span { font-weight: 750; }.minor-incidents small { color: var(--ink-500); }
.site-table-panel { margin-top: 10px; }
.data-table { margin-top: 12px; overflow-x: auto; }
.table-row { display: grid; min-width: 820px; min-height: 51px; padding: 7px 10px; grid-template-columns: 2fr 1.05fr .7fr .7fr .8fr .45fr .45fr; align-items: center; gap: 8px; border-bottom: 1px solid var(--cool-150); font-size: 9px; }
.table-row.table-head { min-height: 30px; color: var(--ink-500); border-radius: 6px; background: var(--cool-100); font-size: 7px; }
.table-row[hidden] { display: none; }
.table-row strong, .table-row small { display: block; }
.table-row small { color: var(--ink-500); font-size: 7px; }
.table-row button { padding: 5px; color: var(--cyan-600); border: 1px solid rgba(0,143,163,.18); border-radius: 5px; background: var(--cyan-100); font-size: 7px; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }.dot.good { background: var(--green); }.dot.warn { background: var(--amber); }

.station-kpis { display: grid; margin-bottom: 10px; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.station-kpis article, .api-status-grid article { padding: 12px 14px; border: 1px solid var(--cool-200); border-radius: 10px; background: #fff; }
.station-kpis span, .station-kpis strong, .station-kpis small { display: block; }
.station-kpis span { color: var(--ink-500); font-size: 7px; }.station-kpis strong { margin-top: 4px; font-size: 17px; }.station-kpis small { color: var(--ink-500); font-size: 7px; }
.station-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 10px; }
.locker-legend { display: flex; gap: 8px; color: var(--ink-500); font-size: 7px; }.locker-legend span { display: flex; align-items: center; gap: 4px; }.locker-legend i { width: 7px; height: 7px; border-radius: 2px; }.locker-legend .available { background: #fff; border: 1px solid var(--cool-300); }.locker-legend .occupied { background: var(--graphite-800); }.locker-legend .held { background: var(--cyan-500); }.locker-legend .fault { background: var(--red); }
.locker-grid { display: grid; min-height: 455px; margin-top: 14px; padding: 14px; grid-template-columns: repeat(8, minmax(55px, 1fr)); grid-auto-rows: 66px; gap: 7px; border-radius: 10px; background: var(--graphite-900); }
.locker-cell { position: relative; display: flex; padding: 7px; flex-direction: column; justify-content: space-between; color: #fff; border: 1px solid rgba(255,255,255,.11); border-radius: 5px; background: var(--graphite-800); text-align: left; transition: border var(--ease), transform var(--ease), opacity var(--ease); }
.locker-cell:hover { border-color: var(--cyan-300); transform: translateY(-1px); }
.locker-cell.available { color: var(--ink-900); border-color: #d9e2e4; background: #f4f7f7; }.locker-cell.held { border-color: var(--cyan-500); background: #126776; }.locker-cell.fault { border-color: #c96468; background: #73363b; }.locker-cell.selected { outline: 2px solid var(--cyan-300); outline-offset: 2px; }
.locker-cell.filtered { opacity: .14; pointer-events: none; }.locker-cell strong { font-size: 9px; }.locker-cell small { color: currentColor; font-size: 6px; opacity: .65; }.locker-cell i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.locker-cell.held i { background: #fff; }.locker-cell.fault i { background: #ffb2b5; }
.compartment-detail { display: flex; flex-direction: column; }
.locker-visual { position: relative; display: grid; min-height: 180px; margin-top: 15px; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #edf2f3, #f9fbfb); }
.locker-visual > span { position: relative; display: block; width: 96px; height: 135px; border: 6px solid #26343a; border-radius: 4px; background: linear-gradient(135deg, #3b4a50, #1b262b); box-shadow: 11px 14px 24px rgba(20,34,40,.2); transform-origin: left; transition: transform 280ms ease; }.locker-visual > span.open { transform: perspective(320px) rotateY(-38deg); }.locker-visual > span i { position: absolute; top: 62px; right: 9px; width: 5px; height: 12px; border-radius: 3px; background: var(--cyan-300); }.locker-visual b { position: absolute; bottom: 15px; color: var(--ink-500); font-size: 9px; }
.detail-list { margin: 13px 0 0; }.detail-list div { display: flex; padding: 8px 0; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--cool-150); }.detail-list dt { color: var(--ink-500); font-size: 8px; }.detail-list dd { margin: 0; font-size: 8px; font-weight: 700; text-align: right; }.compartment-detail .button { margin-top: auto; }

.order-layout { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(400px, 1.2fr); gap: 10px; }
.order-list { display: flex; min-height: 450px; flex-direction: column; }
.order-main { display: grid; margin-top: 15px; grid-template-columns: repeat(2, 1fr); gap: 8px; }.order-main > div { padding: 12px; border: 1px solid var(--cool-150); border-radius: 8px; background: var(--cool-100); }.order-main span, .order-main strong, .order-main small { display: block; }.order-main span { color: var(--ink-500); font-size: 7px; }.order-main strong { margin-top: 4px; font-size: 10px; }.order-main small { margin-top: 2px; color: var(--ink-500); font-size: 7px; }
.sync-strip { display: grid; margin-top: 11px; padding: 11px; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--cool-200); border-radius: 8px; }.sync-icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--cyan-600); border-radius: 7px; background: var(--cyan-100); }.sync-strip p { margin: 0; }.sync-strip strong, .sync-strip small { display: block; }.sync-strip strong { font-size: 8px; }.sync-strip small { color: var(--ink-500); font-size: 7px; }.sync-strip i { color: var(--ink-500); font-size: 7px; font-style: normal; }.sync-strip.synced { border-color: rgba(39,131,108,.18); background: var(--green-soft); }.sync-strip.synced i { color: var(--green); }
.order-list > .button { margin-top: auto; }.button-note { margin: 7px 0 0; color: var(--ink-500); font-size: 7px; text-align: center; }
.order-timeline { position: relative; display: grid; margin: 18px 0 0; padding: 0; gap: 7px; list-style: none; }.order-timeline::before { position: absolute; top: 17px; bottom: 17px; left: 14px; width: 1px; content: ""; background: var(--cool-200); }.order-timeline li { position: relative; z-index: 1; display: grid; min-height: 51px; padding: 7px; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; border-radius: 8px; }.order-timeline li.current { background: var(--cyan-100); }.order-timeline li i { position: relative; width: 15px; height: 15px; margin-left: 7px; border: 2px solid var(--cool-300); border-radius: 50%; background: #fff; }.order-timeline li.done i { border-color: var(--green); background: var(--green); }.order-timeline li.done i::after { position: absolute; top: 2px; left: 3px; width: 5px; height: 3px; content: ""; border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; transform: rotate(-45deg); }.order-timeline strong, .order-timeline small { display: block; }.order-timeline strong { font-size: 9px; }.order-timeline small, .order-timeline time { color: var(--ink-500); font-size: 7px; }.order-timeline time { font-variant-numeric: tabular-nums; }
.privacy-banner { display: grid; margin-top: 10px; padding: 15px 18px; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px; color: #fff; border-radius: 11px; background: var(--graphite-850); }.privacy-banner > span { display: grid; width: 45px; height: 34px; place-items: center; color: var(--cyan-300); border: 1px solid rgba(97,203,213,.22); border-radius: 7px; font-size: 9px; font-weight: 850; }.privacy-banner strong { font-size: 10px; }.privacy-banner p { margin: 2px 0 0; color: rgba(255,255,255,.48); font-size: 8px; }.privacy-banner > small { color: rgba(255,255,255,.35); font-size: 7px; }

.api-status-grid { display: grid; margin-bottom: 10px; grid-template-columns: repeat(4, 1fr); gap: 9px; }.api-status-grid article { display: flex; min-height: 66px; align-items: center; gap: 10px; }.api-status-grid p { flex: 1; margin: 0; }.api-status-grid small, .api-status-grid strong { display: block; }.api-status-grid small { color: var(--ink-500); font-size: 7px; }.api-status-grid strong { margin-top: 2px; font-size: 11px; }.api-status-grid i { color: var(--cyan-600); font-size: 7px; font-style: normal; }
.api-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 10px; }.endpoint-list { display: grid; margin-top: 14px; gap: 6px; }.endpoint { display: grid; min-height: 50px; padding: 7px 9px; grid-template-columns: 48px minmax(200px, 1.25fr) 1fr 43px; align-items: center; gap: 8px; border: 1px solid var(--cool-150); border-radius: 8px; }.endpoint b { padding: 4px; border-radius: 4px; font-size: 7px; text-align: center; }.endpoint .get { color: var(--green); background: var(--green-soft); }.endpoint .post { color: var(--cyan-600); background: var(--cyan-100); }.endpoint .patch { color: var(--amber); background: var(--amber-soft); }.endpoint code { overflow: hidden; color: var(--ink-900); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.endpoint span { color: var(--ink-500); font-size: 7px; }.endpoint button { padding: 5px; color: var(--cyan-600); border: 1px solid rgba(0,143,163,.2); border-radius: 5px; background: #fff; font-size: 7px; }.api-guardrails { display: grid; margin-top: 14px; padding: 10px; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 6px; border-radius: 8px; background: var(--cool-100); font-size: 7px; }.api-guardrails span { color: var(--cyan-600); font-weight: 800; }.api-guardrails strong { font-size: 7px; }
.event-log { display: grid; max-height: 392px; min-height: 340px; margin-top: 14px; gap: 5px; overflow-y: auto; }.event-row { display: grid; min-height: 52px; padding: 8px; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; border-left: 2px solid var(--cool-300); background: var(--cool-100); }.event-row.live { border-left-color: var(--cyan-500); }.event-row.audit { border-left-color: var(--red); }.event-row time { color: var(--ink-500); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; }.event-row strong, .event-row small { display: block; }.event-row strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }.event-row small { color: var(--ink-500); font-size: 7px; }.event-row i { color: var(--ink-500); font-size: 6px; font-style: normal; }

.web-badge { padding: 7px 10px; color: var(--cyan-600); border: 1px solid rgba(0,143,163,.2); border-radius: 999px; background: var(--cyan-100); font-size: 7px; font-weight: 800; }.user-layout { display: grid; min-height: 690px; padding: 26px; grid-template-columns: 360px minmax(0, 1fr); align-items: center; gap: 28px; border: 1px solid var(--cool-200); border-radius: var(--radius-lg); background: radial-gradient(circle at 17% 30%, rgba(0,169,189,.08), transparent 28%), linear-gradient(145deg, #e5ebec, #f7f9f9); box-shadow: var(--shadow-md); }.phone-shell { position: relative; width: 330px; min-height: 650px; max-height: 720px; margin: 0 auto; padding: 18px 10px 14px; overflow: hidden; color: #fff; border: 7px solid #111a1e; border-radius: 37px; background: var(--graphite-900); box-shadow: 18px 25px 48px rgba(16,29,35,.26); }.phone-shell::before { position: absolute; top: 0; left: 50%; z-index: 2; width: 95px; height: 20px; content: ""; border-radius: 0 0 13px 13px; background: #111a1e; transform: translateX(-50%); }.phone-status { display: grid; min-height: 29px; padding: 0 9px; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 7px; }.phone-status strong { color: var(--cyan-300); font-size: 8px; }.phone-status i { font-style: normal; text-align: right; }.phone-content { max-height: 600px; padding: 4px 8px 25px; overflow-y: auto; scrollbar-width: thin; }.phone-head { padding: 8px 3px 10px; }.phone-head small { color: var(--cyan-300); font-size: 6px; font-weight: 800; letter-spacing: 1px; }.phone-head h3 { margin: 4px 0 0; font-size: 17px; }.phone-head p { margin: 4px 0 0; color: rgba(255,255,255,.46); font-size: 8px; line-height: 1.5; }.booking-surface fieldset { min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }.booking-surface legend { margin-bottom: 6px; color: rgba(255,255,255,.48); font-size: 7px; font-weight: 700; }.choice-card { display: flex; width: 100%; margin-top: 5px; padding: 9px; align-items: center; justify-content: space-between; color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.035); text-align: left; }.choice-card.active { border-color: rgba(97,203,213,.34); background: rgba(0,169,189,.1); }.choice-card strong, .choice-card small { display: block; }.choice-card strong { font-size: 8px; }.choice-card small { color: rgba(255,255,255,.4); font-size: 6px; }.choice-card i { color: var(--cyan-300); font-size: 6px; font-style: normal; }.size-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.size-choices button { padding: 8px 3px; color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.035); }.size-choices button:hover, .size-choices button.active { border-color: var(--cyan-300); background: rgba(0,169,189,.12); }.size-choices strong, .size-choices small, .size-choices span { display: block; }.size-choices strong { font-size: 12px; }.size-choices small { color: rgba(255,255,255,.38); font-size: 5px; }.size-choices span { margin-top: 5px; color: var(--cyan-300); font-size: 7px; }.price-summary { display: flex; margin-top: 10px; padding: 10px; align-items: center; justify-content: space-between; border-radius: 8px; background: rgba(255,255,255,.05); }.price-summary > span { font-size: 7px; }.price-summary small { display: block; color: rgba(255,255,255,.36); font-size: 6px; }.price-summary strong { color: var(--cyan-300); font-size: 12px; }.phone-shell .button { min-height: 35px; font-size: 8px; }
.pass-surface { padding-top: 3px; }.pass-head { display: grid; padding: 9px; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; border-radius: 8px; background: rgba(255,255,255,.05); }.pass-head > span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 0 4px rgba(97,203,213,.08); }.pass-head p { margin: 0; }.pass-head small, .pass-head strong { display: block; }.pass-head small { color: rgba(255,255,255,.38); font-size: 5px; }.pass-head strong { font-size: 8px; }.pass-head > i { color: var(--cyan-300); font-size: 6px; font-style: normal; }.qr-card { display: flex; margin-top: 9px; padding: 12px; align-items: center; flex-direction: column; color: var(--ink-900); border-radius: 11px; background: #fff; }.qr-code { display: grid; width: 112px; height: 112px; padding: 7px; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(13, 1fr); gap: 1px; background: #fff; border: 1px solid var(--cool-200); }.qr-code i { background: transparent; }.qr-code i.dark { background: #10191d; }.qr-card > span { margin-top: 7px; color: var(--ink-500); font-size: 6px; }.qr-card > strong { font-size: 17px; letter-spacing: 3px; }.qr-card > small { color: var(--ink-500); font-size: 6px; }.pass-details { display: grid; margin-top: 7px; grid-template-columns: repeat(3, 1fr); gap: 5px; }.pass-details span { padding: 7px; color: rgba(255,255,255,.38); border-radius: 6px; background: rgba(255,255,255,.045); font-size: 5px; }.pass-details strong { display: block; margin-top: 2px; color: #fff; font-size: 8px; }.user-action-note { margin: 7px 3px 0; color: rgba(255,255,255,.44); font-size: 6px; text-align: center; }.phone-footer { display: flex; margin-top: 10px; padding: 9px; align-items: center; gap: 7px; border-top: 1px solid rgba(255,255,255,.06); }.phone-footer p { margin: 0; }.phone-footer strong, .phone-footer small { display: block; }.phone-footer strong { font-size: 7px; }.phone-footer small { color: rgba(255,255,255,.36); font-size: 6px; }.home-indicator { width: 86px; height: 4px; margin: 8px auto 0; border-radius: 3px; background: rgba(255,255,255,.27); }
.journey-guide { min-height: 590px; padding: 23px; border: 1px solid var(--cool-200); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }.journey-steps { display: grid; margin: 17px 0 0; padding: 0; grid-template-columns: repeat(2, 1fr); gap: 7px; list-style: none; }.journey-steps li { display: grid; min-height: 68px; padding: 10px; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; border: 1px solid var(--cool-150); border-radius: 9px; background: var(--cool-100); }.journey-steps li > span { display: grid; width: 31px; height: 31px; place-items: center; color: var(--ink-500); border: 1px solid var(--cool-300); border-radius: 8px; background: #fff; font-size: 7px; font-weight: 800; }.journey-steps p { margin: 0; }.journey-steps strong, .journey-steps small { display: block; }.journey-steps strong { font-size: 8px; }.journey-steps small { color: var(--ink-500); font-size: 7px; }.journey-steps li.current { border-color: rgba(0,143,163,.25); background: var(--cyan-100); }.journey-steps li.current > span { color: #fff; border-color: var(--cyan-600); background: var(--cyan-600); }.journey-steps li.done { border-color: rgba(39,131,108,.16); background: var(--green-soft); }.journey-steps li.done > span { color: #fff; border-color: var(--green); background: var(--green); }.cross-surface-note { margin-top: 14px; padding: 14px; color: #fff; border-radius: 9px; background: var(--graphite-850); }.cross-surface-note span { color: var(--cyan-300); font-size: 7px; font-weight: 800; }.cross-surface-note p { margin: 5px 0 0; color: rgba(255,255,255,.48); font-size: 8px; }

#user-pass[hidden], #store-close-button[hidden], #user-extend-button[hidden], #pickup-open-button[hidden], #pickup-close-button[hidden] { display: none; }
dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: transparent; box-shadow: var(--shadow-md); }dialog::backdrop { background: rgba(10,17,21,.64); backdrop-filter: blur(3px); }.dialog-card { padding: 25px; border-top: 4px solid var(--red); border-radius: 14px; background: #fff; }.dialog-kicker { color: var(--red); font-size: 7px; font-weight: 850; letter-spacing: 1px; }.dialog-card h2 { margin: 5px 0 0; font-size: 20px; }.dialog-card > p { color: var(--ink-500); font-size: 9px; }.dialog-card dl { margin: 16px 0; border: 1px solid var(--cool-200); border-radius: 8px; }.dialog-card dl div { display: flex; min-height: 38px; padding: 0 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cool-150); }.dialog-card dl div:last-child { border-bottom: 0; }.dialog-card dt { color: var(--ink-500); font-size: 8px; }.dialog-card dd { margin: 0; font-size: 9px; font-weight: 700; }.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 360px; padding: 11px 15px; color: #fff; border-left: 3px solid var(--cyan-300); border-radius: 8px; background: var(--graphite-850); box-shadow: var(--shadow-md); font-size: 9px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--ease), transform var(--ease); }.toast.show { opacity: 1; transform: none; }

@media (max-width: 1200px) {
    .scenario-bar { grid-template-columns: 1.4fr repeat(2, .7fr) auto; }.scenario-bar > div:nth-child(4), .scenario-bar > div:nth-child(5) { display: none; }
    .metric-grid { grid-template-columns: repeat(3, 1fr); }.api-layout { grid-template-columns: 1fr; }.event-log { min-height: 240px; }
}
@media (max-width: 980px) {
    :root { --sidebar: 78px; }.sidebar { padding: 22px 10px; }.brand { justify-content: center; padding: 0 0 20px; }.brand > span:last-child, .nav-button > span:last-child, .sidebar-foot p { display: none; }.nav-button { grid-template-columns: 1fr; justify-items: center; padding: 8px; }.sidebar-foot { justify-content: center; }
    .network-layout, .station-layout, .order-layout { grid-template-columns: 1fr; }.compartment-detail { min-height: 500px; }.api-status-grid { grid-template-columns: repeat(2, 1fr); }.user-layout { grid-template-columns: 1fr; }.journey-guide { min-height: 0; }.locker-grid { grid-template-columns: repeat(6, minmax(52px, 1fr)); }
}
@media (max-width: 720px) {
    :root { --sidebar: 0px; }.sidebar { position: static; width: 100%; padding: 12px; }.brand { justify-content: flex-start; min-height: 46px; padding: 0 4px 10px; }.brand > span:last-child { display: block; }.main-nav { display: flex; margin-top: 8px; overflow-x: auto; }.nav-button { min-width: 58px; min-height: 45px; }.sidebar-foot { display: none; }.main-content { margin-left: 0; }.topbar { position: static; padding: 14px 16px; align-items: flex-start; }.topbar h1 { font-size: 18px; }.topbar > div:first-child > p:last-child, .clock { display: none; }.top-actions { align-items: stretch; flex-direction: column; }.role-picker select { min-width: 115px; }.scenario-bar { margin: 10px 16px 0; grid-template-columns: 1fr auto; }.scenario-bar > div:not(.scenario-title) { display: none; }.view { padding: 22px 16px 36px; }.section-heading { align-items: flex-start; flex-direction: column; }.role-scope { width: 100%; }.metric-grid, .station-kpis { grid-template-columns: repeat(2, 1fr); }.locker-grid { grid-template-columns: repeat(4, minmax(48px, 1fr)); }.locker-legend { display: none; }.order-main { grid-template-columns: 1fr; }.privacy-banner { grid-template-columns: 45px 1fr; }.privacy-banner > small { display: none; }.endpoint { grid-template-columns: 45px 1fr 42px; }.endpoint span { display: none; }.user-layout { padding: 16px 7px; }.phone-shell { width: min(330px, 100%); }.journey-steps { grid-template-columns: 1fr; }.api-guardrails { grid-template-columns: auto 1fr; }
}
@media (max-width: 430px) {
    .metric-grid, .station-kpis, .api-status-grid { grid-template-columns: 1fr; }.locker-grid { grid-template-columns: repeat(3, minmax(46px, 1fr)); }.city-map { min-height: 330px; }.city-node.berlin { top: 110px; left: 47%; }.city-node.hamburg { top: 43px; left: 35%; }.city-node.paris { top: 210px; left: 10%; }.city-node.amsterdam { top: 118px; left: 7%; }.city-node.vienna { right: 4%; }.topbar { flex-direction: column; }.top-actions { width: 100%; flex-direction: row; justify-content: space-between; }.role-picker { flex: 1; }.role-picker select { width: 100%; }.phone-shell { min-height: 610px; border-width: 5px; }.phone-content { max-height: 565px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .sidebar, .topbar, .scenario-bar, .button, dialog, .toast { display: none !important; }.main-content { margin: 0; }.view { display: block; page-break-after: always; }.panel { box-shadow: none; } }