/* Sidebar console shell, shared by the workspace and the admin pages.
   One nav, one pane per feature, so a page can grow without becoming a
   single endless scroll. Views are toggled with the `hidden` attribute,
   which works because style.css declares [hidden]{display:none!important}. */

.console {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.console-nav {
  position: sticky;
  top: 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
}

.console-nav .nav-group {
  padding: 12px 10px 6px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.console-nav .nav-group:first-child { padding-top: 4px; }

.console-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.console-nav a:hover { background: var(--surface-2); color: var(--text); }
.console-nav a.is-active { background: #111827; color: #fff; }

/* A count that matters (queue depth, dead workers) needs to be visible from
   any view, not only after you navigate to it. */
.console-nav .nav-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.console-nav a.is-active .nav-badge { background: rgba(255, 255, 255, .18); color: #fff; }
.console-nav .nav-badge.is-warn { background: #fffbeb; color: #b45309; }
.console-nav a.is-active .nav-badge.is-warn { background: rgba(255, 255, 255, .22); color: #fff; }

.console-main { min-width: 0; }

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.view-head h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.4px; }
.view-head p { margin: 6px 0 0; max-width: 62ch; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* Cards inside a view lose their own heading; the view already has one. */
.view > .settings-card { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* There used to be a `.view > .settings-card > .settings-title { display:none }`
   here, meant to suppress the pre-refactor headings. It never matched: those
   headings sit directly under `.view`, not inside a `.settings-card`, so every
   view rendered its title twice. Deleting the stale markup was the fix; hiding
   it with a selector was only ever papering over duplicated content. */

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; gap: 20px; }
  .console-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 6px;
  }
  .console-nav .nav-group { display: none; }
  .console-nav a { white-space: nowrap; flex-shrink: 0; }
}


/* .lang-switch now lives in style.css — every page that mounts the switcher
   loads that sheet, this one only gets loaded by /app and /admin. */

/* The Telegram bind control used to be a boxed panel of its own, whose button
   reused `.primary-btn`. That class is written for the one button on the home
   page that is pinned inside the URL box — its base rule is
   `position:absolute; right:10px; bottom:10px` — and the override here changed
   the button's size without resetting `position`. With no positioned ancestor
   it escaped the panel and parked itself in the corner of the page.

   The control now lives in the channel row and uses `.secondary-btn`, the same
   class as the 添加 button beside it: statically positioned, already the right
   height. Do not reach for `.primary-btn` outside `.url-box`. */
#tg-bind-manual a { color: var(--text); word-break: break-all }