/* NSphere Apple-inspired operations UI. Layout, not a skin. */
html[data-color-theme="light"]{
  --canvas:#f5f5f7;--canvas-deep:#eeeef1;--surface:rgba(255,255,255,.88);--surface-solid:#fff;
  --surface-muted:#f8f8fa;--surface-pressed:#efeff2;--ink:#1d1d1f;--ink-2:#48484d;--muted:#86868b;
  --line:rgba(20,20,24,.09);--line-strong:rgba(20,20,24,.16);--accent:#e52532;--accent-hover:#c91d29;
  --accent-soft:#fff0f1;--success:#23865b;--success-soft:#eaf7f0;--warning:#b66b0b;--warning-soft:#fff5e7;
  --danger:#d92b38;--danger-soft:#fff0f1;--info:#47719d;--info-soft:#edf3f9;
  --glass-shadow:0 18px 60px rgba(23,23,28,.08);--card-shadow:0 8px 30px rgba(25,25,30,.055);
  --nav-surface:rgba(255,255,255,.82);--nav-ink:#252529;--nav-muted:#85858c;
  --panel:var(--surface-solid);--soft:var(--canvas);--green:var(--accent);--green-2:var(--accent-hover);
  --green-soft:var(--accent-soft);--red:var(--danger);--red-soft:var(--danger-soft);--blue:var(--info);
  --blue-soft:var(--info-soft);--amber:var(--warning);--amber-soft:var(--warning-soft);--shadow:var(--card-shadow);--radius:22px;
  color:var(--ink);background:var(--canvas)
}
html[data-color-theme="dark"]{
  --canvas:#09090b;--canvas-deep:#050506;--surface:rgba(28,28,31,.84);--surface-solid:#1c1c1f;
  --surface-muted:#232327;--surface-pressed:#2b2b30;--ink:#f5f5f7;--ink-2:#d0d0d5;--muted:#929299;
  --line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.17);--accent:#ff4753;--accent-hover:#ff606a;
  --accent-soft:#35191e;--success:#48b886;--success-soft:#162b22;--warning:#dfaa58;--warning-soft:#302719;
  --danger:#ff6973;--danger-soft:#361a1f;--info:#91acc9;--info-soft:#1b2835;
  --glass-shadow:0 24px 80px rgba(0,0,0,.42);--card-shadow:none;
  --nav-surface:rgba(28,28,31,.82);--nav-ink:#f5f5f7;--nav-muted:#8e8e95;
  --panel:var(--surface-solid);--soft:var(--canvas);--green:var(--accent);--green-2:var(--accent-hover);
  --green-soft:var(--accent-soft);--red:var(--danger);--red-soft:var(--danger-soft);--blue:var(--info);
  --blue-soft:var(--info-soft);--amber:var(--warning);--amber-soft:var(--warning-soft);--shadow:var(--card-shadow);--radius:22px;
  color:var(--ink);background:var(--canvas)
}

html[data-color-theme] *{box-sizing:border-box}
html[data-color-theme] body{min-width:320px;background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-color-theme] h1,html[data-color-theme] h2,html[data-color-theme] h3{color:var(--ink);font-weight:680;letter-spacing:-.035em}
html[data-color-theme] ::selection{background:var(--accent);color:#fff}

/* Apple-like sign in: one purposeful floating panel, not a dashboard template. */
html[data-color-theme] .login-view{position:relative;display:grid;grid-template-columns:minmax(460px,1.06fr) minmax(430px,.94fr);gap:20px;min-height:100vh;padding:20px;background:var(--canvas)}
html[data-color-theme] .login-brand{min-height:calc(100vh - 40px);padding:38px 44px;border-radius:30px;background:var(--accent);color:#fff;box-shadow:0 24px 80px rgba(180,18,32,.2)}
html[data-color-theme] .login-brand:before{content:"NSPHERE / OPERATIONS";position:absolute;right:42px;top:42px;color:rgba(255,255,255,.58);font-size:9px;font-weight:700;letter-spacing:.17em}
html[data-color-theme] .login-brand:after{content:"N";position:absolute;right:-12px;bottom:-96px;width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.08);font-size:390px;font-weight:800;line-height:1}
html[data-color-theme] .brand-lockup{gap:11px}
html[data-color-theme] .brand-mark{width:40px;height:40px;border-radius:12px;background:var(--accent);box-shadow:none}
html[data-color-theme] .login-brand .brand-mark{content:url('/admin/nsphere-logo-white.svg');background:transparent}
html[data-color-theme] .brand-lockup strong{color:inherit;font-size:19px;font-weight:760;letter-spacing:-.025em;text-transform:lowercase}
html[data-color-theme] .brand-lockup small{color:inherit;font-size:8px;letter-spacing:.17em;opacity:.58}
html[data-color-theme] .login-copy{z-index:1;max-width:650px}
html[data-color-theme] .login-copy .eyebrow{color:rgba(255,255,255,.68);font-size:10px;letter-spacing:.18em}
html[data-color-theme] .login-copy h1{max-width:620px;margin:18px 0 22px;color:#fff;font-size:clamp(44px,4.6vw,72px);font-weight:700;line-height:1.04}
html[data-color-theme] .login-copy p{max-width:520px;color:rgba(255,255,255,.75);font-size:15px;line-height:1.7}
html[data-color-theme] .login-trust{z-index:1;gap:22px}
html[data-color-theme] .login-trust div{padding-top:15px;border-color:rgba(255,255,255,.28)}
html[data-color-theme] .login-trust span{color:rgba(255,255,255,.62)}
html[data-color-theme] .login-panel-wrap{display:grid;place-items:center;padding:42px;background:transparent}
html[data-color-theme] .login-panel{width:min(100%,400px);padding:34px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--glass-shadow);backdrop-filter:blur(32px) saturate(150%)}
html[data-color-theme] .login-panel h2{margin:18px 0 8px;font-size:30px;font-weight:700}
html[data-color-theme] .login-panel>.muted{font-size:13px;line-height:1.65}
html[data-color-theme] .version-chip{border:0;border-radius:999px;background:var(--surface-pressed);color:var(--muted);font-size:9px;letter-spacing:.1em}
html[data-color-theme] .auth-tabs{margin:28px 0 22px;border-color:var(--line)}
html[data-color-theme] .auth-tab{color:var(--muted);font-size:13px;font-weight:600}
html[data-color-theme] .auth-tab.active{border-color:var(--accent);color:var(--accent)}
html[data-color-theme] .auth-form label,html[data-color-theme] .form-grid label,html[data-color-theme] .stacked-form label{color:var(--ink-2);font-weight:600}
html[data-color-theme] .login-foot{border-color:var(--line);color:var(--muted)}
html[data-color-theme] .status-dot{background:var(--success);box-shadow:0 0 0 4px var(--success-soft)}
html[data-color-theme] .mobile-brand{color:var(--ink)}

/* Theme control */
html[data-color-theme] .theme-switch{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 11px/1 inherit;box-shadow:0 2px 10px rgba(20,20,24,.035);cursor:pointer;backdrop-filter:blur(20px)}
html[data-color-theme] .theme-switch:hover{border-color:var(--line-strong);background:var(--surface-solid)}
html[data-color-theme] .theme-switch-icon{position:relative;width:17px;height:17px;border:1.6px solid currentColor;border-radius:50%}
html[data-color-theme="light"] .theme-switch-icon:after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}
html[data-color-theme="dark"] .theme-switch-icon:after{content:"";position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--surface-solid);box-shadow:-3px 3px 0 currentColor}
html[data-color-theme] .login-theme-switch{position:absolute;z-index:5;right:30px;top:30px}

/* Controls */
html[data-color-theme] input,html[data-color-theme] select,html[data-color-theme] textarea{border:1px solid var(--line-strong)!important;border-radius:12px!important;background:var(--surface-solid)!important;color:var(--ink)!important;box-shadow:none!important;transition:border-color .16s,box-shadow .16s}
html[data-color-theme] input::placeholder,html[data-color-theme] textarea::placeholder{color:var(--muted)}
html[data-color-theme] input:focus,html[data-color-theme] select:focus,html[data-color-theme] textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(229,37,50,.1)!important}
html[data-color-theme] button{font-family:inherit}
html[data-color-theme] .primary,html[data-color-theme] .secondary,html[data-color-theme] .danger,html[data-color-theme] .quiet,html[data-color-theme] .icon-button{min-height:38px;border-radius:11px;box-shadow:none;font-weight:630}
html[data-color-theme] .primary{border-color:var(--accent);background:var(--accent);color:#fff}
html[data-color-theme] .primary:hover{border-color:var(--accent-hover);background:var(--accent-hover)}
html[data-color-theme] .secondary,html[data-color-theme] .icon-button{border-color:var(--line);background:var(--surface-solid);color:var(--ink-2)}
html[data-color-theme] .secondary:hover,html[data-color-theme] .icon-button:hover{border-color:var(--line-strong);background:var(--surface-muted);color:var(--ink)}
html[data-color-theme] .quiet{color:var(--accent)}
html[data-color-theme] .danger{background:var(--danger);color:#fff}

/* Floating desktop frame */
html[data-color-theme] .app-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:var(--canvas)}
html[data-color-theme] .sidebar{position:fixed;inset:16px auto 16px 16px;width:232px;padding:18px 12px 14px;border:1px solid var(--line);border-radius:24px;background:var(--nav-surface);color:var(--nav-ink);box-shadow:var(--glass-shadow);backdrop-filter:blur(30px) saturate(160%)}
html[data-color-theme] .sidebar-brand{padding:0 10px 19px;color:var(--ink)}
html[data-color-theme] .sidebar-brand .brand-mark{width:36px;height:36px;border-radius:11px}
html[data-color-theme] .navigation{gap:2px}
html[data-color-theme] .nav-group{margin:15px 11px 6px;color:var(--nav-muted);font-size:9px;font-weight:700;letter-spacing:.14em}
html[data-color-theme] .nav-item{min-height:40px;gap:9px;padding:6px 9px;border-radius:11px;color:var(--nav-muted);font-size:12px;font-weight:590}
html[data-color-theme] .nav-item:hover{background:var(--surface-muted);color:var(--ink)}
html[data-color-theme] .nav-item.active{background:var(--surface-solid);color:var(--ink);box-shadow:0 4px 14px rgba(20,20,24,.06)}
html[data-color-theme] .nav-icon{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:inherit;font-size:10px;font-weight:720}
html[data-color-theme] .nav-item.active .nav-icon{background:var(--accent-soft);color:var(--accent)}
html[data-color-theme] .nav-badge{background:var(--accent)}
html[data-color-theme] .sidebar-foot{padding:14px 8px 0;border-color:var(--line)}
html[data-color-theme] .cloud-health strong{color:var(--ink-2)}
html[data-color-theme] .cloud-health small{color:var(--muted)}
html[data-color-theme] .pulse{background:var(--success);box-shadow:none}
html[data-color-theme] .sidebar-collapse{border:0;background:transparent;color:var(--muted)}
html[data-color-theme] .main-area{grid-column:2;min-width:0;background:var(--canvas)}
html[data-color-theme] .topbar{position:sticky;top:0;height:88px;padding:18px 30px 10px;border:0;background:rgba(245,245,247,.78);backdrop-filter:blur(24px) saturate(160%)}
html[data-color-theme="dark"] .topbar{background:rgba(9,9,11,.78)}
html[data-color-theme] .page-heading{min-width:190px}
html[data-color-theme] .page-heading span{color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.15em}
html[data-color-theme] .page-heading h1{margin:3px 0 0;font-size:21px;font-weight:690}
html[data-color-theme] .topbar-actions{gap:8px}
html[data-color-theme] .global-search{width:280px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);box-shadow:0 3px 14px rgba(20,20,24,.035);backdrop-filter:blur(18px)}
html[data-color-theme] .global-search input{height:36px;border:0!important;background:transparent!important;box-shadow:none!important}
html[data-color-theme] .user-chip{border-color:var(--line);color:var(--ink)}
html[data-color-theme] .user-chip>span:first-child{border-radius:11px;background:var(--accent-soft);color:var(--accent)}
html[data-color-theme] .user-chip small{color:var(--muted)}
html[data-color-theme] .content{max-width:1520px;padding:16px 30px 64px}

/* Content hierarchy */
html[data-color-theme] .page-toolbar{align-items:flex-end;margin-bottom:22px}
html[data-color-theme] .page-toolbar h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-.045em}
html[data-color-theme] .page-toolbar p{max-width:760px;margin-top:7px;color:var(--muted);font-size:13px;line-height:1.6}
html[data-color-theme] .toolbar-actions{gap:8px}
html[data-color-theme] .stats-grid{gap:14px;margin-bottom:22px}
html[data-color-theme] .stat-card{min-height:142px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--card-shadow);backdrop-filter:blur(20px)}
html[data-color-theme] .stat-card:after{display:none}
html[data-color-theme] .stat-label{color:var(--muted);font-size:11px;font-weight:560}
html[data-color-theme] .stat-icon{width:34px;height:34px;border:0;border-radius:11px;background:var(--surface-pressed);color:var(--ink-2);font-size:11px}
html[data-color-theme] .stat-card.alert .stat-icon{background:var(--danger-soft);color:var(--danger)}
html[data-color-theme] .stat-card.money .stat-icon{background:var(--warning-soft);color:var(--warning)}
html[data-color-theme] .stat-value{margin:16px 0 3px;color:var(--ink);font-size:31px;font-weight:690;letter-spacing:-.055em}
html[data-color-theme] .stat-foot{color:var(--muted);font-size:10px}
html[data-color-theme] .panel-grid{gap:14px;margin-bottom:18px}
html[data-color-theme] .panel{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--card-shadow);backdrop-filter:blur(20px)}
html[data-color-theme] .panel-head{padding:18px 20px;border-color:var(--line);background:transparent}
html[data-color-theme] .panel-head h3{font-size:15px;font-weight:660}
html[data-color-theme] .panel-head p{color:var(--muted)}
html[data-color-theme] .panel-body{padding:20px}
html[data-color-theme] .panel-foot{border-color:var(--line);background:rgba(128,128,135,.045);color:var(--muted)}

/* Tables are one grouped surface instead of a card per row. */
html[data-color-theme] .table-panel{overflow:hidden;background:var(--surface-solid);backdrop-filter:none}
html[data-color-theme] .table-wrap{background:transparent}
html[data-color-theme] .data-table{background:transparent;color:var(--ink-2)}
html[data-color-theme] .data-table th{padding:12px 16px;border-color:var(--line);background:rgba(128,128,135,.055);color:var(--muted);font-size:9px;letter-spacing:.08em}
html[data-color-theme] .data-table td{padding:14px 16px;border-color:var(--line)}
html[data-color-theme] .data-table tbody tr:hover{background:rgba(128,128,135,.05)}
html[data-color-theme] .entity strong{color:var(--ink)}
html[data-color-theme] .entity-avatar{border-radius:11px;background:var(--accent-soft);color:var(--accent)}
html[data-color-theme] .entity-avatar.device{background:var(--info-soft);color:var(--info)}
html[data-color-theme] .entity small,html[data-color-theme] .cell-sub{color:var(--muted)}
html[data-color-theme] .badge{background:var(--surface-pressed);color:var(--ink-2)}
html[data-color-theme] .badge.success{background:var(--success-soft);color:var(--success)}
html[data-color-theme] .badge.warning{background:var(--warning-soft);color:var(--warning)}
html[data-color-theme] .badge.danger{background:var(--danger-soft);color:var(--danger)}
html[data-color-theme] .badge.info{background:var(--info-soft);color:var(--info)}
html[data-color-theme] .empty-icon{background:var(--surface-pressed);color:var(--muted)}
html[data-color-theme] .loading{color:var(--muted)}
html[data-color-theme] .spinner{border-color:var(--line-strong);border-top-color:var(--accent)}

/* Independent object cards */
html[data-color-theme] .cards,html[data-color-theme] .channel-grid,html[data-color-theme] .ops-grid{gap:14px}
html[data-color-theme] .entity-card,html[data-color-theme] .resource-card,html[data-color-theme] .channel-card,html[data-color-theme] .ops-card{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--card-shadow);backdrop-filter:blur(18px)}
html[data-color-theme] .resource-card strong,html[data-color-theme] .channel-card h3,html[data-color-theme] .ops-card h3{color:var(--ink)}
html[data-color-theme] .resource-card span,html[data-color-theme] .resource-card small,html[data-color-theme] .channel-auth{color:var(--muted)}
html[data-color-theme] .resource-track,html[data-color-theme] progress{background:var(--surface-pressed)}
html[data-color-theme] .resource-track i,html[data-color-theme] progress::-webkit-progress-value{background:var(--accent)}
html[data-color-theme] .capability-list span{background:var(--surface-pressed);color:var(--ink-2)}
html[data-color-theme] .platform-checks{border-color:var(--line);background:var(--surface-muted)}

/* Forms, timelines and operational content */
html[data-color-theme] .notice{border-color:var(--line);border-radius:15px;background:var(--surface-muted);color:var(--ink-2)}
html[data-color-theme] .notice.info{border-color:var(--info-soft);background:var(--info-soft)}
html[data-color-theme] .notice.warning{border-color:var(--warning-soft);background:var(--warning-soft)}
html[data-color-theme] .notice.danger{border-color:var(--danger-soft);background:var(--danger-soft)}
html[data-color-theme] .detail-section{border-color:var(--line)}
html[data-color-theme] .detail-item,html[data-color-theme] .health-row{border-color:var(--line);border-radius:14px;background:var(--surface-muted)}
html[data-color-theme] .detail-item span,html[data-color-theme] .health-row span{color:var(--muted)}
html[data-color-theme] .timeline-item:before{background:var(--accent)}
html[data-color-theme] .trend-row,html[data-color-theme] .command-row,html[data-color-theme] .terminal-command,html[data-color-theme] .file-crumbs,html[data-color-theme] .package-editor,html[data-color-theme] .package-line{border-color:var(--line);border-radius:13px;background:var(--surface-muted);color:var(--ink)}
html[data-color-theme] .terminal-command:hover{border-color:var(--accent);background:var(--accent-soft)}
html[data-color-theme] .help-search{border-color:var(--line);border-radius:18px;background:var(--surface)}
html[data-color-theme] .help-search label>span,html[data-color-theme] .form-section-title{color:var(--ink-2)}
html[data-color-theme] .category-tabs button{border-color:var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2)}
html[data-color-theme] .category-tabs button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
html[data-color-theme] .severity-card,html[data-color-theme] .runbook{border-color:var(--line);border-radius:16px;background:var(--surface-solid);box-shadow:none}
html[data-color-theme] .runbook[open]{border-color:var(--accent)}
html[data-color-theme] .runbook-body{border-color:var(--line);background:var(--surface-muted)}
html[data-color-theme] .runbook-block h4{color:var(--ink-2)}
html[data-color-theme] .runbook-block li,html[data-color-theme] .command-row code{color:var(--muted)}
html[data-color-theme] .chat-message{border-color:var(--line);background:var(--surface-muted)}
html[data-color-theme] .chat-message.assistant{border-color:var(--accent);background:var(--accent-soft)}
html[data-color-theme] .interaction-item{border-color:var(--line)}
html[data-color-theme] .interaction-item:hover{background:rgba(128,128,135,.05)}
html[data-color-theme] .interaction-body p{color:var(--ink-2)}
html[data-color-theme] .interaction-body footer code{background:var(--surface-pressed);color:var(--ink-2)}
html[data-color-theme] .positive{color:var(--success)}

/* Overlays */
html[data-color-theme] .modal form,html[data-color-theme] .drawer{border-color:var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:var(--glass-shadow);backdrop-filter:blur(30px) saturate(150%)}
html[data-color-theme] .modal form>header,html[data-color-theme] .modal form>footer,html[data-color-theme] .drawer>header{border-color:var(--line);background:transparent}
html[data-color-theme] .drawer{top:12px;right:12px;bottom:12px;height:auto}
html[data-color-theme] .drawer-backdrop,html[data-color-theme] .mobile-backdrop{background:rgba(8,8,10,.38);backdrop-filter:blur(8px)}
html[data-color-theme] .toast{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px)}
html[data-color-theme] .toast.error{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
html[data-color-theme] .terminal-window{border-color:#303035;border-radius:18px;background:#0b0b0d;box-shadow:0 18px 50px rgba(0,0,0,.2)}
html[data-color-theme] .terminal-window header{border-color:#2d2d32;background:#18181b}
html[data-color-theme] .file-preview,html[data-color-theme] .code-box{border-radius:16px;background:#111114;color:#f1f1f3}

/* Mobile dock is intentionally a card: navigation is one independent control. */
html[data-color-theme] .mobile-dock{display:none}

@media(max-width:1180px){
  html[data-color-theme] .content{padding-inline:22px}
  html[data-color-theme] .global-search{width:220px}
}

@media(max-width:860px){
  html[data-color-theme] body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  html[data-color-theme] .login-view{display:block;padding:0;background:var(--canvas)}
  html[data-color-theme] .login-brand{display:none}
  html[data-color-theme] .login-panel-wrap{min-height:100dvh;padding:calc(88px + env(safe-area-inset-top)) 24px 34px}
  html[data-color-theme] .login-panel{max-width:430px;padding:30px;border-radius:26px}
  html[data-color-theme] .mobile-brand{display:flex;margin-bottom:52px}
  html[data-color-theme] .login-theme-switch{top:calc(18px + env(safe-area-inset-top));right:18px}
  html[data-color-theme] .app-shell{display:block}
  html[data-color-theme] .sidebar{inset:10px auto 10px 10px;width:min(86vw,330px);height:auto;padding:calc(18px + env(safe-area-inset-top)) 13px calc(18px + env(safe-area-inset-bottom));border-radius:26px;transform:translateX(-110%)}
  html[data-color-theme] .sidebar.open{transform:translateX(0)}
  html[data-color-theme] .main-area{display:block;margin:0}
  html[data-color-theme] .topbar{height:calc(66px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 15px 0}
  html[data-color-theme] .mobile-menu{display:grid}
  html[data-color-theme] .global-search{display:none}
  html[data-color-theme] .page-heading{min-width:0}
  html[data-color-theme] .page-heading span{display:none}
  html[data-color-theme] .page-heading h1{font-size:18px;white-space:nowrap}
  html[data-color-theme] .topbar-actions{gap:6px}
  html[data-color-theme] .topbar-theme-switch{width:38px;padding:0}
  html[data-color-theme] .topbar-theme-switch [data-theme-label]{display:none}
  html[data-color-theme] .user-chip{padding-left:9px}
  html[data-color-theme] .user-chip>span:last-child{display:none}
  html[data-color-theme] .content{padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
  html[data-color-theme] .page-toolbar{align-items:flex-start;flex-direction:column;gap:15px}
  html[data-color-theme] .page-toolbar h2{font-size:26px}
  html[data-color-theme] .toolbar-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  html[data-color-theme] .toolbar-actions>*{flex:none}
  html[data-color-theme] .filters{width:100%;overflow-x:auto}
  html[data-color-theme] .panel-grid,html[data-color-theme] .panel-grid.equal{grid-template-columns:1fr}
  html[data-color-theme] .cards,html[data-color-theme] .ops-grid,html[data-color-theme] .channel-grid{grid-template-columns:1fr}
  html[data-color-theme] .data-table{min-width:720px}
  html[data-color-theme] .mobile-dock{position:fixed;z-index:18;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:68px;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--glass-shadow);backdrop-filter:blur(30px) saturate(180%)}
  html[data-color-theme] .mobile-dock-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:15px;background:transparent;color:var(--muted);font-size:9px;font-weight:600}
  html[data-color-theme] .mobile-dock-item.active{background:var(--surface-solid);color:var(--accent);box-shadow:0 3px 12px rgba(20,20,24,.07)}
  html[data-color-theme] .dock-symbol{height:20px;display:grid;place-items:center;font-size:15px;font-weight:700}
  html[data-color-theme] .dock-menu-symbol{font-size:12px;letter-spacing:2px}
  html[data-color-theme] .modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto 8px 8px;border-radius:24px}
  html[data-color-theme] .modal-body{max-height:calc(100dvh - 180px)}
  html[data-color-theme] .drawer{inset:8px;width:auto;border-radius:24px}
  html[data-color-theme] .toasts{top:auto;bottom:calc(92px + env(safe-area-inset-bottom))}
}

@media(max-width:580px){
  html[data-color-theme] .login-panel-wrap{padding-inline:16px}
  html[data-color-theme] .login-panel{padding:25px 20px}
  html[data-color-theme] .login-panel h2{font-size:28px}
  html[data-color-theme] .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
  html[data-color-theme] .stat-card{min-height:124px;padding:15px;border-radius:18px}
  html[data-color-theme] .stat-label{align-items:flex-start;gap:5px}
  html[data-color-theme] .stat-icon{width:28px;height:28px;border-radius:9px}
  html[data-color-theme] .stat-value{margin-top:14px;font-size:24px}
  html[data-color-theme] .stat-foot{font-size:9px;line-height:1.4}
  html[data-color-theme] .content{padding-inline:12px}
  html[data-color-theme] .panel,html[data-color-theme] .entity-card,html[data-color-theme] .resource-card,html[data-color-theme] .channel-card,html[data-color-theme] .ops-card{border-radius:18px}
  html[data-color-theme] .panel-head,html[data-color-theme] .panel-body{padding:15px}
  html[data-color-theme] .primary,html[data-color-theme] .secondary,html[data-color-theme] .danger{min-height:42px}
  html[data-color-theme] #refreshPage,html[data-color-theme] #mobileMenu{display:none}
  html[data-color-theme] .interaction-item{padding:13px 10px}
}