.domain-card {padding: 22px; min-width: 0; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s;}
.domain-card.is-primary {border-color: var(--accent-line); box-shadow: inset 0 3px var(--accent), var(--shadow);}
.domain-heading {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.domain-heading h2 {font-size: 16px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; color: var(--ink);}
.domain-role {padding: 4px 9px; flex: none; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--ink-muted); background: var(--surface-raised);}
.is-primary .domain-role {color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);}
.domain-card .mono {margin: 20px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; color: var(--ink);}
.domain-card .form-actions {margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;}
.domain-card .button {padding: 9px 11px; min-width: 0; font-size: 12px;}
@media (max-width: 760px) {.configuration-grid.domain-grid {grid-template-columns: minmax(0, 1fr);}}
/* Local Galaxy/Uiverse adaptations: Yaya12085 rude-mouse-79 segmented surface,
   aadium unlucky-seahorse-76 inset icon tiles, adamgiebl new-lionfish-4 layered
   card edge. MIT originals and attribution: deploy/licenses/ui/. */
:root {
  --accent: #82b4ed; --accent-soft: #82b4ed1c; --accent-line: #82b4ed40;
  --surface: #1b232e; --surface-raised: #242f3d; --canvas: #121922;
  --ink: #eaf0f6; --ink-muted: #a0afc1; --border: #354354;
  --sidebar-surface: #1a232f; --sidebar-well: #141d28;
  --primary-start: #3877b9; --primary-end: #2e629b;
  --shadow: 0 5px 18px #050c1429; --hover-shadow: 0 12px 30px #050c1440;
  --cyan: var(--accent); --purple: #6ec4c9; --green: #6dd1b5; --red: #f69aab;
}
:root:not([data-theme=dark]) {
  --accent: #6851ce; --accent-soft: #7357d912; --accent-line: #7357d930;
  --surface: #fff; --surface-raised: #f5f3fc; --canvas: #f2f1f8;
  --ink: #302b4d; --ink-muted: #77728e; --border: #e5e1f0;
  --sidebar-surface: #f9f7ff; --sidebar-well: #efeafa;
  --primary-start: #7b5be1; --primary-end: #6450c7;
  --shadow: 0 5px 20px #45346e07; --hover-shadow: 0 12px 28px #45346e14;
  --cyan: var(--accent); --purple: #9371d5; --green: #227a68; --red: #b84260;
}
body {background: var(--canvas); font-family: 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif;}
.clipboard-buffer {position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; padding: 0; border: 0; font-size: 16px;}
.system-pill {--system-tone: var(--accent); display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--system-tone) 25%, var(--border)); background: color-mix(in srgb, var(--system-tone) 9%, var(--surface)); color: var(--system-tone); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: middle;}
.system-pill.android {--system-tone: var(--green);}
.system-pill.unknown {--system-tone: var(--ink-muted);}
.system-pill-dot {width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor;}
.system-pill-version {padding-left: 7px; border-left: 1px solid color-mix(in srgb, var(--system-tone) 25%, transparent); font-variant-numeric: tabular-nums;}
.binding-state {display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--ink-muted); font-size: 11px; white-space: nowrap;}
.version-overview p .system-pill, .installed-version-strip .system-pill {margin-left: 8px; padding: 2px 8px; font-size: 10px;}
.shell {grid-template-columns: 278px minmax(0, 1fr); padding: 16px; gap: 24px; align-items: start;}
.sidebar {position: sticky; top: 16px; height: calc(100dvh - 32px); padding: 23px 14px 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--sidebar-surface); box-shadow: var(--shadow); overflow: hidden;}
.sidebar .brand {padding: 0 11px 22px; gap: 13px;}
.brand img {width: 48px; height: 48px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 10px #5542760a;}
.brand strong {font-size: 20px; letter-spacing: .7px; color: var(--ink);}
.brand small {font-size: 10px; letter-spacing: .7px; color: var(--ink-muted);}
.sidebar-workspace {display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0 5px 16px; border: 1px solid var(--accent-line); border-radius: 15px; background: linear-gradient(120deg, var(--sidebar-well), var(--surface)); box-shadow: inset 0 1px 0 #ffffff0a;}
.sidebar-workspace>.icon {width: 32px; height: 32px; color: var(--accent); padding: 5px;}
.sidebar-workspace strong {display: block; font-size: 13px; color: var(--ink); font-weight: 600;}
.sidebar-workspace small {display: block; margin-top: 2px; color: var(--ink-muted); font-size: 10px;}
.nav {--nav-tone: var(--accent); gap: 15px; flex: 1; min-height: 0; overflow: auto; padding: 0 4px 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent;}
.nav-group {display: grid; gap: 5px;}
.nav-group-title {display: flex; align-items: center; gap: 9px; padding: 2px 13px 6px; color: var(--ink-muted); font-size: 10px; letter-spacing: 1.3px;}
.nav-group-title::after {content: ''; flex: 1; height: 1px; background: var(--border); opacity: .7;}
.nav a, :root:not([data-theme=dark]) .nav a {display: flex; gap: 12px; padding: 8px 12px; min-height: 52px; color: var(--ink-muted); border: 1px solid transparent; border-radius: 13px; font-size: 13px; transition: background .18s, color .18s, box-shadow .18s;}
.nav a[data-page=apps], .nav a[data-page=client-sessions] {--nav-tone: #35978a;}
.nav a[data-page=plans], .nav a[data-page=app-config] {--nav-tone: #a17bc5;}
.nav a[data-page=cards], .nav a[data-page=audit] {--nav-tone: #b48943;}
.nav a[data-page=devices] {--nav-tone: #558bc8;}
.nav a[data-page=settings] {--nav-tone: #bc7292;}
:root[data-theme=dark] .nav a[data-page=apps], :root[data-theme=dark] .nav a[data-page=client-sessions] {--nav-tone: #77cbbb;}
:root[data-theme=dark] .nav a[data-page=plans], :root[data-theme=dark] .nav a[data-page=app-config] {--nav-tone: #8caed0;}
:root[data-theme=dark] .nav a[data-page=cards], :root[data-theme=dark] .nav a[data-page=audit] {--nav-tone: #d5b06e;}
:root[data-theme=dark] .nav a[data-page=devices] {--nav-tone: #89b2e6;}
:root[data-theme=dark] .nav a[data-page=settings] {--nav-tone: #a9b9cc;}
.nav-icon {display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--nav-tone) 10%, var(--surface)); color: var(--nav-tone); border: 1px solid color-mix(in srgb, var(--nav-tone) 14%, transparent); box-shadow: inset 0 1px 0 #ffffff12, 0 2px 4px #35205604;}
.nav a .nav-icon .icon {width: 18px; height: 18px;}
.nav-label {flex: 1;}
.nav a>.nav-arrow {width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s;}
.nav a:hover, :root:not([data-theme=dark]) .nav a:hover {background: var(--surface); border-color: var(--border); color: var(--ink); transform: none; box-shadow: 0 3px 7px #30205206;}
.nav a:hover>.nav-arrow {opacity: .65; transform: translateX(0);}
.nav a[aria-current=page], :root:not([data-theme=dark]) .nav a[aria-current=page] {background: linear-gradient(110deg, var(--primary-start), var(--primary-end)); color: #fff; border-color: #8a74df; box-shadow: 0 5px 12px #6851ce25, inset 0 1px 0 #ffffff25; font-weight: 600;}
.nav a[aria-current=page] .nav-icon {background: #ffffff20; color: #fff; border-color: #ffffff26; box-shadow: inset 0 1px 0 #ffffff16;}
.nav a[aria-current=page] .icon {color: #fff;}
.nav a[aria-current=page]>.nav-arrow {opacity: .85; transform: none;}
.sidebar-foot, :root:not([data-theme=dark]) .sidebar-foot {padding: 13px 3px 0; margin-top: 4px; border-color: var(--border);}
.sidebar-console-card, :root:not([data-theme=dark]) .sidebar-console-card {display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none;}
.sidebar-console-card>.icon:first-child {width: 31px; height: 31px; padding: 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);}
.sidebar-console-card strong, :root:not([data-theme=dark]) .sidebar-console-card strong {color: var(--ink); font-size: 11px; font-weight: 600;}
.sidebar-console-card small {display: block; margin-top: 2px; font-size: 9px; color: var(--ink-muted);}
.sidebar-console-card>.icon:last-child {width: 13px; height: 13px; margin-left: auto; color: var(--ink-muted);}
.sidebar-console-card:hover {border-color: var(--accent-line);}
.workspace {min-width: 0;}
.topbar {height: 73px; padding: 0 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 19px; box-shadow: var(--shadow); gap: 16px; backdrop-filter: none;}
.crumb {font-size: 11px; gap: 12px;}
.crumb span, :root:not([data-theme=dark]) .crumb span {gap: 12px; font-size: 12px;}
.crumb .topbar-glyph {display: grid; place-items: center; width: 33px; height: 33px; color: var(--accent); background: var(--accent-soft); border-radius: 10px;}
.crumb .topbar-glyph::before, .crumb .crumb-home::before {display: none;}
.crumb .crumb-home {color: var(--ink-muted); font-size: 11px;}
.crumb #current-section {font-weight: 600; color: var(--ink);}
.account {gap: 11px;}
.account .avatar, :root:not([data-theme=dark]) .account .avatar {width: 33px; height: 33px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 50%;}
.theme-picker, :root:not([data-theme=dark]) .theme-picker {background-color: var(--surface-raised); border-color: var(--border); border-radius: 30px; width: 124px; min-height: 35px;}
.account .button {border-radius: 30px;}
.main-content {padding: 24px 0 10px; max-width: 1660px;}
.main-content::before {display: none;}
.page-head {min-height: 145px; padding: 25px 30px; border-radius: 22px; background: linear-gradient(115deg, var(--surface), var(--surface-raised)); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 24px;}
.page-head::before {content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--primary-start), #a996e6);}
.page-head::after {width: 240px; height: 240px; top: -145px; right: 130px; border: 25px solid var(--accent-soft); box-shadow: 0 0 0 24px color-mix(in srgb, var(--accent-soft) 40%, transparent); opacity: .7;}
.page-heading {display: flex; gap: 20px; align-items: center;}
.page-heading>div:not(.section-mark) {display: block;}
.section-mark {display: grid; place-items: center; width: 66px; height: 70px; border-radius: 20px; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-line); box-shadow: 0 7px 14px #50337309, inset 0 0 0 5px var(--surface-raised);}
.section-mark .icon {width: 29px; height: 29px;}
.page-index, :root:not([data-theme=dark]) .page-index {font-size: 10px; letter-spacing: .8px; color: var(--accent); font-weight: 500;}
.page-head h1 {font-size: 28px; color: var(--ink); margin-bottom: 7px; letter-spacing: -.7px;}
.page-head p {font-size: 12px; color: var(--ink-muted);}
.stats-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.stat {--stat-accent: #8263d9; --stat-tint: #8263d913; padding: 23px 24px 21px; border: 1px solid color-mix(in srgb, var(--stat-accent) 20%, var(--border)); background: linear-gradient(125deg, var(--surface), color-mix(in srgb, var(--stat-accent) 9%, var(--surface))); border-radius: 20px; box-shadow: var(--shadow); min-height: 174px;}
.stat-1 {--stat-accent: #ab7c37; --stat-tint: #ab7c3714;}
.stat-2 {--stat-accent: #2f9582; --stat-tint: #2f958214;}
.stat-3 {--stat-accent: #568bd1; --stat-tint: #568bd114;}
.stat-4 {--stat-accent: #c37591; --stat-tint: #c3759114;}
.stat-5 {--stat-accent: #a37ac6; --stat-tint: #a37ac614;}
.stat::before {display: none;}
.stat::after {content: ''; display: block; position: absolute; left: auto; right: -19px; bottom: -38px; width: 120px; height: 120px; border: 18px solid var(--stat-tint); border-radius: 38px; rotate: -25deg; background: transparent; opacity: .8;}
.stat-label, :root:not([data-theme=dark]) .stat-label {font-size: 12px; color: var(--ink-muted); gap: 8px;}
.stat-label>.icon {box-sizing: border-box; width: 39px; height: 39px; padding: 9px; border-radius: 12px; background: var(--stat-tint); color: var(--stat-accent); border: 1px solid color-mix(in srgb, var(--stat-accent) 18%, transparent);}
.stat-value, :root:not([data-theme=dark]) .stat-value {font-size: 37px; line-height: 1.2; font-weight: 600; margin: 8px 0 8px; color: var(--ink);}
.stat-note {font-size: 10px; line-height: 1.6; color: var(--ink-muted); position: relative; z-index: 1;}
.stat-0 {background: linear-gradient(120deg, #7554d4, #6053c6); border-color: #8973dc; box-shadow: 0 8px 20px #6d50c025;}
.stat-0 .stat-label, :root:not([data-theme=dark]) .stat-0 .stat-label {color: #efebff;}
.stat-0 .stat-value, :root:not([data-theme=dark]) .stat-0 .stat-value {color: white;}
.stat-0 .stat-note {color: #eeebff;}
.stat-0 .stat-label>.icon {background: #ffffff1f; color: white; border-color: #ffffff35;}
.stat-0::after {border-color: #ffffff13;}
.stat-0 .stat-note::before {background: #ffffffb0;}
.panel {border-radius: 20px; border-color: var(--border); box-shadow: var(--shadow); background: var(--surface);}
.panel-head {padding: 22px 24px; background: linear-gradient(100deg, var(--surface), var(--surface-raised)); border-bottom-color: var(--border);}
.panel-head h2 {font-size: 16px; color: var(--ink); gap: 10px;}
.panel-head h2::before {width: 5px; height: 18px; border-radius: 5px; background: var(--accent); box-shadow: 3px 0 0 var(--accent-soft);}
.quick-link, :root:not([data-theme=dark]) .quick-link {border-radius: 14px; background: var(--surface); border-color: var(--border); color: var(--ink); padding: 16px;}
.quick-link:nth-child(2) {--quick-tone: #35978a;}
.quick-link:nth-child(3) {--quick-tone: #aa7bc7;}
.quick-link>.icon:first-child, :root:not([data-theme=dark]) .quick-link>.icon:first-child {padding: 10px; border-radius: 12px; color: var(--quick-tone, var(--accent)); background: color-mix(in srgb, var(--quick-tone, var(--accent)) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--quick-tone, var(--accent)) 18%, transparent);}
.button, :root:not([data-theme=dark]) .button {border-radius: 11px; background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: 0 2px 4px #33205004;}
.button.primary, :root:not([data-theme=dark]) .button.primary {background: linear-gradient(115deg, var(--primary-start), var(--primary-end)); color: white; border-color: #8c75da; box-shadow: 0 5px 11px #6851ce20, inset 0 1px 0 #ffffff23;}
.button.primary:hover:not(:disabled), :root:not([data-theme=dark]) .button.primary:hover:not(:disabled) {background: linear-gradient(115deg, var(--primary-end), var(--primary-start)); border-color: #a08ae9; box-shadow: 0 7px 15px #6851ce25;}
.button.danger, :root:not([data-theme=dark]) .button.danger {color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--surface)); border-color: color-mix(in srgb, var(--red) 23%, var(--border));}
.row-actions .button, td .button.small {border-radius: 20px;}
.filters {background: var(--surface); padding: 20px 24px; border-color: var(--border); gap: 11px;}
input, select, textarea, :root:not([data-theme=dark]) input, :root:not([data-theme=dark]) select, :root:not([data-theme=dark]) textarea {background-color: var(--surface-raised); border-color: var(--border); border-radius: 11px; color: var(--ink); box-shadow: inset 0 2px 3px #30205203;}
.filters input, .filters select {border-color: var(--border); background-color: var(--surface-raised);}
input:focus, select:focus, textarea:focus, :root:not([data-theme=dark]) input:focus, :root:not([data-theme=dark]) select:focus, :root:not([data-theme=dark]) textarea:focus {border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background-color: var(--surface);}
input[type=range], :root:not([data-theme=dark]) input[type=range] {background: transparent; border: 0; box-shadow: none;}
.badge, :root:not([data-theme=dark]) .badge {border-radius: 20px; padding: 5px 10px; font-weight: 500; letter-spacing: .2px;}
.badge.active, .badge.online, .badge.unused {color: #8be0c5; background: #23534855; border-color: #5cb49b45;}
:root:not([data-theme=dark]) .badge.active, :root:not([data-theme=dark]) .badge.online, :root:not([data-theme=dark]) .badge.unused {color: #247461; background: #e7f5ef; border-color: #cce7dc;}
th, :root:not([data-theme=dark]) th {background: var(--surface-raised); color: var(--ink-muted); border-color: var(--border); padding-block: 15px;}
td, :root:not([data-theme=dark]) td {color: var(--ink); border-bottom-color: var(--border); padding-block: 19px;}
.pagination {background: var(--surface); border-color: var(--border);}
.pagination-controls span {display: grid; place-items: center; min-height: 31px; min-width: 41px; background: var(--accent-soft); color: var(--accent); border-radius: 9px;}
.configuration-grid {gap: 20px;}
.setting-card {--card-tone: var(--accent); border-radius: 21px; padding: 0 25px 24px; min-height: 328px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--card-tone) 23%, var(--border)); box-shadow: var(--shadow);}
.setting-card:nth-child(2) {--card-tone: #35978a;}
.setting-card:nth-child(3) {--card-tone: #a77cbd;}
:root[data-theme=dark] .setting-card:nth-child(2) {--card-tone: #77d0bc;}
:root[data-theme=dark] .setting-card:nth-child(3) {--card-tone: #91b4d9;}
.setting-card::after {width: 140px; height: 140px; right: -38px; top: -65px; border: 20px solid color-mix(in srgb, var(--card-tone) 8%, transparent); border-radius: 40px; rotate: -20deg; background: none;}
.setting-card:hover::after {transform: scale(1.12);}
.setting-card-top {padding: 25px 0; margin-bottom: 24px;}
.setting-card-top::before, .setting-card:nth-child(2) .setting-card-top::before, .setting-card:nth-child(3) .setting-card-top::before {background: linear-gradient(100deg, color-mix(in srgb, var(--card-tone) 12%, var(--surface)), var(--surface-raised)); border-color: color-mix(in srgb, var(--card-tone) 17%, transparent);}
.setting-symbol, .setting-card:nth-child(2) .setting-symbol, .setting-card:nth-child(3) .setting-symbol {width: 51px; height: 51px; border-radius: 15px; color: var(--card-tone); background: var(--surface); border: 1px solid color-mix(in srgb, var(--card-tone) 22%, transparent); box-shadow: 0 5px 12px #30205206;}
.setting-card-status {color: var(--card-tone); background: var(--surface); border-color: color-mix(in srgb, var(--card-tone) 20%, transparent); border-radius: 20px; padding: 5px 9px;}
.setting-card-title {font-size: 20px; color: var(--ink);}
.setting-card-summary {background: var(--surface-raised); border-color: var(--border); color: var(--ink);}
.setting-card-footer {border-color: var(--border); color: var(--card-tone);}
.setting-card-footer>.icon {box-sizing: content-box; width: 16px; height: 16px; padding: 7px; background: color-mix(in srgb, var(--card-tone) 11%, transparent); border-radius: 50%;}
.version-overview {background: linear-gradient(110deg, var(--accent-soft), var(--surface)); border-radius: 20px; border-color: var(--accent-line);}
.version-overview-tag {border-radius: 20px;}
.device-groups {background: var(--surface-raised); padding: 22px;}
.device-group {border-radius: 17px; border-color: var(--border);}
.device-group[open]>.device-summary {background: linear-gradient(100deg, var(--accent-soft), var(--surface));}
.device-glyph {border-radius: 15px; background: var(--surface-raised); border-color: var(--accent-line); color: var(--accent);}
.group-count {border: 1px solid var(--border); border-radius: 20px; padding: 5px 10px; background: var(--surface-raised); color: var(--ink-muted);}
.membership-card.active {border-color: var(--accent-line); background: linear-gradient(130deg, var(--accent-soft), var(--surface));}
.expand-label {border-radius: 20px; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);}
.modal {padding: 0 28px 26px; border-radius: 23px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 25px 80px #14102735;}
.modal-head {display: flex; gap: 15px; align-items: center; margin: 0 -28px 26px; padding: 24px 28px; background: linear-gradient(110deg, var(--surface-raised), var(--surface)); border-bottom: 1px solid var(--border);}
.modal-heading {min-width: 0; flex: 1;}
.modal-head h2 {font-size: 21px; margin: 0; color: var(--ink);}
.modal-head p {margin: 7px 0 0; font-size: 11px;}
.modal-symbol {display: grid; place-items: center; flex: none; width: 46px; height: 48px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 14px;}
.modal-symbol .icon {width: 24px; height: 24px;}
.modal-head>.button {flex: none; align-self: flex-start;}
.modal .form-actions {padding-top: 21px; border-top: 1px solid var(--border);}
.file-picker-target {border: 1.5px dashed var(--accent-line); background: linear-gradient(140deg, var(--surface-raised), var(--accent-soft)); border-radius: 18px; min-height: 205px;}
.file-picker-symbol {width: 55px; height: 55px; border-radius: 17px; background: var(--surface); border-color: var(--accent-line); box-shadow: 0 6px 14px #5033730d;}
.file-picker-tag {border-radius: 20px; padding: 4px 9px;}
.event-label .icon {background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); border-radius: 10px;}
.login-layout {background: radial-gradient(ellipse at 10% 10%, var(--accent-soft), transparent 60%), var(--canvas);}
.login-panel {background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hover-shadow); border-radius: 24px;}
.page-foot {color: var(--ink-muted);}
.duration-controls {display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 8px;}
/* Dark surfaces use slate and blue throughout, including decorative accents. */
:root[data-theme=dark] .nav a[aria-current=page] {border-color: #528cc7; box-shadow: 0 5px 12px #173a602b, inset 0 1px 0 #ffffff25;}
:root[data-theme=dark] .button.primary {border-color: #528cc7; box-shadow: 0 5px 11px #173a602b, inset 0 1px 0 #ffffff23;}
:root[data-theme=dark] .button.primary:hover:not(:disabled) {border-color: #78aae0; box-shadow: 0 7px 15px #173a6038;}
:root[data-theme=dark] .page-head::before {background: linear-gradient(var(--primary-start), var(--accent));}
:root[data-theme=dark] .stat {--stat-accent: #82b4ed; --stat-tint: #82b4ed14;}
:root[data-theme=dark] .stat-0 {background: linear-gradient(120deg, #326da9, #295581); border-color: #528cc7; box-shadow: 0 8px 20px #173a6030;}
:root[data-theme=dark] .stat-0 .stat-label,
:root[data-theme=dark] .stat-0 .stat-note {color: #e6f1fc;}
:root[data-theme=dark] .stat-1 {--stat-accent: #d5b06e; --stat-tint: #d5b06e14;}
:root[data-theme=dark] .stat-2 {--stat-accent: #77cbbb; --stat-tint: #77cbbb14;}
:root[data-theme=dark] .stat-3 {--stat-accent: #89b2e6; --stat-tint: #89b2e614;}
:root[data-theme=dark] .stat-4 {--stat-accent: #6ec4c9; --stat-tint: #6ec4c914;}
:root[data-theme=dark] .stat-5 {--stat-accent: #a9b9cc; --stat-tint: #a9b9cc14;}
:root[data-theme=dark] .quick-link:nth-child(3) {--quick-tone: #91b4d9;}
@media(min-width:1700px) {.stats-grid {grid-template-columns: repeat(6, minmax(0, 1fr));} .stat {padding: 20px 18px;} .stat-value {font-size: 33px;}}
@media(max-width:1200px) {
  .shell {grid-template-columns: 248px minmax(0, 1fr); gap: 20px;}
  .sidebar {padding-inline: 12px;} .sidebar .brand {padding-inline: 8px;}
  .nav a, :root:not([data-theme=dark]) .nav a {padding-inline: 10px; gap: 10px; font-size: 12px;}
  .page-head {padding: 24px;} .section-mark {width: 55px; height: 61px;}
  .configuration-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media(max-width:1000px) and (min-width:761px) {
  .shell {grid-template-columns: 218px minmax(0, 1fr); gap: 16px; padding: 12px;}
  .sidebar {top: 12px; height: calc(100dvh - 24px); padding: 19px 10px 12px;}
  .sidebar .brand {padding-inline: 7px; gap: 10px;} .sidebar .brand img {width: 41px; height: 41px;}
  .brand strong {font-size: 18px;} .brand small {font-size: 9px;}
  .sidebar-workspace {padding: 11px; margin-inline: 3px;}
  .nav a>.nav-arrow {display: none;} .nav a {gap: 10px;}
  .topbar {padding-inline: 18px; gap: 10px;} :root .crumb .crumb-home, .account .username {display: none;}
  .account {gap: 8px;}
  .page-head {padding: 22px;} .page-heading {gap: 15px;}
  .page-head h1 {font-size: 25px;} .page-head p {font-size: 11px;}
  .section-mark {display: none;} .stats-grid {gap: 12px;} .stat {padding: 18px 16px;}
  .stat-label {font-size: 11px;} .stat-label>.icon {width: 32px; height: 32px; padding: 7px;}
  .configuration-grid {grid-template-columns: 1fr;} .setting-card {min-height: 295px;}
}
@media(max-width:760px) {
  .shell {display: block; padding: 12px;}
  .sidebar {position: relative; top: auto; height: auto; padding: 16px 13px 9px; margin-bottom: 12px; border-radius: 20px; display: block; overflow: visible;}
  .sidebar .brand {padding: 0 5px 16px;}
  .brand img {width: 42px; height: 42px; padding: 7px; border-radius: 13px;} .brand strong {font-size: 19px;}
  .sidebar-workspace, .sidebar-foot, .nav-group-title {display: none;}
  .nav {display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 7px; padding: 2px 2px 9px; scrollbar-width: thin;}
  .nav-group {display: contents;}
  .nav a, :root:not([data-theme=dark]) .nav a {padding: 7px 11px 7px 7px; gap: 8px; min-height: 44px; border-radius: 12px; font-size: 11px; border-color: var(--border); background: var(--surface);}
  .nav-icon {width: 28px; height: 28px; border-radius: 8px;}
  .nav a .nav-icon .icon {width: 16px; height: 16px;} .nav a>.nav-arrow {display: none;}
  .nav a[aria-current=page], :root:not([data-theme=dark]) .nav a[aria-current=page] {background: linear-gradient(110deg, var(--primary-start), var(--primary-end)); color: white; box-shadow: 0 4px 9px #6851ce20;}
  .topbar {height: 62px; padding: 0 15px; border-radius: 16px; gap: 8px;}
  .crumb {gap: 10px; min-width: 0;} :root .crumb .crumb-home {display: none;} .crumb span {gap: 0;}
  :root .crumb #current-section {min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .crumb .topbar-glyph {width: 29px; height: 29px;} .crumb #current-section::before {display: none;}
  .account {gap: 8px; flex: none;} .theme-picker, :root:not([data-theme=dark]) .theme-picker {width: 104px; font-size: 11px; min-height: 34px;}
  .account .avatar, .account .username {display: none;} .account .button, :root:not([data-theme=dark]) .account .button {padding: 7px 9px; font-size: 10px;}
  .main-content {padding: 17px 0 8px;}
  .page-head {display: flex; flex-wrap: wrap; gap: 15px; min-height: 0; padding: 23px; border-radius: 19px; margin-bottom: 18px;}
  .page-heading {display: flex; gap: 13px; align-items: center; width: 100%;}
  .page-heading>div:not(.section-mark) {display: block; min-width: 0;}
  .page-heading>.section-mark {display: grid; width: 45px; height: 50px; border-radius: 14px;}
  .section-mark .icon {width: 22px; height: 22px;}
  .page-head h1 {font-size: 23px; margin-bottom: 6px;}
  .page-head p {font-size: 10px; max-width: none; margin: 0;}
  .page-index, :root:not([data-theme=dark]) .page-index {font-size: 8px; letter-spacing: .5px; margin-bottom: 4px;}
  .page-tools {width: 100%; display: flex; gap: 8px; justify-content: flex-end; margin: 0;}
  .page-tools .button {min-height: 37px; padding: 8px 12px; font-size: 11px;}
  .stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px;}
  .stat {min-height: 158px; padding: 17px 16px; border-radius: 17px;}
  .stat-label, :root:not([data-theme=dark]) .stat-label {font-size: 11px; gap: 5px;}
  .stat-label>.icon {width: 31px; height: 31px; padding: 7px; border-radius: 10px;}
  .stat-value, :root:not([data-theme=dark]) .stat-value {font-size: 31px; margin-top: 8px;}
  .stat-note {font-size: 9px;} .stat-note::before {margin-right: 5px;}
  .stat::after {width: 90px; height: 90px; border-width: 14px;}
  .panel {border-radius: 18px;} .panel-head {padding: 20px 17px;}
  .panel-head h2 {font-size: 14px;} .panel-head p {font-size: 10px;}
  .filters {padding: 16px; gap: 10px;}
  .configuration-grid {grid-template-columns: 1fr; gap: 17px;}
  .setting-card {min-height: 305px; padding: 0 23px 23px;}
  .setting-card-top::before {inset: 0 -23px;}
  .version-overview {padding: 21px; gap: 13px;}
  .device-groups {padding: 13px;}
  .modal {padding: 0 20px 22px; max-width: calc(100vw - 24px); border-radius: 20px;}
  .modal-head {margin: 0 -20px 22px; padding: 20px; gap: 11px;}
  .modal-symbol {width: 39px; height: 43px; border-radius: 12px;}
  .modal-head h2 {font-size: 18px;} .modal-head p {font-size: 10px;}
  .modal .form-actions {padding-top: 18px;}
  .table-scroll td, :root:not([data-theme=dark]) .table-scroll td {padding-block: 12px;}
}
@media(max-width:370px) {
  .shell {padding: 9px;}.topbar {padding-inline: 12px;} :root .topbar .topbar-glyph {display: none;}
  .account {gap: 6px;} .theme-picker, :root:not([data-theme=dark]) .theme-picker {width: 96px;}
  .page-head {padding: 20px 17px;}.page-heading {gap: 11px;}.page-head h1 {font-size: 22px;}
  .stat {padding: 15px 12px;}.stat-label, :root:not([data-theme=dark]) .stat-label {font-size: 10px;}
  .stat-label>.icon {width: 27px; height: 27px; padding: 6px;}.stat-note {font-size: 8px;}
  .modal-symbol {display: none;}
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
  .setting-card:hover, .stat:hover, .button:hover:not(:disabled) {transform: none;}
}