:root {
  color-scheme: dark;
  --bg: #000d1a;
  --bg2: #020812;
  --surface: rgba(0, 191, 255, 0.07);
  --surface-strong: rgba(0, 191, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.055);
  --text: #e0eaf4;
  --muted: #8aa4bc;
  --line: rgba(0, 191, 255, 0.18);
  --primary: #00bfff;
  --primary2: #00d4ff;
  --primary3: #0070cc;
  --accent: #22c55e;
  --danger: #fb7185;
  --warning: #f5b51b;
  --purple: #8b5cf6;
  --font-body: Inter, Poppins, Segoe UI, Arial, sans-serif;
  --font-display: Orbitron, Inter, sans-serif;
  --color-primary: var(--primary);
  --color-secondary: #0ea5e9;
  --color-accent: var(--accent);
  --color-success: var(--accent);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--primary2);
  --color-background: var(--bg);
  --color-surface: var(--surface);
  --color-surface-hover: rgba(255, 255, 255, 0.095);
  --color-border: var(--line);
  --color-border-hover: rgba(0, 191, 255, 0.34);
  --text-primary: var(--text);
  --text-secondary: #b7c9db;
  --text-muted: var(--muted);
  --card-title: #ffffff;
  --card-subtitle: #e2e8f0;
  --card-description: #cbd5e1;
  --card-secondary: #94a3b8;
  --card-disabled: #64748b;
  --card-link: #38bdf8;
  --card-hover: #0ea5e9;
  --card-helper: #94a3b8;
  --selection-bg: rgba(14, 165, 233, .25);
  --selection-color: inherit;
  --card-line-height: 1.62;
  --card-inner-gap: 10px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.24);
  --shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.34);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --transition-fast: 140ms ease;
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
  --transition-slow: 360ms cubic-bezier(.2,.8,.2,1);
  --opacity-disabled: .52;
  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --touch-target: 44px;
}

/* VIPLUSEC AI Center */
.ai-center-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  min-height: 220px;
  margin-bottom: 14px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 20%, rgba(34, 197, 94, .12), transparent 32%),
    linear-gradient(130deg, rgba(0, 191, 255, .11), rgba(9, 20, 38, .76) 48%, rgba(5, 15, 30, .94));
  box-shadow: 0 20px 48px rgba(2, 8, 23, .2);
}
.ai-center-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, #0ea5e9, #22d3ee, #22c55e); }
.ai-center-hero-copy { position: relative; z-index: 1; max-width: 780px; }
.ai-center-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #7dd3fc; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.ai-center-hero h2 { margin: 9px 0 8px; color: #fff; font-size: clamp(28px, 3vw, 43px); line-height: 1.05; }
.ai-center-hero p { max-width: 720px; margin: 0; color: #cbd5e1; font-size: 15px; line-height: 1.7; }
.ai-center-status-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ai-center-status-line span { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(125, 211, 252, .2); border-radius: 6px; background: rgba(15, 23, 42, .62); color: #dbeafe; font-size: 11px; font-weight: 700; }
.ai-center-status-line i { color: #38bdf8; }
.ai-center-orbit { position: relative; width: 150px; height: 150px; justify-self: end; }
.ai-center-orbit > span { position: absolute; inset: 35px; display: grid; place-items: center; z-index: 2; border: 1px solid rgba(125, 211, 252, .42); border-radius: 50%; background: rgba(2, 132, 199, .18); box-shadow: 0 0 42px rgba(14, 165, 233, .28); color: #e0f2fe; font-size: 34px; }
.ai-center-orbit > i { position: absolute; inset: 8px; border: 1px solid rgba(56, 189, 248, .18); border-radius: 50%; animation: aiCenterOrbit 14s linear infinite; }
.ai-center-orbit > i:nth-of-type(2) { inset: 22px 0; border-color: rgba(34, 197, 94, .2); animation-duration: 18s; animation-direction: reverse; }
.ai-center-orbit > i:nth-of-type(3) { inset: 0 24px; border-color: rgba(255, 255, 255, .13); animation-duration: 22s; }
.ai-center-orbit > i::after { content: ""; position: absolute; top: 4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 14px #38bdf8; }
@keyframes aiCenterOrbit { to { transform: rotate(360deg); } }

.ai-center-subnav { display: flex; gap: 6px; margin-bottom: 18px; padding: 7px; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); scrollbar-width: thin; }
.ai-center-subnav a { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary, #cbd5e1); font-size: 12px; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.ai-center-subnav a:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 36%, var(--border)); color: var(--text-primary, #fff); }
.ai-center-subnav a.active { border-color: rgba(56, 189, 248, .36); background: rgba(14, 165, 233, .14); color: #7dd3fc; }

.ai-center-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ai-center-kpi { position: relative; min-width: 0; padding: 17px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 10px 28px rgba(2, 8, 23, .12); }
.ai-center-kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #38bdf8; }
.ai-center-kpi.tone-green::after { background: #22c55e; }
.ai-center-kpi.tone-gold::after { background: #f59e0b; }
.ai-center-kpi.tone-violet::after { background: #a78bfa; }
.ai-center-kpi > div { display: flex; align-items: center; gap: 8px; color: var(--text-secondary, #cbd5e1); font-size: 12px; font-weight: 700; }
.ai-center-kpi > div i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(14, 165, 233, .12); color: #38bdf8; }
.ai-center-kpi strong { display: block; margin: 13px 0 4px; color: var(--text-primary, #fff); font-family: var(--font-display); font-size: 25px; line-height: 1; }
.ai-center-kpi small { color: var(--text-secondary, #94a3b8); }

.ai-center-panel { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px rgba(2, 8, 23, .14); }
.ai-center-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ai-center-panel-header > div:first-child > span, .ai-center-panel-kicker { color: #38bdf8; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ai-center-panel-header h3, .ai-center-panel h3 { margin: 3px 0 0; color: var(--text-primary, #fff); font-size: 17px; }
.ai-center-panel-header > i { color: #38bdf8; font-size: 19px; }
.ai-center-dashboard-grid, .ai-center-assistant-layout, .ai-documents-layout, .ai-insights-layout, .ai-automation-layout, .ai-history-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: 16px; align-items: start; }
.ai-center-main, .ai-center-side { display: grid; gap: 14px; min-width: 0; }
.ai-center-welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 22px; align-items: end; background: linear-gradient(135deg, rgba(14, 165, 233, .11), var(--panel) 58%); }
.ai-center-welcome p { margin: 8px 0 0; color: var(--text-secondary, #cbd5e1); line-height: 1.6; }
.ai-center-quick-ask label, .ai-assistant-composer > label { display: block; margin-bottom: 6px; color: var(--text-secondary, #cbd5e1); font-size: 11px; font-weight: 700; }
.ai-center-quick-ask > div { display: grid; grid-template-columns: 1fr 40px; gap: 7px; padding: 5px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 8px; background: var(--input-bg, rgba(2, 8, 23, .32)); }
.ai-center-quick-ask input { min-width: 0; border: 0; background: transparent; color: var(--text-primary, #fff); outline: 0; }
.ai-center-quick-ask button, .ai-chat-send, .ai-center-global-form button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #0284c7, #059669); color: #fff; cursor: pointer; }
.ai-center-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-center-tool-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ai-center-tool-card:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, .42); box-shadow: 0 14px 32px rgba(2, 8, 23, .18); }
.ai-center-tool-card > i:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; background: rgba(14, 165, 233, .12); color: #38bdf8; font-size: 17px; }
.ai-center-tool-card > i:last-child { color: var(--text-secondary, #94a3b8); }
.ai-center-tool-card strong, .ai-center-provider-list strong, .ai-center-insight-list strong { display: block; color: var(--text-primary, #fff); font-size: 13px; }
.ai-center-tool-card span, .ai-center-provider-list small, .ai-center-insight-list small { display: block; margin-top: 3px; color: var(--text-secondary, #94a3b8); font-size: 11px; line-height: 1.45; }
.ai-center-insight-list, .ai-center-provider-list { display: grid; gap: 8px; }
.ai-center-insight-list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(15, 23, 42, .22); }
.ai-center-insight-list > div > i { color: #38bdf8; }
.ai-center-provider-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ai-center-provider-list > div:last-child { border-bottom: 0; }
.ai-center-provider-list em { color: #86efac; font-size: 10px; font-style: normal; font-weight: 800; }
.ai-center-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 7px; border: 1px solid rgba(245, 158, 11, .3); border-radius: 999px; background: rgba(245, 158, 11, .12); color: #fcd34d; font-size: 9px; font-style: normal; font-weight: 800; }
.ai-center-badge.success { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .12); color: #86efac; }
.ai-center-badge.danger { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .12); color: #fca5a5; }

.ai-center-live { display: inline-flex; align-items: center; gap: 6px; color: #86efac; font-size: 11px; font-weight: 800; }
.ai-center-live i, .ai-chat-header small i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, .65); }
.ai-assistant-console { display: grid; gap: 14px; }
.ai-assistant-response { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 118px; padding: 16px; border: 1px solid rgba(56, 189, 248, .2); border-radius: 8px; background: rgba(14, 165, 233, .07); }
.ai-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(125, 211, 252, .3); border-radius: 7px; background: linear-gradient(145deg, #075985, #047857); color: #fff; box-shadow: 0 0 18px rgba(14, 165, 233, .2); }
.ai-assistant-response strong { color: var(--text-primary, #fff); }
.ai-assistant-response p { margin: 7px 0 0; color: var(--text-secondary, #cbd5e1); line-height: 1.65; }
.ai-assistant-response.is-thinking .ai-avatar { animation: aiCenterPulse 1.2s ease-in-out infinite; }
@keyframes aiCenterPulse { 50% { transform: scale(.94); filter: brightness(1.22); } }
.ai-assistant-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-assistant-suggestions button, .ai-center-global-suggestions button { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(15, 23, 42, .24); color: var(--text-secondary, #cbd5e1); cursor: pointer; font: inherit; font-size: 11px; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.ai-assistant-suggestions button:hover, .ai-center-global-suggestions button:hover { border-color: rgba(56, 189, 248, .42); background: rgba(14, 165, 233, .1); color: var(--text-primary, #fff); }
.ai-assistant-composer > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ai-assistant-composer textarea, .ai-center-global-form textarea, .ai-chat-composer textarea { width: 100%; min-width: 0; resize: none; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg, rgba(2, 8, 23, .34)); color: var(--text-primary, #fff); }
.ai-assistant-composer button { align-self: stretch; min-width: 96px; border: 0; border-radius: 7px; background: linear-gradient(135deg, #0284c7, #059669); color: #fff; cursor: pointer; }
.ai-assistant-composer > small { display: block; margin-top: 8px; color: var(--text-secondary, #94a3b8); }
.ai-assistant-context { display: grid; gap: 7px; }
.ai-assistant-context > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border-radius: 6px; color: inherit; text-decoration: none; }
.ai-assistant-context > a:hover { background: rgba(14, 165, 233, .09); }
.ai-assistant-context > a > i:first-child { color: #38bdf8; }
.ai-assistant-context strong { display: block; color: var(--text-primary, #fff); font-size: 12px; }
.ai-assistant-context small { color: var(--text-secondary, #94a3b8); }

.ai-chat-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 650px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 42px rgba(2, 8, 23, .16); }
.ai-chat-history-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-right: 1px solid var(--border); background: rgba(2, 8, 23, .22); }
.ai-chat-new { justify-content: center; width: 100%; }
.ai-chat-search, .ai-history-search { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg, rgba(2, 8, 23, .25)); color: var(--text-secondary, #94a3b8); }
.ai-chat-search input, .ai-history-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text-primary, #fff); outline: 0; }
.ai-chat-history { display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.ai-chat-history button { display: grid; grid-template-columns: 1fr auto; gap: 5px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary, #cbd5e1); text-align: left; cursor: pointer; }
.ai-chat-history button:hover, .ai-chat-history button.active { border-color: var(--border); background: rgba(14, 165, 233, .09); color: var(--text-primary, #fff); }
.ai-chat-history button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat-history button small { grid-column: 1 / -1; color: var(--text-secondary, #94a3b8); }
.ai-chat-panel { display: grid; grid-template-rows: auto minmax(260px, 1fr) auto auto auto; min-width: 0; }
.ai-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.ai-chat-header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-chat-header strong { display: block; color: var(--text-primary, #fff); }
.ai-chat-header small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text-secondary, #94a3b8); }
.ai-chat-messages { display: flex; flex-direction: column; gap: 14px; padding: 20px clamp(14px, 5vw, 64px); overflow-y: auto; }
.ai-chat-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; max-width: 820px; }
.ai-chat-message.user { align-self: flex-end; grid-template-columns: minmax(0, 1fr) 34px; }
.ai-chat-message.user .ai-chat-message-body { grid-column: 1; grid-row: 1; background: rgba(14, 165, 233, .13); }
.ai-chat-message.user > i { grid-column: 2; }
.ai-chat-message > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: rgba(14, 165, 233, .12); color: #38bdf8; }
.ai-chat-message-body { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15, 23, 42, .22); color: var(--text-primary, #e2e8f0); line-height: 1.65; }
.ai-chat-message-body p { margin: 0 0 8px; }
.ai-chat-message-body p:last-child { margin-bottom: 0; }
.ai-chat-message-body pre { max-width: 100%; padding: 12px; overflow: auto; border-radius: 6px; background: #020617; color: #bae6fd; }
.ai-chat-message-actions { display: flex; gap: 5px; margin-top: 7px; }
.ai-chat-message-actions button { border: 0; background: transparent; color: var(--text-secondary, #94a3b8); cursor: pointer; }
.ai-chat-message-actions button:hover { color: #38bdf8; }
.ai-chat-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 clamp(14px, 5vw, 64px) 10px; }
.ai-chat-starters button { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ai-chat-starters button:hover { border-color: rgba(56, 189, 248, .42); background: rgba(14, 165, 233, .07); }
.ai-chat-starters i { color: #38bdf8; }
.ai-chat-starters strong, .ai-chat-starters small { display: block; }
.ai-chat-starters strong { color: var(--text-primary, #fff); font-size: 11px; }
.ai-chat-starters small { color: var(--text-secondary, #94a3b8); font-size: 9px; }
.ai-chat-composer { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 7px; margin: 0 clamp(14px, 5vw, 64px); padding: 6px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 8px; background: var(--input-bg, rgba(2, 8, 23, .3)); }
.ai-chat-composer textarea { min-height: 40px; padding: 9px; border: 0; outline: 0; }
.ai-chat-disclaimer { padding: 8px 20px 14px; color: var(--text-secondary, #94a3b8); text-align: center; }

.ai-workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ai-workspace-card { display: grid; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.ai-workspace-card header { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.ai-workspace-card header > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: rgba(14, 165, 233, .12); color: #38bdf8; }
.ai-workspace-card header strong, .ai-workspace-card header small { display: block; }
.ai-workspace-card header strong { color: var(--text-primary, #fff); }
.ai-workspace-card header small, .ai-workspace-card p { color: var(--text-secondary, #94a3b8); }
.ai-workspace-card header em { display: flex; align-items: center; gap: 5px; color: #86efac; font-size: 9px; font-style: normal; font-weight: 800; }
.ai-workspace-card header em i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.ai-workspace-card > b { color: var(--text-primary, #fff); font-size: 23px; }
.ai-workspace-card p { min-height: 42px; margin: 0; line-height: 1.5; }
.ai-workspace-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-context-builder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.ai-context-builder label span, .ai-settings-grid label > span { display: block; margin-bottom: 6px; color: var(--text-secondary, #cbd5e1); font-size: 11px; font-weight: 700; }
.ai-context-builder select, .ai-settings-grid select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg, #0f2538); color: var(--text-primary, #fff); }

.ai-documents-layout > main { display: grid; gap: 12px; min-width: 0; }
.ai-document-dropzone { display: grid; place-items: center; min-height: 260px; padding: 28px; border: 1px dashed rgba(56, 189, 248, .55); border-radius: 8px; background: rgba(14, 165, 233, .05); text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.ai-document-dropzone:hover, .ai-document-dropzone.is-dragging { border-color: #38bdf8; background: rgba(14, 165, 233, .1); }
.ai-document-dropzone > i { color: #38bdf8; font-size: 40px; }
.ai-document-dropzone h3 { margin: 15px 0 4px; color: var(--text-primary, #fff); }
.ai-document-dropzone p { max-width: 540px; margin: 0 0 16px; color: var(--text-secondary, #94a3b8); }
.ai-document-file-list { display: grid; gap: 7px; }
.ai-document-file { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); }
.ai-document-file > i { color: #38bdf8; font-size: 20px; }
.ai-document-file strong, .ai-document-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-document-file strong { color: var(--text-primary, #fff); }
.ai-document-file small { color: var(--text-secondary, #94a3b8); }
.ai-document-actions { display: grid; gap: 7px; }
.ai-document-actions button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 54px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ai-document-actions button:hover { border-color: rgba(56, 189, 248, .42); background: rgba(14, 165, 233, .07); }
.ai-document-actions button > i:first-child { color: #38bdf8; }
.ai-document-actions strong, .ai-document-actions small { display: block; }
.ai-document-actions strong { color: var(--text-primary, #fff); }
.ai-document-actions small { color: var(--text-secondary, #94a3b8); }
.ai-document-output { margin-top: 14px; }

.ai-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ai-report-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.ai-report-card > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 7px; background: rgba(14, 165, 233, .12); color: #38bdf8; font-size: 20px; }
.ai-report-card span { color: #38bdf8; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ai-report-card h3 { margin: 3px 0; color: var(--text-primary, #fff); }
.ai-report-card p { margin: 0 0 6px; color: var(--text-secondary, #94a3b8); }
.ai-report-card strong { color: var(--text-primary, #fff); }
.ai-report-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 18px; }
.ai-report-preview-body p { color: var(--text-secondary, #94a3b8); }
.ai-report-preview-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ai-report-preview-kpis span { padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(15, 23, 42, .2); }
.ai-report-preview-kpis small, .ai-report-preview-kpis strong { display: block; }
.ai-report-preview-kpis small { color: var(--text-secondary, #94a3b8); }
.ai-report-preview-kpis strong { margin-top: 4px; color: var(--text-primary, #fff); }

.ai-insight-detail-list { display: grid; gap: 9px; }
.ai-insight-detail-list article { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 7px; }
.ai-insight-detail-list article > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: rgba(14, 165, 233, .1); color: #38bdf8; }
.ai-insight-detail-list strong { color: var(--text-primary, #fff); }
.ai-insight-detail-list p { margin: 4px 0 8px; color: var(--text-secondary, #94a3b8); }
.ai-insight-detail-list button { padding: 0; border: 0; background: transparent; color: #38bdf8; cursor: pointer; font-weight: 700; }
.ai-signal-bars { display: grid; gap: 17px; }
.ai-signal-bars span { display: flex; justify-content: space-between; color: var(--text-secondary, #cbd5e1); }
.ai-signal-bars em { color: var(--text-primary, #fff); font-style: normal; }
.ai-signal-bars > div > i { display: block; height: 8px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .14); }
.ai-signal-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0284c7, #22c55e); }

.ai-flow-canvas { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 520px; padding: 22px; border: 1px solid var(--border); border-radius: 8px; background-image: radial-gradient(circle, rgba(148, 163, 184, .15) 1px, transparent 1px); background-size: 18px 18px; }
.ai-flow-node { display: grid; grid-template-columns: 100px 34px minmax(160px, 1fr); align-items: center; gap: 10px; width: min(100%, 460px); min-height: 66px; padding: 11px; border: 1px solid rgba(56, 189, 248, .28); border-radius: 8px; background: color-mix(in srgb, var(--panel) 95%, #0284c7 5%); box-shadow: 0 9px 24px rgba(2, 8, 23, .16); }
.ai-flow-node > span { color: #7dd3fc; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ai-flow-node > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: rgba(14, 165, 233, .12); color: #38bdf8; }
.ai-flow-node strong { color: var(--text-primary, #fff); }
.ai-flow-arrow { color: #38bdf8; }
.ai-automation-controls { display: grid; gap: 8px; margin-bottom: 16px; }
.ai-automation-controls > div { display: grid; grid-template-columns: 34px 1fr; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; }
.ai-automation-controls > div > i { color: #38bdf8; }
.ai-automation-controls strong, .ai-automation-controls small { display: block; }
.ai-automation-controls strong { color: var(--text-primary, #fff); }
.ai-automation-controls small { color: var(--text-secondary, #94a3b8); }

.ai-prompt-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 220px auto; gap: 8px; margin-bottom: 14px; }
.ai-prompt-toolbar label { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text-secondary, #94a3b8); }
.ai-prompt-toolbar input, .ai-prompt-toolbar select { min-width: 0; border: 0; background: transparent; color: var(--text-primary, #fff); outline: 0; }
.ai-prompt-toolbar select { min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg, #0f2538); }
.ai-prompt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-prompt-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.ai-prompt-card[hidden] { display: none; }
.ai-prompt-card header { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; }
.ai-prompt-card header > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(14, 165, 233, .11); color: #38bdf8; }
.ai-prompt-card header span { color: #7dd3fc; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ai-prompt-card header button { border: 0; background: transparent; color: var(--text-secondary, #94a3b8); cursor: pointer; }
.ai-prompt-card header button.is-favorite { color: #fbbf24; }
.ai-prompt-card h3 { margin: 13px 0 6px; color: var(--text-primary, #fff); }
.ai-prompt-card p { flex: 1; margin: 0 0 16px; color: var(--text-secondary, #94a3b8); line-height: 1.6; }
.ai-prompt-card > div { display: flex; gap: 7px; }

.ai-history-list { display: grid; gap: 8px; margin-top: 12px; }
.ai-history-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--border); border-radius: 7px; }
.ai-history-item > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: rgba(14, 165, 233, .1); color: #38bdf8; }
.ai-history-item strong, .ai-history-item small { display: block; }
.ai-history-item strong { color: var(--text-primary, #fff); }
.ai-history-item small { margin-top: 3px; color: var(--text-secondary, #94a3b8); }
.ai-history-item a { color: #38bdf8; font-weight: 700; text-decoration: none; }
.ai-privacy-summary { display: grid; place-items: center; gap: 10px; padding: 20px 8px; text-align: center; }
.ai-privacy-summary > i { color: #38bdf8; font-size: 36px; }
.ai-privacy-summary strong { color: var(--text-primary, #fff); }
.ai-privacy-summary p { margin: 0; color: var(--text-secondary, #94a3b8); line-height: 1.6; }

.ai-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ai-provider-settings, .ai-settings-actions { grid-column: 1 / -1; }
.ai-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ai-settings-grid label { min-width: 0; }
.ai-settings-grid label small { display: block; margin-top: 5px; color: var(--text-secondary, #94a3b8); }
.ai-range-setting { grid-column: 1 / -1; }
.ai-range-setting > span { display: flex !important; justify-content: space-between; }
.ai-range-setting input { width: 100%; accent-color: #0ea5e9; }
.ai-toggle-list { display: grid; gap: 8px; }
.ai-toggle-list label { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 10px; align-items: center; min-height: 56px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.ai-toggle-list strong, .ai-toggle-list small { display: block; }
.ai-toggle-list strong { color: var(--text-primary, #fff); }
.ai-toggle-list small { color: var(--text-secondary, #94a3b8); }
.ai-toggle-list input { position: absolute; opacity: 0; }
.ai-toggle-list label > i { position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(100, 116, 139, .45); transition: background .18s ease; }
.ai-toggle-list label > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.ai-toggle-list input:checked + i { background: #0284c7; }
.ai-toggle-list input:checked + i::after { transform: translateX(18px); }
.ai-settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.ai-settings-actions span { color: var(--text-secondary, #94a3b8); }

.ai-center-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 7px; width: 58px; height: 50px; border: 1px solid rgba(125, 211, 252, .34); border-radius: 8px; background: linear-gradient(145deg, #075985, #047857); color: #fff; box-shadow: 0 15px 38px rgba(2, 132, 199, .28); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ai-center-launcher:hover { transform: translateY(-2px); box-shadow: 0 19px 42px rgba(2, 132, 199, .38); }
.ai-center-launcher span { font-size: 11px; font-weight: 900; }
.ai-center-global-backdrop { position: fixed; inset: 0; z-index: 104; background: rgba(2, 6, 23, .48); backdrop-filter: blur(4px); }
.ai-center-global-panel { position: fixed; right: 22px; bottom: 84px; z-index: 105; display: grid; grid-template-rows: auto minmax(180px, 1fr) auto auto auto; width: min(420px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 110px)); overflow: hidden; border: 1px solid rgba(56, 189, 248, .3); border-radius: 8px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 28px 70px rgba(2, 6, 23, .46); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transform: translateY(14px) scale(.98); transition: opacity .2s ease, transform .2s ease; }
.ai-center-global-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.ai-center-global-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 13px; border-bottom: 1px solid var(--border); }
.ai-center-global-panel > header > div { display: flex; align-items: center; gap: 9px; }
.ai-center-global-panel > header strong, .ai-center-global-panel > header small { display: block; }
.ai-center-global-panel > header strong { color: var(--text-primary, #fff); }
.ai-center-global-panel > header small { margin-top: 3px; color: var(--text-secondary, #94a3b8); }
.ai-center-global-panel > header small i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #22c55e; }
.ai-center-global-messages { display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow-y: auto; }
.ai-global-message { max-width: 88%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: rgba(15, 23, 42, .24); color: var(--text-primary, #e2e8f0); line-height: 1.55; }
.ai-global-message.user { align-self: flex-end; background: rgba(14, 165, 233, .12); }
.ai-global-message p { margin: 0; }
.ai-center-global-suggestions { display: flex; gap: 5px; padding: 0 12px 9px; overflow-x: auto; }
.ai-center-global-suggestions button { flex: 0 0 auto; min-height: 32px; }
.ai-center-global-form { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; margin: 0 12px 10px; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg, rgba(2, 8, 23, .3)); }
.ai-center-global-form textarea { min-height: 42px; padding: 8px; border: 0; outline: 0; }
.ai-center-global-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); }
.ai-center-global-panel > footer a { color: #38bdf8; font-size: 11px; font-weight: 700; text-decoration: none; }
.ai-center-global-panel > footer span { color: var(--text-secondary, #94a3b8); font-size: 10px; }

.ai-center-hero :focus-visible, .ai-center-subnav :focus-visible, .ai-center-panel :focus-visible, .ai-chat-shell :focus-visible, .ai-prompt-toolbar :focus-visible, .ai-center-launcher:focus-visible, .ai-center-global-panel :focus-visible { outline: 3px solid rgba(56, 189, 248, .48); outline-offset: 2px; }

[data-theme="light"] .ai-center-hero { background: radial-gradient(circle at 88% 20%, rgba(34, 197, 94, .12), transparent 32%), linear-gradient(130deg, #082f49, #0f2538 55%, #0f172a); }
[data-theme="light"] .ai-center-panel, [data-theme="light"] .ai-center-kpi, [data-theme="light"] .ai-center-tool-card, [data-theme="light"] .ai-workspace-card, [data-theme="light"] .ai-report-card, [data-theme="light"] .ai-prompt-card, [data-theme="light"] .ai-chat-shell { background: #fff; }
[data-theme="light"] .ai-center-subnav { background: #f8fafc; }
[data-theme="light"] .ai-center-subnav a, [data-theme="light"] .ai-assistant-suggestions button, [data-theme="light"] .ai-center-global-suggestions button { color: #334155; }
[data-theme="light"] .ai-center-subnav a.active { color: #0369a1; }
[data-theme="light"] .ai-center-kpi strong, [data-theme="light"] .ai-center-panel h3, [data-theme="light"] .ai-center-tool-card strong, [data-theme="light"] .ai-center-provider-list strong, [data-theme="light"] .ai-center-insight-list strong, [data-theme="light"] .ai-assistant-response strong, [data-theme="light"] .ai-assistant-context strong, [data-theme="light"] .ai-chat-header strong, [data-theme="light"] .ai-chat-message-body, [data-theme="light"] .ai-workspace-card header strong, [data-theme="light"] .ai-workspace-card > b, [data-theme="light"] .ai-document-dropzone h3, [data-theme="light"] .ai-document-file strong, [data-theme="light"] .ai-document-actions strong, [data-theme="light"] .ai-report-card h3, [data-theme="light"] .ai-report-card strong, [data-theme="light"] .ai-report-preview-kpis strong, [data-theme="light"] .ai-insight-detail-list strong, [data-theme="light"] .ai-flow-node strong, [data-theme="light"] .ai-automation-controls strong, [data-theme="light"] .ai-prompt-card h3, [data-theme="light"] .ai-history-item strong, [data-theme="light"] .ai-privacy-summary strong, [data-theme="light"] .ai-toggle-list strong, [data-theme="light"] .ai-center-global-panel > header strong, [data-theme="light"] .ai-global-message { color: #0f172a; }
[data-theme="light"] .ai-center-kpi small, [data-theme="light"] .ai-center-tool-card span, [data-theme="light"] .ai-center-provider-list small, [data-theme="light"] .ai-center-insight-list small, [data-theme="light"] .ai-assistant-response p, [data-theme="light"] .ai-assistant-context small, [data-theme="light"] .ai-chat-header small, [data-theme="light"] .ai-workspace-card header small, [data-theme="light"] .ai-workspace-card p, [data-theme="light"] .ai-document-dropzone p, [data-theme="light"] .ai-document-file small, [data-theme="light"] .ai-document-actions small, [data-theme="light"] .ai-report-card p, [data-theme="light"] .ai-insight-detail-list p, [data-theme="light"] .ai-automation-controls small, [data-theme="light"] .ai-prompt-card p, [data-theme="light"] .ai-history-item small, [data-theme="light"] .ai-privacy-summary p, [data-theme="light"] .ai-toggle-list small { color: #475569; }
[data-theme="light"] .ai-center-insight-list > div, [data-theme="light"] .ai-chat-history-panel, [data-theme="light"] .ai-chat-message-body, [data-theme="light"] .ai-report-preview-kpis span { background: #f8fafc; }
[data-theme="light"] .ai-center-global-panel { background: rgba(255, 255, 255, .96); }
[data-theme="light"] .ai-global-message { background: #f8fafc; }

@media (max-width: 1199.98px) {
  .ai-center-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-workspace-grid, .ai-prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-center-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-center-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .ai-center-hero { grid-template-columns: 1fr 120px; min-height: 190px; padding: 24px; }
  .ai-center-orbit { width: 110px; height: 110px; }
  .ai-center-orbit > span { inset: 27px; font-size: 25px; }
  .ai-center-assistant-layout, .ai-documents-layout, .ai-insights-layout, .ai-automation-layout, .ai-history-layout { grid-template-columns: 1fr; }
  .ai-chat-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .ai-report-card { grid-template-columns: 44px minmax(0, 1fr); }
  .ai-report-card button { grid-column: 1 / -1; justify-self: start; }
  .ai-center-launcher { right: 14px; bottom: 14px; }
}
@media (max-width: 767.98px) {
  .ai-center-hero { grid-template-columns: 1fr; min-height: auto; padding: 21px; }
  .ai-center-orbit { display: none; }
  .ai-center-hero h2 { font-size: 29px; }
  .ai-center-status-line span:nth-child(3) { display: none; }
  .ai-center-kpis, .ai-center-tool-grid, .ai-center-side, .ai-workspace-grid, .ai-report-grid, .ai-prompt-grid, .ai-settings-layout { grid-template-columns: 1fr; }
  .ai-center-welcome, .ai-report-preview-body { grid-template-columns: 1fr; }
  .ai-chat-shell { display: block; min-height: 620px; }
  .ai-chat-history-panel { display: none; }
  .ai-chat-panel { min-height: 620px; }
  .ai-chat-messages { padding: 15px 10px; }
  .ai-chat-starters { grid-template-columns: 1fr 1fr; padding-inline: 10px; }
  .ai-chat-composer { margin-inline: 10px; }
  .ai-context-builder, .ai-prompt-toolbar { grid-template-columns: 1fr; }
  .ai-report-card { grid-template-columns: 42px minmax(0, 1fr); }
  .ai-settings-grid { grid-template-columns: 1fr; }
  .ai-range-setting, .ai-provider-settings, .ai-settings-actions { grid-column: auto; }
  .ai-settings-actions { align-items: stretch; flex-direction: column; }
  .ai-settings-actions .primary-btn { justify-content: center; }
  .ai-flow-node { grid-template-columns: 74px 30px minmax(0, 1fr); }
  .ai-center-global-panel { right: 8px; bottom: 72px; width: calc(100vw - 16px); max-height: calc(100dvh - 88px); }
}
@media (max-width: 575.98px) {
  .ai-center-hero { padding: 18px; }
  .ai-center-hero p { font-size: 13px; }
  .ai-center-status-line span { width: 100%; }
  .ai-center-kpis { grid-template-columns: 1fr; }
  .ai-center-subnav { margin-inline: -4px; }
  .ai-center-panel { padding: 14px; }
  .ai-center-tool-card { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 12px; }
  .ai-center-tool-card > i:first-child { width: 38px; height: 38px; }
  .ai-assistant-composer > div { grid-template-columns: 1fr; }
  .ai-assistant-composer button { min-height: 44px; }
  .ai-chat-starters { grid-template-columns: 1fr; }
  .ai-chat-message { max-width: 96%; }
  .ai-workspace-card header { grid-template-columns: 34px minmax(0, 1fr); }
  .ai-workspace-card header em { grid-column: 1 / -1; }
  .ai-report-card { grid-template-columns: 1fr; }
  .ai-report-preview-kpis { grid-template-columns: 1fr 1fr; }
  .ai-insight-detail-list article { grid-template-columns: 36px minmax(0, 1fr); }
  .ai-insight-detail-list article .ai-center-badge { grid-column: 2; justify-self: start; }
  .ai-flow-canvas { padding: 12px; }
  .ai-flow-node { grid-template-columns: 1fr 30px; }
  .ai-flow-node strong { grid-column: 1 / -1; }
  .ai-prompt-card > div { flex-direction: column; }
  .ai-history-item { grid-template-columns: 34px minmax(0, 1fr); }
  .ai-history-item a { grid-column: 2; }
  .ai-center-launcher { width: 50px; height: 46px; }
  .ai-center-launcher span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-center-orbit > i, .ai-assistant-response.is-thinking .ai-avatar { animation: none !important; }
  .ai-center-global-panel, .ai-center-launcher, .ai-center-tool-card { transition-duration: .01ms !important; }
}

.automation-studio-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(0,191,255,.16), rgba(16,24,39,.82)), rgba(255,255,255,.06);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    margin-bottom: 18px;
}

.ai-agents-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(0,191,255,.12), rgba(2,8,23,.86));
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    margin-bottom: 18px;
}

.saas-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(0,191,255,.18), rgba(34,197,94,.12), rgba(2,8,23,.86));
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    margin-bottom: 18px;
}

.saas-hero h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.8rem, 3vw, 3.05rem);
}

.saas-hero p {
    max-width: 780px;
    color: var(--muted);
}

.saas-posture {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
    min-width: 340px;
}

.saas-posture span {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(16px);
}

.saas-subnav {
    margin-bottom: 18px;
}

.saas-layout {
    align-items: start;
}

.connectors-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(0,191,255,.18), rgba(20,184,166,.12), rgba(2,8,23,.86));
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    margin-bottom: 18px;
}

.connectors-hero h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.8rem, 3vw, 3.05rem);
}

.connectors-hero p {
    max-width: 820px;
    color: var(--muted);
}

.connectors-posture {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
    min-width: 360px;
}

.connectors-posture span,
.connectors-provider-head {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(16px);
}

.connectors-subnav {
    margin-bottom: 18px;
}

.connectors-layout {
    align-items: start;
}

.connectors-provider-head {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.connectors-provider-head > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(0,191,255,.14);
    color: var(--primary);
    font-size: 1.35rem;
}

.connectors-provider-head small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.enterprise-command-grid,
.connector-card-grid,
.ai-ops-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.command-tile,
.connector-provider-tile,
.ai-ops-card {
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,191,255,.045));
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 18px 42px rgba(0,0,0,.2);
}

.command-tile span,
.command-tile small {
    display: block;
    color: var(--muted);
}

.command-tile strong {
    display: block;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    margin: 8px 0;
    color: var(--text);
}

.tenant-map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tenant-map-grid button,
.executive-summary-list button {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: 13px;
    text-align: left;
    display: grid;
    gap: 4px;
}

.tenant-map-grid button {
    grid-template-columns: 34px 1fr;
    align-items: center;
}

.tenant-map-grid i {
    color: var(--primary);
    font-size: 1.25rem;
}

.tenant-map-grid span,
.executive-summary-list span {
    color: var(--muted);
    font-size: .85rem;
}

.executive-summary-list {
    display: grid;
    gap: 10px;
}

.connector-provider-tile,
.ai-ops-card {
    display: grid;
    gap: 12px;
}

.connector-provider-tile header,
.ai-ops-card header {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
}

.connector-provider-tile header > i,
.ai-ops-card header > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(0,191,255,.13);
    color: var(--primary);
}

.connector-provider-tile p,
.ai-ops-card p {
    color: var(--muted);
    margin: 0;
    min-height: 42px;
}

.connector-health-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.connector-health-row span {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 8px;
    color: var(--muted);
    font-size: .78rem;
}

.connector-health-row b {
    display: block;
    color: var(--text);
    font-weight: 700;
}

.connector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-bars {
    display: grid;
    gap: 10px;
}

.resource-bars span {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 9px 10px;
    color: var(--muted);
    background: rgba(0,0,0,.12);
}

.resource-bars b {
    float: right;
    color: var(--text);
}

.resource-bars em {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.automation-enterprise-designer {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 16px;
    margin-bottom: 18px;
}

.automation-palette.compact,
.automation-inspector {
    max-height: none;
}

.automation-canvas.mini {
    min-height: 360px;
    overflow: hidden;
}

.compact-timeline article {
    grid-template-columns: 28px 1fr;
    padding: 10px;
}

.ops-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 30px;
    border: 1px solid rgba(0,191,255,.22);
    border-radius: 24px;
    background: radial-gradient(circle at top left, rgba(0,191,255,.2), transparent 34%), linear-gradient(135deg, rgba(15,23,42,.94), rgba(2,8,23,.86));
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
    margin-bottom: 18px;
}

.ops-hero h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.9rem, 3.3vw, 3.35rem);
}

.ops-hero p {
    max-width: 860px;
    color: var(--muted);
}

.ops-noc-grid,
.ops-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
}

.ops-noc-grid span,
.ops-health-grid button,
.ops-world-map button,
.ops-heatmap button {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: var(--text);
    border-radius: 16px;
    padding: 13px 14px;
    backdrop-filter: blur(16px);
}

.ops-subnav {
    margin-bottom: 18px;
}

.ops-layout {
    align-items: start;
}

.ops-health-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.ops-health-grid button {
    display: grid;
    gap: 6px;
    text-align: left;
}

.ops-health-grid strong {
    font-size: 1.35rem;
    font-family: var(--font-display);
}

.ops-health-grid span,
.ops-world-map span,
.ops-heatmap span {
    color: var(--muted);
    font-size: .84rem;
}

.ops-world-map,
.ops-heatmap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ops-world-map button {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.ops-world-map i {
    color: var(--primary);
}

.ops-heatmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-heatmap button {
    min-height: 86px;
    text-align: left;
    background: linear-gradient(0deg, rgba(0,191,255, calc(var(--heat) / 220)), rgba(255,255,255,.05));
}

.ops-live-wall .procurement-timeline article {
    border-left: 3px solid var(--primary);
}

@media (max-width: 1100px) {
    .saas-hero, .connectors-hero {
        display: grid;
    }

    .saas-posture, .connectors-posture {
        min-width: 0;
    }

    .enterprise-command-grid,
    .connector-card-grid,
    .ai-ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .automation-enterprise-designer {
        grid-template-columns: 1fr;
    }

    .ops-hero {
        display: grid;
    }

    .ops-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .saas-hero, .connectors-hero {
        padding: 16px;
        border-radius: 16px;
    }

    .saas-posture, .connectors-posture, .connectors-provider-head {
        grid-template-columns: 1fr;
    }

    .enterprise-command-grid,
    .connector-card-grid,
    .ai-ops-grid,
    .tenant-map-grid,
    .connector-health-row {
        grid-template-columns: 1fr;
    }

    .connector-provider-tile header,
    .ai-ops-card header {
        grid-template-columns: 42px 1fr;
    }

    .ops-noc-grid,
    .ops-health-grid,
    .ops-world-map,
    .ops-heatmap {
        grid-template-columns: 1fr;
    }

    .ops-world-map button {
        grid-template-columns: 28px 1fr;
    }
}

.ai-agents-hero h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.8rem, 3vw, 3.05rem);
}

.ai-agents-hero p {
    max-width: 780px;
    color: var(--muted);
}

.ai-agents-posture {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
    min-width: 340px;
}

.ai-agents-posture span,
.ai-agent-card,
.ai-recommendation {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(16px);
}

.ai-agents-subnav {
    margin-bottom: 18px;
}

.ai-agents-layout {
    align-items: start;
}

.ai-agent-grid {
    margin-top: 18px;
}

.ai-agent-card {
    min-height: 245px;
    display: grid;
    align-content: start;
    gap: 10px;
}

.ai-agent-card > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #00bfff;
    background: rgba(0,191,255,.13);
}

.ai-recommendations {
    display: grid;
    gap: 12px;
}

.ai-recommendation {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
}

.ai-recommendation span {
    display: block;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .ai-agents-hero {
        display: grid;
    }

    .ai-agents-posture {
        min-width: 0;
    }

    .ai-recommendation {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ai-agents-hero {
        padding: 16px;
        border-radius: 16px;
    }

    .ai-agents-posture {
        grid-template-columns: 1fr;
    }
}

.automation-studio-hero h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.8rem, 3vw, 3.1rem);
}

.automation-studio-hero p {
    max-width: 760px;
    color: var(--muted);
}

.automation-posture {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
    min-width: 320px;
}

.automation-posture span,
.automation-palette-node,
.automation-process-picker a,
.automation-integration-list a {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    backdrop-filter: blur(16px);
}

.automation-subnav {
    margin-bottom: 18px;
}

.automation-layout {
    align-items: start;
}

.automation-integration-list {
    display: grid;
    gap: 10px;
}

.automation-integration-list a {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
}

.automation-integration-list small,
.automation-process-picker span,
.automation-flow-node small {
    color: var(--muted);
    display: block;
}

.automation-designer-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 18px;
    margin-bottom: 18px;
}

.automation-palette,
.automation-canvas-panel {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

.automation-palette-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 620px;
    overflow: auto;
    padding-right: 4px;
}

.automation-palette-node {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: grab;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.automation-palette-node:hover {
    transform: translateX(4px);
    border-color: rgba(0,191,255,.55);
    background: rgba(0,191,255,.12);
}

.automation-canvas {
    position: relative;
    min-height: 560px;
    overflow: auto;
    border-radius: 18px;
    border: 1px dashed rgba(0,191,255,.32);
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        rgba(2,8,23,.34);
    background-size: 34px 34px;
}

.automation-canvas.is-drop-target {
    border-color: #00bfff;
    box-shadow: inset 0 0 0 3px rgba(0,191,255,.18);
}

.automation-flow-node {
    position: absolute;
    width: 168px;
    min-height: 84px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(0,191,255,.34);
    background: linear-gradient(145deg, rgba(0,191,255,.18), rgba(255,255,255,.08));
    box-shadow: 0 16px 32px rgba(0,0,0,.22);
    display: grid;
    gap: 4px;
    align-content: center;
}

.automation-flow-node i {
    color: #00bfff;
}

.automation-connector {
    position: absolute;
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, #00bfff, rgba(0,191,255,.15));
}

.automation-connector::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    border-left: 8px solid #00bfff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.automation-empty-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--muted);
    gap: 8px;
}

.automation-empty-canvas i {
    font-size: 2.6rem;
    color: #00bfff;
}

.automation-template-grid .automation-template-card {
    min-height: 260px;
    justify-content: space-between;
}

.automation-process-picker {
    display: grid;
    gap: 8px;
}

.automation-process-picker a.active {
    border-color: rgba(0,191,255,.6);
    background: rgba(0,191,255,.12);
}

.automation-history article {
    grid-template-columns: 34px 1fr minmax(220px, .5fr);
}

.workflow-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.workflow-catalog-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 118px;
}

.workflow-catalog-card > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #38bdf8;
    background: rgba(14, 165, 233, .13);
}

.workflow-catalog-card span,
.workflow-catalog-card strong,
.workflow-catalog-card small,
.workflow-catalog-card code {
    display: block;
    min-width: 0;
}

.workflow-catalog-card small,
.workflow-catalog-card code {
    color: var(--muted);
}

.workflow-catalog-card code {
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.workflow-catalog-card em {
    padding: 6px 9px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34, 197, 94, .13);
    font-size: .72rem;
    font-style: normal;
    text-align: center;
}

.workflow-catalog-card em.is-prepared {
    color: #fde68a;
    background: rgba(245, 158, 11, .14);
}

.workflow-validation {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(245, 158, 11, .32);
    border-radius: 14px;
    background: rgba(245, 158, 11, .09);
}

.workflow-validation.is-valid {
    border-color: rgba(34, 197, 94, .34);
    background: rgba(34, 197, 94, .1);
}

.workflow-validation span {
    color: var(--muted);
    line-height: 1.45;
}

.workflow-approval-actions {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.workflow-approval-actions article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.workflow-approval-actions span,
.workflow-approval-actions strong,
.workflow-approval-actions small {
    display: block;
}

.workflow-approval-actions small {
    color: var(--muted);
}

[data-theme="light"] .workflow-catalog-card em {
    color: #166534;
    background: rgba(22, 101, 52, .1);
}

[data-theme="light"] .workflow-catalog-card em.is-prepared {
    color: #92400e;
    background: rgba(146, 64, 14, .1);
}

@media (max-width: 1100px) {
    .automation-studio-hero,
    .automation-designer-shell {
        grid-template-columns: 1fr;
        display: grid;
    }

    .automation-posture {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workflow-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .automation-studio-hero,
    .automation-palette,
    .automation-canvas-panel {
        padding: 16px;
        border-radius: 16px;
    }

    .automation-posture {
        grid-template-columns: 1fr;
    }

    .automation-canvas {
        min-height: 440px;
    }

    .automation-flow-node {
        width: 145px;
    }

    .workflow-catalog-grid {
        grid-template-columns: 1fr;
    }

    .workflow-catalog-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .workflow-catalog-card em {
        grid-column: 2;
        justify-self: start;
    }

    .workflow-approval-actions article {
        grid-template-columns: 1fr 1fr;
    }

    .workflow-approval-actions article > span {
        grid-column: 1 / -1;
    }

    .workflow-approval-actions form button {
        width: 100%;
    }
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, 0.14);
  --primary: #075985;
  --primary2: #0369a1;
  --primary3: #0c4a6e;
  --accent: #166534;
  --danger: #be123c;
  --warning: #92400e;
  --purple: #6d28d9;
  --heading: #0f172a;
  --heading-soft: #1e293b;
  --interactive: #0369a1;
  --interactive-soft: rgba(3, 105, 161, 0.12);
  --color-primary: var(--primary);
  --color-secondary: #0284c7;
  --color-accent: var(--accent);
  --color-success: var(--accent);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--primary2);
  --color-background: var(--bg);
  --color-surface: var(--surface);
  --color-surface-hover: #f1f5f9;
  --color-border: var(--line);
  --color-border-hover: rgba(3, 105, 161, 0.28);
  --text-primary: var(--text);
  --text-secondary: #334155;
  --text-muted: var(--muted);
  --card-title: #0f172a;
  --card-subtitle: #1e293b;
  --card-description: #334155;
  --card-secondary: #475569;
  --card-disabled: #64748b;
  --card-link: #0369a1;
  --card-hover: #075985;
  --card-helper: #64748b;
  --selection-bg: rgba(14, 165, 233, .25);
  --selection-color: inherit;
  --control-bg: #ffffff;
  --control-bg-soft: #f8fafc;
  --control-text: #0f172a;
  --control-placeholder: #64748b;
  --control-border: rgba(15, 23, 42, .2);
  --inverse-surface: #0f2538;
  --inverse-text: #ffffff;
  --inverse-muted: #dbeafe;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 28px 70px rgba(15, 23, 42, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 191, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 191, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(0, 191, 255, 0.20), transparent 28%),
    radial-gradient(circle at 78% 10%, rgba(34, 197, 94, 0.08), transparent 24%),
    var(--bg);
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
  color: var(--text);
  font-family: var(--font-body);
}

.app-shell { display: grid; grid-template-columns: 310px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(0, 13, 26, 0.84);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}
[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.76); }
.brand, .nav-menu a { color: var(--text); text-decoration: none; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.brand small, .user-chip small, .panel-header span, .module-row span, .audit-list span { display: block; color: var(--muted); font-size: 12px; }
.brand strong { font-family: var(--font-display); letter-spacing: .08em; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #00101f;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-weight: 900;
}
.tenant-switcher {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 191, 255, 0.06);
  padding: 12px;
  margin-bottom: 18px;
}
.tenant-switcher span, .nav-section {
  display: block;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tenant-switcher select {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(0, 191, 255, .24);
  border-radius: 8px;
  color: var(--text);
  background: rgba(0, 13, 26, .92);
  padding: 9px;
}
.nav-menu { display: grid; gap: 6px; padding-bottom: 80px; }
.nav-section { margin: 12px 0 4px; color: rgba(0, 191, 255, .72); }
.nav-menu a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
}
.nav-menu a i { width: 18px; color: var(--primary); }
.nav-menu a small { margin-left: auto; color: var(--muted); font-size: 10px; }
.nav-menu a:hover, .nav-menu a.active { background: var(--surface-strong); color: var(--primary); }
.disabled-link {
  opacity: .94;
  cursor: pointer;
  border: 1px solid rgba(245, 181, 27, .16);
  background: linear-gradient(135deg, rgba(245, 181, 27, .06), rgba(0, 191, 255, .035));
}
.disabled-link small { color: #f5d27a; }
.sidebar-footer { position: absolute; bottom: 24px; color: var(--muted); font-size: 13px; }
.sidebar-footer small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 13, 26, 0.78);
  backdrop-filter: blur(18px);
}
[data-theme="light"] .topbar { background: rgba(244, 247, 251, 0.78); }
.topbar h1 { margin: 0; font-size: 26px; font-family: var(--font-display); letter-spacing: .02em; }
.eyebrow { color: var(--primary); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; min-width: 0; }
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 191, 255, 0.07);
  color: var(--text);
}
.icon-btn.danger { color: var(--danger); }
.user-chip, .api-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; }
.user-chip b, .mini-avatar, .profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #00101f;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 12px;
}
.api-chip span { color: var(--primary); font-weight: 800; }
.content { padding: 28px; }
.flash-stack { padding: 18px 28px 0; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.metric-card, .panel, .role-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 16, 34, 0.72);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}
.metric-card { position: relative; padding: 18px; overflow: hidden; }
.metric-card span { color: var(--muted); }
.metric-card strong { display: block; font-size: 34px; }
.metric-card i { position: absolute; right: 18px; bottom: 18px; color: var(--primary); opacity: 0.62; font-size: 26px; }
.metric-card strong { font-family: var(--font-display); color: #fff; }
.dashboard-grid, .split-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 16px; margin-bottom: 16px; min-width: 0; }
.dashboard-grid.wide { grid-template-columns: 1.6fr .8fr; }
.panel { padding: 18px; min-width: 0; max-width: 100%; overflow: hidden; }
.panel.narrow { max-width: 760px; }
.panel-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 16px; }
.panel-header h2 { margin: 0; font-size: 18px; }
.panel-header h2, .module-card strong, .suite-card strong { font-family: var(--font-display); }
.module-list, .audit-list, .stack-form, .role-grid, .notice-list, .permission-list, .role-permission-map { display: grid; gap: 12px; }
.module-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.module-row i { color: var(--primary); }
.module-row em, .badge-soft { color: var(--accent); font-style: normal; background: rgba(34, 197, 94, 0.12); padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.badge-soft.muted { color: var(--muted); background: rgba(159, 178, 200, 0.12); }
.audit-list div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.suite-table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); }
.stack-form input, .stack-form select, .stack-form textarea, .auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 12px;
}
.stack-form textarea { min-height: 112px; resize: vertical; }
.primary-btn, .secondary-btn, .auth-form button {
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #00101f;
  font-weight: 800;
}
.secondary-btn { border: 1px solid var(--line); background: var(--surface-strong); color: var(--text); }
.role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-card { padding: 16px; }
.role-card i { color: var(--primary); margin-bottom: 10px; }
.role-card p { color: var(--muted); margin: 8px 0 0; }
.permission-pills, .check-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.permission-pills span, .check-grid label {
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  color: var(--primary);
  background: rgba(56, 189, 248, 0.08);
  padding: 5px 9px;
  font-size: 11px;
}
.check-grid label { color: var(--text); cursor: pointer; }
.permission-group { margin-bottom: 22px; }
.permission-group h3 { margin: 0 0 10px; color: var(--primary); font-size: 13px; letter-spacing: 0; }
.permission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-list article, .role-permission-map > div, .notice-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 13px;
}
.permission-list span, .permission-list small, .role-permission-map span, .notice-item small, .notice-item em { display: block; color: var(--muted); font-size: 12px; }
.notice-item { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.notice-item i { color: var(--primary); margin-top: 2px; }
.notice-item.unread { border-color: rgba(56, 189, 248, 0.42); background: rgba(56, 189, 248, 0.08); }
.notice-list.large { gap: 14px; }
.notification-btn { position: relative; display: grid; place-items: center; text-decoration: none; }
.notification-btn span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.notification-popover { display: none; }
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.profile-avatar { width: 64px; height: 64px; font-size: 20px; font-weight: 900; }
.profile-head h2 { margin: 0; }
.profile-head p { margin: 4px 0 0; color: var(--muted); }
.mini-avatar { width: 26px; height: 26px; margin-right: 8px; }
.auth-body { display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(440px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); backdrop-filter: blur(18px); }
.login-brand {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 26px;
  animation: enterpriseLogoFadeIn .58s ease both;
}
.login-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  filter: drop-shadow(0 14px 26px rgba(14, 165, 233, .2));
  transform: translateZ(0);
  transition: transform .24s ease, filter .24s ease;
}
.login-brand:hover .login-logo {
  transform: translateY(-1px) scale(1.025);
  filter: drop-shadow(0 18px 34px rgba(14, 165, 233, .3));
}
.login-brand h1 {
  margin: 0;
  line-height: 1;
  letter-spacing: .06em;
}
.login-brand p, .prelaunch-hint { color: var(--muted); margin: 0; }
.login-brand p {
  margin-top: 5px;
  line-height: 1.25;
}
.auth-form { display: grid; gap: 14px; }
.auth-form label { color: var(--muted); display: grid; gap: 6px; }
.prelaunch-hint, .auth-links { margin-top: 16px; font-size: 13px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.auth-links a { color: var(--primary); text-decoration: none; }
code { color: var(--primary); white-space: pre-wrap; }

.control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(0, 112, 204, .22), rgba(0, 13, 26, .78));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .25);
}
.control-hero h2 {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: 30px;
}
.control-hero p { max-width: 680px; margin: 0; color: var(--muted); }
.tenant-card, .suite-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 191, 255, .07);
  padding: 16px;
}
.tenant-card span, .tenant-card small, .suite-card span, .suite-card p { color: var(--muted); }
.tenant-card strong { display: block; font-family: var(--font-display); font-size: 20px; margin: 8px 0; }
.status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.status-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(0, 191, 255, .055);
}
.status-pill span { color: var(--muted); font-size: 12px; }
.status-pill strong { font-family: var(--font-display); font-size: 20px; }
.module-catalog, .portfolio-grid, .license-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.module-catalog.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 14px;
}
.module-card > i, .suite-card > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(0, 191, 255, .1);
}
.module-card span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.module-status {
  grid-column: 1 / -1;
  justify-self: start;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.module-status.available { color: var(--primary); background: rgba(0, 191, 255, .12); }
.module-status.in_development { color: var(--warning); background: rgba(245, 181, 27, .12); border: 1px solid rgba(245, 181, 27, .2); }
.module-status.preview_available { color: var(--purple); background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .22); }
.module-status.installed { color: var(--accent); background: rgba(34, 197, 94, .14); }
.module-status.disabled { color: #d8e6f3; background: rgba(138, 164, 188, .12); border: 1px solid rgba(138, 164, 188, .2); }
.market-section { margin-bottom: 24px; }
.market-section h3 { font-family: var(--font-display); color: var(--primary); font-size: 13px; letter-spacing: .12em; margin-bottom: 12px; }
.suite-card { display: grid; gap: 10px; align-content: start; }
.company-profile { display: flex; align-items: center; gap: 18px; }
.company-profile img { width: 82px; height: 82px; object-fit: contain; border-radius: 12px; background: rgba(0, 191, 255, .06); border: 1px solid var(--line); }
.company-profile strong { display: block; font-family: var(--font-display); font-size: 22px; }
.company-profile span { display: block; color: var(--muted); margin-top: 4px; }
.crm-hero { background: linear-gradient(135deg, rgba(0, 112, 204, .28), rgba(34, 197, 94, .08), rgba(0, 13, 26, .84)); }
.crm-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
  overflow-x: auto;
}
.crm-board.mini { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.crm-stage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 191, 255, .045);
  padding: 12px;
  min-height: 180px;
}
.crm-stage > strong {
  display: block;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.crm-stage article {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  padding: 10px;
  margin-bottom: 9px;
}
.crm-stage article b, .crm-stage article span, .crm-stage article small { display: block; }
.crm-stage article span, .crm-stage article small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.form-row, .action-row, .inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-row > * { flex: 1 1 0; min-width: 0; }
.inline-form { margin: 0; }
.inline-form select { min-width: 120px; }
.stack-form.compact { gap: 8px; margin-top: 10px; }
.stack-form.compact input, .stack-form.compact select, .stack-form.compact textarea { min-height: 34px; font-size: 12px; }
.row-actions summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
}
.ghost-btn.danger { color: var(--danger); border-color: rgba(239, 68, 68, .3); }
.check-line {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.quote-builder {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, .035);
}
.quote-sheet {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  background: var(--surface);
}
.quote-sheet header, .quote-meta, .quote-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.quote-sheet h1 { font-family: var(--font-display); color: var(--primary); margin: 4px 0; }
.quote-total {
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(34, 197, 94, .1);
  text-align: right;
}
.quote-total span, .quote-meta span { display: block; color: var(--muted); font-size: 12px; }
.quote-total strong { display: block; font-size: 26px; color: var(--accent); }
.quote-summary { justify-content: flex-end; color: var(--muted); }
.quote-summary strong { color: var(--text); font-size: 18px; }
.doc-preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.segmented {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, .035);
}
.segmented a {
  color: var(--muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.segmented a.active { color: #00101f; background: var(--primary); font-weight: 800; }
.rich-editor { min-height: 140px; }
.crm-filter-bar, .top-search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.crm-filter-bar input, .crm-filter-bar select { min-width: 190px; flex: 1 1 190px; }
.top-search {
  margin: 0;
  flex-wrap: nowrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 3px;
}
.top-search input {
  width: 180px;
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 0 8px;
}
.pagination-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.pagination-bar span { color: var(--muted); margin-right: 6px; font-size: 12px; }
.pagination-bar a {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.pagination-bar a.active {
  color: #00101f;
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 800;
}
.document-preview-frame {
  min-height: 560px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  overflow: hidden;
}
.document-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.document-preview-frame iframe, .document-preview-frame img {
  width: 100%;
  height: 560px;
  border: 0;
  object-fit: contain;
}
.document-preview-frame.word, .document-preview-frame.reference, .document-preview-frame.csv, .document-preview-frame.excel { padding: 18px; place-items: stretch; }
.document-grid {
  display: grid;
  gap: 12px;
}
.document-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,112,204,.045));
  padding: 14px;
  box-shadow: 0 18px 42px rgba(0, 13, 26, .16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.document-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, .44);
  box-shadow: 0 22px 52px rgba(0, 112, 204, .16);
}
.document-thumb {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 8px;
  background: rgba(56, 189, 248, .08);
  min-height: 82px;
}
.document-thumb i { color: var(--primary); font-size: 30px; }
.document-thumb span { color: var(--muted); font-size: 11px; }
.document-main strong { display: block; font-size: 15px; }
.document-main p { margin: 5px 0 8px; color: var(--muted); font-size: 12px; }
.tag-row, .document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.tag-row span:not(.badge-soft) {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 11px;
}
.document-actions { margin-top: 12px; }
.document-actions form { margin: 0; }
.document-actions .ghost-btn { min-height: 34px; }
.document-view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}
.document-inspector {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  padding: 16px;
}
.document-inspector h3 {
  font-family: var(--font-display);
  color: var(--primary);
  font-size: 13px;
  margin: 0 0 14px;
}
.document-inspector > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}
.document-inspector span { color: var(--muted); font-size: 12px; }
.document-inspector strong { text-align: right; font-size: 12px; }
.word-preview {
  width: 100%;
  display: grid;
  gap: 12px;
  align-content: start;
}
.word-preview i { color: var(--primary); font-size: 34px; }
.word-preview pre {
  white-space: pre-wrap;
  color: var(--text);
  background: rgba(0, 0, 0, .14);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}
.preview-table { width: 100%; }
.panel, .suite-card, .metric-card, .crm-stage article {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.suite-card:hover, .metric-card:hover, .crm-stage article:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, .42);
  box-shadow: 0 14px 36px rgba(0, 112, 204, .12);
}
.loading-state {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
  background: rgba(0, 13, 26, .68);
  backdrop-filter: blur(10px);
}
.loading-state.active { display: grid; }
.loading-state div {
  display: grid;
  gap: 10px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
}
.loading-state img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,191,255,.22));
}
.loading-state i {
  color: var(--primary);
  font-size: 26px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.premium-print {
  background: #fff;
  color: #172033;
}
.quote-letterhead, .quote-title-block, .quote-parties, .quote-closing {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
.quote-letterhead {
  border-bottom: 4px solid #22c55e;
  padding: 0 0 16px;
}
.quote-brand { display: flex; gap: 14px; align-items: center; }
.quote-brand img { width: 156px; max-height: 58px; object-fit: contain; }
.quote-brand span, .quote-doc-meta span, .quote-parties span { display: block; color: #5b6f82; font-size: 12px; }
.quote-brand strong { display: block; color: #0070cc; font-size: 18px; }
.quote-brand small { display: block; color: #425466; margin-top: 3px; }
.quote-doc-meta {
  border: 1px solid #d9e6f2;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: right;
  background: #f6fafd;
}
.quote-doc-meta b { display: block; color: #001a33; }
.quote-title-block { margin: 20px 0; }
.quote-title-block h1 { color: #001a33; font-size: 28px; margin: 0 0 6px; }
.quote-title-block p { color: #5b6f82; margin: 0; }
.quote-parties {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
}
.quote-parties article {
  border: 1px solid #d9e6f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}
.quote-parties strong { display: block; margin: 6px 0; color: #001a33; }
.quote-parties p { margin: 0; color: #425466; }
.quote-lines th {
  background: #0070cc !important;
  color: #fff !important;
}
.quote-lines td {
  vertical-align: top;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.quote-lines td span { color: #5b6f82; font-size: 12px; }
.quote-closing { grid-template-columns: 1fr 240px; margin-top: 18px; }
.qr-box {
  display: grid;
  grid-template-columns: repeat(37, 3px);
  gap: 0;
  width: max-content;
  border: 1px solid #d9e6f2;
  padding: 12px;
  margin-bottom: 6px;
  background: #fff;
}
.qr-box span { width: 3px; height: 3px; background: #fff; }
.qr-box span.on { background: #001a33; }
.qr-caption { display: block; color: #5b6f82; font-size: 10px; margin-bottom: 12px; max-width: 220px; word-break: break-all; }
.quote-summary-card {
  border: 1px solid #d9e6f2;
  border-radius: 8px;
  overflow: hidden;
}
.quote-summary-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e7eef6;
}
.quote-summary-card .grand-total {
  background: #0070cc;
  color: #fff;
  font-size: 18px;
}
.signature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
}
.signature-row div {
  border-top: 1px solid #9fb2c6;
  padding-top: 8px;
  text-align: center;
}
.signature-row span { display: block; color: #5b6f82; font-size: 12px; }
.signature-row b { color: #001a33; font-size: 13px; }
.print-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.premium-print footer {
  margin-top: 20px;
  border-radius: 8px;
  padding: 10px 14px;
  background: #001a33;
  color: #fff;
  font-size: 12px;
}

.workspace-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.workspace-subnav a,
.workspace-command-trigger,
.workspace-quick-link,
.workspace-module-card,
.workspace-result,
.workspace-alert { text-decoration: none; }
.workspace-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}
.workspace-subnav a.active,
.workspace-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(19,106,213,.45), rgba(16,185,129,.22));
}
.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 15% 20%, rgba(41,121,255,.24), transparent 32%), linear-gradient(135deg, rgba(6,24,48,.95), rgba(10,46,72,.86));
  box-shadow: 0 26px 70px rgba(0,0,0,.24);
  margin-bottom: 22px;
}
.workspace-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.workspace-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.workspace-hero p {
  color: var(--muted);
  max-width: 780px;
}
.workspace-command-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.workspace-hero-panel {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.workspace-hero-panel span {
  font-size: 42px;
  font-weight: 800;
}
.workspace-grid,
.workspace-wide-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.workspace-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workspace-wide-grid { grid-template-columns: 1.1fr .9fr; }
.workspace-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.workspace-feed-item,
.workspace-mini-row,
.workspace-ai-card,
.workspace-table article,
.workspace-result,
.workspace-alert,
.workspace-quick-link {
  display: flex;
  gap: 12px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  margin-top: 10px;
  color: #fff;
}
.workspace-feed-item span,
.workspace-result span {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
}
.workspace-feed-item small,
.workspace-mini-row small,
.workspace-ai-card p,
.workspace-alert small,
.workspace-quick-link small,
.workspace-module-card small,
.workspace-result small,
.workspace-table small,
.workspace-table span { color: var(--muted); }
.workspace-ai-card,
.workspace-alert,
.workspace-result,
.workspace-table article { flex-direction: column; }
.workspace-module-grid,
.workspace-recent-columns,
.workspace-calendar-strip,
.workspace-search-results {
  display: grid;
  gap: 12px;
}
.workspace-module-grid,
.workspace-recent-columns,
.workspace-calendar-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workspace-calendar-strip article,
.workspace-module-card {
  padding: 16px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.workspace-module-card {
  display: grid;
  gap: 9px;
}
.workspace-module-card span {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #22c55e);
}
.workspace-search-form,
.workspace-export-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.workspace-search-form input {
  min-width: 280px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.workspace-command-palette {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9vh;
  background: rgba(2,8,23,.72);
  backdrop-filter: blur(18px);
}
.workspace-command-palette.open { display: flex; }
.workspace-command-box {
  width: min(720px, calc(100vw - 32px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(9,24,46,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.4);
  overflow: hidden;
}
.workspace-command-search {
  display: grid;
  grid-template-columns: 24px 1fr 42px;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.workspace-command-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.workspace-command-search button {
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
  height: 38px;
}
.workspace-command-list {
  display: grid;
  gap: 8px;
  padding: 14px;
  max-height: 60vh;
  overflow: auto;
}
.workspace-command-list a {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
}
.workspace-command-list a:hover { background: rgba(255,255,255,.08); }
.workspace-command-list a.hidden { display: none; }

.report-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.report-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.report-subnav a.active,
.report-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(29,78,216,.44), rgba(139,92,246,.22));
}
.report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 18%, rgba(99,102,241,.24), transparent 34%), linear-gradient(135deg, rgba(5,18,38,.96), rgba(19,36,74,.9));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.report-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.report-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.report-hero p {
  color: var(--muted);
  max-width: 850px;
}
.report-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.report-hero-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.report-hero-score span {
  font-size: 42px;
  font-weight: 800;
}
.report-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
}
.report-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.report-panel.wide { min-width: 0; }
.report-dashboard-list,
.report-library {
  display: grid;
  gap: 12px;
}
.report-dashboard-list article,
.report-source-row,
.report-timeline,
.report-ai-card,
.report-library article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.report-dashboard-list article {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.report-dashboard-list small,
.report-source-row small,
.report-timeline small,
.report-ai-card p,
.report-ai-card small,
.report-library span,
.report-library small { color: var(--muted); }
.report-source-row span,
.report-dashboard-list span {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(34,197,94,.16);
  color: #86efac;
  font-size: 12px;
}
.report-timeline {
  grid-template-columns: 48px minmax(0, 1fr);
}
.report-timeline span { color: #7dd3fc; font-weight: 700; }
.report-designer-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 260px;
  gap: 16px;
}
.report-palette,
.report-properties,
.report-canvas {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
}
.report-palette,
.report-properties {
  position: sticky;
  top: 16px;
  align-self: start;
}
.report-palette article,
.report-properties article {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  cursor: grab;
}
.report-canvas {
  min-height: 620px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(74px, auto);
  gap: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.report-canvas.is-drop-target {
  border-color: rgba(125,211,252,.65);
  background: rgba(14,165,233,.08);
}
.report-canvas-toolbar,
.report-drop-zone {
  grid-column: 1 / -1;
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.16);
}
.report-widget-block {
  grid-column: span 6;
  min-height: 120px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(29,78,216,.24), rgba(15,23,42,.9));
  border: 1px solid rgba(255,255,255,.12);
}
.report-widget-block.generated {
  background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(15,23,42,.9));
}
.report-widget-block span,
.report-widget-block small,
.report-properties small,
.report-palette small { color: var(--muted); }

.platform-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.platform-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.platform-subnav a.active,
.platform-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(14,165,233,.42), rgba(34,197,94,.2));
}
.platform-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 18%, rgba(14,165,233,.22), transparent 34%), linear-gradient(135deg, rgba(3,19,36,.96), rgba(8,44,58,.9));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.platform-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.platform-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.platform-hero p {
  color: var(--muted);
  max-width: 870px;
}
.platform-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.platform-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.platform-score span {
  font-size: 42px;
  font-weight: 800;
}
.platform-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
}
.platform-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.platform-env-grid,
.platform-monitor-grid,
.platform-table {
  display: grid;
  gap: 12px;
}
.platform-env-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.platform-monitor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.platform-env-grid article,
.platform-monitor-grid article,
.platform-status-row,
.platform-advisor-card,
.platform-table article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.platform-env-grid span,
.platform-status-row span {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(34,197,94,.16);
  color: #86efac;
  font-size: 12px;
}
.platform-env-grid small,
.platform-env-grid em,
.platform-status-row small,
.platform-advisor-card p,
.platform-advisor-card small,
.platform-monitor-grid small,
.platform-table span,
.platform-table small { color: var(--muted); }
.platform-log-stream {
  display: grid;
  gap: 8px;
}
.platform-log-stream article {
  display: grid;
  grid-template-columns: 80px 60px 160px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(2,6,23,.42);
  border: 1px solid rgba(255,255,255,.08);
}
.platform-log-stream span { color: #7dd3fc; }
.platform-log-stream strong { color: #86efac; }
.platform-log-stream em,
.platform-log-stream small { color: var(--muted); }

.performance-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.performance-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.performance-subnav a.active,
.performance-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(34,197,94,.38), rgba(14,165,233,.22));
}
.performance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 10% 16%, rgba(34,197,94,.22), transparent 34%), linear-gradient(135deg, rgba(4,22,34,.96), rgba(12,50,54,.88));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.performance-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.performance-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.performance-hero p {
  color: var(--muted);
  max-width: 880px;
}
.performance-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.performance-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.performance-score span {
  font-size: 42px;
  font-weight: 800;
}
.performance-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
}
.performance-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.performance-mini-grid,
.performance-table {
  display: grid;
  gap: 12px;
}
.performance-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.performance-mini-grid article,
.performance-advice,
.performance-event,
.performance-module,
.performance-table article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.performance-mini-grid span {
  font-size: 24px;
  font-weight: 800;
  color: #86efac;
}
.performance-advice p,
.performance-advice small,
.performance-module small,
.performance-table span,
.performance-table small,
.performance-mini-grid small { color: var(--muted); }
.performance-event {
  grid-template-columns: 80px 60px 150px minmax(0, 1fr);
  align-items: center;
}
.performance-event span { color: #7dd3fc; }
.performance-event strong { color: #86efac; }
.performance-event em,
.performance-event small { color: var(--muted); }

.runtime-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.runtime-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.runtime-subnav a.active,
.runtime-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(59,130,246,.42), rgba(168,85,247,.24));
}
.runtime-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 18%, rgba(59,130,246,.24), transparent 34%), linear-gradient(135deg, rgba(5,18,38,.96), rgba(29,35,72,.9));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.runtime-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.runtime-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.runtime-hero p {
  color: var(--muted);
  max-width: 880px;
}
.runtime-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.runtime-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.runtime-score span {
  font-size: 42px;
  font-weight: 800;
}
.runtime-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
}
.runtime-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.runtime-provider-grid,
.runtime-table {
  display: grid;
  gap: 12px;
}
.runtime-provider-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.runtime-provider-grid article,
.runtime-row,
.runtime-advice,
.runtime-table article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.runtime-provider-grid span,
.runtime-row span,
.runtime-table span {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
}
.runtime-provider-grid small,
.runtime-row small,
.runtime-table small,
.runtime-advice p,
.runtime-advice small { color: var(--muted); }

.event-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.event-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.event-subnav a.active,
.event-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(14,165,233,.42), rgba(16,185,129,.24));
}
.event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 18%, rgba(14,165,233,.22), transparent 34%), linear-gradient(135deg, rgba(4,18,36,.96), rgba(10,45,63,.9));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.event-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.event-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.event-hero p {
  color: var(--muted);
  max-width: 900px;
}
.event-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.event-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.event-score span {
  font-size: 42px;
  font-weight: 800;
}
.event-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-top: 18px;
}
.event-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.event-flow,
.event-table {
  display: grid;
  gap: 12px;
}
.event-node,
.event-row,
.event-advice,
.event-workflow,
.event-table article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.event-node {
  position: relative;
  padding-left: 18px;
}
.event-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: #22c55e;
}
.event-node.status-warning::before { background: #f59e0b; }
.event-node.status-failed::before { background: #ef4444; }
.event-row span,
.event-workflow span,
.event-table span {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
}
.event-node small,
.event-row small,
.event-workflow small,
.event-table small,
.event-advice p,
.event-advice small { color: var(--muted); }

.extension-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 18px;
}
.extension-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  white-space: nowrap;
}
.extension-subnav a.active,
.extension-subnav a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(99,102,241,.42), rgba(14,165,233,.24));
}
.extension-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: radial-gradient(circle at 12% 18%, rgba(99,102,241,.24), transparent 34%), linear-gradient(135deg, rgba(5,18,38,.96), rgba(31,37,82,.9));
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  margin-bottom: 22px;
}
.extension-hero.compact { grid-template-columns: minmax(0, 1fr) auto; }
.extension-hero h2 {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.12;
}
.extension-hero p {
  color: var(--muted);
  max-width: 900px;
}
.extension-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.extension-score {
  display: grid;
  align-content: center;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.extension-score span {
  font-size: 42px;
  font-weight: 800;
}
.extension-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-top: 18px;
}
.extension-panel {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(8,21,42,.74);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.extension-market-grid,
.extension-table {
  display: grid;
  gap: 12px;
}
.extension-market-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.extension-market-grid article,
.extension-row,
.extension-advice,
.extension-table article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.extension-market-grid span,
.extension-row span,
.extension-table span {
  color: #a5b4fc;
  font-size: 12px;
  font-weight: 700;
}
.extension-market-grid small,
.extension-row small,
.extension-table small,
.extension-advice p,
.extension-advice small { color: var(--muted); }

@media (max-width: 1100px) {
  .workspace-grid,
  .workspace-wide-grid,
  .workspace-hero,
  .workspace-hero.compact,
  .workspace-module-grid,
  .workspace-recent-columns,
  .workspace-calendar-strip,
  .report-grid,
  .report-hero,
  .report-hero.compact,
  .report-designer-shell,
  .platform-grid,
  .platform-hero,
  .platform-hero.compact,
  .platform-env-grid,
  .platform-monitor-grid,
  .platform-log-stream,
  .performance-grid,
  .performance-hero,
  .performance-hero.compact,
  .performance-mini-grid,
  .performance-event,
  .runtime-grid,
  .runtime-hero,
  .runtime-hero.compact,
  .runtime-provider-grid,
  .event-grid,
  .event-hero,
  .event-hero.compact,
  .extension-grid,
  .extension-hero,
  .extension-hero.compact,
  .extension-market-grid { grid-template-columns: 1fr; }
  .workspace-search-form input { min-width: 0; width: 100%; }
  .report-palette,
  .report-properties { position: static; }
  .report-canvas { grid-template-columns: 1fr; }
  .report-widget-block { grid-column: auto; }
  .report-dashboard-list article { grid-template-columns: 1fr; }
}

.rc2-table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.rc2-table-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(280px, 100%);
  flex: 1 1 220px;
  margin: 0;
}
.rc2-table-toolbar input,
.rc2-table-toolbar select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(2,8,23,.74);
  color: var(--text);
  padding: 9px 11px;
}
.rc2-table-count {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}
th.is-sortable {
  cursor: pointer;
  user-select: none;
}
th.is-sortable::after {
  content: "  \f0dc";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  opacity: .45;
  font-size: 11px;
}
.rc2-hidden-column {
  display: none !important;
}
.enterprise-empty-state {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(0,191,255,.28);
  border-radius: 16px;
  background: rgba(0,191,255,.055);
  color: var(--muted);
}
.enterprise-empty-state i {
  color: var(--primary);
  font-size: 24px;
}
.enterprise-empty-state strong {
  color: var(--text);
}
.enterprise-empty-state.compact {
  margin-top: 10px;
  padding: 12px;
  font-size: 12px;
}
.field-required {
  position: relative;
}
.field-required > span:first-child::after,
.field-required:not(:has(> span:first-child))::before {
  color: var(--warning);
}
.field-required > span:first-child::after {
  content: " *";
}
.field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.was-validated :invalid {
  border-color: rgba(251,113,133,.85) !important;
  box-shadow: 0 0 0 3px rgba(251,113,133,.12);
}
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: rgba(34,197,94,.7) !important;
}
button.is-clicked,
a.is-clicked {
  transform: translateY(1px) scale(.99);
}
button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .78;
}
button.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  display: inline-block;
  margin-left: 8px;
  animation: rc2-spin .75s linear infinite;
  vertical-align: -2px;
}
.metric-card,
.comm-panel,
.panel,
.runtime-panel,
.event-panel,
.extension-panel {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.metric-card:hover,
.comm-panel:hover,
.panel:hover,
.runtime-panel:hover,
.event-panel:hover,
.extension-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(0,191,255,.25);
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
}
.content {
  animation: rc2-fade .32s ease-out;
}
.prelaunch-experience-panel {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1050;
  width: min(320px, calc(100vw - 36px));
  transform: translateX(calc(100% + 24px));
  transition: transform .28s ease;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(4,18,36,.92);
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
  padding: 16px;
}
.prelaunch-experience-panel.is-open {
  transform: translateX(0);
}
.prelaunch-panel-toggle {
  position: absolute;
  left: -54px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  background: linear-gradient(135deg, rgba(0,191,255,.85), rgba(139,92,246,.78));
  box-shadow: 0 16px 42px rgba(0,0,0,.32);
}
.prelaunch-experience-panel strong,
.prelaunch-experience-panel small,
.prelaunch-pulse-list span {
  display: block;
}
.prelaunch-experience-panel small {
  color: var(--muted);
  margin-top: 4px;
}
.prelaunch-pulse-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.prelaunch-pulse-list span {
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.055);
}
.prelaunch-pulse-list span.is-live {
  color: #fff;
  background: rgba(0,191,255,.12);
}
.has-tooltip {
  position: relative;
}
@keyframes rc2-spin {
  to { transform: rotate(360deg); }
}
@keyframes rc2-fade {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 780px) {
  .rc2-table-toolbar {
    align-items: stretch;
  }
  .rc2-table-toolbar label,
  .rc2-table-toolbar select,
  .rc2-table-toolbar button {
    width: 100%;
  }
  .rc2-table-count {
    width: 100%;
    margin-left: 0;
  }
  .prelaunch-experience-panel {
    right: 12px;
    bottom: 74px;
  }
}

@media print {
  @page { size: auto; margin: 12mm; }
  body { background: #fff !important; }
  .sidebar, .topbar, .print-button, .document-toolbar button, .document-toolbar a[href*="/crm/documents"] { display: none !important; }
  .app-shell { display: block; }
  .main { padding: 0; }
  .content { padding: 0; }
  .quote-sheet { border: 0; box-shadow: none; max-width: none; color: #172033; padding: 0; }
  .quote-sheet * { color-adjust: exact; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .quote-letterhead, .quote-title-block, .quote-parties article, .quote-summary-card, .signature-row div, .document-inspector, .document-preview-frame { break-inside: avoid; page-break-inside: avoid; }
  .quote-lines tr { break-inside: avoid; page-break-inside: avoid; }
  .quote-lines thead { display: table-header-group; }
  .quote-lines tfoot { display: table-footer-group; }
  .signature-row { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .document-view-grid { grid-template-columns: 1fr; }
  .document-inspector { break-before: page; }
}

/* VIPLUSEC Responsive Enterprise Shell */
@media screen {
  :root {
    --sidebar-width: 310px;
    --topbar-height: 76px;
    --touch-target: 44px;
  }

  html {
    scroll-behavior: smooth;
  }

  body.drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  .mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(0);
    transition: opacity .24s ease, visibility .24s ease, backdrop-filter .24s ease;
  }

  body.drawer-open .mobile-drawer-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(4px);
  }

  .mobile-menu-toggle,
  .mobile-topbar-brand,
  .mobile-account-section,
  .sidebar-close {
    display: none;
  }

  .sidebar-user-card {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(56, 189, 248, .18);
    border-radius: 20px;
    background:
      radial-gradient(circle at 15% 0%, rgba(56, 189, 248, .16), transparent 36%),
      linear-gradient(135deg, rgba(15, 23, 42, .62), rgba(2, 6, 23, .34));
    box-shadow: 0 18px 42px rgba(0, 13, 26, .18);
    backdrop-filter: blur(16px);
  }

  [data-theme="light"] .sidebar-user-card {
    background:
      radial-gradient(circle at 15% 0%, rgba(14, 165, 233, .14), transparent 36%),
      rgba(255, 255, 255, .82);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
  }

  .sidebar-user-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .sidebar-user-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    font-weight: 950;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 32%),
      linear-gradient(135deg, #0284c7, #0ea5e9 48%, #0369a1);
    box-shadow: 0 16px 32px rgba(14, 165, 233, .25);
  }

  .sidebar-user-main strong,
  .sidebar-user-main small,
  .sidebar-user-main em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-user-main strong {
    color: var(--text-primary);
    font-size: .94rem;
    font-weight: 900;
  }

  .sidebar-user-main small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .78rem;
  }

  .sidebar-user-main em {
    margin-top: 5px;
    color: #34d399;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
  }

  .sidebar-user-main em i {
    margin-right: 5px;
    font-size: .55rem;
  }

  .sidebar-user-company {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 800;
  }

  .sidebar-user-company i {
    color: #38bdf8;
  }

  .sidebar-user-company span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-user-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .sidebar-user-actions a,
  .sidebar-user-actions button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    background: rgba(148, 163, 184, .08);
    color: var(--text-secondary);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  }

  .sidebar-user-actions form {
    margin: 0;
  }

  .sidebar-user-actions a:hover,
  .sidebar-user-actions button:hover {
    border-color: rgba(56, 189, 248, .34);
    background: rgba(56, 189, 248, .12);
    color: var(--text-primary);
    transform: translateY(-1px);
  }

  .mobile-account-section {
    border: 1px solid rgba(0, 191, 255, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 191, 255, .12), rgba(255, 255, 255, .045));
    box-shadow: 0 16px 40px rgba(0, 13, 26, .22);
  }

  .mobile-account-section > strong {
    color: var(--text);
    font-weight: 800;
  }

  .mobile-account-links {
    display: grid;
    gap: 9px;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
  }

  .mobile-account-links a,
  .mobile-account-links button {
    width: 100%;
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: var(--text);
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
    text-align: left;
    font: inherit;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  }

  .mobile-account-links a:hover,
  .mobile-account-links button:hover,
  .mobile-account-links a:focus-visible,
  .mobile-account-links button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(0, 191, 255, .36);
    background: rgba(0, 191, 255, .12);
    outline: none;
  }

  .mobile-account-links i {
    width: 18px;
    min-width: 18px;
    text-align: center;
    color: var(--accent);
  }

  .mobile-account-links form {
    margin: 4px 0 0;
  }

  .mobile-account-links .mobile-logout-button {
    justify-content: center;
    color: #fff;
    border-color: rgba(248, 113, 113, .42);
    background: linear-gradient(135deg, rgba(220, 38, 38, .9), rgba(127, 29, 29, .86));
    box-shadow: 0 14px 32px rgba(220, 38, 38, .24);
    font-weight: 800;
  }

  .mobile-account-links .mobile-logout-button i {
    color: #fff;
  }

  [data-theme="light"] .mobile-account-section {
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(255, 255, 255, .94));
    border-color: rgba(15, 23, 42, .1);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  }

  [data-theme="light"] .mobile-account-links a,
  [data-theme="light"] .mobile-account-links button {
    color: var(--text);
    border-color: rgba(15, 23, 42, .1);
    background: rgba(255, 255, 255, .78);
  }

  .mobile-account-profile {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 0;
    border-radius: 14px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .18s ease;
  }

  .mobile-account-profile:hover,
  .mobile-account-profile:focus-visible {
    background: rgba(14, 165, 233, .1);
    outline: none;
  }

  .mobile-account-profile:active {
    transform: scale(.99);
  }

  .mobile-account-avatar {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    letter-spacing: .04em;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 32%),
      linear-gradient(135deg, #0284c7, #0ea5e9 48%, #0369a1);
    box-shadow: 0 16px 34px rgba(14, 165, 233, .28);
  }

  .mobile-account-profile span {
    display: block;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mobile-account-profile strong {
    display: block;
    min-width: 0;
    margin-top: 2px;
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-account-profile small {
    display: block;
    min-width: 0;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-account-chevron {
    color: var(--muted);
    font-size: 12px;
    transition: transform .24s ease, color .2s ease;
  }

  .mobile-account-section.is-open .mobile-account-chevron {
    color: var(--accent);
    transform: rotate(180deg);
  }

  .mobile-account-divider {
    height: 1px;
    margin: 4px 0 3px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .42), transparent);
  }

  .mobile-account-section .mobile-account-links {
    gap: 8px;
  }

  .mobile-account-section.is-open .mobile-account-links {
    max-height: 520px;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-account-links .mobile-account-item {
    position: relative;
    isolation: isolate;
    min-height: 44px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, .18);
    color: var(--text);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
      rgba(15, 23, 42, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 24px rgba(0, 13, 26, .14);
    font-weight: 750;
    line-height: 1.15;
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
  }

  .mobile-account-links .mobile-account-item::before,
  .mobile-logout-button::before {
    content: "";
    position: absolute;
    inset: auto auto 50% 50%;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, .32);
    transform: translate(-50%, 50%) scale(1);
  }

  .mobile-account-links .mobile-account-item.is-rippling::before,
  .mobile-logout-button.is-rippling::before {
    animation: mobileAccountRipple .46s ease-out;
  }

  .mobile-account-links .mobile-account-item > i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 13px;
    color: #e0f2fe;
    background: linear-gradient(135deg, rgba(14, 165, 233, .36), rgba(2, 132, 199, .16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }

  .mobile-account-links .mobile-account-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-account-links .mobile-account-item em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    transition: transform .18s ease, color .18s ease;
  }

  .mobile-account-links .mobile-account-item:hover,
  .mobile-account-links .mobile-account-item:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, .48);
    background:
      linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(255, 255, 255, .055)),
      rgba(15, 23, 42, .4);
    box-shadow: 0 16px 34px rgba(0, 13, 26, .22);
  }

  .mobile-account-links .mobile-account-item:hover em,
  .mobile-account-links .mobile-account-item:focus-visible em {
    color: var(--accent);
    transform: translateX(3px);
  }

  .mobile-account-links .mobile-account-item:active,
  .mobile-logout-button:active {
    transform: translateY(0) scale(.99);
  }

  .mobile-account-links .mobile-account-item:focus-visible,
  .mobile-logout-button:focus-visible {
    outline: 3px solid rgba(56, 189, 248, .34);
    outline-offset: 2px;
  }

  .mobile-account-links .mobile-logout-form {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .16);
  }

  .mobile-account-links .mobile-logout-button {
    position: relative;
    isolation: isolate;
    min-height: 48px;
    display: flex;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    padding: 13px 16px;
    border-radius: 16px;
    color: #fff;
    border: 1px solid rgba(248, 113, 113, .46);
    background:
      linear-gradient(135deg, rgba(248, 113, 113, .95), rgba(185, 28, 28, .96)),
      #b91c1c;
    box-shadow: 0 18px 38px rgba(185, 28, 28, .25);
    font-weight: 850;
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  }

  .mobile-account-links .mobile-logout-button:hover,
  .mobile-account-links .mobile-logout-button:focus-visible {
    filter: saturate(1.05);
    border-color: rgba(254, 202, 202, .72);
    box-shadow: 0 22px 44px rgba(185, 28, 28, .34);
  }

  @keyframes mobileAccountRipple {
    0% { opacity: .48; transform: translate(-50%, 50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 50%) scale(34); }
  }

  [data-theme="light"] .mobile-account-profile strong,
  [data-theme="light"] .mobile-account-links .mobile-account-item {
    color: #0f172a;
  }

  [data-theme="light"] .mobile-account-profile small {
    color: #475569;
  }

  [data-theme="light"] .mobile-account-links .mobile-account-item {
    border-color: rgba(15, 23, 42, .1);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(241, 245, 249, .86)),
      #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 12px 26px rgba(15, 23, 42, .08);
  }

  [data-theme="light"] .mobile-account-links .mobile-account-item > i {
    color: #0369a1;
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(2, 132, 199, .08));
  }

  .nav-menu {
    gap: 8px;
  }

  .nav-group {
    display: grid;
    gap: 4px;
  }

  .nav-accordion {
    width: 100%;
    min-height: var(--touch-target);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(0, 191, 255, .12);
    position: relative;
    border-radius: 14px;
    color: rgba(125, 211, 252, .94);
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  .nav-accordion span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-accordion i {
    transition: transform .24s ease;
  }

  .nav-group-badge {
    min-width: 24px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(14, 165, 233, .18);
    border: 1px solid rgba(56, 189, 248, .24);
    font-size: .68rem;
    font-weight: 950;
  }

  .nav-group-badge.is-empty {
    display: none;
  }

  .nav-group.is-open > .nav-accordion,
  .nav-accordion:hover {
    color: #fff;
    border-color: rgba(0, 191, 255, .28);
    background: linear-gradient(135deg, rgba(0, 191, 255, .14), rgba(255,255,255,.045));
    box-shadow: 0 12px 28px rgba(14, 165, 233, .08);
    transform: translateX(1px);
  }

  .nav-group.is-open > .nav-accordion i {
    transform: rotate(180deg);
  }

  .nav-group-panel {
    display: grid;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height .3s ease, opacity .22s ease, transform .22s ease;
  }

  .nav-group.is-open > .nav-group-panel {
    max-height: 1800px;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-group-panel a {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  }

  .nav-group-panel a > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #38bdf8;
    background: rgba(56, 189, 248, .1);
  }

  .nav-item-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .nav-item-copy strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-item-copy small {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: .71rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-group-panel a em,
  .nav-item-badge {
    min-width: 22px;
    justify-self: end;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(148, 163, 184, .1);
    font-size: .63rem;
    font-style: normal;
    font-weight: 900;
    text-align: center;
  }

  .nav-item-badge {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
  }

  .nav-group-panel a:hover,
  .nav-group-panel a.active {
    border-color: rgba(56, 189, 248, .24);
    background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(34, 197, 94, .06));
    color: var(--text-primary);
    transform: translateX(2px);
  }

  .topbar-title {
    min-width: 0;
  }

  .metric-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .table-responsive,
  .responsive-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,191,255,.55) rgba(255,255,255,.08);
  }

  .table-responsive::-webkit-scrollbar,
  .responsive-table::-webkit-scrollbar {
    height: 8px;
  }

  .table-responsive::-webkit-scrollbar-thumb,
  .responsive-table::-webkit-scrollbar-thumb {
    background: rgba(0,191,255,.5);
    border-radius: 999px;
  }

  .suite-table,
  table {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button,
  .primary-btn,
  .secondary-btn,
  .icon-btn {
    touch-action: manipulation;
  }

  .icon-btn,
  .primary-btn,
  .secondary-btn,
  .auth-form button,
  .nav-menu a,
  .nav-accordion {
    min-height: var(--touch-target);
  }

  .ripple-active {
    position: relative;
    overflow: hidden;
  }

  .ripple-active::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 12px;
    height: 12px;
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    transform: translate(-50%, -50%) scale(1);
    animation: viplusec-ripple .48s ease-out;
    pointer-events: none;
  }

  @keyframes viplusec-ripple {
    to {
      opacity: 0;
      transform: translate(-50%, -50%) scale(18);
    }
  }
}

@media screen and (min-width: 1400px) {
  .content {
    padding: 32px;
  }

  .metric-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }
}

@media screen and (max-width: 1200px) {
  .app-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .sidebar {
    padding: 18px;
  }

  .metric-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 991.98px) {
  html,
  body,
  .app-shell,
  .main {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 1090;
    box-sizing: border-box;
    width: min(84vw, 390px);
    max-width: 390px;
    height: 100dvh !important;
    padding: 18px;
    border-right: 1px solid rgba(0,191,255,.28);
    transform: translateX(-104%);
    opacity: .98;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body.drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: 30px 0 80px rgba(0,0,0,.45);
  }

  .sidebar[aria-hidden="true"] {
    visibility: visible;
  }

  .sidebar-footer {
    position: static !important;
    margin-top: 18px;
    padding-bottom: 18px;
  }

  .tenant-switcher {
    order: 2;
  }

  .nav-menu {
    order: 3;
  }

  .mobile-account-section {
    display: block;
    order: 4;
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 2;
    margin-top: auto;
    padding: 8px;
    backdrop-filter: blur(18px);
  }

  .sidebar-footer {
    order: 5;
  }

  .mobile-menu-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--touch-target);
    width: var(--touch-target);
    height: var(--touch-target);
    border: 1px solid rgba(0,191,255,.24);
    border-radius: 12px;
    color: var(--text);
    background: rgba(0,191,255,.1);
  }

  .mobile-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: .92rem;
    letter-spacing: .04em;
    min-width: 0;
  }

  .mobile-topbar-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
    align-items: center !important;
    gap: 10px;
    padding: 12px 14px;
  }

  .topbar-title {
    grid-column: 1 / -1;
    order: 3;
  }

  .topbar-title .eyebrow {
    display: none;
  }

  .topbar h1 {
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions {
    justify-self: end;
    width: auto !important;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  .top-search {
    width: 44px !important;
    min-width: 44px;
  }

  .top-search input {
    position: absolute;
    right: 14px;
    top: calc(100% + 8px);
    width: min(420px, calc(100vw - 28px)) !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .top-search:focus-within input {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .user-chip span,
  .api-chip,
  .topbar-actions form[method="post"] {
    display: none;
  }

  .content {
    padding: 18px;
  }

  .metric-grid,
  .dashboard-grid,
  .dashboard-grid.wide,
  .split-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nav-group-panel a {
    min-height: 48px;
    font-size: .95rem;
  }

  .nav-menu a:hover,
  .nav-menu a.active {
    transform: none;
  }
}

@media screen and (max-width: 767.98px) {
  .content {
    padding: 14px;
  }

  .panel,
  .metric-card,
  .role-card {
    border-radius: 14px;
  }

  .form-grid,
  .form-row,
  .stack-form,
  .enterprise-form,
  .inline-form,
  .action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  input,
  select,
  textarea,
  .stack-form input,
  .stack-form select,
  .stack-form textarea,
  .auth-form input {
    min-height: 46px;
    font-size: 16px;
    width: 100%;
  }

  .primary-btn,
  .secondary-btn,
  .auth-form button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .panel-header {
    display: grid;
    gap: 6px;
  }
}

@media screen and (max-width: 575.98px) {
  .sidebar {
    width: min(84vw, 360px);
    max-width: 360px;
  }

  .topbar {
    padding: 10px 12px;
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .mobile-topbar-brand span {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .icon-btn,
  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .metric-grid,
  .dashboard-grid,
  .dashboard-grid.wide,
  .split-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: 1fr !important;
  }

  .suite-table.responsive-card-table,
  .suite-table.responsive-card-table thead,
  .suite-table.responsive-card-table tbody,
  .suite-table.responsive-card-table tr,
  .suite-table.responsive-card-table th,
  .suite-table.responsive-card-table td {
    display: block;
    width: 100%;
  }

  .suite-table.responsive-card-table thead {
    display: none;
  }

  .suite-table.responsive-card-table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(0,191,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    overflow: hidden;
  }

  .suite-table.responsive-card-table td {
    display: grid;
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-color: rgba(255,255,255,.07);
    white-space: normal;
    word-break: break-word;
  }

  .suite-table.responsive-card-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 700;
    font-size: .78rem;
  }

  .prelaunch-experience-panel {
    display: none;
  }
}

/* AI Center cascade guards */
.ai-center-hero .ai-center-hero-copy > .eyebrow {
  color: #7dd3fc;
}

.ai-toggle-list input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PL-1 Enterprise Product Polish */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,191,255,.42) rgba(255,255,255,.06);
}
*::selection {
  color: #00111f;
  background: rgba(0,212,255,.82);
}
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 8%, rgba(0,191,255,.16), transparent 34%),
    radial-gradient(circle at 82% 2%, rgba(34,197,94,.09), transparent 30%),
    linear-gradient(145deg, var(--bg), var(--bg2));
}
:focus-visible {
  outline: 3px solid rgba(0,212,255,.34);
  outline-offset: 3px;
  border-radius: 10px;
}
.brand-logo,
.login-logo {
  filter: drop-shadow(0 12px 26px rgba(0,191,255,.18));
}
.sidebar {
  border-right: 1px solid rgba(0,191,255,.18);
  background:
    linear-gradient(180deg, rgba(0,27,51,.96), rgba(0,13,26,.94)),
    rgba(0,13,26,.92);
}
.nav-menu a {
  min-height: 42px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
  border-color: rgba(0,191,255,.22);
  background: linear-gradient(135deg, rgba(0,191,255,.14), rgba(255,255,255,.045));
  transform: translateX(2px);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(0,191,255,.14);
  backdrop-filter: blur(20px);
}
.top-search input,
input,
select,
textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus,
select:focus,
textarea:focus,
.top-search input:focus {
  border-color: rgba(0,212,255,.56) !important;
  box-shadow: 0 0 0 4px rgba(0,191,255,.11);
}
.primary-btn,
.secondary-btn,
.ghost-btn,
.btn,
.icon-btn,
.auth-form button {
  min-height: 38px;
  letter-spacing: 0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.primary-btn:hover,
.btn-primary:hover,
.auth-form button:hover {
  box-shadow: 0 16px 34px rgba(0,191,255,.22);
}
.secondary-btn:hover,
.ghost-btn:hover,
.btn-outline-light:hover,
.icon-btn:hover {
  border-color: rgba(0,191,255,.32);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.suite-table,
.responsive-table table,
.table-responsive table {
  border-collapse: separate;
  border-spacing: 0;
}
.suite-table thead th,
.responsive-table thead th,
.table-responsive thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #dff7ff;
  background: linear-gradient(180deg, rgba(0,112,204,.38), rgba(0,27,51,.72));
}
.suite-table tbody tr,
.responsive-table tbody tr,
.table-responsive tbody tr {
  transition: background .16s ease, transform .16s ease;
}
.suite-table tbody tr:hover,
.responsive-table tbody tr:hover,
.table-responsive tbody tr:hover {
  background: rgba(0,191,255,.07);
}
.metric-card,
.comm-panel,
.panel,
.runtime-panel,
.event-panel,
.extension-panel,
.command-tile,
.connector-provider-tile,
.ai-ops-card {
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,191,255,.035)),
    rgba(2,8,23,.72);
}
.panel-header h2,
.comm-panel h2 {
  letter-spacing: 0;
}
.eyebrow,
.nav-section,
.status-pill,
.module-status {
  letter-spacing: .02em;
}
.auth-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--purple));
}
.suite-product-footer,
.auth-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid rgba(0,191,255,.14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,191,255,.075), rgba(255,255,255,.035));
  color: var(--muted);
  font-size: 12px;
}
.suite-product-footer {
  margin-inline: 24px;
  margin-bottom: 24px;
}
.suite-product-footer > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.suite-product-footer strong,
.auth-product-footer strong {
  color: var(--text);
}
.footer-wordmark {
  width: 112px;
  max-height: 32px;
  object-fit: contain;
}
.auth-product-footer {
  display: grid;
  text-align: center;
  justify-items: center;
}
.loading-state div,
.comm-toast,
.enterprise-empty-state {
  box-shadow: 0 18px 46px rgba(0,0,0,.24);
}
.loading-skeleton {
  border-radius: 14px;
}
@media (max-width: 980px) {
  .topbar {
    position: relative;
  }
  .topbar-actions,
  .hero-actions,
  .export-stack {
    width: 100%;
  }
  .top-search {
    width: 100%;
  }
  .top-search input {
    min-width: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* VIPLUSEC mobile topbar and actionable PWA notifications. */
.enterprise-toast-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.enterprise-toast .enterprise-toast-action {
  width: auto;
  min-width: max-content;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 10px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, .18);
  font-size: .74rem;
  font-weight: 900;
}

[data-theme="light"] .enterprise-toast .enterprise-toast-action {
  color: #075985;
  background: rgba(14, 165, 233, .12);
}

.enterprise-toast .enterprise-toast-action:hover,
.enterprise-toast .enterprise-toast-action:focus-visible {
  border-color: rgba(56, 189, 248, .58);
  background: rgba(14, 165, 233, .24);
}

@media screen and (max-width: 991.98px) {
  .topbar > .topbar-actions > .command-trigger,
  .topbar > .topbar-actions > #themeToggle {
    display: none !important;
  }

  .topbar > .topbar-actions {
    max-width: 100%;
    align-items: center;
  }

  .topbar > .topbar-actions > .user-chip {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 5px;
  }

  .topbar > .topbar-actions > .user-chip b {
    margin: 0;
  }
}

/* VIPLUSEC Light Theme: final contrast guard for controls and overlays. */
[data-theme="light"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .form-control
) {
  color: var(--control-text);
  background-color: var(--control-bg);
  border-color: var(--control-border);
  caret-color: var(--interactive);
  color-scheme: light;
}

[data-theme="light"] :where(input, textarea)::placeholder {
  color: var(--control-placeholder);
  opacity: 1;
}

[data-theme="light"] select option {
  color: var(--control-text);
  background: var(--control-bg);
}

[data-theme="light"] .tenant-switcher {
  color: var(--control-text);
  background: rgba(255, 255, 255, .96) !important;
  border-color: var(--control-border) !important;
}

[data-theme="light"] .tenant-switcher span {
  color: var(--heading) !important;
}

[data-theme="light"] .tenant-switcher select {
  color: var(--inverse-text) !important;
  background: var(--inverse-surface) !important;
  border-color: rgba(14, 165, 233, .48) !important;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .08), 0 8px 22px rgba(15, 23, 42, .12);
  color-scheme: dark;
}

[data-theme="light"] .tenant-switcher select option {
  color: var(--inverse-text);
  background: var(--inverse-surface);
}

[data-theme="light"] :where(
  .top-search,
  .dropdown-menu,
  .popover,
  .viplusec-command-dialog,
  .enterprise-notification-center,
  .enterprise-center-dialog
) {
  color: var(--text-primary);
}

[data-theme="light"] :where(
  .viplusec-command-head input,
  .center-toolbar input,
  .sound-pack-select,
  .top-search input,
  .workspace-search-form input,
  .filter-bar input,
  .filter-bar select,
  .rc2-table-toolbar input,
  .rc2-table-toolbar select,
  .stack-form input,
  .stack-form select,
  .stack-form textarea
) {
  color: var(--control-text) !important;
  background-color: var(--control-bg) !important;
}

[data-theme="light"] :where(
  .viplusec-command-head input,
  .center-toolbar input,
  .top-search input,
  .workspace-search-form input,
  .filter-bar input,
  .rc2-table-toolbar input,
  .stack-form input,
  .stack-form textarea
)::placeholder {
  color: var(--control-placeholder) !important;
  opacity: 1;
}

[data-theme="light"] :where(
  .viplusec-command-item,
  .notification-center-item,
  .notification-center-actions button,
  .notification-center-actions a,
  .sound-chip,
  .sound-library button,
  .enterprise-center-tabs button,
  .center-toolbar button,
  .center-toggle-list button
) {
  color: var(--text-secondary);
}

[data-theme="light"] :where(
  .viplusec-command-item strong,
  .notification-center-item strong,
  .sound-center-title strong,
  .center-card-grid strong,
  .center-list strong
) {
  color: var(--text-primary) !important;
}

[data-theme="light"] :where(
  .viplusec-command-item small,
  .viplusec-command-meta,
  .notification-center-item small,
  .notification-center-header small,
  .sound-center-title span,
  .center-card-grid span,
  .center-list small
) {
  color: var(--text-muted) !important;
}

[data-theme="light"] :where(.sidebar-user-card, .sidebar-user-actions, .nav-menu, .nav-group-panel) {
  color: var(--text-primary);
}

[data-theme="light"] :where(.sidebar-user-actions a, .sidebar-user-actions button, .icon-btn, .mobile-menu-toggle, .sidebar-close) {
  color: var(--text-primary) !important;
}

[data-theme="light"] :where(
  .workspace-hero,
  .command-hero,
  .executive-hero,
  .control-hero,
  .crm-hero,
  .inventory-hero,
  .procurement-hero,
  .sales-hero,
  .finance-hero,
  .report-hero,
  .platform-hero,
  .performance-hero,
  .runtime-hero,
  .event-hero,
  .extension-hero,
  .ai-hero,
  .automation-hero,
  .comm-hero,
  .security-hero,
  .integration-hero,
  .notification-hero,
  .cx-hero,
  .admin-hero,
  .ops-hero,
  .saas-hero,
  .connectors-hero,
  .ai-agents-hero,
  .automation-studio-hero
) :where(input, select, textarea) {
  color: var(--inverse-text);
  background-color: rgba(15, 37, 56, .9);
  border-color: rgba(219, 234, 254, .3);
  color-scheme: dark;
}

[data-theme="light"] :where(
  .workspace-hero,
  .command-hero,
  .executive-hero,
  .control-hero,
  .crm-hero,
  .inventory-hero,
  .procurement-hero,
  .sales-hero,
  .finance-hero
) :where(input, textarea)::placeholder {
  color: var(--inverse-muted);
  opacity: 1;
}

/* VIPLUSEC Enterprise Sidebar Navigation V2 */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, .5) transparent;
}

.sidebar-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 13px;
  background: rgba(15, 23, 42, .42);
  color: var(--text-primary);
  cursor: pointer;
}

.sidebar-user-card {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, .16), transparent 36%),
    linear-gradient(135deg, rgba(15, 23, 42, .62), rgba(2, 6, 23, .34));
  box-shadow: 0 18px 42px rgba(0, 13, 26, .18);
  backdrop-filter: blur(16px);
}

[data-theme="light"] .sidebar-user-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(14, 165, 233, .14), transparent 36%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
}

.sidebar-user-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sidebar-user-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-weight: 950;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 32%), linear-gradient(135deg, #0284c7, #0ea5e9 48%, #0369a1);
  box-shadow: 0 16px 32px rgba(14, 165, 233, .25);
}

.sidebar-user-main strong,
.sidebar-user-main small,
.sidebar-user-main em,
.sidebar-user-company span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-main strong {
  color: var(--text-primary);
  font-size: .94rem;
  font-weight: 900;
}

.sidebar-user-main small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: .78rem;
}

.sidebar-user-main em {
  margin-top: 5px;
  color: #34d399;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
}

.sidebar-user-main em i {
  margin-right: 5px;
  font-size: .55rem;
}

.sidebar-user-company {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
}

.sidebar-user-company i {
  color: #38bdf8;
}

.sidebar-user-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-user-actions a,
.sidebar-user-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(148, 163, 184, .08);
  color: var(--text-secondary);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.sidebar-user-actions form {
  margin: 0;
}

.sidebar-user-actions a:hover,
.sidebar-user-actions button:hover {
  border-color: rgba(56, 189, 248, .34);
  background: rgba(56, 189, 248, .12);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.nav-accordion {
  position: relative;
  border-radius: 14px !important;
}

.nav-group-badge {
  min-width: 24px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, .18);
  border: 1px solid rgba(56, 189, 248, .24);
  font-size: .68rem;
  font-weight: 950;
}

.nav-group-badge.is-empty {
  display: none;
}

.nav-group-panel a[data-nav-enhanced="true"] {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
}

.nav-group-panel a[data-nav-enhanced="true"] > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .1);
}

.nav-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.nav-item-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item-copy small {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .71rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-panel a[data-nav-enhanced="true"] em,
.nav-item-badge {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(148, 163, 184, .1);
  font-size: .63rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.nav-item-badge {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
}

.nav-group-panel a[data-nav-enhanced="true"]:hover,
.nav-group-panel a[data-nav-enhanced="true"].active {
  border-color: rgba(56, 189, 248, .24);
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(34, 197, 94, .06));
  color: var(--text-primary);
  transform: translateX(2px);
}

@media screen and (max-width: 991.98px) {
  .sidebar-close {
    display: inline-grid;
    place-items: center;
  }

  .sidebar {
    width: min(84vw, 390px) !important;
    max-width: 390px !important;
  }

  .brand {
    padding-right: 44px;
  }

  .sidebar-user-card {
    margin-top: 4px;
  }
}

@media screen and (max-width: 575.98px) {
  .sidebar {
    width: min(84vw, 360px) !important;
  }

  .sidebar-user-actions span,
  .nav-group-panel a[data-nav-enhanced="true"] em {
    display: none;
  }

  .nav-group-panel a[data-nav-enhanced="true"] {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
}
.calendar-list { display: grid; gap: 12px; }
.calendar-list article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 14px;
}
.calendar-list i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(0, 191, 255, .1);
}
.calendar-list span, .calendar-list small { display: block; color: var(--muted); margin-top: 3px; }

.executive-hero {
  position: relative;
  overflow: hidden;
}
.executive-hero::after {
  content: "";
  position: absolute;
  inset: auto 24px 0 auto;
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: .82;
}
.hero-actions, .export-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero-actions a, .export-stack a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.executive-sync strong {
  font-size: 22px;
  line-height: 1.2;
}
.analytics-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 16, 34, .58);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .18);
}
.analytics-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.analytics-filter-bar span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.analytics-filter-bar input, .analytics-filter-bar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 9px 11px;
}
.analytics-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.analytics-card {
  min-height: 134px;
  border-color: rgba(0, 191, 255, .22);
}
.analytics-card strong {
  margin-top: 6px;
  font-size: clamp(22px, 2.5vw, 31px);
  line-height: 1.1;
  word-break: break-word;
}
.analytics-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.analytics-card.tone-green i { color: var(--accent); }
.analytics-card.tone-gold i { color: var(--warning); }
.analytics-card.tone-violet i { color: var(--purple); }
.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.chart-panel {
  min-height: 380px;
}
.chart-panel canvas {
  display: block;
  width: 100% !important;
  height: 300px !important;
}
.funnel-panel {
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .12), transparent 48%),
    rgba(0, 16, 34, .72);
}
.executive-tables {
  align-items: stretch;
}
.export-stack {
  align-items: flex-start;
  flex-direction: column;
}
.export-stack span {
  color: var(--muted);
  font-size: 12px;
}
.command-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.command-main {
  min-width: 0;
}
.command-hero {
  min-height: 220px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .16), transparent 48%),
    linear-gradient(225deg, rgba(34, 197, 94, .10), transparent 40%),
    rgba(0, 16, 34, .72);
}
.command-filter {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.command-kpis {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.command-kpi {
  min-height: 148px;
}
.command-kpi .trend {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 5px;
  border: 1px solid rgba(138, 164, 188, .16);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .04);
}
.command-kpi .trend.up { color: var(--accent); }
.command-kpi .trend.down { color: var(--danger); }
.command-kpi .trend.stable { color: var(--muted); }
.analytics-card.tone-rose i { color: var(--danger); }
.command-bi {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.command-bi .chart-panel {
  min-height: 342px;
}
.command-bi .chart-panel canvas {
  height: 260px !important;
}
.command-alerts {
  position: sticky;
  top: 94px;
}
.alert-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.alert-stack article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, .045);
}
.alert-stack i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(0, 191, 255, .10);
}
.alert-stack strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}
.alert-stack span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.panel-header.compact {
  margin-top: 12px;
}
.ai-hero {
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), transparent 48%),
    linear-gradient(225deg, rgba(139, 92, 246, .16), transparent 42%),
    rgba(0, 16, 34, .72);
}
.ai-status-card strong {
  font-size: 28px;
}
.ai-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  background:
    linear-gradient(90deg, rgba(0, 191, 255, .13), rgba(34, 197, 94, .06)),
    rgba(0, 16, 34, .72);
}
.ai-summary h2 {
  margin: 8px 0 0;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.35;
}
.ai-summary > i {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  color: #00101f;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 30px;
}
.ai-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}
.ai-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.ai-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 94px;
}
.ai-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ai-recommendation {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, .045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-recommendation:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .42);
  box-shadow: 0 14px 34px rgba(0, 112, 204, .12);
}
.ai-rec-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(0, 191, 255, .10);
}
.ai-recommendation span, .ai-recommendation small, .ai-score-card span, .ai-score-card small, .ai-writer label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.ai-recommendation strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}
.ai-recommendation p {
  margin: 8px 0;
  color: var(--text);
}
.ai-recommendation.priority-alta { border-color: rgba(251, 113, 133, .34); }
.ai-recommendation.priority-media { border-color: rgba(245, 181, 27, .34); }
.ai-score-list {
  display: grid;
  gap: 12px;
}
.ai-score-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(120px, .8fr) 70px;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, .04);
}
.score-meter {
  height: 10px;
  border-radius: 999px;
  background: rgba(138, 164, 188, .16);
  overflow: hidden;
}
.score-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.score-yellow .score-meter b { background: var(--warning); }
.score-red .score-meter b { background: var(--danger); }
.score-value {
  text-align: right;
}
.score-value strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}
.ai-score-card small {
  grid-column: 1 / -1;
}
.prediction-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.prediction-card {
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, .045);
}
.prediction-card span {
  color: var(--muted);
  font-size: 12px;
}
.prediction-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
}
.prediction-card.tone-green strong { color: var(--accent); }
.prediction-card.tone-yellow strong { color: var(--warning); }
.prediction-card.tone-red strong { color: var(--danger); }
.ai-writer {
  display: grid;
  gap: 12px;
}
.ai-writer label {
  display: grid;
  gap: 6px;
}
.ai-writer select, .ai-writer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 11px;
}
.ai-writer textarea {
  min-height: 110px;
  resize: vertical;
}
.ai-writer .ai-output {
  min-height: 230px;
  line-height: 1.55;
}

.automation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  overflow: hidden;
  position: relative;
}

.automation-hero, .automation-panel, .automation-stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(0, 112, 204, .08));
  border: 1px solid rgba(0, 191, 255, .16);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 13, 26, .22);
  backdrop-filter: blur(18px);
}

.automation-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 191, 255, .22), transparent 68%);
  pointer-events: none;
}

.automation-hero h2 {
  font-size: clamp(30px, 4vw, 52px);
  margin: 6px 0 10px;
}

.automation-hero p {
  color: var(--muted);
  max-width: 760px;
  margin: 0;
}

.automation-hero-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(0, 13, 26, .24);
  border: 1px solid rgba(255, 255, 255, .1);
}

.automation-hero-card i {
  color: var(--primary);
  font-size: 30px;
}

.automation-hero-card strong {
  font-size: 42px;
  line-height: 1;
}

.automation-hero-card span, .automation-stat-card span, .automation-stat-card small {
  color: var(--muted);
}

.automation-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.automation-stat-card {
  padding: 18px;
  display: grid;
  gap: 8px;
  min-height: 150px;
}

.automation-stat-card i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.automation-stat-card strong {
  font-size: 30px;
  line-height: 1;
}

.automation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

.automation-main, .automation-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.automation-side {
  position: sticky;
  top: 18px;
}

.automation-panel {
  padding: 22px;
}

.section-heading.compact {
  margin-bottom: 14px;
}

.flow-builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.flow-builder-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.flow-builder-grid select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(0, 13, 26, .32);
  color: var(--text);
  padding: 12px 14px;
}

.flow-canvas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 13, 26, .34), rgba(0, 112, 204, .12));
  border: 1px solid rgba(255, 255, 255, .1);
}

.flow-step {
  min-height: 146px;
  padding: 16px;
  display: grid;
  gap: 8px;
  align-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(0, 191, 255, .18);
  transition: transform .2s ease, border-color .2s ease;
}

.flow-step:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .42);
}

.flow-step i {
  color: var(--primary);
  font-size: 24px;
}

.flow-step span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.flow-step strong {
  font-size: 15px;
  line-height: 1.35;
}

.flow-step.result {
  border-color: rgba(34, 197, 94, .35);
}

.flow-link {
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 22px;
}

.automation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.template-grid, .automation-rule-list {
  display: grid;
  gap: 12px;
}

.template-card, .automation-rule {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(0, 13, 26, .24);
  color: var(--text);
  text-align: left;
  padding: 14px;
  display: grid;
  gap: 6px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.template-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .34);
  background: rgba(0, 112, 204, .16);
}

.template-card i {
  color: var(--primary);
  font-size: 20px;
}

.template-card span, .automation-rule span, .automation-rule small {
  color: var(--muted);
}

.automation-rule {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}

.automation-rule > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0, 191, 255, .14);
  color: var(--primary);
}

.automation-rule b {
  color: var(--accent);
}

.context-panel {
  display: grid;
  gap: 14px;
}

.context-panel div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.context-panel div:last-child {
  border-bottom: 0;
}

.context-panel strong {
  font-size: 22px;
}

.context-panel span {
  color: var(--muted);
}

.execution-table .local-run td {
  background: rgba(0, 191, 255, .08);
}

.empty-state {
  padding: 18px;
  border-radius: 16px;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, .14);
  background: rgba(0, 13, 26, .18);
}

.comm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 30px;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), transparent 46%),
    linear-gradient(225deg, rgba(34, 197, 94, .12), transparent 44%),
    rgba(0, 16, 34, .72);
  box-shadow: 0 28px 70px rgba(0, 13, 26, .26);
  overflow: hidden;
}

.comm-hero h2 {
  font-size: clamp(32px, 4vw, 56px);
  margin: 6px 0 10px;
}

.comm-hero p {
  color: var(--muted);
  max-width: 820px;
  margin: 0;
}

.comm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.comm-status-card {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(0, 13, 26, .26);
}

.comm-status-card i {
  color: var(--primary);
  font-size: 34px;
}

.comm-status-card strong {
  font-family: var(--font-display);
  font-size: 25px;
}

.comm-status-card span {
  color: var(--muted);
}

.comm-subnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.comm-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.comm-subnav a:hover, .comm-subnav a.active {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .36);
  background: rgba(0, 112, 204, .18);
  color: var(--primary);
}

.comm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.comm-kpi, .comm-panel {
  border: 1px solid rgba(0, 191, 255, .15);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 112, 204, .07));
  box-shadow: 0 20px 52px rgba(0, 13, 26, .2);
  backdrop-filter: blur(16px);
}

.comm-kpi {
  display: grid;
  gap: 7px;
  min-height: 145px;
  padding: 17px;
}

.comm-kpi i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.comm-kpi strong {
  font-size: 29px;
  line-height: 1;
}

.comm-kpi span, .comm-kpi small {
  color: var(--muted);
}

.comm-kpi.tone-green i { background: linear-gradient(135deg, #22c55e, #14b8a6); }
.comm-kpi.tone-gold i { background: linear-gradient(135deg, #f5b51b, #f97316); }
.comm-kpi.tone-violet i { background: linear-gradient(135deg, #8b5cf6, #00bfff); }
.comm-kpi.tone-rose i { background: linear-gradient(135deg, #fb7185, #ef4444); }

.comm-filter-bar {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 16, 34, .52);
}

.comm-filter-bar label {
  display: grid;
  gap: 6px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.comm-filter-bar input, .comm-filter-bar select, .ai-comm-panel select, .ai-comm-panel textarea, .chat-composer input, .email-preview textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 11px 12px;
}

.comm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.comm-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.comm-side {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 94px;
}

.comm-panel {
  padding: 20px;
  min-width: 0;
  overflow: hidden;
}

.comm-panel .table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

.comm-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.comm-timeline {
  display: grid;
  gap: 12px;
}

.comm-timeline-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(0, 13, 26, .2);
}

.comm-timeline-item b {
  color: var(--primary);
}

.comm-timeline-item span, .comm-timeline-item small, .email-row span, .email-row small, .template-manager small, .integration-grid span, .integration-grid p, .comm-message-card p, .comm-message-card span {
  color: var(--muted);
}

.email-console {
  display: grid;
  grid-template-columns: 180px minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 14px;
}

.email-console aside, .whatsapp-console aside {
  display: grid;
  gap: 8px;
  align-content: start;
}

.email-console aside button, .whatsapp-console aside button {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(0, 13, 26, .22);
  color: var(--text);
  padding: 11px;
  text-align: left;
}

.email-console aside button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.email-list, .template-manager, .integration-grid, .comm-card-grid {
  display: grid;
  gap: 12px;
}

.email-row, .template-manager article, .integration-grid article, .comm-message-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
}

.email-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
}

.email-row b {
  color: var(--warning);
}

.email-row em {
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
}

.email-preview {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(0, 191, 255, .15);
  border-radius: 18px;
  background: rgba(0, 13, 26, .2);
}

.email-preview textarea, .ai-comm-panel textarea {
  min-height: 120px;
  resize: vertical;
}

.attachment-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 191, 255, .08);
  color: var(--primary);
}

.comm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.whatsapp-console {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 16px;
}

.whatsapp-console aside button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.whatsapp-console aside b, .chat-header b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #fff;
}

.whatsapp-console aside small {
  display: block;
  color: var(--muted);
}

.chat-window {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 520px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, .11), transparent 50%),
    rgba(0, 13, 26, .28);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.chat-header span {
  color: var(--muted);
}

.bubble {
  max-width: 70%;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.45;
}

.bubble.incoming {
  background: rgba(255, 255, 255, .08);
}

.bubble.outgoing {
  justify-self: end;
  background: rgba(0, 191, 255, .18);
  border: 1px solid rgba(0, 191, 255, .2);
}

.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  margin-top: auto;
}

.comm-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.comm-message-card i, .integration-grid i {
  color: var(--primary);
  font-size: 24px;
}

.template-manager, .integration-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.ai-comm-panel {
  display: grid;
  gap: 12px;
}

.comm-alerts {
  display: grid;
  gap: 10px;
}

.comm-alerts div, .provider-panel div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(0, 13, 26, .22);
}

.comm-alerts span, .comm-alerts small, .provider-panel span {
  color: var(--muted);
}

.comm-alerts .tone-success strong { color: var(--accent); }
.comm-alerts .tone-warning strong { color: var(--warning); }
.comm-alerts .tone-danger strong { color: var(--danger); }
.comm-alerts .tone-info strong { color: var(--primary); }

.provider-panel {
  display: grid;
  gap: 10px;
}

.comm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
}

.comm-folder.active, .wa-chat.active, .schedule-calendar button.active {
  border-color: rgba(0, 191, 255, .45) !important;
  background: rgba(0, 112, 204, .22) !important;
  color: var(--primary) !important;
}

.comm-alerts button, .comm-timeline-item, .integration-card, .template-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text);
  text-align: left;
}

.comm-alerts button {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 13, 26, .22);
}

.comm-alerts button:hover, .comm-timeline-item:hover, .integration-card:hover, .template-card:hover, .email-row:hover, .comm-message-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .32);
}

.comm-message-card, .email-row, .template-manager article, .integration-card, .comm-timeline-item {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.favorite-toggle {
  width: 34px;
  height: 34px;
}

.favorite-toggle i {
  color: var(--warning);
}

.comm-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 8, 18, .72);
  backdrop-filter: blur(14px);
}

.comm-modal.active {
  display: flex;
}

.comm-modal-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 16, 34, .96), rgba(0, 51, 88, .92));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.comm-modal-card input, .comm-modal-card select, .comm-modal-card textarea, .settings-console input, .settings-console select, .settings-console textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 11px 12px;
}

.comm-modal-card textarea, .settings-console textarea {
  min-height: 130px;
  resize: vertical;
}

.comm-modal-close {
  justify-self: end;
}

.comm-modal-card pre {
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(0, 13, 26, .34);
}

.comm-toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
}

.comm-toast {
  transform: translateY(14px);
  opacity: 0;
  display: grid;
  gap: 2px;
  padding: 13px 15px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 14px;
  background: rgba(0, 16, 34, .94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  transition: transform .2s ease, opacity .2s ease;
}

.comm-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.comm-toast span {
  color: var(--muted);
  font-size: 12px;
}

.comm-toast.warning strong { color: var(--warning); }

.loading-skeleton {
  position: relative;
  overflow: hidden;
}

.loading-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: commSkeleton 700ms ease;
}

@keyframes commSkeleton {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.schedule-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.schedule-calendar button {
  display: grid;
  gap: 4px;
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
}

.schedule-calendar strong {
  font-size: 24px;
}

.schedule-calendar span {
  color: var(--muted);
  font-size: 12px;
}

.settings-console form {
  display: grid;
  gap: 14px;
}

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

.settings-console label {
  display: grid;
  gap: 7px;
  color: var(--primary);
  font-weight: 700;
}

.integration-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
}

.quick-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 8px;
}

.quick-launch-actions .icon-btn, .ai-launch-actions .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.quick-launch-actions .fa-whatsapp { color: #22c55e; }
.quick-launch-actions .fa-telegram { color: #38bdf8; }
.quick-launch-actions .fa-envelope { color: var(--primary); }
.quick-launch-actions .fa-comment-sms { color: var(--warning); }
.quick-launch-actions .fa-phone { color: var(--accent); }
.quick-launch-actions .fa-map-location-dot { color: #fb7185; }
.quick-launch-actions .fa-calendar-plus { color: #8b5cf6; }

.ai-launch-actions {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.security-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .14), rgba(34, 197, 94, .08)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.security-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 52px);
  font-family: var(--font-display);
}

.security-hero p {
  max-width: 900px;
  color: var(--muted);
}

.security-posture {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(0, 16, 34, .42);
}

.security-posture i {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #001022;
  background: linear-gradient(135deg, var(--primary), #22c55e);
  font-size: 24px;
}

.security-posture strong {
  font-size: 20px;
}

.security-posture span {
  color: var(--muted);
}

.security-subnav a.active {
  border-color: rgba(34, 197, 94, .45);
  box-shadow: 0 14px 34px rgba(34, 197, 94, .14);
}

.security-layout {
  align-items: start;
}

.security-timeline {
  display: grid;
  gap: 10px;
}

.security-timeline article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.security-timeline.dense article {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.security-timeline i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(0, 191, 255, .13);
}

.security-timeline strong,
.security-mini-list strong {
  display: block;
}

.security-timeline span,
.security-timeline small,
.security-mini-list small {
  display: block;
  color: var(--muted);
}

.security-badge,
.matrix-on,
.matrix-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.security-badge,
.matrix-on {
  color: #bbf7d0;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .28);
}

.matrix-off {
  color: #fecdd3;
  background: rgba(244, 63, 94, .12);
  border: 1px solid rgba(244, 63, 94, .26);
}

.security-mini-list {
  display: grid;
  gap: 10px;
}

.security-mini-list div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}

.security-mini-list i {
  color: var(--primary);
}

.security-device-card i,
.security-setting-card i {
  color: #22c55e;
}

.security-alert-card p,
.security-ai-card p {
  color: var(--muted);
  margin-bottom: 8px;
}

.security-alert-card.tone-rose,
.security-ai-card.tone-rose {
  border-color: rgba(244, 63, 94, .28);
}

.security-alert-card.tone-gold,
.security-ai-card.tone-gold {
  border-color: rgba(245, 181, 27, .3);
}

.security-matrix td,
.security-matrix th {
  text-align: center;
}

.security-matrix td:first-child,
.security-matrix th:first-child {
  text-align: left;
}

.integration-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .16), rgba(139, 92, 246, .12)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.integration-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 52px);
  font-family: var(--font-display);
}

.integration-hero p,
.integration-muted {
  max-width: 900px;
  color: var(--muted);
}

.integration-posture {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(0, 16, 34, .42);
}

.integration-posture i {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #001022;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  font-size: 24px;
}

.integration-posture strong {
  font-size: 20px;
}

.integration-posture span,
.integration-insights span {
  color: var(--muted);
}

.integration-subnav a.active {
  border-color: rgba(139, 92, 246, .45);
  box-shadow: 0 14px 34px rgba(139, 92, 246, .14);
}

.integration-layout {
  align-items: start;
}

.integration-timeline {
  display: grid;
  gap: 10px;
}

.integration-timeline article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.integration-timeline i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #8b5cf6;
  background: rgba(139, 92, 246, .13);
}

.integration-timeline strong,
.integration-insights strong {
  display: block;
}

.integration-timeline span,
.integration-timeline small {
  display: block;
  color: var(--muted);
}

.integration-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(0, 191, 255, .14);
  border: 1px solid rgba(0, 191, 255, .28);
  font-size: 12px;
  font-weight: 800;
}

.integration-insights {
  display: grid;
  gap: 10px;
}

.integration-insights div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}

.integration-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.integration-chip-list span {
  padding: 8px 12px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 999px;
  color: var(--text);
  background: rgba(0, 191, 255, .09);
}

.integration-catalog .comm-message-card i {
  color: var(--primary);
}

.notification-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .14), rgba(245, 181, 27, .12)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.notification-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 52px);
  font-family: var(--font-display);
}

.notification-hero p,
.notification-ai-card p {
  max-width: 900px;
  color: var(--muted);
}

.notification-posture {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(0, 16, 34, .42);
}

.notification-posture i {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #001022;
  background: linear-gradient(135deg, var(--primary), var(--warning));
  font-size: 24px;
}

.notification-posture strong {
  font-size: 20px;
}

.notification-posture span,
.notification-insights span {
  color: var(--muted);
}

.notification-subnav a.active {
  border-color: rgba(245, 181, 27, .45);
  box-shadow: 0 14px 34px rgba(245, 181, 27, .14);
}

.notification-layout {
  align-items: start;
}

.notification-timeline,
.notification-list,
.notification-mini-list,
.notification-insights {
  display: grid;
  gap: 10px;
}

.notification-timeline article,
.notification-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.notification-list article.unread {
  border-color: rgba(245, 181, 27, .28);
  background: rgba(245, 181, 27, .08);
}

.notification-timeline i,
.notification-list i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--warning);
  background: rgba(245, 181, 27, .13);
}

.notification-timeline span,
.notification-timeline small,
.notification-list span,
.notification-list small,
.notification-mini-list small {
  display: block;
  color: var(--muted);
}

.notification-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fef3c7;
  background: rgba(245, 181, 27, .14);
  border: 1px solid rgba(245, 181, 27, .28);
  font-size: 12px;
  font-weight: 800;
}

.notification-inbox {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 18px;
  align-items: start;
}

.notification-mini-list div,
.notification-insights div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}

.notification-insights div {
  display: grid;
}

.cx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .15), rgba(34, 197, 94, .10), rgba(139, 92, 246, .08)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.cx-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 52px);
  font-family: var(--font-display);
}

.cx-hero p,
.cx-muted,
.cx-ai-card p {
  max-width: 900px;
  color: var(--muted);
}

.cx-posture {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(0, 16, 34, .42);
}

.cx-posture i {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #001022;
  background: linear-gradient(135deg, var(--primary), #22c55e);
  font-size: 24px;
}

.cx-posture strong {
  font-size: 20px;
}

.cx-posture span {
  color: var(--muted);
}

.cx-subnav a.active {
  border-color: rgba(34, 197, 94, .45);
  box-shadow: 0 14px 34px rgba(34, 197, 94, .14);
}

.cx-layout,
.notification-layout {
  align-items: start;
}

.cx-timeline,
.cx-mini-list,
.cx-actions {
  display: grid;
  gap: 10px;
}

.cx-timeline article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.cx-timeline i,
.cx-mini-list i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #22c55e;
  background: rgba(34, 197, 94, .13);
}

.cx-timeline span,
.cx-timeline small,
.cx-mini-list small {
  display: block;
  color: var(--muted);
}

.cx-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .28);
  font-size: 12px;
  font-weight: 800;
}

.cx-actions a,
.cx-mini-list div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
}

.cx-actions a:hover {
  border-color: rgba(0, 191, 255, .28);
  transform: translateY(-1px);
}

.cx-ai-card {
  min-height: 170px;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), rgba(34, 197, 94, .08)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px);
}

.admin-hero h2 {
  margin: 6px 0 10px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 0;
}

.admin-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.admin-posture {
  display: grid;
  gap: 12px;
}

.admin-posture span,
.admin-card,
.admin-brand-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.admin-posture span {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  color: var(--text);
  font-weight: 800;
}

.admin-posture i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #00bfff;
  background: rgba(0, 191, 255, .14);
}

.admin-subnav {
  margin-bottom: 18px;
}

.admin-subnav a {
  min-height: 58px;
}

.admin-filter {
  margin-bottom: 18px;
}

.admin-kpis {
  margin-bottom: 18px;
}

.admin-layout {
  align-items: start;
}

.admin-timeline {
  display: grid;
  gap: 12px;
}

.admin-timeline article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}

.admin-timeline i,
.admin-card > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #22c55e;
  background: rgba(34, 197, 94, .13);
}

.admin-timeline span,
.admin-timeline small {
  display: block;
  color: var(--muted);
}

.admin-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 96px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #dbeafe;
  background: rgba(0, 191, 255, .14);
  border: 1px solid rgba(0, 191, 255, .28);
}

.admin-badge.success {
  color: #bbf7d0;
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .28);
}

.admin-badge.warning {
  color: #fde68a;
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .28);
}

.admin-badge.danger {
  color: #fecaca;
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .28);
}

.admin-meter-list {
  display: grid;
  gap: 14px;
}

.admin-meter-list div {
  display: grid;
  gap: 8px;
}

.admin-meter-list div span {
  color: var(--muted);
  font-size: 13px;
}

.admin-meter-list div strong {
  font-size: 20px;
}

.admin-meter-list progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.admin-meter-list progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, .08);
}

.admin-meter-list progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #00bfff, #22c55e);
}

.admin-actions a {
  justify-content: flex-start;
}

.admin-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

.admin-card p {
  flex: 1;
}

.admin-modules article {
  min-height: 190px;
}

.admin-brand-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.admin-brand-card img {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.compact {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

.inventory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .16), rgba(34, 197, 94, .12)),
    rgba(255, 255, 255, .055);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px);
}

.inventory-hero h2 {
  margin: 6px 0 10px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 0;
}

.inventory-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.inventory-integrations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.inventory-integrations span,
.inventory-card,
.inventory-label {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.inventory-integrations span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  padding: 14px;
  font-weight: 850;
  text-align: center;
}

.inventory-integrations i,
.inventory-card > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #22c55e;
  background: rgba(34, 197, 94, .13);
}

.inventory-subnav {
  margin-bottom: 18px;
}

.inventory-subnav a {
  min-height: 58px;
}

.inventory-filter,
.inventory-kpis {
  margin-bottom: 18px;
}

.inventory-layout {
  align-items: start;
}

.inventory-timeline,
.inventory-insights,
.inventory-mini-list {
  display: grid;
  gap: 12px;
}

.inventory-timeline article,
.inventory-mini-list div,
.inventory-insights button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, .05);
}

.inventory-insights button {
  grid-template-columns: 1fr;
  cursor: pointer;
}

.inventory-insights button:hover,
.inventory-label:hover {
  border-color: rgba(0, 191, 255, .28);
  transform: translateY(-1px);
}

.inventory-timeline i,
.inventory-mini-list i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #00bfff;
  background: rgba(0, 191, 255, .13);
}

.inventory-timeline span,
.inventory-timeline small,
.inventory-mini-list small,
.inventory-insights span {
  display: block;
  color: var(--muted);
}

.inventory-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #bbf7d0;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .28);
}

.inventory-badge.warning {
  color: #fde68a;
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .28);
}

.inventory-badge.danger {
  color: #fecaca;
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .28);
}

.inventory-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

.inventory-card p {
  flex: 1;
}

.inventory-master-form {
  margin-top: 18px;
}

.inventory-label-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.inventory-label {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 20px;
  text-align: center;
}

.qr-box {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 10px solid #fff;
  border-radius: 12px;
  color: #050b18;
  background:
    linear-gradient(90deg, #050b18 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(#050b18 12px, transparent 12px) 0 0 / 28px 28px,
    #fff;
  font-size: 42px;
}

.barcode-lines {
  height: 94px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
}

.barcode-lines span {
  display: block;
  width: 6px;
  background: #050b18;
}

.barcode-lines span:nth-child(2),
.barcode-lines span:nth-child(5) {
  width: 12px;
}

.barcode-lines span:nth-child(4) {
  width: 3px;
}

.inventory-actions {
  max-height: 620px;
  overflow: auto;
}

.label-command {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 18px;
  margin-bottom: 18px;
}

.label-control-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.label-control-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.label-export-actions,
.label-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.label-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, .1);
}

.label-export-actions a,
.label-actions a,
.label-actions button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, .06);
}

.label-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  transform-origin: top left;
}

.enterprise-label {
  display: grid;
  gap: 16px;
  min-height: 430px;
  padding: 18px;
  border: 1px solid rgba(0, 191, 255, .2);
  border-radius: 22px;
  color: #0f172a;
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(239,246,255,.96));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
}

.enterprise-label header {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(14, 165, 233, .18);
}

.enterprise-label header img {
  width: 124px;
  height: auto;
  object-fit: contain;
}

.enterprise-label header strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
}

.enterprise-label header span,
.enterprise-label small,
.label-eyebrow,
.label-barcode-caption span {
  color: #475569;
}

.enterprise-label header b {
  padding: 8px 12px;
  border-radius: 999px;
  color: #065f46;
  background: #d1fae5;
  font-size: 12px;
}

.label-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: start;
}

.label-main h3 {
  margin: 4px 0 12px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.label-main dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0;
}

.label-main dl div {
  padding: 9px;
  border-radius: 12px;
  background: #f1f5f9;
}

.label-main dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.label-main dd {
  margin: 0;
  font-weight: 800;
}

.label-stock {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0369a1, #0f766e);
}

.label-stock strong {
  margin-left: auto;
  font-size: 28px;
}

.label-qr {
  display: grid;
  grid-template-columns: repeat(37, 1fr);
  width: 178px;
  height: 178px;
  padding: 12px;
  border: 10px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 2px #0f172a;
}

.label-qr i {
  display: block;
  aspect-ratio: 1;
}

.label-qr i.on {
  background: #0f172a;
}

.label-body aside {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-width: 0;
}

.label-body aside small {
  max-width: 190px;
  overflow-wrap: anywhere;
  font-size: 10px;
  text-align: center;
}

.label-barcode {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 70px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.label-barcode span {
  display: block;
  background: #0f172a;
}

.label-barcode-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: Consolas, monospace;
}

.label-actions button,
.label-actions a {
  color: #0f172a;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.procurement-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 191, 255, .16), rgba(245, 158, 11, .11)), rgba(255,255,255,.055);
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
}

.procurement-hero h2 {
  margin: 6px 0 10px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 0;
}

.procurement-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.procurement-posture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.procurement-posture span,
.procurement-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.procurement-posture span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  padding: 14px;
  font-weight: 850;
  text-align: center;
}

.procurement-posture i,
.procurement-card > i,
.procurement-timeline i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #f59e0b;
  background: rgba(245, 158, 11, .14);
}

.procurement-subnav,
.procurement-filter,
.procurement-kpis {
  margin-bottom: 18px;
}

.procurement-subnav a {
  min-height: 58px;
}

.procurement-timeline,
.procurement-insights {
  display: grid;
  gap: 12px;
}

.procurement-timeline article,
.procurement-insights button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  background: rgba(255,255,255,.05);
}

.procurement-insights button {
  grid-template-columns: 1fr;
  cursor: pointer;
}

.procurement-timeline span,
.procurement-timeline small,
.procurement-insights span {
  display: block;
  color: var(--muted);
}

.procurement-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 94px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .28);
  font-size: 12px;
  font-weight: 900;
}

.procurement-badge.warning {
  color: #fde68a;
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .28);
}

.procurement-badge.danger {
  color: #fecaca;
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .28);
}

.procurement-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

.procurement-card p {
  flex: 1;
}

.procurement-actions {
  max-height: 620px;
  overflow: auto;
}

.procurement-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.procurement-flow article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}

.procurement-flow article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, .18);
  font-weight: 800;
}

.procurement-flow strong,
.procurement-flow small {
  display: block;
}

.procurement-flow small,
.procurement-flow article > i {
  color: var(--text-secondary, #94a3b8);
}

.procurement-insights > div {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
}

.procurement-insights > div span,
.procurement-insights > div small {
  color: var(--text-secondary, #94a3b8);
}

.procurement-supplier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 18px;
  align-items: start;
}

.procurement-supplier-side {
  display: grid;
  gap: 18px;
}

.procurement-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.procurement-inline-actions .secondary-btn {
  min-height: 36px;
  padding: 8px 11px;
}

.procurement-row-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.procurement-row-actions details {
  position: relative;
}

.procurement-row-actions summary {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 9px;
  cursor: pointer;
}

.procurement-row-actions details form {
  position: absolute;
  z-index: 20;
  top: 40px;
  right: 0;
  width: min(260px, 74vw);
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: var(--surface-elevated, #0f2233);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.procurement-import-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.procurement-import-stages span {
  display: grid;
  gap: 7px;
  justify-items: center;
  padding: 10px 6px;
  border: 1px solid rgba(56, 189, 248, .16);
  border-radius: 10px;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
  font-size: 12px;
}

.procurement-import-stages b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, .18);
}

[data-theme="light"] .procurement-flow article,
[data-theme="light"] .procurement-insights > div,
[data-theme="light"] .procurement-import-stages span {
  border-color: #cbd5e1;
  background: #ffffff;
}

[data-theme="light"] .procurement-flow article > span,
[data-theme="light"] .procurement-import-stages b {
  color: #075985;
  background: #e0f2fe;
}

.procurement-print {
  margin: 0;
  padding: 28px;
  color: #0f172a;
  background: #ffffff;
  font: 13px/1.5 Inter, Arial, sans-serif;
}

.procurement-print > header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid #0284c7;
}

.procurement-print > header img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
}

.procurement-print > header span,
.procurement-print > header small,
.procurement-print .print-document span {
  display: block;
  color: #475569;
}

.procurement-print .print-document {
  text-align: right;
}

.procurement-print main {
  padding: 24px 0 72px;
}

.procurement-print footer {
  position: fixed;
  right: 28px;
  bottom: 18px;
  left: 28px;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
}

@media (max-width: 1199px) {
  .procurement-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .procurement-supplier-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .procurement-flow {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .procurement-flow article {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
  }

  .procurement-import-stages {
    grid-template-columns: 1fr;
  }

  .procurement-inline-actions {
    width: 100%;
  }

  .procurement-inline-actions .secondary-btn {
    flex: 1 1 120px;
  }

  .procurement-hero .procurement-posture {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-hero .procurement-posture span {
    min-height: 86px;
    padding: 10px 8px;
    font-size: 12px;
  }

  .procurement-hero .procurement-posture i {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
}

/* Human Resources Center Enterprise */
.hr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
  padding: 28px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background:
    linear-gradient(125deg, rgba(14, 165, 233, .16), transparent 48%),
    color-mix(in srgb, var(--panel-bg) 96%, #22c55e 4%);
  box-shadow: var(--shadow-sm);
}

.hr-hero h2 {
  margin: 6px 0 8px;
  color: var(--text-primary);
  font-size: 2.1rem;
  letter-spacing: 0;
}

.hr-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.hr-posture {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.hr-posture span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--panel-bg) 91%, #0ea5e9 9%);
  font-size: .82rem;
  font-weight: 700;
}

.hr-posture i {
  color: #38bdf8;
}

.hr-subnav {
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.hr-subnav a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.hr-kpis,
.hr-filter {
  margin-bottom: 14px;
}

.hr-layout .chart-panel canvas {
  min-height: 250px;
}

.hr-structure-list,
.hr-summary-stack,
.hr-integration-list {
  display: grid;
  gap: 10px;
}

.hr-structure-list article,
.hr-summary-stack > div,
.hr-integration-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 94%, #0ea5e9 6%);
}

.hr-structure-list i,
.hr-integration-list i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: #38bdf8;
  background: rgba(14, 165, 233, .14);
}

.hr-structure-list div,
.hr-integration-list span,
.hr-summary-stack span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.hr-structure-list span,
.hr-integration-list small,
.hr-summary-stack small {
  color: var(--text-secondary);
  font-size: .78rem;
}

.hr-structure-list b,
.hr-summary-stack strong {
  color: var(--text-primary);
  text-align: right;
}

.hr-empty {
  display: grid;
  min-height: 180px;
  padding: 28px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  text-align: center;
  background: color-mix(in srgb, var(--panel-bg) 96%, #0ea5e9 4%);
}

.hr-empty i {
  color: #38bdf8;
  font-size: 1.6rem;
}

.hr-empty strong {
  color: var(--text-primary);
}

.hr-export-actions,
.hr-print-link,
.hr-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hr-export-actions,
.hr-print-link {
  justify-content: flex-end;
  margin: 14px 0;
}

.hr-inline-actions form {
  margin: 0;
}

.hr-big-number {
  display: grid;
  min-height: 220px;
  place-content: center;
  color: #38bdf8;
  font-size: 3.2rem;
  font-weight: 800;
  text-align: center;
}

.hr-big-number small {
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 600;
}

.hr-readiness-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(14, 165, 233, .32);
  border-radius: 8px;
  color: var(--text-primary);
  background: rgba(14, 165, 233, .09);
}

.hr-readiness-banner i {
  margin-top: 3px;
  color: #38bdf8;
}

.hr-readiness-banner div {
  display: grid;
  gap: 4px;
}

.hr-readiness-banner span {
  color: var(--text-secondary);
}

.hr-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hr-capability-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 94%, #22c55e 6%);
}

.hr-capability-grid i {
  grid-row: span 2;
  color: #22c55e;
}

.hr-capability-grid small {
  color: var(--text-secondary);
}

.hr-print-sheet {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px;
  color: #0f172a;
  background: #fff;
}

.hr-print-sheet header,
.hr-print-sheet footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 2px solid #0ea5e9;
}

.hr-print-sheet header > div {
  display: grid;
  gap: 4px;
}

.hr-print-sheet table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}

.hr-print-sheet th,
.hr-print-sheet td {
  padding: 9px;
  border: 1px solid #cbd5e1;
  text-align: left;
}

.hr-print-sheet th {
  color: #fff;
  background: #075985;
}

@media (max-width: 991px) {
  .hr-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .hr-hero {
    padding: 20px;
  }

  .hr-hero h2 {
    font-size: 1.55rem;
  }

  .hr-posture,
  .hr-capability-grid {
    grid-template-columns: 1fr;
  }

  .hr-export-actions .secondary-btn {
    flex: 1 1 88px;
  }
}

@media print {
  .app-sidebar,
  .app-topbar,
  .mobile-nav-overlay {
    display: none !important;
  }

  .app-main,
  .app-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .hr-print-sheet {
    max-width: none;
    box-shadow: none;
  }
}

@media print {
  .procurement-print {
    padding: 0;
  }

  .procurement-print footer {
    right: 0;
    left: 0;
  }
}

.procurement-subnav.comm-subnav {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-height: 68px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.procurement-subnav.comm-subnav a {
  flex: 0 0 auto;
  width: auto;
  min-height: 52px;
  padding: 10px 14px;
  scroll-snap-align: start;
  white-space: nowrap;
}

.sales-hero,
.verify-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(0, 112, 204, .22), rgba(0, 191, 255, .08)),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}

.sales-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 30px;
}

.sales-hero h2,
.verify-header h1 {
  margin: 0 0 10px;
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: 0;
}

.sales-hero p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.sales-posture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sales-posture span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 850;
  text-align: center;
}

.sales-posture i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #22c55e;
  background: rgba(34, 197, 94, .14);
}

.sales-subnav,
.sales-filter,
.sales-kpis {
  margin-bottom: 18px;
}

.sales-subnav a {
  min-height: 58px;
}

.sales-layout .chart-panel canvas {
  min-height: 260px;
}

.finance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(0, 191, 255, .08)),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}

.finance-hero h2 {
  margin: 0 0 10px;
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: 0;
}

.finance-hero p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.finance-posture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.finance-posture span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 850;
  text-align: center;
}

.finance-posture i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #00bfff;
  background: rgba(0, 191, 255, .14);
}

.finance-subnav,
.finance-filter,
.finance-kpis {
  margin-bottom: 18px;
}

.finance-subnav a {
  min-height: 58px;
}

.finance-layout .chart-panel canvas {
  min-height: 260px;
}

/* Finance Center Enterprise */
.finance-subnav {
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.finance-subnav a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.finance-account-tree,
.finance-summary-stack,
.finance-integration-list {
  display: grid;
  gap: 10px;
}

.finance-account-tree article,
.finance-summary-stack > div,
.finance-integration-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--primary) 8%);
}

.finance-account-tree i,
.finance-integration-list i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: #38bdf8;
  background: rgba(14, 165, 233, .14);
}

.finance-account-tree div,
.finance-integration-list span,
.finance-summary-stack span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-account-tree span,
.finance-integration-list small,
.finance-summary-stack small {
  color: var(--text-secondary);
  font-size: .78rem;
}

.finance-account-tree b,
.finance-summary-stack strong {
  color: var(--text-primary);
  font-size: .96rem;
  text-align: right;
}

.finance-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 14px 0;
}

.finance-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 180px;
  padding: 32px 20px;
  place-content: center;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 95%, var(--primary) 5%);
}

.finance-empty i {
  color: #38bdf8;
  font-size: 1.6rem;
}

.finance-empty strong {
  color: var(--text-primary);
}

.finance-kpis .metric-card {
  min-width: 0;
}

@media (max-width: 767px) {
  .finance-export-actions {
    justify-content: stretch;
  }

  .finance-export-actions .secondary-btn {
    flex: 1 1 90px;
  }

  .finance-account-tree article,
  .finance-summary-stack > div,
  .finance-integration-list > div {
    min-height: 58px;
    padding: 10px 12px;
  }
}

.projects-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(0, 191, 255, .08)),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}

.projects-hero h2 {
  margin: 0 0 10px;
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: 0;
}

.projects-hero p {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.projects-posture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.projects-posture span,
.projects-mini-grid span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 850;
  text-align: center;
}

.projects-posture i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #8b5cf6;
  background: rgba(139, 92, 246, .14);
}

.projects-subnav,
.projects-filter,
.projects-kpis {
  margin-bottom: 18px;
}

.projects-subnav a {
  min-height: 58px;
}

.projects-layout .chart-panel canvas {
  min-height: 260px;
}

.projects-kanban,
.projects-calendar,
.projects-resource-grid,
.projects-file-grid,
.projects-settings,
.projects-report-grid,
.projects-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.projects-kanban-card {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}

.projects-kanban-card strong,
.projects-calendar strong,
.projects-file-grid strong {
  color: var(--text);
}

.projects-gantt {
  display: grid;
  gap: 14px;
}

.projects-gantt > div {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) 190px minmax(160px, 1.3fr) 58px;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
}

.projects-gantt div div,
.projects-capacity {
  position: relative;
  min-height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.projects-gantt b,
.projects-capacity b {
  display: block;
  height: 12px;
  border-radius: inherit;
  background: linear-gradient(90deg, #00bfff, #8b5cf6);
}

.projects-calendar article,
.projects-file-grid article,
.projects-resource-grid article {
  display: grid;
  gap: 10px;
}

.projects-calendar i,
.projects-file-grid i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #00bfff;
  background: rgba(0, 191, 255, .13);
}

.projects-capacity {
  display: grid;
  gap: 8px;
  min-height: 44px;
  padding-top: 28px;
  background: transparent;
}

.projects-capacity span,
.projects-capacity em {
  position: absolute;
  top: 0;
  font-style: normal;
  color: var(--muted);
}

.projects-capacity em {
  right: 0;
}

.projects-capacity::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.projects-capacity b {
  position: relative;
  z-index: 1;
}

.projects-capacity.workload b {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.projects-inline-actions,
.projects-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.projects-risk-matrix {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(34,197,94,.14), rgba(245,158,11,.16), rgba(239,68,68,.18)),
    rgba(255,255,255,.05);
}

.projects-risk-matrix span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #00bfff;
  box-shadow: 0 0 0 8px rgba(0,191,255,.16);
  transform: translate(-50%, -50%);
}

.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 12%, rgba(34,197,94,.16), transparent 28%),
    linear-gradient(135deg, rgba(0, 191, 255, .20), rgba(37, 99, 235, .10) 48%, rgba(139, 92, 246, .12)),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}

.analytics-hero h2 {
  margin: 0 0 10px;
  font-family: Orbitron, Inter, sans-serif;
  font-size: 1.95rem;
  letter-spacing: 0;
}

.analytics-hero p {
  max-width: 940px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.analytics-posture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 68px;
  align-content: center;
  gap: 12px;
}

.analytics-posture span {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 68px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 850;
  text-align: center;
}

.analytics-posture i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #00bfff;
  background: rgba(0,191,255,.14);
}

.analytics-subnav,
.analytics-filter,
.analytics-bi-kpis {
  margin-bottom: 18px;
}

.analytics-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.analytics-subnav a {
  flex: 0 0 auto;
  min-height: 48px;
  scroll-snap-align: start;
}

.analytics-layout .chart-panel canvas {
  min-height: 270px;
}

.analytics-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.analytics-comparatives,
.analytics-okrs,
.analytics-report-grid,
.analytics-visual-grid,
.analytics-ceo-grid {
  display: grid;
  gap: 16px;
}

.analytics-ceo-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.analytics-ceo-grid > .comm-panel:first-child {
  grid-row: span 2;
}

.analytics-comparatives div,
.analytics-okrs div,
.analytics-report-grid div,
.analytics-visual-grid span {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.analytics-comparatives strong,
.analytics-okrs strong,
.analytics-report-grid strong {
  color: var(--text);
}

.analytics-comparatives small {
  color: #22c55e;
  font-weight: 850;
}

.analytics-report-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.analytics-visual-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.analytics-visual-grid span {
  align-items: center;
  grid-template-columns: auto 1fr;
  color: var(--muted);
  font-weight: 750;
}

.analytics-visual-grid i {
  color: #00bfff;
}

.analytics-global-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 96%, #0ea5e9 4%);
}

.analytics-global-filter > input[data-analytics-search] {
  grid-column: span 2;
  min-height: 46px;
}

.analytics-global-filter label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.analytics-global-filter label span {
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 700;
}

.analytics-global-filter select,
.analytics-global-filter input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
}

.analytics-global-filter .primary-btn,
.analytics-global-filter .secondary-btn {
  min-height: 46px;
  justify-content: center;
}

.analytics-advanced-grid {
  align-items: stretch;
}

.analytics-funnel,
.analytics-treemap,
.analytics-heatmap {
  min-height: 240px;
}

.analytics-funnel {
  display: grid;
  align-content: center;
  gap: 8px;
}

.analytics-funnel > div {
  display: flex;
  width: var(--funnel-width);
  min-height: 42px;
  margin-inline: auto;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 6px;
  color: var(--text-primary);
  background: rgba(14, 165, 233, .13);
}

.analytics-treemap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: stretch;
}

.analytics-treemap > div {
  display: grid;
  flex: var(--tree-weight) 1 120px;
  min-width: 112px;
  min-height: 82px;
  padding: 12px;
  align-content: end;
  gap: 4px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 8px;
  color: var(--text-primary);
  background: rgba(34, 197, 94, .1);
}

.analytics-treemap span,
.analytics-heatmap span {
  color: var(--text-secondary);
  font-size: .78rem;
}

.analytics-heatmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.analytics-heatmap > div {
  display: grid;
  min-height: 76px;
  padding: 10px;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 8px;
  background: rgba(245, 158, 11, calc(.06 + var(--heat) * .2));
}

.analytics-empty {
  display: grid;
  min-height: 150px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: var(--text-secondary);
  text-align: center;
}

.analytics-empty i,
.analytics-empty strong {
  color: var(--text-primary);
}

.analytics-report-grid small {
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .analytics-global-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .analytics-hero h2 {
    font-size: 1.65rem;
  }

  .analytics-global-filter {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .analytics-global-filter > input[data-analytics-search] {
    grid-column: auto;
  }

  .analytics-heatmap {
    grid-template-columns: 1fr;
  }
}

.enterprise-document-toolbar {
  align-items: center;
}

.enterprise-document-toolbar form {
  margin: 0;
}

.document-share-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
  gap: 10px;
  align-items: center;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,191,255,.08);
}

.document-share-panel input {
  min-width: 0;
}

.document-share-qr {
  display: grid;
  grid-template-columns: repeat(37, 4px);
  gap: 1px;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.document-share-qr i {
  width: 4px;
  height: 4px;
  background: #fff;
}

.document-share-qr i.on {
  background: #001a33;
}

.document-share-qr small {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: #001a33;
  font-weight: 800;
  text-align: center;
}

.pdfjs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(4, 18, 33, .82);
  position: sticky;
  top: 0;
  z-index: 2;
}

.pdfjs-toolbar button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.pdfjs-toolbar input {
  min-width: 160px;
  flex: 1;
}

.pdfjs-shell {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 640px;
}

.pdfjs-thumbs {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  overflow: auto;
  border-right: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.pdfjs-thumbs canvas {
  width: 92px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
}

.pdfjs-canvas-wrap {
  display: grid;
  place-items: start center;
  padding: 18px;
  overflow: auto;
}

.pdfjs-canvas-wrap canvas {
  max-width: 100%;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.pdfjs-canvas-wrap iframe {
  display: none;
  width: 100%;
  min-height: 680px;
  border: 0;
}

.pdfjs-fallback .pdfjs-canvas-wrap canvas,
.pdfjs-fallback .pdfjs-thumbs {
  display: none;
}

.pdfjs-fallback .pdfjs-canvas-wrap iframe {
  display: block;
}

.image-preview-tools {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.document-comments form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.document-comments input {
  flex: 1;
  min-width: 180px;
}

.version-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.verify-body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(0, 191, 255, .25), transparent 36%),
    linear-gradient(145deg, #020617, #071827 54%, #03111f);
}

.verify-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0;
}

.verify-card {
  padding: clamp(18px, 3vw, 34px);
}

.verify-header {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(210px, auto);
  gap: 22px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.verify-header img {
  max-width: 160px;
  height: auto;
}

.verify-header span,
.verify-header p,
.verify-row span,
.verify-history span,
.verify-history small,
.verify-qr span {
  color: var(--muted);
}

.verify-status {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  text-align: center;
}

.verify-status i {
  font-size: 36px;
}

.verify-success .verify-status i { color: #22c55e; }
.verify-warning .verify-status i { color: #f59e0b; }
.verify-danger .verify-status i { color: #ef4444; }

.verify-grid,
.verify-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  margin-top: 22px;
}

.verify-grid article,
.verify-grid aside,
.verify-bottom article {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}

.verify-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.verify-row strong {
  overflow-wrap: anywhere;
}

.verify-qr {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.verify-qr img,
.verify-qr-matrix {
  width: 220px;
  height: 220px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.verify-qr-matrix {
  display: grid;
  grid-template-columns: repeat(37, 1fr);
  gap: 0;
}

.verify-qr-matrix i {
  display: block;
  aspect-ratio: 1;
}

.verify-qr-matrix i.on {
  background: #020617;
}

.verify-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.verify-actions a,
.verify-actions button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-weight: 800;
}

.verify-history,
.verify-ai {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

.verify-ai {
  grid-template-columns: 26px minmax(0, 1fr);
}

.mobile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 22px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(0, 191, 255, .22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), rgba(15, 23, 42, .82)),
    radial-gradient(circle at 90% 20%, rgba(34, 197, 94, .2), transparent 32%);
  box-shadow: 0 24px 70px rgba(0, 13, 26, .28);
  overflow: hidden;
}

.mobile-hero h2 {
  max-width: 760px;
  margin: 8px 0 12px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
}

.mobile-hero p {
  max-width: 850px;
  color: var(--muted);
  margin: 0;
}

.mobile-device-frame {
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(0, 13, 26, .92), rgba(0, 112, 204, .38));
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.24);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  position: relative;
}

.mobile-device-frame span {
  position: absolute;
  top: 12px;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.mobile-device-frame i {
  font-size: 42px;
  color: #00bfff;
  filter: drop-shadow(0 0 18px rgba(0,191,255,.35));
}

.mobile-device-frame strong,
.mobile-device-frame small {
  display: block;
  color: #fff;
}

.mobile-subnav {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  margin: 16px 0;
}

.mobile-layout {
  align-items: start;
}

.mobile-install-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .14), rgba(0, 191, 255, .08));
  box-shadow: 0 18px 48px rgba(0, 13, 26, .18);
  margin-bottom: 18px;
}

.mobile-install-card h3 {
  margin: 6px 0 8px;
  font-size: 24px;
}

.mobile-install-card p {
  margin: 0;
  color: var(--muted);
}

.mobile-card-list,
.mobile-action-grid,
.mobile-breakpoints,
.mobile-report-grid {
  display: grid;
  gap: 12px;
}

.mobile-card-list a,
.mobile-card-list button,
.mobile-action-grid a,
.mobile-breakpoints button,
.mobile-report-grid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: inherit;
  text-decoration: none;
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mobile-card-list a {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.mobile-card-list.compact a {
  grid-template-columns: 38px minmax(0, 1fr);
}

.mobile-card-list i,
.mobile-action-grid i,
.mobile-breakpoints i,
.mobile-report-grid i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 191, 255, .14);
  color: #00bfff;
}

.mobile-card-list span,
.mobile-card-list small,
.mobile-action-grid span,
.mobile-report-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobile-card-list small,
.mobile-report-grid span {
  display: block;
  color: var(--muted);
}

.mobile-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.mobile-action-grid a {
  min-height: 112px;
  justify-items: start;
}

.mobile-breakpoints {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.mobile-breakpoints button {
  text-align: left;
}

.mobile-report-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mobile-report-grid article {
  align-content: start;
}

.mobile-card-list a:hover,
.mobile-action-grid a:hover,
.mobile-breakpoints button:hover,
.mobile-report-grid article:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 191, 255, .35);
  background: rgba(0, 191, 255, .08);
}

.mobile-filter {
  margin: 14px 0 18px;
}

.mobile-table table {
  min-width: 720px;
}

[data-device-mode="pwa"] .mobile-install-card {
  border-color: rgba(34, 197, 94, .45);
}

.ei-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(0, 191, 255, .24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), rgba(2, 6, 23, .88)),
    radial-gradient(circle at 85% 10%, rgba(139, 92, 246, .25), transparent 34%);
  box-shadow: 0 24px 70px rgba(0, 13, 26, .32);
  overflow: hidden;
}

.ei-hero h2 {
  max-width: 860px;
  margin: 8px 0 12px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04;
}

.ei-hero p {
  max-width: 900px;
  color: var(--muted);
  margin: 0;
}

.ei-orbit {
  min-height: 220px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(0,191,255,.2), rgba(0,13,26,.72));
}

.ei-orbit strong {
  color: #fff;
  text-align: center;
}

.ei-orbit span {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0,191,255,.18);
  border: 1px solid rgba(0,191,255,.28);
  font-size: 12px;
  animation: eiPulse 2.8s ease-in-out infinite;
}

.ei-orbit span:nth-child(1) { top: 12px; left: 50%; transform: translateX(-50%); }
.ei-orbit span:nth-child(2) { right: 10px; top: 50%; transform: translateY(-50%); }
.ei-orbit span:nth-child(3) { bottom: 12px; left: 50%; transform: translateX(-50%); }
.ei-orbit span:nth-child(4) { left: 10px; top: 50%; transform: translateY(-50%); }

@keyframes eiPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,191,255,0); }
  50% { box-shadow: 0 0 28px rgba(0,191,255,.28); }
}

.ei-subnav {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  margin: 16px 0;
}

.ei-big-number-grid,
.ei-twin-grid,
.ei-sim-results {
  display: grid;
  gap: 14px;
}

.ei-big-number-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 18px;
}

.ei-big-number strong {
  display: block;
  font-size: 27px;
  margin: 6px 0;
}

.ei-big-number small,
.ei-big-number span {
  color: var(--muted);
}

.ei-twin-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}

.ei-twin-node,
.ei-twin-orbit-node {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  display: grid;
  gap: 8px;
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ei-twin-node i,
.ei-twin-orbit-node i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,191,255,.14);
  color: #00bfff;
}

.ei-twin-node:hover,
.ei-twin-orbit-node:hover {
  transform: translateY(-2px);
  border-color: rgba(0,191,255,.36);
}

.ei-twin-node.status-verde,
.ei-twin-orbit-node.status-verde { border-color: rgba(34,197,94,.3); }
.ei-twin-node.status-amarillo,
.ei-twin-orbit-node.status-amarillo { border-color: rgba(245,181,27,.35); }
.ei-twin-node.status-rojo,
.ei-twin-orbit-node.status-rojo { border-color: rgba(251,113,133,.35); }

.ei-twin-canvas {
  overflow: hidden;
}

.ei-twin-orbit {
  min-height: 620px;
  position: relative;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,191,255,.16), transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 36%, rgba(255,255,255,.06) 37%, transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,191,255,.10) 55%, transparent 56%);
}

.ei-twin-orbit::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(0,191,255,.22);
  border-radius: 50%;
  animation: eiRotate 28s linear infinite;
}

@keyframes eiRotate {
  to { transform: rotate(360deg); }
}

.ei-twin-orbit-node {
  position: absolute;
  width: 148px;
  left: calc(50% - 74px);
  top: calc(50% - 58px);
  z-index: 2;
}

.ei-twin-orbit-node:nth-child(1) { left: calc(50% - 74px); top: 4%; }
.ei-twin-orbit-node:nth-child(2) { left: 68%; top: 9%; }
.ei-twin-orbit-node:nth-child(3) { left: 82%; top: 24%; }
.ei-twin-orbit-node:nth-child(4) { left: 84%; top: 48%; }
.ei-twin-orbit-node:nth-child(5) { left: 72%; top: 70%; }
.ei-twin-orbit-node:nth-child(6) { left: calc(50% - 74px); top: 80%; }
.ei-twin-orbit-node:nth-child(7) { left: 20%; top: 70%; }
.ei-twin-orbit-node:nth-child(8) { left: 4%; top: 48%; }
.ei-twin-orbit-node:nth-child(9) { left: 6%; top: 24%; }
.ei-twin-orbit-node:nth-child(10) { left: 22%; top: 9%; }
.ei-twin-orbit-node:nth-child(11) { left: 36%; top: 28%; }
.ei-twin-orbit-node:nth-child(12) { left: 58%; top: 30%; }
.ei-twin-orbit-node:nth-child(13) { left: calc(50% - 74px); top: 60%; }

.ei-twin-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,191,255,.28), rgba(139,92,246,.24));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 50px rgba(0,191,255,.2);
}

.ei-twin-core strong,
.ei-twin-core span {
  display: block;
}

.ei-simulator {
  display: grid;
  gap: 18px;
}

.ei-sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.ei-sim-grid label {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.ei-sim-grid input {
  width: 100%;
}

.ei-sim-grid b {
  color: #00bfff;
}

.ei-sim-results {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ei-sim-results article {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,191,255,.2);
  background: rgba(0,191,255,.07);
}

.ei-sim-results strong {
  display: block;
  font-size: 24px;
}

.builder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(0, 191, 255, .24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0, 191, 255, .18), rgba(2, 6, 23, .88)),
    radial-gradient(circle at 90% 12%, rgba(34, 197, 94, .2), transparent 34%);
  box-shadow: 0 24px 70px rgba(0, 13, 26, .3);
  overflow: hidden;
}

.builder-hero h2 {
  max-width: 850px;
  margin: 8px 0 12px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04;
}

.builder-hero p {
  max-width: 900px;
  color: var(--muted);
  margin: 0;
}

.builder-stack,
.builder-app-grid,
.builder-preview-devices {
  display: grid;
  gap: 14px;
}

.builder-stack span,
.builder-app-card,
.builder-palette button,
.builder-properties button,
.builder-preview-devices section {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  padding: 14px;
}

.builder-stack span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  color: #fff;
}

.builder-stack i,
.builder-app-card i,
.builder-palette i {
  color: #00bfff;
}

.builder-subnav {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 16px 0;
}

.builder-app-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 18px;
}

.builder-app-card {
  display: grid;
  gap: 8px;
}

.builder-app-card > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,191,255,.14);
}

.builder-designer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.builder-palette,
.builder-properties {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 10px;
}

.builder-palette button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  text-align: left;
  color: inherit;
}

.builder-canvas.is-drop-target {
  border-color: rgba(0,191,255,.5);
  box-shadow: 0 0 0 6px rgba(0,191,255,.08);
}

.builder-page-preview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: auto minmax(360px, auto) auto;
  gap: 12px;
  min-height: 520px;
}

.builder-page-preview header,
.builder-page-preview footer,
.builder-page-preview aside,
.builder-page-preview main,
.builder-widget,
.builder-drop-zone {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  padding: 14px;
}

.builder-page-preview header,
.builder-page-preview footer {
  grid-column: 1 / -1;
}

.builder-page-preview main {
  display: grid;
  gap: 12px;
  align-content: start;
}

.builder-drop-zone {
  border-style: dashed;
  border-color: rgba(0,191,255,.35);
  color: var(--muted);
}

.builder-widget.generated {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}

.builder-preview-devices {
  grid-template-columns: 1.2fr .85fr .55fr;
  align-items: end;
}

.builder-preview-screen {
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(0,191,255,.2);
  background: linear-gradient(145deg, rgba(0,191,255,.12), rgba(255,255,255,.04));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}

.builder-preview-screen.tablet { min-height: 330px; }
.builder-preview-screen.phone { min-height: 420px; border-radius: 28px; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: min(84vw, 390px);
    max-width: 390px;
    height: 100dvh !important;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-104%);
  }
  .sidebar-footer { position: static; margin-top: 18px; }
  .metric-grid, .dashboard-grid, .dashboard-grid.wide, .split-grid, .role-grid, .permission-list, .control-hero, .status-strip, .module-catalog, .module-catalog.compact, .portfolio-grid, .license-grid, .crm-board, .crm-board.mini { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .top-search { width: 100%; }
  .top-search input { width: 100%; }
  .form-row, .action-row, .inline-form { flex-wrap: wrap; }
  .table-responsive { overflow-x: auto; }
  .suite-table { min-width: 820px; }
  .document-preview-frame, .document-preview-frame iframe, .document-preview-frame img { min-height: 360px; height: 360px; }
  .quote-letterhead, .quote-title-block, .quote-parties, .quote-closing { grid-template-columns: 1fr; }
  .quote-doc-meta { text-align: left; }
  .document-view-grid { grid-template-columns: 1fr; }
  .document-card { grid-template-columns: 1fr; }
  .analytics-filter-bar, .analytics-kpis, .analytics-chart-grid { grid-template-columns: 1fr 1fr; }
  .analytics-filter-bar .primary-btn, .analytics-filter-bar .secondary-btn { width: 100%; justify-content: center; }
  .command-center { grid-template-columns: 1fr; }
  .command-alerts { position: static; }
  .command-filter, .command-kpis, .command-bi { grid-template-columns: 1fr 1fr; }
  .ai-command-grid { grid-template-columns: 1fr; }
  .ai-side { position: static; }
  .automation-hero, .automation-layout { grid-template-columns: 1fr; }
  .automation-side { position: static; }
  .automation-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-builder-grid { grid-template-columns: 1fr; }
  .flow-canvas { grid-template-columns: 1fr; }
  .comm-hero, .comm-layout, .email-console, .whatsapp-console, .security-hero, .integration-hero, .notification-hero, .notification-inbox, .cx-hero, .admin-hero, .inventory-hero, .procurement-hero, .sales-hero, .finance-hero, .projects-hero, .analytics-hero, .analytics-ceo-grid, .verify-header, .verify-grid, .verify-bottom, .mobile-hero, .mobile-install-card, .ei-hero, .builder-hero, .builder-designer, .builder-preview-devices { grid-template-columns: 1fr; }
  .projects-gantt > div { grid-template-columns: 1fr; }
  .comm-side { position: static; }
  .comm-filter-bar, .comm-grid-two { grid-template-columns: 1fr 1fr; }
  .admin-timeline article { grid-template-columns: 46px minmax(0, 1fr); }
  .admin-timeline article .admin-badge { grid-column: 2; justify-self: start; }
  .inventory-label-grid { grid-template-columns: 1fr 1fr; }
  .label-command,
  .label-sheet { grid-template-columns: 1fr; }
  .label-control-grid { grid-template-columns: 1fr 1fr; }
  .inventory-timeline article,
  .inventory-mini-list div,
  .procurement-timeline article { grid-template-columns: 46px minmax(0, 1fr); }
  .inventory-timeline article .inventory-badge { grid-column: 2; justify-self: start; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .main { padding: 14px; }
  .panel { padding: 14px; }
  .control-hero { padding: 16px; }
  .crm-filter-bar > *, .crm-filter-bar input, .crm-filter-bar select, .crm-filter-bar button, .crm-filter-bar a { width: 100%; flex: 1 1 100%; }
  .metric-card strong { font-size: 22px; }
  .quote-sheet { padding: 16px; }
  .quote-sheet header, .quote-meta, .quote-summary { align-items: flex-start; flex-direction: column; }
  .analytics-filter-bar, .analytics-kpis, .analytics-chart-grid { grid-template-columns: 1fr; }
  .chart-panel { min-height: 320px; }
  .chart-panel canvas { height: 250px !important; }
  .hero-actions a, .export-stack a { width: 100%; justify-content: center; }
  .command-filter, .command-kpis, .command-bi { grid-template-columns: 1fr; }
  .command-bi .chart-panel canvas { height: 240px !important; }
  .ai-summary, .ai-score-card, .prediction-stack { grid-template-columns: 1fr; }
  .ai-summary > i { width: 56px; height: 56px; font-size: 24px; }
  .score-value { text-align: left; }
  .automation-stat-grid { grid-template-columns: 1fr; }
  .automation-hero { padding: 22px; }
  .automation-rule { grid-template-columns: 1fr; }
  .comm-hero, .admin-hero, .inventory-hero, .procurement-hero, .sales-hero, .finance-hero, .projects-hero, .analytics-hero, .mobile-hero, .ei-hero, .builder-hero { padding: 22px; }
  .projects-posture { grid-template-columns: 1fr; }
  .analytics-posture { grid-template-columns: 1fr; }
  .pdfjs-shell { grid-template-columns: 1fr; }
  .pdfjs-thumbs { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .document-share-panel { grid-template-columns: 1fr; }
  .comm-filter-bar, .comm-grid-two { grid-template-columns: 1fr; }
  .comm-timeline-item, .email-row, .security-timeline article, .integration-timeline article, .notification-timeline article, .notification-list article, .cx-timeline article, .admin-timeline article, .inventory-timeline article, .inventory-mini-list div, .procurement-timeline article { grid-template-columns: 1fr; }
  .admin-timeline article .admin-badge { grid-column: auto; }
  .inventory-timeline article .inventory-badge { grid-column: auto; }
  .inventory-integrations, .inventory-label-grid, .procurement-posture, .sales-posture, .finance-posture, .verify-row { grid-template-columns: 1fr; }
  .label-control-grid,
  .label-body,
  .enterprise-label header,
  .label-main dl,
  .label-actions,
  .label-export-actions { grid-template-columns: 1fr; }
  .label-sheet { transform: none !important; }
  .label-stock { align-items: flex-start; flex-direction: column; }
  .label-stock strong { margin-left: 0; }
  .bubble { max-width: 100%; }
  .comm-subnav { grid-template-columns: 1fr; }
  .ei-orbit { min-height: 190px; border-radius: 24px; }
  .builder-palette,
  .builder-properties { position: static; }
  .builder-page-preview { grid-template-columns: 1fr; }
  .builder-page-preview header,
  .builder-page-preview footer { grid-column: auto; }
  .ei-twin-orbit { min-height: auto; display: grid; gap: 12px; background: rgba(255,255,255,.04); padding: 12px; }
  .ei-twin-orbit::before { display: none; }
  .ei-twin-orbit-node,
  .ei-twin-core { position: static; transform: none; width: auto; height: auto; border-radius: 16px; }
  .ei-twin-core { min-height: 110px; }
  .mobile-device-frame { min-height: 170px; border-radius: 22px; }
  .mobile-install-card .projects-mini-grid,
  .mobile-action-grid,
  .mobile-breakpoints,
  .mobile-report-grid { grid-template-columns: 1fr; }
  .mobile-card-list a { grid-template-columns: 38px minmax(0, 1fr); }
  .mobile-card-list a .procurement-badge { justify-self: start; }
  .comm-toast-stack { right: 14px; bottom: 14px; }
}

@media print {
  body { background: #fff !important; }
  .sidebar,
  .topbar,
  .inventory-hero,
  .inventory-subnav,
  .inventory-filter,
  .label-command,
  .comm-side,
  .label-actions,
  .comm-toast-stack,
  #loadingState { display: none !important; }
  .app-shell,
  .main,
  .comm-layout,
  .label-layout,
  .comm-main,
  .label-sheet { display: block !important; padding: 0 !important; margin: 0 !important; }
  .enterprise-label {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #0f172a !important;
    margin: 0 0 12mm !important;
  }
}

/* VIPLUSEC Responsive QA Hardening: kept last to neutralize legacy responsive rules. */
@media screen and (min-width: 992px) {
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .metric-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 991.98px) {
  .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(84vw, 390px) !important;
    max-width: 390px !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(-104%) !important;
  }

  body.drawer-open .sidebar {
    transform: translateX(0) !important;
  }

  .topbar {
    align-items: center !important;
    flex-direction: row !important;
  }

  .icon-btn,
  .mobile-menu-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media screen and (max-width: 767.98px) {
  .metric-grid,
  .command-kpis,
  .analytics-kpis,
  .enterprise-command-grid,
  .connector-card-grid,
  .ai-ops-grid {
    grid-template-columns: 1fr !important;
  }

}

@media screen and (max-width: 575.98px) {
  .suite-table.responsive-card-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  table.responsive-card-table,
  table.responsive-card-table thead,
  table.responsive-card-table tbody,
  table.responsive-card-table tr,
  table.responsive-card-table th,
  table.responsive-card-table td {
    display: block !important;
    width: 100% !important;
  }

  table.responsive-card-table thead {
    display: none !important;
  }

  table.responsive-card-table tr {
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.04);
  }

  table.responsive-card-table td {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    border: 0 !important;
    padding: 8px 0 !important;
  }

  table.responsive-card-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  table.responsive-card-table .row-actions,
  table.responsive-card-table form,
  table.responsive-card-table .stack-form,
  table.responsive-card-table .stack-form.compact {
    width: 100% !important;
    min-width: 0 !important;
  }

  table.responsive-card-table .stack-form.compact input,
  table.responsive-card-table .stack-form.compact select,
  table.responsive-card-table .stack-form.compact textarea {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .rc2-table-toolbar input[type="search"],
  .table-toolbar input[type="search"],
  .filter-bar input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  .rc2-table-toolbar,
  .table-toolbar,
  .filter-bar {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

/* VIPLUSEC Light Theme Accessibility: WCAG AA contrast hardening. */
[data-theme="light"] body {
  color: var(--text);
}

[data-theme="light"] .sidebar,
[data-theme="light"] .mobile-drawer-overlay + .app-shell .sidebar {
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
}

[data-theme="light"] .nav-section,
[data-theme="light"] .nav-accordion,
[data-theme="light"] .tenant-switcher span,
[data-theme="light"] .eyebrow,
[data-theme="light"] .market-section h3,
[data-theme="light"] .permission-group h3,
[data-theme="light"] .document-inspector h3,
[data-theme="light"] .label-main h3,
[data-theme="light"] .mobile-install-card h3,
[data-theme="light"] .quote-sheet h1,
[data-theme="light"] .panel-header h2,
[data-theme="light"] .module-card strong,
[data-theme="light"] .suite-card strong,
[data-theme="light"] .metric-card strong,
[data-theme="light"] .command-tile strong,
[data-theme="light"] .comm-kpi strong,
[data-theme="light"] .ei-big-number strong,
[data-theme="light"] .security-posture strong,
[data-theme="light"] .integration-insights strong,
[data-theme="light"] .notification-insights strong,
[data-theme="light"] .topbar h1,
[data-theme="light"] .brand strong,
[data-theme="light"] .mobile-topbar-brand span {
  color: var(--heading) !important;
}

[data-theme="light"] .nav-section,
[data-theme="light"] .nav-accordion {
  background: transparent;
  font-weight: 900;
  opacity: 1;
}

[data-theme="light"] .nav-accordion .nav-chevron,
[data-theme="light"] .nav-menu a i,
[data-theme="light"] .module-row i,
[data-theme="light"] .role-card i,
[data-theme="light"] .notice-item i,
[data-theme="light"] .document-thumb i,
[data-theme="light"] .word-preview i,
[data-theme="light"] .comm-message-card i,
[data-theme="light"] .integration-grid i,
[data-theme="light"] .security-mini-list i,
[data-theme="light"] .connector-provider-head > i,
[data-theme="light"] .ai-agent-card > i,
[data-theme="light"] .automation-flow-node i,
[data-theme="light"] .automation-empty-canvas i,
[data-theme="light"] .ei-twin-node i,
[data-theme="light"] .builder-widget-icon {
  color: var(--interactive) !important;
}

[data-theme="light"] .nav-menu a,
[data-theme="light"] .brand,
[data-theme="light"] .user-chip,
[data-theme="light"] .api-chip,
[data-theme="light"] .suite-table,
[data-theme="light"] .suite-table th,
[data-theme="light"] .suite-table td,
[data-theme="light"] .stack-form input,
[data-theme="light"] .stack-form select,
[data-theme="light"] .stack-form textarea,
[data-theme="light"] .auth-form input,
[data-theme="light"] .secondary-btn,
[data-theme="light"] .icon-btn,
[data-theme="light"] .comm-tab,
[data-theme="light"] .comm-channel-link,
[data-theme="light"] .mobile-card-list a,
[data-theme="light"] .integration-catalog .comm-message-card,
[data-theme="light"] .notification-list article,
[data-theme="light"] .security-timeline article,
[data-theme="light"] .admin-timeline article,
[data-theme="light"] .inventory-timeline article,
[data-theme="light"] .procurement-timeline article {
  color: var(--text) !important;
}

[data-theme="light"] .suite-table th,
[data-theme="light"] table.responsive-card-table th {
  color: var(--heading) !important;
  background: rgba(15, 23, 42, 0.055) !important;
  border-color: var(--line) !important;
}

[data-theme="light"] .brand small,
[data-theme="light"] .user-chip small,
[data-theme="light"] .panel-header span,
[data-theme="light"] .module-row span,
[data-theme="light"] .audit-list span,
[data-theme="light"] .metric-card span,
[data-theme="light"] .role-card p,
[data-theme="light"] .permission-list span,
[data-theme="light"] .permission-list small,
[data-theme="light"] .role-permission-map span,
[data-theme="light"] .notice-item small,
[data-theme="light"] .notice-item em,
[data-theme="light"] .profile-head p,
[data-theme="light"] .login-brand p,
[data-theme="light"] .prelaunch-hint,
[data-theme="light"] .auth-form label,
[data-theme="light"] .auth-links,
[data-theme="light"] .control-hero p,
[data-theme="light"] .tenant-card span,
[data-theme="light"] .tenant-card small,
[data-theme="light"] .suite-card span,
[data-theme="light"] .suite-card p,
[data-theme="light"] .module-card span,
[data-theme="light"] .company-profile span,
[data-theme="light"] .comm-kpi span,
[data-theme="light"] .comm-kpi small,
[data-theme="light"] .comm-timeline-item span,
[data-theme="light"] .comm-timeline-item small,
[data-theme="light"] .email-row span,
[data-theme="light"] .email-row small,
[data-theme="light"] .template-manager small,
[data-theme="light"] .integration-grid span,
[data-theme="light"] .integration-grid p,
[data-theme="light"] .comm-message-card p,
[data-theme="light"] .comm-message-card span,
[data-theme="light"] .provider-panel span,
[data-theme="light"] table.responsive-card-table td::before {
  color: var(--muted) !important;
}

[data-theme="light"] .nav-menu a:hover,
[data-theme="light"] .nav-menu a.active,
[data-theme="light"] .auth-links a,
[data-theme="light"] code,
[data-theme="light"] .api-chip span,
[data-theme="light"] .row-actions summary,
[data-theme="light"] .comm-tab.active,
[data-theme="light"] .comm-channel-link.active,
[data-theme="light"] .provider-panel.is-active,
[data-theme="light"] .segmented a:not(.active):hover {
  color: var(--interactive) !important;
}

[data-theme="light"] .nav-menu a:hover,
[data-theme="light"] .nav-menu a.active,
[data-theme="light"] .notice-item.unread,
[data-theme="light"] .module-status.available,
[data-theme="light"] .permission-pills span,
[data-theme="light"] .provider-panel.is-active,
[data-theme="light"] .comm-tab.active,
[data-theme="light"] .comm-channel-link.active {
  background: var(--interactive-soft) !important;
  border-color: rgba(3, 105, 161, 0.26) !important;
}

[data-theme="light"] .badge-soft,
[data-theme="light"] .module-row em,
[data-theme="light"] .module-status.installed,
[data-theme="light"] .comm-alerts .tone-success strong,
[data-theme="light"] .email-row em {
  color: var(--accent) !important;
}

[data-theme="light"] .disabled-link small,
[data-theme="light"] .module-status.in_development {
  color: var(--warning) !important;
}

[data-theme="light"] .mobile-menu-toggle,
[data-theme="light"] .topbar,
[data-theme="light"] .tenant-switcher,
[data-theme="light"] .metric-card,
[data-theme="light"] .module-card,
[data-theme="light"] .suite-card,
[data-theme="light"] .panel,
[data-theme="light"] .card,
[data-theme="light"] .table-responsive,
[data-theme="light"] table.responsive-card-table tr {
  background-color: rgba(255, 255, 255, 0.92);
}

/* VIPLUSEC Enterprise Premium Design System */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "kern";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.topbar h1,
.panel-header h2,
.module-card strong,
.suite-card strong,
.metric-card strong {
  color: var(--text-primary);
  letter-spacing: 0;
}

h1, .topbar h1 {
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1.15;
  font-weight: 850;
}

h2, .panel-header h2 {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.2;
  font-weight: 820;
}

h3 {
  font-size: 1.02rem;
  line-height: 1.28;
  font-weight: 780;
}

h4 {
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 760;
}

.eyebrow,
.badge-soft,
.module-status,
.status-pill,
.caption,
small {
  letter-spacing: .02em;
}

.app-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 191, 255, .14), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(34, 197, 94, .08), transparent 26%),
    var(--bg);
}

[data-theme="light"] .app-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(3, 105, 161, .08), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(22, 101, 52, .055), transparent 26%),
    #f8fafc;
}

.sidebar {
  box-shadow: var(--shadow-sm);
}

.topbar {
  box-shadow: var(--shadow-xs);
}

.top-search input,
.workspace-search-form input,
.rc2-table-toolbar input,
.rc2-table-toolbar select,
.filter-bar input,
.filter-bar select,
.stack-form input,
.stack-form select,
.stack-form textarea,
.auth-form input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--surface-strong) !important;
  color: var(--text-primary) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.top-search input:focus,
.workspace-search-form input:focus,
.rc2-table-toolbar input:focus,
.rc2-table-toolbar select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus,
.auth-form input:focus {
  outline: 0;
  border-color: var(--color-border-hover) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

.metric-card,
.panel,
.role-card,
.suite-card,
.module-card,
.tenant-card,
.command-tile,
.connector-provider-tile,
.ai-ops-card,
.document-card,
.analytics-card,
.command-kpi,
.prediction-card,
.comm-kpi,
.comm-message-card,
.security-posture,
.integration-insights,
.notification-insights,
.cx-posture,
.admin-meter-list,
.report-ai-card,
.platform-advisor-card,
.enterprise-empty-state {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.metric-card:hover,
.panel:hover,
.role-card:hover,
.suite-card:hover,
.module-card:hover,
.tenant-card:hover,
.command-tile:hover,
.connector-provider-tile:hover,
.ai-ops-card:hover,
.document-card:hover,
.analytics-card:hover,
.command-kpi:hover,
.prediction-card:hover,
.comm-kpi:hover,
.comm-message-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-hover) !important;
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .metric-card,
[data-theme="light"] .panel,
[data-theme="light"] .role-card,
[data-theme="light"] .suite-card,
[data-theme="light"] .module-card,
[data-theme="light"] .tenant-card,
[data-theme="light"] .command-tile,
[data-theme="light"] .connector-provider-tile,
[data-theme="light"] .ai-ops-card,
[data-theme="light"] .document-card,
[data-theme="light"] .analytics-card,
[data-theme="light"] .command-kpi,
[data-theme="light"] .prediction-card,
[data-theme="light"] .comm-kpi,
[data-theme="light"] .comm-message-card,
[data-theme="light"] .workspace-panel,
[data-theme="light"] .workspace-feed-item,
[data-theme="light"] .workspace-mini-row,
[data-theme="light"] .workspace-ai-card,
[data-theme="light"] .workspace-table article,
[data-theme="light"] .workspace-result,
[data-theme="light"] .workspace-alert,
[data-theme="light"] .workspace-quick-link,
[data-theme="light"] .workspace-module-card,
[data-theme="light"] .enterprise-empty-state {
  background: #ffffff !important;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.btn,
.icon-btn,
.mobile-menu-toggle,
.auth-form button {
  min-height: var(--touch-target);
  border-radius: var(--radius-sm) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.primary-btn,
.btn-primary,
.auth-form button {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  color: #00101f !important;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .primary-btn,
[data-theme="light"] .btn-primary,
[data-theme="light"] .auth-form button {
  color: #ffffff !important;
}

.secondary-btn,
.btn-outline-light,
.ghost-btn {
  color: var(--text-primary) !important;
  border-color: var(--color-border) !important;
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.btn:hover,
.icon-btn:hover,
.mobile-menu-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.btn:disabled,
.icon-btn:disabled,
[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.suite-table {
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.suite-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface-strong) 84%, var(--color-primary) 16%) !important;
  color: var(--text-primary) !important;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.suite-table tbody tr {
  transition: background var(--transition-fast);
}

.suite-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.nav-menu a,
.nav-accordion {
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
}

.nav-menu a.active {
  position: relative;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.nav-accordion .nav-chevron,
.nav-menu a i,
.icon-btn i,
.mobile-menu-toggle i {
  width: 1.1rem;
  min-width: 1.1rem;
  text-align: center;
}

.mobile-drawer-overlay {
  backdrop-filter: blur(var(--blur-sm));
}

.viplusec-command-palette {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 24px;
  background: rgba(2, 8, 23, .68);
  backdrop-filter: blur(var(--blur-md));
}

.viplusec-command-palette.is-open {
  display: flex;
  animation: viplusec-fade .16s ease-out;
}

.viplusec-command-dialog {
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg2) 90%, white 10%);
  box-shadow: var(--shadow-xl);
}

[data-theme="light"] .viplusec-command-dialog {
  background: #ffffff;
}

.viplusec-command-head {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.viplusec-command-head input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
}

.viplusec-command-kbd {
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: .72rem;
}

.viplusec-command-list {
  display: grid;
  gap: 6px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 12px;
}

.viplusec-command-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.viplusec-command-item:hover,
.viplusec-command-item.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  transform: translateX(2px);
}

.viplusec-command-item small {
  display: block;
  color: var(--text-muted);
}

.viplusec-command-empty {
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
}

.comm-toast-stack {
  z-index: 1400;
}

.comm-toast {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
}

.loading-skeleton,
.skeleton {
  position: relative;
  overflow: hidden;
}

.loading-skeleton::after,
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: viplusec-shimmer 1.2s infinite;
}

[data-theme="light"] .loading-skeleton::after,
[data-theme="light"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.08), transparent);
}

@keyframes viplusec-shimmer {
  to { transform: translateX(100%); }
}

@keyframes viplusec-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@media screen and (max-width: 767.98px) {
  .content {
    padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .viplusec-command-palette {
    padding-top: 7vh;
  }

  .viplusec-command-dialog {
    border-radius: 20px;
  }
}

/* VIPLUSEC Card Content Legibility System */
::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

.metric-card,
.panel,
.role-card,
.suite-card,
.module-card,
.tenant-card,
.command-tile,
.connector-provider-tile,
.ai-ops-card,
.document-card,
.analytics-card,
.command-kpi,
.prediction-card,
.comm-kpi,
.comm-message-card,
.security-posture,
.integration-insights,
.notification-insights,
.cx-posture,
.workspace-panel,
.workspace-feed-item,
.workspace-mini-row,
.workspace-ai-card,
.workspace-table article,
.workspace-result,
.workspace-alert,
.workspace-quick-link,
.workspace-module-card,
.report-panel,
.report-timeline,
.report-ai-card,
.platform-advisor-card,
.automation-flow-node,
.automation-palette-node,
.crm-stage article,
.notice-item,
.permission-list article,
.role-permission-map > div,
.audit-list div,
.document-inspector,
.document-preview-frame,
.enterprise-empty-state {
  color: var(--card-description);
  line-height: var(--card-line-height);
}

.metric-card strong,
.panel strong,
.role-card strong,
.suite-card strong,
.module-card strong,
.tenant-card strong,
.command-tile strong,
.connector-provider-tile strong,
.ai-ops-card strong,
.document-card strong,
.analytics-card strong,
.command-kpi strong,
.prediction-card strong,
.comm-kpi strong,
.comm-message-card strong,
.security-posture strong,
.integration-insights strong,
.notification-insights strong,
.cx-posture strong,
.workspace-panel strong,
.workspace-feed-item strong,
.workspace-mini-row strong,
.workspace-ai-card strong,
.workspace-table strong,
.workspace-result strong,
.workspace-alert strong,
.workspace-quick-link strong,
.workspace-module-card strong,
.report-panel strong,
.report-timeline strong,
.report-ai-card strong,
.platform-advisor-card strong,
.automation-flow-node strong,
.automation-palette-node strong,
.crm-stage article b,
.notice-item strong,
.permission-list strong,
.role-permission-map strong,
.audit-list strong,
.document-inspector strong,
.enterprise-empty-state strong,
.panel-header h2,
.module-card > b,
.suite-card > b {
  color: var(--card-title) !important;
  font-weight: 700;
  line-height: 1.25;
}

.panel-header span,
.module-row span,
.metric-card span,
.tenant-card span,
.tenant-card small,
.suite-card span,
.suite-card p,
.module-card span,
.status-pill span,
.crm-stage article span,
.crm-stage article small,
.document-thumb span,
.document-main p,
.document-inspector span,
.workspace-feed-item span,
.workspace-result span,
.workspace-module-card span,
.workspace-hero-panel span,
.report-dashboard-list small,
.report-source-row small,
.report-timeline small,
.report-ai-card p,
.report-ai-card small,
.comm-kpi span,
.comm-kpi small,
.comm-timeline-item span,
.comm-timeline-item small,
.email-row span,
.email-row small,
.template-manager small,
.integration-grid span,
.integration-grid p,
.comm-message-card p,
.comm-message-card span,
.provider-panel span,
.security-mini-list span,
.security-ai-card p,
.admin-meter-list div span,
.projects-file-grid em,
.analytics-report-grid span,
.verify-qr span,
.mobile-install-card p,
.ei-big-number span,
.quick-launch-actions small {
  color: var(--card-description) !important;
  font-weight: 400;
  line-height: var(--card-line-height);
}

.workspace-feed-item small,
.workspace-mini-row small,
.workspace-ai-card p,
.workspace-alert small,
.workspace-quick-link small,
.workspace-module-card small,
.workspace-result small,
.workspace-table small,
.workspace-table span,
.permission-list span,
.permission-list small,
.role-permission-map span,
.notice-item small,
.notice-item em,
.brand small,
.user-chip small,
.sidebar-footer,
.sidebar-footer small,
.profile-head p,
.login-brand p,
.prelaunch-hint,
.auth-form label,
.auth-links,
.control-hero p,
.comm-toast span,
.context-panel span,
.comm-alerts span,
.comm-alerts small,
.provider-panel small,
.schedule-calendar span,
.integration-catalog span,
.notification-insights span,
.cx-posture span,
.projects-file-grid small,
.analytics-card small {
  color: var(--card-secondary) !important;
  font-weight: 400;
  line-height: 1.55;
}

.disabled-link,
.disabled-link small,
.module-status.disabled,
[disabled],
[aria-disabled="true"],
.is-disabled,
.disabled {
  color: var(--card-disabled) !important;
}

.metric-card p,
.panel p,
.role-card p,
.suite-card p,
.module-card p,
.tenant-card p,
.command-tile p,
.connector-provider-tile p,
.ai-ops-card p,
.document-card p,
.analytics-card p,
.command-kpi p,
.prediction-card p,
.comm-kpi p,
.comm-message-card p,
.workspace-panel p,
.workspace-feed-item p,
.workspace-ai-card p,
.workspace-result p,
.workspace-alert p,
.report-panel p,
.report-ai-card p,
.platform-advisor-card p,
.enterprise-empty-state p {
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--card-description) !important;
  line-height: var(--card-line-height);
}

.metric-card,
.panel,
.role-card,
.suite-card,
.module-card,
.tenant-card,
.command-tile,
.connector-provider-tile,
.ai-ops-card,
.document-card,
.analytics-card,
.command-kpi,
.prediction-card,
.comm-kpi,
.comm-message-card,
.workspace-panel,
.workspace-feed-item,
.workspace-mini-row,
.workspace-ai-card,
.workspace-table article,
.workspace-result,
.workspace-alert,
.workspace-quick-link,
.workspace-module-card,
.report-panel,
.report-timeline,
.report-ai-card,
.platform-advisor-card,
.notice-item,
.permission-list article,
.role-permission-map > div,
.audit-list div {
  padding: clamp(14px, 1.35vw, 20px);
}

.timeline,
.audit-list,
.notice-list,
.module-list,
.report-timeline,
.automation-history,
.security-timeline,
.integration-timeline,
.notification-timeline,
.inventory-timeline,
.procurement-timeline,
.comm-timeline {
  gap: var(--card-inner-gap);
}

.audit-list div,
.notice-item,
.workspace-feed-item,
.workspace-mini-row,
.report-timeline article,
.security-timeline article,
.integration-timeline article,
.notification-timeline article,
.inventory-timeline article,
.procurement-timeline article,
.comm-timeline-item {
  border-color: color-mix(in srgb, var(--color-border) 82%, transparent) !important;
}

.metric-card:hover span,
.module-card:hover span,
.suite-card:hover span,
.workspace-feed-item:hover small,
.workspace-result:hover small,
.comm-message-card:hover p {
  color: var(--card-subtitle) !important;
}

.suite-table td,
.suite-table tbody td,
table.responsive-card-table td {
  color: var(--card-description) !important;
  line-height: 1.55;
}

.suite-table th,
table.responsive-card-table td::before {
  color: var(--card-title) !important;
}

/* VIPLUSEC Enterprise Accessibility Polish: typography, cards, timeline, badges */
:where(.app-main, .dashboard, .workspace-page, .crm-page, .module-page, .content-area) {
  color: var(--card-description);
  text-rendering: optimizeLegibility;
}

:where(.app-main, .dashboard, .workspace-page, .crm-page, .module-page, .content-area)
:where(h1, h2, h3, .page-title, .section-title, .hero-title, .card-title, .widget-title, .panel-title, .kpi-title) {
  color: var(--card-title) !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.18;
}

:where(.app-main, .dashboard, .workspace-page, .crm-page, .module-page, .content-area)
:where(h4, h5, h6, .subtitle, .section-subtitle, .card-subtitle, .widget-subtitle, .panel-subtitle, .kpi-label) {
  color: var(--card-subtitle) !important;
  font-weight: 600;
  line-height: 1.35;
}

:where(.app-main, .dashboard, .workspace-page, .crm-page, .module-page, .content-area)
:where(p, li, dd, td, label, output, .description, .card-description, .widget-description, .panel-description, .helper-copy) {
  color: var(--card-description);
  line-height: var(--card-line-height);
}

:where(.app-main, .dashboard, .workspace-page, .crm-page, .module-page, .content-area)
:where(small, caption, figcaption, .caption, .helper-text, .meta, .timestamp, .muted, .text-muted) {
  color: var(--card-secondary) !important;
  line-height: 1.55;
}

:where(.metric-card, .panel, .role-card, .suite-card, .module-card, .tenant-card, .command-tile,
.connector-provider-tile, .ai-ops-card, .document-card, .analytics-card, .command-kpi,
.prediction-card, .comm-kpi, .comm-message-card, .workspace-panel, .workspace-feed-item,
.workspace-mini-row, .workspace-ai-card, .workspace-table article, .workspace-result,
.workspace-alert, .workspace-quick-link, .workspace-module-card, .report-panel, .report-timeline,
.report-ai-card, .platform-advisor-card, .notice-item, .permission-list article,
.role-permission-map > div, .audit-list div) {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

:where(.metric-card, .panel, .role-card, .suite-card, .module-card, .tenant-card, .command-tile,
.connector-provider-tile, .ai-ops-card, .document-card, .analytics-card, .command-kpi,
.prediction-card, .comm-kpi, .comm-message-card, .workspace-panel, .workspace-feed-item,
.workspace-mini-row, .workspace-ai-card, .workspace-result, .workspace-alert, .workspace-quick-link,
.workspace-module-card, .report-panel, .report-ai-card, .platform-advisor-card, .notice-item) {
  transition: transform var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
}

:where(.metric-card, .panel, .role-card, .suite-card, .module-card, .tenant-card, .command-tile,
.connector-provider-tile, .ai-ops-card, .document-card, .analytics-card, .command-kpi,
.prediction-card, .comm-kpi, .comm-message-card, .workspace-panel, .workspace-feed-item,
.workspace-mini-row, .workspace-ai-card, .workspace-result, .workspace-alert, .workspace-quick-link,
.workspace-module-card, .report-panel, .report-ai-card, .platform-advisor-card, .notice-item):hover {
  border-color: color-mix(in srgb, var(--card-hover) 34%, var(--color-border)) !important;
  box-shadow: var(--shadow-elevated);
}

:where(.timeline, .audit-list, .notice-list, .module-list, .report-timeline, .automation-history,
.security-timeline, .integration-timeline, .notification-timeline, .inventory-timeline,
.procurement-timeline, .comm-timeline, .activity-feed, .activity-list) :where(article, div, li) {
  line-height: var(--card-line-height);
}

:where(.timeline, .audit-list, .notice-list, .module-list, .report-timeline, .automation-history,
.security-timeline, .integration-timeline, .notification-timeline, .inventory-timeline,
.procurement-timeline, .comm-timeline, .activity-feed, .activity-list) :where(strong, b) {
  color: var(--card-title) !important;
  font-weight: 700;
}

:where(.timeline, .audit-list, .notice-list, .module-list, .report-timeline, .automation-history,
.security-timeline, .integration-timeline, .notification-timeline, .inventory-timeline,
.procurement-timeline, .comm-timeline, .activity-feed, .activity-list) :where(span, p) {
  color: var(--card-description) !important;
}

:where(.timeline, .audit-list, .notice-list, .module-list, .report-timeline, .automation-history,
.security-timeline, .integration-timeline, .notification-timeline, .inventory-timeline,
.procurement-timeline, .comm-timeline, .activity-feed, .activity-list) :where(small, time, em) {
  color: var(--card-secondary) !important;
  font-style: normal;
}

:where(.workspace-subnav a, .workspace-command-list a, .module-card a, .suite-card a, .panel a,
.document-card a, .analytics-card a, .report-panel a, .crm-stage article a, .notice-item a) {
  color: var(--card-link);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

:where(.workspace-subnav a, .workspace-command-list a, .module-card a, .suite-card a, .panel a,
.document-card a, .analytics-card a, .report-panel a, .crm-stage article a, .notice-item a):hover {
  color: var(--card-hover);
}

:where(.badge-soft, .module-status, .status-pill, .tag-row span, .pill, .badge, .status-badge) {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

:where(.badge-soft, .module-status.available, .status-badge.success, .badge-success) {
  color: #86efac !important;
  background: rgba(34, 197, 94, .14) !important;
  border-color: rgba(34, 197, 94, .28) !important;
}

:where(.module-status.in_development, .status-badge.warning, .badge-warning) {
  color: #fde68a !important;
  background: rgba(245, 158, 11, .16) !important;
  border-color: rgba(245, 158, 11, .3) !important;
}

:where(.status-badge.error, .badge-error, .badge-danger) {
  color: #fecaca !important;
  background: rgba(239, 68, 68, .16) !important;
  border-color: rgba(239, 68, 68, .3) !important;
}

:where(.module-status.preview_available, .status-badge.info, .badge-info) {
  color: #bae6fd !important;
  background: rgba(14, 165, 233, .16) !important;
  border-color: rgba(14, 165, 233, .3) !important;
}

[data-theme="light"] :where(.badge-soft, .module-status.available, .status-badge.success, .badge-success) {
  color: #166534 !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}

[data-theme="light"] :where(.module-status.in_development, .status-badge.warning, .badge-warning) {
  color: #854d0e !important;
  background: #fef3c7 !important;
  border-color: #fbbf24 !important;
}

[data-theme="light"] :where(.status-badge.error, .badge-error, .badge-danger) {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

[data-theme="light"] :where(.module-status.preview_available, .status-badge.info, .badge-info) {
  color: #075985 !important;
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
}

:where(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-link) 58%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--card-link) 18%, transparent);
}

:where(svg, i, .icon, .nav-icon, .metric-icon, .module-icon, .workspace-icon) {
  flex: 0 0 auto;
  line-height: 1;
}

[data-theme="light"] :where(.workspace-command-list a:hover, .workspace-subnav a:hover,
.module-card:hover, .suite-card:hover, .panel:hover, .workspace-feed-item:hover,
.workspace-mini-row:hover, .workspace-result:hover, .workspace-alert:hover) {
  background-color: color-mix(in srgb, var(--card-hover) 7%, #ffffff) !important;
}

/* VIPLUSEC Enterprise Accessibility Polish: final contrast hardening */
[data-theme="light"] {
  --card-disabled: #475569;
}

[data-theme="light"] :where(.module-status.disabled, .status-pill.disabled, .disabled-link,
[aria-disabled="true"], .is-disabled, .disabled) {
  color: var(--card-disabled) !important;
}

:where(.workspace-hero, .command-hero, .executive-hero, .control-hero, .prelaunch-experience-panel,
.crm-hero, .inventory-hero, .procurement-hero, .sales-hero, .finance-hero, .report-hero,
.platform-hero, .performance-hero, .runtime-hero, .event-hero, .extension-hero, .ai-hero,
.automation-hero, .comm-hero, .security-hero, .integration-hero, .notification-hero,
.cx-hero, .admin-hero, .ops-hero, .saas-hero, .connectors-hero, .ai-agents-hero,
.automation-studio-hero) {
  color: #ffffff;
  background-color: #061830 !important;
}

:where(.workspace-hero, .command-hero, .executive-hero, .control-hero, .prelaunch-experience-panel,
.crm-hero, .inventory-hero, .procurement-hero, .sales-hero, .finance-hero, .report-hero,
.platform-hero, .performance-hero, .runtime-hero, .event-hero, .extension-hero, .ai-hero,
.automation-hero, .comm-hero, .security-hero, .integration-hero, .notification-hero,
.cx-hero, .admin-hero, .ops-hero, .saas-hero, .connectors-hero, .ai-agents-hero,
.automation-studio-hero)
:where(h1, h2, h3, strong, b, .eyebrow, .hero-title, .panel-title) {
  color: #ffffff !important;
}

:where(.workspace-hero, .command-hero, .executive-hero, .control-hero, .prelaunch-experience-panel,
.crm-hero, .inventory-hero, .procurement-hero, .sales-hero, .finance-hero, .report-hero,
.platform-hero, .performance-hero, .runtime-hero, .event-hero, .extension-hero, .ai-hero,
.automation-hero, .comm-hero, .security-hero, .integration-hero, .notification-hero,
.cx-hero, .admin-hero, .ops-hero, .saas-hero, .connectors-hero, .ai-agents-hero,
.automation-studio-hero)
:where(p, span, small, label, .helper-text, .caption) {
  color: #e2e8f0 !important;
}

:where(.command-hero, .executive-hero, .control-hero) :where(select, input, textarea) {
  color: #ffffff;
  background-color: rgba(15, 23, 42, .64);
  border-color: rgba(226, 232, 240, .24);
}

[data-theme="light"] :where(.workspace-panel, .workspace-feed-item, .workspace-mini-row,
.workspace-ai-card, .workspace-table article, .workspace-result, .workspace-alert,
.workspace-quick-link, .workspace-module-card, .workspace-calendar-strip article) {
  color: var(--card-description) !important;
  background-color: rgba(255, 255, 255, .94) !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

[data-theme="light"] :where(.workspace-panel, .workspace-feed-item, .workspace-mini-row,
.workspace-ai-card, .workspace-table article, .workspace-result, .workspace-alert,
.workspace-quick-link, .workspace-module-card, .workspace-calendar-strip article)
:where(strong, b) {
  color: var(--card-title) !important;
}

[data-theme="light"] :where(.workspace-panel, .workspace-feed-item, .workspace-mini-row,
.workspace-ai-card, .workspace-table article, .workspace-result, .workspace-alert,
.workspace-quick-link, .workspace-module-card, .workspace-calendar-strip article)
:where(span, p) {
  color: var(--card-description) !important;
}

[data-theme="light"] :where(.workspace-panel, .workspace-feed-item, .workspace-mini-row,
.workspace-ai-card, .workspace-table article, .workspace-result, .workspace-alert,
.workspace-quick-link, .workspace-module-card, .workspace-calendar-strip article)
:where(small, time, em) {
  color: var(--card-secondary) !important;
}

[data-theme="light"] .workspace-subnav a.active,
[data-theme="light"] .workspace-subnav a:hover {
  color: #ffffff !important;
  background-color: #075985 !important;
  background: linear-gradient(135deg, #075985, #047857) !important;
  border-color: rgba(7, 89, 133, .38);
}

.pagination-bar a.active {
  color: #ffffff !important;
  background-color: var(--card-hover);
}

[data-theme="light"] .pagination-bar a.active {
  color: #ffffff !important;
  background-color: #075985 !important;
  border-color: #075985 !important;
}

[data-theme="light"] :where(.primary-btn, .btn-primary, .auth-form button) {
  background-color: #075985 !important;
}

.prelaunch-experience-panel:not(.is-open) {
  visibility: hidden;
  pointer-events: none;
}

.prelaunch-experience-panel.is-open {
  visibility: visible;
  pointer-events: auto;
}

html,
body,
.app-shell {
  overflow-x: clip;
}

/* VIPLUSEC Enterprise Layout Engine: responsive dashboard density */
:root {
  --enterprise-gap-xs: 8px;
  --enterprise-gap-sm: 12px;
  --enterprise-gap-md: 16px;
  --enterprise-gap-lg: 20px;
  --enterprise-gap-xl: 24px;
  --enterprise-card-min: 220px;
  --enterprise-card-min-compact: 180px;
  --enterprise-panel-min: 280px;
  --enterprise-dashboard-min: 320px;
  --enterprise-card-padding: clamp(14px, 1.2vw, 20px);
  --enterprise-panel-padding: clamp(16px, 1.4vw, 22px);
}

:where(.content, .comm-main, .command-main, .workspace-page, .module-page, .dashboard-page) {
  min-width: 0;
}

:where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
.automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
.inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
.performance-kpis, .platform-kpis, .ei-kpis) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--enterprise-card-min-compact)), 1fr)) !important;
  gap: var(--enterprise-gap-md) !important;
  align-items: stretch;
  width: 100%;
  margin-bottom: var(--enterprise-gap-md);
}

:where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
.comm-message-card, .ai-ops-card, .ai-agent-card, .document-card, .prediction-card,
.role-card, .tenant-card, .connector-provider-tile, .workspace-module-card) {
  min-width: 0;
  min-height: clamp(118px, 10vw, 154px);
  height: 100%;
  padding: var(--enterprise-card-padding) !important;
  display: grid;
  align-content: start;
  gap: var(--enterprise-gap-xs);
}

:where(.metric-card strong, .command-kpi strong, .analytics-card strong, .suite-card strong,
.module-card strong, .comm-message-card strong, .ai-ops-card strong, .ai-agent-card strong) {
  overflow-wrap: anywhere;
}

:where(.dashboard-grid, .split-grid, .workspace-wide-grid, .report-dashboard-grid,
.platform-grid, .performance-grid, .runtime-grid, .command-bi, .comm-grid-two,
.analytics-layout .comm-grid-two, .automation-grid, .builder-layout, .mobile-layout,
.security-layout, .cx-layout, .admin-layout, .projects-layout, .inventory-layout,
.procurement-layout, .sales-layout, .finance-layout) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--enterprise-dashboard-min)), 1fr)) !important;
  gap: var(--enterprise-gap-lg) !important;
  align-items: start;
  width: 100%;
}

:where(.comm-layout, .command-layout, .analytics-layout, .platform-layout,
.performance-layout, .runtime-layout, .ai-agents-layout, .workspace-wide-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr) !important;
  gap: var(--enterprise-gap-lg) !important;
  align-items: start;
  width: 100%;
}

:where(.workspace-grid, .workspace-module-grid, .workspace-recent-columns,
.workspace-calendar-strip, .module-catalog, .module-catalog.compact, .status-strip,
.crm-board, .crm-board.mini, .ai-ops-grid, .platform-env-grid, .platform-monitor-grid,
.performance-mini-grid, .runtime-provider-grid, .comm-card-grid, .projects-mini-grid,
.analytics-visual-grid, .mobile-report-grid, .builder-preview-devices,
.cx-actions, .security-mini-list, .integration-catalog, .notification-insights,
.extension-market-grid, .event-metric-grid, .ei-grid, .report-widget-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--enterprise-card-min)), 1fr)) !important;
  gap: var(--enterprise-gap-md) !important;
  align-items: stretch;
  width: 100%;
}

:where(.panel, .comm-panel, .workspace-panel, .platform-panel, .performance-panel,
.runtime-panel, .report-panel, .automation-panel, .settings-console, .chart-panel) {
  min-width: 0;
  padding: var(--enterprise-panel-padding) !important;
}

:where(.chart-panel) {
  min-height: clamp(260px, 28vw, 360px);
}

:where(.chart-panel canvas) {
  width: 100% !important;
  max-width: 100%;
}

:where(.panel-header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--enterprise-gap-sm);
  flex-wrap: wrap;
}

:where(.panel-header h2, .panel-header h3) {
  margin: 0;
}

:where(.control-hero, .workspace-hero, .report-hero, .platform-hero,
.performance-hero, .runtime-hero, .event-hero, .extension-hero, .inventory-hero,
.procurement-hero, .sales-hero, .finance-hero, .crm-hero, .analytics-hero,
.ai-agents-hero, .automation-studio-hero, .comm-hero, .security-hero,
.admin-hero, .cx-hero, .mobile-hero) {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .32fr) !important;
  gap: var(--enterprise-gap-lg);
  padding: clamp(22px, 2vw, 32px) !important;
}

:where(.comm-main, .command-main) > :where(section, article, div) + :where(section, article, div),
:where(.content) > :where(section, article, div) + :where(section, article, div) {
  margin-top: var(--enterprise-gap-lg);
}

:where(.suite-table, .table-responsive, table.responsive-card-table) {
  max-width: 100%;
}

@media (min-width: 1400px) {
  :root {
    --enterprise-card-min: 240px;
    --enterprise-card-min-compact: 210px;
    --enterprise-dashboard-min: 360px;
  }

  :where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
  .automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
  .inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
  .performance-kpis, .platform-kpis, .ei-kpis) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :where(.comm-layout, .command-layout, .analytics-layout, .platform-layout,
  .performance-layout, .runtime-layout, .ai-agents-layout) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  :where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
  .automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
  .inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
  .performance-kpis, .platform-kpis, .ei-kpis) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --enterprise-card-min: 210px;
    --enterprise-dashboard-min: 300px;
  }

  :where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
  .automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
  .inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
  .performance-kpis, .platform-kpis, .ei-kpis) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :where(.comm-layout, .command-layout, .analytics-layout, .platform-layout,
  .performance-layout, .runtime-layout, .ai-agents-layout) {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --enterprise-card-min: 220px;
    --enterprise-card-min-compact: 220px;
    --enterprise-dashboard-min: 300px;
  }

  :where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
  .automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
  .inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
  .performance-kpis, .platform-kpis, .ei-kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(.comm-layout, .command-layout, .analytics-layout, .platform-layout,
  .performance-layout, .runtime-layout, .ai-agents-layout, .workspace-wide-grid,
  .dashboard-grid, .split-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.control-hero, .workspace-hero, .report-hero, .platform-hero,
  .performance-hero, .runtime-hero, .event-hero, .extension-hero, .inventory-hero,
  .procurement-hero, .sales-hero, .finance-hero, .crm-hero, .analytics-hero,
  .ai-agents-hero, .automation-studio-hero, .comm-hero, .security-hero,
  .admin-hero, .cx-hero, .mobile-hero) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767.98px) {
  :root {
    --enterprise-gap-md: 12px;
    --enterprise-gap-lg: 14px;
    --enterprise-card-min: 100%;
    --enterprise-card-min-compact: 100%;
    --enterprise-dashboard-min: 100%;
  }

  :where(.metric-grid, .metrics-grid, .analytics-kpis, .command-kpis, .admin-kpis, .builder-kpis,
  .automation-kpis, .mobile-kpis, .projects-kpis, .finance-kpis, .sales-kpis,
  .inventory-kpis, .procurement-kpis, .cx-kpis, .security-kpis, .runtime-kpis,
  .performance-kpis, .platform-kpis, .ei-kpis,
  .dashboard-grid, .split-grid, .workspace-wide-grid, .platform-grid,
  .performance-grid, .runtime-grid, .command-bi, .comm-grid-two,
  .comm-layout, .command-layout, .analytics-layout, .platform-layout,
  .performance-layout, .runtime-layout, .ai-agents-layout,
  .workspace-grid, .workspace-module-grid, .workspace-recent-columns,
  .workspace-calendar-strip, .module-catalog, .crm-board, .ai-ops-grid,
  .platform-env-grid, .platform-monitor-grid, .performance-mini-grid,
  .runtime-provider-grid, .comm-card-grid, .projects-mini-grid,
  .analytics-visual-grid, .mobile-report-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
  .comm-message-card, .ai-ops-card, .ai-agent-card, .document-card, .prediction-card,
  .role-card, .tenant-card, .connector-provider-tile, .workspace-module-card) {
    min-height: auto;
  }

  :where(.control-hero, .workspace-hero, .report-hero, .platform-hero,
  .performance-hero, .runtime-hero, .event-hero, .extension-hero, .inventory-hero,
  .procurement-hero, .sales-hero, .finance-hero, .crm-hero, .analytics-hero,
  .ai-agents-hero, .automation-studio-hero, .comm-hero, .security-hero,
  .admin-hero, .cx-hero, .mobile-hero) {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
}

/* VIPLUSEC Enterprise Layout Engine: orphan KPI grid normalization */
:where(.content > section, .comm-main > section, .command-main > section):has(> .metric-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--enterprise-card-min-compact)), 1fr)) !important;
  gap: var(--enterprise-gap-md) !important;
  align-items: stretch;
  width: 100%;
  margin-bottom: var(--enterprise-gap-md);
}

@media (min-width: 1400px) {
  :where(.content > section, .comm-main > section, .command-main > section):has(> .metric-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  :where(.content > section, .comm-main > section, .command-main > section):has(> .metric-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  :where(.content > section, .comm-main > section, .command-main > section):has(> .metric-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767.98px) {
  :where(.content > section, .comm-main > section, .command-main > section):has(> .metric-card) {
    grid-template-columns: 1fr !important;
  }
}

/* VIPLUSEC Enterprise Design System V2.0: premium visual consistency */
:root {
  --vds-radius-xs: 8px;
  --vds-radius-sm: 10px;
  --vds-radius-md: 12px;
  --vds-radius-lg: 16px;
  --vds-radius-xl: 20px;
  --vds-radius-pill: 999px;
  --vds-border: color-mix(in srgb, var(--color-border) 84%, transparent);
  --vds-surface: color-mix(in srgb, var(--surface) 92%, transparent);
  --vds-surface-raised: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  --vds-shadow-card: 0 14px 34px rgba(0, 0, 0, .16);
  --vds-shadow-hover: 0 20px 48px rgba(0, 0, 0, .22);
  --vds-icon-size: 42px;
  --vds-icon-font: 18px;
  --vds-control-height: 44px;
  --vds-transition: 180ms ease;
}

[data-theme="light"] {
  --vds-border: rgba(148, 163, 184, .34);
  --vds-surface: rgba(255, 255, 255, .94);
  --vds-surface-raised: rgba(255, 255, 255, .98);
  --vds-shadow-card: 0 14px 34px rgba(15, 23, 42, .08);
  --vds-shadow-hover: 0 20px 48px rgba(15, 23, 42, .12);
}

:where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
.tenant-card, .role-card, .panel, .comm-panel, .workspace-panel, .workspace-feed-item,
.workspace-mini-row, .workspace-ai-card, .workspace-result, .workspace-alert,
.platform-panel, .performance-panel, .runtime-panel, .report-panel, .automation-panel,
.document-card, .ai-ops-card, .ai-agent-card, .comm-message-card, .prediction-card,
.connector-provider-tile, .notice-item, .enterprise-empty-state) {
  border: 1px solid var(--vds-border) !important;
  border-radius: var(--vds-radius-lg) !important;
  background: var(--vds-surface) !important;
  box-shadow: var(--vds-shadow-card);
  color: var(--card-description);
}

:where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
.tenant-card, .role-card, .panel, .comm-panel, .workspace-panel, .workspace-feed-item,
.workspace-mini-row, .workspace-ai-card, .workspace-result, .workspace-alert,
.platform-panel, .performance-panel, .runtime-panel, .report-panel, .automation-panel,
.document-card, .ai-ops-card, .ai-agent-card, .comm-message-card, .prediction-card,
.connector-provider-tile, .notice-item):hover {
  transform: translateY(-1px);
  box-shadow: var(--vds-shadow-hover);
}

:where(.metric-card, .command-kpi) {
  position: relative;
  overflow: hidden;
}

:where(.metric-card span, .command-kpi span, .analytics-card span, .suite-card span,
.module-card span, .panel-header span, .comm-message-card span) {
  color: var(--card-secondary) !important;
  font-size: clamp(12px, .78vw, 13px);
}

:where(.metric-card strong, .command-kpi strong) {
  color: var(--card-title) !important;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.05;
}

:where(.metric-card small, .command-kpi small, .analytics-card small, .suite-card small,
.module-card small, .comm-message-card small) {
  color: var(--card-secondary) !important;
}

:where(.metric-card i, .command-kpi i, .analytics-card i, .module-card i, .suite-card i,
.comm-message-card i, .ai-ops-card i, .ai-agent-card i, .document-card i,
.connector-provider-tile i, .notice-item i) {
  display: inline-grid;
  place-items: center;
  width: var(--vds-icon-size);
  height: var(--vds-icon-size);
  min-width: var(--vds-icon-size);
  border-radius: var(--vds-radius-md);
  font-size: var(--vds-icon-font);
  line-height: 1;
  color: var(--card-link);
  background: color-mix(in srgb, var(--card-link) 12%, transparent);
}

:where(.panel-header, .toolbar, .enterprise-toolbar, .comm-filter-bar,
.analytics-filter-bar, .workspace-search-form, .workspace-export-actions,
.hero-actions, .export-stack) {
  gap: var(--enterprise-gap-sm);
}

:where(.primary-btn, .secondary-btn, .btn, button, input, select, textarea) {
  transition: border-color var(--vds-transition), background var(--vds-transition),
    color var(--vds-transition), box-shadow var(--vds-transition), transform var(--vds-transition);
}

:where(input, select, textarea, .form-control, .stack-form input, .stack-form select,
.stack-form textarea, .auth-form input) {
  min-height: var(--vds-control-height);
  border-radius: var(--vds-radius-sm) !important;
}

:where(.form-grid, .stack-form, .auth-form, form) :where(input, select, textarea) {
  max-width: 100%;
}

:where(.badge-soft, .module-status, .status-pill, .pill, .badge, .status-badge,
.procurement-badge, .sales-badge, .finance-badge, .inventory-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--vds-radius-pill) !important;
  white-space: nowrap;
}

:where(.timeline, .activity-feed, .audit-list, .notice-list, .procurement-timeline,
.inventory-timeline, .security-timeline, .integration-timeline, .notification-timeline,
.comm-timeline, .admin-timeline) :where(article, div) {
  min-width: 0;
}

:where(.timeline, .activity-feed, .audit-list, .notice-list, .procurement-timeline,
.inventory-timeline, .security-timeline, .integration-timeline, .notification-timeline,
.comm-timeline, .admin-timeline) :where(strong, b) {
  color: var(--card-title) !important;
}

:where(.timeline, .activity-feed, .audit-list, .notice-list, .procurement-timeline,
.inventory-timeline, .security-timeline, .integration-timeline, .notification-timeline,
.comm-timeline, .admin-timeline) :where(span, p) {
  color: var(--card-description) !important;
}

:where(.timeline, .activity-feed, .audit-list, .notice-list, .procurement-timeline,
.inventory-timeline, .security-timeline, .integration-timeline, .notification-timeline,
.comm-timeline, .admin-timeline) :where(small, time, em) {
  color: var(--card-secondary) !important;
}

:where(.chart-panel) {
  overflow: hidden;
}

:where(.chart-panel canvas) {
  display: block;
  min-height: 220px;
}

:where(.empty-state, .enterprise-empty-state, .no-results, .blank-state) {
  display: grid;
  place-items: center;
  gap: var(--enterprise-gap-sm);
  min-height: 180px;
  padding: var(--enterprise-panel-padding);
  border: 1px dashed var(--vds-border);
  border-radius: var(--vds-radius-lg);
  color: var(--card-description);
  background: color-mix(in srgb, var(--vds-surface) 78%, transparent);
  text-align: center;
}

@media (max-width: 767.98px) {
  :where(.table-responsive) {
    overflow-x: visible !important;
  }

  :where(.content table, .suite-table, table.responsive-card-table) {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  :where(.content table, .suite-table, table.responsive-card-table) thead {
    display: none;
  }

  :where(.content table, .suite-table, table.responsive-card-table) tbody,
  :where(.content table, .suite-table, table.responsive-card-table) tr,
  :where(.content table, .suite-table, table.responsive-card-table) td {
    display: block;
    width: 100%;
  }

  :where(.content table, .suite-table, table.responsive-card-table) tr {
    margin-bottom: var(--enterprise-gap-sm);
    padding: 12px;
    border: 1px solid var(--vds-border);
    border-radius: var(--vds-radius-md);
    background: var(--vds-surface-raised);
    box-shadow: var(--vds-shadow-card);
  }

  :where(.content table, .suite-table, table.responsive-card-table) td {
    min-height: 34px;
    padding: 8px 0 !important;
    border: 0 !important;
  }

  :where(.content table, .suite-table, table.responsive-card-table) td + td {
    border-top: 1px solid color-mix(in srgb, var(--vds-border) 72%, transparent) !important;
  }

  :where(.content table, .suite-table, table.responsive-card-table) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--card-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  :where(.form-grid, .stack-form, .auth-form, form) {
    gap: var(--enterprise-gap-sm);
  }

  :where(.form-grid, .stack-form, .auth-form, form) :where(input, select, textarea, button, .btn, .primary-btn, .secondary-btn) {
    width: 100%;
    min-height: 46px;
  }

  :where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
  .comm-message-card, .ai-ops-card, .ai-agent-card, .document-card, .prediction-card) {
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.metric-card, .command-kpi, .analytics-card, .suite-card, .module-card,
  .tenant-card, .role-card, .panel, .comm-panel, .workspace-panel, .workspace-feed-item,
  .workspace-mini-row, .workspace-ai-card, .workspace-result, .workspace-alert,
  .platform-panel, .performance-panel, .runtime-panel, .report-panel, .automation-panel,
  .document-card, .ai-ops-card, .ai-agent-card, .comm-message-card, .prediction-card,
  .connector-provider-tile, .notice-item) {
    transition: none !important;
    transform: none !important;
  }
}

/* VIPLUSEC Enterprise Executive Dashboard V2 */
.executive-dashboard-v2 {
  display: grid;
  gap: var(--enterprise-gap-lg);
  min-width: 0;
  animation: viplusecFadeIn .42s ease both;
}

.executive-hero-v2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: var(--enterprise-gap-lg);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--vds-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 18%, rgba(56, 189, 248, .22), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(34, 197, 94, .16), transparent 30%),
    linear-gradient(135deg, rgba(2, 8, 23, .94), rgba(15, 23, 42, .82));
  box-shadow: var(--vds-shadow-card);
  color: #fff;
}

[data-theme="light"] .executive-hero-v2 {
  background:
    radial-gradient(circle at 8% 18%, rgba(14, 165, 233, .18), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(34, 197, 94, .14), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .92));
  color: var(--card-title);
}

.executive-hero-copy h2 {
  margin: 8px 0 10px;
  max-width: 780px;
  color: inherit;
  font-size: clamp(34px, 4vw, 62px);
  line-height: .98;
}

.executive-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--card-description);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
}

.executive-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.executive-suite-score {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(56, 189, 248, .26);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="light"] .executive-suite-score {
  background: rgba(255, 255, 255, .76);
}

.executive-suite-score span,
.executive-suite-score small {
  color: var(--card-secondary);
}

.executive-suite-score strong {
  color: var(--card-title);
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1;
}

.suite-score-ring {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #22c55e;
  background: conic-gradient(from 10deg, #22c55e 0 88%, rgba(148, 163, 184, .22) 88% 100%);
}

.executive-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--enterprise-gap-md);
}

.executive-kpi-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 172px;
  padding: clamp(16px, 1.4vw, 22px);
  overflow: hidden;
  border: 1px solid var(--vds-border);
  border-radius: 18px;
  background: var(--vds-surface);
  box-shadow: var(--vds-shadow-card);
  transition: transform var(--vds-transition), box-shadow var(--vds-transition), border-color var(--vds-transition);
}

.executive-kpi-card:hover,
.executive-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--vds-shadow-hover);
}

.executive-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% 38%;
  height: 90px;
  border-radius: 50%;
  background: rgba(56, 189, 248, .14);
  filter: blur(20px);
  pointer-events: none;
}

.executive-kpi-card.success::after { background: rgba(34, 197, 94, .16); }
.executive-kpi-card.warning::after { background: rgba(245, 158, 11, .16); }
.executive-kpi-card.danger::after { background: rgba(251, 113, 133, .18); }

.executive-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.executive-kpi-top > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--card-link);
  background: rgba(56, 189, 248, .13);
}

.executive-kpi-card > span,
.executive-widget-header span {
  color: var(--card-secondary);
  font-size: 13px;
}

.executive-kpi-card > strong {
  color: var(--card-title);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--card-description);
  background: rgba(148, 163, 184, .12);
  font-size: 12px;
  font-weight: 700;
}

.trend.up { color: #22c55e; background: rgba(34, 197, 94, .12); }
.trend.down { color: #fb7185; background: rgba(251, 113, 133, .12); }

.sparkline {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px;
  max-height: 38px;
}

.executive-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--enterprise-gap-lg);
  align-items: start;
}

.executive-main-v2,
.executive-side-v2 {
  display: grid;
  gap: var(--enterprise-gap-lg);
  min-width: 0;
}

.executive-widget {
  min-width: 0;
  padding: var(--enterprise-panel-padding);
  border: 1px solid var(--vds-border);
  border-radius: 18px;
  background: var(--vds-surface);
  box-shadow: var(--vds-shadow-card);
  transition: transform var(--vds-transition), box-shadow var(--vds-transition);
}

.executive-widget.compact {
  padding: 16px;
}

.executive-widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.executive-widget-header > div:first-child {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
}

.executive-widget-header i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--card-link);
  background: rgba(56, 189, 248, .12);
}

.executive-widget-header h3 {
  margin: 0;
  color: var(--card-title);
  font-size: 17px;
}

.executive-widget-header span {
  grid-column: 2;
  line-height: 1.35;
}

.widget-actions {
  display: flex;
  gap: 8px;
}

.widget-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--vds-border);
  border-radius: 10px;
  color: var(--card-secondary);
  background: transparent;
  cursor: pointer;
}

.widget-actions button:hover {
  color: var(--card-link);
  border-color: rgba(56, 189, 248, .42);
  background: rgba(56, 189, 248, .1);
}

.widget-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--card-description);
  background: rgba(148, 163, 184, .12);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.widget-status.success { color: #22c55e; background: rgba(34, 197, 94, .12); }
.widget-status.warning { color: #f59e0b; background: rgba(245, 158, 11, .13); }
.widget-status.info { color: #38bdf8; background: rgba(56, 189, 248, .12); }

.executive-widget canvas[data-executive-chart] {
  width: 100% !important;
  display: block;
}

.chart-xl canvas[data-executive-chart] {
  height: 280px !important;
  min-height: 280px;
  max-height: 280px;
}

.executive-chart-grid canvas[data-executive-chart] {
  height: 220px !important;
  min-height: 220px;
  max-height: 220px;
}

.executive-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--enterprise-gap-lg);
}

.suite-status-grid,
.quick-access-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.suite-status-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--vds-border);
  border-radius: 14px;
  background: var(--vds-surface-raised);
}

.suite-status-card > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--card-link);
  background: rgba(56, 189, 248, .12);
}

.suite-status-card.success > i { color: #22c55e; background: rgba(34, 197, 94, .12); }
.suite-status-card.warning > i { color: #f59e0b; background: rgba(245, 158, 11, .12); }

.suite-status-card strong,
.executive-timeline strong,
.task-list-v2 span,
.document-list-v2 strong,
.executive-alert-list strong {
  color: var(--card-title);
}

.suite-status-card span,
.executive-alert-list span,
.task-list-v2 small,
.document-list-v2 span {
  color: var(--card-secondary);
}

.suite-status-card em {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--card-link);
  background: rgba(56, 189, 248, .1);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.executive-timeline,
.executive-alert-list,
.task-list-v2,
.document-list-v2 {
  display: grid;
  gap: 12px;
}

.executive-timeline article,
.executive-alert-list article,
.task-list-v2 article,
.document-list-v2 article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--vds-border);
  border-radius: 14px;
  background: var(--vds-surface-raised);
}

.executive-alert-list article,
.task-list-v2 article,
.document-list-v2 article {
  grid-template-columns: 38px minmax(0, 1fr);
}

.executive-timeline article > i,
.executive-alert-list article > i,
.document-list-v2 article > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #22c55e;
  background: rgba(34, 197, 94, .12);
}

.executive-alert-list .critical > i { color: #fb7185; background: rgba(251, 113, 133, .13); }
.executive-alert-list .warning > i { color: #f59e0b; background: rgba(245, 158, 11, .13); }
.executive-alert-list .info > i { color: #38bdf8; background: rgba(56, 189, 248, .12); }

.executive-timeline small {
  display: block;
  margin-top: 4px;
  color: var(--card-secondary);
}

.executive-timeline em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #22c55e;
  background: rgba(34, 197, 94, .12);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.system-bars {
  display: grid;
  gap: 12px;
}

.system-bars span {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  color: var(--card-description);
  font-size: 13px;
}

.system-bars em {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}

.system-bars em::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
}

.task-list-v2 strong {
  color: var(--card-link);
}

.quick-access-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-access-v2 a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--vds-border);
  border-radius: 14px;
  color: var(--card-description);
  background: var(--vds-surface-raised);
  text-decoration: none;
}

.quick-access-v2 a:hover {
  color: var(--card-link);
  border-color: rgba(56, 189, 248, .42);
  transform: translateY(-1px);
}

.executive-notices.notice-list {
  gap: 10px;
}

@keyframes viplusecFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .executive-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .suite-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .executive-layout-v2,
  .executive-hero-v2 {
    grid-template-columns: 1fr;
  }

  .executive-kpi-grid,
  .suite-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .executive-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .executive-dashboard-v2 {
    gap: 14px;
  }

  .executive-hero-v2,
  .executive-widget,
  .executive-kpi-card {
    border-radius: 16px;
  }

  .executive-kpi-grid,
  .executive-chart-grid,
  .suite-status-grid,
  .quick-access-v2 {
    grid-template-columns: 1fr;
  }

  .executive-widget-header {
    align-items: stretch;
    flex-direction: column;
  }

  .widget-actions {
    justify-content: flex-end;
  }

  .executive-timeline article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .executive-timeline em {
    grid-column: 2;
    justify-self: start;
  }

  .system-bars span {
    grid-template-columns: 68px minmax(0, 1fr) 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .executive-dashboard-v2,
  .executive-kpi-card,
  .executive-widget,
  .quick-access-v2 a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* VIPLUSEC Enterprise Brand Identity */
.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  animation: enterpriseLogoFadeIn .58s ease both;
}

.login-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  object-position: center;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 18px;
  filter: drop-shadow(0 10px 22px rgba(14, 165, 233, .18));
  transform: translateZ(0);
  transition: transform .24s ease, filter .24s ease;
}

.login-brand:hover .login-logo {
  transform: translateY(-1px) scale(1.025);
  filter: drop-shadow(0 14px 28px rgba(14, 165, 233, .26));
}

.login-brand h1 {
  margin: 0;
  line-height: 1;
  letter-spacing: .06em;
}

.login-brand p {
  margin-top: 5px;
  line-height: 1.25;
}

.brand-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  object-position: center;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 18px;
  filter: drop-shadow(0 10px 22px rgba(14, 165, 233, .18));
  transform: translateZ(0);
  transition: transform .24s ease, filter .24s ease;
}

.brand:hover .brand-logo {
  transform: translateY(-1px);
  filter: drop-shadow(0 14px 28px rgba(14, 165, 233, .25));
}

.mobile-topbar-brand img,
.loading-state img {
  object-fit: cover;
  object-position: center;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 18px;
  filter: drop-shadow(0 10px 22px rgba(14, 165, 233, .18));
}

.loading-state img {
  width: 72px;
  height: 72px;
}

@keyframes enterpriseLogoFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .login-brand {
    gap: 14px;
    margin-bottom: 24px;
  }

  .login-logo {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 16px;
  }

  .brand-logo,
  .loading-state img {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 16px;
  }

  .mobile-topbar-brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
}

@media (max-width: 575.98px) {
  .login-brand {
    gap: 12px;
  }

  .login-logo {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 15px;
  }

  .brand-logo,
  .loading-state img {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 15px;
  }

  .mobile-topbar-brand img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .login-brand h1 {
    font-size: clamp(24px, 8vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-brand,
  .login-logo,
  .brand-logo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* VIPLUSEC Enterprise Login Experience */
.auth-body {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(14, 165, 233, .22), transparent 32%),
    radial-gradient(circle at 82% 16%, rgba(34, 197, 94, .16), transparent 28%),
    radial-gradient(circle at 50% 92%, rgba(56, 189, 248, .18), transparent 34%),
    linear-gradient(135deg, #020617 0%, #061526 46%, #020617 100%);
}

.auth-body::before,
.auth-body::after {
  content: "";
  position: fixed;
  inset: auto;
  z-index: -3;
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  pointer-events: none;
  border-radius: 999px;
  filter: blur(72px);
  opacity: .62;
  will-change: transform, opacity;
}

.auth-body::before {
  top: -24%;
  left: -12%;
  background: radial-gradient(circle, rgba(14, 165, 233, .42), rgba(14, 165, 233, 0) 68%);
  animation: loginAuroraOne 18s ease-in-out infinite alternate;
}

.auth-body::after {
  right: -14%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(34, 197, 94, .26), rgba(56, 189, 248, .18) 38%, transparent 70%);
  animation: loginAuroraTwo 22s ease-in-out infinite alternate;
}

.auth-particle-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.auth-particle-field span {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 999px;
  background: rgba(125, 211, 252, .72);
  box-shadow: 0 0 18px rgba(56, 189, 248, .32);
  opacity: var(--particle-opacity);
  transform: translate3d(0, 0, 0);
  animation: loginParticleFloat var(--particle-duration) ease-in-out infinite alternate;
  animation-delay: var(--particle-delay);
  will-change: transform, opacity;
}

.auth-card {
  position: relative;
  z-index: 1;
  border-radius: 24px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .66)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(56, 189, 248, .06) inset !important;
  backdrop-filter: blur(24px) saturate(1.18);
  animation: loginCardEnter .6s cubic-bezier(.2, .82, .2, 1) both;
}

.auth-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 42%),
    radial-gradient(circle at 50% 0%, rgba(14, 165, 233, .12), transparent 48%);
}

.login-brand {
  animation: loginBrandEnter .7s cubic-bezier(.2, .82, .2, 1) both, loginBrandBreath 6.8s ease-in-out 1s infinite;
}

.login-logo {
  animation: loginLogoEnter .7s cubic-bezier(.2, .82, .2, 1) both, loginLogoBreath 7.5s ease-in-out 1s infinite;
  will-change: transform, filter;
}

.auth-form {
  gap: 16px;
}

.auth-form label {
  position: relative;
  color: rgba(226, 232, 240, .82) !important;
  font-weight: 700;
}

.auth-form input {
  min-height: 52px;
  border-radius: 16px !important;
  border-color: rgba(148, 163, 184, .2) !important;
  background: rgba(2, 6, 23, .36) !important;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
}

.auth-form input::placeholder {
  color: rgba(148, 163, 184, .68);
  transition: color .2s ease, opacity .2s ease;
}

.auth-form input:hover {
  border-color: rgba(56, 189, 248, .38) !important;
}

.auth-form input:focus {
  border-color: rgba(56, 189, 248, .72) !important;
  background: rgba(2, 6, 23, .52) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .18), 0 16px 34px rgba(8, 47, 73, .16) !important;
}

.auth-form input:focus::placeholder {
  color: rgba(186, 230, 253, .88);
  opacity: .9;
}

.login-submit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px !important;
  border-radius: 16px !important;
  background-size: 220% 220% !important;
  box-shadow: 0 18px 40px rgba(14, 165, 233, .22), 0 0 0 1px rgba(255, 255, 255, .12) inset !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background-position .55s ease !important;
}

.login-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  background-position: 100% 50% !important;
  box-shadow: 0 24px 52px rgba(14, 165, 233, .28), 0 0 0 1px rgba(255, 255, 255, .2) inset !important;
}

.login-submit:active,
.login-submit.is-loading {
  transform: translateY(0) scale(.985);
}

.login-submit.ripple-active::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, .48);
  transform: translate(-50%, -50%) scale(1);
  animation: loginRipple .52s ease-out;
}

.login-submit.is-loading i {
  animation: loginSpinner .8s linear infinite;
}

.login-submit.is-loading i::before {
  content: "\f110";
}

.auth-links {
  align-items: center;
}

.auth-links a,
.auth-links span {
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.auth-links a:hover {
  transform: translateY(-1px);
}

.login-session-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(2, 6, 23, .42);
  backdrop-filter: blur(12px);
  transition: opacity .24s ease, visibility .24s ease;
}

.login-session-loader.is-active {
  opacity: 1;
  visibility: visible;
}

.login-session-loader-card {
  width: min(340px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 22px;
  color: #f8fafc;
  text-align: center;
  background: rgba(15, 23, 42, .82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  transform: translateY(10px) scale(.98);
  transition: transform .24s ease;
}

.login-session-loader.is-active .login-session-loader-card {
  transform: translateY(0) scale(1);
}

.login-session-loader img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 16px;
  filter: drop-shadow(0 12px 26px rgba(14, 165, 233, .24));
}

.login-session-loader span {
  color: rgba(203, 213, 225, .88);
}

.login-progress {
  width: 100%;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}

.login-progress em {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #22c55e, #38bdf8);
  animation: loginProgress 1.1s ease-in-out infinite;
}

@keyframes loginAuroraOne {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .52; }
  to { transform: translate3d(14vw, 9vh, 0) scale(1.12); opacity: .68; }
}

@keyframes loginAuroraTwo {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .46; }
  to { transform: translate3d(-12vw, -8vh, 0) scale(1.16); opacity: .62; }
}

@keyframes loginParticleFloat {
  from { transform: translate3d(0, 0, 0) scale(.92); opacity: calc(var(--particle-opacity) * .72); }
  to { transform: translate3d(18px, -32px, 0) scale(1.08); opacity: var(--particle-opacity); }
}

@keyframes loginCardEnter {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes loginBrandEnter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes loginLogoEnter {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loginBrandBreath {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
  50% { filter: drop-shadow(0 0 18px rgba(14, 165, 233, .08)); }
}

@keyframes loginLogoBreath {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(14, 165, 233, .18)); }
  50% { filter: drop-shadow(0 15px 32px rgba(14, 165, 233, .28)); }
}

@keyframes loginRipple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(28); }
}

@keyframes loginSpinner {
  to { transform: rotate(360deg); }
}

@keyframes loginProgress {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(245%); }
}

@media (max-width: 575.98px) {
  .auth-body {
    padding: 18px;
  }

  .auth-card {
    padding: 24px !important;
    border-radius: 22px !important;
  }

  .auth-links {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-body::before,
  .auth-body::after,
  .auth-particle-field span,
  .auth-card,
  .login-brand,
  .login-logo,
  .login-submit,
  .login-submit.ripple-active::after,
  .login-submit.is-loading i,
  .login-session-loader,
  .login-session-loader-card,
  .login-progress em {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* VIPLUSEC Enterprise Post-Login Splash */
.enterprise-splash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(14, 165, 233, .24), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(34, 197, 94, .18), transparent 32%),
    linear-gradient(135deg, #020617 0%, #061526 50%, #020617 100%);
  backdrop-filter: blur(18px);
  transition: opacity .42s ease, visibility .42s ease;
}

.enterprise-splash.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.enterprise-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.enterprise-splash-aurora {
  position: absolute;
  inset: -22%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(56, 189, 248, .32), transparent 32%),
    radial-gradient(circle at 70% 38%, rgba(14, 165, 233, .24), transparent 34%),
    radial-gradient(circle at 54% 72%, rgba(34, 197, 94, .2), transparent 36%);
  filter: blur(54px);
  opacity: .82;
  animation: splashAurora 2.8s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.enterprise-splash-card {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 28px;
  color: #f8fafc;
  text-align: center;
  background: linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .68));
  box-shadow: 0 36px 110px rgba(0, 0, 0, .44), 0 0 0 1px rgba(56, 189, 248, .08) inset;
  backdrop-filter: blur(24px) saturate(1.14);
  animation: splashCardIn .62s cubic-bezier(.2, .82, .2, 1) both;
  will-change: transform, opacity, filter;
}

.enterprise-splash-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center;
  border: 0;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  filter: drop-shadow(0 18px 40px rgba(14, 165, 233, .26));
  animation: splashLogoIn .7s cubic-bezier(.2, .82, .2, 1) both, splashLogoBreath 2.4s ease-in-out .7s infinite;
}

.enterprise-splash-card strong {
  margin-top: 6px;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.25;
}

.enterprise-splash-card span {
  min-height: 22px;
  color: rgba(203, 213, 225, .9);
  font-size: .95rem;
  transform: translateZ(0);
  transition: opacity .2s ease, transform .2s ease;
}

.enterprise-splash-card span.is-changing {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

.enterprise-splash-progress {
  width: min(310px, 100%);
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.enterprise-splash-progress em {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #22c55e);
  box-shadow: 0 0 24px rgba(34, 211, 238, .26);
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
}

.main.splash-entering {
  animation: dashboardSoftEnter .48s ease both;
}

@keyframes splashAurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); opacity: .9; }
}

@keyframes splashCardIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes splashLogoBreath {
  0%, 100% { filter: drop-shadow(0 18px 40px rgba(14, 165, 233, .22)); transform: scale(1); }
  50% { filter: drop-shadow(0 22px 52px rgba(14, 165, 233, .34)); transform: scale(1.018); }
}

@keyframes dashboardSoftEnter {
  from { opacity: .35; filter: blur(8px); transform: translate3d(0, 8px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@media (max-width: 575.98px) {
  .enterprise-splash-card {
    border-radius: 24px;
  }

  .enterprise-splash-card img {
    width: 82px;
    height: 82px;
    border-radius: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enterprise-splash,
  .enterprise-splash-aurora,
  .enterprise-splash-card,
  .enterprise-splash-card img,
  .enterprise-splash-card span,
  .enterprise-splash-progress em,
  .main.splash-entering {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* VIPLUSEC Official 512 Identity Override */
.login-logo {
  width: 72px !important;
  height: 72px !important;
  flex-basis: 72px !important;
}

.brand-logo {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
  border-radius: 12px;
}

.mobile-topbar-brand img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px;
}

.loading-state img,
.login-session-loader img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 22px;
}

.enterprise-splash-card img {
  width: 110px !important;
  height: 110px !important;
  border-radius: 28px;
}

.footer-wordmark,
.admin-brand-card img,
.company-logo-card img,
.quote-brand img,
.enterprise-label img {
  object-fit: cover;
  object-position: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 22px rgba(14, 165, 233, .16));
}

.footer-wordmark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

/* VIPLUSEC Enterprise Command Palette */
.command-trigger {
  gap: 7px;
}

.command-trigger span {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.viplusec-command-palette {
  align-items: flex-start;
  justify-content: center;
  padding: clamp(42px, 10vh, 96px) 18px 24px;
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(18px) saturate(1.12);
}

.viplusec-command-palette.is-open {
  animation: commandBackdropIn .18s ease both;
}

.viplusec-command-dialog {
  width: min(760px, 100%);
  max-width: 760px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .88), rgba(2, 6, 23, .78)) !important;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .46), 0 0 0 1px rgba(56, 189, 248, .08) inset;
  backdrop-filter: blur(26px) saturate(1.16);
  animation: commandDialogIn .22s cubic-bezier(.2, .82, .2, 1) both;
}

[data-theme="light"] .viplusec-command-dialog {
  background: rgba(255, 255, 255, .94) !important;
}

.viplusec-command-head {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 18px 20px;
}

.viplusec-command-head > i {
  color: #38bdf8;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, .24));
}

.viplusec-command-head input {
  min-height: 42px;
  font-size: 1.02rem;
}

.viplusec-command-head input::placeholder {
  color: var(--text-muted);
  transition: opacity .2s ease;
}

.viplusec-command-kbd {
  border-color: rgba(56, 189, 248, .26);
  color: var(--text-secondary);
  background: rgba(56, 189, 248, .08);
}

.viplusec-command-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 800;
}

.viplusec-command-list {
  gap: 12px;
  padding: 14px;
}

.viplusec-command-group {
  display: grid;
  gap: 6px;
}

.viplusec-command-group h3 {
  margin: 8px 8px 3px;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.viplusec-command-item {
  width: 100%;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.viplusec-command-item i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .1);
}

.viplusec-command-item strong {
  color: var(--text-primary);
  font-size: .96rem;
}

.viplusec-command-item small {
  margin-top: 2px;
  color: var(--text-muted);
}

.viplusec-command-item em {
  justify-self: end;
  min-width: 48px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(148, 163, 184, .1);
  font-size: .68rem;
  font-style: normal;
  text-align: center;
}

.viplusec-command-item:hover,
.viplusec-command-item.is-active {
  border-color: rgba(56, 189, 248, .28);
  background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(34, 197, 94, .08));
  box-shadow: 0 16px 36px rgba(14, 165, 233, .12);
  transform: translate3d(2px, -1px, 0);
}

.viplusec-command-empty {
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(148, 163, 184, .08);
}

@keyframes commandBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes commandDialogIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (max-width: 991.98px) {
  .viplusec-command-dialog {
    width: 92%;
    max-width: 92%;
  }
}

@media (max-width: 575.98px) {
  .command-trigger span {
    display: none;
  }

  .viplusec-command-palette {
    padding: max(22px, env(safe-area-inset-top)) 10px 14px;
  }

  .viplusec-command-dialog {
    width: 95%;
    max-width: 95%;
    border-radius: 20px;
  }

  .viplusec-command-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .viplusec-command-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .viplusec-command-item em {
    display: none;
  }
}

/* VIPLUSEC Enterprise Notification Sound System */
.topbar-actions {
  position: relative;
}

.notification-btn[data-notification-toggle] {
  overflow: visible;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.notification-btn[data-notification-toggle]:hover,
.notification-btn[data-notification-toggle][aria-expanded="true"] {
  border-color: rgba(56, 189, 248, .34);
  background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(34, 197, 94, .08));
  box-shadow: 0 14px 30px rgba(14, 165, 233, .16);
  transform: translateY(-1px);
}

.notification-btn [data-notification-badge] {
  border: 2px solid color-mix(in srgb, var(--bg2) 86%, transparent);
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.notification-btn [data-notification-badge].is-empty {
  display: none;
}

.enterprise-notification-center {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1450;
  width: min(430px, calc(100vw - 24px));
  max-height: min(72vh, 680px);
  overflow: hidden;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .18), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .9));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(56, 189, 248, .08) inset;
  backdrop-filter: blur(22px) saturate(1.12);
  transform-origin: top right;
}

.enterprise-notification-center.is-open {
  display: grid;
  animation: notificationPanelIn .18s cubic-bezier(.2, .82, .2, 1) both;
}

[data-theme="light"] .enterprise-notification-center {
  background:
    radial-gradient(circle at 18% 0%, rgba(14, 165, 233, .16), transparent 34%),
    rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .18), 0 0 0 1px rgba(14, 165, 233, .08) inset;
}

.notification-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.notification-center-header span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-weight: 900;
}

.notification-center-header i {
  color: #38bdf8;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, .28));
}

.notification-center-header small {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 800;
}

.notification-sound-panel {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(148, 163, 184, .06);
}

.sound-center-panel {
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.sound-center-title {
  display: grid;
  gap: 2px;
  grid-column: 1 / -1;
}

.sound-center-title span {
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sound-center-title strong {
  color: var(--text-primary);
  font-size: .96rem;
}

.sound-switch,
.sound-volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
}

.sound-switch input {
  accent-color: #0ea5e9;
}

.sound-volume input {
  width: 100%;
  min-width: 104px;
  accent-color: #0ea5e9;
}

.sound-pack-select {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(15, 23, 42, .42);
  color: var(--text-primary);
  padding: 0 12px;
  font-weight: 800;
  outline: 0;
}

[data-theme="light"] .sound-pack-select {
  background: rgba(255, 255, 255, .88);
}

.sound-chip,
.notification-center-actions button,
.notification-center-actions a {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(56, 189, 248, .08);
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.sound-chip {
  padding: 0 12px;
}

.sound-chip:hover,
.sound-chip.is-active,
.notification-center-actions button:hover,
.notification-center-actions a:hover {
  border-color: rgba(56, 189, 248, .34);
  background: rgba(56, 189, 248, .16);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.sound-chip.is-active {
  border-color: rgba(248, 113, 113, .36);
  background: rgba(248, 113, 113, .13);
}

.sound-test-all {
  grid-column: span 1;
}

.sound-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  max-height: 220px;
  overflow: auto;
  padding: 4px 2px 2px;
}

.sound-library button {
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(15, 23, 42, .3);
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

[data-theme="light"] .sound-library button {
  background: rgba(248, 250, 252, .86);
}

.sound-library button i {
  color: #38bdf8;
}

.sound-library button:hover,
.sound-library button[aria-pressed="true"] {
  border-color: rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .12);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.sound-library button.is-disabled {
  opacity: .46;
  filter: grayscale(.25);
}

.notification-center-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 14px;
}

.notification-center-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  background: rgba(15, 23, 42, .34);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

[data-theme="light"] .notification-center-item {
  background: rgba(248, 250, 252, .78);
}

.notification-center-item:hover {
  border-color: rgba(56, 189, 248, .28);
  background: rgba(56, 189, 248, .1);
  transform: translateX(2px);
}

.notification-center-item > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .1);
}

.notification-center-item.success > i {
  color: #34d399;
  background: rgba(34, 197, 94, .12);
}

.notification-center-item.warning > i {
  color: #fbbf24;
  background: rgba(245, 158, 11, .13);
}

.notification-center-item strong,
.notification-center-item small {
  display: block;
}

.notification-center-item strong {
  color: var(--text-primary);
  font-weight: 900;
}

.notification-center-item small {
  margin-top: 2px;
  color: var(--text-muted);
  line-height: 1.4;
}

.notification-center-item em {
  color: var(--text-muted);
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
}

.notification-center-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.notification-center-actions button,
.notification-center-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
}

.enterprise-toast-stack {
  z-index: 1600;
}

.enterprise-toast {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-color: rgba(56, 189, 248, .24) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .9)) !important;
  color: var(--text-primary);
}

[data-theme="light"] .enterprise-toast {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .18);
}

.enterprise-toast > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .12);
}

.enterprise-toast.success > i { color: #34d399; background: rgba(34, 197, 94, .12); }
.enterprise-toast.warning > i { color: #fbbf24; background: rgba(245, 158, 11, .13); }
.enterprise-toast.error > i { color: #fb7185; background: rgba(244, 63, 94, .13); }
.enterprise-toast.critical > i { color: #f43f5e; background: rgba(244, 63, 94, .16); }
.enterprise-toast.message > i,
.enterprise-toast.aiReply > i { color: #60a5fa; background: rgba(59, 130, 246, .13); }
.enterprise-toast.aiComplete > i,
.enterprise-toast.aiListening > i { color: #22d3ee; background: rgba(34, 211, 238, .13); }
.enterprise-toast.sync > i,
.enterprise-toast.apiConnected > i,
.enterprise-toast.connectorConnected > i { color: #34d399; background: rgba(34, 197, 94, .12); }
.enterprise-toast.documentExported > i,
.enterprise-toast.reportGenerated > i,
.enterprise-toast.dashboardUpdated > i { color: #a78bfa; background: rgba(167, 139, 250, .13); }

.enterprise-toast strong,
.enterprise-toast small {
  display: block;
}

.enterprise-toast small {
  color: var(--text-muted);
  font-size: .74rem;
}

.enterprise-toast button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  background: rgba(148, 163, 184, .12);
  color: var(--text-muted);
  cursor: pointer;
}

.enterprise-toast em {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #22c55e);
  transform-origin: left;
  animation: toastProgress 3.6s linear both;
}

/* VIPLUSEC Enterprise Center Workspace */
body.enterprise-center-open {
  overflow: hidden;
}

.enterprise-center-workspace {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
  background: rgba(2, 6, 23, .68);
  backdrop-filter: blur(18px) saturate(1.08);
}

.enterprise-center-workspace.is-open {
  display: grid;
  animation: commandBackdropIn .18s ease both;
}

.enterprise-center-dialog {
  width: min(1180px, 100%);
  max-height: min(88vh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .16), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .92));
  box-shadow: 0 34px 120px rgba(0, 0, 0, .48), 0 0 0 1px rgba(56, 189, 248, .08) inset;
  backdrop-filter: blur(24px) saturate(1.12);
}

[data-theme="light"] .enterprise-center-dialog {
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .15), transparent 36%),
    rgba(255, 255, 255, .97);
  box-shadow: 0 34px 100px rgba(15, 23, 42, .2), 0 0 0 1px rgba(14, 165, 233, .08) inset;
}

.enterprise-center-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.enterprise-center-header h2,
.center-hero h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
}

.enterprise-center-header p,
.center-hero p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.enterprise-center-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
}

.enterprise-center-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 16px;
  border-right: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .2);
}

[data-theme="light"] .enterprise-center-tabs {
  background: rgba(248, 250, 252, .72);
}

.enterprise-center-tabs button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.enterprise-center-tabs button i {
  color: #38bdf8;
}

.enterprise-center-tabs button:hover,
.enterprise-center-tabs button.is-active {
  border-color: rgba(56, 189, 248, .3);
  background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(34, 197, 94, .08));
  color: var(--text-primary);
  transform: translateX(2px);
}

.enterprise-center-content {
  min-height: 0;
  overflow: auto;
  padding: clamp(16px, 2vw, 24px);
}

.enterprise-center-view {
  display: none;
  gap: 18px;
}

.enterprise-center-view.is-active {
  display: grid;
  animation: commandDialogIn .18s ease both;
}

.center-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 20px;
  background: rgba(148, 163, 184, .08);
}

.center-hero > i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .12);
  font-size: 1.2rem;
}

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

.center-card-grid > div,
.center-list > div {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(15, 23, 42, .28);
  padding: 16px;
}

[data-theme="light"] .center-card-grid > div,
[data-theme="light"] .center-list > div {
  background: rgba(248, 250, 252, .86);
}

.center-card-grid strong,
.center-list strong {
  display: block;
  color: var(--text-primary);
  font-weight: 900;
}

.center-card-grid span,
.center-list small {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.center-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.center-toolbar input {
  flex: 1 1 240px;
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(15, 23, 42, .28);
  color: var(--text-primary);
  padding: 0 14px;
}

[data-theme="light"] .center-toolbar input {
  background: rgba(255, 255, 255, .92);
}

.center-toolbar button,
.center-toggle-list button {
  min-height: 44px;
  border: 1px solid rgba(56, 189, 248, .24);
  border-radius: 14px;
  background: rgba(56, 189, 248, .1);
  color: var(--text-primary);
  font-weight: 900;
  cursor: pointer;
}

.center-list,
.center-toggle-list {
  display: grid;
  gap: 12px;
}

.center-list > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.center-list i {
  color: #38bdf8;
}

.center-list em {
  color: var(--text-muted);
  font-size: .74rem;
  font-style: normal;
  font-weight: 900;
}

.sound-center-panel.standalone {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(56, 189, 248, .12), transparent 34%),
    rgba(148, 163, 184, .08);
}

.nav-group[data-enterprise-center-nav] .nav-accordion span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@keyframes notificationPanelIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 991.98px) {
  .enterprise-notification-center {
    position: fixed;
    top: max(76px, calc(58px + env(safe-area-inset-top)));
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 96px);
  }

  .enterprise-center-workspace {
    padding: 10px;
  }

  .enterprise-center-dialog {
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
  }

  .enterprise-center-layout {
    grid-template-columns: 1fr;
  }

  .enterprise-center-tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
  }

  .enterprise-center-tabs button:hover,
  .enterprise-center-tabs button.is-active {
    transform: translateY(-1px);
  }
}

@media (max-width: 575.98px) {
  .notification-sound-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sound-library {
    grid-template-columns: 1fr;
    max-height: 260px;
  }

  .enterprise-center-header {
    padding: 16px;
  }

  .enterprise-center-header p {
    font-size: .88rem;
  }

  .enterprise-center-tabs {
    grid-auto-columns: minmax(150px, 76vw);
    padding: 12px;
  }

  .enterprise-center-content {
    padding: 14px;
  }

  .center-hero,
  .center-list > div {
    grid-template-columns: 1fr;
  }

  .center-card-grid {
    grid-template-columns: 1fr;
  }

  .notification-center-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .notification-center-item em {
    grid-column: 2;
  }

  .notification-center-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-center-actions button,
  .notification-center-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viplusec-command-palette,
  .viplusec-command-dialog,
  .viplusec-command-item,
  .enterprise-notification-center,
  .enterprise-center-workspace,
  .enterprise-center-dialog,
  .enterprise-center-view,
  .enterprise-center-tabs button,
  .notification-center-item,
  .notification-btn[data-notification-toggle],
  .enterprise-toast,
  .enterprise-toast em {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

@media screen and (max-width: 575.98px) {
  .enterprise-toast {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .enterprise-toast-controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.ai-center-hero .ai-center-hero-copy > .eyebrow {
  color: #7dd3fc !important;
}

.ai-markdown-table {
  max-width: 100%;
  margin: 10px 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.ai-markdown-table table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
}

.ai-markdown-table th,
.ai-markdown-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary, #e2e8f0);
  text-align: left;
}

.ai-markdown-table th {
  background: rgba(14, 165, 233, .12);
  color: #7dd3fc;
  font-size: 11px;
}

[data-theme="light"] .ai-markdown-table th,
[data-theme="light"] .ai-markdown-table td {
  color: #0f172a;
}

/* Enterprise Hub architecture */
.sidebar-profile-link {
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  padding: 4px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.sidebar-profile-link:hover,
.sidebar-profile-link:focus-visible {
  background: rgba(56, 189, 248, .1);
  color: inherit;
  transform: translateY(-1px);
}

.sidebar-profile-link:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.sidebar-profile-arrow {
  justify-self: end;
  color: var(--text-muted);
  font-size: .72rem;
}

.hub-navigation {
  display: grid;
  gap: 7px;
}

.hub-nav-group {
  min-width: 0;
}

.hub-nav-toggle {
  min-height: 38px;
  padding: 8px 10px !important;
  font-size: .73rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hub-nav-panel {
  gap: 3px;
  padding: 4px 0 3px !important;
}

.hub-nav-link {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  font-size: .79rem !important;
  font-weight: 750 !important;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.hub-nav-link > i:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .09);
}

.hub-nav-link > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-nav-arrow {
  color: var(--text-muted);
  font-size: .62rem;
  opacity: .58;
}

.hub-nav-link:hover,
.hub-nav-link:focus-visible,
.hub-nav-link.active {
  border-color: rgba(56, 189, 248, .22) !important;
  background: linear-gradient(110deg, rgba(56, 189, 248, .13), rgba(34, 197, 94, .05)) !important;
  color: var(--text-primary) !important;
  transform: translateX(2px);
}

.hub-nav-link.active > i:first-child {
  color: #e0f2fe;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  box-shadow: 0 6px 18px rgba(14, 165, 233, .24);
}

[data-theme="light"] .hub-nav-link {
  color: #334155 !important;
}

[data-theme="light"] .hub-nav-link:hover,
[data-theme="light"] .hub-nav-link:focus-visible,
[data-theme="light"] .hub-nav-link.active {
  color: #0f172a !important;
  background: linear-gradient(110deg, rgba(14, 165, 233, .11), rgba(34, 197, 94, .05)) !important;
}

/* Personal preferences live in Profile Hub, not Enterprise Center. */
.enterprise-center-tabs :is(
  [data-enterprise-center-tab="notifications"],
  [data-enterprise-center-tab="sound"],
  [data-enterprise-center-tab="ux"],
  [data-enterprise-center-tab="appearance"],
  [data-enterprise-center-tab="accessibility"]
),
.enterprise-center-content :is(
  [data-enterprise-center-view="notifications"],
  [data-enterprise-center-view="sound"],
  [data-enterprise-center-view="ux"],
  [data-enterprise-center-view="appearance"],
  [data-enterprise-center-view="accessibility"]
) {
  display: none !important;
}

/* VIPLUSEC Profile Hub */
.profile-hub {
  --profile-surface: rgba(7, 22, 39, .72);
  --profile-surface-soft: rgba(148, 163, 184, .07);
  --profile-border: rgba(125, 211, 252, .17);
  display: grid;
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
}

[data-theme="light"] .profile-hub {
  --profile-surface: rgba(255, 255, 255, .9);
  --profile-surface-soft: rgba(241, 245, 249, .82);
  --profile-border: rgba(14, 116, 144, .18);
}

.profile-hub-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 154px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 83% 18%, rgba(34, 197, 94, .12), transparent 29%),
    linear-gradient(128deg, rgba(14, 165, 233, .15), var(--profile-surface) 52%, rgba(2, 6, 23, .65));
  box-shadow: var(--shadow-md);
}

.profile-hub-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #22d3ee, #22c55e);
}

[data-theme="light"] .profile-hub-hero {
  background: radial-gradient(circle at 83% 18%, rgba(34, 197, 94, .1), transparent 29%), linear-gradient(128deg, rgba(14, 165, 233, .1), rgba(255, 255, 255, .95));
}

.profile-hub-identity,
.profile-hub-status,
.profile-hub-card > div,
.profile-hub-status-list > div {
  display: flex;
  align-items: center;
}

.profile-hub-identity {
  min-width: 0;
  gap: 18px;
}

.profile-hub-avatar {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, .36);
  border-radius: 50%;
  background: linear-gradient(135deg, #0369a1, #0ea5e9 52%, #059669);
  box-shadow: 0 12px 34px rgba(14, 165, 233, .26);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
}

.profile-hub-identity h2 {
  margin: 5px 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.profile-hub-identity p,
.profile-hub-intro {
  margin: 0;
  color: var(--text-secondary);
}

.profile-hub-status {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.profile-hub-status > span,
.profile-hub-status > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, .3);
  color: var(--text-secondary);
  font-size: .76rem;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

[data-theme="light"] .profile-hub-status > span,
[data-theme="light"] .profile-hub-status > a {
  background: rgba(255, 255, 255, .72);
  color: #334155;
}

.profile-hub-status .is-online i {
  color: #34d399;
  font-size: .55rem;
}

.profile-hub-status form {
  margin: 0;
}

.profile-hub-logout {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(251, 113, 133, .35);
  border-radius: 8px;
  background: rgba(190, 24, 93, .13);
  color: #fecdd3;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}

[data-theme="light"] .profile-hub-logout {
  color: #9f1239;
  background: #fff1f2;
}

.profile-hub-layout {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.profile-hub-navigation {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.profile-hub-nav-heading {
  display: grid;
  gap: 3px;
  padding: 9px 10px 13px;
  border-bottom: 1px solid var(--profile-border);
}

.profile-hub-nav-heading span {
  color: #38bdf8;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-hub-nav-heading strong {
  color: var(--text-primary);
  font-size: .94rem;
}

.profile-hub-nav-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: .77rem;
  font-weight: 750;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.profile-hub-nav-item > i:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #38bdf8;
  background: rgba(56, 189, 248, .09);
}

.profile-hub-nav-item > i:last-child {
  color: var(--text-muted);
  font-size: .58rem;
}

.profile-hub-nav-item:hover,
.profile-hub-nav-item:focus-visible,
.profile-hub-nav-item.is-active {
  border-color: rgba(56, 189, 248, .22);
  background: rgba(56, 189, 248, .1);
  color: var(--text-primary);
  transform: translateX(2px);
}

.profile-hub-content,
.profile-hub-panel {
  min-width: 0;
}

.profile-hub-panel {
  animation: profileHubPanelIn .24s ease both;
}

.profile-hub-panel[hidden] {
  display: none !important;
}

@keyframes profileHubPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-hub-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.profile-hub-section-heading span {
  color: #38bdf8;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.profile-hub-section-heading h3 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.profile-hub-section-heading :is(a, em) {
  color: var(--text-secondary);
  font-size: .74rem;
  font-style: normal;
  font-weight: 750;
}

.profile-hub-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.profile-hub-kpis article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface);
}

.profile-hub-kpis article > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(56, 189, 248, .1);
  color: #38bdf8;
}

.profile-hub-kpis :is(small, strong) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hub-kpis small {
  color: var(--text-muted);
  font-size: .69rem;
}

.profile-hub-kpis strong {
  margin-top: 3px;
  color: var(--text-primary);
  font-size: .84rem;
}

.profile-hub-card-grid,
.profile-hub-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-hub-card,
.profile-hub-form-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface);
  box-shadow: var(--shadow-xs);
}

.profile-hub-card {
  display: grid;
  gap: 15px;
}

.profile-hub-card > div {
  align-items: flex-start;
  gap: 12px;
}

.profile-hub-card > div > i {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, .12);
}

.profile-hub-card :is(strong, small) {
  display: block;
}

.profile-hub-card strong,
.profile-hub-form-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: .91rem;
}

.profile-hub-card small {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: .75rem;
  line-height: 1.5;
}

.profile-hub-card > a {
  justify-self: start;
  color: #38bdf8;
  font-size: .74rem;
  font-weight: 850;
  text-decoration: none;
}

.profile-hub-form-card h4 {
  margin-bottom: 15px;
}

.profile-hub-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-hub-form > :is(button, .primary-btn) {
  justify-self: start;
}

.profile-hub-settings-form {
  margin-top: 16px;
}

.profile-hub-status-list,
.profile-hub-toggle-list {
  display: grid;
  gap: 9px;
}

.profile-hub-status-list > div {
  gap: 10px;
  min-height: 56px;
  padding: 10px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface-soft);
}

.profile-hub-status-list > div > i {
  width: 32px;
  color: #38bdf8;
  text-align: center;
}

.profile-hub-status-list > div > span {
  min-width: 0;
  flex: 1;
}

.profile-hub-status-list :is(strong, small) {
  display: block;
}

.profile-hub-status-list strong {
  color: var(--text-primary);
  font-size: .78rem;
}

.profile-hub-status-list small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: .7rem;
}

.profile-hub-status-list :is(em, a) {
  color: #34d399;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

.profile-hub-toggle-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface-soft);
}

.profile-hub-toggle-list :is(strong, small) {
  display: block;
}

.profile-hub-toggle-list strong {
  color: var(--text-primary);
  font-size: .78rem;
}

.profile-hub-toggle-list small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: .7rem;
}

.profile-hub-toggle-list input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  accent-color: #0ea5e9;
}

.profile-theme-options,
.profile-hub-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-theme-options button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--profile-border);
  border-radius: 8px;
  background: var(--profile-surface-soft);
  color: var(--text-secondary);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.profile-theme-options button:hover,
.profile-theme-options button:focus-visible,
.profile-theme-options button.is-active {
  border-color: rgba(56, 189, 248, .45);
  background: rgba(14, 165, 233, .14);
  color: var(--text-primary);
}

.profile-hub-select-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.profile-hub-related-centers {
  margin-top: 12px;
}

@media screen and (max-width: 1199.98px) {
  .profile-hub-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 991.98px) {
  .enterprise-tools-trigger {
    display: none !important;
  }

  .profile-hub-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-hub-status {
    justify-content: flex-start;
  }

  .profile-hub-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-hub-navigation {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .profile-hub-nav-heading {
    display: none;
  }

  .profile-hub-nav-item {
    flex: 0 0 auto;
    grid-template-columns: 28px auto;
    min-height: 42px;
    scroll-snap-align: start;
  }

  .profile-hub-nav-item > i:last-child {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .profile-hub {
    gap: 12px;
  }

  .profile-hub-hero {
    min-height: auto;
    padding: 18px;
  }

  .profile-hub-avatar {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    font-size: 1rem;
  }

  .profile-hub-status {
    width: 100%;
  }

  .profile-hub-status > span,
  .profile-hub-status > a,
  .profile-hub-status form,
  .profile-hub-logout {
    flex: 1 1 auto;
  }

  .profile-hub-logout {
    justify-content: center;
    width: 100%;
  }

  .profile-hub-kpis,
  .profile-hub-card-grid,
  .profile-hub-two-column,
  .profile-hub-form,
  .profile-theme-options,
  .profile-hub-select-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-hub-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-hub-card,
  .profile-hub-form-card {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-hub-panel,
  .profile-hub-nav-item,
  .hub-nav-link,
  .sidebar-profile-link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* VIPLUSEC Enterprise Update Center */
body.update-center-open {
  overflow: hidden;
}

.enterprise-splash-version {
  min-height: 0 !important;
  margin-top: -5px;
  color: #7dd3fc !important;
  font: 800 .7rem/1 var(--font-display);
  letter-spacing: 0;
}

.update-center-shell {
  position: fixed;
  inset: 0;
  z-index: 4700;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(14px) saturate(1.08);
  transition: opacity .22s ease, visibility .22s ease;
}

.update-center-shell.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.update-center-dialog {
  width: min(1080px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 8px;
  color: var(--text-primary, #e2e8f0);
  background:
    radial-gradient(circle at 96% 0%, rgba(14, 165, 233, .13), transparent 30%),
    linear-gradient(145deg, rgba(8, 21, 38, .98), rgba(2, 10, 22, .98));
  box-shadow: 0 36px 110px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .035);
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: transform .28s cubic-bezier(.2, .82, .2, 1), box-shadow .28s ease;
}

.update-center-shell.is-open .update-center-dialog {
  transform: translate3d(0, 0, 0) scale(1);
}

.update-center-shell.is-update-complete .update-center-dialog {
  box-shadow: 0 36px 110px rgba(0, 0, 0, .52), 0 0 0 2px rgba(34, 197, 94, .38), 0 0 48px rgba(34, 197, 94, .16);
}

.update-center-header,
.update-center-tabs {
  display: flex;
  align-items: center;
}

.update-center-header {
  justify-content: space-between;
  min-height: 84px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.update-center-brand,
.update-center-product,
.update-about-product {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

.update-center-brand img,
.update-center-product img,
.update-about-product img {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  object-fit: cover;
  background: transparent;
  filter: drop-shadow(0 10px 24px rgba(14, 165, 233, .24));
}

.update-center-brand img { border-radius: 15px; }
.update-center-product img { border-radius: 22px; }
.update-about-product img { border-radius: 20px; }

.update-center-brand span,
.update-center-product > div > span,
.update-center-section-title span {
  color: #7dd3fc;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.update-center-brand h2,
.update-center-product h3,
.update-center-section-title h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  letter-spacing: 0;
}

.update-center-brand h2 { font-size: 1.2rem; }
.update-center-product h3 { font-size: clamp(1.32rem, 2vw, 1.8rem); }
.update-center-product p { margin: 5px 0 0; color: #aebfd0; line-height: 1.5; }

.update-center-tabs {
  gap: 5px;
  padding: 7px 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 8, 23, .42);
  scrollbar-width: thin;
}

.update-center-tabs button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #aebfd0;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.update-center-tabs button:hover,
.update-center-tabs button:focus-visible,
.update-center-tabs button.is-active,
.update-center-tabs button[aria-selected="true"] {
  border-color: rgba(56, 189, 248, .28);
  color: #f8fafc;
  background: rgba(14, 165, 233, .13);
}

.update-center-tabs button:focus-visible,
.update-center-actions button:focus-visible,
.update-center-header button:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .34);
  outline-offset: 2px;
}

.update-center-content {
  max-height: calc(min(820px, 100vh - 48px) - 139px);
  padding: clamp(16px, 2vw, 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.update-center-view.is-active {
  animation: updateCenterViewIn .24s ease both;
}

.update-center-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr);
  align-items: center;
  gap: 18px;
  min-height: 142px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 16%, rgba(34, 197, 94, .12), transparent 32%),
    linear-gradient(135deg, rgba(14, 165, 233, .11), rgba(15, 23, 42, .45));
}

.update-center-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 15px;
  border: 1px solid rgba(34, 197, 94, .25);
  border-radius: 8px;
  background: rgba(34, 197, 94, .09);
}

.update-center-state > i { color: #4ade80; font-size: 1.5rem; }
.update-center-state span { display: grid; gap: 4px; }
.update-center-state strong { color: #ecfdf5; }
.update-center-state small { color: #b7d7c1; line-height: 1.4; }
.update-center-state.is-available { border-color: rgba(56, 189, 248, .32); background: rgba(14, 165, 233, .12); }
.update-center-state.is-available > i { color: #38bdf8; }

.update-center-metadata,
.update-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.update-center-metadata article,
.update-about-grid > article:not(.update-about-product) {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  min-height: 72px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(15, 23, 42, .56);
}

.update-center-metadata article > i,
.update-about-grid > article > i {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: #38bdf8;
  background: rgba(14, 165, 233, .12);
}

.update-center-metadata article span,
.update-about-grid article span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.update-center-metadata small,
.update-about-grid small { color: #94a3b8; font-size: .69rem; }
.update-center-metadata strong,
.update-about-grid strong { overflow-wrap: anywhere; color: #e2e8f0; font-size: .82rem; }

.update-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.update-center-actions button {
  min-height: 44px;
}

.update-center-actions button.is-loading i {
  animation: updateCenterSpin .85s linear infinite;
}

.update-center-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.update-center-section-title h3 { font-size: 1.25rem; }
.update-center-section-title em {
  padding: 6px 9px;
  border: 1px solid rgba(56, 189, 248, .25);
  border-radius: 6px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, .1);
  font-size: .75rem;
  font-style: normal;
  font-weight: 800;
}

.update-changelog { display: grid; gap: 12px; }
.update-release-card {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(15, 23, 42, .52);
}

.update-release-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.update-release-card > header div { display: grid; gap: 4px; }
.update-release-card > header span { color: #38bdf8; font-size: .72rem; font-weight: 850; }
.update-release-card h4 { margin: 0; color: #f8fafc; font-size: 1rem; }
.update-release-card time { color: #94a3b8; font-size: .76rem; white-space: nowrap; }
.update-release-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 15px; }
.update-release-grid section > strong { display: inline-flex; align-items: center; gap: 7px; color: #dbeafe; font-size: .78rem; }
.update-release-grid section > strong i { color: #38bdf8; }
.update-release-grid ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.update-release-grid li { position: relative; padding-left: 14px; color: #b9c7d6; font-size: .78rem; line-height: 1.55; }
.update-release-grid li::before { content: ""; position: absolute; top: .63em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }

.update-about-product {
  grid-column: 1 / -1;
  min-height: 116px;
  padding: 17px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, .11), rgba(15, 23, 42, .5));
}
.update-about-product > div { display: grid; gap: 5px; }
.update-about-product > div > strong { color: #f8fafc; font-size: 1.05rem; }
.update-about-product b { color: #7dd3fc; }

[data-theme="light"] .update-center-shell { background: rgba(15, 23, 42, .52); }
[data-theme="light"] .update-center-dialog { color: #334155; background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(241, 245, 249, .99)); }
[data-theme="light"] .update-center-tabs { background: #f8fafc; }
[data-theme="light"] .update-center-brand h2,
[data-theme="light"] .update-center-product h3,
[data-theme="light"] .update-center-section-title h3,
[data-theme="light"] .update-center-release h4,
[data-theme="light"] .update-release-card h4,
[data-theme="light"] .update-center-metadata strong,
[data-theme="light"] .update-about-grid strong,
[data-theme="light"] .update-about-product > div > strong { color: #0f172a; }
[data-theme="light"] .update-center-product p,
[data-theme="light"] .update-release-grid li { color: #475569; }
[data-theme="light"] .update-center-tabs button { color: #475569; }
[data-theme="light"] .update-center-tabs button:hover,
[data-theme="light"] .update-center-tabs button.is-active { color: #075985; }
[data-theme="light"] .update-center-hero,
[data-theme="light"] .update-about-product { background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(248, 250, 252, .96)); }
[data-theme="light"] .update-center-metadata article,
[data-theme="light"] .update-about-grid > article:not(.update-about-product),
[data-theme="light"] .update-release-card { background: #fff; }
[data-theme="light"] .update-center-state strong { color: #14532d; }
[data-theme="light"] .update-center-state small { color: #166534; }

@keyframes updateCenterViewIn {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes updateCenterSpin { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
  .update-center-shell { padding: 18px; }
  .update-center-dialog { width: min(760px, 100%); max-height: calc(100dvh - 36px); }
  .update-center-content { max-height: calc(100dvh - 175px); }
  .update-center-hero { grid-template-columns: minmax(0, 1fr); }
  .update-center-metadata,
  .update-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .update-center-shell { place-items: end center; padding: 0; }
  .update-center-dialog {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 8px 8px 0 0;
    transform: translate3d(0, 34px, 0);
  }
  .update-center-header { min-height: 72px; padding: 9px 12px; }
  .update-center-brand { gap: 10px; }
  .update-center-brand img { width: 48px; height: 48px; border-radius: 13px; }
  .update-center-brand h2 { font-size: 1rem; }
  .update-center-tabs { padding-inline: 10px; }
  .update-center-tabs button { min-height: 44px; }
  .update-center-content { max-height: calc(100dvh - 138px); padding: 12px; }
  .update-center-hero { min-height: 0; padding: 15px; }
  .update-center-product { align-items: flex-start; }
  .update-center-product img { width: 68px; height: 68px; border-radius: 18px; }
  .update-center-metadata,
  .update-about-grid,
  .update-release-grid { grid-template-columns: minmax(0, 1fr); }
  .update-center-actions button { flex: 1 1 100%; justify-content: center; width: 100%; }
  .update-center-section-title,
  .update-release-card > header { align-items: flex-start; flex-direction: column; }
  .update-about-product { align-items: flex-start; }
  .update-about-product img { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .update-center-shell,
  .update-center-dialog,
  .update-center-view,
  .update-center-actions button,
  .update-center-tabs button {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ERP Core Framework: shared data-master and CRUD surfaces. */
.erp-core-hero {
  min-height: 190px;
  margin-bottom: 16px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 197, 94, .16), transparent 30%),
    linear-gradient(132deg, rgba(14, 165, 233, .17), rgba(5, 15, 30, .92) 62%);
}

.erp-core-subnav { scrollbar-width: thin; }
.erp-core-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erp-core-kpis .metric-card { min-width: 0; border-radius: 8px; }
.erp-core-layout { align-items: start; }

.erp-core-resource-grid,
.erp-core-domain-grid,
.erp-core-integration-list,
.erp-core-health {
  display: grid;
  gap: 10px;
}

.erp-core-resource-grid,
.erp-core-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.erp-core-resource-grid > a,
.erp-core-domain-grid > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.erp-core-resource-grid > a:hover,
.erp-core-domain-grid > a:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-hover);
  background: var(--color-surface-hover);
}

.erp-core-resource-grid > a > i:first-child,
.erp-core-domain-grid > a > i:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, .13);
}

.erp-core-resource-grid span,
.erp-core-domain-grid span { display: grid; min-width: 0; gap: 4px; }
.erp-core-resource-grid strong,
.erp-core-domain-grid strong { color: var(--card-title); font-size: .84rem; }
.erp-core-resource-grid small,
.erp-core-domain-grid small { color: var(--card-secondary); font-size: .72rem; line-height: 1.45; }
.erp-core-resource-grid > a > i:last-child,
.erp-core-domain-grid > a > i:last-child { color: var(--card-secondary); font-size: .74rem; }

.erp-core-integration-list > div,
.erp-core-health > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
}

.erp-core-integration-list span,
.erp-core-health span { display: grid; min-width: 0; gap: 3px; }
.erp-core-integration-list strong,
.erp-core-health strong { color: var(--card-title); font-size: .8rem; }
.erp-core-integration-list small,
.erp-core-health small { color: var(--card-secondary); font-size: .7rem; }
.erp-core-integration-list b { color: #7dd3fc; font-family: var(--font-display); }
.erp-core-health > div { grid-template-columns: 30px minmax(0, 1fr) auto; }
.erp-core-health > div > i { color: #38bdf8; text-align: center; }

.erp-core-resource-top { align-items: start; }
.erp-core-resource-top > .comm-panel { min-height: 100%; }

/* Sales Center Enterprise */
.sales-subnav.comm-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 7px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.sales-subnav.comm-subnav a {
  flex: 0 0 auto;
  width: auto;
  min-height: 50px;
  padding: 10px 14px;
  white-space: nowrap;
  scroll-snap-align: start;
}

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

.sales-form-grid > label {
  min-width: 0;
}

.sales-form-grid .form-span-2 {
  grid-column: 1 / -1;
}

.sales-export-actions,
.sales-row-actions,
.sales-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sales-export-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sales-export-actions .secondary-btn {
  min-height: 38px;
  padding: 8px 11px;
}

.sales-row-actions {
  min-width: max-content;
}

.sales-row-actions form {
  margin: 0;
}

.sales-inline-form select {
  width: 112px;
  min-height: 38px;
  padding: 7px 28px 7px 9px;
}

.icon-action {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 7px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, .1);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.icon-action:hover,
.icon-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, .7);
  background: rgba(14, 165, 233, .2);
}

.icon-action.danger {
  border-color: rgba(248, 113, 113, .34);
  color: #fda4af;
  background: rgba(239, 68, 68, .1);
}

.sales-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sales-workflow article {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(56, 189, 248, .17);
  border-radius: 8px;
  background: rgba(15, 23, 42, .42);
}

.sales-workflow article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e0f2fe;
  background: #087ccf;
  font-weight: 800;
}

.sales-workflow article div {
  display: grid;
  min-width: 0;
}

.sales-workflow article small,
.sales-integration-list small,
.sales-document-assurance small,
.sales-policy-note small {
  color: var(--text-secondary, #94a3b8);
  line-height: 1.45;
}

.sales-workflow article b {
  color: #7dd3fc;
  font-size: 19px;
}

.sales-integration-list,
.sales-document-assurance {
  display: grid;
  gap: 10px;
}

.sales-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sales-integration-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(15, 23, 42, .32);
}

.sales-integration-list > div small {
  grid-column: 1 / -1;
}

.sales-document-assurance > div,
.sales-policy-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(15, 23, 42, .32);
}

.sales-document-assurance i,
.sales-policy-note > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, .14);
}

.sales-document-assurance span,
.sales-policy-note span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-policy-note {
  margin-top: 14px;
}

.sales-kpis .metric-card strong {
  overflow-wrap: anywhere;
}

[data-theme="light"] .sales-workflow article,
[data-theme="light"] .sales-integration-list > div,
[data-theme="light"] .sales-document-assurance > div,
[data-theme="light"] .sales-policy-note {
  border-color: rgba(15, 23, 42, .12);
  color: #0f172a;
  background: rgba(255, 255, 255, .76);
}

[data-theme="light"] .icon-action {
  color: #075985;
  background: rgba(14, 165, 233, .1);
}

@media (max-width: 1199px) {
  .sales-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sales-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sales-posture {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }

  .sales-posture span {
    min-height: 76px;
    padding: 10px 7px;
    font-size: 12px;
  }

  .sales-posture i {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .sales-form-grid,
  .sales-workflow,
  .sales-report-grid {
    grid-template-columns: 1fr;
  }

  .sales-form-grid .form-span-2 {
    grid-column: auto;
  }

  .sales-export-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .sales-export-actions .secondary-btn {
    flex: 0 0 auto;
  }

  .sales-inline-form {
    align-items: stretch;
  }

  .sales-inline-form select {
    width: min(150px, 42vw);
  }
}
.erp-core-capabilities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.erp-core-capabilities span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--card-description);
  background: var(--color-surface);
  font-size: .7rem;
  font-weight: 700;
}
.erp-core-capabilities i { color: #38bdf8; }

.erp-core-form-grid,
.erp-core-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erp-core-form-grid label,
.erp-core-settings-grid label { min-width: 0; }
.erp-core-form-grid label > span,
.erp-core-settings-grid label > span { color: var(--card-subtitle); }
.erp-core-form-grid em { color: var(--danger); font-style: normal; }
.erp-core-form-grid [data-field-error],
.erp-core-settings-grid [data-field-error] { min-height: 16px; color: var(--danger); }

.erp-core-filter { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, .45fr)) auto; }
.erp-core-filter input,
.erp-core-filter select { min-width: 0; }

.erp-core-row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.erp-core-row-actions form { display: inline-flex; margin: 0; }
.erp-core-select { width: 42px; text-align: center; }
.enterprise-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }

.erp-core-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.erp-core-pagination a {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
}
.erp-core-pagination a:hover,
.erp-core-pagination a.active { border-color: var(--primary); color: #fff; background: rgba(14, 165, 233, .2); }

.enterprise-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 210px;
  padding: 28px;
  text-align: center;
}
.enterprise-empty-state > i { color: #38bdf8; font-size: 1.8rem; }
.enterprise-empty-state strong { color: var(--card-title); }
.enterprise-empty-state p { max-width: 430px; margin: 0; color: var(--card-description); line-height: 1.6; }

.enterprise-loader { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.enterprise-drawer { position: fixed; inset: 0 0 0 auto; z-index: 1300; width: min(390px, 92vw); padding: 18px; background: var(--bg2); box-shadow: var(--shadow-xl); }
.enterprise-drawer > header { display: flex; align-items: center; justify-content: space-between; }
.comm-modal-card .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

[data-theme="light"] .erp-core-hero { background: linear-gradient(132deg, #e0f2fe, #f8fafc 58%, #dcfce7); }
[data-theme="light"] .erp-core-resource-grid > a,
[data-theme="light"] .erp-core-domain-grid > a,
[data-theme="light"] .erp-core-integration-list > div,
[data-theme="light"] .erp-core-health > div { background: #fff; }
[data-theme="light"] .erp-core-resource-grid > a > i:first-child,
[data-theme="light"] .erp-core-domain-grid > a > i:first-child { color: #0369a1; }
[data-theme="light"] .erp-core-integration-list b { color: #075985; }
[data-theme="light"] .erp-core-pagination a.active { color: #075985; background: #e0f2fe; }

@media (max-width: 1199.98px) {
  .erp-core-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-core-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-core-filter > button { width: 100%; }
}

@media (max-width: 767.98px) {
  .erp-core-kpis,
  .erp-core-resource-grid,
  .erp-core-domain-grid,
  .erp-core-form-grid,
  .erp-core-settings-grid,
  .erp-core-filter { grid-template-columns: minmax(0, 1fr); }
  .erp-core-hero { min-height: 0; }
  .erp-core-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-core-capabilities span { min-height: 38px; }
  .erp-core-row-actions .icon-btn { min-width: 40px; min-height: 40px; }
  .enterprise-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .enterprise-table table { min-width: 760px; }
}

@media (max-width: 575.98px) {
  .erp-core-capabilities { grid-template-columns: minmax(0, 1fr); }
  .erp-core-integration-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .erp-core-integration-list > div .procurement-badge { grid-column: 1 / -1; justify-self: start; }
  .comm-modal-card .actions { flex-direction: column-reverse; }
  .comm-modal-card .actions button { width: 100%; }
}

/* Company Management Center */
.company-management-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  min-height: 190px; margin-bottom: 14px; padding: clamp(24px, 4vw, 44px);
  overflow: hidden; border: 1px solid var(--color-border); border-radius: 8px;
  background: linear-gradient(135deg, rgba(14,165,233,.14), transparent 48%), linear-gradient(315deg, rgba(16,185,129,.1), transparent 42%), var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.company-management-hero .eyebrow { color: #7dd3fc; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.company-management-hero h1 { max-width: 780px; margin: 8px 0; color: var(--card-title); font-size: clamp(1.55rem, 2.4vw, 2.35rem); line-height: 1.08; }
.company-management-hero p { max-width: 760px; margin: 0; color: var(--card-description); line-height: 1.65; }
.company-management-hero aside {
  display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 14px;
  border: 1px solid var(--color-border); border-radius: 7px;
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
}
.company-management-hero aside > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; color: #6ee7b7; background: rgba(16,185,129,.12); }
.company-management-hero aside span { display: grid; gap: 3px; min-width: 0; }
.company-management-hero aside small { color: var(--card-secondary); font-size: .68rem; }
.company-management-hero aside strong { overflow: hidden; color: var(--card-title); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.company-management-nav {
  display: flex; gap: 6px; margin-bottom: 18px; padding: 7px; overflow-x: auto;
  border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); scrollbar-width: thin;
}
.company-management-nav a {
  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; min-height: 40px; padding: 8px 11px;
  border-radius: 6px; color: var(--card-secondary); font-size: .74rem; font-weight: 700; text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.company-management-nav a:hover { color: var(--card-title); background: var(--color-surface-hover); transform: translateY(-1px); }
.company-management-nav a.active { color: #e0f2fe; background: #075985; }
.company-management-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 16px; }
.company-management-main, .company-management-side, .company-profile-form { display: grid; align-content: start; gap: 16px; }
.company-management-form-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 16px; margin-bottom: 16px; }
.company-management-form-layout > .comm-panel { min-width: 0; }
.company-structure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.company-structure-grid > a {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 72px; padding: 12px;
  border: 1px solid var(--color-border); border-radius: 7px; color: var(--card-title);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent); text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.company-structure-grid > a:hover { transform: translateY(-2px); border-color: var(--color-border-hover); background: var(--color-surface-hover); }
.company-structure-grid > a > i:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; color: #7dd3fc; background: rgba(14,165,233,.12); }
.company-structure-grid > a > i:last-child { color: var(--card-secondary); font-size: .72rem; }
.company-structure-grid span { display: grid; gap: 4px; min-width: 0; }
.company-structure-grid strong { font-size: .82rem; }
.company-structure-grid small { color: var(--card-secondary); font-size: .7rem; }
.company-profile-summary { display: grid; gap: 0; margin: 0 0 14px; }
.company-profile-summary > div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.company-profile-summary dt { color: var(--card-secondary); font-size: .7rem; }
.company-profile-summary dd { margin: 0; color: var(--card-title); font-size: .76rem; font-weight: 700; overflow-wrap: anywhere; }
.full-width { width: 100%; }
.company-export-panel p { color: var(--card-description); line-height: 1.6; }
.company-row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.company-row-actions form { display: inline-flex; margin: 0; }
.table-subtitle { display: block; margin-top: 4px; color: var(--card-secondary); font-size: .68rem; }
.company-profile-form .comm-panel { min-width: 0; }
.company-profile-form .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.company-profile-save {
  position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: flex-end; padding: 12px;
  border: 1px solid var(--color-border); border-radius: 7px;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent); backdrop-filter: blur(12px);
}
.company-governance-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.company-governance-tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 13px;
  border: 1px solid var(--color-border); border-radius: 6px; color: var(--card-secondary);
  background: var(--color-surface); font-size: .75rem; font-weight: 700; text-decoration: none;
}
.company-governance-tabs a:hover, .company-governance-tabs a.active { border-color: #0ea5e9; color: var(--card-title); background: rgba(14,165,233,.12); }
.company-governance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.company-governance-grid > article {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 70px; padding: 12px;
  border: 1px solid var(--color-border); border-radius: 7px; background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}
.company-governance-grid > article > i { color: #7dd3fc; text-align: center; font-size: 1.1rem; }
.company-governance-grid span { display: grid; gap: 4px; min-width: 0; }
.company-governance-grid strong { color: var(--card-title); font-size: .78rem; overflow-wrap: anywhere; }
.company-governance-grid small { color: var(--card-secondary); font-size: .68rem; }
.company-governance-grid form { margin: 0; }
.span-two { grid-column: span 2; }
[data-theme="light"] .company-management-hero { background: linear-gradient(135deg,#e0f2fe,#fff 52%,#ecfdf5); }
[data-theme="light"] .company-management-hero .eyebrow { color: #075985; }
[data-theme="light"] .company-management-hero aside,
[data-theme="light"] .company-structure-grid > a,
[data-theme="light"] .company-governance-grid > article { background: #fff; }
@media (max-width:1199.98px) {
  .company-management-grid { grid-template-columns: minmax(0,1fr); }
  .company-management-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-profile-form .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  .company-management-hero { align-items: stretch; flex-direction: column; min-height: 0; }
  .company-management-hero aside { min-width: 0; width: 100%; }
  .company-management-form-layout { grid-template-columns: minmax(0,1fr); }
  .company-management-nav a { min-height: 44px; }
}
@media (max-width:767.98px) {
  .company-management-hero { padding: 22px; }
  .company-management-side, .company-structure-grid, .company-governance-grid, .company-profile-form .form-grid { grid-template-columns: minmax(0,1fr); }
  .company-profile-save { bottom: 8px; }
  .company-profile-save .primary-btn { width: 100%; }
  .company-row-actions .icon-btn { min-width: 42px; min-height: 42px; }
  .span-two { grid-column: auto; }
}
@media (max-width:575.98px) {
  .company-management-hero h1 { font-size: 1.45rem; }
  .company-governance-tabs { display: grid; grid-template-columns: minmax(0,1fr); }
  .company-governance-tabs a { width: 100%; }
  .company-governance-grid > article { grid-template-columns: 34px minmax(0,1fr) auto; }
  .company-governance-grid > article .procurement-badge { grid-column: 2; justify-self: start; }
  .company-profile-summary > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

/* Product & Catalog Center */
.product-catalog-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  min-height: 188px; margin-bottom: 14px; padding: clamp(24px,4vw,44px);
  overflow: hidden; border: 1px solid var(--color-border); border-radius: 8px;
  background: linear-gradient(135deg,rgba(14,165,233,.14),transparent 48%), linear-gradient(315deg,rgba(34,197,94,.1),transparent 44%), var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.product-catalog-hero .eyebrow { color:#7dd3fc; font-size:.68rem; font-weight:800; letter-spacing:.08em; }
.product-catalog-hero h1 { max-width:820px; margin:8px 0; color:var(--card-title); font-size:clamp(1.55rem,2.4vw,2.35rem); line-height:1.08; }
.product-catalog-hero p { max-width:780px; margin:0; color:var(--card-description); line-height:1.65; }
.product-catalog-hero aside {
  display:flex; align-items:center; gap:12px; min-width:230px; padding:14px;
  border:1px solid var(--color-border); border-radius:7px; background:color-mix(in srgb,var(--color-surface) 84%,transparent);
}
.product-catalog-hero aside > i { display:grid; place-items:center; width:42px; height:42px; border-radius:7px; color:#86efac; background:rgba(34,197,94,.12); }
.product-catalog-hero aside span { display:grid; gap:3px; min-width:0; }
.product-catalog-hero aside small { color:var(--card-secondary); font-size:.68rem; }
.product-catalog-hero aside strong { overflow:hidden; color:var(--card-title); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.product-catalog-nav {
  display:flex; gap:6px; margin-bottom:18px; padding:7px; overflow-x:auto;
  border:1px solid var(--color-border); border-radius:7px; background:var(--color-surface); scrollbar-width:thin;
}
.product-catalog-nav a {
  display:inline-flex; align-items:center; flex:0 0 auto; gap:7px; min-height:40px; padding:8px 11px;
  border-radius:6px; color:var(--card-secondary); font-size:.73rem; font-weight:700; text-decoration:none;
  transition:color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast);
}
.product-catalog-nav a:hover { color:var(--card-title); background:var(--color-surface-hover); transform:translateY(-1px); }
.product-catalog-nav a.active { color:#e0f2fe; background:#075985; }
.product-catalog-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:16px; }
.product-catalog-main,.product-catalog-side { display:grid; align-content:start; gap:16px; }
.catalog-domain-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.catalog-domain-grid > a {
  display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:70px; padding:12px;
  border:1px solid var(--color-border); border-radius:7px; color:var(--card-title); background:color-mix(in srgb,var(--color-surface) 82%,transparent);
  text-decoration:none; transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);
}
.catalog-domain-grid > a:hover { transform:translateY(-2px); border-color:var(--color-border-hover); background:var(--color-surface-hover); }
.catalog-domain-grid > a > i:first-child { display:grid; place-items:center; width:40px; height:40px; border-radius:7px; color:#7dd3fc; background:rgba(14,165,233,.12); }
.catalog-domain-grid > a > i:last-child { color:var(--card-secondary); font-size:.7rem; }
.catalog-domain-grid span { display:grid; gap:4px; min-width:0; }
.catalog-domain-grid strong { font-size:.79rem; }
.catalog-domain-grid small { color:var(--card-secondary); font-size:.68rem; }
.catalog-ranking { display:grid; gap:8px; }
.catalog-ranking > div { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; padding:9px 10px; border:1px solid var(--color-border); border-radius:7px; }
.catalog-ranking b { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#bae6fd; background:rgba(14,165,233,.12); font-size:.7rem; }
.catalog-ranking span { display:grid; gap:3px; }
.catalog-ranking strong { color:var(--card-title); font-size:.76rem; }
.catalog-ranking small { color:var(--card-secondary); font-size:.66rem; }
.catalog-ranking em { color:#86efac; font-style:normal; font-weight:800; }
.catalog-health { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.catalog-health > div { display:grid; gap:5px; min-height:74px; padding:12px; border:1px solid var(--color-border); border-radius:7px; background:color-mix(in srgb,var(--color-surface) 82%,transparent); }
.catalog-health span { color:var(--card-secondary); font-size:.68rem; }
.catalog-health strong { color:var(--card-title); font-family:var(--font-display); font-size:1.25rem; }
.catalog-note { color:var(--card-description); line-height:1.65; }
.catalog-editor-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr); align-items:start; gap:16px; margin-bottom:16px; }
.catalog-tools { position:sticky; top:84px; }
.catalog-form-section { margin-bottom:16px; padding-bottom:15px; border-bottom:1px solid var(--color-border); }
.catalog-form-section:last-of-type { border-bottom:0; }
.catalog-form-section h3,.catalog-import-layout h3 { margin:0 0 12px; color:var(--card-subtitle); font-size:.78rem; }
.catalog-form-section .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-ready-list { display:grid; gap:8px; margin-top:15px; }
.catalog-ready-list span { display:flex; align-items:center; gap:9px; min-height:42px; padding:9px 10px; border:1px solid var(--color-border); border-radius:6px; color:var(--card-description); font-size:.72rem; }
.catalog-ready-list i { width:20px; color:#38bdf8; text-align:center; }
.catalog-filter-bar {
  display:grid; grid-template-columns:minmax(220px,1fr) repeat(3,minmax(130px,.4fr)) auto auto;
  gap:8px; margin-bottom:14px;
}
.catalog-filter-bar.compact { grid-template-columns:minmax(220px,1fr) minmax(150px,.35fr) auto; }
.catalog-check { display:flex; align-items:center; gap:7px; min-height:42px; padding:0 10px; border:1px solid var(--color-border); border-radius:6px; color:var(--card-secondary); white-space:nowrap; }
.catalog-check input { width:17px; height:17px; accent-color:var(--primary); }
.catalog-table { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.catalog-table table { width:100%; min-width:900px; max-width:none; }
.catalog-product-cell { display:flex; align-items:center; gap:10px; min-width:220px; }
.catalog-product-cell > i { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:6px; color:#7dd3fc; background:rgba(14,165,233,.12); }
.catalog-product-cell span { display:grid; gap:4px; min-width:0; }
.catalog-product-cell strong { color:var(--card-title); }
.catalog-product-cell small { color:var(--card-secondary); font-size:.66rem; }
.catalog-row-actions { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.catalog-row-actions form { display:inline-flex; margin:0; }
.catalog-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:16px; }
.catalog-detail-main > header { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--color-border); }
.catalog-detail-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:8px; color:#7dd3fc; background:rgba(14,165,233,.12); font-size:1.4rem; }
.catalog-detail-main header span,.catalog-detail-main header p { color:var(--card-secondary); font-size:.7rem; }
.catalog-detail-main h2 { margin:4px 0; color:var(--card-title); font-size:1.25rem; }
.catalog-detail-main header p { margin:0; line-height:1.5; }
.catalog-detail-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:16px 0; }
.catalog-detail-kpis > div { display:grid; gap:5px; padding:12px; border:1px solid var(--color-border); border-radius:7px; }
.catalog-detail-kpis span { color:var(--card-secondary); font-size:.66rem; }
.catalog-detail-kpis strong { color:var(--card-title); font-size:1rem; }
.catalog-detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 16px; }
.catalog-detail-list > div { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid var(--color-border); }
.catalog-detail-list dt { color:var(--card-secondary); font-size:.68rem; }
.catalog-detail-list dd { margin:0; color:var(--card-description); font-size:.72rem; font-weight:700; overflow-wrap:anywhere; }
.catalog-price-grid,.catalog-asset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.catalog-price-grid > article,.catalog-asset-grid > article {
  display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:70px; padding:12px;
  border:1px solid var(--color-border); border-radius:7px; background:color-mix(in srgb,var(--color-surface) 82%,transparent);
}
.catalog-price-grid > article > i,.catalog-asset-grid > article > i { color:#7dd3fc; text-align:center; font-size:1rem; }
.catalog-price-grid span,.catalog-asset-grid span { display:grid; gap:4px; min-width:0; }
.catalog-price-grid strong,.catalog-asset-grid strong { color:var(--card-title); font-size:.77rem; }
.catalog-price-grid small,.catalog-asset-grid small { color:var(--card-secondary); font-size:.66rem; overflow-wrap:anywhere; }
.catalog-price-grid form,.catalog-asset-grid form { margin:0; }
.catalog-asset-tabs { display:flex; gap:8px; margin-bottom:16px; }
.catalog-asset-tabs a { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:9px 13px; border:1px solid var(--color-border); border-radius:6px; color:var(--card-secondary); background:var(--color-surface); font-size:.74rem; font-weight:700; text-decoration:none; }
.catalog-asset-tabs a.active,.catalog-asset-tabs a:hover { border-color:#0ea5e9; color:var(--card-title); background:rgba(14,165,233,.12); }
.catalog-import-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:16px; }
.catalog-import-stages { display:grid; gap:9px; }
.catalog-import-stages article { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid var(--color-border); border-radius:7px; }
.catalog-import-stages b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#bae6fd; background:rgba(14,165,233,.14); }
.catalog-import-stages span { display:grid; gap:4px; }
.catalog-import-stages strong { color:var(--card-title); font-size:.77rem; }
.catalog-import-stages small { color:var(--card-description); font-size:.68rem; line-height:1.45; }
.catalog-tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.catalog-tag-list span { padding:6px 8px; border:1px solid rgba(14,165,233,.28); border-radius:5px; color:#bae6fd; background:rgba(14,165,233,.1); font-size:.67rem; font-weight:700; }
.catalog-tag-list.muted span { border-color:var(--color-border); color:var(--card-secondary); background:var(--color-surface); }
[data-theme="light"] .product-catalog-hero { background:linear-gradient(135deg,#e0f2fe,#fff 54%,#ecfdf5); }
[data-theme="light"] .product-catalog-hero .eyebrow { color:#075985; }
[data-theme="light"] .product-catalog-hero aside,
[data-theme="light"] .catalog-domain-grid > a,
[data-theme="light"] .catalog-price-grid > article,
[data-theme="light"] .catalog-asset-grid > article { background:#fff; }
[data-theme="light"] .catalog-tag-list span { color:#075985; }
@media (max-width:1199.98px) {
  .product-catalog-layout,.catalog-detail-grid { grid-template-columns:minmax(0,1fr); }
  .product-catalog-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-domain-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-filter-bar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .catalog-detail-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  .product-catalog-hero { align-items:stretch; flex-direction:column; min-height:0; }
  .product-catalog-hero aside { min-width:0; width:100%; }
  .catalog-editor-grid,.catalog-import-layout { grid-template-columns:minmax(0,1fr); }
  .catalog-tools { position:static; }
  .catalog-form-section .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-catalog-nav a { min-height:44px; }
}
@media (max-width:767.98px) {
  .product-catalog-hero { padding:22px; }
  .product-catalog-side,.catalog-domain-grid,.catalog-price-grid,.catalog-asset-grid,.catalog-form-section .form-grid,.catalog-detail-list { grid-template-columns:minmax(0,1fr); }
  .catalog-filter-bar,.catalog-filter-bar.compact { grid-template-columns:minmax(0,1fr); }
  .catalog-detail-main > header { grid-template-columns:48px minmax(0,1fr); }
  .catalog-detail-main > header .procurement-badge { grid-column:2; justify-self:start; }
  .catalog-table table { min-width:0; }
  .catalog-table td[data-label]:not(.catalog-row-actions) {
    display:grid !important; grid-template-columns:minmax(82px,30%) minmax(0,1fr) !important; align-items:center; gap:10px;
  }
  .catalog-table td[data-label]::before { margin-bottom:0; }
  .catalog-table .catalog-row-actions { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px; }
  .catalog-table .catalog-row-actions::before { flex:0 0 100%; }
  .catalog-table .catalog-row-actions form { flex:0 0 42px; width:42px !important; min-width:42px !important; }
  .catalog-row-actions .icon-btn,
  .catalog-row-actions form .icon-btn { width:42px; min-width:42px; min-height:42px; }
}
@media (max-width:575.98px) {
  .product-catalog-hero h1 { font-size:1.45rem; }
  .catalog-health,.catalog-detail-kpis { grid-template-columns:minmax(0,1fr); }
  .catalog-detail-list > div { grid-template-columns:minmax(0,1fr); gap:4px; }
  .catalog-price-grid > article,.catalog-asset-grid > article { grid-template-columns:34px minmax(0,1fr) auto; }
  .catalog-price-grid .procurement-badge,.catalog-asset-grid .procurement-badge { grid-column:2; justify-self:start; }
  .catalog-asset-tabs { display:grid; grid-template-columns:minmax(0,1fr); }
  .catalog-asset-tabs a { width:100%; }
}

/* Inventory Center Enterprise completion */
.inventory-count-layout,
.inventory-trace-layout,
.inventory-import-layout {
  display:grid; grid-template-columns:minmax(320px,.42fr) minmax(0,1fr); align-items:start; gap:16px;
}
.inventory-count-form label,
.inventory-trace-layout label {
  display:grid; gap:6px; color:var(--card-secondary); font-size:.7rem; font-weight:700;
}
.inventory-count-warning {
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px;
  border:1px solid rgba(14,165,233,.26); border-radius:7px;
  color:var(--card-description); background:rgba(14,165,233,.08); font-size:.72rem; line-height:1.55;
}
.inventory-count-warning i { margin-top:2px; color:#38bdf8; }
.inventory-difference { color:#fda4af !important; font-weight:800; }
.inventory-trace-cards { align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); }
.inventory-import-stages,
.inventory-ready-list { display:grid; gap:9px; }
.inventory-import-stages article {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px;
  border:1px solid var(--color-border); border-radius:7px; background:color-mix(in srgb,var(--color-surface) 82%,transparent);
}
.inventory-import-stages b {
  display:grid; place-items:center; width:34px; height:34px; border-radius:7px;
  color:#bae6fd; background:rgba(14,165,233,.14);
}
.inventory-import-stages span { display:grid; gap:4px; min-width:0; }
.inventory-import-stages strong { color:var(--card-title); font-size:.78rem; }
.inventory-import-stages small { color:var(--card-description); font-size:.69rem; line-height:1.5; }
.inventory-ready-list span {
  display:flex; align-items:flex-start; gap:9px; min-height:42px; padding:10px;
  border:1px solid var(--color-border); border-radius:6px; color:var(--card-description); font-size:.72rem; line-height:1.5;
}
.inventory-ready-list i { margin-top:2px; color:#34d399; }
.inventory-kardex-filter {
  display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:8px; margin-bottom:16px;
}
.inventory-kardex-filter :is(.primary-btn,.secondary-btn) { width:100%; min-height:42px; }
[data-theme="light"] .inventory-import-stages article { background:#fff; }
[data-theme="light"] .inventory-difference { color:#be123c !important; }
@media (max-width:1199.98px) {
  .inventory-count-layout,.inventory-trace-layout,.inventory-import-layout { grid-template-columns:minmax(280px,.48fr) minmax(0,1fr); }
  .inventory-kardex-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  .inventory-count-layout,.inventory-trace-layout,.inventory-import-layout { grid-template-columns:minmax(0,1fr); }
  .inventory-trace-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-kardex-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-subnav {
    display:flex; gap:6px; padding:7px; overflow-x:auto; overscroll-behavior-inline:contain;
    border:1px solid var(--color-border); border-radius:7px; scrollbar-width:thin;
  }
  .inventory-subnav a { flex:0 0 auto; width:auto !important; min-height:44px; padding:8px 12px; }
}
@media (max-width:767.98px) {
  .inventory-trace-cards,.inventory-kardex-filter { grid-template-columns:minmax(0,1fr); }
  .inventory-import-stages article { grid-template-columns:34px minmax(0,1fr); }
  .inventory-import-stages .inventory-badge { grid-column:2; justify-self:start; }
  table.inventory-enterprise-table td[data-label] {
    grid-template-columns:minmax(84px,31%) minmax(0,1fr) !important; align-items:center; gap:10px;
  }
  table.inventory-enterprise-table td[data-label]::before { margin-bottom:0; }
}

/* Analytics BI: compact executive header and filters on handheld screens. */
@media (max-width:767.98px) {
  .analytics-hero {
    min-height:0;
    padding:18px !important;
  }
  .analytics-hero h1 {
    font-size:1.55rem;
  }
  .analytics-posture {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:64px;
    gap:8px;
  }
  .analytics-posture span {
    min-height:64px;
    padding:8px;
    font-size:.78rem;
  }
  .analytics-posture i {
    width:34px;
    height:34px;
    border-radius:7px;
  }
  .analytics-global-filter,
  .analytics-advanced-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* AI Enterprise Center */
.ai-enterprise-query-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:16px;
  align-items:start;
}
.ai-enterprise-query-form { display:grid; gap:10px; }
.ai-enterprise-query-form > label { color:var(--text-secondary); font-size:.78rem; font-weight:700; }
.ai-enterprise-query-form textarea {
  width:100%;
  min-height:128px;
  resize:vertical;
  border:1px solid var(--color-border);
  border-radius:8px;
  padding:14px;
  color:var(--text-primary);
  background:var(--input-bg);
  line-height:1.55;
}
.ai-enterprise-query-form textarea:focus {
  outline:3px solid rgba(14,165,233,.18);
  border-color:#38bdf8;
}
.ai-enterprise-query-form > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ai-enterprise-query-form small { color:var(--text-secondary); }
.ai-enterprise-query-form small i { margin-right:5px; color:#38bdf8; }
.ai-enterprise-answer { margin-top:16px; }
.ai-enterprise-answer > article {
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);
}
.ai-enterprise-answer header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--color-border);
}
.ai-enterprise-answer header span { display:grid; gap:3px; }
.ai-enterprise-answer header strong { color:var(--card-title); }
.ai-enterprise-answer header small,
.ai-enterprise-answer footer { color:var(--text-secondary); font-size:.76rem; }
.ai-enterprise-answer header em {
  padding:5px 8px;
  border-radius:6px;
  color:#7dd3fc;
  background:rgba(14,165,233,.14);
  font-size:.72rem;
  font-style:normal;
  font-weight:800;
}
.ai-enterprise-answer article > div { padding:16px; color:var(--text-primary); line-height:1.6; }
.ai-enterprise-answer article > div :is(h2,h3,h4) { margin:0 0 10px; color:var(--card-title); }
.ai-enterprise-answer article > div ul { margin:8px 0; padding-left:20px; }
.ai-enterprise-answer footer { padding:11px 14px; border-top:1px solid var(--color-border); }
.ai-query-suggestions { display:grid; gap:8px; }
.ai-query-suggestions button {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:100%;
  min-height:48px;
  border:1px solid var(--color-border);
  border-radius:7px;
  padding:8px 10px;
  color:var(--text-primary);
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.ai-query-suggestions button:hover {
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.42);
  background:rgba(14,165,233,.1);
}
.ai-query-suggestions i { color:#38bdf8; text-align:center; }
.ai-predictive-grid,
.ai-provider-enterprise-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.ai-predictive-grid article {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-width:0;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);
}
.ai-predictive-grid article > i {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:7px;
  color:#38bdf8;
  background:rgba(14,165,233,.12);
}
.ai-predictive-grid article div { display:grid; gap:3px; }
.ai-predictive-grid strong { color:var(--card-title); }
.ai-predictive-grid span { color:var(--text-secondary); font-size:.76rem; }
.ai-predictive-grid em {
  grid-column:2;
  color:#fbbf24;
  font-size:.72rem;
  font-style:normal;
  font-weight:700;
}
.ai-predictive-governance { margin-top:16px; }
.ai-provider-enterprise-grid { margin-bottom:16px; }
.ai-provider-enterprise-grid .ai-center-panel { min-width:0; }
.ai-provider-capabilities { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ai-provider-capabilities span {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:6px;
  color:var(--text-secondary);
  background:rgba(14,165,233,.09);
  font-size:.7rem;
}
.ai-provider-capabilities i { color:#34d399; }
.ai-provider-models { min-height:78px; margin-bottom:12px; }
.ai-provider-models strong { color:var(--card-title); font-size:.78rem; }
.ai-provider-models p { color:var(--text-secondary); line-height:1.5; }
.ai-provider-enterprise-grid button { width:100%; }
.ai-usage-bars { display:grid; gap:12px; }
.ai-usage-bars > div:not(.enterprise-empty-state) {
  display:grid;
  grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.ai-usage-bars span { display:grid; gap:2px; }
.ai-usage-bars strong { color:var(--card-title); }
.ai-usage-bars small { color:var(--text-secondary); }
.ai-usage-bars > div > i {
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.16);
}
.ai-usage-bars b {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0ea5e9,#22d3ee,#22c55e);
}
.ai-answer-meta { display:block; margin-top:10px; color:var(--text-secondary); }
.ai-enterprise-table table { width:100%; }
.ai-enterprise-table td { overflow-wrap:anywhere; }
.ai-recommendation-grid { display:grid; gap:12px; }

@media (max-width:1199.98px) {
  .ai-provider-enterprise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  .ai-enterprise-query-layout { grid-template-columns:minmax(0,1fr); }
  .ai-predictive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .ai-provider-enterprise-grid,
  .ai-predictive-grid { grid-template-columns:minmax(0,1fr); }
  .ai-enterprise-query-form > div {
    align-items:stretch;
    flex-direction:column;
  }
  .ai-enterprise-query-form .primary-btn { width:100%; min-height:46px; }
  .ai-usage-bars > div:not(.enterprise-empty-state) { grid-template-columns:minmax(0,1fr); }
  .ai-enterprise-answer header { align-items:flex-start; flex-direction:column; }
}