html[data-theme="dark"] {
  --color-bg-page: #1b1b1b;
  --color-bg-sidebar: #111;
  --color-bg-surface: #222;
  --color-bg-surface-soft: #2a2a2a;
  --color-bg-surface-alt: #181818;
  --color-bg-card: #111;
  --color-border-strong: #444;
  --color-border-mid: #3d3d3d;
  --color-border-soft: #555;
  --color-text-main: #fff;
  --color-text-muted: #cfcfcf;
  --color-accent: #2f9f5d;
  --color-accent-hover: #36b069;
  --color-accent-border: #2b8f52;
}

html[data-theme="blue-night"] {
  --color-bg-page: #0f172a;
  --color-bg-sidebar: #0b1222;
  --color-bg-surface: #162238;
  --color-bg-surface-soft: #1e2e48;
  --color-bg-surface-alt: #101b30;
  --color-bg-card: #0f1d33;
  --color-border-strong: #31486a;
  --color-border-mid: #2a3f5f;
  --color-border-soft: #406086;
  --color-text-main: #e8f1ff;
  --color-text-muted: #c5d6ee;
  --color-accent: #5ea8ff;
  --color-accent-hover: #7ab8ff;
  --color-accent-border: #4b92e6;
}

html[data-theme="forest-night"] {
  --color-bg-page: #0f1c18;
  --color-bg-sidebar: #0b1613;
  --color-bg-surface: #162722;
  --color-bg-surface-soft: #20352e;
  --color-bg-surface-alt: #101d19;
  --color-bg-card: #12221d;
  --color-border-strong: #355348;
  --color-border-mid: #2d473d;
  --color-border-soft: #44695c;
  --color-text-main: #e7f6ef;
  --color-text-muted: #c3ddd1;
  --color-accent: #68d9a7;
  --color-accent-hover: #81e5b8;
  --color-accent-border: #54c493;
}

html[data-theme="nord-frost"] {
  --color-bg-page: #161b26;
  --color-bg-sidebar: #121722;
  --color-bg-surface: #1e2533;
  --color-bg-surface-soft: #273247;
  --color-bg-surface-alt: #141a27;
  --color-bg-card: #1a2130;
  --color-border-strong: #3e4d68;
  --color-border-mid: #33445f;
  --color-border-soft: #516683;
  --color-text-main: #edf4ff;
  --color-text-muted: #c8d7ec;
  --color-accent: #88d8ff;
  --color-accent-hover: #a4e3ff;
  --color-accent-border: #74c6ef;
}

html[data-theme="sunset-ember"] {
  --color-bg-page: #1c1612;
  --color-bg-sidebar: #16110e;
  --color-bg-surface: #241d18;
  --color-bg-surface-soft: #312720;
  --color-bg-surface-alt: #1b1410;
  --color-bg-card: #211913;
  --color-border-strong: #5f4535;
  --color-border-mid: #4f3a2d;
  --color-border-soft: #755540;
  --color-text-main: #fff1e7;
  --color-text-muted: #e8cfc0;
  --color-accent: #ff9b5e;
  --color-accent-hover: #ffb17f;
  --color-accent-border: #e88a52;
}

html[data-theme="sepia-console"] {
  --color-bg-page: #20180f;
  --color-bg-sidebar: #18120c;
  --color-bg-surface: #2a2015;
  --color-bg-surface-soft: #36281b;
  --color-bg-surface-alt: #1d150d;
  --color-bg-card: #241b12;
  --color-border-strong: #604833;
  --color-border-mid: #513c2a;
  --color-border-soft: #7a5a3d;
  --color-text-main: #f8ead7;
  --color-text-muted: #ddc7aa;
  --color-accent: #d9a35c;
  --color-accent-hover: #e5b574;
  --color-accent-border: #c5924f;
}

html[data-theme="graphite-ocean"] {
  --color-bg-page: #121920;
  --color-bg-sidebar: #0d141a;
  --color-bg-surface: #1a2530;
  --color-bg-surface-soft: #243241;
  --color-bg-surface-alt: #121b24;
  --color-bg-card: #151f29;
  --color-border-strong: #39516a;
  --color-border-mid: #30465d;
  --color-border-soft: #496784;
  --color-text-main: #e9f3ff;
  --color-text-muted: #c8d9eb;
  --color-accent: #4fc2ff;
  --color-accent-hover: #75d0ff;
  --color-accent-border: #3ba8e0;
}

html[data-theme="midnight-berry"] {
  --color-bg-page: #1a1420;
  --color-bg-sidebar: #140f19;
  --color-bg-surface: #231b2a;
  --color-bg-surface-soft: #30243a;
  --color-bg-surface-alt: #18111f;
  --color-bg-card: #201827;
  --color-border-strong: #5a4468;
  --color-border-mid: #4c3958;
  --color-border-soft: #6f567f;
  --color-text-main: #f4ecff;
  --color-text-muted: #ddcfee;
  --color-accent: #e88fb8;
  --color-accent-hover: #f2a5c8;
  --color-accent-border: #d47aa6;
}

html[data-theme="paper-mint"] {
  --color-bg-page: #f3f7f4;
  --color-bg-sidebar: #e6efe9;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #edf5f0;
  --color-bg-surface-alt: #e9f1ec;
  --color-bg-card: #ffffff;
  --color-border-strong: #a8b9ad;
  --color-border-mid: #bccabf;
  --color-border-soft: #9db0a3;
  --color-text-main: #101713;
  --color-text-muted: #2b3a33;
  --color-accent: #2f9f5d;
  --color-accent-hover: #43b671;
  --color-accent-border: #2b8f52;
}

html[data-theme="ivory-sky"] {
  --color-bg-page: #f7f8fb;
  --color-bg-sidebar: #e9edf5;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #f0f4fb;
  --color-bg-surface-alt: #ecf1f8;
  --color-bg-card: #ffffff;
  --color-border-strong: #a9b7cf;
  --color-border-mid: #bfcbde;
  --color-border-soft: #98a9c2;
  --color-text-main: #111827;
  --color-text-muted: #2c3d55;
  --color-accent: #3d78d8;
  --color-accent-hover: #528ae6;
  --color-accent-border: #3367bc;
}

html[data-theme="rose-paper"] {
  --color-bg-page: #fbf5f6;
  --color-bg-sidebar: #f2e6e9;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #f8eef0;
  --color-bg-surface-alt: #f3e7ea;
  --color-bg-card: #ffffff;
  --color-border-strong: #c9a9b2;
  --color-border-mid: #dbc2c8;
  --color-border-soft: #ba95a0;
  --color-text-main: #1b1115;
  --color-text-muted: #4a2d36;
  --color-accent: #c2557b;
  --color-accent-hover: #d46b90;
  --color-accent-border: #ad486d;
}

html[data-theme="sand-dune"] {
  --color-bg-page: #f8f2e8;
  --color-bg-sidebar: #eee2ce;
  --color-bg-surface: #fffaf1;
  --color-bg-surface-soft: #f7eeda;
  --color-bg-surface-alt: #f1e5cf;
  --color-bg-card: #fffaf1;
  --color-border-strong: #c5b08a;
  --color-border-mid: #d6c6a7;
  --color-border-soft: #b69f78;
  --color-text-main: #1d160c;
  --color-text-muted: #4f3d22;
  --color-accent: #b9803b;
  --color-accent-hover: #ca9351;
  --color-accent-border: #a66f2d;
}

html[data-theme="glacier-light"] {
  --color-bg-page: #f2f8fb;
  --color-bg-sidebar: #e3eff4;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #ebf4f8;
  --color-bg-surface-alt: #e4eff4;
  --color-bg-card: #ffffff;
  --color-border-strong: #9fb8c5;
  --color-border-mid: #b7ccd6;
  --color-border-soft: #8faab8;
  --color-text-main: #0f1a20;
  --color-text-muted: #2c4652;
  --color-accent: #2f8fb7;
  --color-accent-hover: #44a3c9;
  --color-accent-border: #26799d;
}

html[data-theme="sage-day"] {
  --color-bg-page: #f3f6ef;
  --color-bg-sidebar: #e7ecdf;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #edf2ea;
  --color-bg-surface-alt: #e5ece2;
  --color-bg-card: #ffffff;
  --color-border-strong: #a7b59f;
  --color-border-mid: #bdc8b6;
  --color-border-soft: #94a38d;
  --color-text-main: #11170f;
  --color-text-muted: #33412f;
  --color-accent: #4e8a52;
  --color-accent-hover: #62a466;
  --color-accent-border: #447847;
}

html[data-theme="peach-cream"] {
  --color-bg-page: #fdf4ee;
  --color-bg-sidebar: #f6e7db;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #fbeee4;
  --color-bg-surface-alt: #f4e3d6;
  --color-bg-card: #ffffff;
  --color-border-strong: #c9ad98;
  --color-border-mid: #dbc4b3;
  --color-border-soft: #bc9a83;
  --color-text-main: #1d120b;
  --color-text-muted: #503224;
  --color-accent: #c86f46;
  --color-accent-hover: #d98661;
  --color-accent-border: #b75f37;
}

html[data-theme="mono-light"] {
  --color-bg-page: #f1f1f1;
  --color-bg-sidebar: #e3e3e3;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #f0f0f0;
  --color-bg-surface-alt: #e9e9e9;
  --color-bg-card: #ffffff;
  --color-border-strong: #9f9f9f;
  --color-border-mid: #b7b7b7;
  --color-border-soft: #8f8f8f;
  --color-text-main: #111111;
  --color-text-muted: #333333;
  --color-accent: #444444;
  --color-accent-hover: #5a5a5a;
  --color-accent-border: #373737;
}

html[data-theme] {
  --bg-page: var(--color-bg-page);
  --bg-sidebar: var(--color-bg-sidebar);
  --bg-main: var(--color-bg-surface);
  --bg-right: var(--color-bg-surface-alt);
  --bg-card: var(--color-bg-card);
  --bg-card-soft: var(--color-bg-surface-soft);
  --border-strong: var(--color-border-strong);
  --border-soft: var(--color-border-soft);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-hover);
  --surface-panel: linear-gradient(170deg, var(--color-bg-card), var(--color-bg-surface));
  --surface-panel-vertical: linear-gradient(180deg, var(--color-bg-card), var(--color-bg-surface-alt));
  --surface-soft: var(--color-bg-surface-soft);
  --surface-input: var(--color-bg-surface-alt);
  --surface-frame: var(--color-bg-surface-alt);
  --surface-hover: var(--color-bg-surface-soft);
  --surface-shadow: rgba(0, 0, 0, 0.12);
  --topbar-bg: linear-gradient(180deg, var(--color-bg-surface), var(--color-bg-surface-alt));
  --topbar-tab-bg: var(--color-bg-card);
  --topbar-tab-active-bg: var(--color-bg-surface-soft);
  --page-glow-a: var(--color-bg-surface-soft);
  --page-glow-b: var(--color-bg-surface-alt);
}

.top-panel-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong, var(--color-border-strong, rgba(148, 163, 184, 0.2)));
  background: var(--topbar-bg, linear-gradient(180deg, #111a24, #0e151d));
}

.top-panel-logout-form {
  margin: 0;
}

.top-panel-logout-form-desktop {
  margin-left: auto;
}

.top-panel-logout-form-mobile {
  display: none;
}

.top-panel-tab {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  min-height: 42px;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid var(--border-strong, var(--color-border-strong, rgba(148, 163, 184, 0.2)));
  background: var(--topbar-tab-bg, #152130);
  color: var(--text-muted, var(--color-text-muted, #c5d6ee));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.top-panel-tab:hover {
  border-color: var(--accent-soft, var(--color-accent-hover, #7ab8ff));
  color: var(--text-main, var(--color-text-main, #e8f1ff));
}

.top-panel-tab.is-active {
  border-color: var(--accent, var(--color-accent, #5ea8ff));
  background: var(--topbar-tab-active-bg, #1d2d40);
  color: var(--text-main, var(--color-text-main, #cfe9ff));
}

.top-panel-tab-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

.top-panel-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.top-panel-mobile-btn {
  cursor: pointer;
}

.top-panel-mobile-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-panel-logout-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .top-panel-logout-form-desktop {
    display: none;
  }

  .top-panel-logout-form-mobile {
    display: block;
  }

  .top-panel-mobile-actions {
    display: inline-flex;
  }
}