@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --text-primary:   #E8EEF4;
    --text-secondary: #A9BDCF;
    --text-muted:     #7C93A8;
    --text-inverse:   #0A2540;
    --text-link:      var(--color-teal-400);

    


    --bg-page:        #0B1620;
    --bg-card:        #13202C;
    --bg-subtle:      #1A2A38;
    


    --bg-nav:         var(--color-ocean-deep);
    --bg-map:         #0E2230;
    --bg-water:       #14435C;

    --border-default: #24384A;
    --border-strong:  #35506A;

    



    --color-success-bg:  #10301D;  --color-success-text: #7EE0A3;
    --color-warning-bg:  #33240F;  --color-warning-text: #F6C48A;
    --color-danger-bg:   #3A1418;  --color-danger-text:  #FF9AA2;
    --color-pending-bg:  #33270B;  --color-pending-text: #F8CE6B;

    


    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.35);
    --shadow-xl: 0 16px 40px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.40);

    color-scheme: dark;
  }
}





:root[data-theme='dark'] {
  --text-primary:   #E8EEF4;
  --text-secondary: #A9BDCF;
  --text-muted:     #7C93A8;
  --text-inverse:   #0A2540;
  --text-link:      var(--color-teal-400);

  --bg-page:        #0B1620;
  --bg-card:        #13202C;
  --bg-subtle:      #1A2A38;
  --bg-nav:         var(--color-ocean-deep);
  --bg-map:         #0E2230;
  --bg-water:       #14435C;

  --border-default: #24384A;
  --border-strong:  #35506A;

  --color-success-bg:  #10301D;  --color-success-text: #7EE0A3;
  --color-warning-bg:  #33240F;  --color-warning-text: #F6C48A;
  --color-danger-bg:   #3A1418;  --color-danger-text:  #FF9AA2;
  --color-pending-bg:  #33270B;  --color-pending-text: #F8CE6B;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.35);
  --shadow-xl: 0 16px 40px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.40);

  color-scheme: dark;
}


















@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) {
  --color-gray-100: #1A2A38;
  --color-gray-200: #24384A;
  --color-gray-300: #35506A;
} }
:root[data-theme='dark'] {
  --color-gray-100: #1A2A38;
  --color-gray-200: #24384A;
  --color-gray-300: #35506A;
}



:root[data-theme='dark'] .tag-sold,
:root[data-theme='dark'] .badge-no-account { color: var(--text-secondary); }




:root[data-theme='dark'] .modal,
:root[data-theme='dark'] .detail-panel,
:root[data-theme='dark'] .detail-panel-tabs,
:root[data-theme='dark'] .bottom-sheet,
:root[data-theme='dark'] .bottom-nav,
:root[data-theme='dark'] .chip,
:root[data-theme='dark'] .chip-compass,
:root[data-theme='dark'] .channel-btn,
:root[data-theme='dark'] .map-search-pill,
:root[data-theme='dark'] .map-icon-btn,
:root[data-theme='dark'] .map-filter-chip,
:root[data-theme='dark'] .map-ctrl-btn,
:root[data-theme='dark'] .input:focus,
:root[data-theme='dark'] .textarea:focus,
:root[data-theme='dark'] .otp-digit:focus { background: var(--bg-card); }

@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) {
  


} }
:root:not([data-theme='light']) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .modal,
  :root:not([data-theme='light']) .detail-panel,
  :root:not([data-theme='light']) .detail-panel-tabs,
  :root:not([data-theme='light']) .bottom-sheet,
  :root:not([data-theme='light']) .bottom-nav,
  :root:not([data-theme='light']) .chip,
  :root:not([data-theme='light']) .chip-compass,
  :root:not([data-theme='light']) .channel-btn,
  :root:not([data-theme='light']) .map-search-pill,
  :root:not([data-theme='light']) .map-icon-btn,
  :root:not([data-theme='light']) .map-filter-chip,
  :root:not([data-theme='light']) .map-ctrl-btn,
  :root:not([data-theme='light']) .input:focus,
  :root:not([data-theme='light']) .textarea:focus,
  :root:not([data-theme='light']) .otp-digit:focus { background: var(--bg-card); }
  :root:not([data-theme='light']) .tag-sold,
  :root:not([data-theme='light']) .badge-no-account { color: var(--text-secondary); }
}




.app { display: flex; min-height: 100vh; background: var(--bg-page); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.app-header h1 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
                 color: var(--text-primary); letter-spacing: var(--letter-spacing-tight); }
.app-header .sub { color: var(--text-secondary); font-size: var(--font-size-sm); }
.app-content { padding: var(--space-6); flex: 1; min-height: 0; }


.app-content.is-map { padding: 0; display: flex; }


.sidebar-scroll { overflow-y: auto; flex: 1; padding: var(--space-2) 0; }




.empty {
  border: 1px dashed var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-8); text-align: center; color: var(--text-secondary);
  background: var(--bg-card);
}
.empty h3 { margin: 0 0 var(--space-2); color: var(--text-primary);
            font-size: var(--font-size-md); }
.empty p { margin: 0 auto; max-width: 46ch; font-size: var(--font-size-sm);
           line-height: var(--line-height-relaxed); }




.theme-switch { display: flex; gap: 2px; background: var(--bg-subtle);
                border-radius: var(--radius-full); padding: 2px; }
.theme-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); color: var(--text-secondary);
  font-family: inherit;
}
.theme-switch button.on { background: var(--bg-card); color: var(--text-primary);
                          box-shadow: var(--shadow-xs); }























@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  

  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .kpi-card { padding: var(--space-3) var(--space-4); }
  .kpi-value { font-size: 24px; }
}

@media (max-width: 900px) {
  .agent-sidebar { display: none; }
  .app-content { padding: var(--space-4) var(--space-4) 84px; }
  .app-content.is-map { padding: 0 0 68px; }
  .app-header { padding: var(--space-3) var(--space-4); }
  .app-header h1 { font-size: var(--font-size-md); }
  


  .theme-switch { display: none; }
}
@media (min-width: 901px) {
  .bottom-nav { display: none !important; }
}


:root[data-theme='dark'] .bottom-nav { background: var(--bg-card); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bottom-nav { background: var(--bg-card); }
}