:root {
    color-scheme: light;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-subtle: #f8fafc;
    --surface-strong: #0b1220;
    --text: #152033;
    --text-muted: #667085;
    --text-soft: #98a2b3;
    --border: #e3e8ef;
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --primary-soft: #eaf1ff;
    --success: #0e9f6e;
    --success-soft: #e9f8f2;
    --warning: #d97706;
    --warning-soft: #fff6e5;
    --danger: #dc2626;
    --danger-soft: #fff0f0;
    --violet: #7c3aed;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 12px 30px rgba(16, 24, 40, .08);
    --radius-sm: .55rem;
    --radius-md: .85rem;
    --radius-lg: 1.25rem;
    --sidebar-width: 17rem;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #08101f;
    --surface: #101a2d;
    --surface-subtle: #142036;
    --surface-strong: #050a14;
    --text: #edf2f9;
    --text-muted: #a5b1c6;
    --text-soft: #748198;
    --border: #25324a;
    --primary: #60a5fa;
    --primary-strong: #3b82f6;
    --primary-soft: #172b4d;
    --success: #34d399;
    --success-soft: #10372d;
    --warning: #fbbf24;
    --warning-soft: #3a2b10;
    --danger: #f87171;
    --danger-soft: #401b22;
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { min-width: 20rem; background: var(--bg); }
body { margin: 0; color: var(--text); font-family: var(--font-sans); background: var(--bg); line-height: 1.5; }
button, input { font: inherit; }
select, textarea { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 999; top: .75rem; left: .75rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.app-sidebar { position: sticky; z-index: 30; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.3rem 1rem; color: #d8e2f1; background: #0b1220; border-right: 1px solid #1d293d; }
.brand { min-height: 3.4rem; display: flex; align-items: center; gap: .8rem; padding: 0 .65rem; }
.brand-mark { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; flex: none; border-radius: .8rem; color: white; font-weight: 850; font-size: 1.2rem; background: linear-gradient(145deg, #3b82f6, #635bff); box-shadow: 0 8px 20px rgba(59, 130, 246, .25); }
.brand-copy { min-width: 0; display: grid; line-height: 1.2; }
.brand-copy strong { color: white; letter-spacing: .04em; }
.brand-copy small { margin-top: .25rem; color: #8fa0ba; white-space: nowrap; }
.app-nav { margin-top: 2.15rem; display: grid; gap: .35rem; }
.nav-label { margin: 1.25rem .7rem .4rem; color: #667690; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: .75rem; min-height: 2.8rem; padding: .6rem .7rem; border-radius: .7rem; color: #aebbd0; font-size: .9rem; font-weight: 650; text-decoration: none; transition: background .16s, color .16s; }
.nav-item:hover { color: white; background: #141f33; }
.nav-item.is-active { color: white; background: linear-gradient(90deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .08)); box-shadow: inset 3px 0 #60a5fa; }
.nav-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid #2b3951; border-radius: .55rem; color: #a9bddc; font-size: .65rem; letter-spacing: .02em; }
.sidebar-footer { margin-top: auto; padding: 1rem .65rem .2rem; border-top: 1px solid #1e2a40; }
.platform-state { display: flex; align-items: center; gap: .65rem; font-size: .78rem; }
.platform-state > span:last-child { display: grid; }
.platform-state small { color: #7f8da3; }
.app-overlay { display: none; }
.app-stage { min-width: 0; }

.app-topbar { position: sticky; z-index: 20; top: 0; min-height: 4.6rem; display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
.topbar-context { display: grid; line-height: 1.25; }
.topbar-context strong { margin-top: .18rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .65rem; }
.icon-button { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: .7rem; color: var(--text-muted); background: var(--surface); cursor: pointer; }
.icon-button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.menu-button { display: none; }
.user-menu { position: relative; }
.user-trigger { min-height: 2.8rem; display: flex; align-items: center; gap: .65rem; padding: .3rem .55rem; border: 1px solid transparent; border-radius: .75rem; color: var(--text); background: transparent; cursor: pointer; }
.user-trigger:hover { border-color: var(--border); background: var(--surface-subtle); }
.avatar { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: .65rem; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.user-copy { max-width: 14rem; display: grid; line-height: 1.2; text-align: left; }
.user-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.user-copy small { margin-top: .18rem; color: var(--text-muted); font-size: .7rem; }
.user-popover { position: absolute; top: calc(100% + .6rem); right: 0; width: 17rem; padding: .65rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); box-shadow: var(--shadow-md); }
.user-popover[hidden] { display: none; }
.popover-user { display: grid; gap: .45rem; padding: .55rem .55rem .8rem; border-bottom: 1px solid var(--border); }
.user-popover a { display: block; margin-top: .5rem; padding: .65rem; border-radius: .55rem; color: var(--danger); font-size: .85rem; font-weight: 700; text-decoration: none; }
.user-popover a:hover { background: var(--danger-soft); }

.app-main { width: min(100%, 96rem); margin: 0 auto; padding: clamp(1.35rem, 3vw, 2.5rem); }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.75rem; }
.page-header h1 { margin: .25rem 0 .4rem; font-size: clamp(1.75rem, 3vw, 2.45rem); letter-spacing: -.035em; line-height: 1.15; }
.page-header p { max-width: 44rem; margin: 0; color: var(--text-muted); }
.page-header-actions { display: flex; align-items: center; gap: .8rem; }
.timestamp { color: var(--text-muted); font-size: .78rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card, .panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-card { min-height: 9.5rem; display: grid; align-content: space-between; padding: 1.15rem; }
.metric-card--attention { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.metric-card__top { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.metric-card > strong { margin-top: .75rem; font-size: 2rem; letter-spacing: -.04em; }
.metric-card > small { color: var(--text-muted); }
.metric-icon { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .65rem; font-size: .62rem; font-weight: 850; }
.metric-icon--blue { color: var(--primary); background: var(--primary-soft); }
.metric-icon--green { color: var(--success); background: var(--success-soft); }
.metric-icon--violet { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--surface)); }
.metric-icon--amber { color: var(--warning); background: var(--warning-soft); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(17rem, .7fr); gap: 1rem; }
.panel { padding: 1.25rem; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.panel-header h2 { margin: .18rem 0 0; font-size: 1.05rem; }
.text-link { color: var(--primary); font-size: .8rem; font-weight: 750; text-decoration: none; }
.status-list { display: grid; }
.status-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.status-row > span:nth-child(2) { display: grid; }
.status-row small { color: var(--text-muted); font-size: .76rem; }
.status-symbol { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }
.status-symbol--success { color: var(--success); background: var(--success-soft); }
.status-symbol--warning { color: var(--warning); background: var(--warning-soft); }
.status-symbol--danger { color: var(--danger); background: var(--danger-soft); }
.definition-list { margin: 0 0 1.2rem; }
.definition-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.definition-list dt { color: var(--text-muted); }
.definition-list dd { margin: 0; font-weight: 700; text-align: right; }

.badge { width: fit-content; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.badge--success { color: var(--success); background: var(--success-soft); }
.badge--warning { color: var(--warning); background: var(--warning-soft); }
.badge--danger { color: var(--danger); background: var(--danger-soft); }
.badge--neutral { color: var(--text-muted); background: var(--surface-subtle); border: 1px solid var(--border); }
.status-dot { width: .48rem; height: .48rem; display: inline-block; flex: none; border-radius: 50%; }
.status-dot--success { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent); }
.alert { display: grid; gap: .15rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: var(--radius-md); font-size: .85rem; }
.alert--warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); }
.alert--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.alert--success { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft); }
.alert--info { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: var(--primary-soft); }

.button { min-height: 2.8rem; display: inline-flex; justify-content: center; align-items: center; gap: .6rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .7rem; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: white; background: linear-gradient(135deg, #2563eb, #5548ed); box-shadow: 0 9px 20px rgba(37, 99, 235, .2); }
.button--primary:hover { background: linear-gradient(135deg, #1d4ed8, #4938db); }
.button--secondary { color: var(--text); border-color: var(--border); background: var(--surface-subtle); }
.button--block { width: 100%; }

.auth-body { min-height: 100vh; color: #edf2f9; background: #08101f; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(25rem, 1.05fr) minmax(28rem, .95fr); }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(2rem, 5vw, 5rem); background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .27), transparent 34%), radial-gradient(circle at 85% 75%, rgba(124, 58, 237, .2), transparent 30%), #08101f; }
.auth-story::after { content: ""; position: absolute; width: 32rem; height: 32rem; right: -14rem; bottom: -16rem; border: 1px solid rgba(96, 165, 250, .18); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(96,165,250,.025), 0 0 0 10rem rgba(96,165,250,.018); }
.brand--auth { padding: 0; }
.auth-story__content { position: relative; z-index: 1; max-width: 39rem; }
.auth-story__content .eyebrow { color: #7eb6ff; }
.auth-story h1 { max-width: 35rem; margin: .75rem 0 1rem; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.02; letter-spacing: -.055em; }
.auth-story p { max-width: 34rem; color: #a5b1c6; font-size: 1.05rem; }
.auth-proof { display: grid; gap: .7rem; margin: 2rem 0 0; padding: 0; list-style: none; color: #cbd5e1; }
.auth-proof span { margin-right: .55rem; color: #5ee0b1; }
.auth-version { position: relative; z-index: 1; color: #748198; }
.auth-panel { display: grid; place-items: center; min-height: 100vh; padding: 2rem; background: #0c1526; }
.auth-card { width: min(100%, 27rem); }
.auth-card > .eyebrow { color: #7eb6ff; }
.auth-card h2 { margin: .35rem 0 .3rem; font-size: 2rem; letter-spacing: -.035em; }
.auth-card > p { margin: 0 0 1.65rem; color: #a5b1c6; }
.form-stack { display: grid; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field label { color: #dce5f3; font-size: .8rem; font-weight: 700; }
.field input { width: 100%; min-height: 3rem; padding: .75rem .85rem; border: 1px solid #2a3851; border-radius: .7rem; color: #edf2f9; background: #101b2f; }
.field input::placeholder { color: #67758c; }
.field input:focus { border-color: #60a5fa; outline: 3px solid rgba(96,165,250,.15); }
.password-field { position: relative; }
.password-field input { padding-right: 4.2rem; }
.password-field button { position: absolute; top: .4rem; right: .4rem; bottom: .4rem; padding: 0 .65rem; border: 0; border-radius: .5rem; color: #8fb8ef; background: transparent; cursor: pointer; font-size: .75rem; font-weight: 750; }
.password-field button:hover { background: #172640; }
.auth-help { margin-top: 1.3rem !important; text-align: center; font-size: .78rem; }

.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.insight-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.insight-strip > div { display: grid; gap: .2rem; padding: .9rem 1rem; border-left: 1px solid var(--border); }
.insight-strip > div:first-child { border-left: 0; }
.insight-strip span { color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.insight-strip strong { font-size: 1.1rem; }
.operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.health-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: .75rem .25rem .25rem; }
.health-ring { --health-value: 0; width: 8.5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--success) calc(var(--health-value) * 1%), var(--border) 0); }
.health-ring::before { content: ""; grid-area: 1 / 1; width: 6.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.health-ring > span { z-index: 1; grid-area: 1 / 1; display: grid; text-align: center; }
.health-ring strong { font-size: 1.45rem; }
.health-ring small { color: var(--text-muted); }
.compact-stats { margin: 0; }
.compact-stats > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.compact-stats dt { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.compact-stats dd { margin: 0; font-weight: 800; }
.risk-list { display: grid; }
.risk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem 0; border-top: 1px solid var(--border); }
.risk-row > span:nth-child(2) { display: grid; }
.risk-row small, .risk-row time { color: var(--text-muted); font-size: .72rem; }
.risk-days { width: 2.85rem; height: 2.85rem; display: grid; place-content: center; border-radius: .65rem; color: var(--warning); background: var(--warning-soft); text-align: center; line-height: 1; }
.risk-days strong { font-size: .9rem; }
.risk-days small { margin-top: .15rem; font-size: .58rem; }
.risk-days--urgent { color: var(--danger); background: var(--danger-soft); }
.table-panel, .activity-panel { margin-top: 1rem; }
.table-scroll { overflow-x: auto; margin: 0 -1.25rem -1.25rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: .78rem; white-space: nowrap; }
.data-table th { padding: .7rem 1rem; color: var(--text-muted); background: var(--surface-subtle); text-align: left; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.data-table td { padding: .85rem 1rem; border-top: 1px solid var(--border); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.mono-reference { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--border); }
.activity-copy, .activity-result { display: grid; }
.activity-copy small, .activity-result time { color: var(--text-muted); font-size: .7rem; }
.activity-result { justify-items: end; gap: .25rem; }
.empty-state { display: grid; justify-items: center; padding: 2rem 1rem; color: var(--text-muted); text-align: center; }
.empty-state > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: .6rem; border-radius: 50%; color: var(--success); background: var(--success-soft); font-weight: 850; }
.empty-state p { margin: .25rem 0 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--text-muted); font-size: .78rem; }
.breadcrumb a { color: var(--primary); font-weight: 700; text-decoration: none; }
.filter-panel { margin-bottom: 1rem; padding-block: .9rem; }
.filter-bar { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(11rem, .3fr) auto auto; align-items: end; gap: .75rem; }
.filter-bar .field { gap: .25rem; }
.filter-bar .field label { color: var(--text-muted); }
.filter-bar input, .filter-bar select, .customer-form input, .customer-form select, .customer-form textarea { width: 100%; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .65rem; color: var(--text); background: var(--surface); }
.filter-bar input:focus, .filter-bar select:focus, .customer-form input:focus, .customer-form textarea:focus { border-color: var(--primary); outline: 3px solid color-mix(in srgb, var(--primary) 14%, transparent); }
.filter-reset { align-self: center; }
.customer-table-panel { margin-top: 0; }
.customer-identity { display: flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; }
.customer-identity > span:last-child { display: grid; }
.customer-identity small, .table-subtext { color: var(--text-muted); font-size: .68rem; }
.table-subtext { display: block; margin-top: .18rem; }
.table-action { width: 2rem; height: 2rem; text-decoration: none; }
.customer-form { display: grid; gap: 1.5rem; }
.customer-form fieldset { margin: 0; padding: 0 0 1.5rem; border: 0; border-bottom: 1px solid var(--border); }
.customer-form legend { margin-bottom: 1rem; font-size: 1rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field--wide { grid-column: 1 / -1; }
.customer-form .field > small { color: var(--text-muted); font-size: .7rem; }
.field-error { color: var(--danger); font-size: .72rem; font-weight: 700; }
.switch-field { display: flex; align-items: flex-start; gap: .7rem; }
.switch-field input { width: 1.1rem; min-height: 1.1rem; margin-top: .2rem; accent-color: var(--primary); }
.switch-field > span { display: grid; }
.switch-field small { color: var(--text-muted); }
.form-actions { display: flex; justify-content: flex-end; gap: .7rem; }
.customer-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.customer-hero__identity { display: flex; align-items: center; gap: 1rem; }
.customer-avatar { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1rem; color: var(--primary); background: var(--primary-soft); font-size: 1.5rem; font-weight: 850; }
.customer-hero h1 { margin: .15rem 0 0; font-size: 1.55rem; }
.customer-hero p { margin: .2rem 0 0; color: var(--text-muted); }
.customer-hero__actions { display: flex; align-items: center; gap: .7rem; }
.metric-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-definition dd { max-width: 14rem; overflow-wrap: anywhere; }
.customer-definition a { color: var(--primary); }
.address-block { margin-top: 1rem; padding: .8rem; border-radius: .7rem; background: var(--surface-subtle); }
.address-block p { margin: .35rem 0 0; white-space: pre-line; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.catalog-card { display:grid; gap:1.15rem; }
.catalog-card__top { display:flex; justify-content:space-between; align-items:center; }
.product-mark { width:3rem; height:3rem; display:grid; place-items:center; border-radius:.8rem; color:var(--primary); background:var(--primary-soft); font-weight:850; }
.catalog-card h2 { margin:.2rem 0; font-size:1.1rem; }.catalog-card p{margin:0;color:var(--text-muted);font-size:.8rem;min-height:2.4rem;}
.feature-catalog{margin-top:1rem}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.feature-grid>div{display:flex;align-items:center;gap:.7rem;padding:.75rem;border:1px solid var(--border);border-radius:.75rem}.feature-grid>div>span:last-child{display:grid}.feature-grid small,.fieldset-help{color:var(--text-muted);font-size:.7rem}.fieldset-help{margin-top:-.5rem}
.metric-date{font-size:1.35rem!important}.action-stack{display:grid;gap:.75rem}.action-stack .field{margin-bottom:.5rem}.action-stack input{width:100%;min-height:2.7rem;padding:.6rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface)}.button--danger{color:white;background:var(--danger)}.capacity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.capacity-card{padding:.8rem;border:1px solid var(--border);border-radius:.7rem}.capacity-card>span{display:flex;justify-content:space-between}.capacity-card small{color:var(--text-muted)}.progress{height:.45rem;margin-top:.65rem;overflow:hidden;border-radius:1rem;background:var(--border)}.progress span{display:block;height:100%;background:var(--primary)}

@media (max-width: 68rem) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .auth-shell { grid-template-columns: 1fr 1fr; }
    .insight-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .insight-strip > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--border); }
    .insight-strip > div:nth-child(5) { border-top: 1px solid var(--border); }
    .filter-bar { grid-template-columns: minmax(14rem, 1fr) minmax(10rem, .4fr) auto; }
    .filter-reset { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: fixed; left: 0; transform: translateX(-102%); width: min(var(--sidebar-width), 86vw); transition: transform .2s ease; }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-overlay { position: fixed; z-index: 25; inset: 0; background: rgba(3, 8, 18, .58); }
    .app-shell.sidebar-open .app-overlay { display: block; }
    .menu-button { display: grid; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { min-height: auto; padding: 1.5rem; }
    .auth-story__content, .auth-version { display: none; }
    .auth-panel { min-height: calc(100vh - 6.4rem); align-items: start; padding: 3rem 1.25rem; }
    .operations-grid { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
    .app-topbar { padding-inline: .8rem; }
    .topbar-context .eyebrow, .user-copy { display: none; }
    .app-main { padding: 1.1rem .8rem; }
    .metric-grid { grid-template-columns: 1fr; }
    .page-header-actions { flex-wrap: wrap; }
    .panel-header { align-items: flex-start; }
    .insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-strip > div { border-top: 1px solid var(--border); }
    .insight-strip > div:nth-child(odd) { border-left: 0; }
    .insight-strip > div:nth-child(-n+2) { border-top: 0; }
    .health-summary { grid-template-columns: 1fr; justify-items: center; }
    .compact-stats { width: 100%; }
    .risk-row { grid-template-columns: auto minmax(0, 1fr); }
    .risk-row time { grid-column: 2; }
    .activity-list li { grid-template-columns: auto minmax(0, 1fr); }
    .activity-result { grid-column: 2; justify-items: start; }
    .filter-bar, .form-grid { grid-template-columns: 1fr; }
    .filter-reset, .field--wide { grid-column: auto; }
    .customer-hero { align-items: flex-start; flex-direction: column; }
    .customer-hero__actions { width: 100%; justify-content: space-between; }
    .metric-grid--three { grid-template-columns: 1fr; }
    .catalog-grid,.feature-grid { grid-template-columns:1fr; }
    .capacity-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.runtime-definition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.runtime-definition > div { align-items: flex-start; }
.runtime-definition dd { overflow-wrap: anywhere; }
.entitlement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.entitlement-card { display:grid; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:.8rem; background:var(--surface-subtle); }
label.entitlement-card { grid-template-columns:minmax(0,1fr) auto; align-items:center; cursor:pointer; }
.entitlement-card.is-disabled { opacity:.58; cursor:not-allowed; }
.capacity-values { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.capacity-values span { display:grid; gap:.15rem; padding:.55rem; border-radius:.55rem; background:var(--surface); }
.capacity-values small { color:var(--text-muted); font-size:.65rem; }
.capacity-control .field { margin-top:.15rem; }
.capacity-control input[type=number] { width:100%; min-height:2.6rem; padding:.55rem .65rem; border:1px solid var(--border); border-radius:.6rem; color:var(--text); background:var(--surface); }
@media (max-width: 36rem) { .runtime-definition { grid-template-columns: 1fr; } }
@media (max-width: 52rem) { .entitlement-grid { grid-template-columns:1fr; } }
.metric-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.audit-filter { grid-template-columns:minmax(15rem,1fr) minmax(10rem,.35fr) minmax(10rem,.35fr) auto; }
.table-block { display:block; margin-top:.35rem; }
.audit-message { display:block; max-width:24rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:68rem) { .metric-grid--four { grid-template-columns:repeat(2,minmax(0,1fr)); } .audit-filter { grid-template-columns:1fr 1fr; } }
@media (max-width:36rem) { .metric-grid--four,.audit-filter { grid-template-columns:1fr; } }