/* ═══════════════════════════════════════════════════════
   Tom's Place — Main Stylesheet
   All colors driven by CSS custom properties defined in tokens.css
   (loaded before this file). Two themes: dark (default) + light.
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, sans-serif;
  font-size: 11px;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

a { color: var(--c-link); text-decoration: none; font-weight: bold; }
a:hover { color: var(--c-link-hover); text-decoration: underline; }
h1 { font-size: 14pt; font-weight: bold; margin: 10px 0 2px; color: var(--c-text); }
h2 { font-size: 10pt; font-weight: bold; margin: 0; color: var(--c-text); }
h3 { font-size: 9pt; font-weight: bold; margin: 0 0 4px; color: var(--c-accent); }
p  { line-height: 1.45; margin: 0 0 8px; }

/* ── Color utilities (defined in CSS so they always work) ─ */
.text-tp-teal   { color: var(--c-accent) !important; }
.text-tp-muted  { color: var(--c-link)   !important; }
.text-tp-cyan   { color: var(--c-accent2)!important; }
.bg-tp-mid      { background: var(--c-surface) !important; }
.tp-gradient    { background: var(--c-bg) !important; }
.hover\:text-tp-teal:hover  { color: var(--c-accent) !important; }
.hover\:text-tp-muted:hover { color: var(--c-link)   !important; }
.hover\:border-tp-teal:hover{ border-color: var(--c-accent) !important; }

/* Theme-adaptive remap of fixed Tailwind text utilities. These were hardcoded
   light-greys for the old dark-only default and don't follow the theme, so they
   read as low-contrast on any theme they don't match. Map them to tokens.
   !important needed because the Tailwind CDN injects its rules after this file. */
.text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600 { color: var(--c-text-muted) !important; }
.text-slate-100, .text-slate-200 { color: var(--c-text) !important; }
.hover\:text-slate-100:hover, .hover\:text-slate-200:hover, .hover\:text-slate-300:hover { color: var(--c-text) !important; }

/* ── Community posts + threaded comments ────────────────── */
.cpost { display:flex; gap:10px; padding:14px; border:1px solid var(--c-card-border); border-radius:8px; background:var(--c-card-bg); margin-bottom:18px; }
.cpost-main { flex:1; min-width:0; }
.cpost-body { white-space:pre-wrap; margin-top:8px; font-size:13px; line-height:1.6; color:var(--c-text); }
.cmt-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin:18px 0 8px; color:var(--c-text-muted); }
.cmt-top-form { margin-bottom:14px; }
.cmt-top-form textarea, .cmt-reply textarea { width:100%; margin-bottom:6px; }
.cmt-list, .cmt-children { list-style:none; padding:0; margin:0; }
.cmt-children { margin-left:18px; border-left:2px solid var(--c-card-border); padding-left:12px; }
.cmt { margin:10px 0; }
.cmt-row { display:flex; gap:8px; }
.cmt-main { flex:1; min-width:0; }
.cmt-meta { font-size:10px; color:var(--c-text-dim); margin-bottom:2px; }
.cmt-text { white-space:pre-wrap; font-size:13px; line-height:1.5; color:var(--c-text); }
.cmt-reply { margin-top:4px; }
.cmt-reply summary { font-size:11px; color:var(--c-link); cursor:pointer; display:inline-block; }

.cmt-actions { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.report-btn { display:inline-block; margin-top:2px; }
.report-btn summary { font-size:11px; color:var(--c-text-dim); cursor:pointer; }
.report-btn form { margin-top:5px; display:flex; gap:6px; align-items:center; }
.report-btn input { flex:1; min-width:140px; }

/* ── Sitewide announcement banner ───────────────────────── */
.site-announce { padding:8px 16px; text-align:center; font-size:13px; font-weight:bold; }
.site-announce-info    { background:var(--c-accent-bg); color:var(--c-accent); border-bottom:1px solid var(--c-accent-border); }
.site-announce-warning { background:rgba(239,68,68,.14); color:#f87171; border-bottom:1px solid rgba(239,68,68,.35); }

/* ── Ranked items (feed + interest pages) ───────────────── */
.src-item-thumb img { width:96px; height:54px; object-fit:cover; border-radius:4px; display:block; }
.src-item-kind { font-size:10px; color:var(--c-accent); font-weight:bold; }
.isort { display:flex; gap:6px; margin:14px 0 10px; }
.isort a { font-size:12px; font-weight:bold; padding:4px 12px; border-radius:999px;
           border:1px solid var(--c-card-border); color:var(--c-text-muted); text-decoration:none; }
.isort a.active { background:var(--c-accent-bg); border-color:var(--c-accent-border); color:var(--c-accent); }

/* ── Component classes ──────────────────────────────────── */
.card {
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: 6px;
  transition: background .2s, border-color .2s;
}
.glow    { box-shadow: 0 0 18px var(--c-glow); }
.glow-sm { box-shadow: 0 0 10px var(--c-glow-sm); }

.btn-primary {
  display: inline-block;
  background: var(--c-btn-grad);
  color: var(--c-btn-text) !important;
  font-weight: bold; border: none; border-radius: 4px;
  padding: 5px 14px; cursor: pointer; font-size: 11px;
  text-decoration: none !important; line-height: 1.4;
  transition: opacity .18s, box-shadow .18s;
}
.btn-primary:hover { opacity: .86; box-shadow: 0 0 12px var(--c-glow); }

.btn-ghost {
  display: inline-block; background: transparent;
  color: var(--c-text-muted);
  border: 1px solid var(--c-accent-border); border-radius: 4px;
  padding: 5px 12px; cursor: pointer; font-size: 11px; font-weight: bold;
  text-decoration: none !important;
  transition: border-color .18s, background .18s, color .18s;
}
.btn-ghost:hover { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-text); }

/* ── Form elements ──────────────────────────────────────── */
input, textarea, select {
  background: var(--c-input-bg) !important;
  border: 1px solid var(--c-input-border) !important;
  color: var(--c-text) !important;
  border-radius: 4px; padding: 6px 10px;
  font-family: inherit; font-size: 11px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 7px var(--c-glow-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--c-text-dim) !important; }
textarea { resize: vertical; }

/* ── Scrollbar & Selection ──────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-scrollbar); border-radius: 3px; }
::selection { background: var(--c-selection); color: var(--c-text); }

/* ── Plyr ───────────────────────────────────────────────── */
.plyr--audio .plyr__controls { border-radius: 6px; }

/* ── Navigation ─────────────────────────────────────────── */
.tp-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-nav-bg);
  border-bottom: 1px solid var(--c-nav-border);
  box-shadow: 0 3px 12px var(--c-nav-shadow);
  backdrop-filter: blur(14px);
  transition: background .2s;
}
.tp-nav-inner {
  max-width: 980px; margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; height: 50px;
}
.tp-nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tp-nav-links a {
  color: var(--c-nav-link); font-size: 11px; font-weight: bold;
  padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--c-accent-border);
  transition: border-color .15s, background .15s, color .15s;
  text-decoration: none !important; position: relative;
}
.tp-nav-links a:hover { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-text); }
.nav-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--c-btn-grad); color: var(--c-btn-text);
  font-size: 8px; font-weight: bold; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.tp-nav-logout {
  color: var(--c-text-dim); font-size: 11px;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 5px 8px;
}
.tp-nav-logout:hover { color: var(--c-text); }

/* Theme toggle button */
.theme-toggle {
  background: none; border: 1px solid var(--c-accent-border); border-radius: 4px;
  color: var(--c-text-muted); font-size: 14px; line-height: 1;
  width: 30px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-text); }

/* Secondary subnav — classic 2000s social .navbar { background: #6699cc } */
.tp-subnav {
  background: var(--c-subnav-bg);
  border-bottom: 1px solid var(--c-subnav-border);
  transition: background .2s;
}
.tp-subnav-inner {
  max-width: 980px; margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; gap: 0; height: 26px; overflow-x: auto;
}
.tp-subnav a { color: var(--c-subnav-link); font-size: 10px; font-weight: bold; padding: 0 9px; white-space: nowrap; text-decoration: none; }
.tp-subnav a:hover { color: var(--c-accent); text-decoration: underline; }
.tp-subnav .pipe { color: var(--c-accent-border); font-size: 10px; }

/* Brand logo */
.tp-brand {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 22px; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--c-brand-start), var(--c-brand-end));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-decoration: none !important;
}

/* ── Page Layout ────────────────────────────────────────── */
.tp-page { max-width: 980px; margin: 20px auto; padding: 0 14px; }

/* ═══════════════════════════════════════════════════════
   PROFILE: Classic 2000s social 2-column layout
   ═══════════════════════════════════════════════════════ */
.profile-wrap {
  display: grid; grid-template-columns: 290px 1fr; gap: 0 18px; align-items: start;
}
.profile-sidebar { min-width: 0; }
.profile-main    { min-width: 0; }

.profile-avatar-block {
  display: grid; grid-template-columns: 155px 1fr;
  gap: 0 10px; margin-bottom: 10px; align-items: start;
}
.profile-pic {
  width: 155px; height: 155px; object-fit: cover;
  border-radius: 5px; border: 2px solid var(--c-accent-border); display: block; margin-top: 4px;
}
.profile-pic-placeholder {
  width: 155px; height: 155px; border-radius: 5px;
  border: 2px solid var(--c-accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: bold; color: var(--c-accent);
  background: var(--c-accent-bg); margin-top: 4px;
}
.profile-meta { font-size: 10px; color: var(--c-text-muted); line-height: 1.6; }
.profile-meta .mood { font-style: italic; color: var(--c-text); font-size: 11px; font-weight: bold; margin-bottom: 4px; }
.profile-online   { color: var(--c-online); font-size: 10px; }
.profile-lastseen { color: var(--c-text-dim); font-size: 10px; }

/* Contact box */
.contact-box { border: 2px solid var(--c-contact-border); border-radius: 5px; margin-bottom: 10px; overflow: hidden; }
.contact-box-header {
  background: var(--c-contact-hdr); border-bottom: 1px solid var(--c-accent-border);
  padding: 4px 10px; font-size: 9pt; font-weight: bold; color: var(--c-contact-hdr-text);
}
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 10px; }
.contact-action {
  display: flex; align-items: center; gap: 5px; font-size: 10px;
  color: var(--c-text-muted); padding: 4px 6px; border-radius: 3px;
  border: 1px solid var(--c-accent-border);
  transition: background .15s, color .15s; text-decoration: none !important;
}
.contact-action:hover { background: var(--c-accent-bg); color: var(--c-accent); }
.contact-action svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .75; }

/* Profile URL */
.profile-url-box {
  border: 1px solid var(--c-accent-border); border-radius: 4px;
  padding: 3px 8px; margin-bottom: 10px; font-size: 9px;
  color: var(--c-profile-url); font-family: monospace; background: var(--c-accent-bg);
}
.profile-url-box strong { color: var(--c-text-muted); }

/* Sidebar tables */
.sidebar-table {
  width: 100%; border: 2px solid var(--c-accent-border);
  border-collapse: separate; border-spacing: 2px;
  border-radius: 5px; overflow: hidden; margin-bottom: 10px;
}
.sidebar-table caption { text-align: left; }
.sidebar-table-h2 {
  background: var(--c-accent-bg); color: var(--c-accent);
  padding: 3px 10px; font-size: 9pt; font-weight: bold; text-align: left;
}
.sidebar-table th {
  background: var(--c-th-bg); color: var(--c-th-text); font-weight: bold;
  font-size: 10px; padding: 3px 6px; vertical-align: top; text-align: left; width: 32%;
}
.sidebar-table td {
  background: var(--c-td-bg); color: var(--c-td-text);
  font-size: 10px; padding: 3px 6px; vertical-align: top; line-height: 1.5;
}

/* Top friends in sidebar */
.top-friends-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 6px; }
.top-friend-item { text-align: center; }
.top-friend-item img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; border:1px solid var(--c-accent-border); display:block; }
.top-friend-item .ph { width:100%; aspect-ratio:1; border-radius:4px; border:1px solid var(--c-accent-border); display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:14px; color:var(--c-accent); background:var(--c-accent-bg); }
.top-friend-item figcaption { font-size:9px; color:var(--c-link); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Profile Main Column ──────────────────────────────── */

/* Network banner */
.network-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--c-accent-border); border-radius: 5px;
  background: var(--c-accent-bg); padding: 8px 14px; margin-bottom: 12px;
  font-size: 10pt; font-weight: bold; color: var(--c-accent);
}

/* Section headers — reference: #ffcc99 background, #FF6600 text */
.section-header {
  background: var(--c-section-bg); border-left: 4px solid var(--c-section-border);
  padding: 4px 12px; margin-bottom: 8px;
}
.section-header h2 { color: var(--c-section-text); font-size: 9pt; }

.profile-blog { margin: 0 0 14px; padding: 0 8px; font-size: 10px; line-height: 1.9; }

.blurbs-section { margin-bottom: 14px; }
.blurbs-section h3 { color: var(--c-section-text); font-size: 9pt; margin: 8px 0 2px 12px; }
.blurbs-section p  { margin: 0 10px 10px 12px; font-size: 10px; color: var(--c-td-text); line-height: 1.5; }

/* Friend Space */
.friend-space-section { margin-bottom: 14px; }
.friend-count { margin: 0 0 8px 12px; font-size: 10px; }
.friend-count strong { color: var(--c-accent); font-size: 11px; }
.friend-space-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 0 8px; }
.friend-space-grid figure { margin: 0; text-align: center; }
.friend-space-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; border:1px solid var(--c-accent-border); display:block; }
.friend-space-grid .ph { width:100%; aspect-ratio:1; border-radius:4px; border:1px solid var(--c-accent-border); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:bold; color:var(--c-accent); background:var(--c-accent-bg); }
.friend-space-grid figcaption { font-size:9px; color:var(--c-link); margin-top:3px; }
.friend-space-link { text-align:right; padding-right:10px; margin:6px 0 10px; font-size:10px; }

/* Comment wall */
.comment-wall-section { margin-bottom: 14px; }
.comment-counter { margin: 0 0 6px 12px; font-size: 10px; color: var(--c-text-muted); }
.comment-counter strong { color: var(--c-accent); }
.comment-table { width:96%; margin:0 auto 8px; border-collapse:collapse; }
.comment-table th { background:var(--c-comment-th); border:1px solid var(--c-accent-border); width:88px; padding:6px; vertical-align:top; text-align:center; }
.comment-table td { background:var(--c-comment-td); border:1px solid var(--c-card-border); padding:6px 10px; vertical-align:top; }
.comment-table figcaption { font-size:9px; color:var(--c-link); margin-top:3px; }
.comment-table figure { margin:0; }
.comment-table img { width:64px; height:64px; object-fit:cover; border-radius:3px; }
.comment-table .ph { width:64px; height:64px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold; color:var(--c-accent); background:var(--c-accent-bg); border:1px solid var(--c-accent-border); }
.comment-date { font-size:9pt; font-weight:bold; color:var(--c-text-muted); margin:0 0 4px; }
.comment-text { font-size:10px; color:var(--c-td-text); line-height:1.5; font-weight:normal; }
.comment-delete-btn { font-size:9px; color:var(--c-text-dim); background:none; border:none; cursor:pointer; float:right; padding:0; }
.comment-delete-btn:hover { color:#f87171; }
.comment-form { padding:8px 12px; }
.comment-form textarea { width:100%; min-height:60px; margin-bottom:6px; }
.add-comment-link { text-align:right; padding-right:12px; font-size:10px; }

/* ── General pages ──────────────────────────────────────── */
.tp-card { background:var(--c-card-bg); border:1px solid var(--c-card-border); border-radius:6px; margin-bottom:12px; overflow:hidden; transition:background .2s, border-color .2s; }
.tp-card-header { background:var(--c-section-bg); border-bottom:1px solid var(--c-accent-border); padding:5px 14px; }
.tp-card-header h2 { color:var(--c-section-text); font-size:9pt; }
.tp-card-body { padding:10px 14px; }

.badge { display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 4px; background:var(--c-btn-grad); color:var(--c-btn-text); font-size:9px; font-weight:bold; border-radius:999px; }

.msg-sent { background:var(--c-btn-grad); color:var(--c-btn-text); border-radius:1rem 1rem .2rem 1rem; padding:8px 12px; font-size:11px; }
.msg-recv { background:var(--c-card-bg); border:1px solid var(--c-card-border); color:var(--c-text); border-radius:1rem 1rem 1rem .2rem; padding:8px 12px; font-size:11px; }

.blog-body { line-height:1.75; font-size:11px; }
.blog-body p { margin-bottom:.9em; color:var(--c-td-text); }
.blog-body h2, .blog-body h3 { color:var(--c-accent); margin:1.2em 0 .5em; }
.blog-body a { color:var(--c-link); text-decoration:underline; }
.blog-body blockquote { border-left:3px solid var(--c-accent); padding-left:1em; color:var(--c-text-dim); margin:1em 0; }

/* ── Footer ─────────────────────────────────────────────── */
.tp-footer { border-top:1px solid var(--c-card-border); padding:16px 14px; margin-top:32px; transition:border-color .2s; }
.tp-footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; list-style:none; margin:0 0 8px; padding:0; }
.tp-footer-links a { font-size:9px; font-weight:normal; color:var(--c-text-dim); }
.tp-footer-links a:hover { color:var(--c-link); }
.tp-footer small { display:block; text-align:center; color:var(--c-text-dim); font-size:9px; }

/* ── Admin Panel ─────────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:190px 1fr; min-height:calc(100vh - 52px); }
.admin-sidebar { background:var(--c-surface); border-right:1px solid var(--c-card-border); padding:16px 0; }
.admin-section-label { padding:0 14px 10px; font-size:9px; color:var(--c-text-dim); text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--c-card-border); margin-bottom:8px; }
.admin-sidebar a { display:block; padding:7px 16px; font-size:11px; color:var(--c-text-muted); font-weight:bold; text-decoration:none; transition:background .15s, color .15s; }
.admin-sidebar a:hover, .admin-sidebar a.active { background:var(--c-accent-bg); color:var(--c-accent); }
.admin-main { padding:24px; }
.admin-main h1 { font-size:18px; margin:0 0 20px; color:var(--c-text); border-bottom:1px solid var(--c-accent-border); padding-bottom:10px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--c-accent-bg); border:1px solid var(--c-accent-border); border-radius:8px; padding:14px 16px; }
.stat-card .stat-value { font-size:28px; font-weight:bold; color:var(--c-accent); line-height:1; }
.stat-card .stat-label { font-size:10px; color:var(--c-text-muted); margin-top:4px; }
.admin-table { width:100%; border-collapse:collapse; font-size:11px; }
.admin-table th { background:var(--c-th-bg); color:var(--c-th-text); font-weight:bold; padding:7px 10px; text-align:left; border-bottom:1px solid var(--c-accent-border); }
.admin-table td { padding:7px 10px; border-bottom:1px solid var(--c-card-border); color:var(--c-td-text); vertical-align:middle; }
.admin-table tr:hover td { background:var(--c-accent-bg); }
.badge-ban   { background:rgba(239,68,68,.15);  color:#f87171; border:1px solid rgba(239,68,68,.3);  border-radius:4px; padding:2px 7px; font-size:10px; }
.badge-ok    { background:var(--c-accent-bg);   color:var(--c-accent); border:1px solid var(--c-accent-border); border-radius:4px; padding:2px 7px; font-size:10px; }
.badge-admin { background:rgba(0,179,255,.12);  color:#00b3ff; border:1px solid rgba(0,179,255,.3);  border-radius:4px; padding:2px 7px; font-size:10px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:680px) {
  .profile-wrap { grid-template-columns:1fr; }
  .profile-avatar-block { grid-template-columns:110px 1fr; }
  .profile-pic, .profile-pic-placeholder { width:110px; height:110px; }
  .friend-space-grid { grid-template-columns:repeat(2,1fr); }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { border-right:none; border-bottom:1px solid var(--c-card-border); }
}

/* ── Impersonation Banner ────────────────────────────────── */
.impersonation-banner {
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .02em;
  border-bottom: 2px solid #92400e;
  position: sticky;
  top: 0;
  z-index: 60; /* above tp-nav at z-index 50 */
}
.impersonation-banner a,
.impersonation-banner button {
  color: #fff !important;
  text-decoration: underline;
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  font-weight: bold;
  transition: background .15s;
}
.impersonation-banner a:hover,
.impersonation-banner button:hover {
  background: rgba(255,255,255,.18);
  text-decoration: none;
}
/* Shift sticky nav down so it sits below the sticky banner */
body:has(.impersonation-banner) .tp-nav {
  top: 38px;
}

/* ── System account badge (admin panel + profiles) ───────── */
.badge-system {
  background: rgba(139,92,246,.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: bold;
}
/* Small inline indicator shown on profile pages */
.system-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: rgba(167,139,250,.7);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Tom's Tube (video) ─────────────────────────────────── */
.tv-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.tv-h1 { font-size:20px; margin:0; color:var(--c-text); }
.tv-empty { color:var(--c-text-muted); }
.tv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.tv-card { display:block; color:inherit; }
.tv-thumb {
  position:relative; aspect-ratio:16/9; background:var(--c-card-bg);
  border:1px solid var(--c-card-border); border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tv-thumb img { width:100%; height:100%; object-fit:cover; }
.tv-thumb-ph { font-size:36px; color:var(--c-text-dim); }
.tv-dur { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.8); color:#fff; font-size:11px; padding:1px 5px; border-radius:3px; }
.tv-status { position:absolute; top:6px; left:6px; font-size:10px; text-transform:uppercase; padding:2px 6px; border-radius:3px; background:var(--c-accent-bg); color:var(--c-accent); }
.tv-status-failed { background:rgba(220,38,38,.2); color:#f87171; }
.tv-card-title { font-size:14px; color:var(--c-text); margin-top:6px; }
.tv-card-sub { font-size:12px; color:var(--c-text-muted); }

/* Watch — 2000s-YouTube bordered player box */
.tv-watch { max-width:860px; margin:0 auto; }
.tv-stage { border:1px solid var(--c-accent-border); border-radius:8px; padding:10px; background:var(--c-surface); box-shadow:0 0 18px var(--c-glow-sm); }
.tv-player { width:100%; aspect-ratio:16/9; background:#000; border-radius:4px; display:block; }
.tv-processing { aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--c-text-muted); }
.tv-spinner { width:40px; height:40px; border:4px solid var(--c-card-border); border-top-color:var(--c-accent); border-radius:50%; animation:tv-spin 1s linear infinite; }
@keyframes tv-spin { to { transform:rotate(360deg); } }
.tv-info { margin-top:14px; }
.tv-watch-title { font-size:20px; margin:0 0 6px; }
.tv-watch-meta { color:var(--c-text-muted); font-size:13px; display:flex; gap:8px; margin-bottom:10px; }
.tv-watch-desc { white-space:pre-wrap; color:var(--c-td-text); }

/* Upload form */
.tv-form-wrap { max-width:560px; margin:0 auto; }
.tv-form { display:flex; flex-direction:column; gap:14px; }
.tv-form label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--c-text-muted); }
.tv-form input, .tv-form textarea { background:var(--c-input-bg); border:1px solid var(--c-input-border); color:var(--c-text); border-radius:5px; padding:9px; }
.tv-hint { color:var(--c-text-dim); font-size:12px; margin-top:14px; }
.tv-error { background:rgba(220,38,38,.15); border:1px solid rgba(220,38,38,.4); color:#f87171; padding:10px; border-radius:5px; margin-bottom:14px; }

/* ── Shorts + homepage loop ─────────────────────────────── */
.tv-kind { border:1px solid var(--c-input-border); border-radius:5px; padding:8px 10px; }
.tv-kind legend { font-size:12px; color:var(--c-text-muted); padding:0 4px; }
.tv-kind-opt { display:block; font-size:12px; color:var(--c-text); margin:3px 0; }
.tv-kind-hint { color:var(--c-text-dim); }
.tv-player-short { max-width:380px; margin:0 auto; aspect-ratio:9/16; }
.tv-badge-short { display:inline-block; font-size:10px; font-weight:bold; letter-spacing:.04em; background:var(--c-accent-bg); color:var(--c-accent); border:1px solid var(--c-accent-border); border-radius:3px; padding:2px 6px; }
.tv-pin { margin-top:12px; display:flex; align-items:center; gap:10px; }
.tv-pin-on { color:var(--c-accent); font-size:12px; }

/* Vine-style vertical feed */
.tv-shorts-feed { display:flex; flex-direction:column; align-items:center; gap:26px; }
.tv-short { width:100%; max-width:380px; }
.tv-short-player { width:100%; aspect-ratio:9/16; background:#000; border:1px solid var(--c-accent-border); border-radius:8px; box-shadow:0 0 14px var(--c-glow-sm); display:block; }
.tv-short-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px; }
.tv-short-title { font-size:13px; color:var(--c-text); }
.tv-short-owner { font-size:12px; color:var(--c-text-muted); }

/* Looping short on the profile sidebar */
.profile-loop { margin-bottom:10px; }
.profile-loop-player { width:100%; aspect-ratio:9/16; max-height:280px; object-fit:cover; background:#000; border:1px solid var(--c-accent-border); border-radius:6px; box-shadow:0 0 12px var(--c-glow-sm); display:block; }
.profile-loop-cap { display:block; text-align:center; font-size:10px; margin-top:3px; color:var(--c-accent); }

/* ── Playlists ──────────────────────────────────────────── */
.tv-pl-actions { display:flex; align-items:center; gap:8px; }
.tv-pl-create { display:flex; gap:8px; margin-bottom:16px; }
.tv-pl-create input { flex:1; }

/* Watch two-column layout when a playlist is active */
.tv-watch-pl { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; max-width:1000px; }
@media (max-width:760px){ .tv-watch-pl { grid-template-columns:1fr; } }
.tv-main { min-width:0; }

/* Add-to-playlist control on watch */
.tv-addpl { margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tv-addpl-form, .tv-addpl-new { display:flex; gap:6px; align-items:center; }

/* 2000s-YouTube up-next sidebar */
.tv-playlist { border:1px solid var(--c-accent-border); border-radius:8px; background:var(--c-surface); overflow:hidden; }
.tv-pl-head { padding:10px 12px; background:var(--c-section-bg); border-bottom:1px solid var(--c-accent-border); }
.tv-pl-title { font-weight:bold; font-size:12px; color:var(--c-section-text); }
.tv-pl-sub { font-size:10px; color:var(--c-text-muted); }
.tv-pl-list { list-style:none; margin:0; padding:0; max-height:460px; overflow-y:auto; }
.tv-pl-item a { display:flex; align-items:center; gap:8px; padding:6px 10px; color:var(--c-text-muted); border-bottom:1px solid var(--c-card-border); }
.tv-pl-item a:hover { background:var(--c-accent-bg); text-decoration:none; }
.tv-pl-current { background:var(--c-accent-bg); }
.tv-pl-current a { color:var(--c-text); }
.tv-pl-idx { width:16px; text-align:center; font-size:10px; color:var(--c-text-dim); flex-shrink:0; }
.tv-pl-thumb { width:64px; height:36px; flex-shrink:0; background:var(--c-card-bg); border-radius:3px; overflow:hidden; display:block; }
.tv-pl-thumb img { width:100%; height:100%; object-fit:cover; }
.tv-pl-vt { font-size:11px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Playlist page rows */
.tv-pl-rows { list-style:none; margin:0; padding:0; max-width:760px; }
.tv-pl-row { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--c-card-border); }
.tv-pl-row-link { display:flex; align-items:center; gap:10px; padding:8px 4px; flex:1; color:var(--c-text); min-width:0; }
.tv-pl-row-link:hover { text-decoration:none; color:var(--c-link-hover); }
.tv-pl-row .tv-pl-thumb { width:88px; height:50px; }
.tv-pl-remove { padding:2px 8px; }
.tv-pl-rowctl { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.tv-pl-move { padding:2px 7px; }
.tv-pl-move[disabled] { opacity:.3; cursor:default; }

/* ── Unified vote widget ────────────────────────────────── */
.vote { display:inline-flex; align-items:center; gap:4px; }
.tv-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.vote-f { display:inline; margin:0; }
.vote-arrow {
  background:none; border:1px solid var(--c-accent-border); border-radius:4px;
  color:var(--c-text-muted); font-size:11px; line-height:1; width:24px; height:22px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s, color .15s;
}
.vote-arrow:hover { border-color:var(--c-accent); background:var(--c-accent-bg); color:var(--c-text); }
.vote-up.voted { color:var(--c-online); border-color:var(--c-online); background:rgba(74,222,128,.12); }
.vote-down.voted { color:#f87171; border-color:#f87171; background:rgba(248,113,113,.12); }
.vote-static { cursor:default; opacity:.5; }
.vote-static:hover { border-color:var(--c-accent-border); background:none; color:var(--c-text-muted); }
.vote-score { min-width:18px; text-align:center; font-size:12px; font-weight:bold; color:var(--c-text-muted); }
.vote-score.pos { color:var(--c-online); }
.vote-score.neg { color:#f87171; }
.profile-featured { margin-bottom:14px; }
.profile-featured > p strong { color:var(--c-accent); font-size:11px; }
.profile-featured-cap { text-align:center; font-size:11px; margin-top:4px; }
.profile-embed { width:100%; height:120px; border:0; border-radius:4px; background:var(--c-card-bg); }

/* ── Sources (external feed shell pages) ────────────────── */
.src-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.src-card { display:flex; align-items:center; gap:12px; padding:12px; background:var(--c-card-bg); border:1px solid var(--c-card-border); border-radius:8px; color:inherit; }
.src-card:hover { border-color:var(--c-accent); text-decoration:none; }
.src-card-ic { font-size:26px; flex-shrink:0; }
.src-card-name { font-size:13px; color:var(--c-text); font-weight:bold; }
.src-card-sub { font-size:11px; color:var(--c-text-muted); text-transform:capitalize; }

.src-header { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--c-card-border); }
.src-desc { font-size:12px; color:var(--c-td-text); margin:8px 0; }
.src-shell { color:var(--c-text-dim); font-style:italic; }

.src-items { list-style:none; margin:0; padding:0; max-width:760px; }
.src-item { display:flex; gap:12px; padding:12px 4px; border-bottom:1px solid var(--c-card-border); }
.src-item-vote { flex-shrink:0; }
.src-item-body { min-width:0; flex:1; }
.src-item-title { font-size:14px; color:var(--c-link); font-weight:bold; }
.src-item-date { font-size:11px; color:var(--c-text-dim); margin-top:2px; }
.src-audio { width:100%; max-width:420px; height:34px; margin-top:8px; display:block; }
.src-item-sum { font-size:12px; color:var(--c-text-muted); margin-top:6px; line-height:1.5; max-height:6em; overflow:hidden; }

.src-import { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.src-import input[name="feed_url"] { flex:1; min-width:240px; }
.src-admin-table { width:100%; border-collapse:collapse; margin-top:14px; font-size:12px; }
.src-admin-table th, .src-admin-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--c-card-border); }
.src-admin-actions { display:flex; gap:4px; }

/* ── Shell (auto-generated creator) accounts ────────────── */
.shell-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--c-accent-bg); border:1px solid var(--c-accent-border); border-radius:6px;
  padding:9px 12px; margin-bottom:12px; font-size:11px; color:var(--c-text);
}
.profile-feed { margin-bottom:12px; }
.profile-feed > p strong { color:var(--c-accent); }
.profile-feed-list { list-style:none; margin:4px 0 0; padding:0; }
.profile-feed-list li { font-size:11px; padding:3px 0; border-bottom:1px solid var(--c-card-border); display:flex; justify-content:space-between; gap:8px; }
.profile-feed-date { color:var(--c-text-dim); flex-shrink:0; }

/* ── Locked profile + signup wizard ─────────────────────── */
.locked-profile { text-align:center; max-width:420px; margin:48px auto; }
.locked-avatar { width:120px; height:120px; border-radius:8px; object-fit:cover; border:2px solid var(--c-accent-border); }
.locked-ph { display:flex; align-items:center; justify-content:center; font-size:46px; background:var(--c-card-bg); color:var(--c-text-dim); margin:0 auto; }
.locked-profile h1 { margin:14px 0 4px; }
.locked-msg { color:var(--c-text-muted); margin:10px 0 16px; }
.welcome-wiz .wiz-opt { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--c-input-border); border-radius:6px; cursor:pointer; font-size:12px; color:var(--c-text-muted); }
.welcome-wiz .wiz-opt:hover { border-color:var(--c-accent); }
.welcome-wiz .wiz-opt strong { color:var(--c-accent); }

/* ── Danger zone (account deletion) ─────────────────────── */
.danger-zone { margin-top:22px; padding:14px; border:1px solid rgba(239,68,68,.35); border-radius:6px; background:rgba(239,68,68,.05); }
.danger-zone h3 { color:#f87171; margin:0 0 4px; }
.danger-zone p { font-size:11px; color:var(--c-text-muted); margin:0 0 8px; }
.danger-zone form { display:flex; gap:8px; flex-wrap:wrap; }
.danger-btn { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#f87171; border-radius:4px; padding:6px 14px; cursor:pointer; font-size:11px; font-weight:bold; }
.danger-btn:hover { background:rgba(239,68,68,.22); }

/* ── Nav redesign: left group + account cluster + avatar dropdown ── */
.tp-nav-left { display:flex; align-items:center; gap:14px; min-width:0; }
.tp-account { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-icon { position:relative; font-size:15px; line-height:1; padding:4px 6px; border-radius:4px; text-decoration:none; }
.nav-icon:hover { background:var(--c-accent-bg); }
.tp-avatar-wrap { position:relative; }
.tp-avatar-btn { background:none; border:none; padding:0; cursor:pointer; display:flex; }
.tp-avatar { width:28px; height:28px; border-radius:5px; object-fit:cover; border:1px solid var(--c-accent-border); display:block; }
.tp-avatar-ph { display:flex; align-items:center; justify-content:center; background:var(--c-accent-bg); color:var(--c-accent); font-weight:bold; font-size:13px; }
.tp-dropdown { position:absolute; right:0; top:38px; min-width:172px; background:var(--c-nav-bg); border:1px solid var(--c-accent-border); border-radius:6px; box-shadow:0 6px 18px var(--c-nav-shadow); padding:5px; z-index:60; }
.tp-dropdown-name { font-size:11px; font-weight:bold; color:var(--c-text); padding:6px 8px; border-bottom:1px solid var(--c-card-border); margin-bottom:4px; }
.tp-dropdown a, .tp-dropdown button { display:block; width:100%; text-align:left; padding:6px 8px; font-size:11px; color:var(--c-nav-link); background:none; border:none; cursor:pointer; border-radius:4px; font-family:inherit; text-decoration:none; }
.tp-dropdown a:hover, .tp-dropdown button:hover { background:var(--c-accent-bg); color:var(--c-text); }
.tp-dd-admin { color:#00b3ff !important; }
.nav-customize { display:flex; flex-direction:column; gap:8px; }
.nav-customize-opt { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--c-text); }
/* ── Tags ───────────────────────────────────────────────── */
.tag-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.tag-chip { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--c-accent-bg); border:1px solid var(--c-accent-border); color:var(--c-accent); }
.tag-chip:hover { background:var(--c-accent-border); text-decoration:none; }

/* ── Admin tools hub ────────────────────────────────────── */
.admin-tools { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px; }
.admin-tools a, .admin-tool-soon { font-size:12px; padding:8px 12px; border-radius:6px; border:1px solid var(--c-accent-border); background:var(--c-accent-bg); color:var(--c-accent); text-decoration:none; }
.admin-tools a:hover { background:var(--c-accent-border); color:var(--c-text); }
.admin-tool-soon { opacity:.5; color:var(--c-text-muted); border-color:var(--c-card-border); background:var(--c-card-bg); }