/* ═══════════════════════════════════════════════════════════════════
   Witline CSS Override System — Per-Component Customization
   Usage:
     1. Copy any override rule below into a <style> block in your .razor file
     2. Uncomment and modify the variable values
     3. All overrides are scoped with [data-wit-component="..."] selector
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FUTURISTIC THEME BRIDGE — Maps Bootstrap/Tailwind to Witline HUD Design
   Activated 2026-07-28
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global body: dark gradient background with scan lines ── */
body, .app-shell {
    background: linear-gradient(135deg, #0a0a1a 0%, #0f0f2a 30%, #0a0f1f 60%, #060610 100%);
    color: var(--text-primary);
}

/* ── Glass panels (maps Bootstrap cards to holographic glass) ── */
.glass-panel, .card, .dash-card, [class*="bg-white"], [class*="bg-dark"],
.bg-gray-900, .dark\\:bg-gray-900 {
    background: var(--holo-surface, rgba(15, 15, 40, 0.85)) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--holo-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--holo-glow, 0 0 20px rgba(99, 102, 241, 0.08));
    color: var(--text-primary) !important;
}

/* ── Tables: futuristic row styling ── */
[data-wit-component] .table, [data-wit-component] .dash-table, [data-wit-component] .wit-table,
.table, .dash-table, .wit-table {
    background: transparent !important;
    color: var(--text-primary) !important;
}
[data-wit-component] .table thead th, [data-wit-component] .dash-table thead th, [data-wit-component] .wit-table thead th,
.table thead th, .dash-table thead th, .wit-table thead th {
    background: rgba(99, 102, 241, 0.08) !important;
    color: #a5b4fc !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.3) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}
[data-wit-component] .table td, [data-wit-component] .dash-table td, [data-wit-component] .wit-table td,
.table td, .dash-table td, .wit-table td {
    border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
    color: var(--text-secondary) !important;
}
[data-wit-component] .table tbody tr:hover, [data-wit-component] .dash-table tbody tr:hover, [data-wit-component] .wit-table tbody tr:hover,
.table tbody tr:hover, .dash-table tbody tr:hover, .wit-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

/* ── Buttons: neon glow ── */
.btn-primary, .btn-outline-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
    color: #fff !important;
    transition: all 0.3s ease;
}
.btn-primary:hover, .btn-outline-primary:hover {
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}
.btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: var(--text-secondary) !important;
}

/* ── Search boxes: glow focus ring ── */
.search-bar .form-control, .input-group .form-control {
    background: rgba(15, 15, 40, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}
.search-bar .form-control:focus, .input-group .form-control:focus {
    border-color: var(--holo-border-active);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
    outline: none;
}
.search-bar .input-group-text, .input-group .input-group-text {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

/* ── Badges: neon color palette ── */
.badge, .dash-badge, [class*="badge"] {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}
.badge.bg-success, .dash-badge.bg-success, span.bg-success { background: linear-gradient(135deg, #059669, #10b981) !important; }
.badge.bg-warning, span.bg-warning { background: linear-gradient(135deg, #d97706, var(--neon-warning)) !important; color: #1a1a2e !important; }
.badge.bg-info, span.bg-info { background: linear-gradient(135deg, #0284c7, #06b6d4) !important; }
.badge.bg-danger, span.bg-danger { background: linear-gradient(135deg, #dc2626, #f43f5e) !important; }
.badge.bg-primary, span.bg-primary { background: linear-gradient(135deg, #4f46e5, var(--neon-primary)) !important; }
.badge.bg-secondary, span.bg-secondary { background: linear-gradient(135deg, #475569, #64748b) !important; color: var(--text-primary) !important; }

/* ── Links: cyan glow ── */
a:not(.btn):not(.nav-link):not(.holo-nav-item) {
    color: #67e8f9;
    transition: color 0.2s;
}
a:hover:not(.btn):not(.nav-link) {
    color: #a5f3fc;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

/* ── Headings: gradient text ── */
h1, h2, h3, h4, h5, .fut-hero-title {
    background: linear-gradient(135deg, var(--text-primary), #a5b4fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── Code/Pre: terminal aesthetic ── */
code {
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* ── Select/Dropdown: dark futuristic ── */
.form-select, select {
    background: rgba(15, 15, 40, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Home Dashboard
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="home-dashboard"] {
    /* --dash-hero-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); */
    /* --dash-card-bg: rgba(20, 25, 50, 0.9); */
    /* --dash-kpi-accent: #6366f1; */
}
[data-wit-component="home-dashboard"] .dash-hero {
    background: var(--dash-hero-bg, linear-gradient(135deg, #0f0a1a 0%, #0a1025 30%, #0a1a2e 60%, #061220 100%));
    border: 1px solid var(--holo-border, var(--holo-border));
    border-radius: 14px;
    padding: 48px;
    position: relative;
    overflow: hidden;
}
[data-wit-component="home-dashboard"] .dash-hero::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, rgba(99,102,241,0.08) 0%, transparent 70%);
    pointer-events: none;
}
[data-wit-component="home-dashboard"] .dash-card {
    background: var(--dash-card-bg, var(--holo-surface, var(--holo-surface)));
    border: 1px solid var(--holo-border-subtle, var(--holo-border-subtle));
    border-radius: 10px;
    transition: all 0.3s ease;
}
[data-wit-component="home-dashboard"] .dash-card:hover {
    border-color: var(--holo-border-active, var(--holo-border-active));
    box-shadow: var(--holo-glow, 0 0 20px rgba(99,102,241,0.12));
}
[data-wit-component="home-dashboard"] .dash-card-body {
    padding: 24px;
}
[data-wit-component="home-dashboard"] .domain-card {
    background: var(--holo-surface, var(--holo-surface));
    border: 1px solid var(--holo-border-subtle, var(--holo-border-subtle));
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
[data-wit-component="home-dashboard"] .domain-card:hover {
    border-color: var(--neon-primary, var(--neon-primary));
    box-shadow: var(--holo-glow, 0 0 20px rgba(99,102,241,0.12));
    transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Warehouse Dashboard
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="warehouse-dashboard"] {
    /* --wh-bg: #0a0e17; */
    /* --wh-card-bg: rgba(16,20,40,0.85); */
    /* --wh-accent: #22d3ee; */
    /* --wh-danger: #ef4444; */
}
[data-wit-component="warehouse-dashboard"] .dashboard {
    padding: 24px;
    max-width: 1440px;
    margin: 0 auto;
}
[data-wit-component="warehouse-dashboard"] .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
[data-wit-component="warehouse-dashboard"] .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
[data-wit-component="warehouse-dashboard"] .map-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
[data-wit-component="warehouse-dashboard"] .waves-section {
    margin-bottom: 24px;
}
[data-wit-component="warehouse-dashboard"] .gauges-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Pick Tasks
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="pick-tasks"] {
    /* --pick-accent: #22d3ee; */
    /* --pick-card-bg: rgba(16,20,40,0.85); */
}
[data-wit-component="pick-tasks"] .pick-tasks-page {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}
[data-wit-component="pick-tasks"] .task-list > * {
    margin-bottom: 12px;
}
[data-wit-component="pick-tasks"] .task-list > *:last-child {
    margin-bottom: 0;
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Active Pick
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="active-pick"] {
    /* --pick-active-accent: #22c55e; */
}
[data-wit-component="active-pick"] .active-pick {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Putaway
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="putaway"] {
    /* --putaway-accent: #f59e0b; */
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Yard Management
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="yard"] {
    /* --yard-available: #22c55e; */
    /* --yard-occupied: #ef4444; */
}
[data-wit-component="yard"] .dock-card.available {
    border-left: 3px solid var(--yard-available, var(--neon-success));
}
[data-wit-component="yard"] .dock-card.occupied {
    border-left: 3px solid var(--yard-occupied, var(--neon-danger));
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Profile
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="profile"] {
    /* --profile-accent: #6366f1; */
}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: AppShell — Floating ⋯ dots + Taskbar
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="app-shell"] {
  --shell-accent:#6366f1;--shell-bg:rgba(10,14,23,0.95);
}
/* ── Top Bar ── */
[data-wit-component="app-shell"] .top-bar {
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:52px;padding:0 16px;
  background:rgba(10,14,23,0.92);border-bottom:1px solid rgba(99,102,241,0.15);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
[data-wit-component="app-shell"] .top-bar-left,
[data-wit-component="app-shell"] .top-bar-right {
  display:flex;align-items:center;gap:8px;
}
[data-wit-component="app-shell"] .top-bar-center {
  flex:1;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6px;
}
[data-wit-component="app-shell"] .page-status {
  font-size:0.78rem;font-weight:500;color:var(--text-dim);white-space:nowrap;
}
[data-wit-component="app-shell"] .status-dot {
  width:6px;height:6px;border-radius:50%;background:var(--neon-success);box-shadow:0 0 6px var(--neon-success);flex-shrink:0;
}
[data-wit-component="app-shell"] .hat-context .connection-dot {
  margin-left:2px;
}
[data-wit-component="app-shell"] .page-title {
  font-size:0.9rem;font-weight:600;color:var(--text-primary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-wit-component="app-shell"] .top-bar-btn {
  background:none;border:none;color:var(--text-primary);
  font-size:1rem;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .15s;
}
[data-wit-component="app-shell"] .top-bar-btn:hover{background:rgba(99,102,241,0.1);color:var(--text-primary);}
[data-wit-component="app-shell"] .top-bar-btn.active{color:var(--shell-accent,var(--neon-primary));background:rgba(99,102,241,0.15);}
/* Language selector */
.language-selector .lang-btn {
  display:flex;align-items:center;gap:3px;
  background:transparent;border:1px solid rgba(255,255,255,0.08);
  color:var(--text-secondary);font-size:0.72rem;font-weight:600;
  padding:4px 8px;border-radius:8px;
}
.language-selector .lang-btn:hover{background:rgba(99,102,241,0.1);color:var(--text-primary);}
.language-selector .lang-flag{font-size:0.85rem;line-height:1;}
.language-selector .lang-code{line-height:1;}
/* Light mode */
html[data-theme="light"] .language-selector .lang-btn{color:#4a4a60;border-color:rgba(0,0,0,0.1);}
html[data-theme="light"] .language-selector .lang-btn:hover{color:#1a1a2e;background:rgba(79,70,229,0.06);}
.language-selector .lang-menu {
  background:rgba(16,20,40,0.95);border:1px solid rgba(99,102,241,0.15);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:10px;padding:4px;min-width:160px;
}
.language-selector .dropdown-item {
  display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:0.8rem;
  padding:8px 12px;border-radius:6px;
}
.language-selector .dropdown-item:hover{background:rgba(99,102,241,0.1);color:var(--text-primary);}
.language-selector .dropdown-item.active{background:rgba(99,102,241,0.15);color:#fff;}
.language-selector .lang-check{color:var(--neon-primary);margin-left:auto;}
html[data-theme="light"] .language-selector .lang-menu{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08);}
html[data-theme="light"] .language-selector .dropdown-item{color:#4a4a60;}
html[data-theme="light"] .language-selector .dropdown-item:hover{background:rgba(79,70,229,0.06);color:#1a1a2e;}

/* ── Page Tabs (browser-style, above taskbar) ── */
.page-tabs {
  display:flex;align-items:center;gap:0;
  background:rgba(10,14,23,0.95);border-bottom:1px solid rgba(99,102,241,0.1);
  padding:0 8px;overflow-x:auto;height:34px;flex-shrink:0;
}
.page-tab {
  display:flex;align-items:center;gap:6px;
  padding:5px 10px 5px 12px;border-right:1px solid rgba(255,255,255,0.04);
  color:var(--text-dim);font-size:0.72rem;cursor:pointer;white-space:nowrap;
  transition:all .15s;max-width:160px;position:relative;
}
.page-tab:hover{color:var(--text-primary);background:rgba(99,102,241,0.05);}
.page-tab.active{color:var(--text-primary);background:rgba(99,102,241,0.1);}
.page-tab.active::after {
  content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;
  background:var(--neon-primary);border-radius:2px 2px 0 0;
}
.page-tab-icon{font-size:0.8rem;flex-shrink:0;}
.page-tab-label{overflow:hidden;text-overflow:ellipsis;}
.page-tab-close {
  background:none;border:none;color:#64748b;font-size:0.6rem;padding:2px 4px;
  border-radius:4px;cursor:pointer;line-height:1;margin-left:2px;
}
.page-tab-close:hover{color:var(--neon-danger);background:rgba(239,68,68,0.1);}
html[data-theme="light"] .page-tabs {
  background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.06);
}
html[data-theme="light"] .page-tab{color:#6b6b80;border-color:rgba(0,0,0,0.04);}
html[data-theme="light"] .page-tab:hover{color:#1a1a2e;background:rgba(79,70,229,0.04);}
html[data-theme="light"] .page-tab.active{color:#1a1a2e;background:rgba(79,70,229,0.06);}

[data-wit-component="app-shell"] .top-bar-panel-btn {
  margin-left:auto;font-size:1.05rem;
}
[data-wit-component="app-shell"] .theme-toggle-btn {
  display:flex;align-items:center;gap:4px;min-width:56px;
}
/* Left toggle button: absolute so it doesn't break flex layout */
[data-wit-component="app-shell"] .left-toggle-btn {
  position:absolute;top:52px;left:4px;z-index:90;display:none;
  background:var(--holo-surface);border:1px solid rgba(99,102,241,0.2);
  border-radius:0 8px 8px 0;color:var(--text-secondary);cursor:pointer;
  padding:4px 8px;font-size:1rem;
}
[data-wit-component="app-shell"] .theme-label {
  font-size:0.7rem;font-weight:500;opacity:0.8;
}
/* Branding */
[data-wit-component="app-shell"] .branding {
  display:flex;align-items:center;gap:8px;
}
[data-wit-component="app-shell"] .branding-icon{font-size:1.1rem;}
[data-wit-component="app-shell"] .branding-name{font-size:0.85rem;font-weight:600;color:var(--text-primary);}
/* Hat context */
[data-wit-component="app-shell"] .hat-context {
  display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--text-secondary);
  margin-left:12px;padding-left:12px;border-left:1px solid var(--holo-border-subtle);
}
[data-wit-component="app-shell"] .connection-dot {
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
[data-wit-component="app-shell"] .connection-dot.online{background:var(--neon-success);box-shadow:0 0 6px var(--neon-success);}
[data-wit-component="app-shell"] .connection-dot.offline{background:var(--neon-danger);box-shadow:0 0 4px var(--neon-danger);}
/* app-shell: flex root fills viewport (top-bar + task-bar are position:fixed, out of flow) */
[data-wit-component="app-shell"]{display:flex;flex-direction:column;height:100vh;overflow:hidden;padding-top:52px;}
/* Main content fills remaining space (flex:1 handles fixed top-bar offset via parent padding) */
[data-wit-component="app-shell"] .main-content{flex:1;display:flex;flex-direction:column;}
[data-wit-component="app-shell"] .page-content{flex:1;display:flex;flex-direction:column;}
/* ── Responsive: push main content when panels are open ── */
[data-wit-component="app-shell"].left-open .main-content{margin-left:280px;}
[data-wit-component="app-shell"].right-open .main-content{margin-right:320px;}
[data-wit-component="app-shell"].left-open.right-open .main-content{margin-left:280px;margin-right:320px;}
/* Smooth transition when panels open/close */
[data-wit-component="app-shell"] .main-content{transition:margin-left 0.3s cubic-bezier(.4,0,.2,1),margin-right 0.3s cubic-bezier(.4,0,.2,1);}
/* Floating left/right ⋯ toggle buttons */
[data-wit-component="app-shell"] .floating-dot {
  position:fixed;top:50%;transform:translateY(-50%);z-index:200;
  width:32px;height:64px;border-radius:16px 0 0 16px;
  background:rgba(16,20,40,0.9);border:1px solid var(--holo-border);
  border-right:none;color:var(--shell-accent,var(--neon-primary));
  font-size:1.2rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;letter-spacing:-2px;line-height:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);writing-mode:vertical-rl;
}
[data-wit-component="app-shell"] .floating-dot-left {
  left:0;border-radius:0 16px 16px 0;border-right:1px solid var(--holo-border);border-left:none;
}
[data-wit-component="app-shell"] .floating-dot-right {
  right:0;border-radius:16px 0 0 16px;
}
[data-wit-component="app-shell"] .floating-dot:hover {
  background:rgba(99,102,241,0.15);border-color:var(--shell-accent,var(--neon-primary));
  box-shadow:0 0 20px rgba(99,102,241,0.3);width:36px;
}
[data-wit-component="app-shell"] .floating-dot.active {
  background:rgba(99,102,241,0.2);border-color:var(--shell-accent,var(--neon-primary));
  box-shadow:0 0 16px var(--holo-border);
}
/* Top bar ⋯ buttons */
[data-wit-component="app-shell"] .top-bar-menu-btn {
  background:none;border:none;color:var(--shell-accent,var(--neon-primary));
  font-size:1.4rem;font-weight:700;cursor:pointer;padding:4px 8px;
  letter-spacing:-2px;transition:all .2s;
}
[data-wit-component="app-shell"] .top-bar-menu-btn:hover{color:var(--text-primary);text-shadow:0 0 12px rgba(99,102,241,0.5);}
/* Taskbar */
[data-wit-component="app-shell"] .task-bar {
  position:fixed;bottom:0;left:0;right:0;z-index:150;height:70px;
  display:flex;justify-content:center;gap:8px;padding:8px 16px 10px;
  background:rgba(10,14,23,0.92);border-top:1px solid rgba(99,102,241,0.15);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
[data-wit-component="app-shell"] .task-bar-btn {
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--text-secondary);
  cursor:pointer;padding:6px 12px;border-radius:10px;
  transition:all .2s ease;min-width:56px;font-size:0.68rem;
}
[data-wit-component="app-shell"] .task-bar-btn:hover {
  background:rgba(99,102,241,0.1);color:var(--text-primary);
}
[data-wit-component="app-shell"] .task-bar-btn.primary {
  background:linear-gradient(135deg,var(--shell-accent,var(--neon-primary)),#818cf8);
  color:#fff;border-radius:12px;padding:6px 16px;box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
[data-wit-component="app-shell"] .task-bar-btn.primary:hover {
  box-shadow:0 6px 24px rgba(99,102,241,0.5);transform:translateY(-2px);
}
[data-wit-component="app-shell"] .task-btn-icon{font-size:1.2rem;flex-shrink:0;}
[data-wit-component="app-shell"] .task-btn-label{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;}

/* ═══════════════════════════════════════════════════════════════════
   BASE SEARCH STYLES (before responsive so media queries override)
   ═══════════════════════════════════════════════════════════════════ */
.ds-search-box{display:flex;align-items:center;max-width:640px;margin:0 auto;background:var(--holo-surface,var(--holo-surface));border:1px solid rgba(99,102,241,0.18);border-radius:16px;padding:4px 4px 4px 16px;transition:border-color .2s,box-shadow .2s;overflow:hidden;}
.ds-search-box:focus-within{border-color:var(--dm-accent,var(--neon-primary));box-shadow:0 0 32px rgba(99,102,241,0.2);}
.ds-search-row{display:flex;align-items:center;width:100%;}
.ds-search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:1rem;padding:12px 0;}
.ds-search-input::placeholder{color:var(--text-dim);}
.ds-search-btn{background:var(--dm-accent,var(--neon-primary));border:none;color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:0.9rem;flex-shrink:0;}
.ds-search-btn:disabled{opacity:0.3;cursor:default;}
.ds-search-btn:not(:disabled):hover{box-shadow:0 0 20px rgba(99,102,241,0.4);}
.ds-mic-btn{background:transparent;border:none;color:var(--text-secondary);width:40px;height:40px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:0.95rem;flex-shrink:0;}
.ds-mic-btn:hover{color:var(--text-primary);background:rgba(99,102,241,0.1);}
.ds-mic-btn.listening{color:var(--neon-danger);background:rgba(239,68,68,0.15);animation:mic-pulse 1s ease-in-out infinite;}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.3)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.ds-search-modes{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;margin-top:16px;}
.ds-mode-chip{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:8px 18px;color:var(--text-secondary);font-size:0.82rem;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.ds-mode-chip:hover{border-color:rgba(99,102,241,0.4);color:var(--text-primary);background:rgba(99,102,241,0.06);}
.ds-mode-chip.active{border-color:var(--dm-accent,var(--neon-primary));color:#fff;background:rgba(99,102,241,0.15);box-shadow:0 0 12px rgba(99,102,241,0.15);}
.ds-tab{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text-secondary);padding:8px 16px;border-radius:8px;font-size:0.82rem;cursor:pointer;transition:all .15s;flex-shrink:0;}
.ds-tab:hover{color:var(--text-primary);background:rgba(99,102,241,0.06);}
.ds-tab.active{color:var(--text-primary);background:rgba(99,102,241,0.12);font-weight:500;}
.ds-search{margin-bottom:24px;}
.ds-search-icon{color:var(--text-secondary,#64748b);font-size:0.95rem;margin-right:10px;}

/* ═══════════════════════════════════════════════════════════════════
   SHELL RESPONSIVE — 7 Standalone Layout Concepts
   Each breakpoint is a COMPLETELY DIFFERENT design, not scaled.
   ═══════════════════════════════════════════════════════════════════ */

/* ── BASE HOME DASHBOARD (before responsive so media queries override) ── */
[data-wit-component="home-dashboard"] {
  max-width:720px;width:100%;margin:0 auto;padding:48px 24px 40px;
  text-align:center;container-type:inline-size;
  display:flex;flex-direction:column;
}
/* Auto-margin centering on tall screens (viewport height > 950px) */
@media (min-height: 950px) {
  [data-wit-component="home-dashboard"] .ds-logo{margin-top:auto;}
  [data-wit-component="home-dashboard"] .ds-prompts{margin-bottom:auto;flex:0;}
}
/* ── BASE MAIN-CONTENT PADDING (before responsive) ── */
[data-wit-component="app-shell"].taskbar-visible{padding-bottom:70px;}

/* ── 1. WATCH (≤360px) — "Glance & Tap" ── */
/* CONCEPT: No top bar chrome. Content fills screen. Single bottom action
   bar with 3 essential buttons. Panels = full screen overlays.
   Language selector = flag emoji only, top-right corner. */
@media (max-width:360px) {
  /* Top bar: ultra-minimal — just flag + hamburger, no text */
  [data-wit-component="app-shell"] .top-bar{height:32px;padding:0 4px;background:transparent;border:none;}
  [data-wit-component="app-shell"] .top-bar-left{gap:4px;}
  [data-wit-component="app-shell"] .top-bar-center{display:none;}
  [data-wit-component="app-shell"] .top-bar-right{gap:4px;}
  [data-wit-component="app-shell"]{padding-top:32px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:32px;}
  [data-wit-component="app-shell"] .branding-name,.branding-icon{display:none;}
  [data-wit-component="app-shell"] .hat-context{display:none;}
  [data-wit-component="app-shell"] .page-status{display:none;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:0.85rem;padding:3px 5px;background:rgba(16,20,40,0.7);border-radius:6px;}
  [data-wit-component="app-shell"] .theme-toggle-btn{min-width:28px;padding:3px 5px;font-size:0.7rem;background:rgba(16,20,40,0.7);border-radius:6px;}
  [data-wit-component="app-shell"] .theme-label{display:none;}
  /* Language: flag-only pill, top-right */
  .language-selector .lang-btn{padding:3px 5px;font-size:0.8rem;background:rgba(16,20,40,0.7);border-radius:6px;border:none;}
  .language-selector .lang-code{display:none;}
  .language-selector .lang-flag{font-size:0.9rem;}
  /* Panels: full screen, slide from edges */
  [data-wit-component="app-shell"] .left-panel{width:100vw;padding-top:32px;}
  [data-wit-component="app-shell"] .right-panel{width:100vw;padding-top:32px;}
  [data-wit-component="app-shell"].left-open .main-content,
  [data-wit-component="app-shell"].right-open .main-content{margin-left:0;margin-right:0;}
  /* Bottom bar: 3 large touch targets, centered */
  [data-wit-component="app-shell"] .task-bar{padding:4px 8px 6px;gap:12px;justify-content:center;height:44px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:44px;padding:4px 8px;border-radius:22px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.2rem;}
  [data-wit-component="app-shell"] .task-btn-label{display:none;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:44px;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{background:linear-gradient(135deg,var(--neon-primary),#818cf8);color:#fff;padding:4px 14px;}
  /* Panel content: readable, touch-friendly */
  [data-wit-component="app-shell"] .nav-item{font-size:0.9rem;padding:12px 16px;min-height:44px;gap:10px;border-radius:10px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1.1rem;width:24px;}
  [data-wit-component="app-shell"] .nav-section-title{font-size:0.65rem;padding:8px 16px 4px;letter-spacing:1.5px;}
  [data-wit-component="app-shell"] .panel-header{padding:10px 14px;font-size:0.9rem;}
  [data-wit-component="app-shell"] .panel-search{padding:8px 12px;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.85rem;}
  [data-wit-component="app-shell"] .panel-close-btn{font-size:1.2rem;padding:8px 12px;}
  .page-tabs{display:none;}
  /* Tree: generous touch targets */
  .tree-node-header{font-size:0.85rem;padding:10px 14px;min-height:44px;}
  .tree-node-label{font-size:0.85rem;}
  .tree-leaf{font-size:0.82rem;padding:10px 14px 10px 28px;min-height:42px;}
  .tree-node-children{padding:2px 0 2px 18px;}
  .tree-caret{font-size:0.65rem;width:12px;}
  /* Quick Access: horizontal scrollable chips, not vertical list */
  .category-tree-panel .nav-section,
  .subjectmatter-panel .nav-section{display:flex;flex-direction:row;overflow-x:auto;gap:6px;padding:4px 8px;}
  .category-tree-panel .nav-section::-webkit-scrollbar,
  .subjectmatter-panel .nav-section::-webkit-scrollbar{display:none;}
  .category-tree-panel .nav-section .nav-item,
  .category-tree-panel .nav-section a,
  .subjectmatter-panel .nav-section .nav-item,
  .subjectmatter-panel .nav-section a{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;font-size:0.72rem;background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.1);color:var(--text-secondary);text-decoration:none;white-space:nowrap;min-height:32px;}
  .category-tree-panel .nav-section-title,
  .subjectmatter-panel .nav-section-title{font-size:0.6rem;padding:6px 10px 2px;}
  /* Favorites: horizontal scrollable bar (swipe within container) */
  [data-wit-component="home-dashboard"] .fav-items{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 0 6px;}
  [data-wit-component="home-dashboard"] .fav-items::-webkit-scrollbar{display:none;}
  [data-wit-component="home-dashboard"] .fav-item{min-width:56px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;}
  [data-wit-component="home-dashboard"] .fav-icon-ring{width:40px;height:40px;border-radius:12px;font-size:1.1rem;}
  [data-wit-component="home-dashboard"] .fav-name{font-size:0.6rem;max-width:56px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Recents: compact scrollable chips */
  [data-wit-component="home-dashboard"] .recents-scroll{gap:6px;}
  [data-wit-component="home-dashboard"] .recent-chip{padding:5px 10px;font-size:0.7rem;gap:5px;border-radius:16px;}
  [data-wit-component="home-dashboard"] .recents-label,[data-wit-component="home-dashboard"] .fav-label{font-size:0.6rem;margin-bottom:6px;}
  /* SearchBar: icon-only chips, equal width, fill the row */
  .ds-search-box{padding:3px;border-radius:8px;max-width:100%;}
  .ds-search-input{font-size:0.75rem;padding:6px 0;}
  .ds-search-btn,.ds-mic-btn{width:28px;height:28px;border-radius:6px;font-size:0.7rem;flex-shrink:0;}
  .ds-mode-chip{font-size:0;padding:0;gap:0;border-radius:8px;flex:1 1 0;min-width:0;height:28px;justify-content:center;}
  .ds-mode-chip i{font-size:0.75rem;margin:0;}
  .ds-tab{font-size:0.65rem;padding:4px 8px;}
  .ds-tabs{gap:2px;margin-bottom:10px;}
  .ds-search-modes{gap:3px;margin-top:8px;flex-wrap:nowrap;width:100%;}
  .ds-search-spacer{display:none;}
  .ds-prompts{gap:4px;margin-bottom:14px;}
  .ds-prompt-chip{font-size:0.65rem;padding:4px 8px;}
  .ds-search-icon{font-size:0.7rem;margin-right:6px;}
  .sb-input{font-size:0.75rem;}
  .sb-mode-chip{font-size:0.7rem;padding:5px 12px;}
  .panel-search-mic{font-size:0.85rem;}
  /* Home dashboard: fill screen, vertically centered */
  [data-wit-component="home-dashboard"]{max-width:100%;padding:8px 12px 16px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-top:auto;margin-bottom:8px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.2rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:0.9rem;}
  [data-wit-component="home-dashboard"] .ds-prompts{gap:4px;margin-bottom:auto;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.62rem;padding:4px 8px;}
}

/* ── 2. SMALL PHONE (361-400px) — "Thumb Zone" ── */
/* CONCEPT: Bottom-aligned navigation. Top bar shows only essential info.
   Search bar is prominent at top of content. Taskbar has 4-5 labeled icons.
   Panels are full-width overlays with swipe-close. */
@media (max-width:400px) and (min-width:361px) {
  /* Top bar: compact but readable */
  [data-wit-component="app-shell"] .top-bar{height:40px;padding:0 6px;}
  [data-wit-component="app-shell"] .top-bar-left{gap:6px;}
  [data-wit-component="app-shell"] .top-bar-center{display:none;}
  [data-wit-component="app-shell"] .top-bar-right{gap:6px;}
  [data-wit-component="app-shell"]{padding-top:40px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:40px;}
  [data-wit-component="app-shell"] .branding-icon{font-size:0.9rem;}
  [data-wit-component="app-shell"] .branding-name{display:none;}
  [data-wit-component="app-shell"] .hat-context{gap:4px;margin-left:6px;padding-left:6px;}
  [data-wit-component="app-shell"] .hat-context-label{display:none;}
  [data-wit-component="app-shell"] .page-status{font-size:0.6rem;max-width:70px;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:0.85rem;padding:4px 6px;}
  [data-wit-component="app-shell"] .theme-label{display:none;}
  [data-wit-component="app-shell"] .theme-toggle-btn{min-width:30px;padding:4px 6px;}
  /* Language: compact pill with flag only */
  .language-selector .lang-btn{padding:4px 6px;font-size:0.7rem;}
  .language-selector .lang-code{display:none;}
  /* Panels: full-width overlay */
  [data-wit-component="app-shell"] .left-panel{width:100vw;padding-top:40px;}
  [data-wit-component="app-shell"] .right-panel{width:100vw;padding-top:40px;}
  [data-wit-component="app-shell"].left-open .main-content,
  [data-wit-component="app-shell"].right-open .main-content{margin-left:0;margin-right:0;}
  /* Bottom bar: 4-5 icons in thumb zone */
  [data-wit-component="app-shell"] .task-bar{padding:5px 6px 7px;gap:8px;justify-content:center;height:48px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:40px;padding:5px 6px;border-radius:20px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.15rem;}
  [data-wit-component="app-shell"] .task-btn-label{display:none;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{padding:5px 14px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:48px;}
  /* Panel: touch-friendly */
  [data-wit-component="app-shell"] .nav-item{font-size:0.9rem;padding:12px 16px;min-height:44px;gap:10px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1.1rem;width:24px;}
  [data-wit-component="app-shell"] .nav-section-title{font-size:0.68rem;padding:8px 16px 4px;}
  [data-wit-component="app-shell"] .panel-header{padding:10px 14px;font-size:0.9rem;}
  [data-wit-component="app-shell"] .panel-search{padding:8px 12px;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.85rem;}
  [data-wit-component="app-shell"] .panel-close-btn{font-size:1.2rem;padding:8px 14px;}
  .page-tabs{display:none;}
  /* Quick Access: horizontal scrollable chips */
  .category-tree-panel .nav-section,
  .subjectmatter-panel .nav-section{display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:6px 10px;}
  .category-tree-panel .nav-section::-webkit-scrollbar,
  .subjectmatter-panel .nav-section::-webkit-scrollbar{display:none;}
  .category-tree-panel .nav-section .nav-item,
  .category-tree-panel .nav-section a,
  .subjectmatter-panel .nav-section .nav-item,
  .subjectmatter-panel .nav-section a{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;font-size:0.74rem;background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.1);color:var(--text-secondary);text-decoration:none;white-space:nowrap;min-height:34px;}
  .category-tree-panel .nav-section-title,
  .subjectmatter-panel .nav-section-title{font-size:0.62rem;padding:6px 12px 2px;}
  /* Favorites: 3-column grid */
  [data-wit-component="home-dashboard"] .fav-items{gap:10px;}
  [data-wit-component="home-dashboard"] .fav-item{min-width:0;flex:0 0 calc(33.33% - 7px);}
  [data-wit-component="home-dashboard"] .fav-icon-ring{width:40px;height:40px;border-radius:12px;font-size:1.05rem;}
  [data-wit-component="home-dashboard"] .fav-name{font-size:0.62rem;max-width:100%;}
  [data-wit-component="home-dashboard"] .recent-chip{padding:6px 12px;font-size:0.72rem;gap:6px;}
  /* Tree: touch-friendly */
  .tree-node-header{font-size:0.85rem;padding:10px 14px;min-height:44px;}
  .tree-node-label{font-size:0.85rem;}
  .tree-leaf{font-size:0.82rem;padding:10px 14px 10px 28px;min-height:42px;}
  .tree-node-children{padding:2px 0 2px 18px;}
  /* SearchBar */
  .ds-search-box{padding:4px 4px 4px 12px;border-radius:12px;}
  .ds-search-input{font-size:0.82rem;padding:9px 0;}
  .ds-search-btn,.ds-mic-btn{width:36px;height:36px;border-radius:9px;}
  .ds-mode-chip{font-size:0.72rem;padding:6px 14px;}
  .ds-tab{font-size:0.74rem;padding:7px 12px;}
  .ds-tabs{gap:4px;margin-bottom:16px;}
  .sb-input{font-size:0.82rem;}
  .sb-mode-chip{font-size:0.72rem;padding:6px 14px;}
  .panel-search-mic{font-size:0.85rem;}
  /* Home dashboard: compact, vertically centered */
  [data-wit-component="home-dashboard"]{max-width:100%;padding:12px 16px 20px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-bottom:10px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.4rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1rem;}
  [data-wit-component="home-dashboard"] .ds-prompts{gap:5px;margin-bottom:16px;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.66rem;padding:5px 10px;}
}

/* ── 3. STANDARD PHONE (401-480px) — "One-Hand" ── */
/* CONCEPT: Full top bar with branding. Bottom taskbar with icons.
   Search is hero element. Panels overlay. Page tabs hidden.
   All interactive elements within thumb reach (bottom 60% of screen). */
@media (max-width:480px) and (min-width:401px) {
  /* Top bar: full info, compact */
  [data-wit-component="app-shell"] .top-bar{height:44px;padding:0 8px;}
  [data-wit-component="app-shell"] .top-bar-left{gap:8px;}
  [data-wit-component="app-shell"] .top-bar-center{display:flex;}
  [data-wit-component="app-shell"] .top-bar-right{gap:8px;}
  [data-wit-component="app-shell"]{padding-top:44px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:44px;}
  [data-wit-component="app-shell"] .branding-name{font-size:0.7rem;}
  [data-wit-component="app-shell"] .hat-context{gap:4px;margin-left:8px;padding-left:8px;}
  [data-wit-component="app-shell"] .hat-context-label{display:none;}
  [data-wit-component="app-shell"] .page-status{font-size:0.62rem;max-width:90px;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:0.9rem;padding:5px 8px;}
  [data-wit-component="app-shell"] .theme-label{display:none;}
  [data-wit-component="app-shell"] .theme-toggle-btn{min-width:32px;padding:5px 8px;}
  /* Language: flag + code visible */
  .language-selector .lang-btn{padding:4px 7px;font-size:0.7rem;}
  .language-selector .lang-code{font-size:0.65rem;}
  /* Panels: full-width overlay */
  [data-wit-component="app-shell"] .left-panel{width:100vw;padding-top:44px;}
  [data-wit-component="app-shell"] .right-panel{width:100vw;padding-top:44px;}
  [data-wit-component="app-shell"].left-open .main-content,
  [data-wit-component="app-shell"].right-open .main-content{margin-left:0;margin-right:0;}
  /* Taskbar: 5 icons, centered, thumb zone */
  [data-wit-component="app-shell"] .task-bar{padding:6px 8px 8px;gap:10px;justify-content:center;height:52px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:44px;padding:6px 8px;border-radius:22px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.2rem;}
  [data-wit-component="app-shell"] .task-btn-label{display:none;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{padding:6px 16px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:52px;}
  /* Panel: generous touch targets */
  [data-wit-component="app-shell"] .nav-item{font-size:0.92rem;padding:13px 18px;min-height:46px;gap:12px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1.15rem;width:26px;}
  [data-wit-component="app-shell"] .nav-section-title{font-size:0.7rem;padding:10px 18px 4px;}
  [data-wit-component="app-shell"] .panel-header{padding:12px 16px;font-size:0.92rem;}
  [data-wit-component="app-shell"] .panel-search{padding:8px 14px;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.88rem;}
  [data-wit-component="app-shell"] .panel-close-btn{font-size:1.3rem;padding:10px 16px;}
  .page-tabs{display:none;}
  /* Quick Access: vertical but compact, 2-column grid */
  .category-tree-panel .nav-section,
  .subjectmatter-panel .nav-section{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 10px;overflow-x:visible;}
  .category-tree-panel .nav-section .nav-item,
  .category-tree-panel .nav-section a,
  .subjectmatter-panel .nav-section .nav-item,
  .subjectmatter-panel .nav-section a{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-size:0.78rem;background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.1);color:var(--text-secondary);text-decoration:none;white-space:nowrap;min-height:36px;overflow:hidden;}
  .category-tree-panel .nav-section-title,
  .subjectmatter-panel .nav-section-title{font-size:0.65rem;padding:8px 12px 3px;}
  /* Favorites: 3-column */
  [data-wit-component="home-dashboard"] .fav-items{gap:12px;}
  [data-wit-component="home-dashboard"] .fav-item{min-width:0;flex:0 0 calc(33.33% - 8px);}
  [data-wit-component="home-dashboard"] .fav-icon-ring{width:44px;height:44px;border-radius:12px;font-size:1.1rem;}
  [data-wit-component="home-dashboard"] .fav-name{font-size:0.65rem;max-width:100%;}
  /* Tree: generous */
  .tree-node-header{font-size:0.88rem;padding:12px 16px;min-height:46px;}
  .tree-node-label{font-size:0.88rem;}
  .tree-leaf{font-size:0.85rem;padding:10px 16px 10px 30px;min-height:44px;}
  .tree-node-children{padding:2px 0 2px 20px;}
  /* SearchBar: hero element */
  .ds-search-box{padding:5px 5px 5px 14px;border-radius:14px;}
  .ds-search-input{font-size:0.9rem;padding:11px 0;}
  .ds-search-btn,.ds-mic-btn{width:40px;height:40px;border-radius:10px;}
  .ds-mode-chip{font-size:0.76rem;padding:7px 16px;}
  .ds-tab{font-size:0.78rem;padding:8px 14px;}
  .ds-tabs{gap:5px;margin-bottom:18px;}
  .sb-input{font-size:0.9rem;}
  .sb-mode-chip{font-size:0.76rem;padding:7px 16px;}
  .panel-search-mic{font-size:0.9rem;}
  /* Home dashboard: hero layout with breathing room */
  [data-wit-component="home-dashboard"]{max-width:100%;padding:16px 20px 24px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-bottom:14px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.6rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1.2rem;}
  [data-wit-component="home-dashboard"] .ds-prompts{gap:6px;margin-bottom:20px;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.7rem;padding:6px 14px;}
}

/* ── 4. LARGE PHONE (481-600px) — "Two-Thumb" ── */
/* CONCEPT: Side panels slide over. Taskbar has labels. Page tabs visible.
   Search bar with mode chips. Two-hand operation possible. */
@media (max-width:600px) and (min-width:481px) {
  /* Top bar: full with branding */
  [data-wit-component="app-shell"] .top-bar{height:46px;padding:0 10px;}
  [data-wit-component="app-shell"]{padding-top:46px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:46px;}
  [data-wit-component="app-shell"] .branding-name{font-size:0.72rem;}
  [data-wit-component="app-shell"] .hat-context-label{display:inline;}
  [data-wit-component="app-shell"] .page-status{font-size:0.65rem;max-width:110px;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:0.92rem;padding:5px 9px;}
  [data-wit-component="app-shell"] .theme-label{display:none;}
  [data-wit-component="app-shell"] .theme-toggle-btn{min-width:34px;padding:5px 8px;}
  /* Language: flag + code */
  .language-selector .lang-btn{padding:4px 8px;font-size:0.72rem;}
  .language-selector .lang-code{font-size:0.68rem;}
  /* Panels: slide overlay, not full-width */
  [data-wit-component="app-shell"] .left-panel{width:280px;z-index:190;}
  [data-wit-component="app-shell"] .right-panel{width:300px;z-index:190;}
  [data-wit-component="app-shell"].left-open .main-content,
  [data-wit-component="app-shell"].right-open .main-content{margin-left:0;margin-right:0;}
  /* Taskbar: labeled, 5 items */
  [data-wit-component="app-shell"] .task-bar{padding:6px 10px 8px;gap:8px;justify-content:center;height:54px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:48px;padding:5px 8px;border-radius:10px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.15rem;}
  [data-wit-component="app-shell"] .task-btn-label{font-size:0.55rem;display:block;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{padding:5px 14px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:54px;}
  /* Panel */
  [data-wit-component="app-shell"] .nav-item{font-size:0.85rem;padding:10px 14px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1rem;width:22px;}
  [data-wit-component="app-shell"] .panel-header{padding:11px 14px;font-size:0.88rem;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.82rem;}
  /* Quick Access: vertical list, back to normal */
  .category-tree-panel .nav-section,
  .subjectmatter-panel .nav-section{display:flex;flex-direction:column;gap:2px;padding:4px 8px;overflow-x:visible;}
  .category-tree-panel .nav-section .nav-item,
  .category-tree-panel .nav-section a,
  .subjectmatter-panel .nav-section .nav-item,
  .subjectmatter-panel .nav-section a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:0.8rem;background:transparent;border:none;color:var(--text-primary);text-decoration:none;white-space:nowrap;min-height:0;}
  .category-tree-panel .nav-section-title,
  .subjectmatter-panel .nav-section-title{font-size:0.66rem;padding:6px 10px 2px;}
  /* Favorites: 4-column */
  [data-wit-component="home-dashboard"] .fav-items{gap:14px;}
  [data-wit-component="home-dashboard"] .fav-item{min-width:64px;flex:0 0 auto;}
  [data-wit-component="home-dashboard"] .fav-icon-ring{width:46px;height:46px;border-radius:13px;font-size:1.15rem;}
  [data-wit-component="home-dashboard"] .fav-name{font-size:0.66rem;max-width:64px;}
  /* Page tabs: visible, compact */
  .page-tab{max-width:100px;font-size:0.68rem;padding:5px 8px;}
  .page-tab-close{display:none;}
  .page-tabs{height:30px;}
  /* Tree */
  .tree-node-header{font-size:0.82rem;padding:9px 14px;}
  .tree-node-label{font-size:0.82rem;}
  .tree-leaf{font-size:0.8rem;padding:8px 14px 8px 28px;}
  /* SearchBar */
  .ds-search-box{padding:4px 4px 4px 14px;border-radius:14px;}
  .ds-search-input{font-size:0.88rem;padding:10px 0;}
  .ds-search-btn,.ds-mic-btn{width:38px;height:38px;}
  .ds-mode-chip{font-size:0.76rem;padding:7px 16px;}
  .ds-tab{font-size:0.78rem;padding:8px 14px;}
  .sb-input{font-size:0.88rem;}
  .sb-mode-chip{font-size:0.76rem;padding:7px 16px;}
  .panel-search-mic{font-size:0.88rem;}
  /* Home dashboard: generous but compact */
  [data-wit-component="home-dashboard"]{max-width:640px;padding:20px 24px 32px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-bottom:18px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.8rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1.3rem;}
  [data-wit-component="home-dashboard"] .ds-prompts{gap:8px;margin-bottom:24px;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.74rem;padding:7px 16px;}
}

/* ── 5. TABLET (601-900px) — "Split View" ── */
/* CONCEPT: True multi-column. Panels PUSH content (not overlay).
   Full taskbar with labels. Page tabs visible. Search bar with all modes.
   This is the first breakpoint where side panels are persistent. */
@media (max-width:900px) and (min-width:601px) {
  /* Top bar: full desktop-style */
  [data-wit-component="app-shell"] .top-bar{height:40px;padding:0 14px;}
  [data-wit-component="app-shell"]{padding-top:40px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:40px;}
  [data-wit-component="app-shell"] .branding-name{font-size:0.8rem;}
  [data-wit-component="app-shell"] .page-status{font-size:0.72rem;}
  [data-wit-component="app-shell"] .page-title{font-size:0.85rem;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:0.95rem;padding:6px 10px;}
  /* Language: full */
  .language-selector .lang-btn{padding:5px 9px;font-size:0.74rem;}
  .language-selector .lang-code{font-size:0.7rem;}
  /* Panels: PUSH content (key difference from phone) */
  [data-wit-component="app-shell"] .left-panel{width:250px;}
  [data-wit-component="app-shell"] .right-panel{width:270px;}
  [data-wit-component="app-shell"].left-open .main-content{margin-left:250px;}
  [data-wit-component="app-shell"].right-open .main-content{margin-right:270px;}
  [data-wit-component="app-shell"].left-open.right-open .main-content{margin-left:250px;margin-right:270px;}
  /* Taskbar: full with labels */
  [data-wit-component="app-shell"] .task-bar{padding:7px 14px 9px;gap:10px;justify-content:center;height:56px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:52px;padding:6px 10px;border-radius:10px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.2rem;}
  [data-wit-component="app-shell"] .task-btn-label{font-size:0.58rem;display:block;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{padding:6px 16px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:56px;}
  /* Panel */
  [data-wit-component="app-shell"] .nav-item{font-size:0.84rem;padding:10px 14px;gap:8px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1rem;width:22px;}
  [data-wit-component="app-shell"] .nav-section-title{font-size:0.7rem;padding:8px 14px 3px;}
  [data-wit-component="app-shell"] .panel-header{padding:12px 16px;font-size:0.9rem;}
  [data-wit-component="app-shell"] .panel-search{padding:6px 12px;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.82rem;}
  /* Quick Access: standard vertical list */
  .category-tree-panel .nav-section,
  .subjectmatter-panel .nav-section{display:flex;flex-direction:column;gap:2px;padding:4px 8px;overflow-x:visible;}
  .category-tree-panel .nav-section .nav-item,
  .category-tree-panel .nav-section a,
  .subjectmatter-panel .nav-section .nav-item,
  .subjectmatter-panel .nav-section a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:0.82rem;background:transparent;border:none;color:var(--text-primary);text-decoration:none;white-space:nowrap;min-height:0;}
  .category-tree-panel .nav-section-title,
  .subjectmatter-panel .nav-section-title{font-size:0.68rem;padding:6px 10px 2px;}
  /* Favorites: standard wrap */
  [data-wit-component="home-dashboard"] .fav-items{gap:16px;}
  [data-wit-component="home-dashboard"] .fav-item{min-width:64px;flex:0 0 auto;}
  [data-wit-component="home-dashboard"] .fav-icon-ring{width:48px;height:48px;border-radius:14px;font-size:1.2rem;}
  [data-wit-component="home-dashboard"] .fav-name{font-size:0.68rem;max-width:64px;}
  /* Page tabs: visible */
  .page-tab{max-width:120px;font-size:0.7rem;padding:5px 10px;}
  .page-tabs{height:32px;}
  /* Tree */
  .tree-node-header{padding:8px 16px;font-size:0.82rem;}
  .tree-node-label{font-size:0.82rem;}
  .tree-leaf{padding:7px 16px 7px 30px;font-size:0.8rem;}
  /* SearchBar */
  .ds-search-input{font-size:0.92rem;}
  .ds-mode-chip{font-size:0.8rem;}
  .ds-tab{font-size:0.82rem;}
  .sb-input{font-size:0.92rem;}
  .sb-mode-chip{font-size:0.8rem;}
  /* Home dashboard: restructured, vertically centered */
  [data-wit-component="home-dashboard"]{max-width:720px;padding:10px 20px 16px;}
  /* Logo: inline row (icon + text side by side) */
  [data-wit-component="home-dashboard"] .ds-logo{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.4rem;margin-bottom:0;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1.1rem;margin:0;}
  /* Tabs: compact row */
  [data-wit-component="home-dashboard"] .ds-tabs{margin-bottom:10px;gap:2px;}
  [data-wit-component="home-dashboard"] .ds-tab{font-size:0.72rem;padding:5px 12px;}
  /* Search: compact */
  [data-wit-component="home-dashboard"] .ds-search{margin-bottom:12px;}
  [data-wit-component="home-dashboard"] .ds-search-box{max-width:540px;padding:2px 2px 2px 12px;border-radius:12px;}
  [data-wit-component="home-dashboard"] .ds-search-input{padding:7px 0;font-size:0.82rem;}
  [data-wit-component="home-dashboard"] .ds-search-btn,[data-wit-component="home-dashboard"] .ds-mic-btn{width:30px;height:30px;border-radius:8px;font-size:0.7rem;}
  [data-wit-component="home-dashboard"] .ds-search-modes{margin-top:8px;gap:6px;}
  [data-wit-component="home-dashboard"] .ds-mode-chip{font-size:0.72rem;padding:5px 12px;}
  /* Prompts: compact wrap */
  [data-wit-component="home-dashboard"] .ds-prompts{margin-bottom:16px;gap:6px;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.7rem;padding:5px 12px;}
}

/* ── 6. LAPTOP (901-1280px) — "Productivity" ── */
/* CONCEPT: Full desktop experience. Both panels can be open simultaneously.
   All chrome visible. Search bar full size. Page tabs with close buttons.
   This is the primary work environment. */
@media (max-width:1280px) and (min-width:901px) {
  [data-wit-component="app-shell"] .top-bar{height:50px;padding:0 16px;}
  [data-wit-component="app-shell"]{padding-top:50px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:50px;}
  [data-wit-component="app-shell"] .branding-name{font-size:0.85rem;}
  [data-wit-component="app-shell"] .page-status{font-size:0.76rem;}
  [data-wit-component="app-shell"] .page-title{font-size:0.9rem;}
  [data-wit-component="app-shell"] .top-bar-btn{font-size:1rem;padding:6px 12px;}
  /* Language: full selector */
  .language-selector .lang-btn{padding:5px 10px;font-size:0.76rem;}
  .language-selector .lang-code{font-size:0.72rem;}
  /* Panels: push, both can be open */
  [data-wit-component="app-shell"] .left-panel{width:270px;}
  [data-wit-component="app-shell"] .right-panel{width:300px;}
  [data-wit-component="app-shell"].left-open .main-content{margin-left:270px;}
  [data-wit-component="app-shell"].right-open .main-content{margin-right:300px;}
  [data-wit-component="app-shell"].left-open.right-open .main-content{margin-left:270px;margin-right:300px;}
  /* Taskbar: full */
  [data-wit-component="app-shell"] .task-bar{padding:8px 16px 10px;gap:12px;justify-content:center;height:58px;}
  [data-wit-component="app-shell"] .task-bar-btn{min-width:56px;padding:6px 12px;}
  [data-wit-component="app-shell"] .task-btn-icon{font-size:1.25rem;}
  [data-wit-component="app-shell"] .task-btn-label{font-size:0.6rem;display:block;}
  [data-wit-component="app-shell"] .task-bar-btn.primary{padding:6px 18px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:58px;}
  /* Panel */
  [data-wit-component="app-shell"] .nav-item{font-size:0.85rem;padding:10px 14px;}
  [data-wit-component="app-shell"] .nav-icon{font-size:1.05rem;width:24px;}
  [data-wit-component="app-shell"] .nav-section-title{font-size:0.72rem;padding:9px 14px 4px;}
  [data-wit-component="app-shell"] .panel-header{padding:13px 16px;font-size:0.92rem;}
  [data-wit-component="app-shell"] .panel-search-input{font-size:0.85rem;}
  /* Page tabs: full with close */
  .page-tab{max-width:140px;font-size:0.72rem;padding:6px 12px;}
  .page-tab-close{display:inline;}
  .page-tabs{height:34px;}
  /* Tree */
  .tree-node-header{font-size:0.85rem;padding:9px 16px;}
  .tree-node-label{font-size:0.85rem;}
  .tree-leaf{font-size:0.82rem;padding:8px 16px 8px 32px;}
  /* SearchBar */
  .ds-search-input{font-size:0.95rem;}
  .ds-mode-chip{font-size:0.82rem;}
  .ds-tab{font-size:0.84rem;}
  .sb-input{font-size:0.95rem;}
  .sb-mode-chip{font-size:0.82rem;}
  /* Home dashboard: balanced, vertically centered */
  [data-wit-component="home-dashboard"]{padding:24px 28px 40px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-bottom:24px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:2.2rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1.6rem;}
  [data-wit-component="home-dashboard"] .ds-search{margin-bottom:28px;}
  [data-wit-component="home-dashboard"] .ds-prompts{margin-bottom:36px;}
}

/* ── LANDSCAPE PHONE (width≥601px, height≤500px) — "Wide but Short" ── */
/* CONCEPT: Phone rotated to landscape hits Tablet/Laptop width breakpoints
   but has only ~400px height. Override padding-heavy properties to phone
   levels. Placed AFTER all width breakpoints so it wins the cascade. */
@media (min-width:601px) and (max-height:480px) {
  /* Chrome: phone-level padding (Tablet/Laptop padding eats too much height) */
  [data-wit-component="app-shell"]{padding-top:40px;}
  [data-wit-component="app-shell"] .top-bar{height:40px;}
  [data-wit-component="app-shell"] .task-bar{height:48px;}
  [data-wit-component="app-shell"].taskbar-visible{padding-bottom:48px;}
  [data-wit-component="app-shell"] .left-toggle-btn{top:40px;}
  /* Dashboard: compact padding */
  [data-wit-component="home-dashboard"]{padding:8px 16px 12px;}
  [data-wit-component="home-dashboard"] .ds-logo{margin-bottom:6px;}
  [data-wit-component="home-dashboard"] .ds-logo-icon{font-size:1.3rem;}
  [data-wit-component="home-dashboard"] .ds-logo-text{font-size:1rem;}
  /* Search: cap at Tablet width (Laptop's 640px too wide for short screen) */
  [data-wit-component="home-dashboard"] .ds-search{margin-bottom:8px;}
  [data-wit-component="home-dashboard"] .ds-search-box{max-width:540px;}
  [data-wit-component="home-dashboard"] .ds-search-input{padding:6px 0;font-size:0.8rem;}
  [data-wit-component="home-dashboard"] .ds-search-btn,[data-wit-component="home-dashboard"] .ds-mic-btn{width:28px;height:28px;}
  /* Prompts: compact */
  [data-wit-component="home-dashboard"] .ds-prompts{margin-bottom:12px;gap:4px;}
  [data-wit-component="home-dashboard"] .ds-prompt-chip{font-size:0.66rem;padding:4px 10px;}
}

/* ── 7. DESKTOP 4K (>1280px) — "Command Center" ── */
/* CONCEPT: Maximum information density. Both panels open by default.
   Full-size everything. Multiple columns of content. Base styles apply. */
/* No media query — base styles handle desktop */

/* ── Prevent text wrapping in shell elements ── */
[data-wit-component="app-shell"] .branding-name,
[data-wit-component="app-shell"] .page-status,
[data-wit-component="app-shell"] .hat-context-label,
[data-wit-component="app-shell"] .page-title,
.language-selector .lang-code,
.language-selector .lang-btn,
.page-tab-label,
[data-wit-component="app-shell"] .theme-label {
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Compact taskbar — hide labels */
[data-wit-component="app-shell"] .task-bar.compact .task-bar-btn {
  min-width:40px;padding:6px 8px;
}
[data-wit-component="app-shell"] .task-bar.compact .task-btn-label {
  display:none;
}
[data-wit-component="app-shell"] .task-bar.compact .task-btn-icon {
  font-size:1.3rem;
}
/* Hidden-state toggle */
[data-wit-component="app-shell"] .taskbar-toggle.hidden-state {
  bottom:16px;
}
/* Push main content up for taskbar (moved before responsive section) */
/* ── Left Panel (slide from left) ── */
[data-wit-component="app-shell"] .left-panel {
  position:fixed;top:0;left:0;z-index:180;width:280px;height:100vh;
  background:rgba(10,14,23,0.97);border-right:1px solid rgba(99,102,241,0.15);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding-top:60px;padding-bottom:80px;
}
[data-wit-component="app-shell"] .left-panel.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,0.5);}
/* ── Right Panel (slide from right) ── */
[data-wit-component="app-shell"] .right-panel {
  position:fixed;top:0;right:0;z-index:180;width:320px;height:100vh;
  background:rgba(10,14,23,0.97);border-left:1px solid rgba(99,102,241,0.15);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding-top:60px;padding-bottom:80px;
}
[data-wit-component="app-shell"] .right-panel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,0.5);}
/* ── Panel overlay (closes panels on outside click) ── */
[data-wit-component="app-shell"] .panel-overlay {
  position:fixed;inset:0;z-index:170;background:rgba(0,0,0,0.4);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer;
}
/* ── Taskbar hide toggle (Android-style) ── */
[data-wit-component="app-shell"] .taskbar-toggle {
  position:fixed;bottom:62px;right:16px;z-index:160;
  width:28px;height:28px;border-radius:50%;
  background:var(--holo-surface);border:1px solid rgba(99,102,241,0.2);
  color:var(--shell-accent,var(--neon-primary));font-size:0.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
[data-wit-component="app-shell"] .taskbar-toggle:hover {
  background:rgba(99,102,241,0.2);border-color:var(--shell-accent,var(--neon-primary));
}
/* Taskbar hidden state */
[data-wit-component="app-shell"] .task-bar.hidden{transform:translateY(100%);opacity:0;}
[data-wit-component="app-shell"] .task-bar {
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
/* When taskbar hidden, no padding needed */
[data-wit-component="app-shell"]:not(.taskbar-visible) .main-content{padding-bottom:0;}
/* Panel header styling */
[data-wit-component="app-shell"] .panel-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--holo-border-subtle);
  color:var(--text-primary);font-weight:600;
}
[data-wit-component="app-shell"] .panel-close-btn {
  background:none;border:none;color:var(--text-secondary);
  font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:6px;
}
[data-wit-component="app-shell"] .panel-close-btn:hover{color:#fff;background:rgba(255,255,255,0.05);}
[data-wit-component="app-shell"] .panel-close-absolute {
  position:absolute;top:8px;right:8px;z-index:10;
}
[data-wit-component="app-shell"] .right-panel .panel-close-absolute {
  right:auto;left:8px;
}
/* Panel nav items */
[data-wit-component="app-shell"] .panel-nav{padding:8px;}
[data-wit-component="app-shell"] .nav-section{margin-bottom:12px;}
[data-wit-component="app-shell"] .nav-section-title{font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);padding:8px 12px 4px;}
[data-wit-component="app-shell"] .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text-primary);text-decoration:none;transition:all .15s;font-size:0.85rem;cursor:pointer;}
[data-wit-component="app-shell"] .nav-item:hover{background:rgba(99,102,241,0.08);}
[data-wit-component="app-shell"] .nav-item.active{background:rgba(99,102,241,0.15);color:var(--shell-accent,var(--neon-primary));}
[data-wit-component="app-shell"] .nav-icon{font-size:1rem;width:24px;text-align:center;}
[data-wit-component="app-shell"] .nav-badge{font-size:0.65rem;background:var(--shell-accent,var(--neon-primary));color:#fff;padding:2px 6px;border-radius:10px;margin-left:auto;}

/* ────────────────────────────────────────────────────────────────
   COMPONENT: Futuristic Shell (Sci-Fi Command Center)
   ──────────────────────────────────────────────────────────────── */
[data-wit-component="futuristic-shell"] {
    /* --fs-bg: #0a0e17; */
    /* --fs-glow: #6366f1; */
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL: Localization Overrides (per-language font/rtl support)
   ──────────────────────────────────────────────────────────────── */
/* Arabic (RTL) */
html[lang="ar"] body {
    direction: rtl;
    font-family: 'Segoe UI', 'Arabic Typesetting', system-ui, sans-serif;
}
html[lang="ar"] .nav-item { flex-direction: row-reverse; }
html[lang="ar"] .neon-text { letter-spacing: 0; }

/* Urdu (RTL) */
html[lang="ur"] body {
    direction: rtl;
    font-family: 'Segoe UI', 'Urdu Typesetting', system-ui, sans-serif;
}

/* Chinese/Japanese/Korean — monospace for data readouts */
html[lang="zh"] .data-readout,
html[lang="ja"] .data-readout,
html[lang="ko"] .data-readout {
    font-family: 'JetBrains Mono', 'Microsoft YaHei', monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   DOMAIN THEME REGISTRY — Every domain gets a unique color identity
   Usage: <div data-wit-domain="commerce"> or per-page component attr
   ═══════════════════════════════════════════════════════════════════ */

/* ── Domain: Utility/Platform (Indigo/Cyan) ── */
[data-wit-domain="platform"],[data-wit-component="home"],[data-wit-component="platform"]{
  --dm-accent:#6366f1;--dm-accent2:#818cf8;--dm-surface:rgba(16,24,52,0.9);
  --dm-glow:0 0 24px rgba(99,102,241,0.15);--dm-border:rgba(99,102,241,0.25);
}
/* ── Domain: Content/AI (Violet/Purple) ── */
[data-wit-domain="ai"],[data-wit-component="ai-assist"],[data-wit-component="ai-content"],[data-wit-component="ai-design"],[data-wit-component="ai-center"]{
  --dm-accent:#a855f7;--dm-accent2:#c084fc;--dm-surface:rgba(26,16,52,0.9);
  --dm-glow:0 0 24px rgba(168,85,247,0.15);--dm-border:rgba(168,85,247,0.25);
}
/* ── Domain: Social (Rose/Pink) ── */
[data-wit-domain="social"],[data-wit-component="social-composer"],[data-wit-component="social-dashboard"],[data-wit-component="social-inbox"]{
  --dm-accent:#f43f5e;--dm-accent2:#fb7185;--dm-surface:rgba(52,16,24,0.9);
  --dm-glow:0 0 24px rgba(244,63,94,0.15);--dm-border:rgba(244,63,94,0.25);
}
/* ── Domain: Commerce (Amber/Gold) ── */
[data-wit-domain="commerce"],[data-wit-component="pos-dashboard"],[data-wit-component="food-court"],[data-wit-component="kitchen-display"]{
  --dm-accent:#f59e0b;--dm-accent2:#fbbf24;--dm-surface:rgba(44,28,8,0.9);
  --dm-glow:0 0 24px rgba(245,158,11,0.15);--dm-border:rgba(245,158,11,0.25);
}
/* ── Domain: Logistics/Warehouse (Cyan) ── */
[data-wit-domain="warehouse"],[data-wit-component="warehouse-dashboard"],[data-wit-component="pick-tasks"],[data-wit-component="active-pick"],[data-wit-component="putaway"],[data-wit-component="yard"],[data-wit-component="warehouse-layout"]{
  --dm-accent:#06b6d4;--dm-accent2:#22d3ee;--dm-surface:rgba(8,32,40,0.9);
  --dm-glow:0 0 24px rgba(6,182,212,0.15);--dm-border:rgba(6,182,212,0.25);
}
/* ── Domain: Property/RealEstate (Teal) ── */
[data-wit-domain="property"],[data-wit-component="property-center"],[data-wit-component="property-dashboard"]{
  --dm-accent:#14b8a6;--dm-accent2:#2dd4bf;--dm-surface:rgba(8,36,32,0.9);
  --dm-glow:0 0 24px rgba(20,184,166,0.15);--dm-border:rgba(20,184,166,0.25);
}
/* ── Domain: Finance (Emerald) ── */
[data-wit-domain="finance"],[data-wit-component="financial-center"],[data-wit-component="payment-center"],[data-wit-component="financial-overview"]{
  --dm-accent:#10b981;--dm-accent2:#34d399;--dm-surface:rgba(8,40,24,0.9);
  --dm-glow:0 0 24px rgba(16,185,129,0.15);--dm-border:rgba(16,185,129,0.25);
}
/* ── Domain: Workforce (Blue) ── */
[data-wit-domain="workforce"],[data-wit-component="jobs-center"],[data-wit-component="workforce-center"],[data-wit-component="workforce-dashboard"],[data-wit-component="hr-workforce"]{
  --dm-accent:#3b82f6;--dm-accent2:#60a5fa;--dm-surface:rgba(12,28,52,0.9);
  --dm-glow:0 0 24px rgba(59,130,246,0.15);--dm-border:rgba(59,130,246,0.25);
}
/* ── Domain: Communication (Indigo) ── */
[data-wit-domain="communication"],[data-wit-component="email-center"],[data-wit-component="email-audit"],[data-wit-component="live-chat"],[data-wit-component="team-chat"],[data-wit-component="video-conference"],[data-wit-component="subject-matter"]{
  --dm-accent:#7c3aed;--dm-accent2:#8b5cf6;--dm-surface:rgba(24,12,52,0.9);
  --dm-glow:0 0 24px rgba(124,58,237,0.15);--dm-border:rgba(124,58,237,0.25);
}
/* ── Domain: SmartHubs (Multi-accent) ── */
[data-wit-domain="smarthub"],[data-wit-component="hub-dashboard"]{
  --dm-accent:#6366f1;--dm-accent2:#818cf8;--dm-surface:rgba(16,20,44,0.9);
  --dm-glow:0 0 24px rgba(99,102,241,0.15);--dm-border:rgba(99,102,241,0.25);
}
[data-wit-component="agriculture-monitor"]{--dm-accent:#84cc16;--dm-accent2:#a3e635;}
[data-wit-component="energy-grid"]{--dm-accent:#f97316;--dm-accent2:#fb923c;}
[data-wit-component="commerce-pricing"]{--dm-accent:#eab308;--dm-accent2:#facc15;}
[data-wit-component="logistics-fleet"]{--dm-accent:#06b6d4;--dm-accent2:var(--neon-secondary);}
[data-wit-component="manufacturing-line"]{--dm-accent:var(--neon-danger);--dm-accent2:#f87171;}
[data-wit-component="smart-building-iot"]{--dm-accent:#14b8a6;--dm-accent2:#2dd4bf;}
[data-wit-component="spatial-twin"]{--dm-accent:#0ea5e9;--dm-accent2:#38bdf8;}
[data-wit-component="trade-hub"]{--dm-accent:#d946ef;--dm-accent2:#e879f9;}
[data-wit-component="valuation-report"]{--dm-accent:#10b981;--dm-accent2:#34d399;}
[data-wit-component="lease-management"]{--dm-accent:#8b5cf6;--dm-accent2:#a78bfa;}
[data-wit-component="maintenance-tracker"]{--dm-accent:var(--neon-warning);--dm-accent2:#fbbf24;}
[data-wit-component="business-dashboard"]{--dm-accent:#3b82f6;--dm-accent2:#60a5fa;}

/* ── Domain: Industry Centers ── */
[data-wit-component="manufacturing-center"]{--dm-accent:var(--neon-danger);--dm-accent2:#f87171;}
[data-wit-component="agriculture-center"]{--dm-accent:#84cc16;--dm-accent2:#a3e635;}
[data-wit-component="energy-center"]{--dm-accent:#f97316;--dm-accent2:#fb923c;}
[data-wit-component="education-center"]{--dm-accent:#06b6d4;--dm-accent2:var(--neon-secondary);}
[data-wit-component="healthcare-center"]{--dm-accent:#ec4899;--dm-accent2:#f472b6;}
[data-wit-component="hospitality-center"]{--dm-accent:var(--neon-warning);--dm-accent2:#fbbf24;}
[data-wit-component="sports-center"]{--dm-accent:var(--neon-success);--dm-accent2:#4ade80;}
[data-wit-component="freight-center"]{--dm-accent:var(--neon-primary);--dm-accent2:#818cf8;}
[data-wit-component="transport-center"]{--dm-accent:#0ea5e9;--dm-accent2:#38bdf8;}
[data-wit-component="travel-center"]{--dm-accent:#d946ef;--dm-accent2:#e879f9;}
[data-wit-component="media-center"]{--dm-accent:#f43f5e;--dm-accent2:#fb7185;}
[data-wit-component="marketplace-center"]{--dm-accent:#eab308;--dm-accent2:#facc15;}
[data-wit-component="device-center"]{--dm-accent:#14b8a6;--dm-accent2:#2dd4bf;}
[data-wit-component="identity-center"]{--dm-accent:#7c3aed;--dm-accent2:#8b5cf6;}
[data-wit-component="legal-center"]{--dm-accent:#78716c;--dm-accent2:#a8a29e;}
[data-wit-component="neo-center"]{--dm-accent:var(--neon-warning);--dm-accent2:#fbbf24;}
[data-wit-component="projects-center"]{--dm-accent:#3b82f6;--dm-accent2:#60a5fa;}
[data-wit-component="category-center"]{--dm-accent:var(--neon-purple);--dm-accent2:#c084fc;}

/* ── Domain: Auth (Slate/Gray) ── */
[data-wit-component="login"],[data-wit-component="register"],[data-wit-component="account"]{
  --dm-accent:#94a3b8;--dm-accent2:#cbd5e1;--dm-surface:rgba(20,24,32,0.95);
}
/* ── Domain: Admin (Red) ── */
[data-wit-component="admin-console"],[data-wit-component="admin-shell"]{
  --dm-accent:#ef4444;--dm-accent2:#f87171;--dm-surface:rgba(40,8,8,0.95);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-LEVEL STYLING — every page gets a unique card/dashboard design
   All pages inherit: glass-panel, neon-border, kpi-glow, wit-table
   from wit-futuristic-theme.css. Override only what differs per page.
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────── 1. HOME — DeepSeek-style ───── */
/* (base home-dashboard styles moved before responsive section) */
/* Top bar: mode + lang */
.ds-topbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px;}
.ds-mode-btn{
  background:none;border:1px solid rgba(255,255,255,0.1);border-radius:8px;
  color:var(--text-secondary,var(--text-dim));cursor:pointer;padding:6px 10px;font-size:0.9rem;transition:all .15s;
}
.ds-mode-btn:hover{color:var(--text-primary);border-color:rgba(255,255,255,0.2);}
.ds-lang-dropdown{
  background:rgba(16,20,40,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:8px;
  color:var(--text-primary);padding:5px 8px;font-size:0.8rem;cursor:pointer;outline:none;
}
.ds-lang-dropdown:focus{border-color:rgba(99,102,241,0.4);}
/* Logo */
/* Logo — pull up closer to topbar */
.ds-logo{margin-top:-8px;margin-bottom:20px;}
.ds-logo-icon{font-size:2.2rem;display:block;margin-bottom:8px;}
.ds-logo-text{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:3px;margin:0;}
/* Tabs container */
.ds-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:20px;}
/* ── Light Mode (via html[data-theme="light"]) ── */
html[data-theme="light"] .ds-logo-text{color:#1a1a2e;}
html[data-theme="light"] .ds-search-box{background:rgba(255,255,255,0.9);border-color:rgba(99,102,241,0.2);}
html[data-theme="light"] .ds-search-input{color:#1a1a2e;}
html[data-theme="light"] .ds-search-input::placeholder{color:#8888a0;}
html[data-theme="light"] .ds-tab{color:#8888a0;}
html[data-theme="light"] .ds-tab:hover,
html[data-theme="light"] .ds-tab.active{color:#1a1a2e;background:rgba(99,102,241,0.08);}
html[data-theme="light"] .ds-prompt-chip{color:#6b6b80;border-color:rgba(0,0,0,0.08);}
html[data-theme="light"] .ds-prompt-chip:hover{color:#1a1a2e;border-color:rgba(99,102,241,0.3);}
html[data-theme="light"] .ds-mode-chip{color:#6b6b80;border-color:rgba(0,0,0,0.08);}
html[data-theme="light"] .ds-mode-chip.active{color:#fff;background:var(--dm-accent,#6366f1);}
html[data-theme="light"] .ds-status{color:#8888a0;}
html[data-theme="light"] .ds-mode-btn{color:#6b6b80;}
html[data-theme="light"] .ds-mic-btn{color:#8888a0;}
html[data-theme="light"] .ds-mic-btn:hover{color:#1a1a2e;background:rgba(99,102,241,0.08);}
/* Light mode: shell branding + page title */
html[data-theme="light"] [data-wit-component="app-shell"] .branding-name{color:#1a1a2e;}
html[data-theme="light"] [data-wit-component="app-shell"] .page-title{color:#1a1a2e;}
html[data-theme="light"] [data-wit-component="app-shell"] .top-bar-btn{color:#4a4a60;}
html[data-theme="light"] [data-wit-component="app-shell"] .top-bar-btn:hover{background:rgba(0,0,0,0.06);color:#1a1a2e;}
html[data-theme="light"] [data-wit-component="app-shell"] .task-bar-btn{color:#4a4a60;}
html[data-theme="light"] [data-wit-component="app-shell"] .task-bar-btn:hover{background:rgba(79,70,229,0.08);color:#4f46e5;}
html[data-theme="light"] [data-wit-component="app-shell"] .hat-context{color:#6b6b80;}
html[data-theme="light"] [data-wit-component="app-shell"] .panel-close-btn{color:#4a4a60;}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-section-title{color:#6b6b80;}
/* Light mode: panels */
html[data-theme="light"] [data-wit-component="app-shell"] .left-panel,
html[data-theme="light"] [data-wit-component="app-shell"] .right-panel {
  background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08);color:#1a1a2e;
}
html[data-theme="light"] [data-wit-component="app-shell"] .panel-header{color:#1a1a2e;border-color:rgba(0,0,0,0.06);}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-item{color:#1a1a2e;}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-item:hover{background:rgba(79,70,229,0.06);}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-item.active{background:rgba(79,70,229,0.1);color:#4f46e5;}
/* Light mode: taskbar toggle chevron */
html[data-theme="light"] [data-wit-component="app-shell"] .taskbar-toggle {
  background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.12);color:#4f46e5;
}
html[data-theme="light"] [data-wit-component="app-shell"] .taskbar-toggle:hover {
  background:rgba(79,70,229,0.12);border-color:#4f46e5;
}
/* Light mode: floating dots */
html[data-theme="light"] .floating-dot{background:rgba(255,255,255,0.9);color:#4f46e5;border-color:rgba(0,0,0,0.1);}
html[data-theme="light"] .floating-dot:hover{background:rgba(79,70,229,0.1);}

/* ── Tree Panel (Drawers) ── */
.category-tree-panel, .subjectmatter-panel {
  display:flex;flex-direction:column;height:100%;
}
.tree-panel-header {
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--holo-border-subtle);color:var(--text-primary);font-weight:600;
}
.tree-collapse-all {
  margin-left:auto;background:none;border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim);font-size:0.65rem;cursor:pointer;padding:2px 8px;border-radius:4px;
  transition:all 0.15s;
}
.tree-collapse-all:hover { color:var(--text-primary);border-color:rgba(99,102,241,0.3);background:rgba(99,102,241,0.08); }
html[data-theme="light"] .tree-collapse-all { color:#6b6b80;border-color:rgba(0,0,0,0.1); }
html[data-theme="light"] .tree-collapse-all:hover { color:#1a1a2e;border-color:rgba(79,70,229,0.2);background:rgba(79,70,229,0.04); }
.tree-panel-icon{font-size:1.1rem;}
.tree-panel-title{font-size:0.9rem;}
.tree-search {
  display:flex;align-items:center;padding:8px 12px;gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.tree-search-icon{color:var(--text-dim);font-size:0.75rem;}
.tree-search-input {
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text-primary);font-size:0.8rem;padding:6px 0;
}
.tree-search-input::placeholder{color:#64748b;}
.tree-body{flex:1;overflow-y:auto;padding:8px 0;}
.tree-node-header {
  display:flex;align-items:center;gap:6px;padding:8px 16px;
  cursor:pointer;transition:background .15s;color:var(--text-secondary);font-size:0.82rem;
}
.tree-node-header:hover{background:rgba(99,102,241,0.06);}
.tree-node-header.expanded{color:var(--text-primary);}
.tree-caret{font-size:0.6rem;width:12px;color:#64748b;flex-shrink:0;}
.tree-node-icon{font-size:0.9rem;width:20px;text-align:center;flex-shrink:0;}
.tree-node-label{flex:1;font-size:0.82rem;}
.tree-node-count{font-size:0.65rem;color:#64748b;background:rgba(255,255,255,0.04);padding:1px 7px;border-radius:10px;}
.tree-node-children{padding:2px 0 2px 24px;}
.tree-leaf {
  display:flex;align-items:center;gap:6px;padding:7px 16px 7px 32px;
  cursor:pointer;transition:all .15s;color:var(--text-dim);font-size:0.8rem;
}
.tree-leaf:hover{color:var(--text-primary);background:rgba(99,102,241,0.04);}
.tree-leaf.active{color:var(--neon-primary);background:rgba(99,102,241,0.08);font-weight:500;}
.tree-dot{width:5px;height:5px;border-radius:50%;background:#64748b;flex-shrink:0;}
.tree-badge{font-size:0.6rem;color:var(--text-dim);background:rgba(99,102,241,0.1);padding:1px 6px;border-radius:8px;}

/* Tree panel light mode */
html[data-theme="light"] .tree-panel-header{color:#1a1a2e;border-color:rgba(0,0,0,0.06);}
html[data-theme="light"] .tree-search{border-color:rgba(0,0,0,0.04);}
html[data-theme="light"] .tree-search-icon{color:#8888a0;}
html[data-theme="light"] .tree-search-input{color:#1a1a2e;}
html[data-theme="light"] .tree-search-input::placeholder{color:#94a3b8;}
html[data-theme="light"] .tree-node-header{color:#4a4a60;}
html[data-theme="light"] .tree-node-header:hover{background:rgba(79,70,229,0.04);}
html[data-theme="light"] .tree-node-header.expanded{color:#1a1a2e;}
html[data-theme="light"] .tree-caret{color:#94a3b8;}
html[data-theme="light"] .tree-node-label{color:#4a4a60;}
html[data-theme="light"] .tree-node-count{color:#8888a0;background:rgba(0,0,0,0.04);}
html[data-theme="light"] .tree-leaf{color:#6b6b80;}
html[data-theme="light"] .tree-leaf:hover{color:#1a1a2e;background:rgba(79,70,229,0.04);}
html[data-theme="light"] .tree-leaf.active{color:#4f46e5;background:rgba(79,70,229,0.08);}
html[data-theme="light"] .tree-dot{background:#8888a0;}
html[data-theme="light"] .tree-badge{color:#6b6b80;background:rgba(79,70,229,0.08);}
/* Footer search */
.ds-footer-search-box {
  display:flex;align-items:center;max-width:640px;margin:0 auto;
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(99,102,241,0.15);border-radius:16px;
  padding:4px;transition:border-color .2s,box-shadow .2s;
}
.ds-footer-search-box:focus-within{border-color:var(--dm-accent,var(--neon-primary));box-shadow:0 0 20px rgba(99,102,241,0.15);}
.ds-footer-search{padding:16px 24px 24px;}
.ds-results-body{flex:1;overflow-y:auto;padding:24px;}
.ds-results-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.ds-back-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:0.9rem;padding:6px 12px;border-radius:8px;transition:all .15s;}
.ds-back-btn:hover{color:var(--text-primary);background:rgba(99,102,241,0.08);}
.ds-results-mode{font-weight:600;color:var(--text-primary);}
.ds-results-count{font-size:0.8rem;color:var(--text-dim);}
.ds-results-list{display:flex;flex-direction:column;gap:8px;}
.ds-result-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--holo-surface,var(--holo-surface));border:1px solid rgba(255,255,255,0.05);border-radius:12px;cursor:pointer;transition:all .2s;}
.ds-result-card:hover{border-color:rgba(99,102,241,0.3);background:rgba(99,102,241,0.04);}
.ds-result-icon{font-size:1.3rem;width:40px;text-align:center;flex-shrink:0;}
.ds-result-content{flex:1;min-width:0;}
.ds-result-content strong{display:block;font-size:0.9rem;color:var(--text-primary);}
.ds-result-meta{display:block;font-size:0.75rem;color:var(--text-dim);margin-top:2px;}
.ds-result-arrow{color:var(--text-dim);font-size:0.75rem;}
.ds-empty{text-align:center;padding:60px 20px;color:var(--text-dim);}
.ds-empty-icon{font-size:2rem;display:block;margin-bottom:12px;}
/* Prompts */
.ds-prompts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px;}
.ds-prompt-chip{
  display:flex;align-items:center;gap:7px;
  background:transparent;border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:8px 16px;color:var(--text-secondary);
  font-size:0.82rem;cursor:pointer;transition:all .2s;
}
.ds-prompt-chip:hover{
  border-color:rgba(99,102,241,0.4);color:var(--text-primary);
  background:rgba(99,102,241,0.06);
}
.ds-prompt-icon{font-size:0.9rem;}
/* Status */
.ds-status{
  font-size:0.72rem;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.ds-status-dot{width:6px;height:6px;border-radius:50%;background:var(--neon-success);box-shadow:0 0 6px var(--neon-success);}
}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
[data-wit-component="home-dashboard"] .hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
[data-wit-component="home-dashboard"] .futuristic-btn {
  padding:9px 20px;border-radius:8px;font-weight:600;font-size:0.85rem;
  cursor:pointer;border:none;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px;
}
[data-wit-component="home-dashboard"] .futuristic-btn-primary {
  background:linear-gradient(135deg,var(--neon-primary),#818cf8);color:#fff;
  box-shadow:0 2px 12px var(--holo-border);
}
[data-wit-component="home-dashboard"] .futuristic-btn-primary:hover {
  box-shadow:0 4px 20px rgba(99,102,241,0.4);transform:translateY(-1px);
}
[data-wit-component="home-dashboard"] .futuristic-btn-glass {
  background:rgba(99,102,241,0.06);color:#a5b4fc;
  border:1px solid rgba(99,102,241,0.2);
}
[data-wit-component="home-dashboard"] .futuristic-btn-glass:hover {
  background:rgba(99,102,241,0.12);border-color:rgba(99,102,241,0.4);
  box-shadow:0 0 16px rgba(99,102,241,0.15);transform:translateY(-1px);
}
[data-wit-component="home-dashboard"] .btn-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);animation:shimmer 2.5s infinite;}
@keyframes shimmer{0%{left:-100%}100%{left:100%}}
/* KPI Cards */
[data-wit-component="home-dashboard"] .kpi-grid-futuristic{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:32px;}
[data-wit-component="home-dashboard"] .kpi-card-futuristic{background:var(--holo-surface,var(--holo-surface));border:1px solid var(--holo-border-subtle);border-radius:16px;padding:24px;position:relative;overflow:hidden;display:flex;gap:16px;align-items:center;transition:all .3s ease;}
[data-wit-component="home-dashboard"] .kpi-card-futuristic:hover{border-color:var(--dm-accent,var(--neon-primary));box-shadow:var(--dm-glow,0 0 24px rgba(99,102,241,0.15));transform:translateY(-3px);}
[data-wit-component="home-dashboard"] .kpi-card-futuristic::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--dm-accent,var(--neon-primary)),transparent);}
[data-wit-component="home-dashboard"] .kpi-accent-success::after{background:linear-gradient(90deg,transparent,var(--neon-success),transparent)}
[data-wit-component="home-dashboard"] .kpi-accent-warning::after{background:linear-gradient(90deg,transparent,var(--neon-warning),transparent)}
[data-wit-component="home-dashboard"] .kpi-accent-info::after{background:linear-gradient(90deg,transparent,#06b6d4,transparent)}
[data-wit-component="home-dashboard"] .kpi-icon-ring{width:48px;height:48px;border-radius:50%;background:rgba(99,102,241,0.1);border:2px solid var(--holo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem;color:var(--dm-accent,var(--neon-primary));}
[data-wit-component="home-dashboard"] .kpi-accent-success .kpi-icon-ring{color:var(--neon-success);border-color:rgba(34,197,94,0.25);background:rgba(34,197,94,0.1)}
[data-wit-component="home-dashboard"] .kpi-accent-warning .kpi-icon-ring{color:var(--neon-warning);border-color:rgba(245,158,11,0.25);background:rgba(245,158,11,0.1)}
[data-wit-component="home-dashboard"] .kpi-accent-info .kpi-icon-ring{color:#06b6d4;border-color:rgba(6,182,212,0.25);background:rgba(6,182,212,0.1)}
[data-wit-component="home-dashboard"] .kpi-body{flex:1;min-width:0;}
[data-wit-component="home-dashboard"] .kpi-label{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary,var(--text-dim));margin-bottom:4px;}
[data-wit-component="home-dashboard"] .kpi-value{display:block;font-size:1.8rem;font-weight:700;color:var(--text-primary);line-height:1.1;}
[data-wit-component="home-dashboard"] .kpi-unit{font-size:0.8rem;font-weight:400;color:var(--text-secondary,var(--text-dim));margin-left:4px;}
[data-wit-component="home-dashboard"] .kpi-trend{display:block;font-size:0.75rem;margin-top:4px;}
[data-wit-component="home-dashboard"] .kpi-trend-up{color:var(--neon-success);}
[data-wit-component="home-dashboard"] .kpi-sparkline{width:80px;flex-shrink:0;opacity:0.6;}
[data-wit-component="home-dashboard"] .sparkline-svg{width:100%;height:24px;}
/* Domain Grid */
[data-wit-component="home-dashboard"] .section-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
[data-wit-component="home-dashboard"] .section-header-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,0.3),transparent);}
[data-wit-component="home-dashboard"] .section-header-title{font-size:1rem;font-weight:600;color:var(--text-primary,var(--text-primary));white-space:nowrap;margin:0;}
[data-wit-component="home-dashboard"] .domain-grid-futuristic{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:32px;}
[data-wit-component="home-dashboard"] .domain-card-futuristic{background:var(--holo-surface,var(--holo-surface));border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:20px 12px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;}
[data-wit-component="home-dashboard"] .domain-card-futuristic:hover{border-color:var(--domain-color,var(--neon-primary));box-shadow:0 0 28px color-mix(in srgb,var(--domain-color,var(--neon-primary)) 20%,transparent);transform:translateY(-4px);}
[data-wit-component="home-dashboard"] .domain-icon-hex{width:48px;height:48px;margin:0 auto 12px;background:color-mix(in srgb,var(--domain-color,var(--neon-primary)) 12%,transparent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--domain-color,var(--neon-primary));}
[data-wit-component="home-dashboard"] .domain-name{display:block;font-size:0.85rem;font-weight:600;color:var(--text-primary);margin-bottom:4px;}
[data-wit-component="home-dashboard"] .domain-count{display:block;font-size:1.1rem;font-weight:700;color:var(--domain-color,var(--neon-primary));}
[data-wit-component="home-dashboard"] .domain-count-label{font-size:0.65rem;font-weight:400;opacity:0.6;margin-left:2px;}
[data-wit-component="home-dashboard"] .domain-glow-bar{position:absolute;bottom:0;left:10%;right:10%;height:2px;background:var(--domain-color,var(--neon-primary));border-radius:1px;opacity:0;transition:opacity .3s ease;}
[data-wit-component="home-dashboard"] .domain-card-futuristic:hover .domain-glow-bar{opacity:1;}
/* Bottom Grid */
[data-wit-component="home-dashboard"] .home-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
[data-wit-component="home-dashboard"] .dash-card-futuristic{background:var(--holo-surface,var(--holo-surface));border:1px solid var(--holo-border-subtle);border-radius:16px;overflow:hidden;}
[data-wit-component="home-dashboard"] .card-header-futuristic{display:flex;align-items:center;gap:10px;padding:16px 20px;background:rgba(99,102,241,0.04);border-bottom:1px solid rgba(255,255,255,0.04);font-weight:600;font-size:0.9rem;color:var(--text-primary);}
[data-wit-component="home-dashboard"] .card-header-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--neon-success);box-shadow:0 0 6px var(--neon-success);}
[data-wit-component="home-dashboard"] .card-header-dot-warn{background:var(--neon-warning);box-shadow:0 0 6px var(--neon-warning);}
/* Timeline */
[data-wit-component="home-dashboard"] .timeline-feed{padding:12px 20px;}
[data-wit-component="home-dashboard"] .timeline-item{display:flex;align-items:flex-start;gap:14px;padding:12px 0;position:relative;}
[data-wit-component="home-dashboard"] .timeline-item:not(:last-child)::after{content:'';position:absolute;left:5px;top:30px;bottom:-12px;width:1px;background:linear-gradient(to bottom,rgba(99,102,241,0.3),transparent);}
[data-wit-component="home-dashboard"] .timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--dm-accent,var(--neon-primary));border:2px solid rgba(99,102,241,0.3);flex-shrink:0;margin-top:3px;}
[data-wit-component="home-dashboard"] .timeline-content{flex:1;min-width:0;}
[data-wit-component="home-dashboard"] .timeline-content strong{display:block;font-size:0.85rem;color:var(--text-primary);}
[data-wit-component="home-dashboard"] .timeline-meta{display:block;font-size:0.75rem;color:var(--text-secondary,var(--text-dim));margin-top:2px;}
[data-wit-component="home-dashboard"] .timeline-time{font-size:0.7rem;color:var(--text-secondary,#64748b);font-family:'JetBrains Mono',monospace;white-space:nowrap;margin-top:3px;}
/* Alerts */
[data-wit-component="home-dashboard"] .alert-feed{padding:12px 20px;}
[data-wit-component="home-dashboard"] .alert-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03);}
[data-wit-component="home-dashboard"] .alert-item:last-child{border-bottom:none;}
[data-wit-component="home-dashboard"] .alert-severity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
[data-wit-component="home-dashboard"] .alert-severity-high .alert-severity-dot{background:var(--neon-danger);box-shadow:0 0 10px var(--neon-danger);animation:alert-pulse 1.5s ease-in-out infinite;}
[data-wit-component="home-dashboard"] .alert-severity-medium .alert-severity-dot{background:var(--neon-warning);box-shadow:0 0 8px var(--neon-warning);}
[data-wit-component="home-dashboard"] .alert-severity-low .alert-severity-dot{background:var(--neon-secondary);box-shadow:0 0 6px var(--neon-secondary);}
@keyframes alert-pulse{0%,100%{box-shadow:0 0 6px var(--neon-danger)}50%{box-shadow:0 0 18px var(--neon-danger)}}
[data-wit-component="home-dashboard"] .alert-message{flex:1;font-size:0.85rem;color:var(--text-primary);}
[data-wit-component="home-dashboard"] .alert-time{font-size:0.7rem;color:var(--text-secondary,#64748b);font-family:'JetBrains Mono',monospace;white-space:nowrap;}
/* Responsive */
@container (max-width:600px){[data-wit-component="home-dashboard"] .kpi-grid-futuristic{grid-template-columns:1fr;}}
@media (max-width:768px){[data-wit-component="home-dashboard"] .home-bottom-grid{grid-template-columns:1fr;}
  [data-wit-component="home-dashboard"] .kpi-sparkline{display:none;}}
/* ── Recents Bar ── */
[data-wit-component="home-dashboard"] .recents-bar{margin-bottom:24px;}
[data-wit-component="home-dashboard"] .recents-label,[data-wit-component="home-dashboard"] .fav-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary,var(--text-dim));margin-bottom:10px;}
[data-wit-component="home-dashboard"] .recents-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
[data-wit-component="home-dashboard"] .recents-scroll::-webkit-scrollbar{display:none;}
[data-wit-component="home-dashboard"] .recent-chip{display:flex;align-items:center;gap:8px;background:rgba(99,102,241,0.06);border:1px solid var(--holo-border-subtle);border-radius:24px;padding:8px 16px;cursor:pointer;white-space:nowrap;transition:all .2s ease;font-size:0.82rem;color:var(--text-primary);flex-shrink:0;}
[data-wit-component="home-dashboard"] .recent-chip:hover{border-color:var(--chip-color,var(--neon-primary));background:rgba(99,102,241,0.1);box-shadow:0 0 16px rgba(99,102,241,0.2);}
[data-wit-component="home-dashboard"] .recent-chip i{font-size:0.9rem;color:var(--chip-color,var(--neon-primary));}
/* ── Favorites Tray (Android-style) ── */
[data-wit-component="home-dashboard"] .favorites-tray{margin-bottom:28px;}
[data-wit-component="home-dashboard"] .fav-items{display:flex;gap:16px;flex-wrap:wrap;}
[data-wit-component="home-dashboard"] .fav-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative;transition:transform .2s ease;min-width:64px;}
[data-wit-component="home-dashboard"] .fav-item:hover{transform:translateY(-3px);}
[data-wit-component="home-dashboard"] .fav-icon-ring{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(99,102,241,0.15);border:1px solid var(--holo-border);color:var(--fav-color,var(--neon-primary));transition:all .2s ease;}
[data-wit-component="home-dashboard"] .fav-item:hover .fav-icon-ring{border-color:var(--fav-color,var(--neon-primary));box-shadow:0 0 20px rgba(99,102,241,0.3);}
[data-wit-component="home-dashboard"] .fav-name{font-size:0.68rem;color:var(--text-secondary,var(--text-dim));max-width:64px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[data-wit-component="home-dashboard"] .fav-pin{position:absolute;top:-4px;right:-4px;font-size:0.55rem;color:var(--neon-warning);background:rgba(0,0,0,0.7);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
[data-wit-component="home-dashboard"] .fav-pinned .fav-icon-ring{border-width:2px;border-style:solid;}
[data-wit-component="home-dashboard"] .fav-pinned .fav-name{color:var(--text-primary);font-weight:500;}

/* ────────────────────────────────── 2. PLATFORM ─────────────────── */
[data-wit-component="platform"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="platform"] .platform-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}

/* ────────────────────────────────── 3. PROFILE ──────────────────── */
[data-wit-component="profile"] {
  max-width:900px;margin:0 auto;
}
[data-wit-component="profile"] .profile-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle,var(--holo-border-subtle));
  border-radius:14px;padding:32px;
}
[data-wit-component="profile"] .profile-card:hover {
  border-color:var(--dm-accent,var(--neon-primary));
  box-shadow:var(--dm-glow,0 0 24px rgba(99,102,241,0.15));
}

/* ────────────────────────────────── 4. NOTIFICATIONS ────────────── */
[data-wit-component="notifications"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="notifications"] .notification-item {
  background:var(--holo-surface,var(--holo-surface));
  border-left:3px solid var(--dm-accent,var(--neon-primary));
  border-radius:0 8px 8px 0;padding:16px;margin-bottom:10px;
  transition:all .2s ease;
}
[data-wit-component="notifications"] .notification-item:hover {
  background:rgba(99,102,241,0.08);border-left-width:6px;
}

/* ────────────────────────────────── 5–9. CONTENT/AI PAGES ───────── */
[data-wit-component="ai-assist"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="ai-assist"] .chat-panel {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(168,85,247,0.2);
  border-radius:14px;display:flex;flex-direction:column;height:70vh;
}
[data-wit-component="ai-assist"] .chat-messages {
  flex:1;overflow-y:auto;padding:24px;
}
[data-wit-component="ai-assist"] .chat-input-bar {
  border-top:1px solid rgba(168,85,247,0.15);padding:16px;display:flex;gap:12px;
}
[data-wit-component="ai-assist"] .chat-input-bar input {
  flex:1;background:rgba(0,0,0,0.3);border:1px solid rgba(168,85,247,0.2);
  border-radius:8px;padding:10px 16px;color:var(--text-primary);
}
[data-wit-component="ai-assist"] .chat-input-bar input:focus {
  outline:none;border-color:rgba(168,85,247,0.6);box-shadow:0 0 12px rgba(168,85,247,0.15);
}

[data-wit-component="ai-content"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="ai-content"] .studio-grid {
  display:grid;grid-template-columns:300px 1fr 280px;gap:20px;height:70vh;
}
[data-wit-component="ai-content"] .studio-panel {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(168,85,247,0.15);border-radius:12px;padding:20px;
}

[data-wit-component="ai-design"] {
  max-width:100%;height:calc(100vh - 60px);
}
[data-wit-component="ai-design"] .canvas-container {
  width:100%;height:100%;background:rgba(0,0,0,0.4);
  border:1px solid rgba(168,85,247,0.2);border-radius:12px;
}

[data-wit-component="ai-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="ai-center"] .ai-card-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
}

[data-wit-component="editor-page"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="editor-page"] .editor-toolbar {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(168,85,247,0.15);border-radius:10px 10px 0 0;
  padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;
}
[data-wit-component="editor-page"] .editor-area {
  min-height:50vh;background:rgba(0,0,0,0.3);
  border:1px solid rgba(168,85,247,0.15);border-top:none;
  border-radius:0 0 10px 10px;padding:24px;color:var(--text-primary);
}

[data-wit-component="canva-page"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}
[data-wit-component="image-anti-detection"],[data-wit-component="image-to-video"] {
  max-width:1100px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 10–15. SOCIAL PAGES ─────────── */
[data-wit-component="social-dashboard"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="social-dashboard"] .social-kpis {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  margin-bottom:24px;
}
[data-wit-component="social-dashboard"] .social-feed {
  display:grid;grid-template-columns:2fr 1fr;gap:20px;
}
[data-wit-component="social-composer"] {
  max-width:700px;margin:0 auto;padding:24px;
}
[data-wit-component="social-composer"] .composer-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(244,63,94,0.2);
  border-radius:14px;padding:24px;
}
[data-wit-component="social-composer"] textarea {
  width:100%;min-height:120px;background:rgba(0,0,0,0.3);
  border:1px solid rgba(244,63,94,0.2);border-radius:8px;
  padding:14px;color:var(--text-primary);resize:vertical;
}
[data-wit-component="social-composer"] textarea:focus {
  outline:none;border-color:rgba(244,63,94,0.5);box-shadow:0 0 12px rgba(244,63,94,0.12);
}
[data-wit-component="social-inbox"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="social-inbox"] .inbox-item {
  display:flex;gap:16px;align-items:flex-start;
  padding:16px;background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(255,255,255,0.04);border-radius:10px;margin-bottom:8px;
  transition:all .2s;
}
[data-wit-component="social-inbox"] .inbox-item:hover {
  border-color:var(--dm-accent,#f43f5e);background:rgba(244,63,94,0.05);
}
[data-wit-component="trending-page"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="fb-tools"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="post-scheduler"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="ads-manager"] {
  max-width:1100px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 16–22. COMMERCE ─────────────── */
[data-wit-component="pos-dashboard"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;overflow:hidden;
}
[data-wit-component="pos-dashboard"] .pos-hud {
  height:100%;display:grid;grid-template-rows:auto 1fr auto;
  background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,0.06) 0%,transparent 60%),var(--holo-bg,#0a0e17);
}
[data-wit-component="food-court"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="food-court"] .vendor-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
[data-wit-component="kitchen-display"] {
  max-width:100%;height:calc(100vh - 60px);padding:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
[data-wit-component="kitchen-display"] .order-column {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(245,158,11,0.2);border-radius:12px;
  padding:16px;overflow-y:auto;
}
[data-wit-component="kitchen-display"] .order-column h3 {
  color:var(--dm-accent,var(--neon-warning));margin-bottom:12px;font-size:1rem;text-transform:uppercase;letter-spacing:1px;
}
[data-wit-component="merchandising-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="merchandising-center"] .product-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}
[data-wit-component="order-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="order-center"] .order-filters {
  display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap;
}
[data-wit-component="pricing-center"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="pricing-center"] .pricing-table-container {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;overflow:hidden;
}
[data-wit-component="quotations-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 23. WAREHOUSE DASHBOARD ─────── */
[data-wit-component="warehouse-dashboard"] .dashboard {
  padding:24px;max-width:1440px;margin:0 auto;
}
[data-wit-component="warehouse-dashboard"] .dashboard-header {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
}
[data-wit-component="warehouse-dashboard"] .dashboard-header h1 {
  font-size:1.6rem;font-weight:700;
  background:linear-gradient(135deg,var(--dm-accent,#06b6d4),var(--dm-accent2,var(--neon-secondary)));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-wit-component="warehouse-dashboard"] .kpi-row {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;
}
[data-wit-component="warehouse-dashboard"] .map-row {
  display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px;
}
[data-wit-component="warehouse-dashboard"] .gauges-row {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
}
[data-wit-component="warehouse-dashboard"] .waves-section {
  margin-bottom:24px;
}

/* ────────────────────────────────── 24. PICK TASKS ──────────────── */
[data-wit-component="pick-tasks"] .pick-tasks-page {
  padding:24px;max-width:900px;margin:0 auto;
}
[data-wit-component="pick-tasks"] .task-list > * {
  margin-bottom:12px;
}
[data-wit-component="pick-tasks"] .task-list > *:last-child {
  margin-bottom:0;
}
[data-wit-component="pick-tasks"] .task-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:10px;
  padding:16px;display:flex;justify-content:space-between;align-items:center;
  transition:all .2s;
}
[data-wit-component="pick-tasks"] .task-card:hover {
  border-color:var(--dm-accent,#06b6d4);box-shadow:0 0 16px rgba(6,182,212,0.1);
}

/* ────────────────────────────────── 25. ACTIVE PICK ─────────────── */
[data-wit-component="active-pick"] .active-pick {
  padding:24px;max-width:800px;margin:0 auto;
}
[data-wit-component="active-pick"] .pick-header {
  background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(6,182,212,0.1));
  border:1px solid rgba(6,182,212,0.3);
  border-radius:12px;padding:20px;margin-bottom:20px;
}
[data-wit-component="active-pick"] .pick-header h2 {
  color:var(--dm-accent2,var(--neon-secondary));margin:0;font-size:1.3rem;
}
[data-wit-component="active-pick"] .item-display {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;
  padding:24px;text-align:center;min-height:200px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}

/* ────────────────────────────────── 26. PUTAWAY ─────────────────── */
[data-wit-component="putaway"] .putaway-page {
  padding:24px;max-width:900px;margin:0 auto;
}
[data-wit-component="putaway"] .putaway-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(245,158,11,0.2);border-radius:10px;padding:16px;margin-bottom:12px;
  transition:all .2s;
}
[data-wit-component="putaway"] .putaway-card:hover {
  border-color:var(--dm-accent,var(--neon-warning));box-shadow:0 0 16px rgba(245,158,11,0.1);
}

/* ────────────────────────────────── 27. YARD ────────────────────── */
[data-wit-component="yard"] .yard-page {
  padding:24px;max-width:1280px;margin:0 auto;
}
[data-wit-component="yard"] .yard-header {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
[data-wit-component="yard"] .dock-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
}
[data-wit-component="yard"] .dock-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:10px;padding:16px;
  transition:all .2s;
}
[data-wit-component="yard"] .dock-card.available {border-left:3px solid var(--neon-success);}
[data-wit-component="yard"] .dock-card.occupied {border-left:3px solid var(--neon-danger);}
[data-wit-component="yard"] .dock-card:hover {
  transform:translateY(-2px);box-shadow:var(--dm-glow,0 0 16px rgba(6,182,212,0.1));
}

/* ────────────────────────────────── 28. WAREHOUSE LAYOUT ────────── */
[data-wit-component="warehouse-layout"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}

/* ────────────────────────────────── 29–30. PROPERTY ─────────────── */
[data-wit-component="property-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="property-center"] .property-map-grid {
  display:grid;grid-template-columns:1fr 360px;gap:20px;min-height:60vh;
}
[data-wit-component="property-dashboard"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="property-dashboard"] .kpi-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;
}
[data-wit-component="property-dashboard"] .section {
  margin-bottom:28px;
}
[data-wit-component="property-dashboard"] .section h2 {
  font-size:1.2rem;font-weight:600;margin-bottom:16px;
  color:var(--dm-accent,#14b8a6);
}

/* ────────────────────────────────── 31–33. FINANCE ──────────────── */
[data-wit-component="financial-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="financial-center"] .account-overview {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px;
}
[data-wit-component="payment-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="payment-center"] .payment-methods {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
}
[data-wit-component="financial-overview"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="financial-overview"] .overview-charts {
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;
}

/* ────────────────────────────────── 34–37. WORKFORCE ────────────── */
[data-wit-component="jobs-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="jobs-center"] .job-board {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;
}
[data-wit-component="jobs-center"] .job-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;padding:20px;
  transition:all .2s;cursor:pointer;
}
[data-wit-component="jobs-center"] .job-card:hover {
  border-color:var(--dm-accent,#3b82f6);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(59,130,246,0.1);
}
[data-wit-component="workforce-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="workforce-dashboard"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="workforce-dashboard"] .headcount-chart {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;padding:20px;margin-bottom:20px;
}
[data-wit-component="hr-workforce"] {
  max-width:1280px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 38–43. COMMUNICATION ────────── */
[data-wit-component="email-center"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="email-center"] .email-layout {
  display:grid;grid-template-columns:280px 1fr;gap:0;height:65vh;
  border:1px solid rgba(124,58,237,0.15);border-radius:12px;overflow:hidden;
}
[data-wit-component="email-center"] .email-sidebar {
  background:rgba(20,16,40,0.9);border-right:1px solid rgba(124,58,237,0.1);padding:16px;
}
[data-wit-component="email-center"] .email-content {
  background:var(--holo-surface,var(--holo-surface));padding:24px;overflow-y:auto;
}
[data-wit-component="email-audit"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="email-audit"] .audit-log {
  font-family:'JetBrains Mono',monospace;font-size:0.85rem;
}
[data-wit-component="live-chat"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="live-chat"] .chat-window {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid rgba(124,58,237,0.2);border-radius:14px;
  display:flex;flex-direction:column;height:65vh;
}
[data-wit-component="live-chat"] .chat-body {
  flex:1;overflow-y:auto;padding:20px;
}
[data-wit-component="live-chat"] .chat-footer {
  border-top:1px solid rgba(124,58,237,0.15);padding:16px;display:flex;gap:10px;
}
[data-wit-component="team-chat"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="team-chat"] .team-layout {
  display:grid;grid-template-columns:240px 1fr;gap:0;height:65vh;
  border:1px solid rgba(124,58,237,0.15);border-radius:12px;overflow:hidden;
}
[data-wit-component="video-conference"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}
[data-wit-component="video-conference"] .video-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;height:100%;
}
[data-wit-component="video-conference"] .video-tile {
  background:rgba(0,0,0,0.4);border:1px solid rgba(124,58,237,0.2);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--text-secondary,var(--text-dim));
}
[data-wit-component="subject-matter"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="subject-matter"] .knowledge-card {
  background:var(--holo-surface,var(--holo-surface));
  border-left:3px solid var(--dm-accent,#7c3aed);border-radius:0 10px 10px 0;
  padding:20px;margin-bottom:14px;
}

/* ────────────────────────────────── 44–58. SMART HUBS ───────────── */
[data-wit-component="hub-dashboard"] {
  max-width:1440px;margin:0 auto;padding:24px;
}
[data-wit-component="hub-dashboard"] .hub-status-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px;
}
[data-wit-component="agriculture-monitor"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="agriculture-monitor"] .field-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
[data-wit-component="energy-grid"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="energy-grid"] .grid-metrics {
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
[data-wit-component="commerce-pricing"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="logistics-fleet"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="logistics-fleet"] .fleet-map {
  height:400px;background:rgba(6,182,212,0.05);
  border:1px solid rgba(6,182,212,0.2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary,var(--text-dim));
}
[data-wit-component="manufacturing-line"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="manufacturing-line"] .line-status {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
}
[data-wit-component="smart-building-iot"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="smart-building-iot"] .sensor-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
}
[data-wit-component="spatial-twin"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}
[data-wit-component="trade-hub"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="trade-hub"] .trade-pairs {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
[data-wit-component="valuation-report"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="lease-management"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="maintenance-tracker"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="maintenance-tracker"] .ticket-list > * {
  margin-bottom:10px;
}
[data-wit-component="business-dashboard"] {
  max-width:1280px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 59–72. INDUSTRY CENTERS ────── */
[data-wit-component="manufacturing-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="manufacturing-center"] .production-stages {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
}
[data-wit-component="agriculture-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="energy-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="education-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="education-center"] .course-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
[data-wit-component="healthcare-center"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="healthcare-center"] .patient-list {
  max-height:60vh;overflow-y:auto;
}
[data-wit-component="hospitality-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="hospitality-center"] .booking-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
[data-wit-component="sports-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="freight-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="transport-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="travel-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="media-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="media-center"] .media-library {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
}
[data-wit-component="marketplace-center"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="device-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="device-center"] .device-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;
}
[data-wit-component="identity-center"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="legal-center"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="neo-center"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="neo-center"] .neo-wallet {
  background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(249,115,22,0.08));
  border:1px solid rgba(245,158,11,0.3);border-radius:16px;padding:28px;
  text-align:center;margin-bottom:24px;
}
[data-wit-component="projects-center"] {
  max-width:1200px;margin:0 auto;padding:24px;
}
[data-wit-component="projects-center"] .project-board {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
[data-wit-component="category-center"] {
  max-width:1100px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 73–76. AUTH ─────────────────── */
[data-wit-component="login"] {
  max-width:440px;margin:80px auto;padding:0;
}
[data-wit-component="login"] .login-card {
  background:var(--holo-surface,rgba(20,24,32,0.95));
  border:1px solid rgba(148,163,184,0.2);border-radius:16px;padding:40px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
[data-wit-component="login"] .login-card h1 {
  font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:8px;
  background:linear-gradient(135deg,var(--text-dim),#cbd5e1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-wit-component="login"] input {
  width:100%;background:rgba(0,0,0,0.3);border:1px solid rgba(148,163,184,0.2);
  border-radius:8px;padding:12px 16px;color:var(--text-primary);margin-bottom:14px;
}
[data-wit-component="login"] input:focus {
  outline:none;border-color:rgba(148,163,184,0.5);box-shadow:0 0 12px rgba(148,163,184,0.1);
}
[data-wit-component="login"] button {
  width:100%;background:linear-gradient(135deg,var(--neon-primary),#818cf8);
  border:none;border-radius:8px;padding:12px;color:white;font-weight:600;
  cursor:pointer;transition:all .2s;
}
[data-wit-component="login"] button:hover {
  box-shadow:0 0 20px rgba(99,102,241,0.4);transform:translateY(-1px);
}

[data-wit-component="register"] {
  max-width:480px;margin:60px auto;padding:0;
}
[data-wit-component="register"] .register-card {
  background:var(--holo-surface,rgba(20,24,32,0.95));
  border:1px solid rgba(148,163,184,0.2);border-radius:16px;padding:36px;
}
[data-wit-component="account"] {
  max-width:800px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 77–78. ADMIN ────────────────── */
[data-wit-component="admin-console"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="admin-console"] .admin-metrics {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;
}
[data-wit-component="admin-shell"] {
  max-width:100%;height:100vh;padding:0;
}

/* ────────────────────────────────── 79–94. MISC PAGES ──────────── */
[data-wit-component="builder-page"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}
[data-wit-component="builder-page"] .builder-canvas {
  height:100%;background:rgba(0,0,0,0.3);
  border:1px solid rgba(99,102,241,0.15);border-radius:12px;
}
[data-wit-component="smart-home-dashboard"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="smart-home-dashboard"] .room-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;
}
[data-wit-component="wearable-health"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="wearable-health"] .vitals-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
}
[data-wit-component="bucket-browser"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="bucket-browser"] .file-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;
}
[data-wit-component="timeline-stream"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="timeline-stream"] .timeline-item {
  display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  position:relative;
}
[data-wit-component="timeline-stream"] .timeline-item::before {
  content:'';position:absolute;left:8px;top:24px;bottom:0;
  width:2px;background:linear-gradient(to bottom,var(--dm-accent,var(--neon-primary)),transparent);
}
[data-wit-component="print-center"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="street-map-canvas"] {
  max-width:100%;height:calc(100vh - 60px);padding:0;
}
[data-wit-component="mobile-field-worker"] {
  max-width:480px;margin:0 auto;padding:16px;
  /* Mobile-first: narrow column for phone layout */
}
[data-wit-component="mobile-field-worker"] .field-task-card {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;
  padding:16px;margin-bottom:12px;
}
[data-wit-component="mobile-products-swipe"] {
  max-width:480px;margin:0 auto;padding:16px;
}
[data-wit-component="mobile-products-swipe"] .swipe-card {
  background:var(--holo-surface,var(--holo-surface));
  border:2px solid rgba(255,255,255,0.08);border-radius:16px;
  padding:24px;text-align:center;min-height:300px;
  display:flex;flex-direction:column;justify-content:center;
  transition:all .15s;
}
[data-wit-component="mobile-products-swipe"] .swipe-card:hover {
  border-color:var(--dm-accent,var(--neon-primary));
}
[data-wit-component="category-page"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="category-type-page"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="counter"] {
  max-width:600px;margin:0 auto;padding:40px 24px;text-align:center;
}
[data-wit-component="counter"] .counter-value {
  font-size:clamp(3rem,8vw,6rem);font-weight:800;
  background:linear-gradient(135deg,var(--dm-accent,var(--neon-primary)),var(--dm-accent2,#818cf8));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-wit-component="entity-surface"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="observability"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="observability"] .metrics-panel {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
[data-wit-component="org-scope-card"] {
  max-width:600px;margin:0 auto;padding:24px;
}
[data-wit-component="analytics-page"] {
  max-width:1280px;margin:0 auto;padding:24px;
}
[data-wit-component="analytics-page"] .chart-row {
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;
}
[data-wit-component="automation-rules"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="automation-rules"] .rule-list > * {
  margin-bottom:10px;
}
[data-wit-component="automation-rules"] .rule-item {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:10px;
  padding:16px;display:flex;justify-content:space-between;align-items:center;
}
[data-wit-component="search-page"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="search-page"] .search-input-wrap {
  position:relative;margin-bottom:24px;
}
[data-wit-component="search-page"] .search-input-wrap input {
  width:100%;background:rgba(0,0,0,0.3);border:1px solid rgba(99,102,241,0.3);
  border-radius:12px;padding:14px 20px;font-size:1.1rem;color:var(--text-primary);
}
[data-wit-component="search-page"] .search-input-wrap input:focus {
  outline:none;border-color:var(--holo-border-active);box-shadow:0 0 20px rgba(99,102,241,0.15);
}
[data-wit-component="weather"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="weather"] .weather-hero {
  background:linear-gradient(135deg,rgba(14,165,233,0.15),rgba(56,189,248,0.08));
  border:1px solid rgba(14,165,233,0.25);border-radius:16px;padding:32px;
  text-align:center;margin-bottom:20px;
}
[data-wit-component="calendar-page"] {
  max-width:1100px;margin:0 auto;padding:24px;
}
[data-wit-component="history-page"] {
  max-width:900px;margin:0 auto;padding:24px;
}
[data-wit-component="drafts-page"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="app-settings"] {
  max-width:800px;margin:0 auto;padding:24px;
}
[data-wit-component="app-settings"] .settings-section {
  background:var(--holo-surface,var(--holo-surface));
  border:1px solid var(--holo-border-subtle);border-radius:12px;
  padding:24px;margin-bottom:20px;
}
[data-wit-component="app-settings"] .settings-section h3 {
  font-size:1rem;font-weight:600;margin-bottom:16px;
  color:var(--dm-accent,var(--neon-primary));
}
[data-wit-component="error"] {
  max-width:500px;margin:100px auto;text-align:center;padding:40px;
}
[data-wit-component="error"] h1 {
  font-size:4rem;font-weight:800;margin:0;
  background:linear-gradient(135deg,var(--neon-danger),#f87171);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-wit-component="test-page"] {
  max-width:800px;margin:0 auto;padding:24px;
}

/* ────────────────────────────────── 95–100. TRUSTED DEVICE + SMART HOME ── */
[data-wit-component="trusted-device-center"] {
  max-width:1000px;margin:0 auto;padding:24px;
}
[data-wit-component="trusted-device-center"] .device-list > * {
  margin-bottom:12px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile/tablet breakpoints for all pages
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  [data-wit-component="home-dashboard"] .dash-hero {padding:28px 20px;}
  [data-wit-component="warehouse-dashboard"] .map-row,
  [data-wit-component="kitchen-display"],
  [data-wit-component="email-center"] .email-layout,
  [data-wit-component="team-chat"] .team-layout,
  [data-wit-component="social-dashboard"] .social-feed,
  [data-wit-component="ai-content"] .studio-grid {grid-template-columns:1fr;}
  [data-wit-component="login"],[data-wit-component="register"] {margin:40px 16px;max-width:100%;}
  [data-wit-component="warehouse-dashboard"] .dashboard-header {flex-direction:column;gap:12px;align-items:flex-start;}
}
@media (max-width:480px) {
  [data-wit-component="home-dashboard"] .dash-hero h1 {font-size:1.3rem;}
  [data-wit-component="warehouse-dashboard"] .kpi-row,
  [data-wit-component="financial-center"] .account-overview {grid-template-columns:1fr;}
  [data-wit-component="jobs-center"] .job-board {grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════
   THEME VARIANTS (html[data-theme]) — can be changed at runtime
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="cyberpunk"] {
  --neon-primary:#6366f1;--neon-cyan:#00F2FE;--neon-blue:#4FACFE;
  --holo-bg:#0a0e17;--text-primary:#e2e8f0;--text-secondary:#94a3b8;
}
html[data-theme="synthwave"] {
  --neon-primary:#ff006e;--neon-cyan:#ff4da6;--neon-blue:#8338ec;
  --holo-bg:#120016;--text-primary:#ffe0f0;--text-secondary:#c080a0;
}

/* ═══════════════════════════════════════════════════════════════════
   🚀 FUTURISTIC HUD EFFECTS — Sci-Fi Command Center Aesthetic
   Neon glow, scan lines, data streams, cyberpunk accents
   Applies to shell chrome: top bar, panels, taskbar, cards
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global Scan-Line Overlay (subtle, pointer-events:none) ── */
body::after {
  content:'';pointer-events:none;position:fixed;inset:0;z-index:9998;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(99,102,241,0.015) 2px,
    rgba(99,102,241,0.015) 4px
  );
  opacity:0.4;
}
/* ── Top Bar: Neon bottom edge + subtle glow ── */
[data-wit-component="app-shell"] .top-bar {
  box-shadow:0 1px 0 rgba(99,102,241,0.3),
             0 4px 24px rgba(99,102,241,0.08),
             inset 0 1px 0 rgba(255,255,255,0.03);
}
/* ── Panel: Neon edge glow on open ── */
[data-wit-component="app-shell"] .left-panel.open {
  box-shadow:8px 0 40px rgba(0,0,0,0.5),
             2px 0 0 rgba(99,102,241,0.3),
             8px 0 24px rgba(99,102,241,0.1);
}
[data-wit-component="app-shell"] .right-panel.open {
  box-shadow:-8px 0 40px rgba(0,0,0,0.5),
             -2px 0 0 rgba(99,102,241,0.3),
             -8px 0 24px rgba(99,102,241,0.1);
}
/* ── Floating ⋯ Dots: Pulsing neon halo ── */
[data-wit-component="app-shell"] .floating-dot {
  animation:dot-halo 3s ease-in-out infinite;
}
@keyframes dot-halo {
  0%,100%{box-shadow:0 0 8px rgba(99,102,241,0.2);}
  50%{box-shadow:0 0 20px rgba(99,102,241,0.5),0 0 40px rgba(99,102,241,0.15);}
}
/* ── Taskbar: Neon top edge ── */
[data-wit-component="app-shell"] .task-bar {
  box-shadow:0 -1px 0 var(--holo-border),
             0 -4px 24px rgba(99,102,241,0.06);
}
/* ── Taskbar Primary Button: Pulsing glow ── */
[data-wit-component="app-shell"] .task-bar-btn.primary {
  animation:primary-pulse 2.5s ease-in-out infinite;
}
@keyframes primary-pulse {
  0%,100%{box-shadow:0 4px 16px rgba(99,102,241,0.3);}
  50%{box-shadow:0 4px 28px rgba(99,102,241,0.55),0 0 40px rgba(99,102,241,0.2);}
}
/* ── Nav Items: Subtle left-border glow on hover ── */
[data-wit-component="app-shell"] .nav-item {
  position:relative;
}
[data-wit-component="app-shell"] .nav-item::before {
  content:'';position:absolute;left:0;top:20%;bottom:20%;width:2px;
  background:var(--shell-accent,var(--neon-primary));border-radius:0 2px 2px 0;
  transform:scaleY(0);transition:transform 0.25s ease;
  box-shadow:0 0 8px rgba(99,102,241,0.4);
}
[data-wit-component="app-shell"] .nav-item:hover::before {
  transform:scaleY(1);
}
[data-wit-component="app-shell"] .nav-item.active::before {
  transform:scaleY(1);
  box-shadow:0 0 12px var(--holo-border-active);
}
/* ── Panel Header: Subtle bottom glow line ── */
[data-wit-component="app-shell"] .panel-header {
  border-bottom:1px solid rgba(99,102,241,0.12);
  box-shadow:0 1px 0 rgba(99,102,241,0.06);
}
/* ── Search Input: Neon focus ring ── */
.ds-search-box:focus-within {
  box-shadow:0 0 32px rgba(99,102,241,0.2),
             0 0 0 1px rgba(99,102,241,0.3) !important;
}
/* ── Cards: Corner accent glow on hover ── */
.kpi-card-futuristic,.dash-card-futuristic,.domain-card-futuristic {
  position:relative;overflow:hidden;
}
.kpi-card-futuristic::before,
.dash-card-futuristic::before,
.domain-card-futuristic::before {
  content:'';position:absolute;top:0;right:0;
  width:40px;height:40px;
  background:radial-gradient(circle at 100% 0%,
    rgba(99,102,241,0.15) 0%,transparent 70%);
  opacity:0;transition:opacity 0.3s ease;
}
.kpi-card-futuristic:hover::before,
.dash-card-futuristic:hover::before,
.domain-card-futuristic:hover::before {
  opacity:1;
}
/* ── Status Dot: Pulsing online indicator ── */
[data-wit-component="app-shell"] .connection-dot.online {
  animation:status-blink 3s ease-in-out infinite;
}
@keyframes status-blink {
  0%,100%{box-shadow:0 0 6px var(--neon-success);}
  50%{box-shadow:0 0 14px var(--neon-success),0 0 24px rgba(34,197,94,0.3);}
}
/* ── Page Tabs: Active tab neon underline ── */
.page-tab.active::after {
  box-shadow:0 0 8px rgba(99,102,241,0.5);
}
/* ── Data Stream Border Effect (top bar bottom) ── */
[data-wit-component="app-shell"] .top-bar::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--holo-border-active) 20%,
    rgba(99,102,241,0.2) 50%,
    var(--holo-border-active) 80%,
    transparent 100%
  );
  animation:data-stream 4s linear infinite;
  background-size:200% 100%;
}
@keyframes data-stream {
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
/* ── Branding: Subtle text glow ── */
[data-wit-component="app-shell"] .branding-name {
  text-shadow:0 0 12px rgba(99,102,241,0.3);
}
/* ── Language Selector: Neon dropdown border ── */
.language-selector .lang-menu {
  box-shadow:0 8px 32px rgba(0,0,0,0.6),
             0 0 0 1px rgba(99,102,241,0.15),
             0 0 20px rgba(99,102,241,0.08);
}
/* ── Tree Panel: Neon accent on active leaf ── */
.tree-leaf.active {
  box-shadow:inset 2px 0 0 rgba(99,102,241,0.5),
             0 0 8px rgba(99,102,241,0.1);
}
/* ── Domain Cards: Hex icon glow on hover ── */
.domain-card-futuristic:hover .domain-icon-hex {
  box-shadow:0 0 20px color-mix(in srgb,var(--domain-color,var(--neon-primary)) 40%,transparent);
}
/* ── KPI Card: Top accent line animation ── */
.kpi-card-futuristic::after {
  animation:accent-sweep 5s ease-in-out infinite;
}
@keyframes accent-sweep {
  0%,100%{opacity:0.6;}
  50%{opacity:1;}
}
/* ── Futuristic Button: Shimmer effect ── */
.futuristic-btn-primary {
  position:relative;overflow:hidden;
}
.futuristic-btn-primary::after {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.1),
    transparent
  );
  animation:btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer {
  0%{left:-100%;}
  50%,100%{left:100%;}
}
/* ── Glass Button: Subtle edge glow on hover ── */
.futuristic-btn-glass:hover {
  box-shadow:0 0 20px rgba(99,102,241,0.2),
             inset 0 0 0 1px rgba(99,102,241,0.1);
}
/* ── Alert Pulse (high severity) ── */
@keyframes alert-pulse {
  0%,100%{box-shadow:0 0 6px var(--neon-danger);}
  50%{box-shadow:0 0 18px var(--neon-danger),0 0 32px rgba(239,68,68,0.3);}
}
/* ── Mic Button: Red pulse when listening ── */
@keyframes mic-pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.3);}
  50%{box-shadow:0 0 0 10px rgba(239,68,68,0);}
}
/* ── Page Title: Subtle glow ── */
[data-wit-component="app-shell"] .page-title {
  text-shadow:0 0 8px rgba(226,232,240,0.15);
}
/* ── Chatbot Floating Button: Pulsing AI ring ── */
.chatbot-floating-btn {
  animation:ai-ring 3s ease-in-out infinite;
}
@keyframes ai-ring {
  0%,100%{box-shadow:0 0 12px rgba(168,85,247,0.3),0 4px 16px rgba(0,0,0,0.4);}
  50%{box-shadow:0 0 24px rgba(168,85,247,0.5),0 0 40px rgba(168,85,247,0.2),0 4px 20px rgba(0,0,0,0.5);}
}
/* ── Light Mode: Reduce scan line opacity ── */
html[data-theme="light"] body::after {
  opacity:0.15;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(79,70,229,0.008) 2px,
    rgba(79,70,229,0.008) 4px
  );
}
/* ── Light Mode: Softer neon effects ── */
html[data-theme="light"] [data-wit-component="app-shell"] .top-bar {
  box-shadow:0 1px 0 rgba(79,70,229,0.15),
             0 4px 16px rgba(79,70,229,0.04);
}
html[data-theme="light"] [data-wit-component="app-shell"] .top-bar::after {
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(79,70,229,0.3) 20%,
    rgba(79,70,229,0.1) 50%,
    rgba(79,70,229,0.3) 80%,
    transparent 100%
  );
}
html[data-theme="light"] [data-wit-component="app-shell"] .branding-name {
  text-shadow:0 0 8px rgba(79,70,229,0.15);
}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-item::before {
  box-shadow:0 0 6px rgba(79,70,229,0.2);
}
html[data-theme="light"] [data-wit-component="app-shell"] .nav-item.active::before {
  box-shadow:0 0 8px rgba(79,70,229,0.3);
}
/* ── Reduce animations if user prefers reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  body::after{display:none;}
  .floating-dot,.task-bar-btn.primary,.connection-dot.online,
  .futuristic-btn-primary::after,.chatbot-floating-btn,
  .kpi-card-futuristic::after{animation:none !important;}
  [data-wit-component="app-shell"] .top-bar::after{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR RECONNECT UI — Dark/Light theme + Responsive Centered
   Uses !important to override blazor.web.js inline styles.
   ═══════════════════════════════════════════════════════════════════ */
#components-reconnect-modal {
  position:fixed !important;inset:0 !important;z-index:9999 !important;
  display:none !important;align-items:center !important;justify-content:center !important;
  background:rgba(10,14,23,0.95) !important;
  -webkit-backdrop-filter:blur(16px) !important;backdrop-filter:blur(16px) !important;
  text-align:center !important;color:var(--text-primary) !important;
  font-family:system-ui,-apple-system,sans-serif !important;
  flex-direction:column !important;gap:12px !important;padding:40px 24px !important;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display:flex !important;
}
/* Target ALL text elements inside the modal */
#components-reconnect-modal * {
  color:var(--text-primary) !important;
  font-family:system-ui,-apple-system,sans-serif !important;
}
#components-reconnect-modal h5,
#components-reconnect-modal h3,
#components-reconnect-modal .reconnect-message {
  font-size:1.15rem !important;font-weight:600 !important;
  color:var(--text-primary) !important;margin:0 !important;
  background:transparent !important;
}
#components-reconnect-modal p,
#components-reconnect-modal span,
#components-reconnect-modal div {
  font-size:0.85rem !important;color:var(--text-dim) !important;
  margin:0 !important;line-height:1.5 !important;max-width:340px !important;
  background:transparent !important;
}
#components-reconnect-modal button,
#components-reconnect-modal a {
  display:inline-block !important;padding:12px 32px !important;
  background:linear-gradient(135deg,var(--neon-primary),#818cf8) !important;
  border:none !important;border-radius:10px !important;
  color:#fff !important;font-size:0.9rem !important;
  font-weight:600 !important;cursor:pointer !important;
  transition:all .2s !important;text-decoration:none !important;
  margin:6px !important;box-shadow:0 4px 16px rgba(99,102,241,0.3) !important;
}
#components-reconnect-modal button:hover,
#components-reconnect-modal a:hover {
  box-shadow:0 6px 24px rgba(99,102,241,0.5) !important;
  transform:translateY(-2px) !important;
}

/* Reconnect — Light Theme */
html[data-theme="light"] #components-reconnect-modal {
  background:rgba(255,255,255,0.95) !important;color:#1a1a2e !important;
}
html[data-theme="light"] #components-reconnect-modal * {
  color:#1a1a2e !important;
}
html[data-theme="light"] #components-reconnect-modal h5,
html[data-theme="light"] #components-reconnect-modal h3 {
  color:#1a1a2e !important;
}
html[data-theme="light"] #components-reconnect-modal p,
html[data-theme="light"] #components-reconnect-modal span {
  color:#6b6b80 !important;
}

/* Reconnect — Responsive */
@media (max-width:480px) {
  #components-reconnect-modal { padding:24px 16px !important; }
  #components-reconnect-modal h5 { font-size:1rem !important; }
  #components-reconnect-modal p { max-width:260px !important; }
  #components-reconnect-modal button { padding:10px 24px !important;font-size:0.85rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR ERROR UI — Dark/Light theme + Responsive Centered
   ═══════════════════════════════════════════════════════════════════ */
#blazor-error-ui {
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  background:rgba(239,68,68,0.95);color:#fff;
  padding:12px 24px;text-align:center;font-size:0.85rem;
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;
}
#blazor-error-ui a {
  color:#fff;text-decoration:underline;cursor:pointer;
}
#blazor-error-ui .dismiss {
  background:rgba(255,255,255,0.2);border:none;color:#fff;
  padding:4px 12px;border-radius:6px;cursor:pointer;font-size:0.8rem;
}
#blazor-error-ui .dismiss:hover { background:rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════════════════════════════
   DRAG-TO-DASHBOARD — Drop zones, drag states, visual feedback
   ═══════════════════════════════════════════════════════════════════ */

/* Drop zone — hidden by default, shown when dragging */
.dash-drop-zone {
  display:none;
  align-items:center;justify-content:center;gap:8px;
  padding:16px;margin:0 0 12px;
  border:2px dashed rgba(99,102,241,0.3);
  border-radius:12px;background:rgba(99,102,241,0.04);
  transition:all 0.2s ease;
}
.dash-drop-zone-icon { font-size:1.5rem; }
.dash-drop-zone-text { font-size:0.85rem;color:var(--text-dim); }

/* Show drop zone when dragging */
body.wit-dragging .dash-drop-zone {
  display:flex;
}

/* Drop zone active (any drag happening) */
.dash-drop-zone-active {
  border-color:var(--holo-border-active) !important;
  background:rgba(99,102,241,0.08) !important;
  box-shadow:0 0 24px rgba(99,102,241,0.15);
}

/* Drop zone hover (item directly over it) */
.dash-drop-zone-hover {
  border-color:var(--neon-primary) !important;
  background:rgba(99,102,241,0.15) !important;
  box-shadow:0 0 32px rgba(99,102,241,0.3);
  transform:scale(1.02);
}

/* Draggable items — visual cue */
[data-dashboard-item] {
  cursor:grab;
  transition:opacity 0.15s ease, transform 0.15s ease;
}
[data-dashboard-item]:active {
  cursor:grabbing;
}
body.wit-dragging [data-dashboard-item] {
  opacity:0.6;
}
body.wit-dragging [data-dashboard-item]:hover {
  opacity:0.8;
}

/* Drag ghost (browser default is semi-transparent) */
body.wit-dragging {
  -webkit-user-select:none;user-select:none;
}

/* Light mode */
html[data-theme="light"] .dash-drop-zone {
  border-color:rgba(99,102,241,0.2);
  background:rgba(99,102,241,0.02);
}
html[data-theme="light"] .dash-drop-zone-active {
  border-color:rgba(99,102,241,0.4) !important;
  background:rgba(99,102,241,0.05) !important;
}
html[data-theme="light"] .dash-drop-zone-hover {
  border-color:#4f46e5 !important;
  background:rgba(79,70,229,0.1) !important;
}

/* Error UI — Light Theme */
html[data-theme="light"] #blazor-error-ui {
  background:rgba(239,68,68,0.9);
}

/* Error UI — Responsive */
@media (max-width:480px) {
  #blazor-error-ui { padding:8px 16px;font-size:0.75rem;gap:8px; }
}
html[data-theme="matrix"] {
  --neon-primary:#00ff41;--neon-cyan:#00ff41;--neon-blue:#00cc33;
  --holo-bg:#0d0d0d;--text-primary:#00ff41;--text-secondary:#00cc33;
}
html[data-theme="arctic"] {
  --neon-primary:#00d4ff;--neon-cyan:#87ceeb;--neon-blue:#4fc3f7;
  --holo-bg:#0a1628;--text-primary:#e0f0ff;--text-secondary:#80b0d0;
}

/* ── Command Centre and page header rows: wrap instead of clipping ──
   These rows are Bootstrap d-flex justify-content-between with no wrap, so a long title pushes
   the badge/time/button cluster past the container edge (measured 2026-09-22 on /agriculture at
   1440x900: the "John Deere Aligned" and "Precision Ag" badges were clipped by the container).
   29 pages share the exact pattern, so the fix belongs here rather than in each page. Allow the
   row and its right-hand cluster to wrap; keep the left block shrinkable so long titles ellipsize
   instead of forcing the overflow. */
.dash-container > .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.dash-container > .d-flex.justify-content-between > :first-child {
  min-width: 0;
}
.dash-container > .d-flex.justify-content-between > :last-child {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}