:root {
  color-scheme: dark;
  --header-bg: rgba(15, 22, 32, .94);
  --selected-bg: #1d3446;
  --diagram-active: #235c67;
  --diagram-land: #234139;
  --on-accent: #0f1620;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eaf0f7;
  --border: #c8d3df;
  --text: #172b40;
  --muted: #53677b;
  --accent: #086baf;
  --accent-2: #075d99;
  --ok: #087649;
  --ok-bg: #e1f3e9;
  --ko: #b62e2e;
  --ko-bg: #fceaea;
  --highlight: #8c5800;
  --highlight-bg: #fff2d5;
  --header-bg: rgba(244, 247, 251, .95);
  --selected-bg: #dcecf9;
  --diagram-active: #c7e6ee;
  --diagram-land: #c6ded2;
  --on-accent: #ffffff;
}
#app-header { background: var(--header-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.app-header-inner { max-width: 1080px; padding: 10px 24px; gap: 20px; flex-wrap: nowrap; }
.brand-btn { flex-shrink: 0; white-space: nowrap; min-height: 44px; }
.app-nav { display: flex; flex: 0 1 auto; flex-wrap: nowrap; margin-left: auto; width: auto; gap: 3px; padding: 4px; border-radius: 14px; }
.nav-link { min-height: 40px; padding: 8px 11px; white-space: nowrap; flex-shrink: 0; justify-content: center; }
.nav-link.active { background: var(--selected-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.nav-icon { font-size: 16px; }
.theme-toggle { width: 42px; height: 40px; flex-shrink: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 9px 9px 0; color: var(--text); background: transparent; cursor: pointer; font-size: 24px; line-height: 1; }
.theme-toggle:hover { background: var(--panel-2); }
.app-header-inner button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.category-row.selected, .option.selected, .btn-ghost.selected { background: var(--selected-bg); }
.cloud-photo img { background: var(--panel-2); }
:root[data-theme="light"] .hero-card { box-shadow: 0 8px 24px rgba(23, 43, 64, .06); }
:root[data-theme="light"] .brand-badge { background: linear-gradient(135deg, #4fb0e8, #3ecf8e); box-shadow: none; }
@media (max-width: 920px) {
  .app-header-inner { gap: 12px; padding: 8px 16px; }
  .nav-link { padding: 8px; font-size: 13px; }
}
@media (max-width: 860px) {
  .brand-word { display: none; }
}
@media (max-width: 600px) {
  .app-header-inner { padding: 6px 10px; gap: 8px; }
  .nav-label { display: none; }
  .app-nav { gap: 2px; padding: 3px; }
  .nav-link { width: 40px; min-height: 42px; padding: 0; overflow: visible; }
  .nav-icon { font-size: 18px; }
  .theme-toggle { width: 38px; height: 42px; }
}
@media (max-width: 359px) {
  .app-header-inner { padding: 6px; gap: 4px; }
  .app-nav { gap: 0; }
  .nav-link { width: 37px; }
  .theme-toggle { width: 35px; }
}

.account-nav .nav-icon { display: flex; align-items: center; }
.account-nav .nav-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }