/* STEP033 product system. Geometry and palette follow the approved Stage 1. */
:root {
  --bg: #f5f7fc; --surface: #fff; --surface-muted: #f8faff; --surface-subtle: #eef2fc;
  --text: #17243b; --text-muted: #53627a; --text-soft: #65758e;
  --secondary: #53627a; --muted: #65758e; --border: #e2e8f3; --border-strong: #ccd7ec;
  --primary: #3b5bdb; --primary-hover: #304bc2; --primary-soft: #eaf0ff;
  --indigo: #4f46e5; --violet: #7c3aed; --radius: 16px;
  --shadow: 0 4px 24px #21356b06; --focus: 0 0 0 3px #7b90ed66;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.5; }
[hidden] { display: none !important; }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: -1.1px; font-weight: 750; }
h2 { font-size: 17px; line-height: 1.35; letter-spacing: -.25px; }
h3 { font-size: 15px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.app-shell { grid-template-columns: 236px minmax(0, 1fr); }
.main-wrap { min-width: 0; }
.sidebar { padding: 28px 18px 16px; background: white; border-right: 1px solid var(--border); gap: 0; }
.brand-row { padding: 0 10px 29px; border: 0; flex-shrink: 0; gap: 11px; }
.brand-mark { width: 37px; height: 41px; border-radius: 12px; background: linear-gradient(145deg,#5876ef,#4f46e5); box-shadow: 0 5px 12px #4f46e52b; }
.brand-mark .icon { width: 26px; height: 26px; }
.brand-copy strong { font-size: 25px; font-weight: 800; letter-spacing: -.8px; line-height: 1.3; }
.brand-copy span { color: #718099; font-size: 8px; letter-spacing: 1.8px; font-weight: 600; }
.workspace { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 24px; }
.workspace strong { font-size: 12px; }
.workspace small { display: block; font-size: 10px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #dce5ff; border-radius: 13px; background: linear-gradient(135deg,#e5edff,#d7e4ff); color: #3b5bca; font-size: 15px; font-weight: 750; }
.avatar.tiny { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.nav-main { display: flex; flex-direction: column; gap: 0; flex-shrink: 1; }
.max-workspace { min-width: 0; }
.max-workspace .panel { margin-top: 16px; overflow-wrap: anywhere; }
.max-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.max-tabs [aria-current="page"] { border-color: var(--primary); color: var(--primary); }
.max-capabilities { display: grid; gap: 12px; padding-left: 20px; }
.max-capabilities li { overflow-wrap: anywhere; }
.max-workspace [hidden] { display: none !important; }
.nav-caption { margin: 20px 12px 10px; font-size: 10px; letter-spacing: .8px; font-weight: 700; flex-shrink: 0; }
.nav-item { justify-content: flex-start; gap: 11px; min-height: 43px; padding: 10px 12px; font-size: 13px; font-weight: 550; color: var(--text-muted); margin-bottom: 4px; flex-shrink: 0; }
.nav-item .icon { width: 18px; height: 18px; color: #72829d; }
.nav-item.active { box-shadow: none; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.nav-item.active .icon { color: var(--primary); }
.nav-item:hover { background: #f3f6fc; color: var(--primary); }
.sidebar-bottom { padding-top: 20px; flex-shrink: 0; }
.account-mini { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 15px 2px 0; }
.account-mini > span { border-radius: 9px; width: 32px; height: 32px; }
.account-mini div { font-size: 12px; }
.account-mini small { font-size: 10px; }
.utility { height: 69px; padding: 0 32px; background: #ffffffa6; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--text-muted); font-size: 11px; }
.utility > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.utility b { padding: 0 13px; color: #a3aec2; font-weight: 400; }
.utility-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.utility-right .icon { color: var(--indigo); width: 14px; height: 14px; }
.app-main { padding: 32px; max-width: none; }
.topbar, .page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.topbar > div, .page-head > div { min-width: 0; }
.topbar h1, .page-head h1 { margin: 9px 0 10px; overflow-wrap: anywhere; }
.page-head p:not(.eyebrow) { color: var(--text-muted); font-size: 14px; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; color: var(--indigo); font-weight: 750; margin-bottom: 7px; }
.heading-dot { color: var(--indigo); }
.button { border-radius: 9px; min-height: 40px; padding: 10px 16px; font-size: 13px; font-weight: 650; gap: 9px; }
.button.primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 8px #3b5bdb16; }
.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.small { min-height: 32px; font-size: 12px; }
.panel, .product-card { padding: 24px 22px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel.compact { padding: 22px; }
.section-head { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
.section-head > :first-child { flex: 1 1 auto; }
.topbar .eyebrow, .page-head .eyebrow { color: var(--indigo); }
.product-card a:not(.button):not(.text-link) { color: inherit; }
.group-command-center { display: block; max-width: none; }
.group-command-center > .panel { margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-head p { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 18px; }
.text-link { color: var(--primary); font-size: 12px; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.text-link .icon { width: 15px; height: 15px; }
.period { background: #f7f9fe; border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-size: 11px; color: var(--text-muted); }
.badge { font-size: 11px; padding: 4px 8px; border-radius: 5px; }
.welcome { position: relative; overflow: hidden; border: 1px solid #dce2ff; border-radius: 16px; padding: 30px 32px; min-height: 246px; background: linear-gradient(110deg,#edf2ff,#eeeefe 65%,#e9e9ff); margin-bottom: 22px; }
.welcome-copy { position: relative; z-index: 1; max-width: 65%; }
.welcome-tag { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; color: var(--indigo); }
.welcome-tag .icon { width: 14px; height: 14px; }
.welcome h2 { font-size: 29px; line-height: 1.15; letter-spacing: -.8px; margin: 16px 0 12px; }
.welcome p { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.7; }
.welcome .badge { margin-right: 8px; }
.security-art { position: absolute; right: 35px; top: -18px; width: 420px; height: 290px; display: grid; place-items: center; }
.orbit { border: 1px solid #dcdfff; border-radius: 50%; position: absolute; width: 310px; height: 310px; }
.orbit-two { width: 225px; height: 225px; }
.shield-art { width: 116px; height: 130px; background: linear-gradient(140deg,#7576f5,#5145d3); clip-path: polygon(50% 0,96% 17%,94% 65%,78% 84%,50% 100%,22% 84%,6% 65%,4% 17%); color: white; display: grid; place-items: center; transform: rotate(10deg); }
.shield-art .icon { width: 64px; height: 64px; }
.art-chip { position: absolute; background: #ffffffed; border-radius: 11px; padding: 11px 14px; font-size: 10px; font-weight: 700; box-shadow: 0 8px 24px #4f46e508; display: flex; align-items: center; gap: 8px; }
.art-chip .icon { color: var(--violet); width: 16px; height: 16px; }
.chip-one { right: 30px; top: 57px; transform: rotate(4deg); }
.chip-two { bottom: 47px; left: 32px; transform: rotate(-4deg); }
.product-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.product-kpi { padding: 20px; background: white; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 13px; }
.product-kpi > strong { display: block; font-size: 30px; letter-spacing: -1px; line-height: 1.2; margin: 10px 0; }
.product-kpi small { font-size: 12px; color: var(--text-muted); }
.icon-box { display: inline-grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; flex-shrink: 0; }
.icon-box .icon { width: 19px; height: 19px; }
.blue { color: #4762ed; background: #edf1ff; } .violet { color: #9355ef; background: #f2ebff; } .amber { color: #cc850c; background: #fff5e5; } .rose { color: #ed527d; background: #ffedf2; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); gap: 20px; margin-bottom: 22px; }
.dashboard-grid.lower { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: start; }
.recent-command-row { min-width: 0; }
.recent-command-row strong, .recent-command-row small { overflow-wrap: anywhere; }
.recent-command-row time { flex-shrink: 0; }
.recent-command-row em, .recent-command-row .event-detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.recent-command-row .text-link { justify-content: flex-start; font-size: 11px; }
.chart-legend { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; color: var(--text-muted); margin: 20px 0; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); margin-right: 6px; }
.chart-total { font-size: 21px; font-weight: 700; color: var(--text); }
.chart-total small { font-size: 10px; margin-left: 8px; color: var(--text-muted); font-weight: 400; }
.product-chart { display: flex; gap: 12px; height: 198px; margin-top: 24px; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: var(--muted); padding-bottom: 28px; min-width: 30px; }
.plot { flex: 1; min-width: 0; }
.plot svg { width: 100%; height: 170px; overflow: visible; display: block; }
.gridline { stroke: #e4eafb; stroke-dasharray: 4 5; fill: none; }
.x-axis { display: flex; justify-content: space-between; font-size: 8px; color: var(--muted); padding-top: 14px; gap: 2px; }
.x-axis span { min-width: 0; }
.chart-empty { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.chart-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; font-size: 9px; color: var(--text-muted); }
.attention-callout { background: #fffbf5; border: 1px solid #f4e1c4; padding: 16px; border-radius: 10px; margin-bottom: 14px; overflow-wrap: anywhere; }
.attention-callout h3 { font-size: 13px; margin: 10px 0 7px; }
.attention-callout p { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.community-row { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-top: 1px solid #edf0f8; }
.community-name { flex: 1; min-width: 0; }
.community-name strong { display: block; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.community-name small { display: block; font-size: 11px; color: var(--text-muted); }
.feed-row { border-bottom: 1px solid var(--border); padding: 14px 0; overflow-wrap: anywhere; }
.feed-row p, .feed-row small { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.number-badge { background: #edf0ff; color: var(--primary); border-radius: 6px; padding: 3px 7px; font-size: 11px; }
.groups-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.product-tabs { display: flex; gap: 5px; background: #eaeef8; padding: 4px; border-radius: 9px; }
.product-tab { border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer; background: transparent; font-size: 12px; color: var(--text-muted); }
.product-tab.active { background: white; color: var(--primary); font-weight: 650; box-shadow: 0 1px 5px #17243b0b; }
.group-search { display: flex; align-items: center; gap: 9px; background: white; border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; width: 220px; }
.group-search input { border: 0; padding: 0; width: 100%; min-width: 0; min-height: 0; height: 21px; background: none; font-size: 13px; box-shadow: none; }
.group-search .icon { width: 16px; color: var(--muted); }
.group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.workspace-card { background: white; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.workspace-top { height: 84px; background: linear-gradient(120deg,#eff4ff,#e8eeff); padding: 20px 20px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.workspace-top.purple { background: linear-gradient(120deg,#f6f1ff,#efe9ff); }
.workspace-top > .avatar { width: 56px; height: 56px; border: 3px solid white; border-radius: 16px; position: relative; top: 12px; background: #dbe6ff; font-size: 18px; }
.connection { font-size: 10px; color: #536f80; background: #ffffffba; border: 1px solid white; padding: 3px 7px; border-radius: 5px; }
.workspace-content { padding: 22px 20px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.workspace-content h2 { font-size: 16px; line-height: 1.4; min-height: 44px; margin: 0 0 7px; overflow-wrap: anywhere; }
.workspace-permissions, .workspace-expiry { font-size: 11px; color: var(--text-muted); }
.workspace-expiry { margin: -12px 0 14px; }
.username { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; margin: 0 0 14px; }
.workspace-content > .badge { align-self: flex-start; }
.workspace-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #edf0f8; border-bottom: 1px solid #edf0f8; padding: 15px 0; margin: 18px 0 12px; }
.workspace-metrics > div + div { border-left: 1px solid var(--border); padding-left: 20px; }
.workspace-metrics dt { color: var(--text-muted); font-size: 12px; }
.workspace-metrics dd { margin: 3px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.subscription { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.workspace-content > .button { margin-top: auto; display: flex; justify-content: space-between; width: 100%; }
.workspace-issue { font-size: 11px; color: var(--warning); margin: 0 0 12px; overflow-wrap: anywhere; }
.workspace-content .badge .icon, .subscription .icon { width: 14px; height: 14px; }
.add-workspace { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; border: 1px dashed #c5d0ff; border-radius: 16px; min-height: 310px; padding: 24px; text-align: center; }
.add-workspace > .icon-box { width: 58px; height: 58px; border-radius: 17px; }
.add-workspace p { font-size: 12px; color: var(--text-muted); }
.group-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.group-identity > .avatar { width: 65px; height: 65px; border-radius: 18px; font-size: 22px; }
.group-identity > div { min-width: 0; }
.group-identity h1 { font-size: 28px; }
.back { display: inline-block; font-size: 11px; color: var(--text-muted); margin-bottom: 20px; }
.protection-banner { display: flex; align-items: center; gap: 18px; padding: 26px; border: 1px solid #dce2ff; background: linear-gradient(100deg,#edf2ff,#f6f4ff); border-radius: 16px; margin-bottom: 26px; }
.protection-banner.has-error { background: #fffaf1; border-color: #f0dcba; }
.protection-icon { width: 58px; height: 65px; border: 1px solid #dce2ff; border-radius: 16px; background: white; color: var(--indigo); display: grid; place-items: center; flex-shrink: 0; }
.protection-icon .icon { width: 32px; height: 32px; }
.protection-copy { flex: 1; min-width: 0; }
.protection-copy h2 { font-size: 20px; margin: 0 0 8px; }
.protection-copy p { font-size: 13px; color: var(--text-muted); margin: 0; }
.protection-copy .eyebrow { font-size: 9px; margin-bottom: 5px; }
.permission-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.permission-list .icon { width: 12px; height: 12px; color: var(--primary); }
.access-summary { display: flex; align-items: center; gap: 12px; border-left: 1px solid #d6dcff; padding-left: 24px; max-width: 25%; }
.access-summary > .icon { color: var(--primary); }
.access-summary strong { font-size: 11px; display: block; }
.access-summary small { display: block; font-size: 10px; color: var(--text-muted); }
.moderation-total { margin: 30px 0 24px; display: flex; align-items: baseline; gap: 12px; }
.moderation-total strong { font-size: 34px; letter-spacing: -1px; }
.moderation-total span { font-size: 10px; color: var(--text-muted); }
.reason-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin: 14px 0; font-size: 11px; color: var(--text-muted); }
.reason-row .bar { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: #edf1fa; }
.reason-row .bar i { display: block; height: 100%; background: #6265ed; border-radius: 4px; }
.product-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 24px; }
.product-module { display: flex; flex-direction: column; gap: 12px; }
.product-module h3 { margin: 0; font-size: 14px; }
.product-module p { color: var(--text-muted); font-size: 12px; flex: 1; margin: 0; }
.journal-row { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); min-width: 0; }
.journal-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.journal-row strong { font-size: 13px; }
.journal-row p { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.journal-row time { color: var(--text-muted); font-size: 10px; }
.upcoming-list a span { overflow-wrap: anywhere; }
.page-footer { display: flex; justify-content: space-between; gap: 12px; padding: 24px 0 0; margin-top: 30px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); }
/* Existing functional screens share the product surfaces; editors keep their state machines. */
input, select, textarea { border-color: var(--border-strong); border-radius: 8px; }
.tab-nav { background: #eaeef8; border: 0; border-radius: 9px; padding: 4px; gap: 5px; }
.tab-nav a { border: 0; border-radius: 6px; color: var(--text-muted); }
.tab-nav a.active { background: white; color: var(--primary); box-shadow: 0 1px 5px #17243b0b; }
.kpi-card { border-radius: 16px; padding: 20px; }
.analytics-kpis, .users-kpis { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 16px; }
.analytics-list small { display: block; margin-top: 5px; }
.analytics-list > div { gap: 16px; padding: 12px 0; }
.table-wrap, .users-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
.data-table th { background: #f8faff; color: var(--text-muted); font-size: 11px; letter-spacing: .3px; }
.data-table td { padding: 14px 12px; border-color: var(--border); }
.data-table tbody tr:hover { background: #fafbff; }
.bar-track i { background: linear-gradient(90deg,#3b5bdb,#8b5cf6); }
.users-center > .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.users-table { overflow-x: auto; max-width: 100%; min-width: 0; }
.users-filter { background: #f8faff; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.control-center-hero, .protection-hero { background: linear-gradient(120deg,#f4f6ff,#f4f0ff); }
.hour-bar i { background: linear-gradient(180deg,#3b5bdb,#b8bbfb); }
.avatar-initials { background: linear-gradient(135deg,#3b5bdb,#9278ef); }
.module-catalog-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.module-icon { background: #edf1ff; color: var(--primary); border-radius: 12px; }
.module-card-head { gap: 14px; }
.module-status-line { background: #f8faff; border-radius: 9px; padding: 12px; }
.users-row { background: white; border-width: 0 0 1px; border-radius: 0; padding: 14px 12px; font-size: 12px; }
.users-head { background: #f8faff; font-size: 10px; }
.users-table { gap: 0; border: 1px solid var(--border); border-radius: 10px; }
.users-table > .users-row { min-width: 1120px; }
.statistics-center .daily-chart { margin-top: 22px; }
@media (min-width:1700px) { .app-main { padding: 36px 48px; } }
@media (max-width:1200px) {
  .group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .security-art { right: -50px; }
}
@media (max-width:1000px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .sidebar { padding: 24px 12px 14px; }
  .brand-row { padding-left: 4px; gap: 8px; }
  .brand-copy strong { font-size: 23px; }
  .app-main { padding: 24px; }
  .utility { padding: 0 24px; }
  .dashboard-grid, .dashboard-grid.lower { grid-template-columns: minmax(0,1fr); }
  .product-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .groups-toolbar { flex-wrap: wrap; }
  .welcome-copy { max-width: 75%; }
  .security-art { right: -140px; opacity: .6; }
  .access-summary { max-width: 30%; padding-left: 14px; }
}
@media (min-width:701px) and (max-width:900px) {
  .app-shell { grid-template-columns: 190px minmax(0,1fr); }
  .sidebar { padding: 24px 10px 16px; }
  .brand-row { gap: 7px; padding-left: 7px; }
  .brand-copy strong { font-size: 23px; }
  .brand-copy span { font-size: 7px; letter-spacing: 1.4px; }
  .workspace { gap: 7px; padding: 10px 6px; }
  .workspace strong { font-size: 10px; }
  .workspace small { font-size: 9px; }
  .nav-item { font-size: 12px; gap: 8px; }
}
@media (max-width:700px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; padding: 16px 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand-row { padding: 0; min-height: 42px; }
  .brand-copy strong { font-size: 25px; }
  .button.navigation-toggle { display: inline-flex; margin-left: auto; min-height: 36px; padding: 7px 10px; }
  .sidebar.navigation-ready .nav-main, .sidebar.navigation-ready .sidebar-bottom { display: none; }
  .sidebar.navigation-open .nav-main { display: flex; max-height: 55dvh; overflow-y: auto; padding-top: 20px; }
  .sidebar.navigation-open .sidebar-bottom { display: grid; padding-top: 8px; }
  .workspace { margin-bottom: 12px; }
  .utility { height: 43px; padding: 0 20px; font-size: 9px; }
  .utility-right { font-size: 0; }
  .utility-right .icon { width: 14px; }
  .app-main { padding: 24px 20px; }
  .page-head, .topbar { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 23px; }
  h1 { font-size: 28px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .page-head p:not(.eyebrow) { font-size: 13px; line-height: 1.7; }
  .welcome { padding: 24px 22px; min-height: 245px; margin-bottom: 17px; }
  .welcome h2 { font-size: 27px; }
  .welcome-tag { font-size: 8px; }
  .welcome p { font-size: 12px; }
  .welcome-copy { max-width: 230px; }
  .security-art { right: -135px; top: 35px; opacity: .35; transform: scale(.85); }
  .art-chip { display: none; }
  .product-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-bottom: 17px; }
  .product-kpi { padding: 14px; }
  .product-kpi > strong { font-size: 27px; margin: 9px 0 5px; }
  .product-kpi small { font-size: 11px; }
  .kpi-top { font-size: 11px; align-items: flex-start; }
  .kpi-top .icon-box { width: 25px; height: 25px; border-radius: 7px; }
  .kpi-top .icon { width: 14px; height: 14px; }
  .dashboard-grid { gap: 17px; margin-bottom: 17px; }
  .product-card, .panel, .panel.compact { padding: 19px 17px; }
  .section-head { gap: 10px; margin-bottom: 18px; }
  .section-head p { font-size: 11px; }
  .text-link { font-size: 11px; }
  .product-chart { height: 182px; gap: 6px; }
  .plot svg { height: 155px; }
  .x-axis { font-size: 7px; }
  .chart-total { font-size: 20px; }
  .chart-total small { display: block; text-align: right; }
  .chart-footer { font-size: 8px; }
  .community-row > .icon { display: none; }
  .community-row .avatar { width: 35px; height: 35px; border-radius: 11px; font-size: 12px; }
  .community-name strong { font-size: 11px; }
  .community-name small { font-size: 10px; }
  .community-row .badge { font-size: 8px; padding: 3px 5px; }
  .group-grid { grid-template-columns: minmax(0,1fr); gap: 17px; }
  .groups-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .product-tabs { width: 100%; }
  .product-tab { font-size: 10px; padding: 9px; flex: 1; }
  .group-search { width: 100%; }
  .group-identity { gap: 12px; }
  .group-identity h1 { font-size: 25px; }
  .group-identity > .avatar { width: 50px; height: 50px; font-size: 18px; }
  .protection-banner { padding: 20px 17px; gap: 12px; flex-wrap: wrap; }
  .protection-icon { width: 42px; height: 48px; border-radius: 12px; }
  .protection-icon .icon { width: 26px; height: 26px; }
  .protection-copy h2 { font-size: 17px; }
  .protection-copy p { font-size: 12px; }
  .permission-list { font-size: 10px; gap: 7px; }
  .access-summary { max-width: 100%; width: 100%; border-left: 0; border-top: 1px solid #d6dcff; padding: 12px 0 0; margin-top: 4px; }
  .product-module-grid { gap: 11px; }
  .product-module h3 { font-size: 13px; }
  .product-module p { font-size: 11px; }
  .journal-row strong { font-size: 11px; }
  .journal-row p { font-size: 10px; }
  .journal-row time { font-size: 9px; }
  .page-footer { flex-direction: column; font-size: 8px; }
  .analytics-kpis, .users-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}