:root{--bg:#08131f;--panel:#101d2d;--panel2:#14263a;--card:#ffffff;--soft:#f5f8fc;--text:#172033;--muted:#64748b;--white:#fff;--red:#d90429;--red2:#a4001f;--amber:#f59e0b;--green:#16a34a;--blue:#2563eb;--border:#d9e2ef;--shadow:0 18px 50px rgba(0,0,0,.18)}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--text)}a{color:var(--red);font-weight:800;text-decoration:none}a:hover{text-decoration:underline}.login-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,rgba(217,4,41,.28),transparent 30%),linear-gradient(135deg,#050b13,#101d2d 55%,#26384f)}.login-card{width:min(460px,calc(100vw - 28px));background:#fff;border-radius:30px;padding:34px;box-shadow:var(--shadow)}.brand-mark{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red) 0 50%,#101827 50%);color:white;font-weight:900;margin-bottom:18px}.login-card h1{margin:0;font-size:31px}.login-card p{color:var(--muted)}.form-stack{display:grid;gap:14px}label{display:grid;gap:7px;font-weight:800;font-size:13px;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:15px;background:#fff;color:var(--text)}textarea{min-height:92px;resize:vertical}button,.btn{border:0;border-radius:14px;padding:11px 15px;min-height:42px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.btn-primary,button.primary{background:var(--red);color:#fff}.btn-secondary,button.secondary{background:#eaf0f7;color:#111827}.btn-danger,button.danger{background:var(--red2);color:#fff}.btn-warning{background:var(--amber);color:#111827}.btn-small{padding:8px 10px;min-height:34px;font-size:12px}.app-shell{min-height:100vh;display:grid;grid-template-columns:292px 1fr}.sidebar{background:linear-gradient(180deg,#07111d,#0e2236);color:#fff;padding:24px;display:flex;flex-direction:column;gap:24px}.sidebar-brand{display:flex;gap:12px;align-items:center}.sidebar .brand-mark{width:48px;height:48px;border-radius:16px;margin:0;flex:0 0 auto}.sidebar-brand strong{display:block;font-size:18px}.sidebar-brand span{display:block;color:#b9c6d8;font-size:12px;margin-top:3px}.sidebar-nav{display:grid;gap:8px}.sidebar-nav a{color:#d9e4f2;padding:12px 14px;border-radius:15px;font-weight:900}.sidebar-nav a.active,.sidebar-nav a:hover{background:rgba(217,4,41,.22);color:#fff;text-decoration:none}.sidebar-user{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:14px;border-radius:18px}.sidebar-user small{display:block;color:#b9c6d8;margin-top:4px}.logout-form button{width:100%;margin-top:12px;background:rgba(255,255,255,.1);color:#fff}.main{min-width:0;padding:30px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.topbar h1{margin:0;font-size:34px;letter-spacing:-.03em}.topbar p{margin:7px 0 0;color:var(--muted)}.alert{margin:0 0 18px;padding:13px 15px;border-radius:15px;font-weight:800}.alert-success{background:#dcfce7;color:#065f46}.alert-error{background:#fee2e2;color:#991b1b}.alert-warning{background:#fef3c7;color:#92400e}.stats-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:16px;margin-bottom:20px}.stat-card,.panel,.mini-card{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 34px rgba(16,24,39,.07)}.stat-card{padding:20px;border-top:5px solid #94a3b8}.stat-card.danger{border-top-color:var(--red)}.stat-card.success{border-top-color:var(--green)}.stat-card.warning{border-top-color:var(--amber)}.stat-card.blue{border-top-color:var(--blue)}.stat-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:900}.stat-card strong{display:block;margin-top:10px;font-size:32px}.panel{padding:22px;margin-bottom:20px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.panel-header h2{margin:0;font-size:22px}.panel-header p{margin:5px 0 0;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:13px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}td small{display:block;color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#e2e8f0;color:#334155;font-size:12px;font-weight:900;margin:2px}.badge-danger{background:#fee2e2;color:#991b1b}.badge-warning{background:#fef3c7;color:#92400e}.badge-success{background:#dcfce7;color:#065f46}.badge-muted{background:#e5e7eb;color:#4b5563}.badge-blue{background:#dbeafe;color:#1d4ed8}.filter-form{display:grid;grid-template-columns:1fr 220px 220px auto auto;gap:10px;align-items:end;margin-bottom:16px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mini-card{padding:18px}.mini-card h3{margin:0 0 10px;color:#0f172a}.detail-list{display:grid;grid-template-columns:170px 1fr;gap:10px 16px}.detail-list dt{font-weight:900;color:var(--muted)}.detail-list dd{margin:0}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.actions form{margin:0}.priority-row{background:#fff8f8}.empty{color:var(--muted);font-style:italic}.role-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.role-card{border:1px solid var(--border);border-radius:20px;padding:18px;background:#fff}.role-card h3{margin-top:0}.audit-json{white-space:pre-wrap;word-break:break-word;background:#f1f5f9;border-radius:12px;padding:10px;font-size:12px;max-width:430px}.company-form{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;align-items:end}.company-form .wide{grid-column:1/-1}@media(max-width:1150px){.app-shell{grid-template-columns:1fr}.sidebar{position:static}.sidebar-nav{grid-template-columns:repeat(4,minmax(120px,1fr))}.stats-grid{grid-template-columns:repeat(2,1fr)}.filter-form,.company-form{grid-template-columns:1fr 1fr}.grid-2,.grid-3{grid-template-columns:1fr}}@media(max-width:680px){.main{padding:18px}.sidebar{padding:18px}.sidebar-nav{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr}.filter-form,.company-form{grid-template-columns:1fr}.topbar,.panel-header{flex-direction:column}.detail-list{grid-template-columns:1fr}.actions{flex-direction:column;align-items:stretch}.actions .btn,.actions button{width:100%}}

/* Phase 4: Live Operations Map */
.map-command-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:16px;margin-bottom:20px}.map-stat-card{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 34px rgba(16,24,39,.07);padding:18px;border-top:5px solid #94a3b8}.map-stat-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:900}.map-stat-card strong{display:block;margin-top:8px;font-size:30px}.map-stat-card small{display:block;color:var(--muted);margin-top:4px}.map-stat-card.danger{border-top-color:var(--red)}.map-stat-card.success{border-top-color:var(--green)}.map-stat-card.warning{border-top-color:var(--amber)}.map-stat-card.blue{border-top-color:var(--blue)}.map-panel{padding:18px}.operations-map{width:100%;height:620px;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.map-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}.map-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:900;font-size:12px}.legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block}.alert-dot{background:var(--red)}.ready-dot{background:var(--green)}.busy-dot{background:var(--amber)}.off-dot{background:#64748b}.ss-div-icon{background:transparent;border:0}.ss-map-marker{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:900;border:3px solid rgba(255,255,255,.88);box-shadow:0 10px 24px rgba(0,0,0,.35)}.ss-map-marker.alert{background:var(--red);animation:ssPulse 1.6s infinite}.ss-map-marker.responder-ready{background:var(--green)}.ss-map-marker.responder-busy{background:var(--amber);color:#111827}.ss-map-marker.responder-stale{background:#f59e0b;color:#111827}.ss-map-marker.responder-off{background:#64748b}.map-popup h3{margin:0 0 8px;color:#0f172a}.map-popup p{margin:5px 0;color:#334155}.map-list-row{border-bottom:1px solid var(--border);padding:12px 0}.map-list-row strong{display:inline-block;margin-right:8px}.map-list-row small{display:block;color:var(--muted);margin-top:4px}@keyframes ssPulse{0%{box-shadow:0 0 0 0 rgba(217,4,41,.55),0 10px 24px rgba(0,0,0,.35)}70%{box-shadow:0 0 0 13px rgba(217,4,41,0),0 10px 24px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 rgba(217,4,41,0),0 10px 24px rgba(0,0,0,.35)}}@media(max-width:1150px){.map-command-grid{grid-template-columns:repeat(2,1fr)}.operations-map{height:520px}}@media(max-width:680px){.map-command-grid{grid-template-columns:1fr}.operations-map{height:430px}.map-legend{justify-content:flex-start}}

/* Breakdown_OPERATIONS_MAP_LEAFLET_FIX
   Leaflet requires its own CSS. These rules also protect the portal styling
   from making Leaflet tiles or marker icons stretch into large blocks. */
.operations-map-panel,
.map-panel,
.control-room-map-panel {
    overflow: hidden;
}

#securityOperationsMap,
#operationsMap,
.security-operations-map,
.operations-map,
.map-canvas {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 62vh;
    max-height: 760px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #dbeafe;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    font-family: inherit;
    border-radius: 18px;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-tile {
    width: 256px !important;
    height: 256px !important;
    max-width: none !important;
    max-height: none !important;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block;
    max-width: none !important;
    max-height: none !important;
}

.security-map-marker {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px;
    border: 3px solid #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}

.security-map-marker.alert { background: #d90429; }
.security-map-marker.ready { background: #16a34a; }
.security-map-marker.busy { background: #f59e0b; }
.security-map-marker.stale,
.security-map-marker.offline { background: #64748b; }



/* Phase 4 map marker sizing fix */
.operations-map {
  position: relative;
  isolation: isolate;
}
.operations-map .leaflet-container,
.operations-map.leaflet-container {
  width: 100%;
  height: 620px;
  border-radius: 22px;
  font-family: Arial, Helvetica, sans-serif;
}
.operations-map .leaflet-pane,
.operations-map .leaflet-tile,
.operations-map .leaflet-marker-icon,
.operations-map .leaflet-marker-shadow,
.operations-map .leaflet-tile-container,
.operations-map .leaflet-pane > svg,
.operations-map .leaflet-pane > canvas,
.operations-map .leaflet-zoom-box,
.operations-map .leaflet-image-layer,
.operations-map .leaflet-layer {
  max-width: none !important;
  max-height: none !important;
}
.operations-map .leaflet-interactive {
  cursor: pointer;
}
.operations-map .leaflet-popup-content-wrapper {
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28);
}
.operations-map .leaflet-popup-content {
  margin: 14px 16px;
  min-width: 220px;
}
.operations-map .leaflet-control-attribution {
  font-size: 10px;
}


/* Phase 4 stable small map markers */
.operations-map {
  position: relative;
  width: 100%;
  height: 620px;
  border-radius: 22px;
  overflow: hidden;
}
.operations-map.leaflet-container,
.operations-map .leaflet-container {
  font-family: Arial, Helvetica, sans-serif;
}
.operations-map .leaflet-pane,
.operations-map .leaflet-tile,
.operations-map .leaflet-marker-icon,
.operations-map .leaflet-marker-shadow,
.operations-map .leaflet-tile-container,
.operations-map .leaflet-pane > svg,
.operations-map .leaflet-pane > canvas,
.operations-map .leaflet-zoom-box,
.operations-map .leaflet-image-layer,
.operations-map .leaflet-layer {
  max-width: none !important;
  max-height: none !important;
}
.ss-small-div-icon {
  background: transparent !important;
  border: 0 !important;
}
.ss-small-marker {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.38) !important;
}
.ss-alert-marker { background: #d90429 !important; }
.ss-ready-marker { background: #16a34a !important; }
.ss-busy-marker { background: #f59e0b !important; color: #111827 !important; }
.ss-stale-marker { background: #f97316 !important; color: #111827 !important; }
.ss-off-marker { background: #64748b !important; }
.operations-map .leaflet-popup-content-wrapper {
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28);
}
.operations-map .leaflet-popup-content {
  margin: 14px 16px;
  min-width: 220px;
}
.operations-map .leaflet-control-attribution { font-size: 10px; }

/* Phase 16: closed alert detail view */
.closed-incident-hero {
  background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
  border-color: #dbe4ef !important;
}
.closed-incident-panel {
  border-left: 5px solid #64748b;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}
.closed-action-notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #dbe4ef;
  color: #334155;
  margin-bottom: 16px;
}
.closed-action-notice strong {
  color: #0f172a;
}
.closed-action-notice span {
  color: #64748b;
  line-height: 1.4;
}
.small-notice {
  margin-bottom: 14px;
}
.workflow-strip-fixed .workflow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}
.workflow-strip-fixed .workflow-step span {
  grid-row: 1 / span 2;
}
.workflow-strip-fixed .workflow-step strong,
.workflow-strip-fixed .workflow-step small {
  min-width: 0;
}
@media(max-width:900px){.workflow-strip-fixed .workflow-step{grid-template-columns:auto 1fr}}
/* STREET SENTINEL Breakdown PREMIUM SIDEBAR — SLIM ACCENT LINES
   Full safe CSS override only. Keeps the wrapped card style, but makes the coloured
   edge lines thinner and neater so they do not dominate the sidebar.
*/

.app-shell {
    grid-template-columns: 292px 1fr;
}

.app-shell .sidebar {
    width: 292px !important;
    min-width: 292px !important;
    padding: 24px 18px !important;
    gap: 20px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(217,4,41,.14), transparent 30%),
        linear-gradient(180deg, #071b33 0%, #06172c 100%) !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 50 !important;
    box-shadow: 10px 0 38px rgba(7,27,51,.22) !important;
}

.app-shell .sidebar-brand {
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 12px 28px rgba(0,0,0,.14) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.app-shell .sidebar .brand-mark,
.app-shell .sidebar-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 19px !important;
    background: rgba(255,255,255,.10) !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
}

.app-shell .sidebar .brand-mark img,
.app-shell .sidebar-logo img {
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
}

.app-shell .sidebar-brand strong {
    font-size: 20px !important;
    line-height: 1.06 !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
}

.app-shell .sidebar-brand span {
    color: rgba(226,232,240,.88) !important;
    font-size: 13px !important;
    line-height: 1.14 !important;
}

.app-shell .sidebar-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
}

.app-shell .sidebar-nav .nav-group-label,
.app-shell .sidebar .nav-section {
    margin: 20px 10px 6px !important;
    color: rgba(226,232,240,.60) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

/* Breakdown portal may use either .sidebar-nav or .nav */
.app-shell .sidebar-nav a,
.app-shell .sidebar .nav a {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    min-height: 74px !important;
    width: 100% !important;
    padding: 15px 20px 14px 20px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    border: 1px solid rgba(129,160,202,.32) !important;
    background:
        linear-gradient(180deg, rgba(23,47,76,.98) 0%, rgba(13,37,65,.98) 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 18px rgba(0,0,0,.16) !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

/* Slim wrapped accent: much thinner than before */
.app-shell .sidebar-nav a::before,
.app-shell .sidebar .nav a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    border-radius: 22px 22px 0 0 !important;
    background: linear-gradient(90deg, #8fa5bd 0%, #5c7798 100%) !important;
    opacity: .92 !important;
    pointer-events: none !important;
}

/* Soft inner highlight below the slim line */
.app-shell .sidebar-nav a::after,
.app-shell .sidebar .nav a::after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: rgba(255,255,255,.08) !important;
    pointer-events: none !important;
}

.app-shell .sidebar-nav a,
.app-shell .sidebar-nav a span,
.app-shell .sidebar .nav a,
.app-shell .sidebar .nav a span {
    font-size: 20px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.32) !important;
}

.app-shell .sidebar-nav a small,
.app-shell .sidebar .nav a small {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(226,232,240,.80) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}

.app-shell .sidebar-nav a:hover,
.app-shell .sidebar .nav a:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(146,190,245,.45) !important;
    box-shadow:
        0 12px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Active: keep premium colour, but make the line slim */
.app-shell .sidebar-nav a.active,
.app-shell .sidebar .nav a.active {
    background: linear-gradient(135deg, #d90429 0%, rgba(122,45,95,.92) 55%, rgba(37,99,235,.72) 100%) !important;
    border-color: rgba(146,190,245,.56) !important;
    box-shadow:
        0 13px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.app-shell .sidebar-nav a.active::before,
.app-shell .sidebar .nav a.active::before {
    height: 6px !important;
    background: linear-gradient(90deg, #ff174d 0%, #ff658f 45%, #4f9dff 100%) !important;
    opacity: .96 !important;
}

/* Category-specific slim colours. These only affect the line, not the whole card. */
.app-shell .sidebar-nav a[href*="alert"]::before,
.app-shell .sidebar .nav a[href*="alert"]::before,
.app-shell .sidebar-nav a[href*="incident"]::before,
.app-shell .sidebar .nav a[href*="incident"]::before {
    background: linear-gradient(90deg, #d90429 0%, #60a5fa 100%) !important;
}

.app-shell .sidebar-nav a[href*="map"]::before,
.app-shell .sidebar .nav a[href*="map"]::before,
.app-shell .sidebar-nav a[href*="operations"]::before,
.app-shell .sidebar .nav a[href*="operations"]::before {
    background: linear-gradient(90deg, #0f8a5f 0%, #38bdf8 100%) !important;
}

.app-shell .sidebar-nav a[href*="audit"]::before,
.app-shell .sidebar .nav a[href*="audit"]::before,
.app-shell .sidebar-nav a[href*="staff"]::before,
.app-shell .sidebar .nav a[href*="staff"]::before,
.app-shell .sidebar-nav a[href*="access"]::before,
.app-shell .sidebar .nav a[href*="access"]::before {
    background: linear-gradient(90deg, #8fa5bd 0%, #5c7798 100%) !important;
}

.app-shell .sidebar-user {
    margin-top: 18px !important;
    border-radius: 22px !important;
    padding: 16px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

.app-shell .logout-form button {
    border-radius: 22px !important;
    min-height: 54px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

@media (max-width: 1150px) {
    .app-shell {
        grid-template-columns: 1fr !important;
    }

    .app-shell .sidebar {
        width: auto !important;
        min-width: 0 !important;
    }

    .app-shell .sidebar-nav,
    .app-shell .sidebar .nav {
        grid-template-columns: 1fr !important;
    }
}


/* BREAKDOWN PORTAL 2FA PAGES ONLY — does not touch sidebar */
.two-factor-card {
    width: min(560px, calc(100vw - 28px));
}

.two-factor-qr {
    display: grid;
    place-items: center;
    padding: 18px;
    margin: 18px 0;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
}

.two-factor-qr img {
    width: min(260px, 80vw);
    height: auto;
    border-radius: 14px;
}

.two-factor-manual-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    padding: 12px;
    border-radius: 14px;
    background: #eef4fb;
    border: 1px solid #dbe5f1;
    color: #0f172a;
    font-weight: 850;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    font-weight: 950;
    text-align: center;
}

@media(max-width:680px) {
    .recovery-code-grid {
        grid-template-columns: 1fr;
    }
}


/* Breakdown STAFF SYNC + REMOVE POLISH */
.form-helper-text {
  margin: 6px 0 16px;
  color: var(--muted);
  line-height: 1.45;
}
.actions form button.danger,
button.danger.btn-small {
  background: var(--red2);
  color: #ffffff;
}


/* FIELD RESPONDER APP ACCESS CONTROLS */
.checkbox-card {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color: var(--text) !important;
}

.checkbox-card input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-top: 3px !important;
  flex: 0 0 auto !important;
}

.checkbox-card span {
  display: grid !important;
  gap: 4px !important;
}

.checkbox-card strong {
  color: #0f172a !important;
  font-size: 14px !important;
}

.checkbox-card small {
  color: var(--muted) !important;
  line-height: 1.35 !important;
}

.form-footer-note {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #dbe4ef;
  color: #334155;
  display: grid;
  gap: 4px;
  line-height: 1.4;
}

.form-footer-note strong {
  color: #0f172a;
}

/* BREAKDOWN PORTAL PREMIUM LOGIN STANDARD v1 */
.security-login-standard-body {
    min-height: 100vh !important;
    padding: 28px !important;
    display: grid !important;
    place-items: center !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(217,4,41,.28), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(47,128,237,.26), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(16,185,129,.10), transparent 34%),
        linear-gradient(135deg, #061426 0%, #071b33 44%, #101932 100%) !important;
    color: #ffffff !important;
}

.security-login-standard-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .45;
}

.security-login-standard-body::after {
    content: "STREET\A SENTINEL";
    white-space: pre;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(58px, 10vw, 160px);
    line-height: .78;
    font-weight: 950;
    letter-spacing: -.07em;
    color: rgba(255,255,255,.035);
    text-align: center;
    pointer-events: none;
}

.security-login-page {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .72fr);
    gap: 28px;
    align-items: stretch;
}

.security-login-brand-panel,
.security-login-card {
    border: 1px solid rgba(191,219,254,.26);
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
    border-radius: 34px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.security-login-brand-panel {
    min-height: 610px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.security-login-brand-card {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 30px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18);
}

.security-login-logo-wrap,
.security-login-mini-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    font-weight: 950;
    background: linear-gradient(135deg, rgba(217,4,41,.95), rgba(17,24,39,.95));
}

.security-login-logo-wrap {
    width: 82px;
    height: 82px;
    border-radius: 25px;
}

.security-login-logo-wrap img {
    width: 86%;
    height: 86%;
    object-fit: contain;
}

.security-login-logo-wrap.logo-fallback {
    font-size: 28px;
}

.security-login-kicker {
    color: rgba(226,232,240,.72);
    font-weight: 950;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.security-login-brand-card h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 950;
    text-shadow: 0 3px 0 rgba(0,0,0,.28);
}

.security-login-brand-card p {
    margin: 8px 0 0;
    color: rgba(226,232,240,.92);
    font-size: 18px;
}

.security-login-copy {
    max-width: 690px;
    padding: 22px 6px;
}

.security-login-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(217,4,41,.20);
    color: #fecdd3;
    border: 1px solid rgba(251,113,133,.34);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.security-login-copy h2 {
    margin: 20px 0 10px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 72px);
    line-height: .91;
    letter-spacing: -.065em;
    font-weight: 950;
    text-shadow: 0 3px 0 rgba(0,0,0,.24);
}

.security-login-copy p {
    margin: 0;
    max-width: 610px;
    color: rgba(226,232,240,.82);
    font-size: 18px;
    line-height: 1.48;
}

.security-login-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.security-login-feature-grid div {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(191,219,254,.20);
    background: rgba(9,25,45,.44);
}

.security-login-feature-grid strong,
.security-login-feature-grid span {
    display: block;
}

.security-login-feature-grid strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    margin-bottom: 6px;
}

.security-login-feature-grid span {
    color: rgba(226,232,240,.78);
    line-height: 1.35;
}

.security-login-card {
    padding: 30px;
    align-self: center;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
}

.security-login-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.security-login-mini-mark {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    font-size: 18px;
}

.security-login-card-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 32px;
    letter-spacing: -.045em;
    font-weight: 950;
}

.security-login-card-header p {
    margin: 5px 0 0;
    color: rgba(226,232,240,.78);
}

.security-login-form {
    display: grid;
    gap: 15px;
}

.security-login-form label {
    display: grid;
    gap: 8px;
    color: rgba(226,232,240,.86);
    font-weight: 900;
}

.security-login-form label > span {
    font-size: 13px;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.security-login-form input {
    height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(191,219,254,.26);
    background: rgba(255,255,255,.94);
    color: #0f172a;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.security-login-form input:focus {
    outline: none;
    border-color: rgba(96,165,250,.78);
    box-shadow: 0 0 0 4px rgba(59,130,246,.20);
}

.security-password-field {
    position: relative;
}

.security-password-field input {
    padding-right: 82px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 14px;
    background: #eaf0f7;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
}

.security-login-submit {
    width: 100%;
    min-height: 56px;
    border-radius: 20px;
    margin-top: 4px;
    color: #ffffff;
    background: linear-gradient(135deg, #d90429 0%, #a9124d 50%, #2563eb 100%);
    box-shadow: 0 14px 28px rgba(217,4,41,.26), inset 0 1px 0 rgba(255,255,255,.14);
    font-size: 16px;
    font-weight: 950;
}

.security-login-submit:hover {
    filter: brightness(1.06);
}

.security-login-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(8,19,31,.42);
    border: 1px solid rgba(191,219,254,.18);
    display: grid;
    gap: 5px;
}

.security-login-note strong {
    color: #ffffff;
    font-size: 13px;
}

.security-login-note span {
    color: rgba(226,232,240,.72);
    line-height: 1.4;
}

.security-login-card .alert {
    border-radius: 18px;
    margin-bottom: 18px;
}

@media (max-width: 980px) {
    .security-login-page {
        grid-template-columns: 1fr;
    }

    .security-login-brand-panel {
        min-height: auto;
        gap: 30px;
    }

    .security-login-card {
        align-self: stretch;
    }
}

@media (max-width: 640px) {
    .security-login-standard-body {
        padding: 16px !important;
    }

    .security-login-brand-panel,
    .security-login-card {
        border-radius: 26px;
        padding: 22px;
    }

    .security-login-brand-card {
        align-items: flex-start;
    }

    .security-login-logo-wrap {
        width: 62px;
        height: 62px;
        border-radius: 20px;
    }

    .security-login-feature-grid {
        grid-template-columns: 1fr;
    }
}


/* BREAKDOWN PORTAL CLEAN LOGIN v1.2 - hard scoped */
body.breakdown-login-body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 28px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(217,4,41,.30), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(47,128,237,.30), transparent 32%),
    linear-gradient(135deg, #061426 0%, #071b33 48%, #101932 100%) !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  overflow-x: hidden !important;
}
body.breakdown-login-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .42;
}
body.breakdown-login-body::after {
  content: "STREET\A SENTINEL";
  white-space: pre;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(58px, 10vw, 150px);
  line-height: .78;
  font-weight: 950;
  letter-spacing: -.07em;
  color: rgba(255,255,255,.035);
  text-align: center;
  pointer-events: none;
}
.breakdown-login-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .72fr);
  gap: 28px;
  align-items: center;
}
.breakdown-login-hero,
.breakdown-login-card {
  border: 1px solid rgba(191,219,254,.26);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: 34px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.breakdown-login-hero {
  min-height: 610px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.breakdown-login-brand-card {
  width: min(540px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18);
}
.breakdown-login-logo,
.breakdown-login-mini {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  font-weight: 950;
  background: linear-gradient(135deg, rgba(217,4,41,.95), rgba(37,99,235,.95));
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
}
.breakdown-login-logo { width: 82px; height: 82px; border-radius: 25px; font-size: 24px; }
.breakdown-login-mini { width: 58px; height: 58px; border-radius: 20px; font-size: 18px; }
.breakdown-login-kicker {
  color: rgba(226,232,240,.72);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.breakdown-login-brand-card h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.breakdown-login-brand-card p { margin: 8px 0 0; color: rgba(226,232,240,.92); font-size: 18px; }
.breakdown-login-copy { max-width: 690px; padding: 22px 6px; }
.breakdown-login-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(217,4,41,.20);
  color: #fecdd3;
  border: 1px solid rgba(251,113,133,.34);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.breakdown-login-copy h2 {
  margin: 20px 0 10px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .91;
  letter-spacing: -.065em;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0,0,0,.24);
}
.breakdown-login-copy p {
  margin: 0;
  max-width: 650px;
  color: rgba(226,232,240,.86);
  font-size: 18px;
  line-height: 1.48;
}
.breakdown-login-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.breakdown-login-feature-grid div {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(191,219,254,.20);
  background: rgba(9,25,45,.44);
}
.breakdown-login-feature-grid strong,
.breakdown-login-feature-grid span { display: block; }
.breakdown-login-feature-grid strong { color: #ffffff; font-size: 16px; font-weight: 950; margin-bottom: 6px; }
.breakdown-login-feature-grid span { color: rgba(226,232,240,.78); line-height: 1.35; }
.breakdown-login-card {
  padding: 30px;
  align-self: center;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
}
.breakdown-login-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.breakdown-login-card-header h2 { margin: 0; color: #fff; font-size: 32px; letter-spacing: -.045em; font-weight: 950; }
.breakdown-login-card-header p { margin: 5px 0 0; color: rgba(226,232,240,.78); }
.breakdown-login-form { display: grid; gap: 15px; }
.breakdown-login-form label { display: grid; gap: 8px; color: rgba(226,232,240,.86); font-weight: 900; }
.breakdown-login-form label > span { font-size: 13px; letter-spacing: .035em; text-transform: uppercase; }
.breakdown-login-form input {
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(191,219,254,.26);
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-size: 16px;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.breakdown-login-form input:focus { outline: none; border-color: rgba(96,165,250,.78); box-shadow: 0 0 0 4px rgba(59,130,246,.20); }
.breakdown-password-field { position: relative; }
.breakdown-password-field input { padding-right: 82px; }
.breakdown-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 14px;
  background: #eaf0f7;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  border: 0;
}
.breakdown-login-submit {
  width: 100%;
  min-height: 56px;
  border-radius: 20px;
  margin-top: 4px;
  color: #ffffff;
  background: linear-gradient(135deg, #d90429 0%, #a9124d 50%, #2563eb 100%);
  box-shadow: 0 14px 28px rgba(217,4,41,.26), inset 0 1px 0 rgba(255,255,255,.14);
  font-size: 16px;
  font-weight: 950;
  border: 0;
}
.breakdown-login-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(8,19,31,.42);
  border: 1px solid rgba(191,219,254,.18);
  display: grid;
  gap: 5px;
}
.breakdown-login-note strong { color: #ffffff; font-size: 13px; }
.breakdown-login-note span { color: rgba(226,232,240,.72); line-height: 1.4; }
.breakdown-login-card .alert { border-radius: 18px; margin-bottom: 18px; }
@media (max-width: 980px) {
  .breakdown-login-shell { grid-template-columns: 1fr; }
  .breakdown-login-hero { min-height: auto; gap: 30px; }
  .breakdown-login-card { align-self: stretch; }
}
@media (max-width: 640px) {
  body.breakdown-login-body { padding: 16px !important; }
  .breakdown-login-hero,.breakdown-login-card { border-radius: 26px; padding: 22px; }
  .breakdown-login-logo { width: 62px; height: 62px; border-radius: 20px; }
  .breakdown-login-feature-grid { grid-template-columns: 1fr; }
}


/* BREAKDOWN PORTAL CLEAN LOGIN v1.1 - hard scoped */
body.breakdown-login-body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 28px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(245,158,11,.30), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(47,128,237,.28), transparent 32%),
    linear-gradient(135deg, #061426 0%, #071b33 48%, #101932 100%) !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  overflow-x: hidden !important;
}
body.breakdown-login-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .42;
}
body.breakdown-login-body::after {
  content: "ROADSIDE\A RESPONSE";
  white-space: pre;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(58px, 10vw, 150px);
  line-height: .78;
  font-weight: 950;
  letter-spacing: -.07em;
  color: rgba(255,255,255,.035);
  text-align: center;
  pointer-events: none;
}
.breakdown-login-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .72fr);
  gap: 28px;
  align-items: center;
}
.breakdown-login-hero,
.breakdown-login-card {
  border: 1px solid rgba(191,219,254,.26);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: 34px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.breakdown-login-hero {
  min-height: 610px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.breakdown-login-brand-card {
  width: min(540px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18);
}
.breakdown-login-logo,
.breakdown-login-mini {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  font-weight: 950;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(37,99,235,.95));
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
}
.breakdown-login-logo { width: 82px; height: 82px; border-radius: 25px; font-size: 24px; }
.breakdown-login-mini { width: 58px; height: 58px; border-radius: 20px; font-size: 18px; }
.breakdown-login-kicker {
  color: rgba(226,232,240,.72);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.breakdown-login-brand-card h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.breakdown-login-brand-card p { margin: 8px 0 0; color: rgba(226,232,240,.92); font-size: 18px; }
.breakdown-login-copy { max-width: 690px; padding: 22px 6px; }
.breakdown-login-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(245,158,11,.20);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,.34);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.breakdown-login-copy h2 {
  margin: 20px 0 10px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .91;
  letter-spacing: -.065em;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0,0,0,.24);
}
.breakdown-login-copy p {
  margin: 0;
  max-width: 650px;
  color: rgba(226,232,240,.86);
  font-size: 18px;
  line-height: 1.48;
}
.breakdown-login-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.breakdown-login-feature-grid div { padding: 18px; border-radius: 24px; border: 1px solid rgba(191,219,254,.20); background: rgba(9,25,45,.44); }
.breakdown-login-feature-grid strong,.breakdown-login-feature-grid span { display: block; }
.breakdown-login-feature-grid strong { color: #ffffff; font-size: 16px; font-weight: 950; margin-bottom: 6px; }
.breakdown-login-feature-grid span { color: rgba(226,232,240,.78); line-height: 1.35; }
.breakdown-login-card { padding: 30px; align-self: center; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.075)); }
.breakdown-login-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.breakdown-login-card-header h2 { margin: 0; color: #fff; font-size: 32px; letter-spacing: -.045em; font-weight: 950; }
.breakdown-login-card-header p { margin: 5px 0 0; color: rgba(226,232,240,.78); }
.breakdown-login-form { display: grid; gap: 15px; }
.breakdown-login-form label { display: grid; gap: 8px; color: rgba(226,232,240,.86); font-weight: 900; }
.breakdown-login-form label > span { font-size: 13px; letter-spacing: .035em; text-transform: uppercase; }
.breakdown-login-form input {
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(191,219,254,.26);
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-size: 16px;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.breakdown-login-form input:focus { outline: none; border-color: rgba(245,158,11,.78); box-shadow: 0 0 0 4px rgba(245,158,11,.20); }
.breakdown-password-field { position: relative; }
.breakdown-password-field input { padding-right: 82px; }
.breakdown-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 14px;
  background: #eaf0f7;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  border: 0;
}
.breakdown-login-submit {
  width: 100%;
  min-height: 56px;
  border-radius: 20px;
  margin-top: 4px;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 48%, #2563eb 100%);
  box-shadow: 0 14px 28px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.14);
  font-size: 16px;
  font-weight: 950;
  border: 0;
}
.breakdown-login-note { margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: rgba(8,19,31,.42); border: 1px solid rgba(191,219,254,.18); display: grid; gap: 5px; }
.breakdown-login-note strong { color: #ffffff; font-size: 13px; }
.breakdown-login-note span { color: rgba(226,232,240,.72); line-height: 1.4; }
.breakdown-login-card .alert { border-radius: 18px; margin-bottom: 18px; }
@media (max-width: 980px) { .breakdown-login-shell { grid-template-columns: 1fr; } .breakdown-login-hero { min-height: auto; gap: 30px; } .breakdown-login-card { align-self: stretch; } }
@media (max-width: 640px) { body.breakdown-login-body { padding: 16px !important; } .breakdown-login-hero,.breakdown-login-card { border-radius: 26px; padding: 22px; } .breakdown-login-logo { width: 62px; height: 62px; border-radius: 20px; } .breakdown-login-feature-grid { grid-template-columns: 1fr; } }