@import url('https://fonts.googleapis.com/css2?family=Doto:wght@500;700;900&family=Lexend:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');
/* Shared top navigation styles (topnav.js). Scoped .tn-* class names so it is
 * safe to drop onto pages that otherwise use their own inline CSS. Colors fall
 * back to a dark-green palette when the page does not define the CSS vars. */
#appnav { display:block; }
.tn-bar {
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; margin-bottom:28px;
  background:var(--card,#0A120D); border:1px solid var(--border,#1A2A20);
  border-radius:16px;
}
.tn-left { display:flex; align-items:center; gap:9px; min-width:0; flex:0 1 auto; }
.tn-logo {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto;
  border-radius:var(--radius-icon,12px);
  background:var(--accent,#0C7A47);
  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 2px var(--accent,#0C7A47),
    0 0 0 4px var(--accent-tint-border,rgba(12,122,71,.4)),
    0 2px 8px var(--accent-tint-fill,rgba(12,122,71,.25));
}
.tn-logo-letter {
  font-family:var(--font-display,'Doto','JetBrains Mono',monospace);
  font-weight:900; font-size:22px; line-height:1;
  color:var(--on-accent,#04140C);
  text-transform:uppercase; letter-spacing:-1px;
}
.tn-logout-sub { display:block; font-size:11px; font-weight:600; color:var(--text-muted,#7E9488); margin-top:2px; }
.tn-logout-sub:empty { display:none; }
.tn-nav { display:flex; gap:8px; align-items:center; flex:1 1 auto; justify-content:center; }
.tn-pill {
  font-family:'Quicksand',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.03em;
  color:var(--text-body,#9FB4A8); text-decoration:none;
  padding:9px 22px; border:1px solid var(--border-subtle,#213429); border-radius:14px;
  background:transparent; transition:background .15s,border-color .15s,color .15s; white-space:nowrap;
}
.tn-pill:hover { color:var(--text-bright,#D7E3DC); border-color:var(--accent-tint-border,rgba(12,122,71,.45)); background:var(--accent-glow-06,rgba(12,122,71,.06)); }
.tn-pill.active { color:var(--text-brightest,#EDF3EF); font-weight:700; border-color:var(--accent-light,#45B580); background:var(--accent-glow-25,rgba(12,122,71,.25)); }
.tn-right { position:relative; flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.tn-help { font-size:17px; font-weight:700; line-height:1; }
.tn-kebab {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:12px;
  background:transparent; border:1px solid var(--border-subtle,#213429); color:var(--text-body,#9FB4A8);
  cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.tn-kebab:hover { color:var(--text-bright,#D7E3DC); border-color:var(--accent-tint-border,rgba(12,122,71,.45)); background:var(--accent-glow-06,rgba(12,122,71,.06)); }
.tn-menu {
  position:absolute; top:48px; right:0; z-index:50;
  display:none; flex-direction:column; min-width:190px; padding:6px;
  background:var(--card,#0A120D); border:1px solid var(--border-subtle,#213429); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.tn-menu.open { display:flex; }
.tn-item {
  display:block; width:100%; text-align:left; box-sizing:border-box;
  padding:10px 14px; border:none; border-radius:10px; background:transparent;
  color:var(--text-body,#9FB4A8); font-family:inherit; font-size:13px; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .12s,color .12s;
}
.tn-item:hover { background:var(--accent-glow-14,rgba(12,122,71,.14)); color:var(--text-bright,#D7E3DC); }
.tn-logout { color:var(--negative,#C2564E); }
.tn-logout:hover { background:var(--negative-tint-fill,rgba(194,86,78,.1)); color:var(--negative,#C2564E); }
.tn-sep { height:1px; margin:6px 8px; background:var(--border,#1A2A20); }
@media (max-width:640px) {
  /* Two rows on phones: row 1 = logo + user + kebab, row 2 = the two nav
   * buttons full-width. Keeps the brand/username AND gives the main actions
   * clear weight instead of looking like the small param chips below. */
  .tn-bar { flex-wrap:wrap; gap:10px 8px; padding:10px 12px; margin-bottom:18px; }
  .tn-left { display:flex; order:1; flex:1 1 auto; }
  .tn-right { order:2; margin-left:auto; }
  .tn-nav { order:3; flex:1 1 100%; gap:8px; justify-content:stretch; }
  .tn-pill { flex:1 1 0; text-align:center; padding:12px 10px; font-size:14px; background:var(--accent-glow-06,rgba(12,122,71,.06)); }
  .tn-pill.active { background:var(--accent-glow-25,rgba(12,122,71,.25)); }
}

/* ═══ Global font-system toggle (topnav.js) ═══════════════════════════════
 * One switch, shared across every page (Checker / Subreddits / Proxies /
 * Uniqualizer / Admin), flips the whole app's UI font between the two
 * "cool" systems the app already ships:
 *   quicksand -> rounded (Quicksand)   |   lexend -> clean (Lexend)
 * Doto / mono display accents are preserved under both so headings, stat
 * numbers and the brand "S" keep their character. Uses !important so it wins
 * over each page's own inline font-family declarations regardless of their
 * specificity; :where() keeps these selectors at specificity 0 so pages can
 * still override a single element on purpose if ever needed. */
html[data-fontsys="quicksand"] body,
html[data-fontsys="quicksand"] body :where(div,p,span,a,button,input,textarea,select,label,h1,h2,h3,h4,h5,h6,li,td,th,summary,nav,strong,em,small,code){
  font-family:'Quicksand',sans-serif !important;
}
html[data-fontsys="lexend"] body,
html[data-fontsys="lexend"] body :where(div,p,span,a,button,input,textarea,select,label,h1,h2,h3,h4,h5,h6,li,td,th,summary,nav,strong,em,small){
  font-family:'Lexend',sans-serif !important;
}
/* Preserve display + mono accents under either system. */
html[data-fontsys] :where(.doto,.doto-num,.stat-v,.rl-num,.logo,.app-wordmark,.tn-logo-letter,.app-brand-tile .letter,code,pre,.mono,.u-mono){
  font-family:'Doto','JetBrains Mono',monospace !important;
}
html[data-fontsys] :where(code,pre,.mono,.u-mono){
  font-family:'JetBrains Mono',monospace !important;
}

/* Toggle control itself */
.tn-fonttoggle{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--border,#1A2A20); border-radius:999px;
  background:var(--card-2,rgba(255,255,255,.03)); padding:2px; margin-right:4px;
  flex:0 0 auto;
}
.tn-fonttoggle .ft-opt{
  border:0; background:none; cursor:pointer;
  font-size:12px; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:999px;
  color:var(--text-muted,#7E9488);
}
.tn-fonttoggle .ft-opt[aria-pressed="true"]{
  background:var(--accent,#0C7A47); color:var(--on-accent,#04140C);
}
/* !important so each option always previews its own font, even though the
   global font-system override also targets buttons. */
.tn-fonttoggle .ft-opt[data-fs="quicksand"]{ font-family:'Quicksand',sans-serif !important; }
.tn-fonttoggle .ft-opt[data-fs="lexend"]{ font-family:'Lexend',sans-serif !important; }
@media (max-width:560px){ .tn-fonttoggle .ft-opt{ padding:6px 8px; } }