:root {
  --nav:#102746; --blue:#175cd3; --canvas:#f5f7fb; --surface:#fff;
  --ink:#172b4d; --muted:#667085; --line:#dfe5ec; --green:#067647; --red:#b42318;
}
* { box-sizing:border-box }
body { margin:0; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--canvas) }

/* Authentification */
.auth-body { min-height:100vh }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(330px,43%) 1fr }
.auth-brand { background:linear-gradient(145deg,#102746,#173b67); color:#fff; padding:44px 8vw 36px 4vw; display:flex; flex-direction:column }
.brand-line { display:flex; align-items:center; gap:12px }
.brand-mark { width:46px; height:46px; background:var(--blue); border-radius:12px; display:grid; place-items:center; font-weight:800 }
.brand-line strong,.brand-line small { display:block }
.brand-line strong { font-size:20px }
.brand-line small { color:#9fb3cc; margin-top:3px }
.auth-message { margin:auto 0; max-width:480px }
.auth-message>p,.eyebrow { font-size:11px; color:#78aef6; font-weight:800; letter-spacing:1.2px }
.auth-message h1 { font-size:40px; line-height:1.1; letter-spacing:-1.2px; margin:16px 0 }
.auth-message span { color:#c1d0e2; line-height:1.7 }
.privacy-line { color:#78d7b8; font-size:12px }
.auth-form-wrap { display:grid; place-items:center; padding:30px }
.auth-form { width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:0 14px 38px rgba(16,39,70,.08) }
.auth-form .eyebrow { color:var(--blue); margin:0 }
.auth-form h2 { font-size:29px; margin:8px 0 }
.subtitle { color:var(--muted); margin:0 0 25px }
.auth-form label { display:block; font-size:12px; font-weight:700; margin:17px 0 }
.auth-form input:not([type=hidden]) { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #cbd5e1; border-radius:9px; font:inherit; outline:none }
.auth-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #dbeafe }
.auth-form button { width:100%; border:0; border-radius:9px; padding:13px; background:var(--blue); color:#fff; font-weight:800; cursor:pointer }
.help { display:block; text-align:center; color:var(--muted); line-height:1.5; margin-top:17px }
.error { padding:11px 13px; border-radius:8px; background:#fef3f2; color:var(--red); font-size:12px; margin-top:18px }
.bootstrap-form { width:min(500px,100%) }
.field-help { display:block; color:var(--muted); font-size:10px; margin:-10px 0 0 }
.bootstrap-complete { width:min(620px,100%) }
.bootstrap-complete h3 { margin:21px 0 9px; font-size:13px }
.secret-block,.provisioning-details code { display:block; overflow-wrap:anywhere; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font:12px/1.5 Consolas,monospace }
.provisioning-details { margin-top:10px; color:var(--muted); font-size:10px }
.provisioning-details summary { cursor:pointer; font-weight:700 }
.provisioning-details code { margin-top:8px; color:var(--ink) }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0; list-style:none }
.recovery-grid li { padding:9px; border:1px solid var(--line); border-radius:7px; background:#f8fafc; text-align:center }
.bootstrap-login { width:100%; margin-top:18px; padding:13px }

/* Structure du portail */
.portal-body { display:grid; grid-template-columns:260px 1fr; min-height:100vh }
.portal-nav { background:var(--nav); color:#fff; padding:26px 20px; display:flex; flex-direction:column }
.portal-links { display:flex; flex-direction:column; gap:5px; margin-top:38px }
.portal-links a,.future-link { display:flex; align-items:center; gap:10px; border-radius:9px; padding:12px; color:#b9c8dc; text-decoration:none; font-size:13px; font-weight:650 }
.portal-links a:hover,.portal-links a.active { background:#1e416d; color:#fff }
.future-link { opacity:.52 }
.privacy-note { margin-top:auto; border-top:1px solid #2f4a6b; padding:18px 0 14px; display:flex; gap:9px; color:#78d7b8 }
.privacy-note strong,.privacy-note small { display:block }
.privacy-note strong { font-size:10px }
.privacy-note small { color:#8fa5bf; font-size:9px; line-height:1.5; margin-top:4px }
.portal-account { border-top:1px solid #2f4a6b; padding-top:18px }
.portal-account b,.portal-account small { display:block }
.portal-account small { color:#8fa5bf; margin-top:4px }
.portal-main { min-width:0 }
.portal-main header { height:70px; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:0 30px; position:sticky; top:0; z-index:10 }
.portal-main header button { background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 13px; color:var(--ink); font-weight:700; cursor:pointer }
.sandbox { background:#ecfdf3; color:var(--green); border-radius:20px; padding:7px 10px; font-size:10px; font-weight:800 }
.portal-content { padding:32px; max-width:1500px; margin:0 auto }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px }
.page-heading h1 { font-size:30px; letter-spacing:-.7px; margin:6px 0 }
.page-heading p { color:var(--muted); margin:0 }
.eyebrow { color:var(--blue)!important }
.panel,.security-grid article { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 3px 10px rgba(16,39,70,.035) }
.security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px }
.security-grid article { padding:20px }
.security-grid b,.security-grid span { display:block }
.security-grid span { color:var(--muted); font-size:12px; line-height:1.5; margin-top:8px }

/* Utilisateurs */
.filter-bar { background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; align-items:center; gap:10px; margin-bottom:14px }
.search { border:1px solid var(--line); border-radius:8px; padding:0 10px; display:flex; align-items:center; gap:8px; flex:1; min-width:220px }
.search input { border:0; background:transparent; outline:0; width:100%; height:38px; font:inherit; color:var(--ink) }
select { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:10px; font:inherit }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:10px 14px; font-size:11px; font-weight:750; text-decoration:none; white-space:nowrap }
.primary-button { border:1px solid var(--blue); background:var(--blue); color:#fff }
.secondary-button { border:1px solid var(--line); background:#fff; color:var(--ink) }
.table-panel { overflow:hidden }
.table-summary { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px }
.table-summary span { color:var(--muted); font-size:11px }
.table-scroll { overflow:auto }
table { width:100%; border-collapse:collapse; white-space:nowrap }
th { text-align:left; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.45px; background:var(--canvas); padding:12px 15px }
td { padding:14px 15px; border-top:1px solid var(--line); font-size:11px }
.person { display:flex; align-items:center; gap:10px }
.person>span { width:35px; height:35px; border-radius:9px; background:#eaf2ff; color:var(--blue); font-weight:800; display:grid; place-items:center }
.person strong,.person small { display:block }
.person small { color:var(--muted); font-size:9px; margin-top:3px }
.row-action { color:var(--blue); font-weight:750; text-decoration:none }
.badge { display:inline-flex; border-radius:20px; padding:5px 8px; font-size:9px; font-weight:800 }
.success-badge { background:#ecfdf3; color:var(--green) }
.danger-badge { background:#fef3f2; color:var(--red) }
.warning-badge { background:#fffaeb; color:#b54708 }
.neutral-badge { background:#eff4ff; color:var(--blue) }
.muted { color:var(--muted) }
.block { display:block; margin-top:4px }
.pagination { padding:13px 16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px }
.pagination a,.pagination .disabled { display:inline-block; border:1px solid var(--line); border-radius:7px; padding:7px 10px; margin-left:5px; text-decoration:none; color:var(--ink); background:#fff }
.pagination .disabled { opacity:.42 }
.empty-state { padding:30px; text-align:center; color:var(--muted) }
.empty-state strong,.empty-state span { display:block }
.empty-state span { font-size:10px; margin-top:7px }
.back-link { color:var(--blue); text-decoration:none; font-weight:700; font-size:11px }
.user-heading { margin-top:18px }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.detail-card { padding:20px }
.detail-card h2 { font-size:15px; margin:0 0 12px }
.detail-card dl { margin:0 }
.detail-card dl div { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:12px 0; font-size:11px }
.detail-card dt { color:var(--muted) }
.detail-card dd { margin:0; text-align:right; font-weight:700 }
.section-panel { margin-top:17px }
.notice { padding:12px 15px; border-radius:10px; margin-bottom:14px; font-size:11px; font-weight:700 }
.success-notice { background:#ecfdf3; border:1px solid #abefc6; color:var(--green) }
.warning-notice { background:#fffaeb; border:1px solid #fedf89; color:#7a2e0e }
.warning-notice a { color:inherit; font-weight:800; margin-left:6px }
.device-name strong,.device-name small { display:block }
.device-name small { color:var(--muted); margin-top:4px }
.account-link { color:var(--ink); font-weight:750; text-decoration:none }
.account-link:hover { color:var(--blue) }
.row-actions { display:flex; align-items:center; gap:10px }
.row-actions details { position:relative }
.row-actions summary { color:var(--blue); font-weight:750; cursor:pointer; list-style:none }
.row-actions summary::-webkit-details-marker { display:none }
.inline-action { position:absolute; right:0; top:25px; z-index:5; width:285px; display:flex; gap:7px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 10px 28px rgba(16,39,70,.16) }
.inline-action input { min-width:0; flex:1; border:1px solid var(--line); border-radius:7px; padding:8px }
.danger-link { color:var(--red); text-decoration:none; font-weight:750 }
.destructive-heading { margin-top:18px }
.confirmation-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr); gap:17px; align-items:start }
.sensitive-form { padding:22px }
.sensitive-form h2 { margin:0 0 6px; font-size:17px }
.sensitive-form>p { color:var(--muted); margin:0 0 18px; font-size:11px }
.sensitive-form label { display:block; font-size:11px; font-weight:750; margin-top:16px }
.sensitive-form textarea,.sensitive-form input:not([type=checkbox]) { width:100%; display:block; margin-top:7px; border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit }
.sensitive-form textarea { min-height:92px; resize:vertical }
.reauth-box { background:#fffaeb; border:1px solid #fedf89; border-radius:10px; padding:14px; margin-top:18px }
.reauth-box strong,.reauth-box span { display:block }
.reauth-box span { color:#93370d; font-size:10px; margin-top:4px }
.confirmation-check { display:flex!important; align-items:flex-start; gap:8px; font-weight:600!important }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px }
.danger-button { border:1px solid var(--red); background:var(--red); color:#fff; border-radius:8px; padding:10px 14px; font-weight:750; cursor:pointer }
.licence-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px }
.licence-metrics article { background:#fff; border:1px solid var(--line); border-radius:13px; padding:17px; box-shadow:0 3px 10px rgba(16,39,70,.035) }
.licence-metrics span,.licence-metrics strong,.licence-metrics small { display:block }
.licence-metrics span { color:var(--muted); font-size:11px; font-weight:700 }
.licence-metrics strong { font-size:26px; margin:10px 0 5px }
.licence-metrics small { color:var(--muted); font-size:9px }
.warning-text { color:#b54708!important }
.violet-badge { background:#f4f3ff; color:#6938ef }
.licence-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.schema-note { background:#f4f3ff; border:1px solid #d9d6fe; color:#5925dc; border-radius:9px; padding:12px; margin-top:15px }
.schema-note strong,.schema-note span { display:block }
.schema-note span { font-size:10px; line-height:1.5; margin-top:5px }
.payment-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px }
.payment-metrics article { background:#fff; border:1px solid var(--line); border-radius:13px; padding:17px }
.payment-metrics span,.payment-metrics strong { display:block }
.payment-metrics span { color:var(--muted); font-size:11px; font-weight:700 }
.payment-metrics strong { font-size:26px; margin-top:10px }
.email-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px }
.email-metrics article { background:#fff; border:1px solid var(--line); border-radius:13px; padding:17px }
.email-metrics span,.email-metrics strong,.email-metrics small { display:block }
.email-metrics span { color:var(--muted); font-size:11px; font-weight:700 }
.email-metrics strong { font-size:26px; margin:10px 0 5px }
.email-metrics small { color:var(--muted); font-size:9px }
.email-filters label { color:var(--muted); font-size:10px; font-weight:700; display:flex; align-items:center; gap:7px }
.email-filters label:first-child { flex:1 }
.email-filters input { min-width:220px; width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit; color:var(--ink) }
.warning-callout { background:#fffaeb; border:1px solid #fedf89; border-radius:10px; padding:14px; margin-bottom:18px; color:#7a2e0e }
.warning-callout p { margin:6px 0 0; font-size:11px; line-height:1.5 }
.payment-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.timeline-panel { overflow:hidden }
.payment-timeline { padding:2px 20px }
.payment-event { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start; padding:17px 0; border-bottom:1px solid var(--line) }
.payment-event:last-child { border-bottom:0 }
.timeline-dot { width:11px; height:11px; margin-top:2px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px #eaf2ff }
.payment-event strong,.payment-event p,.payment-event small { display:block }
.payment-event p { margin:5px 0; font-size:10px }
.payment-event small,.payment-event time { color:var(--muted); font-size:9px }
.payment-event time { white-space:nowrap }
.period-selector { display:flex; padding:4px; background:#fff; border:1px solid var(--line); border-radius:10px }
.period-selector a { padding:8px 12px; border-radius:7px; color:var(--muted); font-size:10px; font-weight:750; text-decoration:none }
.period-selector a.active { background:#eaf2ff; color:var(--blue) }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:17px }
.dashboard-metrics article { min-height:125px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 3px 10px rgba(16,39,70,.035) }
.dashboard-metrics span,.dashboard-metrics strong,.dashboard-metrics small { display:block }
.dashboard-metrics span { color:var(--muted); font-size:11px; font-weight:700 }
.dashboard-metrics strong { font-size:25px; margin:13px 0 7px; letter-spacing:-.5px }
.dashboard-metrics small { color:var(--muted); font-size:9px; line-height:1.45 }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(310px,.8fr); gap:17px; margin-bottom:17px }
.lower-dashboard { grid-template-columns:minmax(0,1.4fr) minmax(310px,.8fr) }
.dashboard-panel { overflow:hidden }
.panel-heading { padding:18px 20px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.panel-heading h2 { margin:0; font-size:15px }
.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:10px }
.panel-heading>a { color:var(--blue); font-size:10px; font-weight:750; text-decoration:none }
.revenue-list { padding:5px 20px 20px }
.revenue-list>div { display:grid; grid-template-columns:42px 1fr 90px; gap:10px; align-items:center; padding:6px 0 }
.revenue-list span,.revenue-list small { color:var(--muted); font-size:9px }
.revenue-list small { text-align:right }
.revenue-list meter { width:100%; height:11px; accent-color:var(--blue) }
.device-overview { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px }
.device-overview div { border:1px solid var(--line); border-radius:11px; padding:22px; text-align:center; background:var(--canvas) }
.device-overview strong,.device-overview span { display:block }
.device-overview strong { font-size:28px }
.device-overview span { color:var(--muted); font-size:10px; margin-top:6px }
.licence-breakdown { padding:4px 20px 18px }
.licence-breakdown p { display:flex; align-items:center; gap:8px; margin:11px 0; color:var(--muted); font-size:10px }
.licence-breakdown strong { margin-left:auto; color:var(--ink) }
.status-dot { width:8px; height:8px; border-radius:50% }
.active-dot { background:#12b76a }.trial-dot { background:#7f56d9 }.grace-dot { background:#f79009 }.expired-dot { background:#98a2b3 }.restricted-dot { background:#d92d20 }
.incident-list { padding:0 20px 17px }
.incident-list>div:not(.empty-state) { display:flex; align-items:flex-start; gap:11px; padding:12px 0; border-top:1px solid var(--line) }
.incident-list>div>div strong,.incident-list>div>div small { display:block }
.incident-list>div>div strong { font-size:11px }
.incident-list>div>div small { color:var(--muted); font-size:9px; margin-top:5px }
.service-list { padding:2px 20px 17px }
.service-list p { display:flex; justify-content:space-between; gap:12px; padding:11px 0; margin:0; border-top:1px solid var(--line); font-size:10px }
.service-list span { color:var(--muted) }
.success-text { color:var(--green)!important }
.account-actions { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 20px; margin-bottom:16px }
.account-actions h2 { margin:0; font-size:14px }
.account-actions p { margin:5px 0 0; color:var(--muted); font-size:10px }
.account-action-buttons { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap }
.account-action-buttons form { margin:0 }
.account-action-buttons button { cursor:pointer }
.danger-outline-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid #fda29b; background:#fff; color:var(--red); border-radius:8px; padding:10px 14px; font-size:11px; font-weight:750; text-decoration:none }
.incident-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start }
.incident-column { min-height:430px; padding:13px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--surface) 72%,transparent) }
.incident-column>h2 { margin:2px 3px 14px; font-size:12px }
.incident-column>h2 b { margin-left:5px; padding:3px 7px; border-radius:20px; background:var(--line) }
.incident-card { padding:15px; margin-bottom:11px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(16,39,70,.035) }
.incident-card.critical { border-left-color:var(--red) }
.incident-card.warning { border-left-color:#f79009 }
.incident-card.closed { opacity:.86 }
.incident-card h3 { margin:10px 0 5px; font-size:12px }
.incident-card p,.incident-card small { display:block; margin:0 0 8px; color:var(--muted); font-size:10px }
.incident-card .secondary-button { width:100%; margin-top:7px }
.empty-column { padding:45px 15px; color:var(--muted); text-align:center; font-size:11px }
.incident-statuses { display:flex; gap:8px }
.incident-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.incident-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px }
.incident-actions-grid form+form { padding-top:15px; margin-top:15px; border-top:1px solid var(--line) }
.incident-actions-grid button { margin-top:13px }
.incident-comments { padding:2px 20px 16px }
.incident-comments>div:not(.empty-state) { display:grid; grid-template-columns:1fr auto; gap:5px 15px; padding:15px 0; border-top:1px solid var(--line) }
.incident-comments strong { font-size:11px }
.incident-comments time { color:var(--muted); font-size:9px }
.incident-comments p { grid-column:1/-1; margin:2px 0 0; font-size:11px; line-height:1.55; white-space:pre-wrap }
.resolution-panel { margin-top:16px; padding:18px 20px; border-left:4px solid var(--green) }
.resolution-panel p { margin:8px 0 0; color:var(--muted); font-size:11px; white-space:pre-wrap }
.system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.system-card { padding:20px }
.system-title { display:flex; align-items:center; gap:11px }
.system-title>i { width:11px; height:11px; flex:0 0 auto; border-radius:50%; background:var(--green) }
.system-title>i.status-ready { background:#7f56d9 }
.system-title>i.status-degraded { background:#f79009 }
.system-title>i.status-unavailable { background:var(--red) }
.system-title>i.status-not_configured { background:#98a2b3 }
.system-title h2 { margin:0; font-size:14px }
.system-title p { margin:4px 0 0; color:var(--muted); font-size:10px }
.system-title .badge { margin-left:auto }
.system-card dl { margin:18px 0 0 }
.system-card dl div { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-top:1px solid var(--line); font-size:10px }
.system-card dt { color:var(--muted) }
.system-card dd { margin:0; text-align:right; font-weight:700 }
.system-privacy { border-left:4px solid var(--blue) }
.system-privacy>p { color:var(--muted); font-size:10px; line-height:1.6 }
.system-footer { margin-top:16px; padding:12px 14px; border-radius:10px; background:#eef4ff; color:var(--muted); font-size:10px }
.live-readiness { overflow:hidden }
.live-check-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line) }
.live-check { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line) }
.live-check:nth-child(odd) { border-right:1px solid var(--line) }
.live-check.final-switch { background:#fffcf5 }
.live-check strong,.live-check small { display:block }
.live-check strong { font-size:11px }
.live-check small { color:var(--muted); font-size:9px; line-height:1.45; margin-top:4px }
.check-mark { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:#fef3f2; color:var(--red); font-weight:850; font-style:normal }
.check-mark.passed { background:#ecfdf3; color:var(--green) }
.live-warning { margin:16px 18px 18px }
.audit-filters label:not(.search) { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; font-weight:700 }
.audit-filters input[type=date] { border:1px solid var(--line); border-radius:8px; padding:9px; color:var(--ink); font:inherit }
.audit-panel { overflow:hidden }
.audit-timeline { padding:2px 20px }
.audit-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto 145px; align-items:center; gap:13px; padding:16px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none }
.audit-row:hover strong { color:var(--blue) }
.audit-row strong,.audit-row p,.audit-row small { display:block }
.audit-row strong { font-size:11px }
.audit-row p { margin:4px 0; font-size:10px }
.audit-row small,.audit-row time { color:var(--muted); font-size:9px }
.audit-row time { text-align:right }
.audit-justification { margin-top:14px; padding:13px; border-radius:9px; background:var(--canvas) }
.audit-justification strong { font-size:10px }
.audit-justification p { margin:7px 0 0; font-size:11px; line-height:1.5; white-space:pre-wrap }
.audit-changes { overflow:hidden }
.audit-changes pre { margin:0; padding:18px 20px; overflow:auto; color:#344054; background:#f8fafc; font:10px/1.65 Consolas,monospace }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px }
.plan-card { padding:22px; position:relative; overflow:hidden }
.plan-card.featured { border-top:4px solid var(--blue) }
.plan-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px }
.plan-card h2 { margin:18px 0 7px; font-size:19px }
.plan-price { display:block; font-size:25px; letter-spacing:-.5px }
.plan-card ul { padding-left:18px; margin:18px 0; color:var(--muted); font-size:11px; line-height:1.9 }
.plan-meta { padding:11px 0 15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px }
.plan-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px }
.availability-field { margin:18px 0 0; padding:14px; border:1px solid var(--line); border-radius:10px }
.availability-field legend { padding:0 6px; color:var(--muted); font-size:10px; font-weight:750 }
.availability-field label { margin:8px 0 }
.statistics-chart { margin-bottom:17px }
.statistics-metrics article strong { font-size:22px }
.danger-text { color:var(--red)!important }
.heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap }
.emergency-banner { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:15px 18px; border:1px solid #fda29b; border-left:5px solid var(--red); border-radius:11px; background:#fff5f4; color:#912018 }
.emergency-banner strong { white-space:nowrap }
.emergency-banner span { font-size:10px; line-height:1.5 }
.runbook-section { overflow:hidden }
.runbook-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; counter-reset:runbook }
.runbook-steps li { counter-increment:runbook; display:grid; grid-template-columns:28px 1fr; gap:9px; padding:15px 18px; border-top:1px solid var(--line) }
.runbook-steps li:nth-child(odd) { border-right:1px solid var(--line) }
.runbook-steps li::before { content:counter(runbook); width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#eef4ff; color:var(--blue); font-size:10px; font-weight:850; grid-row:1/3 }
.runbook-steps b,.runbook-steps span { display:block }
.runbook-steps b { font-size:11px }
.runbook-steps span { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.5 }
.runbook-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0 }
.runbook-card { padding:18px; border-top:4px solid var(--line) }
.runbook-card h2 { margin:12px 0 7px; font-size:15px }
.runbook-card p { min-height:45px; margin:0 0 13px; color:var(--muted); font-size:10px; line-height:1.55 }
.runbook-card strong { font-size:9px }
.runbook-code { display:inline-grid; place-items:center; width:32px; height:24px; border-radius:7px; font-size:10px; font-weight:850 }
.runbook-code.critical { color:#b42318; background:#fef3f2 }.runbook-code.elevated { color:#b54708; background:#fffaeb }.runbook-code.moderate { color:#175cd3; background:#eff8ff }
.runbook-scenarios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line) }
.runbook-scenarios article { padding:17px 19px; border-bottom:1px solid var(--line) }
.runbook-scenarios article:nth-child(odd) { border-right:1px solid var(--line) }
.runbook-scenarios h3 { margin:0 0 7px; font-size:11px }
.runbook-scenarios p { margin:0; color:var(--muted); font-size:10px; line-height:1.55 }

@media(max-width:900px) {
  .portal-body { grid-template-columns:210px 1fr }
  .portal-content { padding:24px 18px }
  .filter-bar { flex-wrap:wrap }
  .search { flex-basis:100% }
  .detail-grid { grid-template-columns:1fr }
  .confirmation-layout { grid-template-columns:1fr }
  .licence-metrics { grid-template-columns:repeat(2,1fr) }
  .licence-detail-grid { grid-template-columns:1fr }
  .payment-metrics { grid-template-columns:repeat(2,1fr) }
  .email-metrics { grid-template-columns:repeat(3,1fr) }
  .payment-detail-grid { grid-template-columns:1fr }
  .dashboard-metrics { grid-template-columns:repeat(2,1fr) }
  .dashboard-columns,.lower-dashboard { grid-template-columns:1fr }
}
@media(max-width:650px) {
  .auth-shell { grid-template-columns:1fr }
  .auth-brand { min-height:280px; padding:28px }
  .auth-message { margin:45px 0 }
  .auth-message h1 { font-size:29px }
  .portal-body { display:block }
  .portal-nav { padding:16px 20px }
  .portal-links { flex-direction:row; overflow:auto; margin-top:18px }
  .portal-links a,.future-link { white-space:nowrap }
  .privacy-note,.portal-account { display:none }
  .portal-main header { height:60px; padding:0 18px }
  .portal-content { padding:22px 14px }
  .security-grid { grid-template-columns:1fr }
  .page-heading { display:block }
  .filter-bar select,.filter-bar button,.filter-bar>a { flex:1 }
  .detail-card dl div { display:block }
  .detail-card dd { text-align:left; margin-top:5px }
  .licence-metrics { grid-template-columns:1fr 1fr }
  .payment-metrics { grid-template-columns:1fr 1fr }
  .email-metrics { grid-template-columns:1fr }
  .payment-event { grid-template-columns:auto 1fr }
  .payment-event time { grid-column:2 }
  .dashboard-metrics { grid-template-columns:1fr 1fr }
  .period-selector { margin-top:14px; width:max-content }
  .account-actions { display:block }
  .account-action-buttons { justify-content:flex-start; margin-top:14px }
  .incident-board,.incident-detail-grid,.incident-actions-grid { grid-template-columns:1fr }
  .system-grid { grid-template-columns:1fr }
  .runbook-steps,.runbook-grid,.runbook-scenarios { grid-template-columns:1fr }
  .runbook-steps li:nth-child(odd),.runbook-scenarios article:nth-child(odd) { border-right:0 }
  .live-check-list { grid-template-columns:1fr }
  .live-check:nth-child(odd) { border-right:0 }
  .plan-grid,.plan-form-grid { grid-template-columns:1fr }
  .audit-row { grid-template-columns:auto 1fr auto }
  .audit-row time { grid-column:2; text-align:left }
  .incident-column { min-height:auto }
}