:root{
  color-scheme:light;
  --radius:.375rem;
  --background:#f5f7fb;
  --foreground:#182638;
  --card:#ffffff;
  --card-foreground:#182638;
  --popover:#ffffff;
  --popover-foreground:#182638;
  --primary:#075985;
  --primary-foreground:#ffffff;
  --secondary:#e8edf4;
  --secondary-foreground:#24364b;
  --muted:#edf1f6;
  --muted-foreground:#526174;
  --accent:#e1edf5;
  --accent-foreground:#163c55;
  --destructive:#b42332;
  --destructive-foreground:#ffffff;
  --border:#ccd5e0;
  --input:#a7b5c5;
  --ring:#075985;
  --sidebar:#eef2f7;
  --sidebar-foreground:#24364b;
  --sidebar-primary:#d9eaf5;
  --sidebar-primary-foreground:#075078;
  --sidebar-accent:#e1e7ef;
  --sidebar-accent-foreground:#182638;
  --sidebar-border:#ccd5e0;
  --sidebar-ring:#075985;
  --surface-raised:#ffffff;
  --surface-subtle:#f0f3f8;
  --table-header:#e8edf4;
  --code:#edf3f8;
  --code-foreground:#16405b;
  --severity-low:#146744;
  --severity-medium:#795300;
  --severity-high:#a13c12;
  --severity-critical:#b42332;
  --status-new:#075985;
  --status-investigating:#795300;
  --status-contained:#11665f;
  --status-resolved:#256430;
  --status-dismissed:#526174;
  --success:#146744;
  --warning:#795300;
  --info:#075985;
  --font-sans:"IBM Plex Sans","Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box;border-color:var(--border)}
html{background:var(--background);min-width:0}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);letter-spacing:0;min-width:0}
button,input,select,textarea{font:inherit;letter-spacing:0}
button,a,input,select,textarea{outline:none}
[hidden]{display:none!important}
::selection{background:color-mix(in oklab,var(--primary) 35%,transparent)}
*{scrollbar-color:var(--border) var(--background);scrollbar-width:thin}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sx-app{display:flex;min-height:100dvh;width:100%;background:var(--background);color:var(--foreground)}
.sx-sidebar{position:sticky;top:0;display:flex;height:100dvh;width:15rem;flex:0 0 15rem;flex-direction:column;border-right:1px solid var(--sidebar-border);background:var(--sidebar);transition:width .18s ease,flex-basis .18s ease;z-index:40}
.sx-brand{display:flex;height:4rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--sidebar-border);padding:0 1rem}
.sx-brand-mark{display:grid;width:2.25rem;height:2.25rem;flex:0 0 2.25rem;place-items:center;border:1px solid color-mix(in oklab,var(--primary) 40%,transparent);border-radius:var(--radius);background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary)}
.sx-brand-copy{min-width:0}
.sx-brand-name{margin:0;color:var(--sidebar-foreground);font-size:1rem;font-weight:700;line-height:1.2}
.sx-brand-subtitle{margin:.12rem 0 0;color:color-mix(in oklab,var(--sidebar-foreground) 85%,transparent);font-size:.5625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sx-nav{display:grid;gap:.25rem;padding:.5rem;overflow-y:auto}
.sx-nav a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem;min-height:2.75rem;width:100%;padding:0 .75rem;border-radius:var(--radius);color:color-mix(in oklab,var(--sidebar-foreground) 90%,transparent);text-decoration:none;font-size:.875rem;font-weight:500;transition:background .15s ease,color .15s ease}
.sx-nav a:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.sx-nav a[aria-current="page"]{background:var(--sidebar-primary);color:var(--sidebar-primary-foreground)}
.sx-nav a svg{width:1rem;height:1rem;flex:none}
.sx-sidebar-footer{margin-top:auto;border-top:1px solid var(--sidebar-border);padding:.5rem}
.sx-collapse{display:inline-flex;align-items:center;justify-content:flex-start;gap:.5rem;min-height:2.75rem;width:100%;padding:.5rem .75rem;border:0;border-radius:var(--radius);background:transparent;color:var(--sidebar-foreground);font-size:.75rem;font-weight:500;cursor:pointer}
.sx-collapse:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.sx-collapse svg{width:1rem;height:1rem}
body.sx-sidebar-collapsed .sx-sidebar{width:4rem;flex-basis:4rem}
body.sx-sidebar-collapsed .sx-brand{justify-content:center;padding:0 .5rem}
body.sx-sidebar-collapsed .sx-brand-copy,
body.sx-sidebar-collapsed .sx-nav-label,
body.sx-sidebar-collapsed .sx-collapse-label{display:none}
body.sx-sidebar-collapsed .sx-nav a{grid-template-columns:1fr;place-items:center;padding:0 .5rem}
body.sx-sidebar-collapsed .sx-collapse{justify-content:center;padding:.5rem}

.sx-main{min-width:0;flex:1}
.sx-topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:4rem;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--background) 95%,transparent);backdrop-filter:blur(8px);padding:.625rem 1.5rem}
.sx-title{min-width:0}
.sx-title h1{margin:0;color:var(--foreground);font-size:1.125rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-title p{margin:.18rem 0 0;color:var(--muted-foreground);font-size:.75rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-width:0;margin-left:auto}
.sx-topbar-identity{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-width:0}
.sx-user-copy{text-align:right;min-width:0}
.sx-user-copy p{margin:0}
.sx-user-copy #identity{max-width:19rem;color:var(--foreground);font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-user-role{color:var(--muted-foreground);font-size:.625rem}
.sx-mobile-menu{display:none}
.sx-icon-button{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);color:var(--foreground);cursor:pointer;box-shadow:0 1px 2px rgba(24,38,56,.08)}
.sx-icon-button:hover{background:var(--accent);color:var(--accent-foreground)}
.sx-icon-button svg{width:1rem;height:1rem}
.sx-content{width:100%;max-width:105rem;margin:0 auto;padding:1rem 1.5rem 2rem}
.sx-operational{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--muted-foreground);font-size:.625rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.sx-operational .ok{display:inline-flex;align-items:center;gap:.375rem;color:var(--success)}
.sx-operational .ok::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--success)}

#message{margin:0 0 1rem;min-height:0;color:var(--muted-foreground);font-size:.75rem}
#message:not(:empty){display:flex;gap:.75rem;padding:.75rem;border:1px solid color-mix(in oklab,var(--info) 35%,transparent);border-radius:var(--radius);background:color-mix(in oklab,var(--info) 8%,transparent);color:var(--foreground)}
#message.error{border-color:color-mix(in oklab,var(--destructive) 35%,transparent);background:color-mix(in oklab,var(--destructive) 8%,transparent);color:var(--destructive)}
#message.success{border-color:color-mix(in oklab,var(--success) 65%,var(--border));background:color-mix(in oklab,var(--success) 19%,var(--card));color:var(--foreground);font-weight:700}

.sx-stack{display:grid;gap:1rem}
.sx-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sx-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.sx-panel{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--card-foreground);overflow:hidden}
.sx-panel-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1rem;border-bottom:1px solid var(--border);padding:1rem 1.125rem}
.sx-panel-head h2{margin:0;color:var(--foreground);font-size:.875rem;font-weight:600;line-height:1.3}
.sx-panel-head p{margin:.125rem 0 0;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
.sx-panel-body{padding:1rem 1.125rem}
.sx-auth-panel{width:min(100%,32rem);max-width:32rem;margin:clamp(2rem,8vh,5rem) auto 0}
.sx-panel-action{align-self:center}
.sx-section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;color:var(--foreground);font-size:.75rem;font-weight:600}
.sx-section-title svg{width:1rem;height:1rem;color:var(--primary)}
.sx-section-subtitle{display:block;margin:.1rem 0 0;color:var(--muted-foreground);font-size:.625rem;font-weight:400}

label{display:block;min-width:0;margin:0 0 .75rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;letter-spacing:.035em;text-transform:uppercase}
input,select,textarea{display:block;width:100%;margin-top:.375rem;border:1px solid var(--input);border-radius:var(--radius);background:transparent;color:var(--foreground);box-shadow:0 1px 2px rgba(24,38,56,.06);transition:border-color .15s ease,box-shadow .15s ease}
input,select{height:2.25rem;padding:.25rem .75rem}
/* Native option popups need opaque colors; transparent controls can expose a white OS menu. */
select{color-scheme:light;background-color:var(--popover);color:var(--popover-foreground)}
select option,select optgroup{background-color:var(--popover);color:var(--popover-foreground)}
select option:checked{background-color:var(--accent);color:var(--accent-foreground)}
select option:disabled,select optgroup:disabled{color:var(--muted-foreground)}
textarea{min-height:3.75rem;padding:.5rem .75rem;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted-foreground)}
input[type="checkbox"]{display:inline-grid;width:1rem;height:1rem;min-height:1rem;padding:0;margin:0 .5rem 0 0;vertical-align:-.18rem;accent-color:var(--primary)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}

/* Shared password visibility control: the button sits inside the input outline.
 * Keep the native label associated with the unmodified input by its stable ID. */
.sx-password-control{min-width:0;margin:0 0 .75rem}
.sx-password-control>label{margin:0}
.sx-password-field{position:relative;min-width:0;margin-top:.375rem}
.sx-password-field>input{margin-top:0;padding-right:3rem}
.sx-password-toggle{
 position:absolute;top:50%;right:.375rem;transform:translateY(-50%);
 display:grid;place-items:center;width:2rem;height:2rem;min-height:2rem;
 margin:0;padding:0;border:1px solid transparent;border-radius:var(--radius);
 background:transparent;color:var(--muted-foreground);box-shadow:none;
 cursor:pointer
}
.sx-password-toggle:hover:not(:disabled){background:var(--accent);color:var(--foreground)}
.sx-password-toggle[aria-pressed="true"]{color:var(--primary)}
.sx-password-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:0}
.sx-password-toggle svg{width:1.125rem;height:1.125rem;pointer-events:none}

fieldset{margin:0 0 .75rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}
fieldset legend{padding:0 .3rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:700;text-transform:uppercase}
fieldset label{margin:.5rem 0;text-transform:none;letter-spacing:0;color:var(--foreground)}

button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.25rem;padding:.5rem 1rem;border:1px solid transparent;border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(24,38,56,.08);transition:background .15s ease,color .15s ease,border-color .15s ease}
button:hover:not(:disabled){background:color-mix(in oklab,var(--primary) 90%,black)}
button:disabled{opacity:.5;cursor:not-allowed}
button svg{width:1rem;height:1rem;flex:none}
.sx-button-sm,table button,.pagination button{min-height:2rem;padding:.35rem .75rem;font-size:.75rem}
.sx-button-outline,#clear,#logout,.pagination button{border-color:var(--input);background:var(--background);color:var(--foreground)}
.sx-button-outline:hover:not(:disabled),#clear:hover:not(:disabled),#logout:hover:not(:disabled),.pagination button:hover:not(:disabled){background:var(--accent);color:var(--accent-foreground)}
.sx-button-ghost{background:transparent;color:var(--foreground);box-shadow:none}
.sx-button-ghost:hover:not(:disabled){background:var(--accent);color:var(--accent-foreground)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 1px var(--ring)}

.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12.5rem,100%),1fr));gap:.5rem .75rem}
#filters{padding:.75rem;border-bottom:1px solid var(--border);background:var(--surface-subtle)}
#filters .filter-grid{margin-bottom:.5rem}
#filters label{margin-bottom:0}
#filters button{margin-top:.25rem}
#filters button+button{margin-left:.375rem}
#results,#unread-count,#as-of{margin:.75rem 1rem;color:var(--muted-foreground);font-size:.75rem}

.table-scroll{overflow-x:auto;max-width:100%}
table{width:100%;min-width:48.75rem;border-collapse:collapse;text-align:left;font-size:.75rem}
caption{text-align:left;padding:.65rem .75rem;color:var(--muted-foreground);font-size:.6875rem}
th{padding:.625rem .75rem;border-bottom:1px solid var(--border);background:var(--table-header);color:var(--muted-foreground);font-size:.625rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
td{padding:.75rem;border-bottom:1px solid color-mix(in oklab,var(--border) 70%,transparent);color:var(--foreground);vertical-align:middle}
tbody tr:hover{background:color-mix(in oklab,var(--muted) 40%,transparent)}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-family:var(--font-mono)}
table button{border-color:var(--input);background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(24,38,56,.06)}
table button:hover:not(:disabled){background:var(--accent);color:var(--accent-foreground)}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;color:var(--muted-foreground);font-size:.75rem}
.pagination button{margin:0}

.semantic-value{display:inline-flex;align-items:center;gap:.375rem;min-height:1.5rem;padding:.125rem .5rem;border:1px solid currentColor;border-radius:var(--radius);font-size:.6875rem;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.semantic-value::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:currentColor;flex:none}
.tone-low{color:var(--severity-low);background:color-mix(in oklab,var(--severity-low) 10%,transparent)}
.tone-medium{color:var(--severity-medium);background:color-mix(in oklab,var(--severity-medium) 10%,transparent)}
.tone-high{color:var(--severity-high);background:color-mix(in oklab,var(--severity-high) 10%,transparent)}
.tone-critical{color:var(--severity-critical);background:color-mix(in oklab,var(--severity-critical) 10%,transparent)}
.tone-new{color:var(--status-new);background:color-mix(in oklab,var(--status-new) 10%,transparent)}
.tone-acknowledged,.tone-investigating{color:var(--status-investigating);background:color-mix(in oklab,var(--status-investigating) 10%,transparent)}
.tone-contained{color:var(--status-contained);background:color-mix(in oklab,var(--status-contained) 10%,transparent)}
.tone-resolved{color:var(--status-resolved);background:color-mix(in oklab,var(--status-resolved) 10%,transparent)}
.tone-dismissed{color:var(--status-dismissed);background:color-mix(in oklab,var(--status-dismissed) 10%,transparent)}
.tone-info{color:var(--info);background:color-mix(in oklab,var(--info) 10%,transparent)}
.tone-success{color:var(--success);background:color-mix(in oklab,var(--success) 10%,transparent)}
td>.semantic-value,dd>.semantic-value{width:max-content;max-width:100%;margin:0;vertical-align:middle;white-space:nowrap}

.sx-notice{display:flex;gap:.75rem;border:1px solid var(--border);border-radius:var(--radius);padding:.75rem}
.sx-notice svg{width:1rem;height:1rem;flex:none;margin-top:.125rem}
.sx-notice-title{margin:0;font-size:.75rem;font-weight:700}
.sx-notice-copy{margin:.125rem 0 0;color:var(--foreground);font-size:.75rem;line-height:1.5}
.sx-notice-info{border-color:color-mix(in oklab,var(--info) 35%,transparent);background:color-mix(in oklab,var(--info) 8%,transparent);color:var(--info)}
.sx-notice-warning{border-color:color-mix(in oklab,var(--warning) 35%,transparent);background:color-mix(in oklab,var(--warning) 8%,transparent);color:var(--warning)}
.sx-notice-success{border-color:color-mix(in oklab,var(--success) 35%,transparent);background:color-mix(in oklab,var(--success) 8%,transparent);color:var(--success)}
.sx-notice-error{border-color:color-mix(in oklab,var(--destructive) 35%,transparent);background:color-mix(in oklab,var(--destructive) 8%,transparent);color:var(--destructive)}
.sx-button-danger{
 background:var(--destructive);border-color:var(--destructive);color:var(--destructive-foreground);
}
.sx-button-danger:hover:not(:disabled){filter:brightness(.96)}
.sx-button-danger:focus-visible{outline:2px solid var(--destructive);outline-offset:2px}
.sx-danger-zone{border-color:color-mix(in oklab,var(--destructive) 45%,var(--border))}
.sx-danger-zone>summary{color:var(--destructive)}
.sx-danger-zone .sx-notice-error{margin-bottom:1rem}


pre{margin:.5rem 0 0;max-height:18rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--border);border-radius:var(--radius);background:var(--code);padding:.75rem;color:var(--code-foreground);font:11px/1.55 var(--font-mono)}
dl{min-width:0;margin:0}
dt{color:var(--muted-foreground);font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
dd{margin:.25rem 0 0;color:var(--foreground);font-family:var(--font-mono);font-size:.75rem;overflow-wrap:anywhere}
.sx-meta-grid,#detail-fields,#affected-entities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
#detail-fields,#affected-entities{padding:1rem}
#detail-fields dt,#affected-entities dt{margin-top:0}
#detail-fields dd,#affected-entities dd{margin-bottom:.5rem}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0}
.card{position:relative;min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:1rem}
.card dt{margin:0;padding-right:2.75rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;letter-spacing:.035em;text-transform:uppercase}
.card dd{margin:.5rem 0 0;color:var(--foreground);font-size:1.5rem;font-weight:600;line-height:1.1;font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.sx-card-icon{position:absolute;right:1rem;top:1rem;display:grid;width:2.25rem;height:2.25rem;place-items:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);color:var(--muted-foreground)}
.sx-card-icon svg{width:1rem;height:1rem}
.sx-card-icon.tone-info{color:var(--info);background:color-mix(in oklab,var(--info) 10%,var(--card));border-color:color-mix(in oklab,var(--info) 55%,var(--border))}
.sx-card-icon.tone-success{color:var(--success);background:color-mix(in oklab,var(--success) 10%,var(--card));border-color:color-mix(in oklab,var(--success) 55%,var(--border))}
.sx-card-icon.tone-low{color:var(--severity-low);background:color-mix(in oklab,var(--severity-low) 10%,var(--card));border-color:color-mix(in oklab,var(--severity-low) 55%,var(--border))}
.sx-card-icon.tone-medium{color:var(--severity-medium);background:color-mix(in oklab,var(--severity-medium) 10%,var(--card));border-color:color-mix(in oklab,var(--severity-medium) 55%,var(--border))}
.sx-card-icon.tone-high{color:var(--severity-high);background:color-mix(in oklab,var(--severity-high) 10%,var(--card));border-color:color-mix(in oklab,var(--severity-high) 55%,var(--border))}
.sx-card-icon.tone-critical{color:var(--severity-critical);background:color-mix(in oklab,var(--severity-critical) 10%,var(--card));border-color:color-mix(in oklab,var(--severity-critical) 55%,var(--border))}
.sx-card-icon.tone-new{color:var(--status-new);background:color-mix(in oklab,var(--status-new) 10%,var(--card));border-color:color-mix(in oklab,var(--status-new) 55%,var(--border))}
.sx-card-icon.tone-investigating{color:var(--status-investigating);background:color-mix(in oklab,var(--status-investigating) 10%,var(--card));border-color:color-mix(in oklab,var(--status-investigating) 55%,var(--border))}
.sx-card-icon.tone-contained{color:var(--status-contained);background:color-mix(in oklab,var(--status-contained) 10%,var(--card));border-color:color-mix(in oklab,var(--status-contained) 55%,var(--border))}
.sx-card-icon.tone-resolved{color:var(--status-resolved);background:color-mix(in oklab,var(--status-resolved) 10%,var(--card));border-color:color-mix(in oklab,var(--status-resolved) 55%,var(--border))}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.columns>section{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.columns>section>h2{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.875rem;font-weight:600}
.columns>section>h3{margin:0;padding:.75rem 1rem .25rem;color:var(--foreground);font-size:.75rem;font-weight:600}
.columns>section>p{padding:0 1rem}
.columns>section>div{padding:0 1rem 1rem}
.hint,.empty{color:var(--muted-foreground);font-size:.75rem;line-height:1.55}
.empty{font-style:italic}
.bars{display:grid;gap:.75rem}
.bar-row{display:grid;grid-template-columns:minmax(6rem,1fr) 3.5rem 42%;gap:.5rem;align-items:center;min-width:0;color:var(--foreground);font-size:.75rem}
.bar-value{text-align:right;font-family:var(--font-mono);font-weight:600}
.bar-track{height:.375rem;overflow:hidden;border-radius:999px;background:var(--muted)}
.bar-fill{height:100%;border-radius:999px;background:var(--primary)}
.bar-row.critical .bar-fill{background:var(--severity-critical)}
.bar-row.high .bar-fill{background:var(--severity-high)}
.bar-row.medium .bar-fill{background:var(--severity-medium)}
.bar-row.low .bar-fill{background:var(--severity-low)}
.mini-track{width:100%;height:.3rem;overflow:hidden;border-radius:999px;background:var(--muted)}
.mini-fill{height:100%;background:var(--primary)}
.trend-count{display:block;margin-bottom:.25rem;font-family:var(--font-mono);font-weight:600}

.sx-events-layout{display:grid;grid-template-columns:1fr;gap:1rem}
.sx-events-layout:has(#detail-panel:not([hidden])){grid-template-columns:minmax(0,1.55fr) minmax(21.25rem,.85fr)}
.sx-alert-detail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:1rem}
body[data-page="alerts"] .sx-alert-detail-grid:not(:has(#status-form:not([hidden]))){grid-template-columns:1fr}
.sx-alert-main{min-width:0}
.sx-alert-main h3{margin:1rem 0 .5rem;font-size:.75rem}
body[data-page="alerts"] #event-detail{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}
body[data-page="alerts"] #status-form{margin:0;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);align-self:start}
body[data-page="alerts"] #status-form h3{margin:0 0 .75rem;font-size:.875rem}

.sx-incidents-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(18.75rem,.7fr);gap:1rem}
.sx-incident-layout{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem}
.sx-incident-main{min-width:0;border-right:1px solid var(--border)}
.sx-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border);padding:0 .75rem}
.sx-tab{min-height:2.75rem;padding:.5rem 1rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted-foreground);box-shadow:none;font-size:.75rem;font-weight:600;text-transform:capitalize}
.sx-tab:hover:not(:disabled){background:transparent;color:var(--foreground)}
.sx-tab[aria-selected="true"]{border-bottom-color:var(--primary);color:var(--primary)}
.sx-pane{padding:1rem}
.sx-pane-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sx-incident-control{display:grid;align-content:start;gap:1rem;padding:1rem;background:var(--surface-subtle)}
.sx-incident-control>h3{margin:0;color:var(--muted-foreground);font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.sx-incident-control form{margin:0;padding:0;border:0;background:transparent}
body[data-page="incidents"] #investigation-workspace,body[data-page="incidents"] #response-workflow{margin:0;padding:0;border:0;background:transparent}
body[data-page="incidents"] #investigation-workspace>h3,body[data-page="incidents"] #response-workflow>h3{display:none}
body[data-page="incidents"] #investigation-workspace>p,body[data-page="incidents"] #response-workflow>p{color:var(--muted-foreground);font-size:.75rem}
.finding{margin:.75rem 0;padding:.75rem;border:1px solid var(--border);border-left:2px solid var(--primary);border-radius:var(--radius);background:var(--surface-subtle)}
.finding p{margin:.2rem 0;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
.finding p:first-child{color:var(--foreground);font-weight:600}
body[data-page="incidents"] #investigation-timeline{position:relative;margin:.75rem 0 0 .5rem;padding-left:1.25rem;border-left:1px solid var(--border)}
body[data-page="incidents"] #investigation-timeline li{position:relative;margin:0 0 1rem;padding-left:.1rem;color:var(--foreground);font-size:.75rem}
body[data-page="incidents"] #investigation-timeline li::before{content:"";position:absolute;left:-1.53rem;top:.35rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--card)}
body[data-page="incidents"] #assessment-form,body[data-page="incidents"] #assignment-form,body[data-page="incidents"] #status-form,body[data-page="incidents"] #response-form,body[data-page="incidents"] #investigation-note-form{margin-top:1rem}
body[data-page="incidents"] #response-action-rows{display:grid;gap:.75rem}

.sx-notification-layout{display:grid;grid-template-columns:1fr;gap:1rem}
.sx-notification-layout:has(#send-panel:not([hidden])){grid-template-columns:minmax(0,1.4fr) minmax(20rem,.6fr)}
body[data-page="notifications"] #notification-rows{display:grid}
.notification{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;margin:0;padding:1rem;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;opacity:1}
.notification::before{content:"";width:.5rem;height:.5rem;margin-top:.35rem;border-radius:50%;background:color-mix(in oklab,var(--muted-foreground) 40%,transparent)}
.notification.urgent{border-left:0;background:color-mix(in oklab,var(--primary) 4%,transparent)}
.notification.urgent::before{background:var(--primary)}
.notification.read{opacity:.68}
.notification p{grid-column:2;margin:.15rem 0;color:var(--muted-foreground);font-size:.75rem}
.notification p:first-of-type{color:var(--foreground);font-weight:600}
.notification button{grid-column:2;justify-self:start;margin-top:.35rem}
body[data-page="notifications"] #inbox-panel #filters{display:flex;align-items:end;gap:.75rem}
body[data-page="notifications"] #inbox-panel #filters label{flex:1;margin:0}
body[data-page="notifications"] #send-panel form{padding:1rem}
body[data-page="notifications"] #send-panel>p{padding:0 1rem;color:var(--muted-foreground);font-size:.75rem}

/* Dedicated operational inbox: compact hierarchy, independent from analyst notifications. */
body[data-page="notifications"] #message:empty{display:none;margin:0}
body[data-page="notifications"] .sx-operational-inbox{margin-bottom:1rem}
body[data-page="notifications"] .operational-head{align-items:center}
body[data-page="notifications"] .operational-count{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;white-space:nowrap;padding:.25rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-subtle);color:var(--muted-foreground);font-size:.6875rem;font-weight:700;letter-spacing:.01em}
body[data-page="notifications"] .operational-filters{display:flex;align-items:end;gap:.75rem;padding:.75rem 1.125rem;border-bottom:1px solid var(--border);background:var(--surface-subtle)}
body[data-page="notifications"] .operational-filters label{flex:1 1 18rem;max-width:25rem;margin:0}
body[data-page="notifications"] .operational-filters select{margin-top:.375rem}
body[data-page="notifications"] .operational-filters button{flex:none;min-height:2.25rem}
body[data-page="notifications"] .operational-message:empty{display:none}
body[data-page="notifications"] .operational-message:not(:empty){margin:.75rem 1.125rem 0;padding:.625rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle);color:var(--muted-foreground);font-size:.75rem}
body[data-page="notifications"] .operational-message.error{border-color:color-mix(in oklab,var(--destructive) 40%,var(--border));color:var(--destructive)}
body[data-page="notifications"] .operational-rows{min-width:0}
body[data-page="notifications"] .operational-empty{display:grid;align-content:center;justify-items:center;gap:.35rem;min-height:8rem;margin:1rem 1.125rem;padding:1.5rem 1rem;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface-subtle);text-align:center}
body[data-page="notifications"] .operational-empty h3{margin:0;color:var(--foreground);font-size:.875rem;font-weight:600}
body[data-page="notifications"] .operational-empty p{margin:0;max-width:30rem;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
body[data-page="notifications"] .operational-rows .notification:last-child{border-bottom:0}
body[data-page="notifications"] #operational-pagination:not([hidden]){display:flex;justify-content:center;gap:1rem;border-top:1px solid var(--border);background:var(--surface-subtle)}
body[data-page="notifications"] #operational-pagination[hidden]{display:none}
body[data-page="notifications"] #operational-pagination span{min-width:3rem;text-align:center}
@media(max-width:520px){
 body[data-page="notifications"] .operational-head{grid-template-columns:1fr;gap:.625rem}
 body[data-page="notifications"] .operational-count{justify-self:start}
 body[data-page="notifications"] .operational-filters{flex-direction:column;align-items:stretch;gap:.625rem}
 body[data-page="notifications"] .operational-filters label{flex:0 1 auto;max-width:none;width:100%}
 body[data-page="notifications"] .operational-filters button{width:100%}
 body[data-page="notifications"] .operational-empty{margin:.75rem;padding:1.25rem .75rem}
 body[data-page="notifications"] #operational-pagination:not([hidden]){gap:.5rem}
}

.sx-audit-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
body[data-page="audit"] #audit-panel #filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem .75rem}
body[data-page="audit"] #audit-panel #filters button{align-self:end}
body[data-page="audit"] #audit-detail-panel dl{padding:1rem}
body[data-page="audit"] #audit-detail-panel pre{margin:0 1rem 1rem}
.sx-integrity{display:inline-flex;align-items:center;gap:.375rem;color:var(--success);font-size:.625rem;font-weight:600}
.sx-integrity svg{width:.75rem;height:.75rem}

body[data-page="access"] #users{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.user-card{margin:0;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}
.user-card h3{margin:0 0 .75rem;color:var(--foreground);font-size:.75rem;font-weight:600;overflow-wrap:anywhere}
body[data-page="access"] #assigned-roles{color:var(--muted-foreground);font-size:.75rem}

.sx-overlay{display:none}

@media(max-width:1200px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-events-layout:has(#detail-panel:not([hidden])),
  .sx-alert-detail-grid,
  .sx-incidents-top,
  .sx-notification-layout:has(#send-panel:not([hidden])),
  .sx-audit-layout{grid-template-columns:1fr}
  .sx-incident-layout{grid-template-columns:1fr}
  .sx-incident-main{border-right:0;border-bottom:1px solid var(--border)}
  .sx-incident-control{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-incident-control>h3,.sx-incident-control>.sx-notice{grid-column:1/-1}
}
@media(max-width:900px){
  .columns,.sx-grid-2,.sx-grid-3,.sx-pane-grid{grid-template-columns:1fr}
  .sx-incident-control{grid-template-columns:1fr}
  body[data-page="access"] #users{grid-template-columns:1fr}
}
@media(max-width:767px){
  .sx-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;width:min(88vw,20rem);flex-basis:auto;box-shadow:0 20px 60px rgba(0,0,0,.45)}
  body.sx-nav-open .sx-sidebar{transform:translateX(0)}
  body.sx-sidebar-collapsed .sx-sidebar{width:min(88vw,20rem)}
  body.sx-sidebar-collapsed .sx-brand{justify-content:flex-start;padding:0 1rem}
  body.sx-sidebar-collapsed .sx-brand-copy,
  body.sx-sidebar-collapsed .sx-nav-label,
  body.sx-sidebar-collapsed .sx-collapse-label{display:block}
  body.sx-sidebar-collapsed .sx-nav a{grid-template-columns:auto minmax(0,1fr);place-items:initial;padding:0 .75rem}
  body.sx-sidebar-collapsed .sx-collapse{justify-content:flex-start;padding:.5rem .75rem}
  .sx-overlay{display:block;position:fixed;inset:0;z-index:35;background:rgba(24,38,56,.35);opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.sx-nav-open .sx-overlay{opacity:1;pointer-events:auto}
  .sx-mobile-menu{display:inline-grid}
  .sx-topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:.5rem .75rem}
  .sx-title p{display:none}
  .sx-user-copy{display:none}
  .sx-content{padding:1rem .75rem 1.5rem}
  .sx-collapse{display:none}
  .sx-topbar-actions #logout span{display:none}
  .sx-meta-grid,#detail-fields,#affected-entities{grid-template-columns:1fr}
  .pagination{flex-wrap:wrap}
}
@media(max-width:480px){
  .cards{grid-template-columns:1fr}
  .sx-panel-head{grid-template-columns:1fr}
  .filter-grid{grid-template-columns:1fr}
  body[data-page="notifications"] #inbox-panel #filters{display:grid}
  .bar-row{grid-template-columns:minmax(4rem,1fr) 2.5rem 34%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Task 37 polish: one authoritative stylesheet. Page-specific refinements are scoped
   by body[data-page] so shared IDs cannot leak styles between consoles. */
body[data-page="dashboard"] .sx-panel-body>.cards{padding:0}
body[data-page="dashboard"] .sx-grid-3 .bars{margin-top:.5rem}
body[data-page="dashboard"] .sx-grid-3 .sx-section-title:not(:first-child){margin-top:1rem}
body[data-page="dashboard"] .sx-grid-2 table{min-width:42rem}

/* Lovable dashboard distributions, category rows and response outcome cards. */
body[data-page="dashboard"] .bar-row{--bar-color:var(--primary);grid-template-columns:minmax(0,1fr) auto;gap:.375rem .5rem;font-size:.75rem}
body[data-page="dashboard"] .bar-row.critical{--bar-color:var(--severity-critical)}
body[data-page="dashboard"] .bar-row.high{--bar-color:var(--severity-high)}
body[data-page="dashboard"] .bar-row.medium{--bar-color:var(--severity-medium)}
body[data-page="dashboard"] .bar-row.low{--bar-color:var(--severity-low)}
body[data-page="dashboard"] .bar-row.new{--bar-color:var(--status-new)}
body[data-page="dashboard"] .bar-row.acknowledged,
body[data-page="dashboard"] .bar-row.investigating{--bar-color:var(--status-investigating)}
body[data-page="dashboard"] .bar-row.contained{--bar-color:var(--status-contained)}
body[data-page="dashboard"] .bar-row.resolved{--bar-color:var(--status-resolved)}
body[data-page="dashboard"] .bar-row.dismissed{--bar-color:var(--status-dismissed)}
body[data-page="dashboard"] .bar-label{display:flex;align-items:center;gap:.5rem;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--foreground);font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
body[data-page="dashboard"] .bar-label::before{content:"";width:.5rem;height:.5rem;flex:none;border-radius:50%;background:var(--bar-color)}
body[data-page="dashboard"] .bar-value{color:var(--muted-foreground);font-size:.6875rem;font-weight:400;font-variant-numeric:tabular-nums}
body[data-page="dashboard"] .bar-track{display:block;grid-column:1/-1;width:100%;height:.375rem}
body[data-page="dashboard"] .bar-fill{display:block;background:var(--bar-color)}
body[data-page="dashboard"] .sx-dashboard-distributions,
body[data-page="dashboard"] .sx-dashboard-detail{align-items:start}
body[data-page="dashboard"] .sx-dashboard-distributions .sx-panel-head,
body[data-page="dashboard"] .sx-response-panel .sx-panel-head{padding:.75rem 1rem}
body[data-page="dashboard"] .sx-dashboard-distributions .sx-panel-body,
body[data-page="dashboard"] .sx-response-panel .sx-panel-body{padding:1rem}
body[data-page="dashboard"] .sx-dashboard-distributions .sx-panel-head p,
body[data-page="dashboard"] .sx-response-panel .sx-panel-head p{margin-top:.125rem;line-height:1.25rem}
body[data-page="dashboard"] .sx-dashboard-distributions .sx-section-title{color:var(--muted-foreground);font-weight:400}
body[data-page="dashboard"] .sx-threat-panel .sx-panel-body{padding:0}
body[data-page="dashboard"] .sx-threat-panel .sx-section-title{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
body[data-page="dashboard"] .sx-threat-panel .sx-section-title:not(:first-child){margin:0;border-top:1px solid var(--border)}
body[data-page="dashboard"] .sx-threat-panel .hint,
body[data-page="dashboard"] .sx-threat-panel .empty{margin:0;padding:.75rem 1rem}
body[data-page="dashboard"] .sx-category-list{list-style:none;margin:0;padding:0}
body[data-page="dashboard"] .sx-category-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;font-size:.75rem;border-bottom:1px solid var(--border)}
body[data-page="dashboard"] .sx-category-list li:last-child{border-bottom:0}
body[data-page="dashboard"] .sx-category-label{min-width:0;overflow-wrap:anywhere}
body[data-page="dashboard"] .sx-category-count{flex:none;color:var(--muted-foreground);font: .6875rem var(--font-mono);font-variant-numeric:tabular-nums}
body[data-page="dashboard"] .sx-outcome-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
body[data-page="dashboard"] .sx-outcome-card{display:flex;flex-direction:column;min-width:0;padding:.75rem;border:1px solid var(--border);border-radius:.25rem;background:color-mix(in oklab,var(--muted) 40%,transparent)}
body[data-page="dashboard"] .sx-outcome-card dt{margin:.25rem 0 0;color:var(--foreground);font-size:.75rem;font-weight:400;letter-spacing:0;text-transform:none}
body[data-page="dashboard"] .sx-outcome-card dd{order:-1;margin:0;font:600 1.5rem/1.33 var(--font-sans);font-variant-numeric:tabular-nums}
body[data-page="dashboard"] .sx-outcome-success{border-color:color-mix(in oklab,var(--success) 30%,transparent);background:color-mix(in oklab,var(--success) 8%,transparent)}
body[data-page="dashboard"] .sx-outcome-success dd{color:var(--success)}
body[data-page="dashboard"] .sx-response-panel .hint{margin:1rem 0;line-height:1.25rem}
@media(max-width:1279px){
  body[data-page="dashboard"] .sx-dashboard-distributions,
  body[data-page="dashboard"] .sx-dashboard-detail{grid-template-columns:1fr}
}

body[data-page="events"] #detail-panel .sx-panel-body{padding-top:0}
body[data-page="events"] #detail-panel #detail-fields{padding-bottom:.25rem}
body[data-page="events"] #detail-panel h3{margin-top:1rem}

body[data-page="alerts"] #detail-fields{padding:0 0 1rem}
body[data-page="alerts"] .sx-alert-main .sx-notice{margin:1rem 0}
body[data-page="alerts"] #event-detail h4{margin:.75rem 0 .35rem;color:var(--muted-foreground);font-size:.6875rem;text-transform:uppercase}

body[data-page="incidents"] #create-panel .sx-panel-body{display:grid;gap:0}
body[data-page="incidents"] #detail-fields{padding:0 0 1rem}
body[data-page="incidents"] .sx-pane .table-scroll{border:1px solid var(--border);border-radius:var(--radius)}
body[data-page="incidents"] #investigation-workspace .sx-pane-grid{margin-bottom:1rem}
body[data-page="incidents"] .sx-incident-control button{width:100%}
body[data-page="incidents"] #response-form,
body[data-page="incidents"] #investigation-note-form{padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}

body[data-page="notifications"] #unread-count{margin:0}
body[data-page="notifications"] #send-panel .sx-panel-body{padding-top:0}
body[data-page="notifications"] .notification:last-child{border-bottom:0}

body[data-page="audit"] #audit-panel{margin:0}
body[data-page="audit"] #audit-detail-fields{padding:1rem}
body[data-page="audit"] #audit-detail-fields dd{margin-bottom:.5rem}
body[data-page="audit"] #audit-context{margin:0 1rem 1rem}

body[data-page="access"] .sx-content{min-height:calc(100dvh - 4rem)}
body[data-page="access"] .sx-auth-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,30rem);gap:1.25rem;align-items:stretch;max-width:64rem;margin:clamp(2rem,7vh,4.5rem) auto 0}
body[data-page="access"] .sx-auth-intro{display:flex;flex-direction:column;justify-content:center;min-height:25rem;padding:2rem;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,color-mix(in oklab,var(--primary) 10%,var(--card)),var(--card))}
body[data-page="access"] .sx-auth-intro-mark{display:grid;width:3rem;height:3rem;place-items:center;margin-bottom:1.25rem;border:1px solid color-mix(in oklab,var(--primary) 45%,transparent);border-radius:var(--radius);background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary)}
body[data-page="access"] .sx-auth-intro-mark svg{width:1.35rem;height:1.35rem}
body[data-page="access"] .sx-auth-intro h2{margin:0 0 .75rem;font-size:1.5rem;font-weight:600}
body[data-page="access"] .sx-auth-intro p{max-width:34rem;margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.65}
body[data-page="access"] .sx-auth-points{display:grid;gap:.65rem;margin:1.5rem 0 0;padding:0;list-style:none}
body[data-page="access"] .sx-auth-points li{display:flex;align-items:center;gap:.55rem;color:var(--foreground);font-size:.75rem}
body[data-page="access"] .sx-auth-points svg{width:.9rem;height:.9rem;color:var(--success)}
body[data-page="access"] #login-panel .sx-panel{height:100%}
body[data-page="access"] #identity{margin:.25rem 0;color:var(--foreground);font-size:.875rem;font-weight:600}
body[data-page="access"] #access-overview{max-width:64rem;margin:1rem auto 0}
body[data-page="access"] #users-panel{max-width:64rem;margin:1rem auto 0}
body[data-page="access"] .user-card button{margin-top:.25rem}

@media(max-width:900px){
  body[data-page="access"] .sx-auth-screen{grid-template-columns:1fr;max-width:34rem}
  body[data-page="access"] .sx-auth-intro{min-height:auto;padding:1.5rem}
}
@media(max-width:767px){
  .sx-topbar-actions{gap:.375rem}
  .sx-topbar-identity{gap:.375rem}
  .sx-topbar-actions #logout{width:2.75rem;padding:0}
  .sx-topbar-actions #logout .sx-action-label{display:none}
}

/* Live, API-backed UTC trend. */
body[data-page="dashboard"] .sx-trend-selector{max-width:14rem;margin-bottom:1.5rem}
body[data-page="dashboard"] .sx-trend-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
body[data-page="dashboard"] .sx-trend-column{min-width:0;text-align:center}
body[data-page="dashboard"] .sx-trend-plot{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:11rem;margin-top:1.5rem;border-bottom:1px solid var(--border)}
body[data-page="dashboard"] .sx-trend-value{position:absolute;width:100%;margin-bottom:.5rem;color:var(--muted-foreground);font:.625rem var(--font-mono)}
body[data-page="dashboard"] .sx-trend-bar{display:block;flex:none;border-radius:.25rem .25rem 0 0;background:var(--primary)}
body[data-page="dashboard"] .sx-trend-column time{display:block;margin-top:.5rem;color:var(--muted-foreground);font-size:.625rem;overflow-wrap:anywhere}
body[data-page="dashboard"] .sx-trend-details summary{padding:.75rem 1rem;border-top:1px solid var(--border);color:var(--muted-foreground);font-size:.75rem;cursor:pointer}
.sx-live-status{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
.sx-live-status[data-state="stale"]{color:var(--warning)}
@media(max-width:480px){body[data-page="dashboard"] .sx-trend-chart{gap:.375rem}}

/* Standalone email verification and invitation activation. */
.sx-auth-centered{min-height:100dvh;display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem)}
.sx-auth-centered .sx-auth-card{width:100%;max-width:32rem;display:grid;gap:1.5rem;margin:auto}
.sx-auth-centered .sx-auth-intro{text-align:center}
.sx-auth-centered .sx-auth-intro h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.25;margin:0 0 .75rem}
.sx-auth-centered .sx-auth-intro p{color:var(--muted-foreground);line-height:1.6;margin:0}
.sx-auth-centered .sx-auth-intro-mark{display:grid;place-items:center;width:3rem;height:3rem;margin:0 auto 1rem;border:1px solid var(--border);border-radius:var(--radius);color:var(--primary);background:var(--card)}
.sx-auth-centered .sx-auth-points{list-style:none;padding:0;margin:1rem 0 0;color:var(--muted-foreground);font-size:.8rem;line-height:1.7}
.sx-auth-centered .sx-panel-body{display:grid;gap:1rem}
.sx-auth-centered .sx-panel-body label{margin:0}
.sx-auth-centered #code{font-size:1.25rem;letter-spacing:.3em;text-align:center}
.sx-auth-centered #resend{background:var(--secondary);color:var(--foreground)}
.sx-auth-centered .hint{text-align:center;margin:0}

.sx-resend-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.sx-resend-row #resend{flex:1}.sx-resend-row #resend-timer{font-size:.8rem;color:var(--muted-foreground)}

body[data-page="access"] #users{display:grid;gap:1rem;margin-top:1.5rem}
body[data-page="access"] .sx-user-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
body[data-page="access"] .sx-user-actions button{margin:0}
@media(max-width:480px){body[data-page="access"] .sx-user-actions button{flex:1 1 100%}}

/* Incident handoff uses the existing theme button palette. */
.sx-incident-link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:2.5rem;padding:.6rem .9rem;border:1px solid var(--primary);border-radius:var(--radius);background:var(--accent);color:var(--primary);font-size:.875rem;font-weight:600;text-decoration:none;transition:background .15s ease,color .15s ease}
.sx-incident-link:hover{background:var(--primary);color:var(--primary-foreground)}
.sx-incident-link svg{width:1rem;height:1rem}

.sx-alert-incident-action{padding-top:.75rem}

body[data-page="audit"] .sx-audit-layout>.sx-panel{min-width:0}
body[data-page="audit"] #rows td:first-child{white-space:nowrap}
body[data-page="audit"] #rows td:nth-child(4),body[data-page="audit"] #rows td:nth-child(5){overflow-wrap:anywhere}
body[data-page="audit"] #audit-panel .sx-panel-head>div:last-child{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}

/* Shield geometry and palette adapted from SentinelX Clarity's ShieldLogo3D.
   Layered SVG/CSS retains the existing static frontend and logo dimensions. */
.sx-shield-logo{perspective:140px}
.sx-shield-rotor{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(3.4deg) rotateY(-24deg);animation:sx-shield-turn 8.73s linear infinite}
.sx-shield-logo .sx-shield-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sx-shield-layer:nth-child(1){transform:translateZ(-2px)}
.sx-shield-layer:nth-child(2){transform:translateZ(-1.33px)}
.sx-shield-layer:nth-child(3){transform:translateZ(-.67px)}
.sx-shield-layer:nth-child(4){transform:translateZ(0)}
.sx-shield-layer:nth-child(5){transform:translateZ(.67px)}
.sx-shield-layer:nth-child(6){transform:translateZ(1.33px)}
.sx-shield-layer:nth-child(7){transform:translateZ(2px);backface-visibility:hidden}
@keyframes sx-shield-turn{from{transform:rotateX(3.4deg) rotateY(-24deg)}to{transform:rotateX(3.4deg) rotateY(336deg)}}
@media(prefers-reduced-motion:reduce){.sx-shield-rotor{animation:none}}

/* Company finder only: no changes to tenant pages, shared navigation or auth UI. */
body[data-page="company-login"] .sx-company-landing{
  min-height:100dvh;
  padding:clamp(1rem,4vw,3rem);
  background:
    radial-gradient(circle at 10% 10%,color-mix(in oklab,var(--primary) 13%,transparent),transparent 42%),
    radial-gradient(circle at 92% 90%,color-mix(in oklab,var(--primary) 7%,transparent),transparent 44%),
    var(--background);
}
body[data-page="company-login"] .sx-company-shell{
  width:100%;
  max-width:72rem;
  display:grid;
  gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(1.25rem,3.6vw,2.75rem);
  margin:auto;
  border:1px solid var(--border);
  border-radius:calc(var(--radius) * 3);
  background:var(--card);
  box-shadow:0 1.5rem 4rem rgba(24,38,56,.09);
}
body[data-page="company-login"] .sx-company-brand{display:flex;align-items:center;gap:.875rem;min-width:0}
body[data-page="company-login"] .sx-company-brand-mark{
  width:3rem;height:3rem;flex:0 0 3rem;
  display:grid;place-items:center;
  border:1px solid color-mix(in oklab,var(--primary) 40%,transparent);
  border-radius:calc(var(--radius) * 2);
  background:color-mix(in oklab,var(--primary) 10%,var(--card));
}
body[data-page="company-login"] .sx-company-brand-mark > svg{display:block;width:1.5rem;height:1.5rem}
body[data-page="company-login"] .sx-company-brand-copy{display:grid;gap:.2rem;min-width:0}
body[data-page="company-login"] .sx-company-brand-copy strong{color:var(--foreground);font-size:1.2rem;line-height:1.2}
body[data-page="company-login"] .sx-company-brand-copy>span{color:var(--muted-foreground);font-size:.625rem;font-weight:700;letter-spacing:.1em}
body[data-page="company-login"] .sx-company-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(19rem,.92fr);gap:clamp(1.25rem,3vw,3rem);align-items:stretch}
body[data-page="company-login"] .sx-company-intro{
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;text-align:left;
  padding:clamp(1rem,2.4vw,2rem);
  border:1px solid color-mix(in oklab,var(--primary) 16%,var(--border));
  border-radius:calc(var(--radius) * 2);
  background:linear-gradient(145deg,color-mix(in oklab,var(--primary) 9%,var(--card)),var(--card));
}
body[data-page="company-login"] .sx-company-kicker{
  margin:0 0 .875rem;color:var(--primary)!important;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;
}
body[data-page="company-login"] .sx-company-intro h1{
  max-width:25rem;margin:0 0 1rem;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1.13;letter-spacing:-.025em;
}
body[data-page="company-login"] .sx-company-intro>p:not(.sx-company-kicker){
  max-width:33rem;margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.75;
}
body[data-page="company-login"] .sx-company-steps{display:grid;gap:1.125rem;margin-top:2rem}
body[data-page="company-login"] .sx-company-step{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;align-items:start}
body[data-page="company-login"] .sx-company-step-number{
  display:grid;place-items:center;width:2rem;height:2rem;
  border:1px solid color-mix(in oklab,var(--primary) 24%,var(--border));
  border-radius:50%;background:var(--card);color:var(--primary);
  font:.6875rem var(--font-mono);font-weight:700;
}
body[data-page="company-login"] .sx-company-step h2{margin:.05rem 0 .2rem;color:var(--foreground);font-size:.85rem;font-weight:600}
body[data-page="company-login"] .sx-company-step p{margin:0;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
body[data-page="company-login"] .sx-company-find-panel{display:flex;flex-direction:column;justify-content:center;border-radius:calc(var(--radius) * 2)}
body[data-page="company-login"] .sx-company-find-panel .sx-panel-head{padding:1.5rem 1.5rem 1.125rem}
body[data-page="company-login"] .sx-company-find-panel .sx-panel-head h2{font-size:1.15rem}
body[data-page="company-login"] .sx-company-find-panel .sx-panel-head p{margin-top:.45rem;font-size:.8rem}
body[data-page="company-login"] .sx-company-find-panel .sx-panel-body{padding:1.5rem;gap:1rem}
body[data-page="company-login"] #company{height:2.875rem;margin-top:.6rem;background:var(--card);font-size:.875rem}
body[data-page="company-login"] #company-login-form button{width:100%;min-height:2.875rem;white-space:normal;text-align:center}
body[data-page="company-login"] #message{min-height:1.25rem;margin:0;color:var(--muted-foreground);font-size:.8125rem;line-height:1.4}
body[data-page="company-login"] #message:not(:empty){padding:.5rem .65rem;border-radius:var(--radius);background:var(--surface-subtle)}
body[data-page="company-login"] .hint{color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
body[data-page="company-login"] .sx-company-footnote{
  margin:0;padding-top:1.25rem;border-top:1px solid var(--border);
  color:var(--muted-foreground);font-size:.75rem;text-align:center;line-height:1.55;
}
@media(max-width:800px){
  body[data-page="company-login"] .sx-company-layout{grid-template-columns:1fr}
  body[data-page="company-login"] .sx-company-intro{padding:1.5rem}
}
@media(max-width:480px){
  body[data-page="company-login"] .sx-company-shell{padding:1rem;gap:1.25rem}
  body[data-page="company-login"] .sx-company-intro{padding:1.125rem}
  body[data-page="company-login"] .sx-company-find-panel .sx-panel-head{padding:1rem}
  body[data-page="company-login"] .sx-company-find-panel .sx-panel-body{padding:1rem}
}

/* Access-page logo frame alignment only; the approved shield geometry and animation are unchanged. */
body[data-page="access"] .sx-auth-intro-mark.sx-shield-logo .sx-shield-rotor{
  width:1.35rem;height:1.35rem;flex:none;margin:0;justify-self:center;align-self:center;
}

/* Onboarding design only — all existing signup / verify control IDs remain unchanged. */
body[data-page="signup"] .sx-signup-landing{
  min-height:100dvh;
  padding:clamp(1rem,4vw,3rem);
  background:
    radial-gradient(circle at 8% 8%,color-mix(in oklab,var(--primary) 13%,transparent),transparent 43%),
    radial-gradient(circle at 90% 92%,color-mix(in oklab,var(--primary) 8%,transparent),transparent 45%),
    var(--background);
}
body[data-page="signup"] .sx-signup-shell{
  width:100%;max-width:75rem;display:grid;gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.125rem,3.5vw,2.75rem);margin:auto;
  border:1px solid var(--border);border-radius:calc(var(--radius)*3);
  background:var(--card);box-shadow:0 1.5rem 4rem rgba(24,38,56,.09);
}
body[data-page="signup"] .sx-signup-brand{display:flex;align-items:center;gap:.875rem;min-width:0}
body[data-page="signup"] .sx-signup-brand-mark{
  display:grid;place-items:center;width:3rem;height:3rem;flex:0 0 3rem;
  border:1px solid color-mix(in oklab,var(--primary) 40%,transparent);
  border-radius:calc(var(--radius)*2);
  background:color-mix(in oklab,var(--primary) 10%,var(--card));
}
body[data-page="signup"] .sx-signup-brand-copy{display:grid;gap:.2rem;min-width:0}
body[data-page="signup"] .sx-signup-brand-copy strong{color:var(--foreground);font-size:1.2rem;line-height:1.2}
body[data-page="signup"] .sx-signup-brand-copy>span{color:var(--muted-foreground);font-size:.625rem;font-weight:700;letter-spacing:.1em}
body[data-page="signup"] .sx-signup-layout{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(1.25rem,3vw,3rem);align-items:stretch;
}
body[data-page="signup"] .sx-signup-intro{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  text-align:left;padding:clamp(1rem,2.4vw,2rem);
  border:1px solid color-mix(in oklab,var(--primary) 16%,var(--border));
  border-radius:calc(var(--radius)*2);
  background:linear-gradient(145deg,color-mix(in oklab,var(--primary) 9%,var(--card)),var(--card));
}
body[data-page="signup"] .sx-signup-kicker{
  margin:0 0 .875rem!important;color:var(--primary)!important;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;
}
body[data-page="signup"] .sx-signup-intro h1{
  max-width:29rem;margin:0 0 1rem;
  font-size:clamp(1.75rem,3.35vw,2.75rem);
  line-height:1.13;letter-spacing:-.025em;
}
body[data-page="signup"] .sx-signup-intro>p:not(.sx-signup-kicker){
  max-width:32rem;color:var(--muted-foreground);
  font-size:.875rem;line-height:1.75;margin:0;
}
body[data-page="signup"] .sx-signup-steps{display:grid;gap:1.25rem;margin-top:2rem}
body[data-page="signup"] .sx-signup-step{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;align-items:start}
body[data-page="signup"] .sx-signup-step-number{
  display:grid;place-items:center;width:2rem;height:2rem;
  border:1px solid color-mix(in oklab,var(--primary) 24%,var(--border));
  border-radius:50%;background:var(--card);color:var(--primary);
  font:.6875rem var(--font-mono);font-weight:700;
}
body[data-page="signup"] .sx-signup-step h2{margin:.05rem 0 .2rem;color:var(--foreground);font-size:.85rem;font-weight:600}
body[data-page="signup"] .sx-signup-step p{margin:0;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
body[data-page="signup"] .sx-signup-panel{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  border-radius:calc(var(--radius)*2);
}
body[data-page="signup"] .sx-signup-panel .sx-panel-head{padding:1.5rem 1.5rem 1.125rem}
body[data-page="signup"] .sx-signup-panel .sx-panel-head h2{font-size:1.15rem}
body[data-page="signup"] .sx-signup-panel .sx-panel-head p{margin-top:.45rem;font-size:.8rem}
body[data-page="signup"] .sx-signup-panel .sx-panel-body{padding:1.5rem;gap:1rem}
body[data-page="signup"] .sx-signup-panel label{min-width:0}
body[data-page="signup"] .sx-signup-panel input:not([type="checkbox"]){
  height:2.75rem;background:var(--card);font-size:.875rem;
}
body[data-page="signup"] .sx-signup-field-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.875rem;min-width:0;
}
body[data-page="signup"] .sx-signup-form-note{
  margin:0;color:var(--muted-foreground);font-size:.75rem;line-height:1.6;
}
body[data-page="signup"] #signup-form button[type="submit"],
body[data-page="signup"] #verify-form button[type="submit"]{
  min-height:2.875rem;width:100%;white-space:normal;text-align:center;
}
body[data-page="signup"] #verify-form #code{height:3rem;text-align:center;font-size:1.25rem;letter-spacing:.3em}
body[data-page="signup"] #complete h3{margin:0;color:var(--foreground);font-size:1rem}
body[data-page="signup"] #complete p{margin:0;color:var(--muted-foreground);line-height:1.6}
body[data-page="signup"] #tenant-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;border-radius:var(--radius);
  background:var(--primary);color:var(--primary-foreground);font-size:.875rem;font-weight:600;
}
body[data-page="signup"] .sx-signup-panel #message{
  display:block;margin:0;padding:0 1.5rem 1.5rem;
  color:var(--muted-foreground);font-size:.8rem;line-height:1.5;
}
body[data-page="signup"] .sx-signup-panel #message:empty{display:none}
body[data-page="signup"] .sx-signup-panel #message:not(:empty){
 margin:0 1.5rem 1.5rem;padding:.85rem 1rem;
}
body[data-page="signup"] .sx-signup-panel #message.success{
 background:color-mix(in oklab,var(--success) 19%,var(--card));
 border-color:color-mix(in oklab,var(--success) 65%,var(--border));
 color:var(--foreground);
}
body[data-page="company-login"] #message.success,
body[data-page="notifications"] .operational-message.success{
 background:color-mix(in oklab,var(--success) 19%,var(--card));
 border-color:color-mix(in oklab,var(--success) 65%,var(--border));
 color:var(--foreground);font-weight:700;
}

body[data-page="signup"] .sx-signup-panel #message.error{color:var(--destructive)}
body[data-page="signup"] .sx-signup-panel .hint{font-size:.75rem;color:var(--muted-foreground)}
body[data-page="signup"] .sx-signup-footnote{
  margin:0;padding-top:1.25rem;border-top:1px solid var(--border);
  color:var(--muted-foreground);font-size:.75rem;text-align:center;line-height:1.55;
}
@media(max-width:860px){
  body[data-page="signup"] .sx-signup-layout{grid-template-columns:1fr}
  body[data-page="signup"] .sx-signup-intro{padding:1.5rem}
}
@media(max-width:480px){
  body[data-page="signup"] .sx-signup-shell{padding:1rem;gap:1.25rem}
  body[data-page="signup"] .sx-signup-intro{padding:1.125rem}
  body[data-page="signup"] .sx-signup-field-grid{grid-template-columns:1fr;gap:0}
  body[data-page="signup"] .sx-signup-panel .sx-panel-head{padding:1rem}
  body[data-page="signup"] .sx-signup-panel .sx-panel-body{padding:1rem}
  body[data-page="signup"] .sx-signup-panel #message{padding:0 1rem 1rem}
}

/* The shared seven-layer shield renderer is the single logo implementation. */
body[data-page="signup"] .sx-signup-brand-mark.sx-shield-logo .sx-shield-rotor,
body[data-page="company-login"] .sx-company-brand-mark.sx-shield-logo .sx-shield-rotor{
  width:1.65rem;height:1.65rem;flex:none;
  justify-self:center;align-self:center;
}

/* Keep the 3D shield visually centered in all standalone verification/activation frames. */
.sx-auth-centered .sx-auth-intro-mark.sx-shield-logo .sx-shield-rotor{
  width:1.4rem;height:1.4rem;flex:none;justify-self:center;align-self:center;
}

/* Administrator-only website connection card, using existing Access panel styling. */
body[data-page="access"] .sx-site-secret{
 white-space:pre-wrap;overflow-wrap:anywhere;
 border:1px solid var(--border);background:var(--surface-subtle);
 border-radius:var(--radius);padding:1rem;font-family:var(--font-mono);
 font-size:.8rem;
}

/* Task 41 administrative workspaces: all runtime styling remains centralized. */
/* Task 41: compact administrative overview with individually expandable tools. */
.sx-access-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.65rem;margin:.4rem 0 1.25rem}
.sx-access-shortcuts a{display:flex;align-items:center;min-height:3rem;padding:.65rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-raised);color:var(--primary);font-size:.875rem;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.sx-access-shortcuts a:hover,.sx-access-shortcuts a:focus-visible{background:var(--accent);text-decoration:underline}
.sx-access-workspaces{display:grid;gap:.85rem;padding-top:.9rem;padding-bottom:1.2rem}
.sx-access-fold{min-width:0;scroll-margin-top:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-raised);overflow:visible}
.sx-access-fold>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem;cursor:pointer;padding:1rem 1.15rem;font-size:.95rem;font-weight:650;color:var(--foreground)}
.sx-access-fold>summary:hover{background:var(--accent)}
.sx-access-fold[open]>summary{border-bottom:1px solid var(--border)}
.sx-access-summary{font-weight:400;font-size:.79rem;color:var(--muted-foreground)}
.sx-access-fold-body{display:grid;gap:.9rem;padding:1rem 1.15rem;min-width:0}
#users-panel>.sx-panel-body{padding:1rem 1.15rem}
.sx-access-fold .sx-panel-body{min-width:0}
.sx-access-fold pre,.sx-access-fold code{max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
.sx-access-fold .user-card{margin-top:.55rem}
@media(max-width:680px){.sx-access-shortcuts{grid-template-columns:1fr}.sx-access-fold>summary{display:block}.sx-access-summary{display:block;margin-top:.3rem}.sx-access-fold-body{padding:.75rem}}

/* Task 41: scoped rules workspace, inheriting SentinelX's shared theme. */
.sx-rule-tools{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;margin-bottom:1rem}
.sx-rule-tools label{min-width:min(100%,18rem);flex:1 1 18rem}
.sx-rule-tools button{flex:0 0 auto}
#rule-fields{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);gap:.65rem 1rem}
#rule-fields dt{font-weight:600;color:var(--muted-foreground)}
#rule-fields dd{margin:0;overflow-wrap:anywhere}
#rule-definition{max-height:24rem;overflow:auto;padding:1rem;background:var(--code);border:1px solid var(--border);border-radius:var(--radius);white-space:pre-wrap;overflow-wrap:anywhere}
#rule-state-form{max-width:46rem;display:grid;gap:.8rem}
#rule-state-form textarea{min-height:5.25rem;width:100%}
.sx-rule-ack{display:flex;align-items:start;gap:.6rem}
.sx-rule-ack input{flex:none;margin-top:.25rem}
#rule-rows td{overflow-wrap:anywhere}
@media(max-width:600px){#rule-fields{grid-template-columns:1fr}#rule-fields dt{margin-top:.5rem}}


/* Shared workspace header: the heading and authenticated controls always
 * occupy one row. Each page retains its existing title, subtitle, refresh
 * handler and independent right-hand detail workspace. */
.sx-topbar{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem}
.sx-topbar>.sx-title{grid-column:1;grid-row:1;min-width:0}
.sx-topbar>.sx-topbar-actions{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center;min-width:0;gap:.5rem;margin-left:0}
.sx-topbar-actions>.sx-mobile-menu{display:none}
.sx-topbar .sx-topbar-identity{display:flex;align-items:center;justify-content:flex-end;gap:.625rem;min-width:0}
.sx-topbar .sx-user-copy{display:block;min-width:0;text-align:right}
.sx-topbar .sx-user-copy #identity{display:block;max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* At tablet widths retain an icon-only navigation rail rather than a
 * redundant header menu: all links remain keyboard accessible. */
@media(min-width:600px) and (max-width:767px){
 .sx-sidebar,body.sx-sidebar-collapsed .sx-sidebar{
  position:sticky;left:auto;top:0;transform:none;width:4rem;flex:0 0 4rem;height:100dvh;box-shadow:none
 }
 .sx-brand,body.sx-sidebar-collapsed .sx-brand{justify-content:center;padding:0 .5rem}
 .sx-brand-copy,body.sx-sidebar-collapsed .sx-brand-copy,.sx-collapse,.sx-sidebar-footer{display:none}
 .sx-nav a,body.sx-sidebar-collapsed .sx-nav a{
  position:relative;grid-template-columns:1fr;place-items:center;padding:0 .5rem
 }
 .sx-nav-label,body.sx-sidebar-collapsed .sx-nav-label{
  display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
 }
 .sx-overlay{display:none}
 .sx-topbar{padding:.625rem 1rem}
 .sx-topbar .sx-user-copy{display:block}
 .sx-topbar-actions #logout{width:auto;min-height:2.75rem;padding:.5rem .75rem}
 .sx-topbar-actions #logout .sx-action-label{display:inline}
}
@media(max-width:599px){
 .sx-topbar{grid-template-columns:minmax(0,1fr) auto;gap:.5rem;padding:.5rem .75rem}
 .sx-topbar .sx-title p{display:none}
 .sx-topbar-actions>.sx-mobile-menu{display:inline-grid;flex:none}
 .sx-topbar .sx-user-copy{display:block}
 .sx-topbar .sx-user-copy #identity{max-width:5.5rem;font-size:.6875rem}
 .sx-topbar .sx-user-role{display:none}
 .sx-topbar .sx-topbar-identity,.sx-topbar>.sx-topbar-actions{gap:.375rem}
}
@media(max-width:380px){
 .sx-topbar{gap:.25rem;padding:.5rem}
 .sx-topbar .sx-title h1{font-size:.875rem}
 .sx-topbar .sx-user-copy #identity{max-width:4.25rem}
 .sx-topbar .sx-icon-button,.sx-topbar-actions #logout{
  width:2.375rem;height:2.375rem;min-height:2.375rem
 }
}

/* Sidebar visual separation: a navigation surface with depth rather than a
 * single vertical rule. Shared by every authenticated SentinelX workspace. */
.sx-sidebar{
  background:linear-gradient(
    168deg,
    color-mix(in oklab,var(--sidebar) 88%,var(--card)) 0%,
    var(--sidebar) 52%,
    color-mix(in oklab,var(--sidebar) 91%,var(--sidebar-primary)) 100%
  );
  border-right:1px solid color-mix(in oklab,var(--sidebar-border) 80%,var(--foreground));
  box-shadow:4px 0 22px rgba(24,38,56,.12),1px 0 5px rgba(24,38,56,.06);
}
.sx-sidebar::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:.25rem;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--primary) 9%,transparent));
}
.sx-sidebar .sx-brand{
  background:color-mix(in oklab,var(--card) 42%,transparent);
  border-bottom-color:color-mix(in oklab,var(--sidebar-border) 75%,transparent);
}
.sx-sidebar .sx-nav{gap:.3rem;padding:.875rem .625rem}
.sx-sidebar .sx-nav a{
  position:relative;
  border:1px solid transparent;
}
.sx-sidebar .sx-nav a[aria-current="page"]{
  background:linear-gradient(
    90deg,
    color-mix(in oklab,var(--sidebar-primary) 91%,var(--card)),
    var(--sidebar-primary)
  );
  border-color:color-mix(in oklab,var(--primary) 13%,var(--sidebar-border));
  box-shadow:0 2px 7px rgba(24,38,56,.055);
  font-weight:650;
}
.sx-sidebar .sx-nav a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:.45rem;bottom:.45rem;
  width:.1875rem;border-radius:0 .1875rem .1875rem 0;background:var(--primary);
}
.sx-sidebar .sx-sidebar-footer{
  background:color-mix(in oklab,var(--card) 32%,transparent);
  border-top-color:color-mix(in oklab,var(--sidebar-border) 75%,transparent);
}
/* Mobile still behaves as an overlay: only its depth is refined. */
@media(max-width:599px){
 .sx-sidebar{
  box-shadow:12px 0 42px rgba(24,38,56,.25),0 20px 60px rgba(24,38,56,.15);
 }
}