@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Theme: Dark Premium */
  --bg-page: #060709;
  --bg-card: #0E0F12;
  --bg-card-hover: #14151A;
  --bg-elevated: #14151A;
  --border-card: #22242B;
  --border-light: #2D3039;
  
  --text-main: #FFFFFF;
  --text-secondary: #A0A5B1;
  --text-tertiary: #6C7280;
  
  --gold: #C9A84C;
  --gold-dim: #9A7A38;
  --gold-tint: rgba(201, 168, 76, 0.12);
  --gold-glow: rgba(201, 168, 76, 0.3);
  
  --status-ok-text: #51CF66;
  --status-ok-bg: rgba(81, 207, 102, 0.1);
  --status-err-text: #FF6B6B;
  --status-err-bg: rgba(255, 107, 107, 0.1);
  --status-warn-text: #FCC419;
  --status-warn-bg: rgba(252, 196, 25, 0.1);
  --status-info-text: #339AF0;
  --status-info-bg: rgba(51, 154, 240, 0.1);
  --status-purple-text: #B197FC;
  --status-purple-bg: rgba(177, 151, 252, 0.1);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 16px var(--gold-glow);
  
  --netiv-sidebar-w: 260px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--text-main); background: var(--bg-page); line-height: 1.5; font-size: 13px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }

/* LAYOUT */
.netiv-shell, .app, .shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg-page); }

/* TOP BAR */
.netiv-shell__header { background: #000000; border-bottom: 1px solid var(--border-card); flex-shrink: 0; position: sticky; top: 0; z-index: 50; }
.netiv-shell__header-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; gap: 16px; }
.netiv-shell__brand { display: flex; align-items: center; gap: 12px; }
.netiv-shell__brand img { height: 28px !important; width: auto !important; }
.netiv-shell__brand-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }

.netiv-shell__dao-badge { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.netiv-shell__dao-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-ok-text); box-shadow: 0 0 8px var(--status-ok-text); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.netiv-shell__ticker { display: flex; gap: 16px; padding: 0 24px 12px; overflow-x: auto; scrollbar-width: none; }
.netiv-ticker-item { display: flex; align-items: center; gap: 8px; font-size: 11px; border-right: 1px solid var(--border-light); padding-right: 16px; }
.netiv-ticker-item:last-child { border-right: none; }
.netiv-ticker-item__label { color: var(--text-tertiary); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.netiv-ticker-item__value { color: var(--text-main); font-weight: 700; font-family: var(--font-mono); }

.netiv-shell__roles { display: flex; gap: 8px; overflow-x: auto; padding: 12px 24px; background: #000000; border-bottom: 1px solid var(--border-card); scrollbar-width: none; }
.netiv-role-pill { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 6px 12px; border-radius: 4px; background: transparent; border: 1px solid var(--border-light); text-decoration: none; white-space: nowrap; transition: 0.2s; }
.netiv-role-pill:hover { color: var(--text-main); border-color: var(--text-secondary); }
.netiv-role-pill.netiv-role-pill--on { color: var(--gold); background: var(--gold-tint); border-color: var(--gold); }
@media (min-width: 900px) { .netiv-shell__roles.d-md-none { display: none; } }

/* SIDEBAR & BODY */
.netiv-shell__body { display: flex; flex: 1; min-height: 0; }
aside.netiv-shell__sidebar { display: flex; flex-direction: column; width: var(--netiv-sidebar-w); background: #000000; border-right: 1px solid var(--border-card); padding: 16px 12px; gap: 4px; flex-shrink: 0; }
aside.netiv-shell__sidebar hr { width: 100%; border: none; border-top: 1px solid var(--border-card); margin: 12px 0; }
.netiv-sidebar-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; text-decoration: none; transition: 0.2s; }
.netiv-sidebar-item:hover:not(.active):not(.netiv-sidebar-item--on) { background: rgba(255,255,255,0.05); color: var(--text-main); }
.netiv-sidebar-item--on, .netiv-sidebar-item.active { background: var(--gold-tint); color: var(--gold); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }

/* CONTENT */
main, .page, .netiv-shell__content { flex: 1; min-width: 0; padding: 32px 40px; max-width: 1440px; margin: 0 auto; width: 100%; overflow-y: auto; }

/* HEADERS */
header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 8px; }
header h1, .heading h2, h2, h3, .card h2, article h2 { font-weight: 700; color: var(--text-main); margin: 0; letter-spacing: -0.02em; }
header h1 { font-size: 24px; margin-bottom: 8px; }
h2 { font-size: 15px; margin-bottom: 16px; }
h3 { font-size: 13px; margin-bottom: 12px; }
header p, p { color: var(--text-secondary); font-size: 14px; margin: 0 0 16px 0; }
p.small, small, .muted, span.muted { font-size: 12px; color: var(--text-tertiary); }

.header-actions, .actions, .toolbar, .bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* CARDS & PANELS */
article, .card, .gate-list > div, .decision-box, .exec-chart-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-subtle); margin-bottom: 16px; min-width: 0; }
.card-heading, .heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.card-heading h2, .heading h2 { margin-bottom: 4px; }
.heading p, .card-heading p { margin: 0; font-size: 12px; color: var(--text-secondary); }

/* METRICS */
.metrics, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric, .kpi { background: var(--bg-card); border: 1px solid var(--border-light); border-top: 2px solid var(--gold); border-radius: var(--radius-sm); padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.metric span, .kpi span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 8px; }
.metric strong, .kpi strong { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--text-main); line-height: 1.1; }
.metric small, .kpi small { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; font-family: var(--font-sans); }

/* GRIDS */
.grid { display: grid; gap: 16px; margin-bottom: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 16px; margin-bottom: 24px; }

/* FORMS */
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
input, select, textarea { padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-page); color: var(--text-main); font-size: 13px; font-family: var(--font-mono); outline: none; transition: 0.2s; width: 100%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); background: var(--bg-card); box-shadow: 0 0 0 1px var(--gold); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
.check { flex-direction: row; align-items: center; cursor: pointer; color: var(--text-main); }
.check input { width: auto; accent-color: var(--gold); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid label { margin-bottom: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.inline-form { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.control { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.control button { grid-column: 1 / -1; }

/* BUTTONS */
button, .btn, .primary, .secondary, input[type="submit"], input[type="button"] { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; text-decoration: none; }
button, .primary, button[type="submit"] { background: var(--gold); color: #000; border-color: var(--gold); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
button:hover, .primary:hover { background: #E6C25B; box-shadow: 0 0 12px var(--gold-glow); }
.secondary, button.secondary, a.secondary, .actions a { background: transparent; color: var(--text-main); border-color: var(--border-light); }
.secondary:hover, button.secondary:hover, .actions a:hover { background: rgba(255,255,255,0.05); border-color: var(--text-secondary); }
button:disabled, input:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
button.danger, .danger-button { background: transparent; color: var(--status-err-text); border-color: var(--status-err-text); }
button.danger:hover, .danger-button:hover { background: var(--status-err-bg); box-shadow: 0 0 12px rgba(255, 107, 107, 0.2); }
.icon-btn { padding: 6px; background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); }
.icon-btn:hover { color: var(--status-err-text); border-color: var(--status-err-text); }

/* BADGES & PILLS */
.badge, .pill, .live, .tier-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.badge.ok, .pill.good, .live, .badge.ACTIVE, .badge.SUCCEEDED, .badge.APPROVED, .badge.EXECUTED, .badge.LIVE, .tier-LIU { background: var(--status-ok-bg); color: var(--status-ok-text); border: 1px solid rgba(81, 207, 102, 0.2); }
.badge.warn, .pill.warn, .badge.DEGRADED, .badge.WARNING, .badge.CONDITIONAL, .badge.PENDING, .tier-RIU { background: var(--status-warn-bg); color: var(--status-warn-text); border: 1px solid rgba(252, 196, 25, 0.2); }
.badge.danger, .badge.bad, .pill.bad, .badge.FAILED, .badge.CRITICAL, .badge.QUARANTINED, .badge.REJECTED, .tier-SIU { background: var(--status-err-bg); color: var(--status-err-text); border: 1px solid rgba(255, 107, 107, 0.2); }
.badge.DORMANT, .badge.INACTIVE, .badge.STOPPED, .tier-DIA { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border-light); }

/* TABLES */
.table-wrap { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); }
table, .transition-table, .data-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg-page); }
th { text-align: left; padding: 12px 16px; color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-card); background: #000000; }
td { padding: 12px 16px; border-bottom: 1px solid var(--border-card); color: var(--text-main); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-card-hover); }
td b, td strong { font-weight: 600; color: #FFFFFF; font-family: var(--font-mono); }
td small { color: var(--text-tertiary); font-family: var(--font-sans); }

/* LISTS & ROWS */
.list, .rows, .gap-list, .checklist, .validation-list { display: flex; flex-direction: column; gap: 8px; }
.list-item, .row, .gap, .component, .alert, .command-item, .dependency, .status-line, .admin-row, .forecast, .validation-item { padding: 16px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 8px; transition: 0.2s; }
.list-item:hover, .component:hover, .status-line:hover { border-color: var(--gold-dim); background: var(--bg-elevated); }
.row, .status-line, .admin-row, .forecast { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Structure the two halves of key/value rows: left = name over detail (stacked), right = value/badges/buttons on one line. */
.status-line > div:first-child, .admin-row > div:first-child, .row-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-content small { display: block; }
.status-line > div:first-child small, .admin-row > div:first-child small { display: block; }
.status-line > div:last-child, .admin-row > div:last-child { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.validation-item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.row strong, .list-item strong, .component strong, .status-line strong, .alert strong, .command-item strong { font-size: 13px; font-weight: 600; color: var(--gold); font-family: var(--font-mono); }
.row p, .list-item p, .component p, .status-line p, .alert p, .command-item p, .list-item small, .row small, .status-line small, .command-item small { font-size: 12px; color: var(--text-secondary); margin: 0; }
.component .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.alert { border-left: 3px solid var(--status-err-text); }
.alert .row strong { color: var(--status-err-text); }
.alert-actions { display: flex; gap: 8px; margin-top: 8px; }
.validation-item span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.validation-item.pass { border-left: 3px solid var(--status-ok-text); }
.validation-item.fail { border-left: 3px solid var(--status-err-text); }

/* TABS & STEPPERS */
.view, .panel, .tab-panel { display: none; }
.view.active, .panel.active, .tab-panel.active { display: block; animation: fade-in 0.3s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.tabs, .stepper, .steps { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 24px; padding: 0; border: none; scrollbar-width: none; }
.tabs button, .tab, .stepper button, .stepper span { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 8px 16px; border-radius: 4px; background: transparent; border: 1px solid var(--border-light); cursor: pointer; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.tabs button:hover, .stepper button:hover { color: var(--text-main); border-color: var(--text-secondary); }
.tabs button.active, .tab.active, .stepper .current, .steps .active { color: var(--gold); background: var(--gold-tint); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
.step-nav { display: flex; gap: 12px; margin-top: 24px; }

/* BARS & PROGRESS */
.bar { height: 4px; background: var(--border-card); border-radius: 2px; overflow: hidden; margin-top: 8px; width: 100%; display: block; }
.bar i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 8px var(--gold); transition: width 0.3s; }

/* NOTICES */
.notice { background: var(--status-warn-bg); border: 1px solid rgba(252, 196, 25, 0.3); border-left: 3px solid var(--status-warn-text); padding: 16px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-main); margin-bottom: 24px; }
.notice.error, .warning { border-left-color: var(--status-err-text); background: var(--status-err-bg); border: 1px solid rgba(255, 107, 107, 0.3); }

/* GATE LIST / DECISION BOX */
.gate-list { display: flex; flex-direction: column; gap: 12px; }
.gate-list > div, .decision-box { background: var(--bg-card); border: 1px solid var(--border-light); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 16px; }
.gate-list b { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.gate-list span { display: block; font-size: 12px; color: var(--text-secondary); }
.decision-box.allowed { border-left-color: var(--status-ok-text); }
.decision-box.blocked { border-left-color: var(--status-err-text); }

/* MISC */
pre { background: #000000; color: var(--text-main); padding: 16px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; overflow: auto; margin: 0 0 16px 0; white-space: pre-wrap; }
pre:empty { display: none; }
hr { border: none; border-top: 1px solid var(--border-card); margin: 24px 0; }
a { color: var(--gold); text-decoration: none; font-weight: 500; }
a:hover { color: #E6C25B; text-decoration: underline; }
.hidden { display: none !important; }
/* Wizard step panels: only the active step is visible. */
.step-panel { display: none; }
.step-panel.active { display: block; }

/* HERO */
.hero { background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.05)"/></svg>') repeat, #0A0A0C; border: 1px solid var(--border-card); padding: 32px 40px; border-radius: var(--radius-md); margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
.hero h2 { margin-bottom: 8px; font-size: 24px; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; }
.hero p { color: var(--text-secondary); margin: 0; font-size: 14px; }
.hero label { color: var(--text-secondary); }

/* HEALTH GRID */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.health { background: var(--bg-page); border: 1px solid var(--border-card); padding: 16px; border-radius: var(--radius-sm); text-align: center; }
.health span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: 0.1em; }
.health strong { display: block; font-size: 24px; font-weight: 700; font-family: var(--font-mono); color: var(--text-main); }

/* TOPOLOGY CANVAS */
.topology-canvas { position: relative; min-height: 500px; background: #000000; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--border-card); border-radius: var(--radius-md); overflow: auto; }
.topology-node { position: absolute; left: calc(var(--x) + 16px); top: calc(var(--y) + 16px); width: 220px; background: var(--bg-card); border: 1px solid var(--border-light); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-subtle); transition: 0.2s; }
.topology-node:hover { border-color: var(--gold); z-index: 10; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
.topology-node.DEGRADED, .topology-node.WARNING { border-left-color: var(--status-warn-text); }
.topology-node.FAILED, .topology-node.QUARANTINED, .topology-node.CRITICAL { border-left-color: var(--status-err-text); }
.topology-node strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; font-family: var(--font-mono); }
.topology-node small { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.topology-node span { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); color: var(--text-secondary); }

/* TRANSITION DETAIL */
.transition-detail { padding: 16px; border-bottom: 1px solid var(--border-card); background: var(--bg-page); }
.transition-detail-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 16px; margin-top: 12px; }
.transition-detail-grid span { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: 4px; letter-spacing: 0.05em; }
.transition-detail-grid strong { font-size: 13px; color: var(--text-main); font-family: var(--font-mono); display: block; }
.period-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* CHARTS OVERRIDES & CONTAINERS */
.exec-chart-card { display: flex; flex-direction: column; }
.exec-chart-caption { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; margin-bottom: 16px; }
#chartTierDonut, #chartTierEconomics, #chartHeadroom, #chartUtilization { flex: 1; min-height: 250px; display: flex; align-items: center; justify-content: center; }
.exec-risk-list { display: flex; flex-direction: column; gap: 12px; }
.exec-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; margin-bottom: 24px; }

/* WORKLOAD ROWS & CAPABILITIES */
.workload-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--border-light); background: var(--bg-page); border-radius: var(--radius-sm); margin-bottom: 12px; }
.capabilities, .screen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cap, .screen { padding: 16px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-card); transition: 0.2s; }
a.cap { display: block; text-decoration: none; cursor: pointer; }
a.cap:hover { border-color: var(--gold); transform: translateY(-1px); }
.cap-link { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.cap:hover, .screen:hover { border-color: var(--gold-dim); background: var(--bg-elevated); }
.cap h3, .screen h3 { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: var(--gold); }
.cap p, .screen p { font-size: 12px; margin: 0; color: var(--text-secondary); }
.screen a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main); display: inline-block; margin-top: 12px; }

/* NAV STYLING FOR PLATFORM */
#moduleNav button, #nav button, .designer-link { 
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; text-decoration: none; transition: 0.2s; 
}
#moduleNav button:hover:not(.active), #nav button:hover:not(.active), .designer-link:hover:not(.active) { background: rgba(255,255,255,0.05); color: var(--text-main); }
#moduleNav button.active, #nav button.active, .designer-link.active { background: var(--gold-tint); color: var(--gold); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }
.role-workspace { padding: 0 12px 12px; }
.role-workspace label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); letter-spacing: 0.1em; margin-bottom: 8px; }

/* RESPONSIVE */
.d-md-none { display: none; }
@media (max-width: 899.98px) {
  .netiv-shell__body { flex-direction: column; }
  aside.netiv-shell__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-card); padding: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
  aside.netiv-shell__sidebar hr { display: none; }
  .netiv-sidebar-item { width: auto; padding: 6px 12px; font-size: 12px; }
  .netiv-shell__content { padding: 20px; }
  .exec-charts { grid-template-columns: 1fr; }
}