@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0c0f18;
  --sidebar: #10131e;
  --panel: #131722;
  --panel-alt: #171c29;
  --hover: #1d2232;
  --border: #252a38;
  --border-soft: #202532;
  --text: #e9eaf3;
  --secondary: #a1a6bc;
  --muted: #727a93;
  --purple: #a18bff;
  --purple-solid: #8a71ef;
  --purple-tint: rgba(145,116,255,.12);
  --cyan: #5ac9d7;
  --cyan-tint: rgba(67,193,210,.11);
  --green: #5bc9a0;
  --green-tint: rgba(68,192,148,.10);
  --amber: #d9b477;
  --amber-tint: rgba(219,175,100,.10);
  --red: #e98e9d;
  --red-tint: rgba(230,103,124,.10);
  --blue: #7da7ef;
  --blue-tint: rgba(99,147,229,.12);
  --orange: #e5ac67;
  --orange-tint: rgba(229,172,103,.10);
  --sidebar-width: 242px;
  --radius: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5fa; --sidebar: #fff; --panel: #fff; --panel-alt: #f7f8fc; --hover: #eef0f7;
  --border: #e0e3ef; --border-soft: #e9ebf3; --text: #22283b; --secondary: #606b83; --muted: #727c91;
  --purple: #7455d6; --purple-solid: #7a5de0; --cyan: #148594; --green: #238866; --amber: #9b692b; --red: #be425d; --blue: #3b72c2; --orange: #b67729;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 12px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button,input,select { font: inherit; }
button,a,input,select { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button { background: none; border: none; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
button,a,input,select { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--purple); }
input,select { color: var(--text); background: transparent; min-width: 0; }
input::placeholder { color: var(--muted); }
input:focus,select:focus { outline-color: var(--purple); }
select { cursor: pointer; }
select option { background: var(--panel); }
h1,h2,h3,p { margin: 0; }
svg { flex-shrink: 0; }
.lucide { width: 18px; height: 18px; vertical-align: middle; }
code,kbd { font-family: 'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-size: 11px; }
code { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 15px; top: -50px; background: var(--purple-solid); color: #fff; z-index: 100; padding: 10px; border-radius: 6px; }
.skip-link:focus { top: 12px; }

.sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; background: var(--sidebar); border-right: 1px solid var(--border); z-index: 40; display: flex; flex-direction: column; padding: 27px 15px 12px; overflow-y: auto; overflow-x: hidden; transition: width .22s ease,transform .22s ease; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 27px; white-space: nowrap; }
.brand-mark { width: 35px; height: 37px; background: linear-gradient(145deg,#a18aff,#7257dc); border: 1px solid #b39cf866; box-shadow: 0 3px 15px #8d6cf526; border-radius: 10px; display: grid; place-items: center; color: white; }
.brand-mark svg { width: 23px; height: 23px; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 19px; font-weight: 750; line-height: 1.3; letter-spacing: .5px; }
.brand-period { color: var(--purple); }
.brand-copy small { color: var(--muted); font-size: 7.5px; letter-spacing: 1.5px; font-weight: 500; margin-top: 4px; }
.workspace-selector { display: flex; align-items: center; padding: 11px 10px; margin: 0 0 27px; gap: 10px; width: 100%; border: 1px solid var(--border); background: var(--panel-alt); border-radius: 8px; text-align: left; }
.workspace-selector:hover { border-color: var(--muted); }
.workspace-icon { background: var(--purple-tint); color: var(--purple); width: 30px; height: 30px; border: 1px solid #9b80ed30; border-radius: 7px; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.workspace-selector .nav-text { flex: 1; }
.workspace-selector b { display: block; font-size: 10px; font-weight: 550; }
.workspace-selector small { color: var(--muted); font-size: 9px; display: block; }
.workspace-selector>svg { width: 13px; color: var(--muted); }
.nav-section-label { font-size: 8px; letter-spacing: 1.1px; color: var(--muted); font-weight: 550; padding: 0 12px 11px; white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; color: var(--secondary); padding: 11px 12px; border-radius: 7px; margin: 4px 0; font-size: 11px; position: relative; text-align: left; transition: background .15s,color .15s; white-space: nowrap; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item.active { color: #bdadff; background: linear-gradient(90deg,#8f70f62b,#8f70f615); }
[data-theme="light"] .nav-item.active { color: var(--purple); }
.nav-item.active:before { content: ''; position: absolute; left: -15px; top: 12px; bottom: 12px; background: var(--purple); width: 3px; border-radius: 0 4px 4px 0; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active:hover { background: var(--purple-tint); color: var(--purple); }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); margin-left: auto; opacity: .8; }
.sidebar-bottom { margin-top: auto; padding-top: 30px; }
.environment-panel { padding: 14px 13px; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(135deg,var(--purple-tint),transparent); margin-bottom: 20px; }
.environment-kicker { color: var(--purple); letter-spacing: .7px; font-size: 7px; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.environment-panel>b { display: block; font-size: 11px; margin-top: 10px; font-weight: 550; }
.environment-panel p { font-size: 9px; color: var(--muted); margin-top: 3px; }
.environment-line { display: flex; gap: 4px; margin: 13px 0 7px; }
.environment-line span { height: 3px; border-radius: 4px; flex: 1; background: var(--purple-solid); }
.environment-line span.pending { background: var(--border); }
.environment-panel>small { color: var(--muted); font-size: 8px; }
.trailing-icon { margin-left: auto; width: 13px!important; }
.collapse-button { display: flex; gap: 11px; width: 100%; padding: 15px 12px 5px; border-top: 1px solid var(--border); margin-top: 16px; color: var(--muted); font-size: 10px; text-align: left; }
.collapse-button:hover { color: var(--text); }
.collapsed { width: 76px; padding-left: 12px; padding-right: 12px; }
.collapsed .brand { padding-left: 8px; }
.collapsed .brand-copy,.collapsed .nav-text,.collapsed .nav-section-label,.collapsed .workspace-selector>svg,.collapsed .environment-panel,.collapsed .nav-dot,.collapsed .trailing-icon { display: none; }
.collapsed .workspace-selector { justify-content: center; padding: 10px 0; }
.collapsed .nav-item { justify-content: center; }
.collapsed .collapse-button { justify-content: center; }

.workspace { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left .22s ease; }
.workspace.sidebar-is-collapsed { margin-left: 76px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 31px; border-bottom: 1px solid var(--border); background: var(--bg); gap: 20px; }
.breadcrumb { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.breadcrumb>svg { width: 12px; height: 12px; }
.breadcrumb b { color: var(--secondary); font-weight: 450; }
.breadcrumb-icon { color: var(--secondary); display: flex; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.global-search { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.global-search svg { width: 15px; }
.global-search input { border: 0; width: 156px; font-size: 10px; padding: 6px 0; }
kbd { border: 1px solid var(--border); background: var(--panel); border-radius: 4px; font-size: 9px; padding: 0 5px; color: var(--muted); }
.icon-button { width: 31px; height: 31px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--secondary); flex-shrink: 0; }
.icon-button:hover { background: var(--hover); color: var(--text); }
.icon-button svg { width: 17px; height: 17px; }
.notification-button { position: relative; }
.notification-button>span { position: absolute; top: 4px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 2px var(--bg); }
.topbar-divider { height: 23px; width: 1px; background: var(--border); }
.avatar { width: 31px; height: 31px; border: 1px solid #ad91f544; border-radius: 50%; background: var(--purple-tint); color: var(--purple); font-weight: 600; font-size: 10px; display: inline-grid; place-items: center; }
.avatar:hover { border-color: var(--purple); }
.avatar.large { width: 60px; height: 60px; font-size: 20px; }
.mobile-menu { display: none; }
main { padding: 30px 31px 0; max-width: 1820px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { color: var(--muted); font-size: 8px; letter-spacing: 1.6px; font-weight: 600; margin-bottom: 7px; }
h1 { font-size: clamp(21px,1.85vw,29px); line-height: 1.4; font-weight: 600; letter-spacing: -.7px; }
.page-heading p { color: var(--muted); font-size: 10px; margin-top: 7px; }
.heading-actions { display: flex; gap: 9px; flex-shrink: 0; padding-top: 11px; }
.button,.mode-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--panel-alt); border-radius: 7px; padding: 9px 13px; color: var(--secondary); font-size: 10px; font-weight: 500; min-height: 36px; transition: background .15s,border-color .15s,transform .15s; }
.button:hover,.mode-button:hover { background: var(--hover); border-color: var(--muted); }
.button svg,.mode-button svg { width: 14px; height: 14px; }
.button.primary { background: var(--purple-solid); color: #fff; border-color: #a18aff4d; box-shadow: 0 3px 12px #7257dc17; }
.button.primary:hover { background: #9a80fa; border-color: #b6a0ff; }
.button:active { transform: translateY(1px); }
.mode-button { background: transparent; }
.mode-button>svg:first-child { color: var(--purple); }
.mode-button>svg:last-child { width: 11px; color: var(--muted); }
.full-width { width: 100%; }
.is-loading svg { animation: spin 1s linear infinite; }
.demo-banner { display: flex; gap: 12px; align-items: center; border: 1px solid #9677ec26; background: linear-gradient(90deg,#9374ed0d,#9374ed03); padding: 12px 16px; border-radius: 9px; margin-bottom: 25px; }
.banner-icon { width: 30px; height: 30px; display: grid; place-items: center; background: var(--purple-tint); border: 1px solid #9677ec20; border-radius: 7px; color: var(--purple); }
.banner-icon svg { width: 15px; }
.demo-banner>div { display: flex; flex-direction: column; gap: 2px; }
.demo-banner b { color: var(--secondary); font-size: 10px; font-weight: 500; }
.demo-banner div>span { font-size: 9px; color: var(--muted); }
.demo-banner>button { margin-left: auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--purple); font-size: 9px; }
.demo-banner>button:hover { color: var(--text); }
.demo-banner>button svg { width: 13px; }
.live-banner { border-color: #5ac9d733; }
.live-banner>.badge { margin-left: auto; }
.section-intro { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: var(--secondary); font-size: 10px; }
.section-intro>span,.section-intro>small { display: flex; gap: 7px; align-items: center; }
.section-intro>span>svg { width: 13px; color: var(--green); }
.section-intro>small { color: var(--muted); font-size: 9px; }
.section-intro>small svg { width: 12px; }
.subtle-dot { color: var(--muted); padding: 0 2px; }
.stats-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.stat-card { padding: 15px 15px 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; min-width: 0; position: relative; overflow: hidden; transition: border-color .2s,transform .2s; }
.stat-card:hover { border-color: #8071b95e; transform: translateY(-2px); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-bottom: 15px; }
.metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 8px; flex-shrink: 0; }
.metric-icon svg { width: 16px; height: 16px; }
.purple { color: var(--purple); }
.cyan { color: var(--cyan); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.blue { color: var(--blue); }
.orange { color: var(--orange); }
.muted { color: var(--muted); }
.metric-icon.purple,.event-icon.purple { background: var(--purple-tint); }
.metric-icon.cyan,.event-icon.cyan { background: var(--cyan-tint); }
.metric-icon.green,.event-icon.green { background: var(--green-tint); }
.metric-icon.blue,.event-icon.blue { background: var(--blue-tint); }
.metric-icon.amber { background: var(--amber-tint); }
.metric-icon.red { background: var(--red-tint); }
.metric-icon.orange { background: var(--orange-tint); }
.stat-source { color: var(--muted); font-size: 6px; letter-spacing: .5px; font-weight: 500; text-align: right; }
.stat-label { color: var(--secondary); font-size: 9px; white-space: nowrap; }
.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -.7px; margin: 4px 0 9px; height: 37px; display: flex; align-items: center; gap: 7px; }
.stat-value.status-value { font-size: 12px; font-weight: 550; letter-spacing: -.2px; }
.stat-value>small { font-size: 9px; font-weight: 400; letter-spacing: 0; color: var(--muted); align-self: flex-end; padding-bottom: 6px; margin-left: 0; }
.stat-detail { color: var(--muted); font-size: 7px; display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.stat-detail svg { width: 10px; height: 10px; }
.amber-text { color: var(--amber); }
.status-dot,.value-dot { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.value-dot { width: 6px; height: 6px; }
.badge { padding: 3px 7px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 450; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.badge.purple { background: var(--purple-tint); border-color: #9c7bea1c; }
.badge.green { background: var(--green-tint); border-color: #50cda31a; }
.badge.cyan { background: var(--cyan-tint); border-color: #50b8cd1a; }
.badge.amber { background: var(--amber-tint); border-color: #cda05020; }
.badge.red { background: var(--red-tint); border-color: #cd507f1a; }
.badge.muted { background: var(--hover); border-color: var(--border); }
.dashboard-middle { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-bottom: 20px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px 0; gap: 12px; }
.panel-header h2 { font-size: 12px; font-weight: 550; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.panel-header h2 svg { color: var(--purple); width: 17px; }
.panel-header p { color: var(--muted); font-size: 8px; margin-top: 3px; }
.text-link { color: var(--purple); display: inline-flex; align-items: center; gap: 5px; font-size: 8px; white-space: nowrap; }
.text-link svg { width: 12px; height: 12px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.panel-bottom { padding: 11px 19px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 8px; }
.topology-bottom { padding-top: 10px; padding-bottom: 10px; }
.topology-bottom>span:first-child { display: flex; gap: 5px; align-items: center; }
.topology-bottom svg { width: 11px; color: var(--green); }
.topology-bottom .badge { font-size: 7px; background: transparent; border: 0; }
.topology { position: relative; height: 420px; margin: 7px 20px 4px; }
.topology.compact { height: 235px; margin: 0 18px; }
.topology-grid-bg { position: absolute; inset: 4px 0; background-image: radial-gradient(var(--muted) .55px,transparent .55px); background-size: 15px 15px; opacity: .17; mask-image: linear-gradient(90deg,transparent,black 15%,black 85%,transparent); }
.topology-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.connection-line { stroke: #7f72af; stroke-width: 1.2px; fill: none; stroke-dasharray: 4 5; opacity: .6; }
.branch-line { stroke: var(--muted); stroke-width: 1px; fill: none; stroke-dasharray: 3 5; opacity: .35; }
.data-flow { stroke: var(--purple); stroke-width: 2px; stroke-dasharray: 4 130; fill: none; opacity: .45; animation: data-flow 8s linear infinite; }
.flow-running .data-flow { stroke: var(--cyan); animation-duration: 2s; opacity: 1; }
.topo-node.flow-active,.topo-endpoint .flow-active { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-tint),0 0 22px var(--cyan-tint); }
.topo-node { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 155px; padding: 16px 10px 11px; display: flex; align-items: center; flex-direction: column; border-radius: 11px; border: 1px solid var(--border); box-shadow: 0 5px 20px #0000001a; background: var(--panel); transition: border-color .2s,box-shadow .2s; z-index: 2; }
.topo-node:hover { border-color: currentColor; box-shadow: 0 0 20px #8871f714; }
.node-cloud { left: 20%; border-color: #c49a5e45; background: linear-gradient(150deg,var(--orange-tint),var(--panel) 75%); }
.node-vpn { left: 50%; border-color: #9b80ed45; background: linear-gradient(150deg,var(--purple-tint),var(--panel) 75%); }
.node-prem { left: 80%; border-color: #5bb0bd45; background: linear-gradient(150deg,var(--cyan-tint),var(--panel) 75%); }
.topo-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid currentColor; background: var(--panel); }
.topo-icon svg { width: 23px; height: 23px; }
.topo-node b { font-size: 12px; font-weight: 550; color: var(--text); }
.topo-node>small { font-size: 9px; color: var(--muted); margin-top: 3px; }
.topo-node>code { font-size: 10px; color: var(--secondary); margin-top: 8px; }
.node-state { color: var(--muted); font-size: 8px; display: flex; gap: 5px; align-items: center; border-top: 1px solid var(--border-soft); width: 100%; justify-content: center; margin-top: 10px; padding-top: 8px; }
.compact .topo-node { width: 119px; padding: 11px 5px 8px; border-radius: 8px; }
.compact .topo-icon { width: 29px; height: 29px; border: 0; background: transparent; margin-bottom: 2px; }
.compact .topo-icon svg { width: 24px; height: 24px; }
.compact .topo-node b { font-size: 10px; }
.compact .topo-node>small { font-size: 7px; }
.compact .topo-node>code { font-size: 8px; margin-top: 5px; }
.compact .node-state { font-size: 6px; margin-top: 6px; padding-top: 6px; }
.compact .node-state i { width: 3px; height: 3px; }
.topo-endpoint { position: absolute; transform: translate(-50%,-50%); z-index: 2; width: 190px; text-align: center; }
.topo-endpoint button { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 9px; color: var(--secondary); padding: 7px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.topo-endpoint button:hover { color: var(--purple); border-color: var(--purple); }
.topo-endpoint svg { width: 13px; height: 13px; }
.endpoint-user { top: 15%; left: 20%; }
.endpoint-api { top: 15%; left: 80%; }
.endpoint-s3 { top: 87%; left: 20%; }
.endpoint-db { top: 87%; left: 80%; }
.endpoint-status { width: 100%; color: var(--muted); font-size: 7px; }
.compact .topo-endpoint { width: 150px; }
.compact .topo-endpoint button { font-size: 7px; padding: 4px 5px; gap: 4px; background: var(--panel); border-color: transparent; }
.compact .topo-endpoint svg { width: 10px; height: 10px; }
.compact .endpoint-status { display: none; }
.compact .endpoint-user,.compact .endpoint-api { top: 10%; }
.compact .endpoint-s3,.compact .endpoint-db { top: 90%; }
.tiny-icon { width: 10px!important; }
.connection-label { position: absolute; top: 46%; transform: translate(-50%,-50%); color: var(--muted); background: var(--panel); font-size: 7px; padding: 2px 4px; z-index: 1; }
.label-one { left: 35%; }
.label-two { left: 65%; }
.compact .connection-label { top: 81%; font-size: 6px; background: transparent; }
.traffic-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 5px; }
.chart-legend { display: flex; gap: 14px; font-size: 8px; color: var(--secondary); }
.chart-legend>span { display: flex; gap: 5px; align-items: center; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
.segmented { display: flex; gap: 2px; border: 1px solid var(--border); background: var(--bg); border-radius: 5px; padding: 2px; }
.segmented button { color: var(--muted); font-size: 7px; padding: 4px 6px; border-radius: 3px; }
.segmented button.active { background: var(--hover); color: var(--text); box-shadow: 0 1px 4px #0002; }
.segmented button:hover { color: var(--text); }
.traffic-chart { display: block; width: calc(100% - 30px); height: 166px; margin: 5px 15px 6px; }
.traffic-chart text { fill: var(--muted); font-family: var(--font); font-size: 9px; }
.grid-line { stroke: var(--border); stroke-width: .8px; stroke-dasharray: 3 4; }
.line-in { stroke: #9b83f3; stroke-width: 2; stroke-linejoin: round; fill: none; }
.line-out { stroke: #58bbce; stroke-width: 1.7; stroke-linejoin: round; fill: none; }
.chart-point { fill: transparent; cursor: crosshair; }
.chart-point:hover,.chart-point:focus { fill: #b8a5ff; stroke: var(--panel); stroke-width: 3; r: 5; }
.traffic-totals { padding: 10px 20px 12px; border-top: 1px solid var(--border-soft); display: flex; gap: 25px; align-items: center; }
.traffic-totals>div { display: grid; grid-template-columns: 6px auto; align-items: center; gap: 2px 6px; }
.traffic-totals>div>span { font-size: 7px; color: var(--muted); }
.traffic-totals>div>span.legend-dot.purple { color: var(--purple); }
.traffic-totals>div>span.legend-dot.cyan { color: var(--cyan); }
.traffic-totals b { grid-column: 2; font-size: 14px; font-weight: 550; }
.traffic-totals b small { font-size: 8px; color: var(--muted); font-weight: 400; }
.traffic-average { font-size: 7px; color: var(--muted); margin-left: auto; }
.chart-empty { height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); gap: 9px; }
.chart-empty>svg { width: 30px; height: 30px; opacity: .5; }
.chart-empty p { font-size: 11px; }
.chart-empty small { font-size: 9px; }
.dashboard-bottom { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-bottom: 20px; }
.inventory-panel .panel-header { padding-bottom: 15px; }
.table-wrap { position: relative; width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
thead { background: var(--panel-alt); }
th { padding: 10px 12px; color: var(--muted); font-size: 8px; font-weight: 450; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 9px; color: var(--secondary); }
tr:last-child td { border-bottom: 0; }
th:first-child,td:first-child { padding-left: 20px; }
tbody tr:hover { background: var(--panel-alt); }
.product-code { font-size: 8px; color: var(--secondary); }
.product-name { display: flex; gap: 8px; align-items: center; }
.product-name b { color: var(--text); font-size: 9px; font-weight: 450; }
.product-name small { display: block; color: var(--muted); font-size: 8px; margin-top: 3px; }
.product-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--panel-alt); color: var(--secondary); border-radius: 6px; }
.product-icon svg { width: 14px; height: 14px; }
.number-cell { text-align: right; }
.number-cell b { color: var(--text); font-size: 10px; font-weight: 450; }
.number-cell small { color: var(--muted); font-size: 8px; }
.row-action-col { width: 28px; padding-left: 0; }
.row-action { width: 24px; height: 24px; }
.row-action svg { width: 13px; height: 13px; }
.event-list { padding: 4px 19px 5px; }
.event { display: flex; gap: 10px; position: relative; padding: 15px 0; }
.event:not(:last-child):after { content:''; width: 1px; background: var(--border); position: absolute; left: 14px; top: 44px; bottom: -13px; }
.event-icon { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0; border: 1px solid #aabbcc09; z-index: 1; }
.event-icon svg { width: 14px; height: 14px; }
.event b { font-size: 9px; font-weight: 500; }
.event p { color: var(--muted); font-size: 7px; margin-top: 2px; }
.event small { color: var(--muted); font-size: 6.5px; display: block; margin-top: 5px; }
.event-indicator { width: 4px; height: 4px; border-radius: 50%; background: var(--border); margin: 6px 0 0 auto; }
.activity-link { color: var(--purple); justify-content: center; font-size: 8px; }
.activity-link:hover { background: var(--purple-tint); }
.activity-link svg { width: 12px; height: 12px; }
.architecture-note { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px; padding: 12px 17px; font-size: 8px; color: var(--muted); }
.architecture-note>svg { width: 13px; height: 13px; color: var(--purple); }
.note-brand { margin-left: auto; color: var(--muted); letter-spacing: 1.3px; font-size: 6px; white-space: nowrap; }
.footer { padding: 23px 0 21px; color: var(--muted); font-size: 7px; display: flex; justify-content: space-between; gap: 20px; }
.footer-sep { padding: 0 5px; }
.version { border: 1px solid var(--border); border-radius: 3px; margin-left: 7px; padding: 1px 4px; font-size: 6px; }

.inventory-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.inventory-summary .stat-card { padding: 20px; }
.inventory-summary .stat-source { font-size: 7px; }
.inventory-summary .stat-label { font-size: 11px; }
.inventory-summary .stat-value.status-value { font-size: 16px; }
.inventory-summary .stat-detail { font-size: 9px; }
.inventory-full .panel-header { padding-bottom: 18px; }
.inventory-full th { font-size: 10px; padding-top: 12px; padding-bottom: 12px; }
.inventory-full td { padding-top: 14px; padding-bottom: 14px; font-size: 11px; }
.inventory-full .product-name b { font-size: 11px; }
.inventory-full .product-code { font-size: 10px; }
.inventory-full .product-icon { width: 34px; height: 34px; }
.inventory-full .product-icon svg { width: 18px; height: 18px; }
.inventory-full .badge { font-size: 9px; }
.inventory-controls { padding: 0 20px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.search-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 8px 10px; min-width: 220px; flex: 1; max-width: 340px; }
.search-field svg { width: 14px; color: var(--muted); }
.search-field input { border: 0; width: 100%; font-size: 10px; }
.filter-group { display: flex; gap: 8px; }
.select-wrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel-alt); border-radius: 6px; padding: 8px; }
.select-wrap svg { width: 13px; height: 13px; color: var(--secondary); }
.select-wrap select { font-size: 9px; border: 0; max-width: 140px; }
.pagination { padding: 12px 20px; font-size: 9px; }
.pagination>div { display: flex; align-items: center; gap: 12px; }
.pagination .icon-button { border: 1px solid var(--border); width: 27px; height: 27px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.inventory-charts { margin-top: 20px; }
.bar-chart { padding: 22px 22px 28px; }
.bar-row { display: flex; align-items: center; gap: 14px; margin: 16px 0; font-size: 10px; }
.bar-row>span { width: 110px; color: var(--secondary); flex-shrink: 0; }
.bar-row>b { width: 30px; font-size: 10px; font-weight: 500; text-align: right; }
.bar-track { background: var(--hover); height: 10px; border-radius: 4px; flex: 1; overflow: hidden; }
.bar-fill { height: 100%; background: var(--purple); border-radius: 4px; min-width: 0; animation: grow .7s ease; }
.bar-fill.color-1 { background: var(--cyan); }
.bar-fill.color-2 { background: var(--blue); }
.bar-fill.color-3 { background: var(--green); }
.source-panel { padding-bottom: 17px; }
.source-path { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 10px; }
.source-path>span { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--secondary); font-size: 9px; }
.source-path>span>svg { color: var(--purple); width: 24px; height: 24px; }
.source-path>svg { color: var(--muted); width: 15px; }
.source-panel>p { color: var(--muted); font-size: 10px; margin: 0 22px 15px; line-height: 1.9; }
.key-value { display: flex; align-items: center; justify-content: space-between; font-size: 10px; margin: 0 22px; padding: 9px 0; border-top: 1px solid var(--border-soft); color: var(--secondary); }
.key-value>b { font-weight: 450; }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }
.empty-state>svg { width: 36px; height: 36px; opacity: .5; margin-bottom: 10px; }
.empty-state h3 { font-size: 13px; font-weight: 500; color: var(--secondary); }
.empty-state p { margin: 6px auto 15px; font-size: 10px; max-width: 270px; }
.empty-state.small { min-height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.category-label { color: var(--muted); font-size: 10px; }
.cloud-hero { display: flex; align-items: center; gap: 20px; padding: 30px; margin-bottom: 22px; position: relative; background: radial-gradient(ellipse at 80% 30%,var(--orange-tint),transparent 70%),var(--panel); }
.cloud-hero-icon { width: 65px; height: 65px; border-radius: 16px; background: var(--orange-tint); border: 1px solid #d5a46130; color: var(--orange); display: grid; place-items: center; }
.cloud-hero-icon>svg { width: 36px; height: 36px; }
.cloud-hero h2 { font-size: 24px; font-weight: 550; letter-spacing: -.5px; }
.cloud-hero .eyebrow { color: var(--orange); font-size: 8px; }
.cloud-hero p { color: var(--muted); font-size: 10px; margin-top: 5px; }
.cloud-hero>.badge { margin-left: auto; }
.technical-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }
.detail-rows { margin: 13px 20px 15px; }
.detail-rows>div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); font-size: 10px; }
.detail-rows>div:last-child { border-bottom: 0; }
.detail-rows dt { color: var(--muted); flex-shrink: 0; }
.detail-rows dd { margin: 0; color: var(--secondary); text-align: right; }
.detail-rows dd code { font-size: 10px; }
.integration-callout { display: flex; align-items: center; gap: 18px; padding: 23px; background: linear-gradient(100deg,var(--purple-tint),transparent),var(--panel); }
.callout-icon { color: var(--purple); }
.callout-icon svg { width: 30px; height: 30px; }
.integration-callout h2 { font-size: 13px; font-weight: 550; }
.integration-callout p { color: var(--muted); font-size: 10px; margin-top: 5px; }
.integration-callout .button { margin-left: auto; flex-shrink: 0; }
.topology-full { margin-bottom: 20px; }
.topology-full .panel-header { padding: 23px 25px 14px; }
.topology-full .panel-header h2 { font-size: 16px; }
.topology-full .panel-header p { font-size: 10px; }
.topology-legend { display: flex; align-items: center; gap: 22px; padding: 8px 25px 0; font-size: 9px; color: var(--secondary); flex-wrap: wrap; }
.topology-legend>span { display: flex; gap: 7px; align-items: center; }
.topology-legend>.badge { margin-left: auto; }
.flow-caption { padding: 14px 23px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--muted); min-height: 50px; }
.flow-caption svg { color: var(--purple); width: 15px; height: 15px; }
.flow-caption b { font-weight: 500; color: var(--purple); }
.simulation-only { margin-left: auto; font-size: 8px; }
.flow-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin: 0 0 22px; }
.flow-step { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 14px; text-align: left; transition: background .2s,border-color .2s; }
.flow-step:hover { background: var(--hover); }
.flow-step.active { border-color: var(--purple); background: var(--purple-tint); }
.flow-step>span { display: block; font-size: 10px; color: var(--purple); margin-bottom: 8px; font-family: monospace; }
.flow-step b { font-size: 10px; font-weight: 500; display: block; }
.flow-step small { display: block; color: var(--muted); font-size: 8px; line-height: 1.8; margin-top: 6px; }
.backup-empty { padding: 28px 25px 12px; text-align: center; }
.backup-empty>svg { width: 48px; height: 48px; color: var(--purple); padding: 8px; background: var(--purple-tint); border-radius: 12px; }
.backup-empty h3 { font-size: 13px; font-weight: 500; margin: 12px 0 7px; }
.backup-empty p { font-size: 10px; color: var(--muted); max-width: 300px; margin: auto; }
.policy-list { padding: 10px 22px 20px; }
.policy-item { display: flex; align-items: flex-start; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.policy-item:last-child { border: 0; padding-bottom: 0; }
.policy-item h3 { font-size: 11px; font-weight: 500; margin-bottom: 5px; }
.policy-item p { font-size: 10px; color: var(--muted); line-height: 1.9; }
.security-checklist .panel-header { padding-bottom: 15px; }
.security-rule { display: flex; align-items: center; gap: 15px; padding: 18px 23px; border-top: 1px solid var(--border-soft); }
.security-rule>svg { width: 20px; color: var(--purple); }
.security-rule b { font-size: 11px; font-weight: 500; }
.security-rule p { font-size: 10px; color: var(--muted); margin-top: 3px; }
.security-rule>.badge { margin-left: auto; }
.monitoring-note { display: flex; gap: 10px; color: var(--muted); font-size: 10px; padding: 0 2px 20px; align-items: center; }
.monitoring-note svg { color: var(--purple); width: 15px; height: 15px; }
.monitor-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 20px; }
.monitor-card { position: relative; padding: 20px; }
.monitor-card>.badge { float: right; }
.monitor-card>p { color: var(--secondary); font-size: 11px; margin-top: 14px; }
.monitor-card>strong { font-size: 32px; font-weight: 550; display: block; margin: 4px 0 12px; }
.monitor-card>strong>small { font-size: 15px; color: var(--muted); padding-left: 4px; }
.sparkline { position: absolute; width: 100px; height: 40px; top: 80px; right: 20px; }
.sparkline path { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; }
.usage-track { height: 4px; border-radius: 3px; background: var(--hover); margin-bottom: 10px; overflow: hidden; }
.usage-track>span { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.monitor-card>small { color: var(--muted); font-size: 9px; }
.monitoring-events .event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; padding-top: 15px; padding-bottom: 15px; }
.monitoring-events .event:after { display: none; }
.monitoring-events .event b { font-size: 11px; }
.monitoring-events .event p { font-size: 9px; }
.monitoring-events .event small { font-size: 8px; }
.error-banner { display: flex; gap: 12px; align-items: center; background: var(--red-tint); border: 1px solid #d6677f33; border-radius: 9px; padding: 16px; margin-bottom: 20px; color: var(--red); }
.error-banner>svg { width: 22px; height: 22px; }
.error-banner b { font-size: 12px; font-weight: 500; }
.error-banner p { color: var(--secondary); font-size: 11px; margin-top: 5px; }
.error-banner small { color: var(--muted); font-size: 10px; }
.error-banner .button { margin-left: auto; flex-shrink: 0; }

dialog { width: min(510px,calc(100% - 32px)); color: var(--text); background: var(--panel); border: 1px solid var(--border); padding: 0; border-radius: 15px; box-shadow: 0 30px 150px #0007; max-height: calc(100dvh - 50px); }
dialog::backdrop { background: #050713aa; backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in .2s ease; }
dialog.wide-dialog { width: min(650px,calc(100% - 32px)); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--border); gap: 15px; }
.dialog-heading h2 { font-size: 15px; font-weight: 550; display: flex; gap: 9px; align-items: center; }
.dialog-heading h2>svg { color: var(--purple); }
.dialog-body { padding: 23px; }
.dialog-body .detail-rows { margin: 0; }
.dialog-body .detail-rows>div { font-size: 11px; padding: 14px 0; }
.dialog-intro { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.mode-option { display: flex; width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 15px; text-align: left; gap: 13px; align-items: center; margin-bottom: 12px; }
.mode-option.selected { background: var(--purple-tint); border-color: #9c7bec70; }
.mode-option>span:nth-child(2) { flex: 1; }
.mode-option b { font-size: 11px; display: block; font-weight: 500; }
.mode-option small { font-size: 9px; color: var(--muted); display: block; margin-top: 5px; }
.mode-option>svg { width: 17px; color: var(--purple); }
.info-box { display: flex; align-items: flex-start; gap: 9px; background: var(--purple-tint); border: 1px solid #9677ec26; padding: 13px; margin-top: 20px; border-radius: 7px; color: var(--secondary); font-size: 10px; line-height: 1.9; }
.info-box>svg { width: 15px; height: 15px; color: var(--purple); margin-top: 2px; }
.info-box code { font-size: 10px; color: var(--purple); }
.info-box+.button { margin-top: 15px; }
.profile-cover { text-align: center; margin: 5px 0 20px; }
.profile-cover h3 { font-size: 16px; font-weight: 550; margin-top: 15px; }
.profile-cover p { font-size: 10px; color: var(--muted); margin-top: 6px; }
.help-step { display: flex; gap: 15px; margin-bottom: 22px; }
.help-step>span { width: 29px; height: 29px; display: grid; place-items: center; flex-shrink: 0; background: var(--purple-tint); border-radius: 7px; color: var(--purple); font-size: 11px; }
.help-step h3 { font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.help-step p { color: var(--muted); font-size: 11px; line-height: 1.9; }
.help-step code { font-size: 10px; }
.notification-item { display: flex; gap: 13px; padding: 12px 0 20px; }
.notification-item>svg { color: var(--purple); margin-top: 3px; }
.notification-item h3 { font-size: 12px; font-weight: 500; }
.notification-item p { font-size: 11px; color: var(--muted); margin-top: 6px; }
.product-detail-title { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.product-detail-title>.metric-icon { width: 43px; height: 43px; }
.product-detail-title code { color: var(--muted); font-size: 10px; }
.product-detail-title h3 { font-size: 14px; font-weight: 500; margin-top: 3px; }
.toast { position: fixed; bottom: 25px; left: calc(50% + 100px); transform: translate(-50%,20px); background: var(--panel-alt); border: 1px solid #9b80ed60; box-shadow: 0 10px 40px #0005; border-radius: 10px; padding: 14px 22px; z-index: 100; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; font-size: 11px; max-width: calc(100vw - 35px); width: max-content; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.toast.error { border-color: var(--red); }
.skeleton { border-radius: 5px; background: linear-gradient(90deg,var(--panel-alt) 20%,var(--hover) 50%,var(--panel-alt) 80%); background-size: 300% 100%; animation: shimmer 1.8s infinite; }
.skeleton-card { min-height: 164px; }
.sk-icon { width: 30px; height: 30px; margin-bottom: 16px; }
.sk-line { width: 85%; height: 9px; margin-top: 13px; }
.sk-number { width: 70%; height: 22px; margin-top: 12px; }
.sk-line.short { width: 60%; height: 6px; }
.skeleton-panel { height: 332px; }
.sidebar-backdrop { display: none; }
#page-content { animation: fade-in .25s ease; }
@keyframes shimmer { to { background-position: -150% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes data-flow { to { stroke-dashoffset: -268; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: .5; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }