:root {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-hover: #f2f4f8;
  --text: #111526;
  --muted: #747b8d;
  --line: #e7e9f0;
  --sidebar: #0c1020;
  --sidebar-soft: #151a2e;
  --sidebar-text: #aeb4c6;
  --primary: #1476f2;
  --primary-2: #0758bf;
  --primary-soft: #eaf3ff;
  --green: #16a36a;
  --green-soft: #e8f7f0;
  --amber: #e89b22;
  --amber-soft: #fff4dc;
  --red: #dc4d5e;
  --red-soft: #ffedf0;
  --shadow: 0 12px 32px rgba(29, 35, 58, .055);
  --radius: 18px;
}

[data-theme="dark"] {
  --bg: #080b13;
  --surface: #101420;
  --surface-2: #151a28;
  --surface-hover: #1a2030;
  --text: #f3f5fb;
  --muted: #8d95a9;
  --line: #242a39;
  --sidebar: #090c14;
  --sidebar-soft: #141925;
  --primary-soft: #102a4d;
  --green-soft: #0f3026;
  --amber-soft: #352817;
  --red-soft: #351b22;
  --shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 0 0 auto;
  width: 274px;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  color: white;
  background:
    radial-gradient(circle at 80% 12%, rgba(20, 118, 242, .18), transparent 24%),
    linear-gradient(180deg, #0c1020 0%, #0a0e1b 100%);
  overflow-y: auto;
  transition: width .3s ease, transform .3s ease;
}
.sidebar::before { content: ""; position: absolute; inset: 0; opacity: .11; pointer-events: none; background-image: radial-gradient(#94a0cf 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 55%); }
.brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: white; border-radius: 13px; background: linear-gradient(145deg, #2b8cff, #0758bf); box-shadow: 0 9px 25px rgba(20,118,242,.32); overflow: hidden; }
.brand-mark span { position: absolute; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.18); transform: rotate(45deg); border-radius: 8px; }
.brand-mark span:nth-child(2) { width: 19px; height: 19px; }
.brand-mark svg { position: relative; width: 20px; height: 20px; stroke-width: 2.1; }
.brand-copy { min-width: 0; display: grid; line-height: 1.2; }
.brand-copy strong { font-size: 20px; letter-spacing: -.4px; direction: ltr; text-align: right; }
.brand-copy strong span { color: #49a1ff; }
.brand-copy small { margin-top: 5px; color: #8f97ac; font-size: 12px; white-space: nowrap; }
.side-nav { position: relative; flex: 1; padding-top: 20px; }
.nav-label { margin: 0 12px 9px; color: #626b82; font-size: 12px; font-weight: 700; }
.nav-label.spaced { margin-top: 24px; }
.nav-item { position: relative; display: flex; align-items: center; min-height: 46px; padding: 0 13px; gap: 13px; margin: 3px 0; border-radius: 12px; color: var(--sidebar-text); text-decoration: none; font-size: 14px; font-weight: 600; transition: .2s ease; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(20,118,242,.24), rgba(20,118,242,.08)); }
.nav-item.active::after { content: ""; position: absolute; right: 0; width: 3px; height: 22px; border-radius: 3px 0 0 3px; background: #43a0ff; box-shadow: 0 0 12px #43a0ff; }
.nav-item b { margin-right: auto; min-width: 31px; padding: 3px 7px; border-radius: 7px; color: #78bcff; background: rgba(20,118,242,.17); text-align: center; font-size: 11px; }
.sidebar-status { position: relative; margin: 20px 2px 16px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.035); }
.status-title { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.status-title strong { font-size: 13px; }
.status-title em { margin-right: auto; color: #5ed59b; font-style: normal; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #41cf88; box-shadow: 0 0 0 4px rgba(65,207,136,.12); }
.status-meta { display: flex; justify-content: space-between; margin: 14px 0 8px; color: #8e96aa; font-size: 11px; }
.status-meta b { color: #d7dbea; font-weight: 600; direction: ltr; }
.meter { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { display: block; width: 88%; height: 100%; background: linear-gradient(90deg,#44ce8b,#79e0ae); border-radius: inherit; }
.sidebar-status > small { display: block; margin-top: 9px; color: #60697f; font-size: 10px; }
.sidebar-user { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 7px 0; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#282f46,#1b2135); color: #c7c2ff; font-size: 12px; font-weight: 800; }
.sidebar-user > div:nth-child(2) { display: grid; min-width: 0; }
.sidebar-user strong { font-size: 13px; }
.sidebar-user small { margin-top: 4px; color: #737d94; font-size: 11px; }
.sidebar-user .icon-button { margin-right: auto; color: #727c93; }

.main { min-height: 100vh; margin-right: 274px; transition: margin .3s ease; }
.topbar { position: sticky; z-index: 20; top: 0; height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 34px; border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title h1 { margin: 0; font-size: 23px; letter-spacing: -.5px; }
.topbar-title p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { width: 310px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); transition: .2s ease; }
.global-search:focus-within { border-color: color-mix(in srgb,var(--primary),white 42%); box-shadow: 0 0 0 4px color-mix(in srgb,var(--primary-soft),transparent 30%); }
.global-search svg { width: 18px; height: 18px; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.global-search input::placeholder { color: #979dad; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface-2); font: 10px/1.3 monospace; direction: ltr; }
.icon-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); transition: .2s ease; }
.icon-button:hover { border-color: color-mix(in srgb,var(--primary),white 55%); color: var(--primary); transform: translateY(-1px); }
.icon-button svg { width: 19px; height: 19px; }
.icon-button.minimal { width: 34px; height: 34px; border: 0; background: transparent; }
.notification i { position: absolute; top: 8px; left: 9px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--red); }
.primary-button { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 0; border-radius: 12px; color: white; background: linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow: 0 9px 22px rgba(20,118,242,.22); font-size: 13px; font-weight: 700; transition: .2s ease; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 25px rgba(20,118,242,.30); }
.primary-button svg { width: 18px; height: 18px; stroke-width: 2.2; }
.menu-toggle { display: none; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }

.content { max-width: 1650px; margin: 0 auto; padding: 30px 34px 42px; }
.overview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.overview-head h2 { margin: 0; font-size: 18px; }
.overview-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.date-filter { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface); font-size: 12px; font-weight: 600; }
.date-filter svg { width: 15px; height: 15px; }
.calendar-dot { width: 8px; height: 8px; border: 2px solid var(--primary); border-radius: 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.stat-card { position: relative; min-height: 183px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.stat-card.featured::before { content: ""; position: absolute; top: -55px; left: -45px; width: 130px; height: 130px; border-radius: 50%; background: var(--primary-soft); filter: blur(2px); opacity: .75; }
.stat-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon.violet { color: #0869dd; background: #e8f3ff; }
.stat-icon.amber { color: var(--amber); background: var(--amber-soft); }
.stat-icon.green { color: var(--green); background: var(--green-soft); }
[data-theme="dark"] .stat-icon.violet { background: #102d52; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; direction: rtl; }
.trend svg { width: 13px; height: 13px; transform: rotate(45deg); }
.trend.up { color: var(--green); }
.trend.neutral { padding: 5px 8px; border-radius: 7px; color: var(--muted); background: var(--surface-2); font-weight: 600; }
.stat-card > p { position: relative; margin: 14px 0 4px; color: var(--muted); font-size: 12px; }
.stat-number { position: relative; display: flex; align-items: baseline; gap: 6px; }
.stat-number strong { font-size: 27px; letter-spacing: -.8px; }
.stat-number small { color: var(--muted); font-size: 11px; }
.stat-bottom,.revenue-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; color: var(--muted); font-size: 10px; }
.stat-bottom span:first-child { display: flex; align-items: center; gap: 6px; }
.stat-bottom i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.progress { height: 4px; margin-top: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),#55a9ff); }
.progress.green i { background: linear-gradient(90deg,var(--green),#58cf9c); }
.revenue-foot b { color: var(--green); }
.micro-bars { position: absolute; left: 17px; right: 17px; bottom: 16px; height: 35px; display: flex; align-items: end; gap: 6px; direction: ltr; }
.micro-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb,var(--primary),transparent 70%); }
.micro-bars i:nth-last-child(-n+3) { background: color-mix(in srgb,var(--primary),transparent 28%); }
.expiry-split { display: flex; gap: 14px; margin-top: 19px; color: var(--muted); font-size: 10px; }
.expiry-split span { display: flex; align-items: center; gap: 6px; }
.expiry-split i { width: 7px; height: 7px; border-radius: 50%; }
.expiry-split .urgent { background: var(--red); }.expiry-split .soon { background: var(--amber); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.78fr) minmax(300px,.72fr); gap: 15px; margin-top: 15px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0,1.82fr) minmax(310px,.68fr); gap: 15px; margin-top: 15px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 20px 0; }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.segmented { display: flex; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.segmented button { min-width: 58px; padding: 6px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; }
.segmented button.active { color: var(--text); background: var(--surface); box-shadow: 0 3px 10px rgba(30,34,55,.07); font-weight: 700; }
.chart-summary { display: flex; align-items: center; gap: 11px; padding: 9px 21px 0; }
.chart-summary strong { font-size: 24px; }
.chart-summary .trend { padding: 4px 7px; border-radius: 7px; background: var(--green-soft); }
.chart-wrap { display: flex; height: 230px; padding: 10px 20px 0; direction: ltr; }
.chart-y { width: 39px; padding: 0 9px 28px 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 9px; text-align: right; }
.line-chart { position: relative; flex: 1; min-width: 0; }
.grid-lines { position: absolute; inset: 0 0 28px; display: flex; flex-direction: column; justify-content: space-between; }
.grid-lines i { width: 100%; height: 1px; background: var(--line); }
.line-chart > svg { position: absolute; inset: 0 0 28px; width: 100%; height: calc(100% - 28px); overflow: visible; }
.line-chart .area { fill: url(#areaFill); stroke: none; }
.line-chart .line { fill: none; stroke-width: 2.7; vector-effect: non-scaling-stroke; }
.line-chart .primary { stroke: var(--primary); }
.line-chart .secondary { stroke: #b7bdcb; stroke-dasharray: 5 6; stroke-width: 1.8; }
.line-chart .point { fill: var(--surface); stroke: var(--primary); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-x { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.chart-tooltip { position: absolute; top: 18px; left: 69%; width: 94px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--surface),transparent 4%); box-shadow: 0 8px 22px rgba(28,31,50,.13); transform: translateX(-50%); direction: rtl; }
.chart-tooltip::after { content: ""; position: absolute; bottom: -5px; left: 44%; width: 8px; height: 8px; border: solid var(--line); border-width: 0 1px 1px 0; background: var(--surface); transform: rotate(45deg); }
.chart-tooltip small,.chart-tooltip span { display: block; color: var(--muted); font-size: 8px; }
.chart-tooltip strong { display: block; margin: 2px 0; font-size: 15px; }
.chart-legend { display: flex; gap: 20px; padding: 0 61px 17px; color: var(--muted); font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; }
.primary-dot { background: var(--primary); }.secondary-dot { background: #b7bdcb; }
.health-panel { padding-bottom: 16px; }
.health-score { position: relative; width: 164px; height: 150px; margin: 2px auto 0; display: grid; place-items: center; }
.health-score > svg { width: 142px; height: 142px; transform: rotate(-90deg); }
.gauge-bg,.gauge-progress { fill: none; stroke-width: 10; }
.gauge-bg { stroke: var(--surface-2); }
.gauge-progress { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 96 100; filter: drop-shadow(0 4px 5px rgba(20,118,242,.24)); }
.health-score > div { position: absolute; display: flex; align-items: baseline; }
.health-score strong { font-size: 29px; }.health-score span { color: var(--muted); font-size: 11px; }.health-score small { position: absolute; top: 42px; right: 50%; width: 100px; transform: translateX(50%); color: var(--green); font-size: 9px; font-weight: 700; text-align: center; }
.health-list { margin: -4px 18px 12px; }
.health-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.health-list > div:last-child { border: 0; }
.health-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; }.health-icon svg { width: 15px; height: 15px; }.health-icon.ok { color: var(--green); background: var(--green-soft); }.health-icon.warn { color: var(--amber); background: var(--amber-soft); }
.health-list p { display: grid; flex: 1; margin: 0; }.health-list strong { font-size: 11px; }.health-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }.health-list em { color: var(--green); font-size: 10px; font-style: normal; font-weight: 700; }.health-list > div:last-child em { color: var(--amber); }
.secondary-button { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 11px; font-weight: 700; transition: .2s; }
.secondary-button:hover { border-color: var(--primary); color: var(--primary); }
.secondary-button.full { width: calc(100% - 36px); margin: 0 18px; }
.secondary-button svg { width: 14px; height: 14px; }

.licenses-panel { min-width: 0; overflow: hidden; }
.table-head { align-items: center; padding-bottom: 16px; }
.table-actions { display: flex; align-items: center; gap: 7px; }
.table-search { height: 34px; width: 130px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.table-search svg { width: 14px; height: 14px; color: var(--muted); }.table-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.filter-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); }.filter-button svg { width: 15px; height: 15px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 700; }.text-button svg { width: 13px; height: 13px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: right; }
th { height: 41px; padding: 0 16px; border-block: 1px solid var(--line); color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 700; white-space: nowrap; }
td { height: 68px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 10px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: .15s; } tbody tr:hover { background: color-mix(in srgb,var(--surface-2),transparent 25%); }
.key-cell { display: flex; align-items: center; gap: 6px; direction: ltr; justify-content: flex-end; }.key-cell code { padding: 6px 7px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; letter-spacing: .2px; }.copy-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; }.copy-btn:hover { color: var(--primary); background: var(--primary-soft); }.copy-btn svg { width: 13px; height: 13px; }
.client { display: flex; align-items: center; gap: 8px; }.client-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 800; direction: ltr; }.client-avatar.blue { color: #1476f2; background: #eaf3ff; }.client-avatar.purple { color: #267fdc; background: #e9f4ff; }.client-avatar.green { color: #168d60; background: #e7f7f0; }.client-avatar.amber { color: #bc7613; background: #fff1dc; }
[data-theme="dark"] .client-avatar.blue { background:#172f4d } [data-theme="dark"] .client-avatar.purple { background:#163555 } [data-theme="dark"] .client-avatar.green { background:#153529 } [data-theme="dark"] .client-avatar.amber { background:#3d2c16 }
.client p,.date-cell { display: grid; margin: 0; }.client strong,.date-cell strong { font-size: 10px; font-weight: 700; }.client small,.date-cell small { margin-top: 3px; color: var(--muted); font-size: 8px; direction: ltr; text-align: right; }.date-cell small { direction: rtl; }.date-cell .danger-text { color: var(--red); }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; font-size: 9px; font-weight: 700; }.status::before { content:""; width:5px; height:5px; border-radius:50%; }.status.active { color: var(--green); background: var(--green-soft); }.status.active::before { background: var(--green); }.status.expiring { color: var(--amber); background: var(--amber-soft); }.status.expiring::before { background: var(--amber); }.status.suspended { color: var(--red); background: var(--red-soft); }.status.suspended::before { background: var(--red); }
.activity-panel { padding-bottom: 12px; }
.activity-panel .panel-head { align-items: center; padding-bottom: 13px; }
.activity-list { padding: 0 18px; }
.activity-item { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 69px; padding-top: 7px; }
.activity-icon { z-index: 1; width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; }.activity-icon svg { width: 14px; height: 14px; }.activity-icon.key { color: var(--primary); background: var(--primary-soft); }.activity-icon.device { color: #347bd2; background: #e8f3ff; }.activity-icon.alert { color: var(--red); background: var(--red-soft); }.activity-icon.renew { color: var(--green); background: var(--green-soft); }
[data-theme="dark"] .activity-icon.device { background:#172b44 }
.activity-item > div { flex: 1; }.activity-item p { margin: 1px 0 4px; font-size: 10px; line-height: 1.65; }.activity-item p strong { font-weight: 800; }.activity-item small { color: var(--muted); font-size: 8px; }.activity-line { position: absolute; top: 38px; right: 15px; bottom: 1px; width: 1px; background: var(--line); }

.toast { position: fixed; z-index: 100; left: 24px; bottom: 24px; min-width: 300px; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 50px rgba(16,22,41,.18); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }.toast > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--green-soft); }.toast svg { width: 17px; height: 17px; stroke-width: 2.5; }.toast > div { display: grid; }.toast strong { font-size: 12px; }.toast small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,10,19,.58); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: .2s ease; }
.modal-backdrop.open { opacity: 1; visibility: visible; }.modal { width: min(650px,100%); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 25px 80px rgba(0,0,0,.25); transform: translateY(15px) scale(.985); transition: .25s ease; }.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }.modal-head > div { display: flex; align-items: center; gap: 12px; }.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }.modal-icon svg { width: 19px; height: 19px; }.modal-head h2 { margin: 0; font-size: 16px; }.modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.modal form { padding: 20px 22px 22px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label { display: grid; gap: 7px; }.form-grid label > span { color: var(--text); font-size: 11px; font-weight: 700; }.form-grid input,.form-grid select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: var(--surface-2); font-size: 12px; }.form-grid input:focus,.form-grid select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; }.switch-row > span { display: grid; }.switch-row strong { font-size: 11px; }.switch-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }.switch-row input { position: absolute; opacity: 0; }.switch-row i { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #c5cad5; transition: .2s; }.switch-row i::after { content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:.2s; }.switch-row input:checked + i { background: var(--primary); }.switch-row input:checked + i::after { transform: translateX(-18px); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

@media (min-width: 1181px) {
  body.sidebar-collapsed .sidebar { width: 84px; }
  body.sidebar-collapsed .main { margin-right: 84px; }
  body.sidebar-collapsed .brand { padding-inline: 3px; justify-content: center; }
  body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .nav-item b, body.sidebar-collapsed .sidebar-status, body.sidebar-collapsed .sidebar-user > div:not(.avatar), body.sidebar-collapsed .sidebar-user .icon-button { display: none; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
  body.sidebar-collapsed .nav-item.active::after { right: -18px; }
  body.sidebar-collapsed .sidebar-user { justify-content: center; padding-inline: 0; }
}
@media (max-width: 1320px) {
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .global-search { width: 230px; }
  .bottom-grid { grid-template-columns: 1fr; }
  .activity-list { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 24px; }
  .activity-line { display: none; }
}
@media (max-width: 1180px) {
  .sidebar { transform: translateX(100%); box-shadow: -25px 0 60px rgba(0,0,0,.25); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { content:""; position: fixed; z-index:25; inset:0; background:rgba(7,10,18,.5); }
  .main { margin-right: 0; }
  .menu-toggle { display: grid; }
}
@media (max-width: 900px) {
  .topbar { height: auto; min-height: 76px; padding: 13px 20px; }
  .topbar-title p { display: none; }
  .global-search { display: none; }
  .content { padding: 24px 20px 35px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .health-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .health-panel .panel-head { grid-column: 1/-1; }
  .health-panel .secondary-button { grid-column: 1/-1; }
}
@media (max-width: 650px) {
  .topbar-title h1 { font-size: 18px; }
  .topbar-actions .primary-button span { display: none; }
  .topbar-actions .primary-button { width: 42px; padding: 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .overview-head { align-items: flex-start; }
  .overview-head p { max-width: 220px; line-height: 1.6; }
  .date-filter { white-space: nowrap; }
  .chart-tooltip { display: none; }
  .chart-x span:nth-child(even) { display: none; }
  .activity-list { grid-template-columns: 1fr; }
  .table-head { align-items: flex-start; flex-direction: column; }
  .table-actions { width: 100%; }.table-search { flex:1; }
  .health-panel { display:block; }
  .form-grid { grid-template-columns: 1fr; }
  .modal { max-height: calc(100vh - 30px); overflow-y:auto; }
}
@media (max-width: 430px) {
  .topbar { gap: 8px; padding-inline: 13px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .notification { display: none; }
  .content { padding-inline: 13px; }
  .overview-head { flex-direction: column; }
  .chart-wrap { padding-inline: 12px; }
  .chart-legend { padding-inline: 48px; }
  .toast { left: 13px; right: 13px; min-width: 0; }
}

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

/* Full workspace pages */
.page-view { display: none; }
.page-view.active { display: block; animation: pageIn .24s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-heading .eyebrow { display: block; margin-bottom: 7px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.page-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.5px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.compact-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 15px; }
.compact-stats.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.compact-stats article, .billing-overview > article, .customer-total { min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.compact-stats article > div, .customer-total > div, .billing-overview article > div { display: grid; gap: 4px; }
.compact-stats small, .customer-total small, .billing-overview small { color: var(--muted); font-size: 10px; }
.compact-stats strong, .customer-total strong, .billing-overview strong { font-size: 20px; }
.compact-stats em { margin-right: auto; color: var(--green); font-size: 10px; font-style: normal; font-weight: 700; }
.compact-stats .warn-text, .warn-text { color: var(--amber); }.compact-stats .danger-text, .danger-text { color: var(--red); }
.mini-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.mini-icon svg { width: 18px; height: 18px; }
.mini-icon.blue { color: var(--primary); background: var(--primary-soft); }.mini-icon.green { color: var(--green); background: var(--green-soft); }.mini-icon.amber { color: var(--amber); background: var(--amber-soft); }.mini-icon.red { color: var(--red); background: var(--red-soft); }
.data-panel { overflow: hidden; }
.data-toolbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; }
.toolbar-search { width: min(390px,42vw); height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-2); }
.toolbar-search:focus-within { border-color: color-mix(in srgb,var(--primary),white 35%); box-shadow: 0 0 0 3px var(--primary-soft); }
.toolbar-search svg { width: 16px; height: 16px; }.toolbar-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }
.toolbar-filters { display: flex; align-items: center; gap: 8px; }.toolbar-filters select { height: 38px; min-width: 125px; padding: 0 11px 0 30px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--text); background: var(--surface); font-size: 10px; }
.wide-table { min-width: 1000px; }.wide-table th:first-child,.wide-table td:first-child { width: 42px; padding-inline: 17px 4px; }.wide-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }
.plan-tag { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: #43617f; background: #eef3f8; font-size: 9px; font-weight: 700; }.plan-tag.premium { color: var(--primary); background: var(--primary-soft); }
[data-theme="dark"] .plan-tag { color:#aebbd0; background:#202838; }
.device-count { display: inline-flex; align-items: center; gap: 5px; }.device-count svg { width: 13px; height: 13px; color: var(--muted); }
.row-actions { display: flex; align-items: center; gap: 2px; }.row-actions button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: transparent; }.row-actions button:hover { color: var(--primary); background: var(--primary-soft); }.row-actions .danger-action:hover { color: var(--red); background: var(--red-soft); }.row-actions svg { width: 14px; height: 14px; }
.table-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 4px; direction: rtl; }.pagination button { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); font-size: 10px; }.pagination button:hover:not(:disabled),.pagination button.active { border-color: var(--primary); color: white; background: var(--primary); }.pagination button:disabled { opacity:.45; cursor:not-allowed; }.pagination svg { width:13px; height:13px; }.pagination button:last-child svg { transform:rotate(180deg); }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.product-card { position: relative; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.product-card.flagship { border-color: color-mix(in srgb,var(--primary),white 68%); }.product-card.flagship::before { content:""; position:absolute; top:-100px; left:-85px; width:220px; height:220px; border-radius:50%; background:var(--primary-soft); opacity:.75; }
.product-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }.product-logo { width: 48px; height: 48px; display: grid; place-items:center; border-radius:14px; color:white; background:linear-gradient(145deg,#258bff,#0860cf); box-shadow:0 8px 20px rgba(20,118,242,.2); }.product-logo svg { width:21px; height:21px; }.product-logo b { display:none; }.product-logo.cyan { background:linear-gradient(145deg,#26b5dd,#087ea9); }.product-logo.navy { background:linear-gradient(145deg,#264c82,#112c54); }.product-logo.steel { background:linear-gradient(145deg,#66788f,#39495e); }
.product-menu { display:flex; align-items:center; gap:5px; }.status.draft-status { color:#657188; background:#eef1f5; }.status.draft-status::before { background:#8994a6; } [data-theme="dark"] .status.draft-status { background:#232a38; color:#a8b0c0; }
.product-name { position: relative; margin-top: 17px; }.product-name h3 { margin:0; font-size:15px; }.product-name p { margin:5px 0 0; color:var(--muted); font-size:10px; direction:ltr; text-align:right; }
.version-line { display:flex; align-items:center; gap:9px; margin-top:18px; padding:10px 12px; border-radius:10px; background:var(--surface-2); font-size:10px; }.version-line span { color:var(--muted); }.version-line strong { direction:ltr; }.version-line button { margin-right:auto; border:0; color:var(--primary); background:transparent; font-size:9px; font-weight:700; }
.product-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin-top:17px; }.product-metrics div { display:grid; gap:5px; padding-inline:12px; border-left:1px solid var(--line); }.product-metrics div:first-child { padding-right:0; }.product-metrics div:last-child { border:0; }.product-metrics small { color:var(--muted); font-size:9px; }.product-metrics strong { font-size:13px; }
.product-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }.product-actions button { width:100%; }.primary-button.compact { height:40px; font-size:11px; }

/* Customers */
.customer-insights { display:grid; grid-template-columns:.7fr 1.3fr .8fr; gap:14px; margin-bottom:15px; }.customer-total p,.billing-overview p { margin:0; color:var(--muted); font-size:9px; }.customer-total p em { color:var(--green); font-style:normal; font-weight:700; }
.segment-card { padding:16px 18px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }.segment-head { display:flex; justify-content:space-between; font-size:10px; }.segment-head span { color:var(--muted); }.segment-bar { height:8px; display:flex; gap:3px; margin-top:14px; overflow:hidden; border-radius:99px; background:var(--surface-2); direction:ltr; }.segment-bar i:nth-child(1){background:var(--primary)}.segment-bar i:nth-child(2){background:#44b8dc}.segment-bar i:nth-child(3){background:#aeb8c7}.segment-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:11px; color:var(--muted); font-size:8px; }.segment-legend span { display:flex; align-items:center; gap:5px; }.segment-legend i { width:6px; height:6px; border-radius:50%; }.blue-dot{background:var(--primary)}.cyan-dot{background:#44b8dc}.gray-dot{background:#aeb8c7}
.client.large .client-avatar { width:34px;height:34px; }.number-link { display:inline-grid; place-items:center; width:27px;height:27px;border-radius:7px;color:var(--primary);background:var(--primary-soft); }

/* Devices */
.security-banner { position:relative; display:flex; align-items:center; gap:15px; margin-bottom:15px; padding:18px 20px; border:1px solid #cfe4ff; border-radius:17px; color:#0d3c73; background:linear-gradient(110deg,#eef7ff,#f8fbff); overflow:hidden; }.security-banner::after { content:""; position:absolute; left:-30px; width:210px;height:210px;border:32px solid rgba(20,118,242,.06);border-radius:50%; }.security-emblem { width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;color:white;background:linear-gradient(145deg,#248bff,#0a65d7);box-shadow:0 9px 22px rgba(20,118,242,.2); }.security-emblem svg{width:22px;height:22px}.security-banner h3{margin:0;font-size:14px}.security-banner p{margin:5px 0 0;color:#5b7898;font-size:10px}.security-kpis{position:relative;z-index:1;display:flex;margin-right:auto}.security-kpis span{min-width:88px;display:grid;gap:5px;padding-inline:17px;border-right:1px solid #d4e6f9}.security-kpis span:first-child{border:0}.security-kpis small{color:#6883a0;font-size:8px}.security-kpis strong{font-size:13px;direction:ltr}
[data-theme="dark"] .security-banner { border-color:#183d67;color:#d7eaff;background:linear-gradient(110deg,#102640,#121d2c) } [data-theme="dark"] .security-banner p,[data-theme="dark"] .security-kpis small { color:#7f9ab7 } [data-theme="dark"] .security-kpis span{border-color:#244361}
.device-name { display:flex;align-items:center;gap:9px}.device-name>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft)}.device-name>span.blocked-device{color:var(--red);background:var(--red-soft)}.device-name svg{width:15px;height:15px}.device-name p{display:grid;margin:0}.device-name strong{font-size:9px;direction:ltr;text-align:right}.device-name small{margin-top:3px;color:var(--muted);font-size:8px}.mono-chip{padding:5px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);background:var(--surface-2);font-size:8px}.key-plain{color:var(--primary);font-size:9px}.status.offline{color:#697588;background:#eef1f5}.status.offline::before{background:#8c96a7}[data-theme="dark"] .status.offline{color:#a6afbf;background:#232a38}

/* Billing */
.billing-overview { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;margin-bottom:15px}.billing-overview>article{min-height:105px}.revenue-card{display:block!important;background:linear-gradient(130deg,#0c2950,#0b3d7a)!important;color:white;border-color:transparent!important}.revenue-card>span{color:#a8c8ec;font-size:10px}.revenue-card>div{display:flex!important;align-items:center;gap:10px;margin-top:7px}.revenue-card strong{font-size:22px!important}.revenue-card em{padding:4px 7px;border-radius:7px;color:#74e0ad;background:rgba(72,205,139,.13);font-size:9px;font-style:normal;font-weight:700}.revenue-card p{margin-top:10px;color:#89afd9}.revenue-card .progress{margin-top:7px;background:rgba(255,255,255,.13)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:15px}.pricing-card{position:relative;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.pricing-card.recommended{border-color:var(--primary);box-shadow:0 15px 40px rgba(20,118,242,.1)}.recommended-label{position:absolute;top:0;left:0;padding:5px 11px;border-radius:0 0 9px 0;color:white;background:var(--primary);font-size:8px;font-weight:700}.pricing-head{display:flex;justify-content:space-between}.pricing-card h3{margin:14px 0 0;font-size:14px}.pricing-card>p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.6}.price{display:flex;align-items:baseline;gap:6px;margin-top:16px}.price strong{font-size:23px}.price span{color:var(--muted);font-size:9px}.pricing-card ul{display:grid;gap:9px;margin:15px 0;padding:13px 0;border-block:1px solid var(--line);list-style:none}.pricing-card li{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px}.pricing-card li svg{width:14px;height:14px;color:var(--green);stroke-width:2.5}.plan-foot{display:flex;align-items:center;justify-content:space-between;font-size:9px}.plan-foot span{color:var(--muted)}.plan-foot span strong{color:var(--text);font-size:11px}.plan-foot button{border:0;color:var(--primary);background:transparent;font-size:9px;font-weight:700}.invoice-panel{margin-bottom:10px}

/* Audit */
.audit-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}.audit-summary article{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}.audit-summary article>div{display:grid;gap:4px}.audit-summary small{color:var(--muted);font-size:9px}.audit-summary strong{font-size:17px}
.audit-feed{padding:0 17px 12px}.audit-feed article{display:grid;grid-template-columns:62px 36px 1fr 34px;align-items:start;gap:13px;padding:17px 0;border-top:1px solid var(--line)}.audit-feed article[hidden]{display:none}.audit-time{display:grid;gap:4px;direction:ltr;text-align:right}.audit-time strong{font-size:11px}.audit-time small{color:var(--muted);font-size:8px}.audit-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px}.audit-icon svg{width:15px;height:15px}.audit-icon.success{color:var(--green);background:var(--green-soft)}.audit-icon.info{color:var(--primary);background:var(--primary-soft)}.audit-icon.danger{color:var(--red);background:var(--red-soft)}.audit-icon.warn{color:var(--amber);background:var(--amber-soft)}.audit-copy>div{display:flex;align-items:center;gap:8px}.audit-copy strong{font-size:11px}.audit-copy p{margin:5px 0;color:var(--text);font-size:10px}.audit-copy small{color:var(--muted);font-size:8px;direction:ltr;display:block;text-align:right}.audit-type{padding:4px 7px;border-radius:6px;color:var(--primary);background:var(--primary-soft);font-size:8px}.audit-type.danger-tag{color:var(--red);background:var(--red-soft)}

/* API */
.api-status{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:15px;padding:16px 20px;border:1px solid #cfe4ff;border-radius:16px;background:linear-gradient(110deg,#f4f9ff,#fff)}[data-theme="dark"] .api-status{border-color:#183d67;background:linear-gradient(110deg,#10243b,#101722)}.api-status-main{display:flex;align-items:center;gap:11px}.api-status-main>div{display:grid;gap:4px}.api-status-main strong{font-size:12px}.api-status-main small{color:var(--muted);font-size:9px}.api-metrics{display:flex}.api-metrics span{min-width:105px;display:grid;gap:4px;padding-inline:17px;border-right:1px solid var(--line)}.api-metrics span:first-child{border:0}.api-metrics small{color:var(--muted);font-size:8px}.api-metrics strong{font-size:12px;direction:ltr}
.api-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:15px;margin-bottom:15px}.api-keys-panel,.endpoint-panel{padding-bottom:17px}.api-key-list{padding:12px 18px 4px}.api-key-list>div{display:grid;grid-template-columns:36px 1fr 29px 52px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.api-key-list>div:last-child{border:0}.api-key-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft)}.api-key-icon.test{color:#64738a;background:#eef1f5}[data-theme="dark"] .api-key-icon.test{background:#232a38}.api-key-icon svg{width:15px;height:15px}.api-key-list>div>div{display:grid;gap:3px}.api-key-list strong{font-size:10px}.api-key-list code{color:var(--muted);font-size:9px;direction:ltr;text-align:right}.api-key-list small{color:var(--muted);font-size:8px}.security-note{display:flex;gap:10px;margin:7px 18px 0;padding:12px;border-radius:11px;color:#4f718f;background:#eef7ff}.security-note svg{width:17px;height:17px;flex:0 0 auto;color:var(--primary)}.security-note p{display:grid;margin:0;gap:4px}.security-note strong{font-size:9px}.security-note small{font-size:8px;line-height:1.6}[data-theme="dark"] .security-note{color:#9cb7d2;background:#142b45}
.api-version{padding:5px 8px;border-radius:7px;color:var(--primary);background:var(--primary-soft);font-size:9px;font-weight:800}.base-url{display:flex;align-items:center;gap:7px;margin:15px 18px 9px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);direction:ltr}.base-url code{flex:1;color:var(--primary);font-size:9px;overflow:hidden;text-overflow:ellipsis}.endpoint-list{margin:0 18px}.endpoint-list>div{display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.endpoint-list>div:last-child{border:0}.method{display:grid;place-items:center;height:21px;border-radius:5px;font-size:7px;font-weight:900;direction:ltr}.method.post{color:#1476f2;background:#eaf3ff}.method.get{color:#16945f;background:#e7f7f0}[data-theme="dark"] .method.post{background:#102a4d}[data-theme="dark"] .method.get{background:#123226}.endpoint-list code{font-size:9px;direction:ltr;text-align:right}.endpoint-list small{color:var(--muted);font-size:8px}
.code-panel{overflow:hidden}.code-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}.code-panel-head>div:first-child{display:flex;align-items:center;gap:10px}.code-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft)}.code-icon svg{width:17px;height:17px}.code-panel h3{margin:0;font-size:12px}.code-panel p{margin:4px 0 0;color:var(--muted);font-size:9px}.code-tabs{display:flex;padding:3px;border-radius:8px;background:var(--surface-2)}.code-tabs button{padding:5px 11px;border:0;border-radius:6px;color:var(--muted);background:transparent;font-size:8px}.code-tabs button.active{color:var(--primary);background:var(--surface);font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.06)}.code-block{position:relative;display:flex;min-height:178px;padding:18px;color:#d5e7ff;background:#091628;direction:ltr}.code-lines{display:grid;align-content:start;gap:7px;padding-right:15px;color:#50627a;font:10px/1.45 monospace;text-align:right}.code-block pre{margin:0;padding-left:20px;overflow:auto;font:10px/1.7 Consolas,monospace}.code-block b{color:#57a8ff}.code-block i{color:#76d5a8;font-style:normal}.copy-code{position:absolute;top:13px;right:14px;display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #25405f;border-radius:7px;color:#9bb3cf;background:#11243b;font-size:8px}.copy-code svg{width:13px;height:13px}

/* Settings */
.settings-layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:15px}.settings-nav{height:max-content;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.settings-nav button{width:100%;display:grid;grid-template-columns:31px 1fr 16px;align-items:center;gap:10px;padding:11px 10px;border:0;border-radius:10px;color:var(--muted);background:transparent;text-align:right}.settings-nav button>svg:first-child{width:17px;height:17px}.settings-nav button span{display:grid;gap:3px}.settings-nav button strong{color:var(--text);font-size:10px}.settings-nav button small{font-size:8px}.settings-nav button .nav-arrow{width:13px;height:13px}.settings-nav button.active{color:var(--primary);background:var(--primary-soft)}.settings-nav button.active strong{color:var(--primary)}
.settings-section{display:none;padding-bottom:19px}.settings-section.active{display:block;animation:pageIn .2s ease}.settings-head{display:flex;align-items:center;gap:11px;padding:19px 20px;border-bottom:1px solid var(--line)}.settings-head>div{flex:1}.settings-head h3{margin:0;font-size:13px}.settings-head p{margin:5px 0 0;color:var(--muted);font-size:9px}.settings-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft)}.settings-icon svg{width:17px;height:17px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:19px 20px}.settings-form label{display:grid;gap:7px}.settings-form label span{font-size:10px;font-weight:700}.settings-form input,.settings-form select{height:41px;padding:0 11px;border:1px solid var(--line);border-radius:9px;outline:0;color:var(--text);background:var(--surface-2);font-size:10px}.settings-form input:focus,.settings-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.settings-divider{height:1px;margin:0 20px;background:var(--line)}.upload-logo{display:flex;align-items:center;gap:11px;margin:17px 20px 0;padding:13px;border:1px dashed #cbd7e7;border-radius:12px;background:var(--surface-2)}.brand-mark.small{width:38px;height:38px;padding:0;border:0}.upload-logo>span:nth-child(2){display:grid;gap:3px}.upload-logo strong{font-size:10px}.upload-logo small{color:var(--muted);font-size:8px}.upload-logo button{margin-right:auto}.policy-list{display:grid;gap:10px;padding:17px 20px}.policy-list .switch-row{margin:0}.field-row{display:flex;align-items:center;justify-content:space-between;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.field-row>span{display:grid;gap:4px}.field-row strong{font-size:10px}.field-row small{color:var(--muted);font-size:8px}.field-row>div{display:flex;align-items:center;gap:6px}.field-row input{width:65px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--surface);text-align:center}.field-row b{color:var(--muted);font-size:8px}.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 20px;padding:14px;border:1px solid #f6d9dd;border-radius:12px;background:var(--red-soft)}.danger-zone>div{display:grid;gap:4px}.danger-zone strong{font-size:10px}.danger-zone small{color:var(--muted);font-size:8px}.team-list{padding:4px 20px}.team-list>div{display:grid;grid-template-columns:36px 1fr 105px 55px 34px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.team-list>div:last-child{border:0}.team-list p{display:grid;margin:0;gap:3px}.team-list strong{font-size:10px}.team-list small{color:var(--muted);font-size:8px}.role{padding:5px 8px;border-radius:7px;color:#516176;background:#eef2f6;font-size:8px;text-align:center}.role.owner{color:var(--primary);background:var(--primary-soft)}[data-theme="dark"] .role{color:#a7b1c0;background:#232a38}

@media(max-width:1320px){.compact-stats{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:1fr}.customer-insights{grid-template-columns:1fr 1fr}.segment-card{grid-column:1/-1;grid-row:2}.plan-grid{grid-template-columns:1fr 1fr}.pricing-card:last-child{grid-column:1/-1}.audit-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.page-heading{align-items:flex-start}.compact-stats.three{grid-template-columns:1fr 1fr}.compact-stats.three article:last-child{grid-column:1/-1}.customer-insights{grid-template-columns:1fr}.segment-card{grid-column:auto;grid-row:auto}.security-banner,.api-status{align-items:flex-start;flex-direction:column}.security-kpis,.api-metrics{width:100%;margin:0}.security-kpis span,.api-metrics span{flex:1}.billing-overview{grid-template-columns:1fr 1fr}.revenue-card{grid-column:1/-1}.api-grid{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow-x:auto}.settings-nav button{min-width:190px}.settings-nav button .nav-arrow{display:none}}
@media(max-width:650px){.page-heading{flex-direction:column}.heading-actions{width:100%}.heading-actions button{flex:1}.compact-stats,.compact-stats.three,.audit-summary{grid-template-columns:1fr}.compact-stats.three article:last-child{grid-column:auto}.data-toolbar{align-items:stretch;flex-direction:column}.toolbar-search{width:100%}.toolbar-filters{overflow-x:auto}.toolbar-filters select{flex:1}.product-metrics{grid-template-columns:1fr}.product-metrics div{padding:9px 0;border:0;border-bottom:1px solid var(--line)}.product-metrics div:last-child{border:0}.billing-overview,.plan-grid{grid-template-columns:1fr}.revenue-card,.pricing-card:last-child{grid-column:auto}.security-kpis span,.api-metrics span{min-width:0;padding-inline:8px}.audit-feed article{grid-template-columns:48px 34px 1fr;gap:9px}.audit-feed article>.icon-button{display:none}.audit-copy>div{align-items:flex-start;flex-direction:column}.api-key-list>div{grid-template-columns:34px 1fr 28px}.api-key-list .status{grid-column:2}.code-panel-head{align-items:flex-start;gap:10px;flex-direction:column}.settings-form{grid-template-columns:1fr}.field-row{align-items:flex-start;gap:14px;flex-direction:column}.team-list>div{grid-template-columns:36px 1fr 34px}.team-list .role,.team-list .status{grid-column:2}.upload-logo{align-items:flex-start;flex-wrap:wrap}.upload-logo button{width:100%;margin:5px 0 0}.table-footer{align-items:flex-start;flex-direction:column}}

/* Readability */
.panel-head p,.health-list small,.client small,.date-cell small,.activity-item small,.page-heading .eyebrow,
.compact-stats small,.compact-stats em,.customer-total small,.billing-overview small,.product-name p,.product-metrics small,
.security-banner p,.security-kpis small,.customer-total p,.billing-overview p,.pricing-card>p,.pricing-card li,
.segment-head,.segment-legend,.audit-summary small,.audit-time small,.audit-copy small,.api-status-main small,.api-metrics small,
.api-key-list code,.api-key-list small,.security-note small,.endpoint-list small,.code-panel p,.settings-head p,.settings-nav button small,
.settings-form label span,.upload-logo small,.field-row small,.danger-zone small,.team-list small { font-size: 11px; }
th,.key-cell code,.client strong,.date-cell strong,.status,.device-name strong,.mono-chip,.key-plain,.plan-tag,
.product-metrics strong,.version-line,.plan-foot,.audit-copy strong,.audit-type,.api-key-list strong,.endpoint-list code,
.settings-nav button strong,.settings-head h3,.field-row strong,.danger-zone strong,.team-list strong,.role { font-size: 12px; }
td,.activity-item p,.toolbar-search input,.toolbar-filters select,.secondary-button,.text-button { font-size: 12px; }

/* Connectors marketplace */
.connector-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:15px; }
.connector-summary > article { min-height:94px; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }
.connector-summary > article > div { display:grid; gap:4px; min-width:0; }
.connector-summary small { color:var(--muted); font-size:11px; }
.connector-summary strong { font-size:18px; white-space:nowrap; }
.connector-summary p { margin:0; color:var(--muted); font-size:10px; }
.connector-summary .free-highlight { border-color:#ccebdc; background:linear-gradient(120deg,var(--surface),var(--green-soft)); }
.connector-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.connector-toolbar .toolbar-search { width:min(320px,36vw); }
.connector-filters { display:flex; align-items:center; gap:5px; overflow-x:auto; }
.connector-filters button { min-height:36px; padding:0 12px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:11px; font-weight:600; white-space:nowrap; }
.connector-filters button:hover { color:var(--primary); background:var(--primary-soft); }
.connector-filters button.active { color:white; background:var(--primary); box-shadow:0 7px 16px rgba(20,118,242,.18); }
.connectors-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.connector-card { position:relative; display:flex; flex-direction:column; min-height:390px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.connector-card:hover { transform:translateY(-2px); border-color:#c9def8; box-shadow:0 17px 38px rgba(28,55,92,.09); }
.connector-card[hidden] { display:none; }
.connector-card.premium-connector { border-color:#bfdbff; }
.connector-card.premium-connector::before { content:""; position:absolute; top:-105px; left:-90px; width:230px; height:230px; border-radius:50%; background:var(--primary-soft); opacity:.75; }
.connector-card.free-connector { border-color:#bfe6d3; background:linear-gradient(145deg,var(--surface) 68%,var(--green-soft)); }
.free-ribbon { position:absolute; top:16px; left:-33px; width:125px; padding:6px 0; color:white; background:var(--green); transform:rotate(-40deg); text-align:center; font-size:9px; font-weight:800; }
.connector-card-top { position:relative; display:flex; align-items:flex-start; justify-content:space-between; }
.connector-state { display:flex; align-items:center; gap:5px; }
.connector-icon { position:relative; width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:white; box-shadow:0 9px 22px rgba(20,50,90,.16); }
.connector-icon svg { width:22px; height:22px; }
.connector-icon.zoom { background:linear-gradient(145deg,#3f97ff,#1466db); }
.connector-icon.email { background:linear-gradient(145deg,#f05252,#c52d36); }
.connector-icon.ai { background:linear-gradient(145deg,#2086ff,#064fba); }
.connector-icon.hr { background:linear-gradient(145deg,#17b57a,#078b5b); }
.connector-icon.wps { background:linear-gradient(145deg,#0b527c,#062f53); }
.connector-icon.custom { background:linear-gradient(145deg,#1fc787,#0a9761); }
.connector-icon.calendar { background:linear-gradient(145deg,#2d87ff,#1262cf); }
.connector-icon.drive { background:linear-gradient(145deg,#f2b62d,#2c9b67); }
.connector-icon.calendar b { position:absolute; bottom:6px; font-size:9px; letter-spacing:-.4px; }
.connector-icon.calendar svg { opacity:.35; }
.connector-title { display:flex; align-items:baseline; gap:8px; margin-top:16px; }
.connector-title h3 { margin:0; font-size:15px; }
.connector-title > span { color:var(--muted); font-size:10px; direction:ltr; }
.connector-card > p { min-height:50px; margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.feature-chips,.provider-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:43px; margin-top:13px; }
.feature-chips span { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-2); font-size:9px; }
.feature-chips svg { width:12px; height:12px; color:var(--primary); }
.provider-row { row-gap:7px; }
.provider-row > span:not(.provider) { margin-left:5px; color:var(--muted); font-size:9px; }
.provider { width:23px; height:23px; display:grid; place-items:center; border-radius:7px; color:white; font-size:9px; font-weight:900; direction:ltr; }
.provider.google { background:linear-gradient(135deg,#4285f4 50%,#34a853 50%); }
.provider.outlook { background:#1473e6; }.provider.yahoo { background:#652d90; }.provider.chatgpt { background:#102e2a; }.provider.claude { background:#d67548; }.provider.gemini { background:linear-gradient(135deg,#3d78e8,#b05dd8); }
.connector-price { display:grid; grid-template-columns:1fr 1fr; margin-top:auto; padding:13px 0; border-block:1px solid var(--line); }
.connector-price > div { display:grid; gap:5px; padding-inline:12px; border-left:1px solid var(--line); }
.connector-price > div:first-child { padding-right:0; }.connector-price > div:last-child { border:0; }
.connector-price span { color:var(--muted); font-size:9px; }.connector-price strong { font-size:15px; }.connector-price strong small { font-size:9px; }.connector-price.free-price strong { color:var(--green); }
.provider-fee-note { margin-top:7px; color:var(--amber); font-size:9px; line-height:1.5; }
.connector-footer { display:flex; align-items:center; gap:9px; min-height:38px; padding-top:12px; }
.connector-footer > span { color:var(--muted); font-size:9px; }.connector-footer > span strong { color:var(--text); }
.connector-footer > button { margin-right:auto; padding:6px 9px; border:0; border-radius:7px; color:var(--primary); background:var(--primary-soft); font-size:9px; font-weight:700; }
.small-switch { display:inline-flex; cursor:pointer; }
.small-switch input { position:absolute; opacity:0; }
.small-switch i { position:relative; width:34px; height:19px; border-radius:99px; background:#c7ced9; transition:.2s; }
.small-switch i::after { content:""; position:absolute; top:2.5px; right:2.5px; width:14px; height:14px; border-radius:50%; background:white; box-shadow:0 2px 5px rgba(0,0,0,.18); transition:.2s; }
.small-switch input:checked + i { background:var(--primary); }.small-switch input:checked + i::after { transform:translateX(-15px); }

/* Customer device groups */
.device-groups-panel { overflow:hidden; }
.device-groups { padding:0 14px 13px; }
.device-group { margin-top:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; transition:border-color .2s ease; }
.device-group.open { border-color:#c4dcfa; box-shadow:0 8px 22px rgba(22,71,130,.055); }
.device-group[hidden] { display:none; }
.device-group-head { width:100%; display:grid; grid-template-columns:minmax(185px,1.15fr) minmax(150px,.95fr) minmax(170px,1fr) auto 24px; align-items:center; gap:16px; padding:13px 15px; border:0; color:var(--text); background:var(--surface); text-align:right; }
.device-group-head:hover { background:var(--surface-2); }
.group-license { display:grid; gap:5px; }.group-license small { color:var(--muted); font-size:9px; }.group-license code { color:var(--primary); font-size:10px; direction:ltr; text-align:right; }
.group-count { display:flex; align-items:center; gap:9px; }.group-count > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--primary); background:var(--primary-soft); }
.group-count svg { width:15px; height:15px; }.group-count p { display:grid; gap:4px; margin:0; }.group-count strong { font-size:10px; }.group-count small { color:var(--muted); font-size:9px; }
.group-chevron { width:16px; height:16px; color:var(--muted); transition:transform .2s ease; }.device-group.open .group-chevron { transform:rotate(180deg); }
.device-group-body { display:none; border-top:1px solid var(--line); background:var(--surface-2); }
.device-group.open .device-group-body { display:block; animation:pageIn .2s ease; }
.device-group-body table { min-width:900px; }.device-group-body th { background:color-mix(in srgb,var(--surface-2),var(--surface) 35%); }.device-group-body td { background:var(--surface); }

@media(max-width:1320px){.connector-summary{grid-template-columns:repeat(2,1fr)}.connectors-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.connector-toolbar{align-items:stretch;flex-direction:column}.connector-toolbar .toolbar-search{width:100%}.device-group-head{grid-template-columns:1fr auto auto}.device-group-head .group-license{grid-column:1}.device-group-head .group-count{grid-column:1}.device-group-head>.status{grid-column:2;grid-row:1}.device-group-head>.group-chevron{grid-column:3;grid-row:1}}
@media(max-width:650px){.connector-summary,.connectors-grid{grid-template-columns:1fr}.device-group-head{grid-template-columns:1fr auto;gap:10px}.device-group-head .group-license,.device-group-head .group-count{grid-column:1/-1}.device-group-head>.status{grid-column:1;grid-row:auto;width:max-content}.device-group-head>.group-chevron{grid-column:2;grid-row:1}}

.connector-summary p,.connector-title>span,.connector-card>p,.feature-chips span,.provider-row>span:not(.provider),
.connector-price span,.connector-price strong small,.provider-fee-note,.connector-footer>span,.connector-footer>button,
.group-license small,.group-license code,.group-count strong,.group-count small { font-size:11px; }

/* Customer detail workspace */
.customer-detail-backdrop{z-index:95;align-items:center}.customer-detail-modal{width:min(1240px,calc(100vw - 44px));max-height:calc(100vh - 44px);overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--surface-2);box-shadow:0 28px 90px rgba(5,17,36,.3);transform:translateY(18px) scale(.985);transition:.25s ease}.customer-detail-backdrop.open .customer-detail-modal{transform:none}.customer-detail-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--surface)}.customer-identity{display:flex;align-items:center;gap:14px}.customer-avatar-xl{position:relative;width:56px;height:56px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;color:white;background:linear-gradient(145deg,#2688ff,#0758bf);font-size:17px;font-weight:900;direction:ltr;box-shadow:0 10px 24px rgba(20,118,242,.24)}.customer-avatar-xl i{position:absolute;left:-2px;bottom:-2px;width:13px;height:13px;border:3px solid var(--surface);border-radius:50%;background:var(--green)}.customer-code{color:var(--primary);font-size:9px;font-weight:800}.customer-name-line{display:flex;align-items:center;gap:9px;margin:3px 0}.customer-name-line h2{margin:0;font-size:19px}.customer-identity p{margin:0;color:var(--muted);font-size:10px}.customer-header-actions{display:flex;align-items:center;gap:8px}.customer-detail-body{display:grid;grid-template-columns:245px minmax(0,1fr);height:min(690px,calc(100vh - 145px));overflow:hidden}.customer-profile-card{padding:20px 17px;overflow-y:auto;border-left:1px solid var(--line);background:var(--surface)}.profile-section{display:grid;gap:13px}.detail-label{margin-bottom:1px;color:var(--muted);font-size:9px;font-weight:800}.profile-section>a,.profile-item{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}.profile-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:9px;color:var(--primary);background:var(--primary-soft)}.profile-icon svg{width:14px;height:14px}.profile-section>a>div,.profile-item>div{display:grid;gap:3px;min-width:0}.profile-section small{color:var(--muted);font-size:8px}.profile-section strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.profile-divider{height:1px;margin:19px 0;background:var(--line)}.account-meta{display:grid;gap:12px}.account-meta div{display:flex;align-items:center;justify-content:space-between;gap:10px}.account-meta small{color:var(--muted);font-size:8px}.account-meta strong{font-size:9px}.customer-main-detail{padding:17px 19px 24px;overflow-y:auto}.customer-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.customer-kpis article{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.kpi-icon{width:37px;height:37px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px}.kpi-icon svg{width:16px;height:16px}.kpi-icon.blue{color:var(--primary);background:var(--primary-soft)}.kpi-icon.cyan{color:#138aaa;background:#e5f7fb}.kpi-icon.green{color:var(--green);background:var(--green-soft)}.kpi-icon.amber{color:var(--amber);background:var(--amber-soft)}[data-theme="dark"] .kpi-icon.cyan{background:#13303a}.customer-kpis article>div{display:grid;gap:2px}.customer-kpis small{color:var(--muted);font-size:8px}.customer-kpis strong{font-size:17px}.customer-kpis strong b{font-size:8px}.customer-kpis p{margin:0;color:var(--muted);font-size:8px}.customer-tabs{display:flex;align-items:center;gap:3px;margin:16px 0 13px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.customer-tabs button{display:flex;align-items:center;gap:6px;padding:8px 13px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:10px;font-weight:700;white-space:nowrap}.customer-tabs button b{min-width:18px;padding:2px 5px;border-radius:99px;background:var(--surface-2);font-size:8px}.customer-tabs button.active{color:var(--primary);background:var(--primary-soft)}.customer-tab-panel{display:none}.customer-tab-panel.active{display:block;animation:pageIn .2s ease}.customer-overview-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.detail-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.detail-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line)}.detail-card-head h3{margin:0;font-size:11px}.detail-card-head p{margin:3px 0 0;color:var(--muted);font-size:8px}.mini-license-list article{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line)}.mini-license-list article:last-child{border:0}.product-badge{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft)}.product-badge.legal{color:#17845d;background:var(--green-soft)}.product-badge svg{width:16px;height:16px}.mini-license-list article>div{display:grid;gap:4px}.mini-license-list strong{font-size:10px}.mini-license-list small{color:var(--muted);font-size:8px}.mini-license-list code{color:var(--primary);font-size:8px}.mini-license-list article>span:last-child{display:grid;justify-items:end;gap:5px}.customer-addons{padding:4px 14px}.customer-addons article{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.customer-addons article:last-child{border:0}.addon-dot{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;color:white}.addon-dot svg{width:14px;height:14px}.addon-dot.ai{background:#176fd8}.addon-dot.calendar{background:#2688ff}.addon-dot.custom{background:#17a66c}.customer-addons article>div{display:grid;gap:3px}.customer-addons strong,.customer-addons>b{font-size:9px}.customer-addons small{color:var(--muted);font-size:8px}.free-text{color:var(--green)}.customer-wide-card{grid-column:1/-1}.live-update{display:flex;align-items:center;gap:5px;color:var(--green);font-size:8px}.live-update i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.customer-timeline{padding:3px 15px}.customer-timeline article{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.customer-timeline article:last-child{border:0}.timeline-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;color:var(--primary);background:var(--primary-soft)}.timeline-icon.success{color:var(--green);background:var(--green-soft)}.timeline-icon.payment{color:var(--amber);background:var(--amber-soft)}.timeline-icon svg{width:13px;height:13px}.customer-timeline div{display:grid;gap:3px}.customer-timeline strong{font-size:9px}.customer-timeline p{margin:0;color:var(--muted);font-size:8px}.customer-timeline time{color:var(--muted);font-size:8px}.detail-empty-state{min-height:340px;display:grid;place-items:center;align-content:center;gap:9px;padding:35px;text-align:center;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.detail-empty-state>span{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;color:var(--primary);background:var(--primary-soft)}.detail-empty-state>span svg{width:22px;height:22px}.detail-empty-state h3{margin:3px 0 0;font-size:14px}.detail-empty-state p{max-width:410px;margin:0 0 6px;color:var(--muted);font-size:10px;line-height:1.7}
@media(max-width:1000px){.customer-detail-body{grid-template-columns:1fr;overflow-y:auto}.customer-profile-card{display:none}.customer-main-detail{overflow:visible}.customer-kpis{grid-template-columns:repeat(2,1fr)}.customer-detail-header{align-items:flex-start}.customer-header-actions .secondary-button{display:none}.customer-overview-grid{grid-template-columns:1fr}.customer-wide-card{grid-column:auto}}
@media(max-width:650px){.customer-detail-backdrop{padding:0}.customer-detail-modal{width:100%;max-height:100vh;height:100vh;border:0;border-radius:0}.customer-detail-header{padding:15px}.customer-identity{gap:10px}.customer-avatar-xl{width:46px;height:46px;border-radius:13px}.customer-name-line h2{font-size:15px}.customer-identity p{max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-header-actions .primary-button{display:none}.customer-detail-body{height:calc(100vh - 78px)}.customer-main-detail{padding:13px}.customer-kpis{grid-template-columns:1fr 1fr}.customer-kpis article{padding:10px}.customer-tabs{overflow-x:auto}.customer-tabs button{padding-inline:11px}.mini-license-list article{grid-template-columns:35px 1fr}.mini-license-list article>span:last-child{grid-column:2;justify-items:start}.customer-timeline article{grid-template-columns:30px 1fr}.customer-timeline time{grid-column:2}}