/* ==========================================================================
   ThreadPilot — Threads-only SaaS design system (redesign Nov 2026).
   CodeCanyon panel pattern: one Inter font (locally bundled, no CDN),
   one inline-SVG icon set, token system, separate user/admin shells.
   Pure CSS, no framework. The legacy SocialHence stylesheet (style.css)
   is kept untouched for reference; this file is the only stylesheet
   the layouts load.
   ========================================================================== */

/* Inter, locally bundled (assets/fonts/inter-latin-*.woff2). No CDN. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* Theme tokens */
  --bg: #06080d;
  --bg-soft: #090d15;
  --panel: #0d121a;
  --panel-2: #111826;
  --panel-3: #161e30;
  --border: #1e293b;
  --border-soft: #182233;
  --text: #f2f5f9;
  --muted: #8d99ad;
  --muted-2: #6b7689;
  --accent: #7554f5;
  --accent-2: #9e7dff;
  --accent-soft: rgba(117, 84, 245, .16);
  --accent-ring: rgba(117, 84, 245, .4);
  --accent-ring-soft: rgba(117, 84, 245, .25);
  --selection: rgba(117, 84, 245, .45);
  --success: #35d29a;
  --success-soft: rgba(53, 210, 154, .14);
  --warn: #f3c45b;
  --warn-soft: rgba(243, 196, 91, .14);
  --danger: #ff718e;
  --danger-soft: rgba(255, 113, 142, .14);
  --info: #5eb3f7;
  --info-soft: rgba(94, 179, 247, .14);
  /* Admin workspace accent (amber, not purple) */
  --admin-accent: #f59e0b;
  --admin-accent-2: #fbbf24;
  /* Chart teal (AutoReply replies series) */
  --teal: #0ea47a;
  --admin-accent-soft: rgba(245, 158, 11, .14);
  /* Spacing scale */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem;
  /* Type scale */
  --fs-xs: .75rem; --fs-sm: .85rem; --fs-base: .92rem; --fs-lg: 1.05rem;
  --fs-xl: 1.6rem; --fs-hero: clamp(2rem, 5vw, 3.1rem);
  /* Elevation */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .25);
  --sh-md: 0 8px 28px rgba(0, 0, 0, .35);
  --sh-lg: 0 16px 48px rgba(0, 0, 0, .45);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar: 260px;
  --sidebar-collapsed: 72px;
  --topbar: 60px;
  --topbar-bg: rgba(6, 8, 13, .85);
  --shadow: var(--sh-md);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Light theme (data-theme="light" on <html>, toggled from the header).
   Same tokens, light values — every component reads the tokens, so the
   whole app (shell, cards, forms, homepage, auth) follows the toggle. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --panel-3: #e2e7ee;
  --border: #dde2ea;
  --border-soft: #e8ecf1;
  --text: #151a21;
  --muted: #5a6572;
  --muted-2: #8590a0;
  --accent: #7554f5;
  --accent-2: #5f3ee0;
  --accent-soft: rgba(117, 84, 245, .12);
  --accent-ring: rgba(117, 84, 245, .35);
  --accent-ring-soft: rgba(117, 84, 245, .2);
  --selection: rgba(117, 84, 245, .28);
  --success: #0d9e6e;
  --success-soft: rgba(13, 158, 110, .12);
  --warn: #9a6b0f;
  --warn-soft: rgba(154, 107, 15, .12);
  --danger: #d92d4d;
  --danger-soft: rgba(217, 45, 77, .10);
  --info: #1c7ed6;
  --info-soft: rgba(28, 126, 214, .12);
  --topbar-bg: rgba(255, 255, 255, .88);
  --shadow: 0 8px 28px rgba(20, 30, 50, .12);
  --sh-sm: 0 2px 8px rgba(20, 30, 50, .10);
  --sh-md: 0 8px 28px rgba(20, 30, 50, .12);
  --sh-lg: 0 16px 48px rgba(20, 30, 50, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--fs-xl); line-height: 1.25; margin: .25rem 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .75rem; letter-spacing: -.01em; }
.card h2:first-child { margin-top: 0; }
h3 { font-size: 1rem; margin: 0 0 .6rem; }
p { margin: 0 0 .75rem; }
img { max-width: 100%; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
body.admin :focus-visible { outline-color: var(--admin-accent); }

/* ---------- Icons (inline SVG sprite, Feather-style) --------------------- */

.icon-sprite { position: absolute; width: 0; height: 0; }
.ico { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; vertical-align: -.18em; }
.nav-ico .ico { width: 1.1rem; height: 1.1rem; }
.btn .ico { width: .95rem; height: .95rem; }
h1 .ico, h2 .ico, h3 .ico { width: 1.1rem; height: 1.1rem; }

/* ---------- App shell: sidebar + topbar + main -------------------------- */

.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* §32: the brand link must shrink (a wide/custom logo) without squeezing
   the ADMIN badge or the drawer close button on top of each other. */
.sidebar-head .brand { flex: 1 1 auto; min-width: 0; }
.sidebar-head .brand-logo { height: auto; max-height: 28px; max-width: 100%; }
.sidebar-head .admin-badge { flex: 0 0 auto; }
.sidebar-close { flex: 0 0 auto; }
.brand { font-weight: 800; font-size: 1.2rem; color: var(--text); display: inline-flex; align-items: center; gap: .45rem; }
.brand:hover { text-decoration: none; }
.brand.big { font-size: 1.6rem; }
.sidebar-close {
  display: none; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  padding: .35rem .5rem; line-height: 1;
}
.sidebar-close:hover { background: var(--panel); }
.sidebar nav { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--fs-base);
}
.sidebar nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.sidebar nav a.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.sidebar nav a .nav-ico { width: 1.15rem; text-align: center; flex: 0 0 1.15rem; display: inline-flex; }
.nav-group-label {
  margin: 1.1rem .75rem .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}
.nav-details { margin: 0; }
.nav-details summary.nav-group-label {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: .35rem;
}
.nav-details summary.nav-group-label::-webkit-details-marker { display: none; }
.nav-details summary.nav-group-label::after {
  content: ""; width: .45rem; height: .45rem; border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform .15s ease;
}
.nav-details[open ] summary.nav-group-label::after { transform: rotate(-135deg); }
.nav-details a { margin-left: .25rem; }
.side-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-soft); flex: 0 0 auto; }
.side-user-card { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 2rem;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-sm {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: 0 0 1.5rem;
  background: var(--panel-3); color: var(--text); font-weight: 700; font-size: .7rem;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.side-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-user-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-email { font-size: .75rem; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot-links { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.side-foot-links a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--fs-base);
}
.side-foot-links a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.side-logout { margin: 0; }
.side-logout-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .75rem; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--muted); font-size: var(--fs-base);
  font-family: var(--font); cursor: pointer; text-align: left;
}
.side-logout-btn:hover { background: var(--panel); color: var(--text); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 35;
  background: rgba(3, 5, 9, .6);
}
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 30;
}
.topbar .spacer { flex: 1; }
.topbar .top-actions { display: flex; align-items: center; gap: .5rem; }
.nav-toggle-btn, .collapse-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); cursor: pointer; padding: .4rem .55rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle-btn { display: none; }
.nav-toggle-btn:hover, .collapse-btn:hover { border-color: var(--accent); }
.main { flex: 1; padding: 1.5rem; max-width: 1200px; width: 100%; margin: 0 auto; }

/* Desktop collapse to icons-only (72px). Labels hide; icons centre. */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); flex-basis: var(--sidebar-collapsed); padding: 1rem .55rem; }
body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .sidebar .nav-group-label,
body.sidebar-collapsed .sidebar .side-user-meta,
body.sidebar-collapsed .sidebar .side-foot-links .nav-label,
body.sidebar-collapsed .sidebar .side-logout-btn .nav-label,
body.sidebar-collapsed .sidebar .badge,
body.sidebar-collapsed .sidebar .admin-badge { display: none; }
body.sidebar-collapsed .sidebar nav a,
body.sidebar-collapsed .sidebar .side-foot-links a,
body.sidebar-collapsed .sidebar .side-logout-btn { justify-content: center; padding: .55rem 0; }
body.sidebar-collapsed .sidebar .side-user-card { justify-content: center; }
body.sidebar-collapsed .sidebar .brand-logo { height: 24px; }
body.sidebar-collapsed .collapse-btn .ico { transform: rotate(180deg); }
/* Collapsed mode hides the group summaries, so closed <details> groups
   must still show their links (icons-only) — the UA hides closed
   <details> content, but author styles can override that. */
body.sidebar-collapsed .sidebar details.nav-details > a { display: flex; }

/* §33: TOTP QR — the code must sit on white or scanners cannot read it,
   in either theme. */
.totp-qr-box { background: #fff; padding: 12px; border-radius: 10px; display: inline-block; border: 1px solid var(--border); margin-bottom: .75rem; }
.totp-qr-box svg { display: block; }
.totp-qr-box:empty { display: none; }
/* §33: recovery codes + copyable TOTP secret. */
.totp-secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.totp-secret-row code { font-size: 1rem; letter-spacing: .04em; }
.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; margin: .75rem 0; }
.recovery-grid code { display: block; text-align: center; padding: .55rem .25rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; letter-spacing: .05em; }

/* ---------- Admin workspace (deliberately different from user) ----------- */

body.admin .sidebar { background: #101216; border-right-color: #1e2230; }
body.admin .sidebar nav a { color: #aab0bd; }
body.admin .sidebar nav a:hover { background: #1a1e28; color: #fff; }
body.admin .sidebar nav a.on { background: var(--admin-accent-soft); color: #fff; }
body.admin .sidebar .nav-group-label { color: #6b7280; }
body.admin .sidebar .side-foot { border-top-color: #1e2230; }
body.admin .sidebar .side-user-name { color: #e8eaef; }
body.admin .sidebar .side-user-email { color: #6b7280; }
body.admin .sidebar .side-foot-links a { color: #aab0bd; }
body.admin .sidebar .side-foot-links a:hover { background: #1a1e28; color: #fff; }
body.admin .sidebar .side-logout-btn { color: #aab0bd; }
body.admin .sidebar .side-logout-btn:hover { background: #1a1e28; color: #fff; }
/* §33: the drawer close button kept the light-theme --text (near-black) on
   the near-black admin sidebar, so its X rendered invisible (a blank box).
   The admin sidebar is always dark, so the button needs its own light color. */
body.admin .sidebar-close { color: #e8eaef; border-color: #2a2f3d; }
body.admin .sidebar-close:hover { background: #1a1e28; color: #fff; }
body.admin .avatar.admin-avatar { background: var(--admin-accent); color: #231a02; }
body.admin .main { max-width: 1400px; }
body.admin .tbl { font-size: .85rem; }
body.admin .num, body.admin .stat .num { font-variant-numeric: tabular-nums; }
.admin-badge {
  background: var(--admin-accent); color: #231a02; font-size: .65rem; font-weight: 800;
  letter-spacing: .08em; padding: .15rem .45rem; border-radius: 4px;
}
.health-dot { width: .65rem; height: .65rem; border-radius: 50%; flex: 0 0 .65rem; background: var(--muted-2); }
.health-dot.ok { background: var(--success); }
.health-dot.warn { background: var(--warn); }
.health-dot.err { background: var(--danger); }

/* ---------- Cards, grids, stats ---------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.card.flat { margin-bottom: 0; }
.card.accent-border { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.card.popular-card { border: 2px solid var(--accent); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-grid .card { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.stat .num { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: var(--fs-sm); margin-top: .2rem; }
.stat .sub { font-size: .8rem; color: var(--muted-2); margin-top: .35rem; }
.stat .num.warn, .stat .num.warn-num { color: var(--warn); }
.stat .num.danger { color: var(--danger); }
.stat .num.ok { color: var(--success); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.stat-ico { color: var(--muted-2); display: inline-flex; }
.stat-ico .ico { width: 1.15rem; height: 1.15rem; }
.stat-delta { font-size: .75rem; color: var(--muted-2); text-align: right; }
.announcements-card { border-left: 3px solid var(--accent); }
.announcement { margin-bottom: .6rem; }
.announcement:last-child { margin-bottom: 0; }

/* ---------- Charts (pure SVG, no JS dependency) ------------------------- */

.chart-svg { width: 100%; height: auto; display: block; }
.chart-line { fill: none; stroke: var(--admin-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--admin-accent-soft); stroke: none; }
.chart-dot { fill: var(--admin-accent); }
.chart-label { fill: var(--muted-2); font-size: 11px; font-family: var(--font); }
.bar-posts { fill: var(--accent); }
.bar-replies { fill: var(--teal); }
.chart-legend { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.legend-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.legend-swatch.posts { background: var(--accent); }
.legend-swatch.replies { background: var(--teal); }

/* ---------- Up-next list -------------------------------------------------- */

.up-next-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.up-next-list li { padding: .6rem 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: .15rem; }
.up-next-list li:last-child { border-bottom: none; }
.up-next-time { font-size: .8rem; font-weight: 600; color: var(--accent-2); }
.up-next-text { font-size: .92rem; }
.up-next-account { font-size: .8rem; }

/* ---------- Usage bars + quota meter ------------------------------------ */

.usage { margin-bottom: .9rem; }
.usage:last-child { margin-bottom: 0; }
.usage-head { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--fs-sm); margin-bottom: .35rem; }
.usage-head .usage-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar {
  height: 8px; border-radius: 999px; background: var(--panel-3);
  overflow: hidden;
}
.bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent);
  transition: width .3s ease;
}
.bar > span.ok { background: var(--success); }
.bar > span.warn { background: var(--warn); }
.bar > span.danger { background: var(--danger); }
.usage.warn .usage-head { color: var(--warn); }
.usage.warn .usage-head .usage-num { color: var(--warn); }
.usage .usage-note { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.usage .usage-note a { color: var(--warn); }

.quota-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quota-item { text-align: center; }
.quota-item .quota-num { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.quota-item .quota-lbl { font-size: .8rem; color: var(--muted); }
.quota-item .bar { margin-top: .45rem; }
.streak-row { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.streak-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1.1rem; font-weight: 800; color: var(--warn);
}
.streak-chip .ico { width: 1.1rem; height: 1.1rem; }

/* ---------- Composer: byte counter + chain preview ---------------------- */

.byte-counter { font-size: .8rem; color: var(--muted-2); text-align: right; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.byte-counter.over { color: var(--danger); font-weight: 600; }
textarea.over { border-color: var(--danger); }
.chain-preview { margin-top: .75rem; }
.chain-preview-head { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.chain-part {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem; margin-bottom: .5rem;
}
.chain-part-num {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: 0 0 1.5rem;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.chain-part-body { flex: 1; min-width: 0; }
.chain-part-text { font-size: .92rem; white-space: pre-wrap; word-break: break-word; }
.chain-part-meta { font-size: .75rem; color: var(--muted-2); margin-top: .3rem; font-variant-numeric: tabular-nums; }
.chain-part-actions { display: flex; flex-direction: column; gap: .35rem; flex: 0 0 auto; }

/* ---------- Buttons, badges, pills -------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: .55rem;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-size: .9rem; font-family: var(--font); line-height: 1.3;
  text-align: center; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
body.admin .btn.primary { background: var(--admin-accent); border-color: var(--admin-accent); color: #231a02; }
body.admin .btn.primary:hover { background: var(--admin-accent-2); border-color: var(--admin-accent-2); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.small { padding: .35rem .7rem; font-size: .8rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); cursor: pointer; padding: .4rem .5rem; line-height: 1;
  position: relative;
}
.icon-btn:hover { border-color: var(--accent); text-decoration: none; }
.bell-btn .dot {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1rem; height: 1rem;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .2rem;
}
/* §45: no red unread dot on the admin bell — the admin panel header stays
   clean; the bell + dropdown + unread list inside still work, and the
   user-panel bell keeps its dot. */
body.admin .bell-btn .dot { display: none; }

/* ---------- Notification bell dropdown (§30, SocialHence parity) -------- */
/* Mirrors the live SocialHence bell: 320px panel, header + Mark all read,
   scrollable recent list (unread tinted, type dot), "View all" footer.
   §32: the panel is anchored to the TOPBAR, not the bell button — the bell
   sits mid-row (theme toggle + Find user sit to its right), so right:0
   against the button pushed the 320px panel 31px past the LEFT edge on a
   390px phone. The topbar is sticky (a positioned containing block), so
   the panel now drops 8px below it, flush with the viewport's right edge,
   at every width. .bell-wrap stays unpositioned on purpose. */
.bell-drop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px;
  max-width: calc(100vw - 2rem);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 60; overflow: hidden; text-align: left;
}
.bell-drop-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border);
}
.bell-drop-head-actions { display: inline-flex; align-items: center; gap: .5rem; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-2); font-size: var(--fs-xs); font-weight: 600;
}
.linklike:hover { text-decoration: underline; }
.bell-close {
  background: none; border: 0; padding: .15rem; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; line-height: 1;
}
.bell-close:hover { color: var(--text); }
.bell-drop-list { max-height: 24rem; overflow-y: auto; }
.bell-empty { padding: 2rem .8rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.bell-item {
  display: flex; gap: .6rem; width: 100%; text-align: left;
  padding: .65rem .8rem; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer; color: var(--text); font: inherit;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--panel-2); }
.bell-item.unread { background: var(--accent-soft); }
.bell-item.unread:hover { background: var(--accent-soft); filter: brightness(1.05); }
.bell-dot {
  flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 999px; margin-top: .35rem;
  background: var(--info);
}
.bell-dot.type-success { background: var(--success); }
.bell-dot.type-warning { background: var(--warn); }
.bell-dot.type-error, .bell-dot.type-admin_alert { background: var(--danger); }
.bell-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.bell-item-title {
  font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-item-msg {
  font-size: var(--fs-xs); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bell-item-time { font-size: .65rem; color: var(--muted); margin-top: .15rem; }
.bell-view-all {
  display: block; text-align: center; padding: .6rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent-2); border-top: 1px solid var(--border); text-decoration: none;
}
.bell-view-all:hover { background: var(--panel-2); text-decoration: none; }

.badge { font-size: var(--fs-xs); font-weight: 600; padding: .2rem .6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent-2); }
.badge.neutral { background: var(--panel-3); color: var(--muted); }
.badge-top { align-self: flex-start; margin-bottom: .5rem; }
.pill {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: .1rem .5rem; display: inline-block;
}
.pill.soft { background: var(--panel-3); color: var(--muted); }
.pill.warn { background: var(--warn); color: #231a02; }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.err { background: var(--danger-soft); color: var(--danger); }
.pill.muted { background: var(--panel-3); color: var(--muted); }

/* ---------- Tables (designed component) --------------------------------- */

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.tbl tr:last-child td { border-bottom: none; }
.tbl-wrap { overflow-x: auto; }
.tbl .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline-block; margin: 0 .15rem 0 0; }
.row-actions .icon-btn { padding: .3rem .4rem; }

/* ---------- Forms -------------------------------------------------------- */

label { display: block; margin: .6rem 0; font-size: .9rem; }
label .hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
input, select, textarea {
  width: 100%; margin-top: .25rem; padding: .55rem .7rem;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: .5rem;
  color: var(--text); font-family: var(--font); font-size: var(--fs-base);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring-soft); }
input[type=checkbox], input[type=radio] { width: auto; margin-top: 0; }
.check { display: flex !important; align-items: center; gap: .45rem; }
.field-row { display: flex; gap: .75rem; }
.field-row > * { flex: 1; min-width: 0; }
.otp-input { text-transform: uppercase; letter-spacing: 4px; font-size: 20px; }
.log-box { max-height: 300px; overflow: auto; background: rgba(0, 0, 0, .3); padding: .7rem; border-radius: .5rem; white-space: pre-wrap; }
.logo-preview { height: 32px; background: #0d121a; padding: 4px; border-radius: 8px; vertical-align: middle; }
.favicon-preview { height: 24px; vertical-align: middle; }

/* ---------- Alerts, modal ------------------------------------------------- */

.alert { padding: .75rem 1rem; border-radius: .6rem; margin-bottom: 1rem; font-size: var(--fs-base); }
.alert.success { background: var(--success-soft); border: 1px solid var(--success); }
.alert.error { background: var(--danger-soft); border: 1px solid var(--danger); }
.alert.warn { background: var(--warn-soft); border: 1px solid var(--warn); }
.alert.info { background: var(--info-soft); border: 1px solid var(--info); }
.alert.ok { background: var(--success-soft); border: 1px solid var(--success); }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(3, 5, 9, .7); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 520px; padding: 1.4rem; max-height: 90vh; overflow-y: auto;
}
.modal h2 { margin-top: 0; }
.modal-msg { color: var(--muted); }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }

/* ---------- Helpers + utilities ------------------------------------------ */

.row { display: flex; align-items: center; }
/* §32: page headers (top-level .row.between inside .main) get breathing
   room below — the h1's own margin sits inside the flex row, so without
   this the back/admin button touched the card below. Wraps on narrow
   screens instead of squeezing the title and button together. */
.main > .row.between { margin-bottom: 1.25rem; flex-wrap: wrap; row-gap: .5rem; }
.between { justify-content: space-between; }
.gap { gap: .5rem; }
.gap-lg { gap: 1rem; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.pos { color: var(--success); } .neg { color: var(--danger); }
.danger-text { color: var(--danger); }
.empty { color: var(--muted); padding: 1rem 0; text-align: center; }
.empty-state { color: var(--muted); padding: 1rem 0; text-align: center; margin: 0; }
.hidden { display: none !important; }
.inline-form { display: inline; }
.span-all { grid-column: 1 / -1; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.basis-full { flex-basis: 100%; }
.items-start { align-items: flex-start; }
.mt-1 { margin-top: 1rem; }
.mt-9 { margin-top: .9rem; }
.mb-06 { margin-bottom: .6rem; }
.pt-12 { padding-top: 12px; }
.break-all { word-break: break-all; }
.w-55 { width: 55px; } .w-65 { width: 65px; } .w-80 { width: 80px; }
.w-100 { width: 100px; } .w-110 { width: 110px; } .w-125 { width: 125px; }
.w-180 { width: 180px; } .w-220 { width: 220px; } .w-6r { width: 6rem; }

/* ---------- Guest / auth pages ------------------------------------------- */

body.guest { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.guest-card {
  width: 100%; max-width: 420px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow);
}
.guest-card .brand { margin-bottom: .5rem; }
.guest-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.guest-foot { text-align: center; margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Public homepage ---------------------------------------------- */

.home { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.home-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border-soft);
}
/* The brand must never shrink: on a crowded mobile header the logo (an
   <img> with max-width: 100%) compressed to a 13px sliver at 390px. */
.home-nav .brand { flex-shrink: 0; }
.home-nav .spacer { flex: 1; }
.home-nav .nav-links { display: flex; gap: 1.25rem; font-size: var(--fs-base); }
.home-nav .nav-links a { color: var(--muted); }
.home-nav .nav-links a:hover { color: var(--text); text-decoration: none; }
.home-menu-btn {
  display: none; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  padding: .4rem .55rem; line-height: 1;
}
.home-mobile-nav {
  display: none; border-bottom: 1px solid var(--border-soft);
  padding: .75rem 0; flex-direction: column; gap: .15rem;
}
.home-mobile-nav.open { display: flex; }
.home-mobile-nav a { padding: .55rem .25rem; color: var(--muted); font-size: .95rem; }
.home-mobile-nav a:hover { color: var(--text); text-decoration: none; }
.hero { text-align: center; padding: 4rem 0 2.5rem; }
.hero-badge {
  display: inline-block; font-size: .8rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid var(--accent-ring);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.hero h1 { font-size: var(--fs-hero); line-height: 1.15; margin: 0 0 1rem; letter-spacing: -.02em; }
.hero .hero-sub { font-size: 1.1rem; color: var(--muted); max-width: 640px; margin: 0 auto 1.75rem; }
.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { padding: .75rem 1.5rem; font-size: 1rem; }
.proof-strip {
  display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--border-soft);
}
.proof-item { text-align: center; }
.proof-item .proof-num { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.proof-item .proof-lbl { font-size: .8rem; color: var(--muted); }
.proof-note { text-align: center; font-size: var(--fs-xs); color: var(--muted-2); padding: .5rem 0 0; }
.home-section { padding: 3rem 0 1rem; }
.home-section h2 { font-size: 1.7rem; text-align: center; margin-bottom: .5rem; }
.home-section .section-sub { text-align: center; color: var(--muted); max-width: 600px; margin: 0 auto 2rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; }
.feature-card .feature-ico { color: var(--accent-2); margin-bottom: .6rem; display: inline-flex; }
.feature-card .feature-ico .ico { width: 1.5rem; height: 1.5rem; }
.feature-card h3 { margin-bottom: .35rem; }
.feature-card p { color: var(--muted); font-size: var(--fs-base); margin-bottom: 0; }
.example-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; }
.example-card .example-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.example-card .example-text { font-size: .95rem; flex: 1; }
.example-card .example-meta { display: flex; gap: 1rem; color: var(--muted); font-size: .8rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--border-soft); }
.example-card .example-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.example-tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.score-badge { background: var(--success-soft); color: var(--success); font-weight: 700; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; }
.pricing-toggle { display: flex; gap: .25rem; justify-content: center; margin-bottom: 2rem; }
.pricing-toggle button {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-family: var(--font); font-size: .9rem;
}
.pricing-toggle button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }
.plan-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column;
}
.plan-card.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
.plan-card h3 { font-size: 1.15rem; }
.plan-price { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin: .4rem 0 .1rem; font-variant-numeric: tabular-nums; }
.plan-price .per { font-size: .9rem; font-weight: 400; color: var(--muted); }
.plan-price .alt-price { display: none; }
.plan-card.show-yearly .plan-price .monthly-price { display: none; }
.plan-card.show-yearly .plan-price .alt-price { display: inline; }
.plan-interval { color: var(--muted); font-size: var(--fs-sm); }
.plan-features { list-style: none; margin: 1rem 0 1.25rem; padding: 0; flex: 1; }
.plan-features li { padding: .3rem 0 .3rem 1.5rem; position: relative; font-size: var(--fs-base); color: var(--muted); }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list details {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: .6rem;
}
.faq-list summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--accent-2); font-weight: 800; }
.faq-list details[open ] summary::after { content: "−"; }
.faq-list p { color: var(--muted); margin: .6rem 0 0; font-size: var(--fs-base); }
.final-cta {
  text-align: center; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2.5rem 1.5rem; margin-top: 3rem;
}
.final-cta h2 { margin-top: 0; }
.final-cta p { color: var(--muted); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1100px) {
  .grid4, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  /* No auto-collapse to icons-only here: below 1100px the sidebar is a
     hamburger-opened drawer with full labels (rules in the second 1100px
     block below), so labeled navigation is reachable at every width —
     including a phone in desktop mode (~980px). The collapse button is
     replaced by the hamburger here. */
  .nav-toggle-btn { display: inline-flex; }
  .collapse-btn { display: none; }
}
@media (max-width: 900px) {
  .grid3, .grid2 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .quota-meter { grid-template-columns: 1fr; }
  .home-nav .nav-links { display: none; }
  .home-menu-btn { display: inline-flex; }
  .main { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .hero { padding: 2.5rem 0 1.5rem; }
  .field-row { flex-direction: column; gap: 0; }
}
/* ---------- Sidebar drawer below 1100px (dead-zone fix) ------------------
   Was 900px: between 901–1100px the sidebar was forced icons-only with
   the collapse button hidden and no hamburger — a phone in desktop mode
   (~980px) had no way to reach labeled navigation. Now the drawer takes
   over at 1100px, so the hamburger is the expand control at every width
   below 1100px and full labels are one tap away. This block sits after
   the 900px block so its rules win where they overlap. */
@media (max-width: 1100px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    height: 100dvh;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow); width: var(--sidebar); flex-basis: var(--sidebar);
    padding: 1rem .9rem;
  }
  /* In drawer mode the sidebar is full-width again (labels back).
     `display: revert` restores each element's base display (block for
     labels, flex for the user meta, inline for label spans), and the
     body.sidebar-collapsed variants win over the collapsed rules
     (same specificity, later in the file). Closed <details> groups
     collapse normally again in the drawer. */
  .sidebar .nav-label, .sidebar .nav-group-label, .sidebar .side-user-meta,
  .sidebar .side-foot-links .nav-label, .sidebar .side-logout-btn .nav-label,
  .sidebar .badge, .sidebar .admin-badge,
  body.sidebar-collapsed .sidebar .nav-label,
  body.sidebar-collapsed .sidebar .nav-group-label,
  body.sidebar-collapsed .sidebar .side-user-meta,
  body.sidebar-collapsed .sidebar .side-foot-links .nav-label,
  body.sidebar-collapsed .sidebar .side-logout-btn .nav-label,
  body.sidebar-collapsed .sidebar .badge,
  body.sidebar-collapsed .sidebar .admin-badge { display: revert; }
  .sidebar details.nav-details:not([open]) > a,
  body.sidebar-collapsed .sidebar details.nav-details:not([open]) > a { display: none; }
  .sidebar nav a, .sidebar .side-foot-links a, .sidebar .side-logout-btn { justify-content: flex-start; padding: .55rem .75rem; }
  .sidebar .side-user-card { justify-content: flex-start; }
  .sidebar .brand-logo { height: 28px; }
  /* The persisted collapsed state must not shrink the drawer: same
     specificity as the collapsed rules, later in the file, so these win. */
  body.sidebar-collapsed .sidebar { width: var(--sidebar); flex-basis: var(--sidebar); padding: 1rem .9rem; }
  body.sidebar-collapsed .sidebar nav a,
  body.sidebar-collapsed .sidebar .side-foot-links a,
  body.sidebar-collapsed .sidebar .side-logout-btn { justify-content: flex-start; padding: .55rem .75rem; }
  body.sidebar-collapsed .sidebar .side-user-card { justify-content: flex-start; }
  body.sidebar-collapsed .sidebar .brand-logo { height: 28px; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-close { display: inline-flex; }
}
@media (max-width: 600px) {
  .grid4, .stat-grid { grid-template-columns: 1fr; }
  .topbar .plan-pill { display: none; }
  .topbar .btn .btn-label { display: none; }
  /* Guest header at 390px: brand 120px + CTA + toggle + hamburger only
     just fit the 350px row, so the Sign in button hides here (the mobile
     nav already has a Sign in link), the gap tightens, and the logo drops
     to 24px so the wordmark stays readable instead of compressing. */
  .home-nav { gap: .5rem; }
  .home-nav .nav-signin { display: none; }
  .home-nav .brand-logo { height: 24px; }
  .home-nav .btn.small { padding: .55rem .75rem; }
  .site-footer { padding: 2rem 1rem 1.25rem; }
  .row.gap { flex-wrap: wrap; }
  .chain-part { flex-wrap: wrap; }
  .chain-part-actions { flex-direction: row; }
}
@media (max-width: 480px) {
  .main { padding: .75rem; }
  .card { padding: .9rem; }
  .guest-card { padding: 1.25rem; }
  .hero { padding: 1.75rem 0 1.25rem; }
  .proof-strip { gap: 1.25rem; }
  .topbar { gap: .5rem; padding: 0 .75rem; }
}
/* ≤375px phones (iPhone SE / small Android): the 390px header rules still
   overflow by ~10px, so tighten once more — smaller logo, gap and CTA
   padding. At 390px the 24px logo above applies; at 375px and below the
   20px logo keeps the row inside the viewport. */
@media (max-width: 375px) {
  .home-nav { gap: .4rem; }
  .home-nav .brand-logo { height: 20px; }
  .home-nav .btn.small { padding: .55rem .6rem; }
  .home-menu-btn { padding: .35rem .45rem; }
}

/* ---------- Brand logo + premium auth ------------------------------------ */

.brand-logo { height: 28px; width: auto; display: block; }
.brand.big .brand-logo { height: 34px; }
.guest-card .brand { margin-bottom: .75rem; }
.auth-title { font-size: 1.45rem; margin: .25rem 0 .35rem; letter-spacing: -.01em; }
.auth-sub { color: var(--muted); font-size: var(--fs-base); margin-bottom: 1.25rem; }
.auth-trust { text-align: center; color: var(--muted-2); font-size: .8rem; margin-top: 1.25rem; }
.auth-switch { text-align: center; margin-top: 1rem; font-size: .9rem; }
.guest-card .field-label { font-weight: 600; }
.guest-card .field-label input { font-weight: 400; }

/* ---------- Theme toggle -------------------------------------------------- */

.theme-toggle {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem;
  cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .ico { width: 1rem; height: 1rem; }
/* The toggle shows the mode you will switch TO (the GitHub/Tailwind
   convention, and what the aria-labels already say): a moon in light
   mode ("switch to dark"), a sun in dark mode ("switch to light").
   §36: these two rules were backwards — they showed the CURRENT theme's
   icon, so the glyph contradicted the button's own label. */
:root[data-theme="light"] .theme-toggle .theme-ico-sun { display: none; }
:root:not([data-theme="light"]) .theme-toggle .theme-ico-moon { display: none; }
.theme-toggle-float { position: fixed; top: 1rem; right: 1rem; z-index: 50; }

/* ---------- Site footer (SocialHence-style, admin-managed) ---------------- */

.site-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 3rem; padding: 2.5rem 1.5rem 1.5rem;
  color: var(--muted); font-size: .9rem;
}
.site-footer-inner {
  max-width: 1120px; margin: 0 auto 2rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
.sf-brand .brand { margin-bottom: .75rem; }
.sf-brand p { font-size: .9rem; margin: 0 0 .9rem; max-width: 300px; }
.sf-social { display: flex; gap: .5rem; flex-wrap: wrap; }
.sf-social a {
  display: inline-block; padding: .35rem .75rem; font-size: .8rem; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text);
}
.sf-social a:hover { border-color: var(--accent); text-decoration: none; }
.sf-col h4 { margin: 0 0 .75rem; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.sf-col ul { list-style: none; margin: 0; padding: 0; }
.sf-col li { margin-bottom: .5rem; }
.sf-col a { color: var(--muted); }
.sf-col a:hover { color: var(--text); }
.site-footer-bottom {
  max-width: 1120px; margin: 0 auto; padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
  color: var(--muted-2); font-size: .82rem;
}
.main-wrap .site-footer { margin-top: auto; }

/* ---------- Footer responsive (F3) ---------------------------------------- */
/* NOTE: these MUST sit after the base .site-footer-inner rule above —
   the earlier ≤900px/≤600px footer rules were dead: same specificity as
   the base rule but placed before it, so the 4-column grid won at every
   width and the brand column shrank to ~60px at 390px. */
@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .sf-brand { grid-column: 1 / -1; }
  .sf-brand p { max-width: none; }
}
@media (max-width: 600px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .sf-brand { grid-column: 1 / -1; }
}

/* ---------- Admin form controls (§22: no raw JSON anywhere) ------------- */
/* Repeatable rows (footer links, plan features, TLD allowlist, payment
   config key/value pairs): Label + input pairs with add/remove. */
.rep-row { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; }

/* ---------- AutoReply post picker (§31) ---------------------------------- */
.post-picker { margin: .35rem 0; }
.post-picker-selected { display: flex; gap: .5rem; align-items: center; justify-content: space-between; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; margin-bottom: .5rem; }
.post-picker-selected[hidden] { display: none; }
.post-picker-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; max-height: 320px; overflow-y: auto; }
.post-picker-item { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; text-align: left; width: 100%; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; cursor: pointer; color: var(--text); font: inherit; }
.post-picker-item:hover { border-color: var(--accent); }
.post-picker-text { font-size: .92rem; line-height: 1.35; }
.post-picker-meta { font-size: .8rem; color: var(--muted); }

/* ---------- Best-time suggestion (composer, §31) ------------------------ */
.best-time { display: flex; gap: .6rem; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-ring-soft); border-radius: var(--radius); padding: .6rem .75rem; margin-bottom: .75rem; }
.best-time > div { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) {
  .best-time { flex-wrap: wrap; }
  .best-time .btn { flex-basis: 100%; }
}
.rep-row input[type="text"], .rep-row input[type="url"], .rep-row input[type="password"],
.rep-row input[type="number"], .rep-row textarea { flex: 1 1 0; min-width: 0; margin: 0; }
.rep-row .btn { flex: 0 0 auto; }
[data-repeatable] .add-row-btn { margin-top: .5rem; }
/* Plan limits: labelled number inputs + checkboxes in a responsive grid. */
.limits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .25rem 1rem; }
.limits-grid label { margin: .35rem 0; }
.limits-grid .hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
/* SMTP provider field groups: only the selected provider shows (JS). */
.smtp-group[hidden] { display: none; }
@media (max-width: 600px) {
  .rep-row { flex-wrap: wrap; }
  .rep-row input[type="text"], .rep-row input[type="url"], .rep-row input[type="password"],
  .rep-row input[type="number"] { flex-basis: 100%; }
}

/* ---------- Pricing page, big-SaaS 3-across (§27) -------------------------- */
/* Desktop (≥1024px): all 3 plan cards side by side in one row, like
   SocialHence and every big SaaS pricing page (GovConDash / Stripe pattern:
   name → big price → per-month note → checkmark features → CTA per card,
   middle/popular card highlighted). Mobile (<1024px): stacked one by one.
   This REPLACES the §26 vertical-everywhere stack, which was an
   overcorrection of the original overflow bug. The original bug stays
   fixed by the root cause, not the stack: the guest page used to sit inside
   the 420px auth card while the grid was 3 columns. The page now gets its
   own wide centred container (.pricing-page, 1140px) and the grid uses
   minmax(0,1fr) columns, so it can never overflow its container. */
.pricing-page { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }
.pricing-page .card { margin-bottom: 1rem; }
.plan-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-bottom: 1rem; }
.plan-grid3 .plan-card .btn { width: 100%; }
.plan-grid3 .plan-note { margin: 0 0 1.25rem; }
@media (max-width: 1023px) {
  .plan-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pricing-page { padding: 1rem .9rem 2rem; }
  .plan-grid3 { gap: 1rem; }
}

/* ---------- Composer, two-column + live preview (§26 FIX 3) -------------- */
/* Editor left, Threads-style live preview right. Option sections are
   proper labelled cards, not collapsed <details> triangles. */
.composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.composer-grid .card { margin-bottom: 0; }
.composer-editor .card { margin-bottom: 1rem; }
.composer-editor .card:last-child { margin-bottom: 0; }
.composer-account { display: flex; align-items: center; gap: .75rem; }
.composer-account .avatar { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; font-size: 1rem; }
.composer-account label { flex: 1; margin: 0; }
.composer-account .account-handle { font-size: .8rem; color: var(--muted); }
#post-text { min-height: 140px; font-size: 1rem; line-height: 1.6; resize: vertical; }
.opt-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: .85rem; background: var(--panel-2); }
.opt-card:last-child { margin-bottom: 0; }
.opt-card-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.opt-card-head .opt-ico { color: var(--accent-2); display: inline-flex; margin-top: .1rem; }
.opt-card-head .opt-ico .ico { width: 1.15rem; height: 1.15rem; }
.opt-card-head h3 { margin: 0; font-size: .95rem; }
.opt-card-head p { margin: .1rem 0 0; font-size: .82rem; color: var(--muted); }
.opt-card label { margin: .5rem 0; }
.composer-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--panel); border-top: 1px solid var(--border);
  margin: 1rem -1.1rem -1.1rem; padding: .9rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius);
}
.composer-actions .btn.primary { flex: 1; min-width: 180px; padding: .75rem 1rem; font-size: 1rem; }
.composer-actions .action-note { font-size: .8rem; color: var(--muted-2); }
/* Threads composer: "New thread" head with the action top-right (like
   Threads' own Post button) and a large borderless text area. */
.composer-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.composer-head h2 { margin: 0; font-size: 1.15rem; }
.compose-card #post-text { min-height: 140px; font-size: 1.05rem; line-height: 1.6; resize: vertical; background: transparent; border: none; padding: .35rem 0; }
.compose-card #post-text:focus { border-color: transparent; box-shadow: none; }
.compose-label { margin-top: .75rem; }
.opt-card-head .btn { margin-left: auto; flex: 0 0 auto; }
/* Faithful Threads post card (grounded in threads.net/com post layout):
   36px avatar + vertical thread line, name + @handle + "now" timestamp,
   15px text, action bar heart / reply / repost / share in Threads'
   order, reply affordance below. */
.thread-preview { position: sticky; top: calc(var(--topbar) + 1rem); }
.thread-preview .preview-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.thread-preview .preview-head h3 { margin: 0; }
.tp-feed { padding: .25rem 0 0; }
.tp-empty { color: var(--muted-2); font-style: italic; font-size: .92rem; padding: .9rem 0; }
.tp-post { display: flex; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid var(--border-soft); }
.tp-post:first-child { padding-top: .5rem; }
.tp-ava-col { display: flex; flex-direction: column; align-items: center; flex: 0 0 36px; }
.tp-ava { width: 36px; height: 36px; flex-basis: 36px; font-size: .9rem; }
.tp-line { width: 2px; flex: 1; min-height: .9rem; background: var(--border); margin-top: .35rem; }
.tp-body { flex: 1; min-width: 0; }
.tp-head { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.tp-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-handle { color: var(--muted-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-time { color: var(--muted-2); font-size: .85rem; flex: 0 0 auto; }
.tp-logo { margin-left: auto; color: var(--muted-2); font-weight: 800; font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.tp-text { font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: .15rem; }
.tp-actions { display: flex; gap: 1.15rem; margin-top: .6rem; color: var(--muted-2); }
.tp-act { display: inline-flex; line-height: 1; }
.tp-act .ico { width: 1.25rem; height: 1.25rem; }
.tp-reply { display: flex; align-items: center; gap: .6rem; padding: .8rem 0 .25rem; }
.tp-reply .tp-ava-sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .75rem; }
.tp-reply-text { color: var(--muted-2); font-size: .88rem; }
.preview-meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border-soft); font-size: .78rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.preview-meta .over { color: var(--danger); font-weight: 600; }
.preview-note { font-size: .8rem; color: var(--muted); margin: .75rem 0 0; }
.composer-gate { text-align: center; padding: 2.5rem 1.5rem; }
.composer-gate .gate-ico { color: var(--accent-2); display: inline-flex; margin-bottom: .75rem; }
.composer-gate .gate-ico .ico { width: 2.25rem; height: 2.25rem; }
.composer-gate h2 { margin: 0 0 .5rem; }
.composer-gate p { color: var(--muted); max-width: 420px; margin: 0 auto 1.25rem; }
@media (max-width: 1100px) {
  .composer-grid { grid-template-columns: 1fr; }
  .thread-preview { position: static; }
}

/* ---------- Admin premium polish (§26 FIX 4) ----------------------------- */
/* Chart gridlines + ₹ axis labels (drawn by admin/dashboard.php). */
.chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.chart-grid-label { fill: var(--muted-2); font-size: 10px; font-family: var(--font); }
/* System health strip under the admin overview heading. */
.health-strip { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.health-strip .btn { margin-left: auto; }
/* Stat cards: icon chips in the amber accent, roomier numbers. */
body.admin .stat-ico { background: var(--panel-3); border-radius: 8px; padding: .35rem; color: var(--admin-accent-2); }
body.admin .stat .num { font-size: 2.1rem; }
body.admin .stat { box-shadow: var(--sh-sm); }
/* Tables: row hover + designed empty states (dashed box, not bare text). */
.admin-main .tbl tbody tr:hover { background: var(--panel-2); }
.admin-main .empty-state { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 1.5rem 1rem; }

/* ---------- Premium mobile (§30) ------------------------------------------ */
/* Every page at phone widths: headers never collide, tables become
   stacked cards, zero horizontal overflow, 44px tap targets. Desktop is
   untouched — everything below lives inside max-width: 600px, except one
   global pre-wrap fix for long unbroken lines (cron commands, URLs). */

/* Long unbroken lines must wrap instead of blowing the page out. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  /* --- Page headers: title on its own line, tabs below, primary action
         full-width. Never title + tabs + button squeezed in one row. --- */
  .main > .row.between { flex-wrap: wrap; row-gap: .6rem; }
  .main > .row.between > h1 { flex: 1 1 100%; margin: 0; }
  .main > .row.between > .row.gap { flex: 1 1 100%; flex-wrap: wrap; }
  .main > .row.between > .row.gap .btn { flex: 1 1 auto; justify-content: center; }
  .main > .row.between > .row.gap .btn.primary { flex: 1 1 100%; }
  .main > .row.between > form { flex: 1 1 100%; }
  .main > .row.between > form .btn { width: 100%; }

  /* --- Tap targets: 44px minimum; buttons may wrap their text instead
         of overflowing the viewport (long labels like "Remove admin
         override (revert to purchased plan)"). --- */
  .btn { min-height: 44px; white-space: normal; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .top-actions .icon-btn { padding: .5rem; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="url"], input[type="search"],
  input[type="tel"], select { min-height: 44px; }
  .sidebar nav a { min-height: 44px; }

  /* --- Tables become stacked cards: label + value rows, actions wrap.
         Header row is hidden (JS marks it .tbl-head-row); each cell shows
         its column label via td::before from data-label. --- */
  .tbl-wrap { overflow: visible; }
  table.tbl { display: block; width: 100%; border: 0; }
  table.tbl .tbl-head-row { display: none; }
  table.tbl tr { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .75rem; padding: .2rem .8rem; }
  table.tbl td {
    display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: flex-start;
    min-width: 0; padding: .55rem 0; border-bottom: 1px solid var(--border-soft);
    white-space: normal; overflow-wrap: anywhere;
  }
  table.tbl td:last-child { border-bottom: 0; }
  table.tbl td::before {
    content: attr(data-label); flex: 0 0 34%; min-width: 0;
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); padding-top: .15rem;
  }
  table.tbl td:not([data-label])::before { content: none; }
  table.tbl td .row.gap { flex-wrap: wrap; }
  table.tbl td .btn { flex: 0 1 auto; }
}

/* §34 — premium icon treatment (Lucide sprite refresh). Nav icons get a
   muted tone at rest and the accent colour when active, so the current
   section reads at a glance. (Sizing + the h1 chip lived here originally;
   §35 superseded both — nav 20px, h1 inline, no chip.) */
.sidebar nav a .nav-ico { color: var(--muted); }
.sidebar nav a:hover .nav-ico { color: var(--text); }
.sidebar nav a.on .nav-ico { color: var(--accent); }
body.admin .sidebar nav a:hover .nav-ico { color: #fff; }
body.admin .sidebar nav a.on .nav-ico { color: var(--admin-accent); }
.sidebar .side-foot-links a .nav-ico, .sidebar .side-logout-btn .nav-ico { color: var(--muted); }

/* §35 — icon fix round (owner: "icons sahi nahi lag rahe"). Researched
   premium admin panels first (Tabler/shadcn/Space UI conventions):
   sidebar nav icons are 20px Lucide at stroke 2, muted at rest, accent
   when active; buttons 16px; section headers 18-20px. What was wrong:
   (1) nav icons were 19.2px in an 18.4px box, admin inactive tone #8a90a0
   was too faint on the near-black sidebar; (2) the h1 "chip" (32px box,
   ~18px icon) made every page icon look like a tiny arrow lost in a pale
   box — Linear/Stripe/shadcn page headers do NOT chip their h1 icons, so
   the chip is removed: h1 icons are now inline, 1.35rem, accent colour;
   (3) wrong metaphors: a bare arrow-up for App Updates / Upload and a
   reply-arrow for Roll back — now package / upload / rotate-ccw.
   The .acct-card chips (44px, settings hubs) stay — they are the right
   size and looked right. */
.sidebar nav a .nav-ico { width: 1.25rem; flex-basis: 1.25rem; }
.nav-ico .ico { width: 1.25rem; height: 1.25rem; }
body.admin .sidebar nav a .nav-ico { color: #a7adb9; }
body.admin .sidebar .side-foot-links a .nav-ico, body.admin .sidebar .side-logout-btn .nav-ico { color: #a7adb9; }
.btn .ico { width: 1rem; height: 1rem; }
h1 .ico { width: 1.35rem; height: 1.35rem; padding: 0; background: transparent; color: var(--accent); border-radius: 0; vertical-align: -.2em; }
body.admin h1 .ico { background: transparent; color: var(--admin-accent); }

/* §34 — Facebook-style account pages: big section cards with an icon
   chip on the left, a title + description, and a status/action on the
   right. Used by the Settings hub and the admin My account pages. */
.acct-card { display: flex; gap: 1rem; align-items: flex-start; }
.acct-card .acct-ico { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: .6rem; background: var(--accent-soft); color: var(--accent); border-radius: .8rem; }
.acct-card .acct-ico .ico { width: 100%; height: 100%; }
body.admin .acct-card .acct-ico { background: var(--admin-accent-soft); color: var(--admin-accent); }
.acct-card .acct-body { flex: 1 1 auto; min-width: 0; }
.acct-card h3 { margin: 0 0 .2rem; }
.acct-card .acct-action { flex: 0 0 auto; }
@media (max-width: 640px) {
  .acct-card { flex-wrap: wrap; }
  .acct-card .acct-action { flex-basis: 100%; }
}

/* §34 — plain device list on the Password & security hubs. */
.plain-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.plain-list li { padding: .55rem .75rem; background: var(--panel); border: 1px solid var(--border); border-radius: .6rem; }

/* §39 — native color inputs: the global input padding (.55rem .7rem) squeezes
   the browser's color swatch into a thin line (proven on /calendar at 390px).
   Give the swatch room to fill the input instead. */
input[type="color"] { min-height: 44px; padding: .3rem .4rem; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: .35rem; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: .35rem; }