@font-face { font-family: Jost; src: url('assets/jost.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Hanken; src: url('assets/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --navy: #0d0757;
  --navy-mid: #211a5e;
  --navy-deep: #0b0756;
  --pink: #cc1948;
  --pink-dark: #ae123b;
  --pink-soft: #f0b0c1;
  --ink: #232633;
  --muted: #5b6170;
  --line: #dfe2ea;
  --canvas: #f4f5f8;
  --soft-blue: #eaf0f7;
  --success: #13875b;
  --warning: #bd7410;
  --danger: #bd2844;
  --white: #fff;
  --shadow: 0 14px 38px rgba(11, 7, 86, .13);
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body { color: var(--ink); background: #e7e7ee; font-family: Hanken, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.brand-logo { display: block; width: 142px; height: 54px; object-fit: contain; object-position: left center; }
.brand-logo--light { filter: brightness(0) invert(1); }
.eyebrow, .section-kicker { font-family: Jost, sans-serif; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.section-kicker { display: block; color: var(--pink); font-size: 11px; margin-bottom: 5px; }
.live-dot { width: 8px; height: 8px; background: #55d79d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(85, 215, 157, .15); display: inline-block; }
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #375044; background: #e8f5ef; border: 1px solid #cae7da; padding: 6px 9px; border-radius: 3px; font-size: 12px; font-weight: 720; }
.status > span { width: 7px; height: 7px; border-radius: 1px; background: var(--success); }
.status--warn { color: #755016; background: #fff4df; border-color: #efdbb7; }
.status--warn > span { background: var(--warning); }
.status--danger { color: #84243a; background: #fff0f3; border-color: #f1cbd4; }
.status--danger > span { background: var(--danger); }
.status--neutral { color: #565b68; background: #f2f3f6; border-color: #dedfe4; }
.status--neutral > span { background: #7a7e88; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: white; color: var(--navy); display: grid; place-items: center; position: relative; cursor: pointer; }
.icon-button--dark { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.2); }
.notify-dot { position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); border: 2px solid white; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: white; font: 700 12px Jost, sans-serif; }
.button { border: 0; min-height: 44px; padding: 0 18px; display: inline-flex; gap: 10px; align-items: center; justify-content: center; font: 650 13px Jost, sans-serif; letter-spacing: .035em; cursor: pointer; }
.button .icon { width: 18px; height: 18px; }
.button--pink { color: white; background: var(--pink); }
.button--pink:hover { background: var(--pink-dark); }
.button--ghost { color: white; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.3); }
.button--light { color: var(--navy); background: white; }
.panel { background: white; border: 1px solid var(--line); box-shadow: 0 5px 18px rgba(20, 20, 50, .045); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.panel-heading h2 { margin: 0; font: 650 22px/1.15 Jost, sans-serif; color: var(--navy-deep); }
.text-action { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--navy); font-weight: 750; cursor: pointer; white-space: nowrap; }
.text-action .icon { width: 17px; }
.tick-icon { color: var(--success); }

/* Guard mobile */
body[data-screen="guard"] { min-width: 390px; background: radial-gradient(circle at 50% 13%, #322a82, var(--navy-deep) 45%, #07052e 100%); }
.phone-stage { min-height: 100vh; display: grid; grid-template-columns: 390px 260px; align-items: center; justify-content: center; gap: 42px; padding: 34px; }
.phone { width: 390px; min-height: 844px; overflow: hidden; background: var(--canvas); border: 7px solid #171528; border-radius: 36px; box-shadow: 0 35px 90px rgba(0,0,0,.45); position: relative; padding-bottom: 78px; }
.phone__bar { height: 27px; position: absolute; inset: 0 0 auto; z-index: 8; color: white; padding: 7px 20px 0; display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; }
.phone__signals { letter-spacing: 2px; font-size: 9px; }
.mobile-header { position: absolute; z-index: 7; top: 26px; left: 0; right: 0; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px; }
.mobile-header .brand-logo { width: 102px; height: 45px; }
.mobile-hero { height: 294px; position: relative; color: white; }
.mobile-hero > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mobile-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,65,.7) 0%, rgba(8,5,65,.25) 42%, rgba(8,5,65,.94) 100%); }
.mobile-hero__copy { position: absolute; left: 22px; right: 22px; bottom: 24px; }
.mobile-hero__copy .eyebrow { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 10px; margin-bottom: 9px; }
.mobile-hero h1 { margin: 0 0 8px; font: 620 33px/.98 Jost, sans-serif; letter-spacing: -.02em; }
.mobile-hero p { margin: 0; display: flex; gap: 7px; align-items: center; font-size: 13px; color: rgba(255,255,255,.88); }
.mobile-hero p .icon { width: 15px; height: 15px; color: var(--pink-soft); }
.shift-clock { position: absolute; right: 18px; bottom: 24px; text-align: right; display: none; }
.mobile-content { padding: 16px 16px 18px; }
.next-action { background: var(--navy-deep); color: white; margin-top: -34px; position: relative; z-index: 3; padding: 17px 17px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow); }
.next-action .section-kicker { color: var(--pink-soft); font-size: 9px; }
.next-action h2 { margin: 0 0 3px; font: 650 19px/1.1 Jost, sans-serif; }
.next-action p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
.round-arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: white; border: 0; background: var(--pink); }
.round-arrow .icon { width: 19px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.action-card { min-height: 102px; text-align: left; border: 1px solid var(--line); background: white; padding: 13px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-content: center; cursor: pointer; }
.action-card > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; background: #eeeefa; color: var(--navy); }
.action-card .icon { width: 20px; height: 20px; }
.action-card strong { font: 650 14px/1.05 Jost, sans-serif; color: var(--navy-deep); }
.action-card small { font-size: 10px; color: var(--muted); margin-top: 5px; }
.action-card--alert > span { color: var(--pink); background: #fff0f4; }
.action-card--alert strong { color: var(--pink-dark); }
.shift-note { margin-top: 11px; background: white; border: 1px solid var(--line); padding: 12px; display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 10px; }
.shift-note__icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--success); background: #e8f5ef; }
.shift-note__icon .icon { width: 19px; }
.shift-note strong { display: block; font: 650 12px Jost, sans-serif; color: var(--navy); }
.shift-note p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.shift-note > .icon { width: 18px; }
.privacy-line { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.privacy-line .icon { width: 13px; height: 13px; color: var(--navy); }
.bottom-nav { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 73px; background: white; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 7px; }
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #787b86; font-size: 10px; }
.bottom-nav a.active { color: var(--navy); font-weight: 800; }
.bottom-nav a.active::before { content: ''; position: absolute; top: -9px; width: 36px; height: 3px; background: var(--pink); }
.bottom-nav .icon { width: 20px; height: 20px; }
.bottom-nav b { position: absolute; top: 2px; right: 25px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: white; font-size: 9px; }
.concept-label { color: white; max-width: 230px; padding-top: 18px; position: relative; }
.concept-label::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 42px; height: 3px; background: var(--pink); }
.concept-label strong { display: block; font: 600 30px/1.05 Jost, sans-serif; }
.concept-label span { display: block; color: rgba(255,255,255,.65); margin-top: 8px; font-size: 14px; }

/* Shared desktop */
body[data-screen="van"], body[data-screen="director"] { background: var(--canvas); min-width: 1180px; }
.desktop-shell { min-height: 100vh; background: var(--canvas); }
.desktop-top { height: 76px; padding: 0 34px; display: flex; align-items: center; gap: 34px; }
.desktop-top--dark { background: var(--navy-deep); color: white; }
.desktop-top .brand-logo { width: 119px; height: 55px; }
.console-mode { display: flex; align-items: center; gap: 11px; font: 600 14px Jost, sans-serif; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 24px; color: rgba(255,255,255,.7); font-size: 13px; }
.top-time { font: 650 19px Jost, sans-serif; color: white; }
.operator-pill { height: 45px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: white; display: flex; align-items: center; gap: 10px; padding: 0 11px 0 5px; }
.operator-pill .icon { width: 14px; height: 14px; }
.van-hero { height: 300px; position: relative; overflow: hidden; color: white; }
.van-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 59%; }
.van-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,7,86,.97) 0%, rgba(11,7,86,.84) 38%, rgba(11,7,86,.24) 73%, rgba(11,7,86,.35) 100%); }
.van-hero__copy { position: absolute; top: 38px; left: 48px; }
.van-hero__copy .eyebrow { color: var(--pink-soft); font-size: 11px; }
.van-hero h1 { margin: 10px 0 8px; font: 620 43px/.95 Jost, sans-serif; letter-spacing: -.02em; }
.van-hero p { margin: 0 0 17px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.76); font-size: 14px; }
.van-hero p .icon { width: 17px; color: var(--pink-soft); }
.crew-line { display: flex; align-items: center; gap: 10px; }
.crew-line > span:nth-child(2) { display: grid; gap: 1px; min-width: 190px; }
.crew-line b { font: 600 14px Jost, sans-serif; }
.crew-line small { color: rgba(255,255,255,.65); font-size: 11px; }
.crew-line .status { margin-left: 4px; color: white; background: rgba(37, 184, 122, .16); border-color: rgba(93, 222, 164, .28); }
.hero-actions { position: absolute; right: 48px; bottom: 34px; display: flex; gap: 10px; }
.console-body { padding: 22px 34px 28px; max-width: 1600px; margin: 0 auto; }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.telemetry { min-height: 116px; background: white; border: 1px solid var(--line); padding: 17px; display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: start; position: relative; }
.telemetry__icon { width: 44px; height: 44px; display: grid; place-items: center; background: #efeffa; color: var(--navy); }
.telemetry__icon .icon { width: 22px; }
.telemetry div:nth-child(2) { display: grid; }
.telemetry small { color: var(--muted); font-size: 11px; }
.telemetry strong { font: 650 25px/1.08 Jost, sans-serif; color: var(--navy); }
.telemetry em { font-style: normal; font-size: 10px; color: var(--muted); }
.telemetry > .status { position: absolute; bottom: 13px; right: 14px; padding: 5px 8px; font-size: 10px; }
.gauge { position: absolute; left: 17px; right: 17px; bottom: 12px; height: 3px; background: #e4e5ec; }
.gauge i { display: block; height: 100%; background: var(--pink); }
.signal-bars { position: absolute; right: 17px; bottom: 13px; height: 25px; display: flex; align-items: end; gap: 3px; }
.signal-bars i { width: 4px; background: var(--success); }
.signal-bars i:nth-child(1) { height: 7px; }.signal-bars i:nth-child(2) { height: 12px; }.signal-bars i:nth-child(3) { height: 18px; }.signal-bars i:nth-child(4) { height: 24px; }
.console-columns { display: grid; grid-template-columns: 1.18fr .82fr; gap: 16px; margin-top: 16px; }
.console-columns .panel { min-height: 324px; padding: 22px; }
.route-row { min-height: 75px; display: grid; grid-template-columns: 50px 15px 1fr auto; gap: 14px; align-items: center; border-top: 1px solid #e9e9ef; position: relative; }
.route-row:first-of-type { margin-top: 16px; }
.route-time { color: var(--muted); font: 600 12px Jost, sans-serif; }
.route-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px #fae7ed; }
.route-dot.complete { background: var(--success); box-shadow: 0 0 0 5px #e6f4ed; }
.route-dot.future { background: #a8abb5; box-shadow: 0 0 0 5px #eff0f3; }
.route-row strong { display: block; font: 620 14px Jost, sans-serif; color: var(--navy); }
.route-row p { margin: 3px 0; color: var(--muted); font-size: 11px; }
.route-row small { display: flex; align-items: center; gap: 5px; color: var(--pink-dark); font-size: 10px; }
.route-row small .icon { width: 13px; height: 13px; }
.route-row > .icon { width: 18px; }
.camera-preview { height: 137px; overflow: hidden; margin-top: 15px; position: relative; }
.camera-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.camera-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,7,86,.78)); }
.camera-preview span { position: absolute; z-index: 2; left: 12px; bottom: 10px; display: flex; gap: 7px; align-items: center; color: white; font-size: 11px; font-weight: 700; }
.camera-preview .icon { width: 16px; }
.health-list > div { min-height: 43px; border-top: 1px solid #ededf1; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.health-list > div > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; }
.health-list .icon { width: 16px; color: var(--navy); }
.health-list .status { padding: 4px 7px; font-size: 9px; }
.console-footer { min-height: 44px; padding: 0 34px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: white; font-size: 10px; }
.console-footer span { display: flex; align-items: center; gap: 7px; }
.console-footer .icon { width: 15px; }

/* Director command centre */
.director-shell { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; background: var(--canvas); }
.side-rail { min-height: 100vh; background: var(--navy-deep); color: white; padding: 19px 16px 16px; display: flex; flex-direction: column; }
.director-shell > .side-rail { padding-block: 22px 18px; }
.side-rail > .brand-logo { width: 130px; height: 58px; margin: 0 7px 9px; }
.rail-context { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); padding: 14px 8px; margin-bottom: 16px; display: grid; }
.rail-context small { text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.45); font-size: 9px; }
.rail-context strong { font: 600 15px Jost, sans-serif; margin-top: 2px; }
.side-rail nav { display: grid; gap: 4px; }
.rail-link { min-height: 43px; color: rgba(255,255,255,.64); display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 11px; padding: 0 11px; font-size: 12px; font-weight: 620; text-decoration: none; }
.rail-link .icon { width: 18px; height: 18px; }
.rail-link.active { color: white; background: rgba(255,255,255,.1); }
.rail-link.active .icon { color: var(--pink-soft); }
.rail-link b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--pink); font-size: 9px; }
.rail-support { margin-top: auto; background: linear-gradient(135deg, rgba(204,25,72,.22), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.12); padding: 12px; display: grid; grid-template-columns: 31px 1fr; column-gap: 9px; }
.rail-support > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; background: var(--pink); }
.rail-support .icon { width: 17px; }
.rail-support strong { font: 600 11px Jost, sans-serif; }
.rail-support small { color: rgba(255,255,255,.55); font-size: 9px; }
.rail-profile { margin-top: 12px; padding: 13px 4px 0; border-top: 1px solid rgba(255,255,255,.13); display: grid; grid-template-columns: 35px 1fr 20px; align-items: center; gap: 9px; }
.rail-profile div { display: grid; }
.rail-profile strong { font: 600 10px Jost, sans-serif; }
.rail-profile small { color: rgba(255,255,255,.5); font-size: 8px; }
.rail-profile > .icon { width: 17px; color: rgba(255,255,255,.55); }
.director-main { min-width: 0; padding: 0 32px 18px; }
.director-topbar { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.breadcrumb { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.director-topbar h1 { margin: 0; font: 630 27px/1.1 Jost, sans-serif; color: var(--navy-deep); }
.director-actions { display: flex; align-items: center; gap: 9px; }
.search-box { width: 184px; height: 42px; display: flex; align-items: center; gap: 9px; color: var(--muted); border: 1px solid var(--line); background: white; font-size: 11px; }
.search-box .icon { width: 17px; margin-left: 11px; }
.director-hero { height: 218px; overflow: hidden; position: relative; color: white; }
.director-hero__image { position: absolute; inset: 0; }
.director-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.director-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,7,86,.97) 0%, rgba(11,7,86,.86) 45%, rgba(11,7,86,.3) 73%, rgba(11,7,86,.7) 100%); }
.director-hero__copy { position: absolute; left: 36px; top: 28px; max-width: 560px; }
.director-hero .eyebrow { color: var(--pink-soft); font-size: 9px; }
.director-hero h2 { margin: 8px 0 7px; font: 600 31px/.98 Jost, sans-serif; }
.director-hero h2 em { color: var(--pink-soft); font-style: normal; }
.director-hero p { margin: 0 0 15px; color: rgba(255,255,255,.67); font-size: 11px; }
.director-hero .button { min-height: 37px; padding: 0 13px; font-size: 10px; }
.coverage-ring { position: absolute; right: 35px; top: 34px; display: flex; align-items: center; gap: 17px; }
.coverage-ring > div { width: 128px; height: 128px; border-radius: 50%; border: 11px solid rgba(255,255,255,.18); border-top-color: var(--pink); border-right-color: var(--pink); display: grid; place-content: center; text-align: center; transform: rotate(-15deg); }
.coverage-ring > div > * { transform: rotate(15deg); }
.coverage-ring strong { font: 650 29px/1 Jost, sans-serif; }
.coverage-ring span { font-size: 9px; color: rgba(255,255,255,.67); }
.coverage-ring > small { font-size: 10px; color: rgba(255,255,255,.68); line-height: 1.4; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.metric { min-height: 104px; background: white; border: 1px solid var(--line); display: grid; grid-template-columns: 39px 1fr auto; gap: 11px; align-items: center; padding: 13px; }
.metric__icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--navy); background: #efeffa; }
.metric__icon .icon { width: 20px; }
.metric div { display: grid; }
.metric small { color: var(--muted); font-size: 9px; }
.metric strong { color: var(--navy); font: 650 22px/1.1 Jost, sans-serif; }
.metric p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.metric p b { color: var(--success); }
.trend { align-self: start; font-size: 8px; font-weight: 800; padding: 4px 6px; background: #e7f4ed; color: var(--success); }
.trend--warn { background: #fff2e0; color: #905b13; }
.director-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 16px; margin-top: 16px; }
.director-grid > .panel { min-height: 315px; padding: 20px; }
.director-grid .panel-heading h2 { font-size: 19px; }
.director-grid .text-action { font-size: 9px; }
.attention-item { min-height: 72px; display: grid; grid-template-columns: 38px 1fr auto 24px; gap: 10px; align-items: center; border-top: 1px solid #e9e9ef; }
.attention-item:first-of-type { margin-top: 12px; }
.attention-item--urgent { margin-left: -20px; margin-right: -20px; padding: 0 20px; background: #fff6f8; }
.attention-icon { width: 35px; height: 35px; display: grid; place-items: center; background: #efeffa; color: var(--navy); }
.attention-item--urgent .attention-icon { background: #f9dfe6; color: var(--pink-dark); }
.attention-icon .icon { width: 18px; }
.attention-item strong { display: block; font: 620 11px Jost, sans-serif; color: var(--navy); }
.attention-item p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.attention-item .status { padding: 5px 7px; font-size: 8px; }
.attention-item > button { border: 0; background: transparent; color: var(--muted); }
.attention-item > button .icon { width: 16px; }
.service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.service-card { height: 145px; position: relative; overflow: hidden; color: white; }
.service-card > img { width: 100%; height: 100%; object-fit: cover; }
.service-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(11,7,86,.94)); }
.service-card > div { position: absolute; left: 13px; right: 13px; bottom: 12px; display: grid; }
.service-card small { color: var(--pink-soft); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.service-card strong { font: 620 13px Jost, sans-serif; margin: 2px 0 7px; }
.service-card .status { justify-self: start; padding: 4px 7px; font-size: 8px; color: white; background: rgba(25,164,106,.25); border-color: rgba(255,255,255,.18); }
.client-score { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 12px; padding-top: 11px; }
.client-score > div { padding: 0 11px; border-left: 1px solid var(--line); display: grid; }
.client-score > div:first-child { padding-left: 0; border-left: 0; }
.client-score strong { color: var(--navy); font: 650 17px Jost, sans-serif; }
.client-score span { color: var(--muted); font-size: 8px; }
.director-footer { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 8px; }

@media (max-width: 700px) {
  .phone-stage { grid-template-columns: 390px; padding: 0; }
  .phone { border: 0; border-radius: 0; box-shadow: none; }
  .concept-label { display: none; }
}

/* Full library mobile workflows */
.phone-stage--library { background: radial-gradient(circle at 45% 15%, #332a83, var(--navy-deep) 46%, #07052e 100%); }
.phone--workflow { min-height: 844px; height: 844px; }
.phone__bar--light { color: var(--navy-deep); }
.workflow-header { height: 70px; margin-top: 27px; background: white; border-bottom: 1px solid var(--line); padding: 5px 18px; display: flex; align-items: center; justify-content: space-between; }
.workflow-header .brand-logo { width: 105px; height: 52px; }
.workflow-title { background: white; padding: 13px 19px 14px; }
.workflow-title > span { color: var(--muted); font-size: 10px; }
.workflow-title h1 { color: var(--navy-deep); margin: 3px 0 0; font: 650 26px/1.05 Jost, sans-serif; letter-spacing: -.015em; }
.workflow-body { height: 623px; overflow: hidden; padding: 13px 15px 18px; }
.step-line { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 0 0 11px; }
.step-line i { height: 3px; background: #d8d9df; }
.step-line i.done, .step-line i.current { background: var(--pink); }
.camera-frame { height: 275px; position: relative; overflow: hidden; background: #15142a; color: white; }
.camera-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.84) contrast(1.03); }
.camera-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,7,86,.06),rgba(11,7,86,.55)); }
.face-guide { position: absolute; z-index: 2; left: 50%; top: 44%; width: 152px; height: 198px; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.9); border-radius: 48%; box-shadow: 0 0 0 999px rgba(11,7,86,.14); }
.camera-frame > span { position:absolute; z-index:3; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:7px; font-size:10px; font-weight:700; }
.camera-frame > span .icon { width:15px; }
.spoken-prompt { margin-top: 10px; padding: 12px 14px; background: var(--navy-deep); color: white; display: grid; text-align: center; }
.spoken-prompt small { color: var(--pink-soft); font-size: 9px; text-transform: uppercase; letter-spacing:.1em; }
.spoken-prompt strong { font: 650 18px Jost,sans-serif; margin-top:3px; }
.record-button { margin: 10px auto 0; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; color: var(--pink-dark); font-weight: 800; }
.record-button > span { width: 30px; height: 30px; border-radius:50%; background: var(--pink); box-shadow: 0 0 0 5px #f7dce4; }
.microcopy { margin: 6px 9px; text-align:center; color:var(--muted); font-size:9px; line-height:1.35; }
.privacy-card { margin-top: 10px; padding: 11px 12px; background:white; border:1px solid var(--line); display:grid; grid-template-columns:27px 1fr; gap:9px; align-items:center; }
.privacy-card > .icon { color: var(--navy); width:20px; }
.privacy-card p { display:grid; margin:0; }
.privacy-card strong { font: 650 11px Jost,sans-serif; color:var(--navy); }
.privacy-card small { color:var(--muted); font-size:9px; line-height:1.3; }
.break-hero { background: var(--navy-deep); color:white; padding: 18px 17px; text-align:center; }
.break-dial { width: 146px; height:146px; margin:0 auto 12px; border-radius:50%; display:grid; place-content:center; border:11px solid rgba(255,255,255,.16); border-top-color:var(--pink); border-right-color:var(--pink); }
.break-dial strong { font:650 30px/1 Jost,sans-serif; }
.break-dial span { font-size:9px; color:rgba(255,255,255,.65); }
.break-hero h2 { margin:0; font:620 16px Jost,sans-serif; }
.break-hero p { margin:5px auto 13px; max-width:280px; color:rgba(255,255,255,.65); font-size:10px; }
.primary-wide,.secondary-wide { min-height:43px; width:100%; border:0; display:flex; align-items:center; justify-content:center; gap:8px; font:650 12px Jost,sans-serif; }
.primary-wide { background:var(--pink); color:white; }
.secondary-wide { background:white; color:var(--navy); border:1px solid var(--line); }
.primary-wide .icon,.secondary-wide .icon { width:17px; }
.simple-panel { margin-top:11px; background:white; border:1px solid var(--line); padding:0 13px; }
.simple-panel > div { min-height:48px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ececf1; font-size:11px; }
.simple-panel > div:first-child { border-top:0; }
.simple-panel span { color:var(--muted); }
.simple-panel strong { color:var(--navy); }
.patrol-hero { background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid)); color:white; padding:17px; }
.patrol-hero > span { color:var(--pink-soft); text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:800; }
.patrol-hero > strong { display:block; font:650 22px Jost,sans-serif; margin:4px 0; }
.patrol-hero p { margin:0; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.65); font-size:10px; }
.patrol-hero .icon { width:14px; }
.scan-panel { background:white; border:1px solid var(--line); margin-top:10px; padding:14px; text-align:center; }
.scan-symbol { width:53px; height:53px; margin:0 auto 8px; display:grid; place-items:center; background:#efeffa; color:var(--navy); }
.scan-panel h2 { margin:0; font:650 16px Jost,sans-serif; color:var(--navy); }
.scan-panel p { margin:4px auto 10px; max-width:275px; color:var(--muted); font-size:10px; }
.scan-panel .secondary-wide { margin-top:7px; }
.round-progress { background:white; border:1px solid var(--line); margin-top:10px; padding:12px; }
.round-progress > div:first-child { display:flex; justify-content:space-between; font-size:10px; }
.round-progress > div:first-child strong { color:var(--navy); }
.round-progress > div:first-child span,.round-progress small { color:var(--muted); }
.progress-track { height:5px; margin:9px 0 6px; background:#e5e5ec; }
.progress-track i { display:block; height:100%; background:var(--pink); }
.round-progress small { font-size:8px; }
.form-stack { display:grid; gap:8px; }
.form-field { min-height:56px; background:white; border:1px solid var(--line); padding:10px 12px; position:relative; display:grid; align-content:center; }
.form-field small { color:var(--muted); font-size:9px; }
.form-field strong { color:var(--navy); font:620 12px Jost,sans-serif; margin-top:2px; }
.form-field > .icon { position:absolute; right:11px; top:18px; width:18px; color:var(--muted); }
.form-field--large { min-height:84px; align-content:start; }
.form-field--large span { color:var(--muted); font-size:10px; margin-top:6px; line-height:1.35; }
.evidence-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.evidence-actions button { min-height:72px; border:1px solid var(--line); background:white; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; text-align:left; padding:11px; }
.evidence-actions .icon { grid-row:1/3; color:var(--navy); width:20px; }
.evidence-actions strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.evidence-actions small { color:var(--muted); font-size:8px; }
.urgent-card { margin:9px 0; padding:10px 11px; background:#fff1f4; color:var(--pink-dark); display:grid; grid-template-columns:26px 1fr; gap:8px; }
.urgent-card .icon { width:20px; }
.urgent-card p { margin:0; display:grid; }
.urgent-card strong { font:650 11px Jost,sans-serif; }
.urgent-card small { color:#77515b; font-size:8px; }
.mobile-search { height:42px; background:white; border:1px solid var(--line); display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; padding:0 12px; }
.mobile-search .icon { width:17px; }
.list-title { margin:13px 1px 7px; color:var(--navy); font:650 12px Jost,sans-serif; }
.message-list,.request-list,.check-list { background:white; border:1px solid var(--line); padding:0 11px; }
.message-item { min-height:67px; border-top:1px solid #ececf1; display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:9px; }
.message-item:first-child { border-top:0; }
.message-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#eeeefa; color:var(--navy); font:700 10px Jost,sans-serif; }
.message-item p { margin:0; display:grid; }
.message-item strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.message-item small { color:var(--muted); font-size:8px; margin-top:3px; }
.message-item em { min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; background:var(--pink); color:white; font-style:normal; font-size:8px; }
.compose-button { position:absolute; right:19px; bottom:88px; width:45px; height:45px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--pink); color:white; box-shadow:0 8px 18px rgba(204,25,72,.3); }
.staff-id-card { background:linear-gradient(145deg,var(--navy-deep),var(--navy-mid)); color:white; padding:14px; }
.id-logo .brand-logo { width:94px; height:39px; }
.id-person { margin-top:8px; display:flex; align-items:center; gap:12px; }
.id-photo { width:72px; height:83px; background:url('assets/verification-guard.png') 50% 26%/150% auto; border:2px solid rgba(255,255,255,.5); }
.id-person h2 { margin:0; font:650 20px Jost,sans-serif; }
.id-person p { margin:2px 0 0; color:rgba(255,255,255,.65); font-size:10px; }
.id-number { margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.18); display:flex; justify-content:space-between; align-items:end; }
.id-number span { color:rgba(255,255,255,.6); font-size:9px; }
.id-number strong { font:650 18px Jost,sans-serif; letter-spacing:.08em; }
.check-list > div { min-height:59px; border-top:1px solid #ececf1; display:grid; grid-template-columns:32px 1fr 18px; align-items:center; gap:9px; }
.check-list > div:first-child { border-top:0; }
.check-mark { width:29px; height:29px; display:grid; place-items:center; background:#e7f4ed; color:var(--success); }
.check-mark--warn { background:#fff0e0; color:var(--warning); }
.check-mark .icon { width:17px; }
.check-list p { display:grid; margin:0; }
.check-list strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.check-list small { color:var(--muted); font-size:8px; margin-top:2px; }
.check-list > div > .icon { width:16px; color:var(--muted); }
.request-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.request-grid button { min-height:102px; border:1px solid var(--line); background:white; padding:12px; text-align:left; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; gap:2px 9px; }
.request-grid .icon { grid-row:1/3; width:30px; height:30px; padding:6px; background:#eeeefa; color:var(--navy); }
.request-grid strong { color:var(--navy); font:620 12px Jost,sans-serif; align-self:end; }
.request-grid small { color:var(--muted); font-size:8px; }
.request-list { margin-bottom:10px; }
.request-list > div { min-height:65px; border-top:1px solid #ececf1; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; }
.request-list > div:first-child { border-top:0; }
.request-list > div > span:first-child { width:31px; height:31px; display:grid; place-items:center; background:#eeeefa; color:var(--navy); }
.request-list .icon { width:17px; }
.request-list p { margin:0; display:grid; }
.request-list strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.request-list small { color:var(--muted); font-size:8px; }
.request-list .status { padding:4px 7px; font-size:8px; }
.image-assignment { height:190px; position:relative; color:white; overflow:hidden; }
.image-assignment img { width:100%; height:100%; object-fit:cover; }
.image-assignment::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,7,86,.1),rgba(11,7,86,.92)); }
.image-assignment > div { position:absolute; z-index:2; left:14px; right:14px; bottom:13px; }
.image-assignment span { color:var(--pink-soft); text-transform:uppercase; letter-spacing:.1em; font-size:8px; font-weight:800; }
.image-assignment h2 { margin:3px 0; font:650 22px Jost,sans-serif; }
.image-assignment p { margin:0; display:flex; gap:5px; align-items:center; color:rgba(255,255,255,.7); font-size:9px; }
.image-assignment .icon { width:14px; }
.journey-step { margin:9px 0; background:white; border:1px solid var(--line); padding:12px; display:grid; grid-template-columns:38px 1fr; gap:10px; }
.journey-step > span,.step-number { width:36px; height:36px; display:grid; place-items:center; background:var(--navy); color:white; font:650 12px Jost,sans-serif; }
.journey-step strong,.walkaround-step strong { color:var(--navy); font:620 12px Jost,sans-serif; }
.journey-step p,.walkaround-step p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.controlled-info { margin-top:9px; background:white; border:1px solid var(--line); padding:10px 12px; }
.controlled-info h2 { margin:0 0 5px; font:650 12px Jost,sans-serif; color:var(--navy); }
.controlled-info > div { min-height:51px; border-top:1px solid #ececf1; display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; }
.controlled-info > div > span { color:var(--navy); }
.controlled-info .icon { width:17px; }
.controlled-info p { margin:0; display:grid; }
.controlled-info strong { color:var(--navy); font-size:10px; }
.controlled-info small { color:var(--muted); font-size:8px; }
.controlled-info .status { padding:4px 7px; font-size:8px; }
.vehicle-photo { height:144px; position:relative; color:white; overflow:hidden; }
.vehicle-photo img { width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.vehicle-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(11,7,86,.88)); }
.vehicle-photo > div { position:absolute; z-index:2; left:13px; bottom:11px; display:grid; }
.vehicle-photo span { color:var(--pink-soft); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.vehicle-photo strong { font:620 14px Jost,sans-serif; }
.walkaround-step { background:white; border:1px solid var(--line); border-top:0; padding:11px; display:grid; grid-template-columns:37px 1fr; gap:9px; }
.reading-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:9px 0; }
.reading-grid .form-field strong { font-size:17px; }
.next-step { margin-top:9px; min-height:50px; background:white; border:1px solid var(--line); padding:0 11px; display:grid; grid-template-columns:1fr auto 18px; align-items:center; gap:7px; }
.next-step span { color:var(--muted); font-size:8px; }
.next-step strong { color:var(--navy); font:620 10px Jost,sans-serif; }
.next-step .icon { width:15px; }

/* Full library desktop role views */
.role-shell { min-height:100vh; display:grid; grid-template-columns:246px 1fr; background:var(--canvas); }
.role-main { min-width:0; padding:0 26px; }
.role-top { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.role-top > div:first-child > span { display:block; color:var(--muted); font-size:10px; margin-bottom:3px; }
.role-top h1 { margin:0; color:var(--navy-deep); font:630 27px/1.1 Jost,sans-serif; }
.role-top > div:last-child { display:flex; gap:9px; align-items:center; }
.role-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.role-metric { min-height:102px; background:white; border:1px solid var(--line); display:grid; grid-template-columns:42px 1fr; align-items:center; gap:11px; padding:14px; }
.role-metric > span { width:42px; height:42px; display:grid; place-items:center; color:var(--navy); background:#efeffa; }
.role-metric > span .icon { width:21px; }
.role-metric div { display:grid; }
.role-metric small { color:var(--muted); font-size:9px; }
.role-metric strong { color:var(--navy); font:650 23px Jost,sans-serif; line-height:1.05; }
.role-metric p { margin:2px 0 0; color:var(--muted); font-size:9px; }
.role-metric.attention > span { color:var(--pink-dark); background:#fae5eb; }
.role-footer { height:37px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:8px; }
.ops-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; margin-top:13px; }
.ops-grid > .panel { height:650px; padding:18px; }
.role-shell .panel-heading h2 { font-size:19px; }
.role-shell .panel-heading { align-items:center; }
.role-shell .panel-heading .text-action { font-size:9px; }
.operations-map { height:568px; margin-top:14px; position:relative; overflow:hidden; background:#e9e9f1; background-image:linear-gradient(25deg,transparent 45%,rgba(13,7,87,.045) 46%,rgba(13,7,87,.045) 54%,transparent 55%),linear-gradient(155deg,transparent 45%,rgba(13,7,87,.04) 46%,rgba(13,7,87,.04) 54%,transparent 55%); background-size:130px 130px,170px 170px; }
.operations-map .map-road { position:absolute; background:white; box-shadow:0 0 0 1px #d9dae2; }
.road-a { width:140%; height:27px; top:42%; left:-20%; transform:rotate(-12deg); }
.road-b { width:32px; height:140%; left:59%; top:-20%; transform:rotate(8deg); }
.road-c { width:100%; height:20px; top:72%; left:0; transform:rotate(5deg); }
.operations-map > i { position:absolute; width:18px; height:18px; border-radius:50% 50% 50% 0; background:var(--success); transform:rotate(-45deg); box-shadow:0 0 0 5px rgba(19,135,91,.16); }
.operations-map > i.danger { background:var(--pink); box-shadow:0 0 0 5px rgba(204,25,72,.16); }
.operations-map > div { position:absolute; left:18px; bottom:18px; width:220px; background:var(--navy-deep); color:white; padding:14px; }
.operations-map > div strong { font:620 14px Jost,sans-serif; }
.operations-map > div p { margin:6px 0 0; color:rgba(255,255,255,.68); font-size:10px; }
.operations-map > div p b { color:#63d9a5; }
.operations-map > div .danger-text b { color:var(--pink-soft); }
.queue-panel .issue-row:first-of-type { margin-top:12px; }
.issue-row { min-height:78px; border-top:1px solid #e9e9ef; display:grid; grid-template-columns:38px 1fr auto 18px; align-items:center; gap:10px; }
.issue-row > span:first-child { width:36px; height:36px; display:grid; place-items:center; color:var(--navy); background:#efeffa; }
.issue-row > span:first-child .icon { width:18px; }
.issue-row p { margin:0; display:grid; }
.issue-row strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.issue-row small { color:var(--muted); font-size:9px; margin-top:2px; }
.issue-row .status { padding:5px 7px; font-size:8px; }
.issue-row > .icon { width:15px; color:var(--muted); }
.data-panel { margin-top:13px; min-height:650px; padding:18px; }
.table-wrap { margin-top:14px; overflow:hidden; border:1px solid var(--line); }
.table-wrap table { border-collapse:collapse; width:100%; background:white; font-size:10px; }
.table-wrap th { height:48px; padding:0 14px; background:var(--navy-deep); color:white; text-align:left; font:600 10px Jost,sans-serif; }
.table-wrap td { height:66px; padding:0 14px; border-top:1px solid var(--line); color:var(--muted); }
.table-wrap td strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.table-wrap tr:nth-child(even) td { background:#fafafd; }
.table-wrap .status { padding:5px 8px; font-size:8px; }
.cell-warn { color:var(--pink-dark)!important; font-weight:800; background:#fff5f7!important; }
.schedule-note { margin-top:14px; background:#f0effa; color:var(--navy); min-height:54px; padding:0 14px; display:flex; align-items:center; gap:10px; font-size:10px; }
.schedule-note .icon { width:18px; }
.review-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:13px; }
.review-grid > .panel { min-height:750px; padding:18px; }
.review-image { height:485px; margin-top:14px; overflow:hidden; position:relative; }
.review-image img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.review-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,7,86,.82)); }
.review-image span { position:absolute; z-index:2; left:14px; bottom:13px; color:white; display:flex; gap:8px; align-items:center; font-size:10px; }
.review-image .icon { width:17px; }
.spoken-result { margin-top:13px; min-height:68px; border:1px solid var(--line); display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; padding:0 12px; }
.spoken-result > .icon { color:var(--success); width:21px; }
.spoken-result p { margin:0; display:grid; }
.spoken-result strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.spoken-result small { color:var(--muted); font-size:9px; }
.decision-panel .issue-row:first-of-type { margin-top:12px; }
.manager-note { display:grid; gap:6px; margin-top:14px; }
.manager-note > span { color:var(--navy); font:620 11px Jost,sans-serif; }
.manager-note textarea { height:112px; resize:none; border:1px solid var(--line); padding:12px; color:var(--muted); font:10px Hanken,sans-serif; }
.decision-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:13px; }
.button--ghost-light { background:white; border:1px solid var(--line); color:var(--navy); }
.assurance-note { margin:12px 0 0; color:var(--muted); font-size:9px; text-align:right; }
.fleet-banner { height:155px; position:relative; overflow:hidden; color:white; margin-bottom:13px; }
.fleet-banner > img { width:100%; height:100%; object-fit:cover; object-position:center 57%; }
.fleet-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,7,86,.95),rgba(11,7,86,.72) 47%,rgba(11,7,86,.12)); }
.fleet-banner > div { position:absolute; z-index:2; left:25px; top:38px; }
.fleet-banner h2 { margin:0; font:650 25px Jost,sans-serif; }
.fleet-banner p { margin:4px 0; color:rgba(255,255,255,.7); font-size:10px; }
.fleet-banner > .status { position:absolute; z-index:2; right:24px; bottom:22px; }
.patrol-builder { display:grid; grid-template-columns:1.13fr .87fr; gap:13px; }
.patrol-builder > .panel { min-height:795px; padding:18px; }
.stop-list { margin-top:14px; border:1px solid var(--line); }
.stop-list > div { min-height:112px; border-top:1px solid var(--line); display:grid; grid-template-columns:46px 1fr 34px; align-items:center; gap:12px; padding:0 14px; }
.stop-list > div:first-child { border-top:0; }
.stop-list > div > span { width:42px; height:42px; display:grid; place-items:center; background:var(--navy); color:white; font:650 12px Jost,sans-serif; }
.stop-list p { margin:0; display:grid; }
.stop-list strong { color:var(--navy); font:620 12px Jost,sans-serif; }
.stop-list small { color:var(--muted); font-size:9px; margin-top:4px; }
.stop-list button { border:0; background:transparent; color:var(--muted); }
.rule-fields { display:grid; gap:9px; margin-top:14px; }
.rule-fields .form-field { min-height:92px; background:#fbfbfd; }
.employee-grid { display:grid; grid-template-columns:320px 1fr; gap:13px; }
.employee-profile { min-height:795px; background:var(--navy-deep); color:white; }
.employee-profile > img { width:100%; height:300px; object-fit:cover; object-position:center 26%; }
.employee-profile > div { padding:18px 20px 16px; }
.employee-profile h2 { margin:0; font:650 24px Jost,sans-serif; }
.employee-profile p { margin:2px 0 12px; color:rgba(255,255,255,.6); font-size:10px; }
.employee-profile .status { color:white; background:rgba(19,135,91,.25); border-color:rgba(255,255,255,.15); }
.employee-profile dl { margin:4px 20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.employee-profile dt { color:var(--pink-soft); text-transform:uppercase; letter-spacing:.09em; font-size:8px; }
.employee-profile dd { margin:3px 0 18px; color:white; font-size:11px; }
.employee-grid > .panel { min-height:795px; }
.eligibility-note { margin-top:14px; background:#efeffa; padding:14px; display:grid; grid-template-columns:36px 1fr; gap:10px; }
.eligibility-note > span { width:34px; height:34px; display:grid; place-items:center; background:var(--navy); color:white; }
.eligibility-note .icon { width:18px; }
.eligibility-note p { margin:0; display:grid; }
.eligibility-note strong { color:var(--navy); font:620 11px Jost,sans-serif; }
.eligibility-note small { color:var(--muted); font-size:9px; line-height:1.4; }
.client-hero { height:225px; position:relative; color:white; overflow:hidden; }
.client-hero img { width:100%; height:100%; object-fit:cover; object-position:center 51%; }
.client-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,7,86,.94),rgba(11,7,86,.62) 55%,rgba(11,7,86,.12)); }
.client-hero > div { position:absolute; z-index:2; left:29px; top:37px; }
.client-hero > div > span:first-child { color:var(--pink-soft); text-transform:uppercase; letter-spacing:.1em; font-size:9px; }
.client-hero h2 { margin:7px 0 4px; max-width:470px; font:630 29px/1.03 Jost,sans-serif; }
.client-hero p { margin:0 0 12px; color:rgba(255,255,255,.65); font-size:10px; }
.client-hero .status { color:white; background:rgba(19,135,91,.25); border-color:rgba(255,255,255,.16); }
.client-hero + .role-metrics { margin-top:13px; }
.client-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:13px; }
.client-grid > .panel { min-height:400px; padding:18px; }
.client-grid .issue-row:first-of-type { margin-top:12px; }
.support-strip { height:127px; margin-top:14px; background:var(--navy-deep); color:white; display:grid; grid-template-columns:190px 1fr auto; align-items:center; gap:18px; padding-right:18px; overflow:hidden; }
.support-strip img { width:190px; height:127px; object-fit:cover; }
.support-strip p { margin:0; display:grid; }
.support-strip strong { font:620 13px Jost,sans-serif; }
.support-strip small { color:rgba(255,255,255,.62); font-size:9px; margin-top:4px; }
.support-strip .text-action { color:white; font-size:9px; }

/* Registered van pairing console */
.pair-console { min-height:100vh; background:var(--navy-deep); color:white; display:grid; grid-template-rows:76px 1fr 46px; }
.pair-console > header { padding:0 34px; display:grid; grid-template-columns:170px 1fr auto; align-items:center; gap:22px; border-bottom:1px solid rgba(255,255,255,.13); }
.pair-console > header .brand-logo { width:120px; height:55px; }
.pair-console > header > div { border-left:1px solid rgba(255,255,255,.18); padding-left:22px; display:flex; align-items:center; gap:11px; font:600 13px Jost,sans-serif; }
.pair-console > header > span { color:rgba(255,255,255,.55); font-size:11px; }
.pair-console > main { display:grid; grid-template-columns:1fr 520px; align-items:center; max-width:1320px; width:100%; margin:0 auto; gap:100px; }
.pair-copy > span { color:var(--pink-soft); text-transform:uppercase; letter-spacing:.13em; font-weight:800; font-size:10px; }
.pair-copy h1 { margin:12px 0 14px; font:620 54px/.94 Jost,sans-serif; letter-spacing:-.02em; }
.pair-copy p { max-width:610px; color:rgba(255,255,255,.62); font-size:14px; line-height:1.5; }
.pair-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:40px; }
.pair-steps span { min-height:72px; border-top:1px solid rgba(255,255,255,.18); padding-top:13px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); font-size:11px; }
.pair-steps b { width:27px; height:27px; display:grid; place-items:center; background:var(--pink); color:white; }
.qr-panel { background:white; color:var(--navy); min-height:540px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.qr-code { width:294px; height:294px; padding:18px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:8px; background:white; border:12px solid var(--navy); }
.qr-code i { background:var(--navy); }
.qr-code i:nth-child(2),.qr-code i:nth-child(5),.qr-code i:nth-child(8),.qr-code i:nth-child(10),.qr-code i:nth-child(15) { background:white; border:8px solid var(--navy); }
.qr-panel strong { margin-top:24px; font:650 19px Jost,sans-serif; }
.qr-panel small { color:var(--muted); margin-top:6px; }
.pair-console > footer { padding:0 34px; border-top:1px solid rgba(255,255,255,.13); display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.58); font-size:10px; }
.pair-console > footer .icon { width:16px; }
.pair-console > footer span { margin-left:auto; }

/* v5 visual system: dark operational surfaces, compact native rhythm and stronger hierarchy */
:root {
  --night: #041729;
  --night-raised: #08233b;
  --night-panel: #0a2a46;
  --night-soft: #103554;
  --night-line: rgba(133, 188, 229, .18);
  --night-text: #f7f9ff;
  --night-muted: #a9bdd7;
  --night-faint: #728ca9;
}

body[data-screen="guard"] { background: radial-gradient(circle at 34% 8%, #2b2379 0, #110c58 38%, #06032f 100%); }
.phone--shift { background: var(--night); color: white; }
.phone--shift .mobile-content { background: linear-gradient(180deg, #071d33, var(--night)); }
.phone--shift .next-action { border: 1px solid rgba(155,184,228,.2); border-radius: 14px; background: linear-gradient(135deg, #171168, #0a2c48); box-shadow: 0 18px 34px rgba(0,0,0,.28); }
.phone--shift .action-grid { gap: 10px; }
.phone--shift .action-card { background: rgba(255,255,255,.045); border-color: var(--night-line); border-radius: 14px; color: white; }
.phone--shift .action-card > span { background: rgba(145,174,227,.11); color: #bccdff; border-radius: 11px; }
.phone--shift .action-card strong { color: white; }
.phone--shift .action-card small { color: var(--night-muted); }
.phone--shift .action-card--alert > span { background: rgba(204,25,72,.17); color: #ff9ab5; }
.phone--shift .action-card--alert strong { color: #ffb2c7; }
.phone--shift .shift-note { background: rgba(255,255,255,.04); border-color: var(--night-line); border-radius: 13px; }
.phone--shift .shift-note strong { color: white; }
.phone--shift .shift-note p, .phone--shift .privacy-line { color: var(--night-muted); }
.phone--shift .bottom-nav { background: rgba(4,19,35,.97); border-color: var(--night-line); }
.phone--shift .bottom-nav a { color: #7890aa; }
.phone--shift .bottom-nav a.active { color: white; }
.phone-stage--library { background: transparent; }
.phone--workflow {
  background: var(--night);
  color: var(--night-text);
  border-color: #16152a;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255,255,255,.08);
}
.phone--workflow::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 210px;
  background: radial-gradient(circle at 88% 3%, rgba(204,25,72,.26), transparent 39%), linear-gradient(145deg, #0f0a63 0%, #071b34 72%);
  pointer-events: none;
}
.phone--workflow .phone__bar { color: white; }
.workflow-header {
  height: 58px;
  margin-top: 27px;
  padding: 3px 19px;
  background: transparent;
  border: 0;
  position: relative;
  z-index: 2;
}
.workflow-header .brand-logo { width: 104px; height: 46px; }
.workflow-header .icon-button { border-radius: 12px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.workflow-title {
  min-height: 82px;
  padding: 9px 20px 15px;
  background: transparent;
  position: relative;
  z-index: 2;
}
.workflow-title > span { color: #9eb5d2; font-size: 10px; letter-spacing: .025em; }
.workflow-title h1 { color: white; margin-top: 5px; font-size: 28px; letter-spacing: -.025em; }
.workflow-body { height: 589px; padding: 15px 16px 18px; background: linear-gradient(180deg, rgba(7,27,50,.92), var(--night) 22%); position: relative; z-index: 1; }
.bottom-nav {
  background: rgba(4, 19, 35, .96);
  border-color: var(--night-line);
  box-shadow: 0 -12px 34px rgba(0,0,0,.2);
}
.bottom-nav a { color: #7890aa; }
.bottom-nav a.active { color: white; }
.bottom-nav a.active::before { top: -8px; border-radius: 99px; }
.phone--workflow .primary-wide {
  border-radius: 12px;
  min-height: 48px;
  box-shadow: 0 12px 26px rgba(204,25,72,.19);
}
.phone--workflow .secondary-wide { background: rgba(255,255,255,.05); color: white; border-color: var(--night-line); border-radius: 12px; }
.phone--workflow .privacy-card,
.phone--workflow .simple-panel,
.phone--workflow .scan-panel,
.phone--workflow .form-field,
.phone--workflow .message-list,
.phone--workflow .request-list,
.phone--workflow .controlled-info,
.phone--workflow .round-progress,
.phone--workflow .next-step,
.phone--workflow .check-list,
.phone--workflow .journey-step,
.phone--workflow .reading-grid .form-field {
  background: rgba(255,255,255,.045);
  border-color: var(--night-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.phone--workflow .privacy-card strong,
.phone--workflow .simple-panel strong,
.phone--workflow .form-field strong,
.phone--workflow .message-item strong,
.phone--workflow .request-list strong,
.phone--workflow .controlled-info strong,
.phone--workflow .check-list strong,
.phone--workflow .next-step strong,
.phone--workflow .list-title { color: white; }
.phone--workflow .privacy-card small,
.phone--workflow .simple-panel span,
.phone--workflow .form-field small,
.phone--workflow .form-field--large span,
.phone--workflow .message-item small,
.phone--workflow .request-list small,
.phone--workflow .controlled-info small,
.phone--workflow .check-list small,
.phone--workflow .round-progress,
.phone--workflow .next-step span,
.phone--workflow .microcopy { color: var(--night-muted); }
.phone--workflow .form-field > .icon,
.phone--workflow .issue-row > .icon { color: var(--night-muted); }
.phone--workflow .simple-panel > div,
.phone--workflow .message-item,
.phone--workflow .request-list > div,
.phone--workflow .controlled-info > div,
.phone--workflow .check-list > div { border-color: var(--night-line); }
.phone--workflow .status { background: rgba(19,135,91,.14); color: #8ee6bd; border-color: rgba(77,204,146,.26); }
.phone--workflow .status--warn { background: rgba(222,139,8,.13); color: #ffd18b; border-color: rgba(222,139,8,.28); }
.phone--workflow .status--neutral { background: rgba(255,255,255,.06); color: var(--night-muted); border-color: var(--night-line); }
.phone--workflow .status--danger { background: rgba(204,25,72,.15); color: #ff9ab5; border-color: rgba(204,25,72,.35); }
.phone--workflow .break-hero,
.phone--workflow .patrol-hero,
.phone--workflow .spoken-prompt { background: linear-gradient(145deg, #151066, #082942); border: 1px solid var(--night-line); }
.phone--workflow .camera-frame { border-radius: 16px; border: 1px solid var(--night-line); }
.phone--workflow .image-assignment,
.phone--workflow .vehicle-photo { border-radius: 16px; overflow: hidden; }
.phone--workflow .urgent-card { background: rgba(204,25,72,.13); border-color: rgba(204,25,72,.32); }
.phone--workflow .urgent-card strong { color: #ffb1c6; }
.phone--workflow .urgent-card small { color: #c6b4c6; }
.phone--workflow .mobile-search { background: rgba(255,255,255,.06); color: var(--night-muted); border: 1px solid var(--night-line); }
.phone--workflow .mobile-search { color: #c6d5e8; }
.phone--workflow .scan-panel h2,
.phone--workflow .round-progress > div:first-child strong,
.phone--workflow .controlled-info h2,
.phone--workflow .journey-step strong,
.phone--workflow .walkaround-step strong { color: white; }
.phone--workflow .scan-panel p,
.phone--workflow .journey-step p,
.phone--workflow .walkaround-step p { color: var(--night-muted); }
.phone--workflow .journey-step > span,
.phone--workflow .step-number { background: #1c176e; }
.phone--workflow .evidence-actions button,
.phone--workflow .walkaround-step { background: rgba(255,255,255,.045); border-color: var(--night-line); color: white; }
.phone--workflow .evidence-actions .icon { color: #bdceff; }
.phone--workflow .evidence-actions strong { color: white; }
.phone--workflow .evidence-actions small { color: var(--night-muted); }
.phone--workflow .progress-track { background: rgba(255,255,255,.1); }
.phone--workflow .controlled-info > div > span { color: #b8caff; }
.phone--workflow .compose-button { box-shadow: 0 12px 28px rgba(204,25,72,.35); }
.phone--workflow .staff-id-card { box-shadow: 0 22px 42px rgba(0,0,0,.24); }
.phone--workflow .scan-symbol,
.phone--workflow .check-mark,
.phone--workflow .message-item > span,
.phone--workflow .request-list > div > span { background: rgba(145,173,226,.12); color: #b9caff; }
.phone--workflow .reading-grid { gap: 10px; }

/* Staff services and leave */
.service-feature { background: linear-gradient(145deg, #15106b, #0c3150); border: 1px solid rgba(153,189,229,.22); border-radius: 16px; padding: 17px; box-shadow: 0 18px 36px rgba(0,0,0,.2); }
.service-feature > div { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.service-feature__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.09); color: white; }
.service-feature p { margin: 0; display: grid; }
.service-feature small { color: #aebfe0; font-size: 9px; }
.service-feature strong { color: white; font: 650 18px Jost, sans-serif; }
.service-feature em { color: #c2cce0; font-style: normal; font-size: 10px; margin-top: 2px; }
.service-feature > button { margin-top: 16px; width: 100%; height: 43px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 11px; background: white; color: var(--navy-deep); font-weight: 800; }
.service-feature > button .icon { width: 16px; }
.service-links { display: grid; margin-top: 13px; border: 1px solid var(--night-line); border-radius: 15px; overflow: hidden; }
.service-links > button { min-height: 72px; padding: 0 13px; border: 0; border-top: 1px solid var(--night-line); background: rgba(255,255,255,.035); color: white; display: grid; grid-template-columns: 38px 1fr 18px; gap: 11px; align-items: center; text-align: left; }
.service-links > button:first-child { border-top: 0; }
.service-links > button > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(144,174,227,.1); color: #b8cbff; }
.service-links p { margin: 0; display: grid; gap: 2px; }
.service-links strong { font: 620 13px Jost, sans-serif; }
.service-links small { color: var(--night-muted); font-size: 9px; }
.service-links > button > .icon { width: 16px; color: #8ea6c3; }
.open-update { margin-top: 13px; border-radius: 14px; padding: 13px; background: rgba(204,25,72,.1); border: 1px solid rgba(204,25,72,.27); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.open-update > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; min-width: 0; }
.open-update > div > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(204,25,72,.18); color: #ff9ab5; }
.open-update p { margin: 0; display: grid; min-width: 0; }
.open-update p small { color: #f0b0c1; font-size: 8px; }
.open-update p strong { color: white; font: 620 11px Jost, sans-serif; }
.open-update p em { color: var(--night-muted); font-style: normal; font-size: 8px; }

.leave-balance { padding: 18px; border: 1px solid rgba(142,186,226,.24); border-radius: 17px; background: linear-gradient(145deg, rgba(34,27,118,.98), rgba(6,45,72,.98)); box-shadow: 0 22px 42px rgba(0,0,0,.25); }
.leave-balance__copy { display: grid; }
.leave-balance__copy small { color: #afc4e0; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.leave-balance__copy strong { margin-top: 3px; color: white; font: 650 36px/.95 Jost, sans-serif; letter-spacing: -.025em; }
.leave-balance__copy strong span { font-size: 14px; color: #c7d3e5; letter-spacing: 0; }
.leave-balance__copy p { margin: 7px 0 0; color: #aebbd0; font-size: 10px; }
.leave-cta { margin-top: 14px; width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--pink); color: white; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.leave-cta .icon { width: 17px; }
.leave-track { height: 5px; margin-top: 15px; background: rgba(255,255,255,.13); border-radius: 99px; overflow: hidden; }
.leave-track i { display: block; height: 100%; background: linear-gradient(90deg, #f0b0c1, var(--pink)); border-radius: inherit; }
.leave-key { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; color: #91a9c7; font-size: 8px; }
.leave-key span { display: flex; align-items: center; gap: 5px; }
.leave-key span i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.leave-key b { color: #dce7f6; }
.next-leave { height: 105px; margin-top: 12px; border-radius: 15px; overflow: hidden; position: relative; border: 1px solid var(--night-line); }
.next-leave > img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.next-leave__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,23,41,.98), rgba(11,7,86,.74) 62%, rgba(11,7,86,.15)); }
.next-leave__copy { position: absolute; left: 15px; top: 17px; display: grid; }
.next-leave__copy small { color: var(--pink-soft); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.next-leave__copy strong { font: 650 17px Jost, sans-serif; margin-top: 3px; }
.next-leave__copy span { color: #b7c5d8; font-size: 9px; margin-top: 2px; }
.next-leave > button { position: absolute; right: 13px; top: 32px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; background: rgba(255,255,255,.08); color: white; display: grid; place-items: center; }
.leave-section-head { margin: 14px 2px 8px; display: flex; align-items: center; justify-content: space-between; }
.leave-section-head h2 { margin: 0; font: 620 14px Jost, sans-serif; }
.leave-section-head button { border: 0; background: transparent; color: #b7c9e2; font-size: 9px; }
.leave-requests { border: 1px solid var(--night-line); border-radius: 14px; overflow: hidden; }
.leave-requests > div { min-height: 66px; padding: 0 11px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--night-line); background: rgba(255,255,255,.035); }
.leave-requests > div:first-child { border-top: 0; }
.request-date { width: 38px; height: 42px; border-radius: 10px; background: rgba(144,174,227,.1); display: grid; place-content: center; text-align: center; color: white; }
.request-date b { font: 650 13px Jost, sans-serif; line-height: 1; }
.request-date small { color: #98afca; font-size: 7px; text-transform: uppercase; }
.leave-requests p { margin: 0; display: grid; }
.leave-requests p strong { font: 620 11px Jost, sans-serif; }
.leave-requests p small { color: var(--night-muted); font-size: 8px; }
.leave-requests .status { padding: 5px 7px; font-size: 7px; }
.leave-policy { margin: 10px 4px 0; color: #7f98b4; font-size: 8px; line-height: 1.35; }

.leave-form { display: grid; gap: 11px; }
.leave-form label { display: grid; gap: 6px; }
.leave-form label > span { color: #a9bed8; font-size: 9px; font-weight: 650; }
.leave-form label > span em { color: #6f89a5; font-style: normal; font-weight: 500; }
.leave-form label > button,
.note-field { min-height: 48px; border: 1px solid var(--night-line); border-radius: 12px; background: rgba(255,255,255,.045); color: white; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.leave-type > button > span { display: grid; gap: 1px; }
.leave-type > button small { color: #91a9c4; font-size: 8px; }
.leave-type > button strong { color: white; font: 620 11px Jost, sans-serif; }
.leave-form button .icon { width: 17px; color: #9db4d2; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segment { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.04); border: 1px solid var(--night-line); border-radius: 12px; padding: 4px; }
.segment button { height: 38px; border: 0; border-radius: 9px; background: transparent; color: #8fa6c0; font-size: 10px; }
.segment button.active { background: #273071; color: white; box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.note-field { color: #cad7e7; font-size: 10px; justify-content: flex-start; }
.leave-impact { margin: 13px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--night-line); }
.leave-impact > div:first-child { min-height: 64px; padding: 0 13px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.045); }
.leave-impact > div:first-child > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(144,174,227,.1); color: #bdd0ff; }
.leave-impact p { margin: 0; display: grid; }
.leave-impact p small { color: #8fa7c2; font-size: 8px; }
.leave-impact p strong { font: 620 12px Jost, sans-serif; }
.leave-impact > div:first-child > em { color: #d2ddeb; font-style: normal; font-size: 9px; }
.coverage-message { min-height: 63px; padding: 10px 13px; display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: center; border-top: 1px solid var(--night-line); }
.coverage-message--warn { background: rgba(222,139,8,.11); color: #ffcd83; }
.coverage-message > .icon { width: 19px; }
.coverage-message p { display: grid; }
.coverage-message strong { font: 620 10px Jost, sans-serif; }
.coverage-message small { color: #cbb791; font-size: 8px; line-height: 1.25; margin-top: 2px; }

/* Dark desktop portal */
body[data-screen="director"], body[data-screen="van"] { background: var(--night); }
.role-shell, .director-shell { background: var(--night); }
.side-rail { background: linear-gradient(180deg, #0d0757 0%, #08043c 100%); border-right: 1px solid rgba(255,255,255,.09); }
.role-main, .director-main { color: var(--night-text); background: radial-gradient(circle at 75% 0%, rgba(37,33,112,.34), transparent 35%), var(--night); }
.role-top, .director-topbar { min-height: 84px; border-bottom: 1px solid var(--night-line); }
.role-top > div:first-child > span, .breadcrumb { color: #7f99b6; }
.role-top h1, .director-topbar h1 { color: white; }
.role-main .search-box, .director-main .search-box { background: rgba(255,255,255,.045); border-color: var(--night-line); color: #9cb3ce; border-radius: 11px; }
.role-main .icon-button, .director-main .icon-button { background: rgba(255,255,255,.045); border-color: var(--night-line); color: white; border-radius: 11px; }
.role-main .panel, .director-main .panel { background: rgba(8,35,59,.82); border: 1px solid var(--night-line); box-shadow: 0 22px 46px rgba(0,0,0,.16); border-radius: 0; }
.role-shell .panel-heading h2, .director-shell .panel-heading h2 { color: white; }
.role-shell .text-action, .director-shell .text-action { color: #c5d8f3; }
.role-metrics { gap: 1px; border: 1px solid var(--night-line); background: var(--night-line); }
.role-metric { min-height: 96px; background: rgba(9,39,65,.92); border: 0; }
.role-metric > span { background: rgba(148,177,226,.1); color: #bacdff; border-radius: 12px; }
.role-metric.attention > span { background: rgba(204,25,72,.16); color: #ff96b2; }
.role-metric small, .role-metric p { color: #8ea6c2; }
.role-metric strong { color: white; }
.issue-row { border-color: var(--night-line); }
.issue-row > span:first-child { background: rgba(148,177,226,.1); color: #b8caff; border-radius: 11px; }
.issue-row strong { color: white; }
.issue-row small { color: #8fa6c1; }
.issue-row > .icon { color: #748da9; }
.role-main .status, .director-main .status { background: rgba(19,135,91,.13); color: #8de3bb; border-color: rgba(69,198,140,.26); }
.role-main .status--warn, .director-main .status--warn { background: rgba(222,139,8,.12); color: #ffd08a; border-color: rgba(222,139,8,.28); }
.role-main .status--danger, .director-main .status--danger { background: rgba(204,25,72,.15); color: #ff9ab5; border-color: rgba(204,25,72,.34); }
.role-main .status--neutral, .director-main .status--neutral { background: rgba(255,255,255,.055); color: #9fb1c7; border-color: var(--night-line); }
.data-panel, .review-grid > .panel, .patrol-builder > .panel, .employee-grid > .panel, .client-grid > .panel { min-height: 0; }
.table-wrap { border-color: var(--night-line); }
.table-wrap table { background: transparent; color: #a9bdd5; }
.table-wrap th { background: #130d63; color: white; }
.table-wrap td { color: #a2b6ce; border-color: var(--night-line); }
.table-wrap td strong { color: white; }
.table-wrap tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.table-wrap .cell-warn { background: rgba(204,25,72,.11) !important; color: #ff9ab5; }
.schedule-note, .eligibility-note, .assurance-note { background: rgba(144,174,227,.08); border-color: var(--night-line); color: #b7c9df; }
.role-footer, .director-footer { color: #627d9a; }
.operations-map { background: #0b2943; overflow: hidden; }
.operations-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.15) brightness(.66) contrast(1.12); }
.operations-map .map-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,35,59,.08), rgba(8,35,59,.5)), rgba(13,7,87,.19); }
.operations-map > div { background: rgba(13,7,87,.92); }
.operations-map > div small { display: block; margin-top: 7px; color: rgba(255,255,255,.46); font-size: 7px; }
.role-main .fleet-banner, .role-main .client-hero { border: 1px solid var(--night-line); }
.employee-profile { background: linear-gradient(180deg, #161168, #08243d); color: white; border: 1px solid var(--night-line); }
.employee-profile p, .employee-profile dt { color: #91a9c6; }
.employee-profile dd { color: white; }
.manager-note textarea, .rule-fields .form-field { background: rgba(255,255,255,.04); border-color: var(--night-line); color: white; }
.manager-note span, .rule-fields .form-field small { color: #8fa7c2; }
.rule-fields .form-field strong { color: white; }
.spoken-result { border-color: var(--night-line); background: rgba(255,255,255,.025); }
.spoken-result strong { color: white; }
.spoken-result small { color: #8fa6c1; }
.stop-list { border-color: var(--night-line); background: rgba(255,255,255,.015); }
.stop-list > div { border-color: var(--night-line); }
.stop-list > div:hover { background: rgba(255,255,255,.025); }
.stop-list strong { color: white; }
.stop-list small { color: #8fa6c1; }
.stop-list > div > span { background: #171069; color: white; }
.stop-list button { color: #738da9; }
.eligibility-note strong { color: white; }
.eligibility-note small { color: #8fa6c1; }
.eligibility-note > span { background: #171069; color: white; }
.support-strip { border: 1px solid var(--night-line); }

/* Manager leave planning */
.leave-desktop-summary { display: grid; grid-template-columns: repeat(3, minmax(155px, .7fr)) 1.4fr; gap: 1px; border: 1px solid var(--night-line); background: var(--night-line); }
.leave-desktop-summary > div { min-height: 98px; padding: 15px 17px; background: rgba(9,39,65,.94); display: grid; align-content: center; }
.leave-desktop-summary small { color: #8ba3be; font-size: 9px; }
.leave-desktop-summary strong { color: white; font: 650 27px Jost, sans-serif; line-height: 1; margin: 3px 0; }
.leave-desktop-summary span { color: #a9bdd2; font-size: 9px; }
.leave-desktop-summary .leave-summary-action { grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center; background: linear-gradient(105deg, rgba(204,25,72,.17), rgba(9,39,65,.94)); }
.leave-summary-action > .icon { width: 23px; color: #ff97b3; }
.leave-summary-action p { margin: 0; display: grid; }
.leave-summary-action p strong { font-size: 13px; margin: 0; }
.leave-summary-action button { border: 0; background: transparent; color: #f7b4c6; display: flex; gap: 7px; align-items: center; font-weight: 700; font-size: 9px; }
.leave-summary-action button .icon { width: 15px; }
.leave-workspace { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(390px, .78fr); gap: 13px; margin-top: 13px; }
.leave-workspace > .panel { height: 690px; padding: 18px; }
.calendar-toolbar { height: 50px; margin-top: 12px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.calendar-toolbar button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--night-line); border-radius: 9px; background: rgba(255,255,255,.035); color: white; }
.calendar-toolbar button:first-child .icon { transform: rotate(180deg); }
.calendar-toolbar strong { font: 620 11px Jost, sans-serif; margin-right: auto; }
.calendar-toolbar span { min-height: 30px; padding: 0 10px; border: 1px solid var(--night-line); border-radius: 9px; display: flex; align-items: center; color: #a6b9d0; font-size: 8px; }
.leave-calendar { margin-top: 12px; border: 1px solid var(--night-line); overflow: hidden; }
.leave-calendar__head, .leave-calendar__row { display: grid; grid-template-columns: 130px repeat(14, minmax(29px, 1fr)); }
.leave-calendar__head { min-height: 44px; background: #130d63; align-items: center; }
.leave-calendar__head > span { padding-left: 10px; color: #c0cee0; font-size: 8px; }
.leave-calendar__head b { padding: 0 2px; color: white; font: 600 7px Jost, sans-serif; text-align: center; }
.leave-calendar__row { min-height: 70px; border-top: 1px solid var(--night-line); align-items: stretch; }
.leave-calendar__row > span { padding-left: 10px; display: grid; align-content: center; border-right: 1px solid var(--night-line); }
.leave-calendar__row > span strong { font: 620 9px Jost, sans-serif; }
.leave-calendar__row > span small { color: #8199b5; font-size: 7px; }
.leave-calendar__row > i { border-right: 1px solid rgba(133,188,229,.08); background: rgba(255,255,255,.012); }
.leave-calendar__row > i.approved { background: rgba(19,135,91,.34); }
.leave-calendar__row > i.pending { background: rgba(144,174,227,.24); }
.leave-calendar__row > i.risk { background: rgba(204,25,72,.43); box-shadow: inset 0 0 0 1px rgba(255,137,169,.45); }
.calendar-legend { margin-top: 11px; display: flex; gap: 20px; color: #91a8c2; font-size: 8px; }
.calendar-legend span { display: flex; gap: 6px; align-items: center; }
.calendar-legend i { width: 10px; height: 10px; border-radius: 3px; }
.calendar-legend i.approved { background: rgba(19,135,91,.65); }
.calendar-legend i.pending { background: rgba(144,174,227,.5); }
.calendar-legend i.risk { background: rgba(204,25,72,.72); }
.leave-person { min-height: 82px; display: grid; grid-template-columns: 36px 1fr auto 18px; gap: 10px; align-items: center; border-top: 1px solid var(--night-line); }
.leave-person:first-of-type { margin-top: 12px; }
.leave-person p { margin: 0; display: grid; }
.leave-person p strong { font: 620 11px Jost, sans-serif; }
.leave-person p small { color: #8ea5c0; font-size: 8px; }
.leave-person p em { color: #c0cee0; font-style: normal; font-size: 8px; margin-top: 3px; }
.leave-person .status { max-width: 118px; white-space: normal; line-height: 1.2; font-size: 7px; }
.leave-person > button { border: 0; background: transparent; color: #8299b4; }
.leave-person > button .icon { width: 15px; }
.decision-preview { margin-top: 12px; padding: 14px; border: 1px solid rgba(204,25,72,.25); background: rgba(204,25,72,.08); }
.decision-preview > div:first-child { display: grid; }
.decision-preview small { color: #e8a5b7; font-size: 8px; }
.decision-preview strong { font: 620 12px Jost, sans-serif; }
.decision-preview p { margin: 11px 0; padding-top: 11px; border-top: 1px solid rgba(204,25,72,.2); display: flex; gap: 8px; color: #c5b6c6; font-size: 9px; line-height: 1.35; }
.decision-preview p .icon { width: 17px; color: #ff93b0; flex: none; }
.decision-preview > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
.coverage-context { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--night-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--night-line); }
.coverage-context > div { min-height: 58px; padding: 9px 10px; background: #092741; display: grid; align-content: center; }
.coverage-context span { color: #839bb6; font-size: 7px; }
.coverage-context strong { font: 650 17px Jost, sans-serif; }
.coverage-context strong.risk { color: #ff91af; }
.coverage-context > button { grid-column: 1 / -1; min-height: 38px; border: 0; background: rgba(255,255,255,.05); color: white; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; font-weight: 700; }
.coverage-context > button .icon { width: 15px; }
.button--ghost-light { background: rgba(255,255,255,.04); border: 1px solid var(--night-line); color: white; }

/* Director command centre keeps photography as the dominant surface */
.director-hero { border: 1px solid var(--night-line); }
.metric-grid { gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); }
.metric { background: rgba(9,39,65,.92); border: 0; }
.metric__icon { background: rgba(148,177,226,.1); color: #b9cbff; border-radius: 11px; }
.metric small, .metric p { color: #8ea6c1; }
.metric strong { color: white; }
.trend { background: rgba(19,135,91,.12); color: #82dfb4; }
.trend--warn { background: rgba(222,139,8,.12); color: #ffd08b; }
.attention-item { border-color: var(--night-line); }
.attention-item--urgent { background: rgba(204,25,72,.11); }
.attention-icon { background: rgba(148,177,226,.1); color: #b9cbff; border-radius: 11px; }
.attention-item--urgent .attention-icon { background: rgba(204,25,72,.18); color: #ff99b4; }
.attention-item strong { color: white; }
.attention-item p { color: #91a8c3; }
.client-score { border-color: var(--night-line); }
.client-score > div { border-color: var(--night-line); }
.client-score strong { color: white; }
.client-score span { color: #89a0bb; }

/* Keep the director command centre composed at narrower desktop widths and browser zoom levels. */
@media (max-width: 1199px) {
  body[data-screen="director"] { min-width: 0; overflow-x: hidden; }
  .director-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .director-main { padding: 0 20px 20px; }
  .director-topbar { min-height: 88px; gap: 16px; }
  .director-topbar h1 { font-size: 25px; }
  .director-actions { gap: 8px; }
  .director-actions .search-box { width: 160px; }
  .director-actions .button { padding-inline: 14px; }
  .director-hero { height: 244px; }
  .director-hero__copy { left: 26px; top: 27px; max-width: 430px; }
  .director-hero h2 { font-size: 27px; }
  .director-hero p { max-width: 42ch; }
  .coverage-ring { right: 24px; top: 44px; gap: 12px; }
  .coverage-ring > div { width: 106px; height: 106px; border-width: 9px; }
  .coverage-ring strong { font-size: 25px; }
  .coverage-ring > small { font-size: 9px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
  .metric { min-height: 88px; }
  .director-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .director-grid > .panel { min-height: 0; }
  .director-footer { min-height: 48px; }
  .director-shell .rail-link { min-height: 41px; padding-inline: 9px; font-size: 11px; }
}

@media (max-width: 899px) {
  .director-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .director-shell > .side-rail { padding: 16px 10px; }
  .director-shell > .side-rail > .brand-logo { width: 58px; height: 46px; margin: 0 auto 14px; object-fit: contain; object-position: left center; }
  .director-shell .rail-context { display: none; }
  .director-shell .side-rail nav { gap: 5px; }
  .director-shell .rail-link { position: relative; min-height: 44px; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .director-shell .rail-link > span { display: none; }
  .director-shell .rail-link b { position: absolute; right: 5px; top: 4px; width: 17px; height: 17px; font-size: 8px; }
  .director-shell .rail-support { grid-template-columns: 1fr; padding: 10px; place-items: center; }
  .director-shell .rail-support > span { grid-row: auto; }
  .director-shell .rail-support strong,
  .director-shell .rail-support small { display: none; }
  .director-shell .rail-profile { grid-template-columns: 1fr; place-items: center; padding-top: 12px; }
  .director-shell .rail-profile div,
  .director-shell .rail-profile > .icon { display: none; }
  .director-main { padding-inline: 16px; }
  .director-topbar h1 { font-size: 22px; }
  .director-actions .search-box { display: none; }
  .director-actions .button { width: 44px; padding: 0; font-size: 0; }
  .director-actions .button .icon { width: 19px; height: 19px; }
  .director-hero__copy { max-width: 58%; }
  .director-hero h2 { font-size: 24px; }
  .coverage-ring > small { display: none; }
  .service-card { height: 155px; }
}

@media (max-width: 719px) {
  .director-topbar { min-height: 80px; }
  .director-topbar .breadcrumb { display: none; }
  .director-topbar h1 { font-size: 20px; }
  .director-hero { height: 268px; }
  .director-hero__copy { right: 24px; max-width: none; }
  .director-hero h2 { font-size: 23px; }
  .coverage-ring { display: none; }
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .service-cards { grid-template-columns: minmax(0, 1fr); }
  .director-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; }
}

/* Director decision workspace */
.director-main {
  padding: 0 32px 18px;
  overflow: hidden;
}
.director-overview {
  min-height: 238px;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, .62fr);
  border: 1px solid var(--night-line);
  background: rgba(8,35,59,.9);
}
.director-brief {
  min-width: 0;
  min-height: 238px;
  overflow: hidden;
  position: relative;
  color: white;
}
.director-brief > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 47% 43%;
}
.director-brief__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,7,87,.97) 0%, rgba(13,7,87,.88) 43%, rgba(13,7,87,.36) 78%, rgba(13,7,87,.12) 100%);
}
.director-brief__copy {
  width: min(620px, 72%);
  position: relative;
  z-index: 1;
  padding: 29px 34px 26px;
}
.director-live {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d8e4f2;
  font-size: 11px;
  font-weight: 650;
}
.director-live > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52dda0;
  box-shadow: 0 0 0 5px rgba(82,221,160,.13);
}
.director-live time {
  margin-left: 3px;
  color: #91a9c4;
  font-variant-numeric: tabular-nums;
}
.director-brief h2 {
  max-width: 520px;
  margin: 18px 0 7px;
  font: 620 36px/1 Jost, sans-serif;
  letter-spacing: -.025em;
}
.director-brief p {
  max-width: 59ch;
  margin: 0 0 20px;
  color: #c0cfe2;
  font-size: 12px;
  line-height: 1.45;
}
.director-brief .button {
  min-height: 40px;
  padding-inline: 15px;
  font-size: 11px;
}
.director-coverage {
  min-width: 0;
  padding: 26px 26px 22px;
  border-left: 1px solid var(--night-line);
  color: white;
  background: linear-gradient(145deg, rgba(34,28,103,.54), rgba(8,35,59,.92));
}
.director-coverage__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.director-coverage__heading span {
  max-width: 11ch;
  color: #a9bdd4;
  font-size: 12px;
  line-height: 1.25;
}
.director-coverage__heading strong {
  font: 650 39px/.9 Jost, sans-serif;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.director-coverage__bar {
  height: 5px;
  margin: 19px 0 11px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}
.director-coverage__bar span {
  width: 97%;
  height: 100%;
  display: block;
  background: var(--pink);
}
.director-coverage > p {
  margin: 0;
  color: #9fb3ca;
  font-size: 11px;
}
.director-coverage > p strong { color: white; }
.director-coverage dl {
  margin: 23px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.director-coverage dl > div {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--night-line);
}
.director-coverage dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.director-coverage dt {
  color: #7f98b5;
  font-size: 9px;
}
.director-coverage dd {
  margin: 3px 0 0;
  color: white;
  font: 620 13px Jost, sans-serif;
  font-variant-numeric: tabular-nums;
}
.director-signals {
  min-height: 96px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--night-line);
  background: var(--night-line);
  gap: 1px;
}
.director-signals article {
  min-width: 0;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: rgba(9,39,65,.96);
}
.director-signal__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #c0ceff;
  background: rgba(148,177,226,.1);
}
.director-signal__icon .icon { width: 19px; }
.director-signals article > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 9px;
}
.director-signals small {
  grid-column: 1 / -1;
  color: #8ea6c2;
  font-size: 10px;
}
.director-signals strong {
  color: white;
  font: 630 24px/1.1 Jost, sans-serif;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.director-signals p {
  min-width: 0;
  margin: 0;
  color: #8fa8c3;
  font-size: 9px;
  white-space: nowrap;
}
.director-signals p b { color: #79dbad; }
.director-signals .signal-warning { color: #ffd08a; }
.director-workspace {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 14px;
}
.director-panel {
  min-width: 0;
  min-height: 308px;
  padding: 20px;
  border: 1px solid var(--night-line);
  color: white;
  background: rgba(8,35,59,.84);
  box-shadow: 0 22px 46px rgba(0,0,0,.16);
}
.director-panel > header {
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}
.director-panel h2 {
  margin: 0;
  font: 620 20px/1.1 Jost, sans-serif;
  letter-spacing: -.01em;
}
.director-panel header p {
  margin: 4px 0 0;
  color: #829bb8;
  font-size: 10px;
  line-height: 1.35;
}
.director-panel .text-action {
  padding: 2px 0 0;
  color: #c5d8f3;
  font-size: 9px;
}
.director-alert {
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--night-line);
}
.director-alert:first-of-type { margin-top: 5px; }
.director-alert--critical {
  margin-inline: -20px;
  padding-inline: 20px;
  background: rgba(204,25,72,.1);
}
.director-alert time {
  color: #839cb8;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.director-alert__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #bdceff;
  background: rgba(148,177,226,.1);
}
.director-alert--critical .director-alert__icon {
  color: #ff9ab5;
  background: rgba(204,25,72,.18);
}
.director-alert__icon .icon { width: 17px; }
.director-alert strong {
  display: block;
  font: 620 11px/1.2 Jost, sans-serif;
}
.director-alert p {
  margin: 4px 0 0;
  color: #8ea6c2;
  font-size: 9px;
  line-height: 1.3;
}
.director-alert__state {
  min-width: 54px;
  padding: 5px 8px;
  border: 1px solid rgba(204,25,72,.34);
  color: #ff9ab5;
  background: rgba(204,25,72,.15);
  text-align: center;
  font-size: 8px;
  font-weight: 750;
}
.director-alert__state--open {
  border-color: rgba(222,139,8,.28);
  color: #ffd08a;
  background: rgba(222,139,8,.12);
}
.director-alert__state--planned {
  border-color: var(--night-line);
  color: #a7bad0;
  background: rgba(255,255,255,.055);
}
.director-alert > button {
  padding: 0;
  border: 0;
  color: #6f89a7;
  background: transparent;
}
.director-alert > button .icon { width: 16px; }
.director-sites {
  height: 154px;
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.director-sites figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.director-sites img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.director-sites figure > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,7,87,.08) 12%, rgba(13,7,87,.93) 100%);
}
.director-sites figcaption {
  position: absolute;
  inset: auto 13px 12px;
  display: grid;
}
.director-sites small {
  color: #f0b0c1;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.director-sites strong {
  margin-top: 2px;
  font: 620 13px Jost, sans-serif;
}
.director-sites em {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d4e0ef;
  font-size: 9px;
  font-style: normal;
}
.director-sites em i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fd69a;
}
.director-confidence {
  min-height: 58px;
  margin: 11px 0 0;
  padding-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--night-line);
}
.director-confidence > div {
  min-width: 0;
  padding-inline: 12px;
  display: grid;
  align-content: center;
  border-left: 1px solid var(--night-line);
}
.director-confidence > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.director-confidence dt {
  color: #839bb7;
  font-size: 8px;
}
.director-confidence dd {
  margin: 2px 0 0;
  font: 630 17px Jost, sans-serif;
  font-variant-numeric: tabular-nums;
}
.director-footer {
  min-height: 42px;
  font-size: 8px;
}

@media (max-width: 1199px) {
  .director-main { padding: 0 20px 18px; }
  .director-overview { grid-template-columns: minmax(0, 1.42fr) minmax(270px, .72fr); }
  .director-brief__copy { width: min(540px, 72%); padding-inline: 26px; }
  .director-brief h2 { font-size: 31px; }
  .director-coverage { padding-inline: 20px; }
  .director-signals article { padding-inline: 13px; }
  .director-signals p { white-space: normal; }
  .director-workspace { grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); }
}

@media (max-width: 1099px) {
  .director-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .director-shell > .side-rail { padding: 16px 10px; }
  .director-shell > .side-rail > .brand-logo { width: 58px; height: 46px; margin: 0 auto 14px; object-fit: contain; }
  .director-shell .rail-context { display: none; }
  .director-shell .rail-link { position: relative; min-height: 44px; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .director-shell .rail-link > span { display: none; }
  .director-shell .rail-link b { position: absolute; right: 5px; top: 4px; }
  .director-shell .rail-support { grid-template-columns: 1fr; place-items: center; padding: 10px; }
  .director-shell .rail-support > span { grid-row: auto; }
  .director-shell .rail-support strong,
  .director-shell .rail-support small,
  .director-shell .rail-profile div,
  .director-shell .rail-profile > .icon { display: none; }
  .director-shell .rail-profile { grid-template-columns: 1fr; place-items: center; }
  .director-overview { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .66fr); }
  .director-workspace { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .director-alert { grid-template-columns: 36px 34px minmax(0, 1fr) auto 16px; gap: 9px; }
  .director-alert time { font-size: 8px; }
}

@media (max-width: 899px) {
  .director-main { overflow: visible; }
  .director-overview { grid-template-columns: minmax(0, 1fr); }
  .director-brief { min-height: 224px; }
  .director-coverage {
    min-height: 190px;
    border-top: 1px solid var(--night-line);
    border-left: 0;
  }
  .director-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .director-workspace { grid-template-columns: minmax(0, 1fr); }
  .director-panel { min-height: 0; }
}

@media (max-width: 639px) {
  .director-main { padding-inline: 13px; }
  .director-topbar { min-height: 76px; }
  .director-topbar h1 { font-size: 18px; }
  .director-brief__copy { width: 100%; padding: 23px 20px; }
  .director-brief h2 { font-size: 28px; }
  .director-signals { grid-template-columns: minmax(0, 1fr); }
  .director-panel { padding: 16px; }
  .director-alert { grid-template-columns: 32px 32px minmax(0, 1fr) 16px; }
  .director-alert--critical { margin-inline: -16px; padding-inline: 16px; }
  .director-alert__state { display: none; }
  .director-sites { height: auto; grid-template-columns: minmax(0, 1fr); }
  .director-sites figure { height: 148px; }
}

/* CCTV vehicle console */
.van-console { background: var(--night); color: white; }
.van-console .desktop-top { border-bottom: 1px solid var(--night-line); }
.van-console .van-hero { height: 260px; }
.van-console .van-hero__copy { top: 29px; }
.van-console .van-hero h1 { font-size: 39px; }
.van-console .hero-actions { bottom: 24px; }
.van-console .console-body { background: radial-gradient(circle at 75% 0%, rgba(37,33,112,.28), transparent 37%), var(--night); }
.van-console .console-body { padding: 16px 34px; }
.van-console .telemetry-grid { gap: 1px; border: 1px solid var(--night-line); background: var(--night-line); }
.van-console .telemetry { background: rgba(9,39,65,.93); border: 0; }
.van-console .telemetry { min-height: 98px; padding: 13px 17px; }
.van-console .telemetry__icon { background: rgba(145,174,227,.1); color: #bdceff; border-radius: 11px; }
.van-console .telemetry small, .van-console .telemetry em { color: #8fa7c1; }
.van-console .telemetry strong { color: white; }
.van-console .gauge { background: rgba(255,255,255,.09); }
.van-console .panel { background: rgba(8,35,59,.86); border: 1px solid var(--night-line); box-shadow: 0 22px 46px rgba(0,0,0,.16); }
.van-console .console-columns { margin-top: 12px; }
.van-console .console-columns .panel { min-height: 280px; padding: 18px 22px; }
.van-console .panel-heading h2, .van-console .route-row strong { color: white; }
.van-console .route-row { min-height: 62px; border-color: var(--night-line); }
.van-console .route-row:first-of-type { margin-top: 10px; }
.van-console .route-row p, .van-console .route-time { color: #91a8c2; }
.van-console .text-action { color: #f2adc0; }
.van-console .camera-preview { height: 110px; margin-top: 10px; }
.van-console .health-list > div { border-color: var(--night-line); }
.van-console .health-list > div { min-height: 36px; }
.van-console .health-list > div > span:first-child { color: #c5d4e6; }
.van-console .health-list .icon { color: #b7c9ff; }
.van-console .health-list .status { background: rgba(19,135,91,.13); color: #8de3bb; border-color: rgba(69,198,140,.26); }
.van-console .console-footer { min-height: 38px; background: #051a2c; border-color: var(--night-line); color: #718aa6; }

/* V6 staff role architecture */
.schedule-lead { min-height: 104px; padding: 15px; border: 1px solid var(--night-line); border-radius: 15px; background: linear-gradient(125deg, #17106b, #0a304b); display: flex; align-items: center; justify-content: space-between; }
.schedule-lead > div small, .schedule-lead > span small { display: block; color: #91a9c5; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.schedule-lead h2 { margin: 4px 0 1px; font: 650 19px Jost,sans-serif; }
.schedule-lead p { margin: 0; color: #bdcbe0; font-size: 9px; }
.schedule-lead > span { min-width: 92px; padding-left: 15px; border-left: 1px solid var(--night-line); display: grid; justify-items: end; color: #cad7ff; }
.schedule-lead > span .icon { width: 17px; margin-bottom: 5px; }
.schedule-lead > span strong { font: 650 17px Jost,sans-serif; color: white; }
.mobile-segment { margin: 12px 0 8px; padding: 3px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--night-line); border-radius: 11px; background: rgba(255,255,255,.025); }
.mobile-segment button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: #8098b5; font-size: 8px; font-weight: 700; }
.mobile-segment button.active { background: #282273; color: white; }
.shift-list { border: 1px solid var(--night-line); border-radius: 14px; overflow: hidden; }
.shift-list article { min-height: 86px; padding: 9px 10px; display: grid; grid-template-columns: 39px 1fr auto 15px; gap: 9px; align-items: center; border-top: 1px solid var(--night-line); background: rgba(255,255,255,.025); }
.shift-list article:first-child { border-top: 0; }
.shift-list time { height: 51px; border-radius: 9px; display: grid; place-content: center; text-align: center; background: rgba(144,174,227,.11); }
.shift-list time b { color: #9bb2cf; font-size: 7px; }
.shift-list time strong { font: 650 17px Jost,sans-serif; }
.shift-list article > div { display: grid; }
.shift-list article > div strong { font: 620 10px Jost,sans-serif; }
.shift-list article > div span { color: #c0cde0; font-size: 8px; }
.shift-list article > div small { margin-top: 4px; color: #7892ae; font-size: 7px; display: flex; gap: 4px; align-items: center; }
.shift-list article > div small .icon, .shift-list article > .icon { width: 12px; }
.shift-list .status { font-size: 7px; padding: 4px 6px; }
.schedule-note-card { margin-top: 10px; min-height: 53px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; border-left: 3px solid var(--success); background: rgba(19,135,91,.08); }
.schedule-note-card > .icon { color: #7ed8ae; width: 21px; }
.schedule-note-card strong { display: block; font: 620 9px Jost,sans-serif; }
.schedule-note-card p { margin: 2px 0 0; color: #8fa8c2; font-size: 7px; }

.assignment-hero { height: 143px; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--night-line); }
.assignment-hero img { width: 100%; height: 100%; object-fit: cover; }
.assignment-hero > div { position:absolute; inset:0; background: linear-gradient(180deg,rgba(4,23,41,.08),rgba(4,23,41,.93)); }
.assignment-hero > span,.assignment-hero h2,.assignment-hero p { position:absolute; left:15px; z-index:1; }
.assignment-hero > span { bottom:58px; color:#f1afc0; font-size:7px; text-transform:uppercase; letter-spacing:.09em; }
.assignment-hero h2 { bottom:29px; margin:0; font:650 20px Jost,sans-serif; }
.assignment-hero p { bottom:11px; margin:0; color:#c1cee0; font-size:8px; display:flex; gap:5px; align-items:center; }
.assignment-hero p .icon { width:12px; }
.assignment-facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:10px; border:1px solid var(--night-line); border-radius:13px; overflow:hidden; }
.assignment-facts div { min-height:57px; padding:10px; display:grid; border-left:1px solid var(--night-line); background:rgba(255,255,255,.03); }
.assignment-facts div:first-child { border-left:0; }
.assignment-facts small { color:#7f98b4; font-size:7px; }
.assignment-facts strong { font:620 10px Jost,sans-serif; }
.readiness-block { margin-top:12px; }
.section-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.section-row h2 { margin:0; font:620 13px Jost,sans-serif; }
.section-row button { border:0; background:transparent; color:#a7bad1; font-size:8px; }
.readiness-block .status { font-size:7px; padding:4px 6px; }
.readiness-block .check-list > div { min-height:56px; }
.assignment-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.assignment-actions button { height:41px; border:1px solid var(--night-line); border-radius:11px; background:rgba(255,255,255,.035); color:white; font-size:8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.assignment-actions .icon { width:15px; color:#bdceff; }

.operations-now { padding:16px; border:1px solid var(--night-line); border-radius:16px; background:linear-gradient(135deg,#17106b,#092c47); }
.operations-now > div { display:flex; gap:8px; align-items:center; }
.operations-now > div small { color:#b3c3d8; font-size:8px; }
.operations-now h2 { margin:13px 0 2px; color:#f0b0c1; font:620 10px Jost,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.operations-now > strong { font:650 21px Jost,sans-serif; }
.operations-now > p { margin:2px 0 12px; color:#a7bad1; font-size:9px; }
.operations-now .primary-wide { min-height:43px; margin:0; }
.activity-strip { display:grid; grid-template-columns:repeat(3,1fr); margin:10px 0; border:1px solid var(--night-line); border-radius:13px; overflow:hidden; }
.activity-strip div { min-height:59px; display:grid; place-content:center; text-align:center; border-left:1px solid var(--night-line); background:rgba(255,255,255,.028); }
.activity-strip div:first-child { border-left:0; }
.activity-strip strong { font:650 16px Jost,sans-serif; }
.activity-strip small { color:#7f98b4; font-size:7px; }
.activity-timeline { padding:12px 13px; border:1px solid var(--night-line); border-radius:14px; }
.activity-timeline h2 { margin:0 0 4px; font:620 12px Jost,sans-serif; }
.activity-timeline article { min-height:59px; display:grid; grid-template-columns:38px 10px 1fr; gap:8px; align-items:center; border-top:1px solid var(--night-line); }
.activity-timeline time { color:#819ab7; font-size:8px; }
.activity-timeline article > span { width:8px; height:8px; background:#8aa0ba; border-radius:50%; box-shadow:0 0 0 4px rgba(144,174,227,.08); }
.activity-timeline article > span.good { background:#48ce92; }
.activity-timeline article div { display:grid; }
.activity-timeline article strong { font:620 9px Jost,sans-serif; }
.activity-timeline article small { color:#839cb7; font-size:7px; }
.sync-line { margin:9px 0 0; display:flex; justify-content:center; gap:6px; align-items:center; color:#7f98b4; font-size:7px; }
.sync-line .icon { width:13px; }

.profile-summary { min-height:87px; padding:12px; display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:center; background:linear-gradient(125deg,#17106b,#0b304a); border:1px solid var(--night-line); border-radius:15px; }
.profile-image { width:58px; height:58px; border-radius:14px; background:url('assets/verification-guard.png') center 24%/cover; }
.profile-summary h2 { margin:0; font:650 17px Jost,sans-serif; }
.profile-summary p { margin:1px 0 6px; color:#9db1ca; font-size:8px; }
.profile-summary .status { font-size:7px; padding:4px 6px; }
.service-group { margin-top:12px; }
.service-group h2 { margin:0 0 6px 2px; color:#8ba3bf; font:600 9px Jost,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.service-group > button { width:100%; min-height:57px; padding:0 11px; border:1px solid var(--night-line); border-top:0; background:rgba(255,255,255,.03); color:white; display:grid; grid-template-columns:34px 1fr auto 14px; gap:9px; align-items:center; text-align:left; }
.service-group > button:first-of-type { border-top:1px solid var(--night-line); border-radius:13px 13px 0 0; }
.service-group > button:last-of-type { border-radius:0 0 13px 13px; }
.service-group > button > span { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(144,174,227,.1); color:#bed0ff; }
.service-group > button > span .icon { width:17px; }
.service-group p { margin:0; display:grid; }
.service-group strong { font:620 9px Jost,sans-serif; }
.service-group small { color:#8199b5; font-size:7px; }
.service-group button > b { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; background:var(--pink); font-size:7px; }
.service-group button > .icon { width:13px; color:#7892af; }
.link-console { width:100%; height:44px; margin-top:11px; border:1px solid rgba(204,25,72,.31); border-radius:12px; background:rgba(204,25,72,.1); color:#f3b2c4; display:flex; align-items:center; justify-content:center; gap:8px; font-size:8px; font-weight:700; }
.link-console .icon { width:15px; }

.hours-summary { padding:16px; min-height:94px; border-radius:15px; border:1px solid var(--night-line); background:linear-gradient(125deg,#17106b,#0a304b); display:flex; align-items:center; justify-content:space-between; }
.hours-summary small { color:#a3b6cd; font-size:8px; }
.hours-summary strong { display:block; font:650 26px Jost,sans-serif; }
.hours-summary p { margin:2px 0 0; color:#8fa6c1; font-size:8px; }
.hours-summary > span { color:#ffd08b; font:650 13px Jost,sans-serif; }
.hours-key { margin:10px 0 7px; display:flex; gap:15px; color:#8098b3; font-size:7px; }
.hours-key span { display:flex; gap:5px; align-items:center; }
.hours-key b { width:7px; height:7px; background:#778dad; }
.hours-key span:first-child b { background:#cc1948; }.hours-key span:nth-child(2) b { background:#8da7c7; }.hours-key span:last-child b { background:#343077; }
.hours-chart { height:91px; padding:8px 12px 0; display:flex; align-items:flex-end; gap:15px; border:1px solid var(--night-line); border-radius:13px; background:repeating-linear-gradient(180deg,transparent 0 29px,rgba(133,188,229,.1) 30px); }
.hours-chart i { flex:1; min-height:12px; background:linear-gradient(180deg,#ec4b77,#8e1852); border-radius:3px 3px 0 0; }
.timesheet-list { margin-top:12px; }
.timesheet-list article { min-height:71px; padding:9px 8px; display:grid; grid-template-columns:1fr auto 14px; gap:9px; align-items:center; border-top:1px solid var(--night-line); }
.timesheet-list article > div { display:grid; }
.timesheet-list article > div strong { font:620 9px Jost,sans-serif; }
.timesheet-list article > div small,.timesheet-list article > div span { color:#829ab5; font-size:7px; }
.timesheet-list article > p { margin:0; display:grid; justify-items:end; gap:4px; }
.timesheet-list article > p strong { font:650 10px Jost,sans-serif; }
.timesheet-list .status { font-size:7px; padding:4px 6px; }
.timesheet-list article > .icon { width:13px; color:#7690ad; }

/* V6 manager workspaces */
.workforce-lead { min-height:118px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--night-line); background:linear-gradient(105deg,rgba(22,16,105,.88),rgba(8,35,59,.92)); }
.workforce-lead h2 { margin:2px 0 4px; max-width:720px; font:650 25px Jost,sans-serif; }
.workforce-lead p { margin:0; color:#93abc5; font-size:10px; }
.workforce-gauge { min-width:180px; padding-left:22px; border-left:1px solid var(--night-line); display:grid; }
.workforce-gauge strong { font:650 31px Jost,sans-serif; }
.workforce-gauge span { color:#91a8c2; font-size:9px; }
.workforce-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr); gap:13px; margin-top:13px; }
.workforce-grid > .panel { height:495px; padding:18px; }
.table-filters { min-height:53px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--night-line); }
.table-filters button,.report-filters button,.report-toolbar button { height:30px; padding:0 10px; border:1px solid var(--night-line); background:rgba(255,255,255,.025); color:#9eb2ca; font-size:8px; display:flex; align-items:center; gap:6px; }
.table-filters button.active { background:#241e70; color:white; border-color:#4b4a99; }
.table-filters span,.report-filters span,.report-toolbar span { flex:1; }
.workforce-table table,.incident-workspace table,.sites-table table,.reports-table table,.client-report-table table { width:100%; border-collapse:collapse; }
.workforce-table th,.workforce-table td,.incident-workspace th,.incident-workspace td,.sites-table th,.sites-table td,.reports-table th,.reports-table td { height:58px; padding:0 10px; border-bottom:1px solid var(--night-line); text-align:left; color:#98aec7; font-size:8px; }
.workforce-table th,.incident-workspace th,.sites-table th,.reports-table th { height:39px; color:#708ba7; font-size:7px; text-transform:uppercase; letter-spacing:.07em; }
.workforce-table td strong,.incident-workspace td strong,.sites-table td strong,.reports-table td strong { color:white; }
.workforce-table td > .icon,.incident-workspace td > .icon,.sites-table td > .icon { width:14px; }
.table-person { display:flex; gap:9px; align-items:center; }
.table-person > b { width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#271f72;color:white;font-size:8px; }
.table-person > span { display:grid; }
.table-person small,.incident-workspace td small,.sites-table td small { display:block;color:#718ba7;font-size:7px; }
.workforce-table .status,.incident-workspace .status,.sites-table .status,.reports-table .status { font-size:7px;padding:4px 6px; }
.coverage-stack { margin-top:12px; }
.coverage-stack > div { min-height:82px; padding:13px; border-top:1px solid var(--night-line); display:grid; grid-template-columns:1fr auto; align-items:center; }
.coverage-stack > div span { font:620 10px Jost,sans-serif; }
.coverage-stack > div strong { font:650 19px Jost,sans-serif; }
.coverage-stack > div small { color:#7d96b2;font-size:8px;grid-column:1/-1; }
.coverage-stack > div.warn { background:rgba(204,25,72,.08); }
.coverage-stack > div.warn strong { color:#ff9ab5; }
.workforce-side .button { width:100%;margin-top:18px; }

.incident-lead { min-height:82px; padding:12px 16px; display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(204,25,72,.17),rgba(9,39,65,.9));border-left:3px solid var(--pink); }
.incident-lead > div { display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center; }
.incident-lead > div > span { width:42px;height:42px;display:grid;place-items:center;background:rgba(204,25,72,.18);color:#ff9bb6; }
.incident-lead p { margin:0;display:grid; }.incident-lead p small { color:#f1afc0;font-size:8px; }.incident-lead p strong { font:630 15px Jost,sans-serif; }.incident-lead p em { color:#91a8c2;font-size:8px;font-style:normal; }
.incident-lead > button { border:0;background:transparent;color:#f2b0c2;display:flex;gap:8px;align-items:center;font-size:9px;font-weight:700; }
.incident-workspace { height:538px;margin-top:13px;padding:18px; }
.severity { display:inline-flex;padding:4px 7px;border-left:3px solid #7d8ca0;background:rgba(255,255,255,.04);color:#a8bbd0;font-size:7px;font-weight:700; }
.severity--danger { border-color:#e43d68;color:#ff9db7;background:rgba(204,25,72,.1); }.severity--warn { border-color:#df910f;color:#ffd18a;background:rgba(222,139,8,.08); }.severity--good { border-color:#36bd80;color:#8ce2b9;background:rgba(19,135,91,.08); }
.incident-explainer { min-height:73px;margin-top:15px;padding:12px 14px;display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;background:rgba(144,174,227,.07);border:1px solid var(--night-line); }
.incident-explainer > span { width:38px;height:38px;display:grid;place-items:center;background:#171069;color:#bdceff; }.incident-explainer p { margin:0;display:grid; }.incident-explainer strong { font:620 10px Jost,sans-serif; }.incident-explainer small { color:#8199b5;font-size:8px; }.incident-explainer button { border:0;background:transparent;color:#f0afc1;display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700; }

.comms-shell { height:837px;display:grid;grid-template-columns:280px minmax(0,1fr) 285px;gap:1px;background:var(--night-line);border:1px solid var(--night-line); }
.comms-shell > .panel { height:100%;padding:0;border:0!important;box-shadow:none!important; }
.comms-list { padding:16px!important; }.comms-search { height:39px;padding:0 11px;display:flex;gap:8px;align-items:center;border:1px solid var(--night-line);color:#89a1bc;font-size:8px; }.comms-search .icon { width:15px; }
.comms-list h2 { margin:18px 4px 7px;color:#7891ad;font:600 8px Jost,sans-serif;text-transform:uppercase;letter-spacing:.1em; }
.comms-list > button { width:100%;min-height:61px;padding:8px;border:0;border-top:1px solid var(--night-line);background:transparent;color:white;display:grid;grid-template-columns:35px 1fr auto;gap:9px;align-items:center;text-align:left;position:relative; }
.comms-list > button:first-of-type { background:rgba(204,25,72,.1);border-left:2px solid var(--pink); }
.comms-list > button > span { width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:#241e70;font:700 8px Jost,sans-serif; }.comms-list p { margin:0;display:grid; }.comms-list strong { font:620 9px Jost,sans-serif; }.comms-list small,.comms-list em { color:#788faa;font-size:7px;font-style:normal; }.comms-list b { position:absolute;right:8px;bottom:8px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--pink);font-size:7px; }
.conversation header { height:72px;padding:0 19px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--night-line); }.conversation header > div { display:flex;gap:10px;align-items:center;margin-right:auto; }.channel-mark { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#251e71;font:700 9px Jost,sans-serif; }.conversation header p { margin:0;display:grid; }.conversation header strong { font:620 12px Jost,sans-serif; }.conversation header small { color:#8199b5;font-size:8px; }.conversation header button { height:32px;border:1px solid var(--night-line);background:rgba(255,255,255,.03);color:#9fb4cc;font-size:8px;display:flex;gap:6px;align-items:center; }.conversation header button .icon { width:15px; }
.pinned-message { min-height:65px;margin:12px 18px 0;padding:10px 12px;display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;background:rgba(144,174,227,.07);border-left:3px solid #6b74d4; }.pinned-message > .icon { width:19px;color:#bdceff; }.pinned-message p { margin:0;display:grid; }.pinned-message strong { font:620 9px Jost,sans-serif; }.pinned-message small { color:#829bb6;font-size:7px; }.pinned-message button { border:0;background:transparent;color:#f1afc1;font-size:8px;font-weight:700; }
.message-thread { height:620px;padding:14px 19px;overflow:hidden; }.message-thread article { display:grid;grid-template-columns:35px 1fr;gap:10px;margin-bottom:18px; }.message-thread article > div > p:first-child { margin:0 0 6px;display:flex;align-items:center;gap:8px; }.message-thread article > div > p:first-child strong { font:620 9px Jost,sans-serif; }.message-thread time { color:#748eaa;font-size:7px; }.message-thread article > div > p:nth-child(2) { margin:0;max-width:620px;color:#afc0d4;font-size:9px;line-height:1.45; }.message-thread figure { width:250px;margin:10px 0 0;border:1px solid var(--night-line); }.message-thread figure img { width:100%;height:110px;object-fit:cover; }.message-thread figcaption { padding:6px 8px;color:#8098b3;font-size:7px; }.acknowledged { display:inline-flex;margin-top:9px;gap:5px;align-items:center;color:#77d6aa;font-size:7px; }.acknowledged .icon { width:12px; }
.conversation > footer { height:67px;padding:0 16px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--night-line); }.conversation > footer > span { flex:1;height:39px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid var(--night-line);color:#718ba7;font-size:8px; }.conversation > footer .icon { width:15px; }.conversation > footer button { height:39px;padding:0 15px;border:0;background:var(--pink);color:white;display:flex;align-items:center;gap:8px;font-size:8px;font-weight:700; }
.channel-context { padding:18px!important; }.channel-context dl { margin:18px 0; }.channel-context dt { margin-top:15px;color:#718ba7;font-size:7px;text-transform:uppercase;letter-spacing:.08em; }.channel-context dd { margin:4px 0 0;color:#b1c1d4;font-size:9px;line-height:1.45; }.urgent-route { margin-top:24px;padding:13px;display:grid;grid-template-columns:27px 1fr;gap:8px;background:rgba(204,25,72,.1);border:1px solid rgba(204,25,72,.25); }.urgent-route > .icon { color:#ff99b4; }.urgent-route p { margin:0;display:grid; }.urgent-route strong { font:620 9px Jost,sans-serif; }.urgent-route small { color:#9e8b9e;font-size:7px; }

.sites-hero { height:170px;position:relative;overflow:hidden;border:1px solid var(--night-line); }.sites-hero > img { width:100%;height:100%;object-fit:cover;object-position:center 52%; }.sites-hero::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,23,41,.97),rgba(11,7,86,.73) 58%,rgba(4,23,41,.32)); }.sites-hero > div { position:absolute;z-index:1;left:24px;top:26px; }.sites-hero h2 { margin:3px 0 3px;font:650 24px Jost,sans-serif; }.sites-hero p { margin:0 0 13px;color:#a3b5ca;font-size:9px; }.sites-hero button { border:0;background:transparent;color:#f2afc1;display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700; }.sites-hero aside { position:absolute;z-index:2;right:25px;top:35px;width:155px;height:101px;padding:15px;display:grid;background:rgba(11,7,86,.82);border:1px solid rgba(255,255,255,.14); }.sites-hero aside small { color:#8ea6c0;font-size:8px; }.sites-hero aside strong { font:650 29px Jost,sans-serif; }.sites-hero aside span { color:#a4b7cc;font-size:8px; }.sites-table { height:473px;margin-top:13px;padding:18px; }

.insight-strip { min-height:148px;display:grid;grid-template-columns:repeat(4,minmax(130px,.65fr)) 1.4fr;gap:1px;background:var(--night-line);border:1px solid var(--night-line); }.insight-strip > div,.insight-strip figure { margin:0;padding:18px;background:rgba(9,39,65,.94);display:grid;align-content:center; }.insight-strip span { color:#8ba3be;font-size:8px; }.insight-strip strong { font:650 27px Jost,sans-serif; }.insight-strip small { color:#7f98b4;font-size:8px; }.spark-bars { height:75px;display:flex;align-items:flex-end;gap:5px; }.spark-bars i { flex:1;background:linear-gradient(180deg,#ec4b77,#7e1450); }.insight-strip figcaption { margin-top:7px;color:#7f98b4;font-size:7px; }.reports-grid { display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:13px;margin-top:13px; }.reports-grid > .panel { height:592px;padding:18px; }.report-filters { min-height:56px;display:flex;gap:7px;align-items:center;border-bottom:1px solid var(--night-line); }.report-filters .icon { width:13px; }.publish-panel { background:linear-gradient(160deg,rgba(22,16,105,.75),rgba(8,35,59,.92))!important; }.publish-visual { margin-top:20px;padding:20px 15px;display:grid;justify-items:center;text-align:center;border:1px solid var(--night-line); }.publish-visual > .icon { width:36px;height:36px;color:#ff9db8; }.publish-visual strong { margin-top:12px;font:620 14px Jost,sans-serif; }.publish-visual p { color:#8ea6c1;font-size:8px;line-height:1.45; }.publish-panel dl { margin:18px 0; }.publish-panel dl div { display:flex; }.publish-panel dt,.publish-panel dd { min-height:43px;margin:0;border-bottom:1px solid var(--night-line);display:flex;align-items:center; }.publish-panel dt { color:#8aa2bd;font-size:8px; }.publish-panel dd { float:right;justify-content:flex-end;color:white;font:650 14px Jost,sans-serif; }.publish-panel dl { display:grid;grid-template-columns:1fr auto; }.publish-panel .button { width:100%; }

/* V6 client portal: a distinct, contract-scoped shell */
.client-shell { min-height:100vh;display:grid;grid-template-columns:226px 1fr;background:var(--night);color:white; }
.client-rail { min-height:100vh;padding:20px 15px 16px;display:flex;flex-direction:column;background:linear-gradient(180deg,#0c0754,#061e36);border-right:1px solid var(--night-line); }
.client-rail > .brand-logo { width:127px;height:57px;margin:0 8px 9px; }.client-account { padding:14px 9px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);display:grid; }.client-account small { color:rgba(255,255,255,.45);font-size:8px;text-transform:uppercase;letter-spacing:.12em; }.client-account strong { margin-top:3px;font:620 14px Jost,sans-serif; }
.client-rail nav { display:grid;gap:4px;margin-top:17px; }.client-rail nav a { min-height:46px;padding:0 11px;display:flex;align-items:center;gap:11px;color:#8ea5c0;text-decoration:none;font-size:11px;font-weight:620; }.client-rail nav a .icon { width:18px; }.client-rail nav a.active { color:white;background:linear-gradient(90deg,rgba(204,25,72,.23),rgba(255,255,255,.06));border-left:3px solid var(--pink); }.client-help { margin-top:auto;padding:12px;display:grid;grid-template-columns:30px 1fr;gap:9px;background:rgba(255,255,255,.045);border:1px solid var(--night-line); }.client-help > span { width:30px;height:30px;display:grid;place-items:center;background:var(--pink); }.client-help .icon { width:16px; }.client-help p { margin:0;display:grid; }.client-help strong { font:620 10px Jost,sans-serif; }.client-help small { color:#7891ad;font-size:7px; }.client-main { min-width:0;padding:0 27px;background:radial-gradient(circle at 75% 0%,rgba(37,33,112,.34),transparent 36%),var(--night); }.client-top { min-height:84px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--night-line); }.client-top > div:first-child > span { color:#7e97b3;font-size:9px; }.client-top h1 { margin:2px 0 0;font:630 27px Jost,sans-serif; }.client-top > div:last-child { display:flex;gap:9px;align-items:center; }.client-date { color:#8ea5bf;font-size:9px; }.client-date b { color:white;font:650 14px Jost,sans-serif; }.client-top .icon-button { background:rgba(255,255,255,.04);border-color:var(--night-line);color:white; }.client-footer { height:37px;display:flex;justify-content:space-between;align-items:center;color:#637e9b;font-size:8px; }
.client-cover { height:238px;position:relative;overflow:hidden;border:1px solid var(--night-line); }.client-cover > img { width:100%;height:100%;object-fit:cover;object-position:center 53%; }.client-cover__shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,23,41,.97),rgba(11,7,86,.76) 52%,rgba(4,23,41,.25)); }.client-cover__copy { position:absolute;left:29px;top:32px;max-width:650px; }.client-cover__copy > span { color:#f0b0c1;font-size:9px;text-transform:uppercase;letter-spacing:.07em; }.client-cover h2 { margin:8px 0 6px;font:650 29px/1.05 Jost,sans-serif; }.client-cover p { margin:0 0 18px;color:#afbed1;font-size:10px; }.client-cover__copy > div { display:flex;align-items:center;gap:9px; }.client-cover__copy > div strong { font:620 10px Jost,sans-serif; }.client-cover > aside { position:absolute;right:28px;top:49px;width:182px;height:130px;padding:18px;display:grid;align-content:center;background:rgba(11,7,86,.82);border:1px solid rgba(255,255,255,.15); }.client-cover > aside small { color:#9aadc4;font-size:8px; }.client-cover > aside strong { font:650 33px Jost,sans-serif; }.client-cover > aside span { color:#aabbd0;font-size:8px; }.client-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--night-line);border:1px solid var(--night-line); }.client-stats > div { min-height:92px;padding:15px;background:rgba(9,39,65,.93);display:grid;grid-template-columns:39px 1fr;gap:10px;align-items:center; }.client-stats > div > span { width:39px;height:39px;display:grid;place-items:center;background:rgba(144,174,227,.1);color:#bed0ff; }.client-stats p { margin:0;display:grid; }.client-stats small,.client-stats em { color:#8199b5;font-size:7px;font-style:normal; }.client-stats strong { font:650 20px Jost,sans-serif; }.client-overview-grid { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:13px;margin-top:13px; }.client-dark-panel,.client-action-panel { background:rgba(8,35,59,.84);border:1px solid var(--night-line); }.client-dark-panel { padding:18px; }.client-dark-panel .panel-heading h2 { color:white; }.client-dark-panel .text-action { color:#c3d5ed; }.client-timeline { margin-top:11px; }.client-timeline article { min-height:65px;display:grid;grid-template-columns:45px 10px 1fr;gap:10px;align-items:center;border-top:1px solid var(--night-line); }.client-timeline time { color:#8099b5;font-size:8px; }.client-timeline article > span { width:8px;height:8px;border-radius:50%;background:#95aac3; }.client-timeline article > span.good { background:#49ce92; }.client-timeline article > span.future { background:#596f89; }.client-timeline p { margin:0;display:grid; }.client-timeline strong { font:620 10px Jost,sans-serif; }.client-timeline small { color:#829bb7;font-size:8px; }.client-action-panel { padding:20px;display:grid;align-content:start; }.client-action-panel > span { width:43px;height:43px;display:grid;place-items:center;background:#251e71;color:#c4d2ff; }.client-action-panel > small { margin-top:15px;color:#f0b0c1;font-size:8px;text-transform:uppercase;letter-spacing:.08em; }.client-action-panel h2 { margin:4px 0;font:650 18px Jost,sans-serif; }.client-action-panel p { color:#8fa7c2;font-size:9px;line-height:1.45; }.client-action-panel .status { justify-self:start;font-size:7px; }.client-action-panel button { margin-top:16px;height:39px;border:0;background:var(--pink);color:white;display:flex;align-items:center;justify-content:center;gap:8px;font-size:8px;font-weight:700; }
.site-detail-head { min-height:106px;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;border-left:3px solid var(--success);background:rgba(19,135,91,.08); }.site-detail-head h2 { margin:2px 0;font:650 22px Jost,sans-serif; }.site-detail-head p { margin:0;color:#8fa7c2;font-size:9px; }.site-detail-grid { display:grid;grid-template-columns:minmax(360px,.75fr) 1.25fr;gap:13px;margin-top:13px; }.site-photo-panel { height:448px;position:relative;overflow:hidden;border:1px solid var(--night-line); }.site-photo-panel img { width:100%;height:100%;object-fit:cover; }.site-photo-panel::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,23,41,.96)); }.site-photo-panel > div { position:absolute;z-index:1;left:20px;bottom:23px;display:grid; }.site-photo-panel small { color:#f0b0c1;font-size:8px;text-transform:uppercase; }.site-photo-panel strong { font:650 24px Jost,sans-serif; }.site-photo-panel span { margin-top:5px;color:#b3c3d6;font-size:9px;display:flex;gap:6px;align-items:center; }.site-photo-panel .icon { width:15px; }.site-plan { height:448px; }.service-plan-row { min-height:99px;display:grid;grid-template-columns:52px 12px 1fr auto;gap:12px;align-items:center;border-top:1px solid var(--night-line); }.service-plan-row time { color:#8098b4;font-size:9px; }.service-plan-row > span { width:10px;height:10px;border-radius:50%;background:#6d829b; }.service-plan-row > span.done { background:#47cd91; }.service-plan-row > span.current { background:#cc1948;box-shadow:0 0 0 5px rgba(204,25,72,.14); }.service-plan-row p { margin:0;display:grid; }.service-plan-row strong { font:620 11px Jost,sans-serif; }.service-plan-row small { color:#829ab5;font-size:8px; }.service-plan-row .status { font-size:7px; }.site-assurance { margin-top:13px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--night-line);border:1px solid var(--night-line); }.site-assurance > div { min-height:104px;padding:16px;background:rgba(9,39,65,.94);display:grid;align-content:center; }.site-assurance small { color:#829ab6;font-size:8px; }.site-assurance strong { font:650 24px Jost,sans-serif; }.site-assurance span { color:#9fb2c9;font-size:8px; }
.report-intro { min-height:108px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,rgba(22,16,105,.65),rgba(8,35,59,.86));border:1px solid var(--night-line); }.report-intro > div { display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center; }.report-intro > div > span { width:42px;height:42px;display:grid;place-items:center;background:#251e71;color:#bed0ff; }.report-intro p { margin:0;display:grid; }.report-intro strong { font:620 14px Jost,sans-serif; }.report-intro small { color:#91a8c2;font-size:8px; }.report-intro aside { min-width:160px;padding-left:20px;border-left:1px solid var(--night-line);display:grid; }.report-intro aside strong { font:650 28px Jost,sans-serif; }.client-report-table { height:676px;margin-top:13px;padding:18px; }.report-toolbar { min-height:57px;display:flex;gap:7px;align-items:center;border-bottom:1px solid var(--night-line); }.report-toolbar .icon { width:13px; }.client-report-table th,.client-report-table td { height:88px;padding:0 12px;border-bottom:1px solid var(--night-line);text-align:left;color:#98aec7;font-size:8px; }.client-report-table th { height:43px;color:#718ba7;font-size:7px;text-transform:uppercase;letter-spacing:.07em; }.client-report-table td strong { color:white;font:620 10px Jost,sans-serif; }.client-report-table td small { display:block;color:#6f89a5;font-size:7px; }.report-file { width:34px;height:34px;display:grid;place-items:center;background:#251e71;color:#bdceff; }.client-report-table .status { font-size:7px; }.client-report-table td:last-child button { border:0;background:transparent;color:#f0b0c1; }.client-report-table td:last-child .icon { width:16px; }
.incident-summary-client { min-height:110px;padding:20px 23px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,rgba(19,135,91,.14),rgba(8,35,59,.88));border-left:3px solid var(--success); }.incident-summary-client > div small { color:#8fe0ba;font-size:8px;text-transform:uppercase; }.incident-summary-client > div strong { display:block;font:650 23px Jost,sans-serif; }.incident-summary-client > div p { margin:2px 0 0;color:#91a8c2;font-size:9px; }.incident-summary-client > span { min-width:180px;display:grid;grid-template-columns:34px 1fr;gap:7px;align-items:center;color:#bed0ff; }.incident-summary-client > span .icon { grid-row:1/3;width:25px; }.incident-summary-client > span strong { font:620 10px Jost,sans-serif; }.incident-summary-client > span small { color:#7f98b4;font-size:7px; }.client-incident-grid { display:grid;grid-template-columns:minmax(0,1.45fr) 315px;gap:13px;margin-top:13px; }.client-incident-grid > * { height:646px; }.published-incident { min-height:235px;padding:20px 5px;display:grid;grid-template-columns:58px 1fr 18px;gap:15px;align-items:start;border-top:1px solid var(--night-line); }.published-incident:first-of-type { margin-top:12px; }.published-incident time { width:50px;height:58px;display:grid;place-content:center;text-align:center;background:#251e71; }.published-incident time b { font:650 19px Jost,sans-serif;line-height:1; }.published-incident time span { color:#9db2cb;font-size:7px; }.published-incident > div > span { color:#f0b0c1;font-size:8px;text-transform:uppercase;letter-spacing:.06em; }.published-incident h3 { margin:6px 0;font:630 15px Jost,sans-serif; }.published-incident p { margin:0;color:#94abc5;font-size:9px;line-height:1.5; }.published-incident footer { margin-top:18px;display:flex;gap:12px;align-items:center; }.published-incident footer small { color:#6f89a5;font-size:7px; }.published-incident > .icon { margin-top:19px;width:15px;color:#7892af; }
.request-lead { min-height:128px;padding:18px 21px;display:grid;grid-template-columns:1fr 1.35fr;gap:30px;align-items:center;background:linear-gradient(105deg,rgba(22,16,105,.78),rgba(8,35,59,.9));border:1px solid var(--night-line); }.request-lead > div:first-child { display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center; }.request-lead > div:first-child > span { width:42px;height:42px;display:grid;place-items:center;background:#251e71;color:#bed0ff; }.request-lead p { margin:0;display:grid; }.request-lead small { color:#f0b0c1;font-size:8px; }.request-lead strong { font:630 15px Jost,sans-serif; }.request-lead em { color:#91a8c2;font-size:8px;font-style:normal; }.request-progress { display:grid;grid-template-columns:repeat(4,1fr);position:relative; }.request-progress::before { content:'';position:absolute;left:10%;right:10%;top:9px;height:2px;background:#29435b; }.request-progress span { position:relative;padding-top:25px;color:#708aa6;text-align:center;font-size:7px; }.request-progress span::before { content:'';position:absolute;top:4px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:#29435b;border:2px solid #102b43; }.request-progress span.done::before { background:#31bd7e; }.request-progress span.current { color:white; }.request-progress span.current::before { background:var(--pink);box-shadow:0 0 0 5px rgba(204,25,72,.14); }.client-request-grid { display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:13px;margin-top:13px; }.client-request-grid > * { height:626px; }.request-row { min-height:102px;padding:13px 4px;display:grid;grid-template-columns:1fr auto 120px 16px;gap:12px;align-items:center;border-top:1px solid var(--night-line); }.request-row:first-of-type { margin-top:12px; }.request-row > div { display:grid; }.request-row > div span { color:#f0b0c1;font-size:7px; }.request-row > div strong { font:620 11px Jost,sans-serif; }.request-row > div small,.request-row > p { color:#8199b5;font-size:8px; }.request-row > p { margin:0; }.request-row .status { font-size:7px; }.request-row > .icon { width:14px;color:#7690ac; }.request-detail h2 { margin:3px 0 15px;font:650 18px Jost,sans-serif; }.request-owner { margin:0;padding:12px;display:flex;gap:10px;align-items:center;background:rgba(144,174,227,.07); }.request-owner > span:last-child { display:grid; }.request-owner small { color:#8098b4;font-size:7px; }.request-owner strong { font:620 10px Jost,sans-serif; }.request-history { margin:18px 0; }.request-history article { min-height:68px;display:grid;grid-template-columns:13px 1fr;gap:10px;position:relative; }.request-history article::after { content:'';position:absolute;left:5px;top:17px;bottom:-8px;width:1px;background:#2b465e; }.request-history article:last-child::after { display:none; }.request-history article > span { width:11px;height:11px;margin-top:4px;border-radius:50%;background:#31bd7e; }.request-history article.current > span { background:var(--pink);box-shadow:0 0 0 4px rgba(204,25,72,.14); }.request-history p { margin:0;display:grid;align-content:start; }.request-history strong { font:620 9px Jost,sans-serif; }.request-history small { color:#7c95b0;font-size:7px; }.request-detail > button { width:100%;height:40px;border:0;background:var(--pink);color:white;display:flex;align-items:center;justify-content:center;gap:8px;font-size:8px;font-weight:700; }

.client-action-panel > .status { width:auto;height:auto;display:inline-flex;background:rgba(19,135,91,.13);color:#8de3bb;border-color:rgba(69,198,140,.26); }
.service-plan-row > .status { width:auto;height:auto;border-radius:3px;background:rgba(19,135,91,.13);color:#8de3bb;border:1px solid rgba(69,198,140,.26);box-shadow:none; }
.service-plan-row > .status--neutral { background:rgba(255,255,255,.055);color:#9fb1c7;border-color:var(--night-line); }
.client-request-list { padding:18px; }

.incident-workspace th { height:34px; }
.incident-workspace td { height:48px; }
.incident-workspace .incident-explainer { min-height:58px; margin-top:9px; }

/* Client-review legibility pass */
.workforce-table th,.incident-workspace th,.sites-table th,.reports-table th { font-size:8px; }
.workforce-table td,.incident-workspace td,.sites-table td,.reports-table td { font-size:9px; }
.table-person small,.incident-workspace td small,.sites-table td small { font-size:8px; }
.comms-list small,.comms-list em,.conversation header small,.pinned-message small,.message-thread figcaption,.acknowledged,.channel-context dt,.urgent-route small { font-size:8px; }
.message-thread article > div > p:nth-child(2),.channel-context dd { font-size:10px; }
.client-timeline time,.client-timeline small,.client-action-panel p,.service-plan-row time,.service-plan-row small,.site-assurance small,.site-assurance span { font-size:9px; }
.client-report-table th { font-size:8px; }
.client-report-table td { font-size:9px; }
.client-report-table td strong { font-size:11px; }
.client-report-table td small { font-size:8px; }
.request-row > div strong { font-size:12px; }
.request-row > div small,.request-row > p,.request-history small { font-size:9px; }
.request-history strong { font-size:10px; }

/* V7 desktop reference pair: mobile-led violet operational system */
h1, h2, h3 { text-wrap: balance; }

.director-shell--reference,
.role-shell--live-reference {
  --reference-surface: rgba(7, 25, 48, .78);
  --reference-surface-strong: rgba(8, 29, 53, .94);
  --reference-line: rgba(151, 178, 224, .18);
  --reference-muted: #91a9c4;
  --reference-soft: #c5d4e8;
  background: #07043d;
}

.director-shell--reference .side-rail,
.role-shell--live-reference .side-rail {
  background:
    radial-gradient(circle at 20% 8%, rgba(75, 55, 165, .38), transparent 29%),
    linear-gradient(180deg, #160d69 0%, #0c0754 46%, #070433 100%);
}

.director-shell--reference .director-main,
.role-shell--live-reference .role-main {
  background:
    radial-gradient(circle at 76% 6%, rgba(69, 54, 170, .38), transparent 28%),
    radial-gradient(circle at 34% 38%, rgba(27, 76, 119, .16), transparent 34%),
    linear-gradient(145deg, #071a31 0%, #08152e 44%, #100853 100%);
}

.director-shell--reference .director-topbar,
.role-shell--live-reference .role-top {
  border-bottom-color: var(--reference-line);
}

.director-shell--reference .search-box,
.director-shell--reference .icon-button,
.role-shell--live-reference .search-box,
.role-shell--live-reference .icon-button {
  border-color: var(--reference-line);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* Director Command Centre */
.director-reference-hero {
  min-height: 356px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--reference-line);
  border-radius: 16px;
  color: white;
  background: #0b0756;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
}

.director-reference-hero > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 56% 44%;
  filter: saturate(.82) contrast(1.04);
}

.director-reference-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 7, 87, .98) 0%, rgba(13, 7, 87, .9) 37%, rgba(13, 7, 87, .42) 67%, rgba(4, 19, 40, .76) 100%),
    linear-gradient(180deg, transparent 52%, rgba(4, 21, 39, .94) 100%);
}

.director-reference-hero__copy {
  width: min(660px, 58%);
  position: relative;
  z-index: 2;
  padding: 34px 38px 112px;
}

.director-reference-hero__copy h2 {
  max-width: 22ch;
  margin: 18px 0 10px;
  color: white;
  font: 630 39px/.98 Jost, sans-serif;
  letter-spacing: -.025em;
}

.director-reference-hero__copy h2 em {
  color: var(--pink-soft);
  font-style: normal;
}

.director-reference-hero__copy > p {
  max-width: 61ch;
  margin: 0 0 19px;
  color: #c3d1e3;
  font-size: 12px;
  line-height: 1.5;
}

.director-reference-coverage {
  width: 310px;
  position: absolute;
  z-index: 3;
  top: 27px;
  right: 28px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30, 20, 112, .78), rgba(6, 31, 52, .84));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
}

.director-reference-coverage > div:first-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.director-reference-coverage > div:first-child span {
  max-width: 11ch;
  color: #b1c4da;
  font-size: 11px;
  line-height: 1.25;
}

.director-reference-coverage > div:first-child strong {
  font: 650 42px/.9 Jost, sans-serif;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.director-reference-coverage__bar {
  height: 5px;
  margin: 19px 0 10px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
}

.director-reference-coverage__bar span {
  width: 97%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #f04c78, var(--pink));
}

.director-reference-coverage > p {
  margin: 0;
  color: #99afc8;
  font-size: 10px;
}

.director-reference-coverage > p strong { color: white; }
.director-reference-coverage dl {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.director-reference-coverage dl div {
  min-width: 0;
  padding-left: 11px;
  border-left: 1px solid rgba(255, 255, 255, .13);
}

.director-reference-coverage dl div:first-child { padding-left: 0; border-left: 0; }
.director-reference-coverage dt { color: #819ab6; font-size: 8px; }
.director-reference-coverage dd { margin: 3px 0 0; font: 620 12px Jost, sans-serif; font-variant-numeric: tabular-nums; }

.director-reference-signals {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 18px;
  left: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: rgba(4, 21, 40, .74);
  backdrop-filter: blur(13px);
}

.director-reference-signals article {
  min-width: 0;
  min-height: 77px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.director-reference-signals article:first-child { border-left: 0; }
.director-reference-signals article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #c6d4ff;
  background: rgba(145, 171, 224, .13);
}
.director-reference-signals article.attention > span { color: #ff9ab5; background: rgba(204, 25, 72, .2); }
.director-reference-signals article > span .icon { width: 18px; }
.director-reference-signals p { min-width: 0; margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.director-reference-signals small { grid-column: 1 / -1; color: #8fa7c1; font-size: 9px; }
.director-reference-signals strong { color: white; font: 640 21px/1.1 Jost, sans-serif; font-variant-numeric: tabular-nums; }
.director-reference-signals em { min-width: 0; overflow: hidden; color: #94aac3; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.director-reference-signals .attention em { color: #ffc0d1; }

.director-reference-workspace {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 14px;
}

.director-reference-panel {
  min-width: 0;
  min-height: 318px;
  padding: 20px;
  border: 1px solid var(--reference-line);
  border-radius: 15px;
  color: white;
  background: linear-gradient(150deg, rgba(10, 41, 67, .91), rgba(9, 25, 51, .86));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .17);
}

.director-reference-panel > header {
  min-height: 47px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.director-reference-panel h2 { margin: 0; font: 630 20px/1.1 Jost, sans-serif; }
.director-reference-panel header p { margin: 4px 0 0; color: #86a0bd; font-size: 9px; }

.director-reference-alert {
  min-height: 73px;
  display: grid;
  grid-template-columns: 46px 35px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--reference-line);
}
.director-reference-alert:first-of-type { margin-top: 4px; }
.director-reference-alert--critical { margin-inline: -20px; padding-inline: 20px; background: linear-gradient(90deg, rgba(204, 25, 72, .17), rgba(204, 25, 72, .03)); }
.director-reference-alert time { color: #819ab5; font-size: 8px; font-variant-numeric: tabular-nums; }
.director-reference-alert > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #c4d2ff; background: rgba(145, 171, 224, .12); }
.director-reference-alert--critical > span { color: #ff9ab5; background: rgba(204, 25, 72, .2); }
.director-reference-alert > span .icon { width: 17px; }
.director-reference-alert strong { display: block; font: 620 11px/1.2 Jost, sans-serif; }
.director-reference-alert p { margin: 4px 0 0; color: #89a1bc; font-size: 8px; line-height: 1.35; }
.director-reference-alert > em { min-width: 56px; padding: 5px 8px; border: 1px solid rgba(204, 25, 72, .34); color: #ff9ab5; background: rgba(204, 25, 72, .14); text-align: center; font-size: 8px; font-style: normal; font-weight: 720; }
.director-reference-alert > em.open { border-color: rgba(222, 139, 8, .3); color: #ffd08a; background: rgba(222, 139, 8, .1); }
.director-reference-alert > em.planned { border-color: var(--reference-line); color: #a7bad0; background: rgba(255, 255, 255, .045); }
.director-reference-alert > button { padding: 0; border: 0; color: #7790ad; background: transparent; }
.director-reference-alert > button .icon { width: 15px; }

.director-reference-sites { height: 162px; margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.director-reference-sites figure { min-width: 0; margin: 0; overflow: hidden; position: relative; border-radius: 11px; }
.director-reference-sites img { width: 100%; height: 100%; display: block; object-fit: cover; }
.director-reference-sites figure > span { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 7, 87, .06), rgba(13, 7, 87, .94)); }
.director-reference-sites figcaption { position: absolute; inset: auto 13px 12px; display: grid; }
.director-reference-sites small { color: var(--pink-soft); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.director-reference-sites strong { margin-top: 2px; font: 620 13px Jost, sans-serif; }
.director-reference-sites em { margin-top: 7px; display: flex; align-items: center; gap: 7px; color: #d4e0ef; font-size: 8px; font-style: normal; }
.director-reference-sites em i { width: 7px; height: 7px; border-radius: 50%; background: #4fd69a; }
.director-reference-confidence { min-height: 57px; margin: 10px 0 0; padding-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--reference-line); }
.director-reference-confidence div { min-width: 0; padding-inline: 12px; display: grid; align-content: center; border-left: 1px solid var(--reference-line); }
.director-reference-confidence div:first-child { padding-left: 0; border-left: 0; }
.director-reference-confidence dt { color: #819ab5; font-size: 8px; }
.director-reference-confidence dd { margin: 2px 0 0; font: 630 17px Jost, sans-serif; font-variant-numeric: tabular-nums; }

/* Live operations */
.role-shell--live-reference .role-main { padding: 0 28px; overflow: hidden; }
.live-ops-lead {
  min-height: 206px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--reference-line);
  border-radius: 16px;
  color: white;
  background: #0d0757;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}
.live-ops-lead > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 53%; filter: saturate(.72); }
.live-ops-lead__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 7, 87, .98) 0%, rgba(13, 7, 87, .86) 42%, rgba(10, 29, 53, .58) 67%, rgba(5, 24, 44, .86) 100%); }
.live-ops-lead__copy { width: min(660px, 58%); position: relative; z-index: 2; padding: 26px 31px; }
.live-ops-state { display: flex; align-items: center; gap: 8px; color: #d4e1f0; font-size: 10px; font-weight: 650; }
.live-ops-state i { width: 8px; height: 8px; border-radius: 50%; background: #55d79d; box-shadow: 0 0 0 5px rgba(85, 215, 157, .14); }
.live-ops-state time { margin-left: 3px; color: #91a9c4; font-variant-numeric: tabular-nums; }
.live-ops-lead h2 { max-width: 20ch; margin: 15px 0 8px; font: 630 30px/1.04 Jost, sans-serif; letter-spacing: -.02em; }
.live-ops-lead__copy p { max-width: 62ch; margin: 0; color: #bacbdd; font-size: 11px; line-height: 1.45; }
.live-ops-summary { width: 455px; position: absolute; z-index: 3; top: 31px; right: 26px; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); border-radius: 13px; background: rgba(5, 24, 45, .76); backdrop-filter: blur(12px); }
.live-ops-summary div { min-height: 140px; padding: 20px 16px; display: grid; align-content: center; border-left: 1px solid rgba(255, 255, 255, .1); }
.live-ops-summary div:first-child { border-left: 0; }
.live-ops-summary dt { color: #8fa7c2; font-size: 9px; }
.live-ops-summary dd { margin: 3px 0 1px; font: 650 28px Jost, sans-serif; font-variant-numeric: tabular-nums; }
.live-ops-summary span { color: #8fa7c2; font-size: 8px; line-height: 1.35; }
.live-ops-summary .needs-action { background: linear-gradient(155deg, rgba(204, 25, 72, .18), rgba(204, 25, 72, .03)); }
.live-ops-summary .needs-action dd { color: #ff9ab5; }

.live-ops-workspace { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .7fr); gap: 14px; }
.live-map-panel,
.live-exceptions,
.live-field-picture { border: 1px solid var(--reference-line); border-radius: 15px; color: white; background: linear-gradient(150deg, rgba(10, 41, 67, .92), rgba(8, 25, 50, .88)); box-shadow: 0 22px 54px rgba(0, 0, 0, .16); }
.live-map-panel { min-width: 0; padding: 18px; }
.live-map-panel > header,
.live-exceptions > header,
.live-field-picture > header { min-height: 43px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.live-map-panel h2,
.live-exceptions h2,
.live-field-picture h2 { margin: 0; font: 630 18px/1.1 Jost, sans-serif; }
.live-map-panel header p,
.live-exceptions header p,
.live-field-picture header p { margin: 3px 0 0; color: #839db9; font-size: 8px; }
.map-controls { display: flex; gap: 6px; }
.map-controls button { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--reference-line); border-radius: 8px; color: #a9bdd4; background: rgba(255, 255, 255, .04); font-size: 8px; }
.map-controls button:last-child { width: 34px; padding: 0; justify-content: center; color: white; background: var(--pink); border-color: var(--pink); }
.map-controls .icon { width: 14px; }
.live-map-canvas { height: 514px; overflow: hidden; position: relative; border-radius: 12px; background: #071b31; }
.live-map-canvas > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.35) hue-rotate(184deg) brightness(.55) contrast(1.14); transform: scale(1.12); }
.live-map-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 76, .16), rgba(4, 20, 38, .32)), rgba(13, 7, 87, .12); }
.live-map-routes { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.live-map-routes path { fill: none; stroke: rgba(240, 176, 193, .82); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 9; filter: drop-shadow(0 0 4px rgba(204, 25, 72, .55)); }
.live-map-routes path.secondary { stroke: rgba(144, 174, 227, .58); stroke-width: 3; stroke-dasharray: 5 9; }
.live-marker { position: absolute; z-index: 3; padding: 0; border: 0; color: white; background: transparent; cursor: pointer; }
.live-marker > i { width: 15px; height: 15px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: #43cb8f; box-shadow: 0 0 0 6px rgba(67, 203, 143, .18), 0 5px 14px rgba(0, 0, 0, .35); }
.live-marker > i .icon { width: 12px; height: 12px; }
.live-marker > span { min-width: 128px; position: absolute; top: 22px; left: 0; padding: 7px 9px; display: none; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; text-align: left; background: rgba(7, 23, 48, .9); box-shadow: 0 12px 30px rgba(0, 0, 0, .24); backdrop-filter: blur(10px); }
.live-marker:hover > span,
.live-marker.selected > span { display: grid; }
.live-marker--vehicle > span { display: grid; }
.live-marker > span strong { font: 620 9px Jost, sans-serif; }
.live-marker > span small { margin-top: 2px; color: #91a9c4; font-size: 7px; }
.live-marker.selected > i { width: 22px; height: 22px; margin: -3px; background: var(--pink); box-shadow: 0 0 0 8px rgba(204, 25, 72, .2), 0 5px 14px rgba(0, 0, 0, .35); }
.live-marker--vehicle > i { width: 28px; height: 28px; margin: -6px; background: #241b7a; }
.live-marker--staff > i { background: #e39a24; box-shadow: 0 0 0 6px rgba(227, 154, 36, .19), 0 5px 14px rgba(0, 0, 0, .35); }
.live-map-legend { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 8px 10px; display: flex; gap: 13px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; color: #b5c6da; background: rgba(6, 22, 43, .82); font-size: 7px; backdrop-filter: blur(10px); }
.live-map-legend span { display: flex; align-items: center; gap: 5px; }
.live-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #43cb8f; }
.live-map-legend span:nth-child(2) i { background: #7d74df; }
.live-map-legend span:nth-child(3) i { background: var(--pink); }
.map-selection { width: 390px; min-height: 111px; position: absolute; z-index: 4; right: 14px; bottom: 14px; padding: 10px; display: grid; grid-template-columns: 105px 1fr 30px; gap: 11px; align-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: linear-gradient(140deg, rgba(18, 12, 94, .91), rgba(5, 29, 50, .94)); box-shadow: 0 18px 46px rgba(0, 0, 0, .35); backdrop-filter: blur(13px); }
.map-selection > img { width: 105px; height: 91px; border-radius: 8px; object-fit: cover; }
.map-selection > div { min-width: 0; }
.map-selection small { color: var(--pink-soft); font-size: 7px; }
.map-selection h3 { margin: 2px 0 1px; font: 630 13px Jost, sans-serif; }
.map-selection p { margin: 0; color: #96acc5; font-size: 7px; }
.map-selection dl { margin: 9px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.map-selection dl div { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .1); }
.map-selection dl div:first-child { padding-left: 0; border-left: 0; }
.map-selection dt { color: #718ca9; font-size: 6px; }
.map-selection dd { margin: 1px 0 0; font: 620 9px Jost, sans-serif; }
.map-selection > button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--pink); }
.map-selection > button .icon { width: 15px; }
.map-attribution { position: absolute; z-index: 2; bottom: 6px; left: 10px; color: rgba(255, 255, 255, .45); font-size: 6px; }

.live-command-rail { min-width: 0; display: grid; grid-template-rows: minmax(0, 1.18fr) minmax(0, .82fr); gap: 14px; }
.live-exceptions,
.live-field-picture { min-width: 0; padding: 18px; }
.live-exceptions header button,
.live-field-picture header button { padding: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; color: #c6d7ec; background: transparent; font-size: 8px; font-weight: 700; }
.live-exceptions header button .icon,
.live-field-picture header button .icon { width: 14px; }
.exception-card { min-height: 76px; display: grid; grid-template-columns: 58px 35px minmax(0, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid var(--reference-line); }
.exception-card:first-of-type { margin-top: 5px; }
.exception-card--urgent { margin-inline: -18px; padding-inline: 18px; background: linear-gradient(90deg, rgba(204, 25, 72, .16), transparent); }
.exception-card time { color: #7e98b4; font-size: 7px; }
.exception-card > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #c5d3ff; background: rgba(145, 171, 224, .12); }
.exception-card--urgent > span { color: #ff9ab5; background: rgba(204, 25, 72, .2); }
.exception-card > span .icon { width: 17px; }
.exception-card > div { min-width: 0; }
.exception-card strong { display: block; overflow: hidden; font: 620 9px Jost, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.exception-card p { margin: 3px 0 0; overflow: hidden; color: #8099b5; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.exception-card > button { min-height: 28px; padding: 0 8px; border: 1px solid var(--reference-line); border-radius: 6px; color: #bed0e7; background: rgba(255, 255, 255, .04); font-size: 7px; font-weight: 720; }
.exception-card--urgent > button { border-color: rgba(204, 25, 72, .34); color: #ff9ab5; background: rgba(204, 25, 72, .14); }
.live-field-picture figure { height: 123px; margin: 7px 0 0; overflow: hidden; position: relative; border-radius: 10px; }
.live-field-picture figure > img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.live-field-picture figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 24%, rgba(13, 7, 87, .94)); }
.live-field-picture figcaption { position: absolute; z-index: 2; right: 12px; bottom: 10px; left: 12px; display: grid; }
.live-field-picture figcaption > span { color: var(--pink-soft); font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.live-field-picture figcaption strong { font: 620 11px Jost, sans-serif; }
.live-field-picture figcaption small { margin-top: 4px; display: flex; align-items: center; gap: 6px; color: #cad6e5; font-size: 7px; }
.live-field-picture figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #4fd69a; }
.field-signal { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.field-signal > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #9ee6c2; background: rgba(19, 135, 91, .15); }
.field-signal > span .icon { width: 17px; }
.field-signal p { min-width: 0; margin: 0; display: grid; }
.field-signal strong { font: 620 9px Jost, sans-serif; }
.field-signal small { color: #8099b5; font-size: 7px; }
.field-signal time { color: #7190ae; font-size: 7px; }

@media (max-width: 1399px) {
  .director-reference-hero__copy { width: 56%; padding-inline: 30px; }
  .director-reference-hero__copy h2 { font-size: 34px; }
  .director-reference-coverage { width: 280px; }
  .live-ops-lead__copy { width: 53%; }
  .live-ops-lead h2 { font-size: 26px; }
  .live-ops-summary { width: 420px; }
  .live-ops-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .72fr); }
  .map-selection { width: 355px; }
}

@media (max-width: 1199px) {
  .director-reference-coverage { width: 260px; right: 20px; }
  .director-reference-hero__copy { width: 59%; padding-left: 26px; }
  .director-reference-hero__copy h2 { font-size: 31px; }
  .director-reference-signals article { padding-inline: 10px; }
  .director-reference-signals em { display: none; }
  .director-reference-workspace { grid-template-columns: minmax(0, 1fr); }
  .director-reference-panel { min-height: 0; }
  .role-shell--live-reference .role-main { padding-inline: 20px; }
  .live-ops-lead { min-height: 220px; }
  .live-ops-summary { width: 380px; right: 18px; }
  .live-ops-summary div { padding-inline: 12px; }
  .live-ops-workspace { grid-template-columns: minmax(0, 1fr); }
  .live-command-rail { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); grid-template-rows: none; }
  .live-map-canvas { height: 460px; }
}