/* Shared page shell. Keep this file loaded after page-local styles. */
:root {
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#17202a;
  --muted:#5e6a78;
  --border:#d9dee7;
  --accent:#2563eb;
  --danger:#c2410c;
  --ok:#047857;
  --accent-bg:#eff6ff;
  --accent-border:#93c5fd;
  --accent-shadow:rgba(37,99,235,.14);
  color-scheme:light;
}

body {
  background:var(--bg);
  color:var(--text);
  overflow-y:scroll;
}

.wrap {
  width:100%;
  max-width:1800px;
  margin:18px auto;
  padding:0 14px 36px;
}

.topbar {
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto auto;
  align-items:start;
  gap:14px;
  border-bottom:1px solid var(--border);
  padding:0 0 12px;
  margin-bottom:12px;
}

.topbar .title {
  min-height:38px;
  display:flex;
  align-items:center;
  font-size:20px;
  line-height:1.2;
  letter-spacing:0;
  font-weight:760;
}

.topbar-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
}

.topbar .btn,
#themeToggle {
  min-height:38px;
  border-radius:7px;
  padding:8px 12px;
  background:#fff;
  color:var(--text);
  box-shadow:none;
}

.topbar .btn-accent,
.topbar .btn.active {
  background:#eef4ff;
  border-color:#8fb9ff;
  color:#123f8c;
  box-shadow:none;
}

#themeToggle {
  margin-left:8px;
  white-space:nowrap;
}

#themeToggle .theme-label {
  margin-left:4px;
}

body[data-theme="dark"] {
  --bg:#0f141b;
  --panel:#151b24;
  --panel2:#101721;
  --text:#e7edf5;
  --muted:#9aa7b6;
  --border:#2b3543;
  --accent:#7aa7ff;
  --danger:#fb923c;
  --ok:#34d399;
  --accent-bg:#16233a;
  --accent-border:#3b82f6;
  --accent-shadow:rgba(37,99,235,.18);
  color-scheme:dark;
}

body[data-theme="dark"] .topbar .btn,
body[data-theme="dark"] #themeToggle {
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
}

body[data-theme="dark"] .topbar .btn-accent,
body[data-theme="dark"] .topbar .btn.active {
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:#dbeafe;
}

@media (max-width:700px) {
  .wrap {
    width:100%;
    padding:0 10px 28px;
    margin-top:10px;
  }

  .topbar {
    display:block;
    position:relative;
  }

  .topbar .title {
    margin-bottom:10px;
    padding-right:44px;
  }

  .topbar-nav {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:4px;
    width:100%;
    overflow-x:auto;
    margin-left:0;
  }

  .topbar-nav .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:38px;
    padding:8px 6px;
    font-size:12px;
    white-space:nowrap;
    border-radius:6px;
  }

  #themeToggle {
    position:absolute;
    top:0;
    right:0;
    margin:0;
    width:34px;
    height:34px;
    min-height:0;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
    border-radius:7px;
  }

  #themeToggle .theme-label {
    display:none;
    margin-left:0;
  }
}