/* Creators by tripaulx — design tokens ported from tripaulx_os (dark theme). No build step. */
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/InterVariable-Italic.woff2') format('woff2-variations');
}
:root {
  /* tripaulx brand ramp (OKLCH, theme-independent) */
  --tx-cyan:oklch(85.5% 0.130 215);      /* blue-400 (anchor #2FE9FF) */
  --tx-cyan-soft:oklch(88.5% 0.110 215); /* blue-300 */
  --tx-violet:oklch(63% 0.185 280);      /* violet-400 (#655AD4) */
  --tx-red:oklch(70% 0.205 27);          /* red-400 (#F53C3B) */

  /* DARK theme (default) — gradients reference --blue/--purple so they follow the theme */
  --bg:oklch(0% 0 0); --surface:oklch(13% 0 0); --elevated:oklch(17% 0 0); --elevated2:oklch(19% 0 0);
  --border:oklch(22% 0 0); --border2:oklch(28% 0 0);
  --text:oklch(97% 0 0); --muted:oklch(68% 0 0); --faint:oklch(50% 0 0);
  --blue:var(--tx-cyan); --purple:var(--tx-violet); --pink:var(--tx-violet); --grad3:var(--tx-cyan-soft);
  --ok:oklch(88% 0.240 145); --warn:oklch(93.5% 0.160 102); --danger:var(--tx-red);
  --grad:linear-gradient(90deg,var(--blue),var(--purple),var(--grad3));
  --grad-btn:linear-gradient(90deg,var(--blue),var(--purple));
  --radius:20px; --radius-sm:14px;
}
[data-theme="light"] {
  /* tripaulx light theme: warm cream canvas, white surfaces, darker brand for contrast */
  --bg:hsl(33 69% 97%); --surface:#ffffff; --elevated:#ffffff; --elevated2:oklch(93.9% 0.011 77);
  --border:oklch(91.5% 0.011 77); --border2:oklch(86.6% 0.010 73);
  --text:oklch(17.7% 0.004 264); --muted:oklch(52% 0.008 68); --faint:oklch(72% 0.010 78);
  --blue:oklch(50% 0.13 212); --purple:oklch(48% 0.20 280); --pink:oklch(48% 0.20 280); --grad3:oklch(63% 0.14 213);
  --ok:oklch(62% 0.18 150); --warn:oklch(68% 0.14 90); --danger:oklch(51% 0.20 27);
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in oklch, var(--tx-violet) 16%, transparent), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, color-mix(in oklch, var(--tx-cyan) 12%, transparent), transparent 55%),
    var(--bg);
  color:var(--text); min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.45;
  font-feature-settings:'cv11','ss01','ss03';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:var(--blue); text-decoration:none; }
.hidden { display:none !important; }
.muted { color:var(--muted); }

/* layout */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; padding:14px 24px;
  background:color-mix(in oklch, var(--bg) 72%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); }
.logo { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-weight:700; font-size:15px; color:var(--text); letter-spacing:.01em; }
.logo .logo-mark { width:22px; height:22px; flex:none; }
.logo .logo-text b { font-weight:700; color:var(--muted); }
.nav { display:flex; gap:8px; align-items:center; }
.nav a { color:var(--muted); padding:8px 12px; border-radius:999px; font-weight:600; cursor:pointer; }
.nav a:hover { color:var(--text); background:var(--surface); }
.wrap { max-width:1240px; margin:0 auto; padding:28px 24px 80px; }

/* buttons */
.btn { border:0; border-radius:999px; padding:13px 22px; font-size:14px; font-weight:700;
  color:#fff; cursor:pointer; background:var(--grad-btn); transition:transform .08s, opacity .2s; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:default; transform:none; }
.btn.ghost { background:var(--elevated); border:1px solid var(--border2); color:var(--text); }
.btn.sm { padding:8px 14px; font-size:13px; }

/* hero */
.hero { padding:40px 0 8px; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero h1 { font-size:34px; margin:12px 0 6px; line-height:1.1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); margin:0 0 24px; max-width:560px; }
.searchbar { display:flex; gap:12px; flex-wrap:wrap; }
.searchbar input { flex:1; min-width:260px; background:var(--surface); border:1px solid var(--border);
  color:var(--text); border-radius:999px; padding:15px 22px; font-size:16px; outline:none; }
.searchbar input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.status { margin-top:16px; min-height:20px; color:var(--muted); font-size:13px; }
.status.err { color:var(--danger); }

/* wizard */
.segmented { display:inline-flex; gap:4px; padding:4px; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px; flex-wrap:wrap; }
.seg { border:0; background:transparent; color:var(--muted); font-weight:600; font-size:14px;
  padding:9px 18px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.seg.active { color:#fff; background:var(--grad-btn); }
.seg .tag { font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(255,255,255,.18); padding:2px 7px; border-radius:999px; }
.seg.active .tag { background:rgba(0,0,0,.25); }
.wizard-panel { max-width:720px; }
.hint { font-size:12px; margin-top:10px; }
textarea { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:14px 16px; font-size:14px; font-family:inherit; outline:none; resize:vertical; }
textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.dropzone { display:block; border:1.5px dashed var(--border2); border-radius:16px; padding:28px;
  text-align:center; cursor:pointer; background:var(--surface); transition:border-color .2s, background .2s; }
.dropzone:hover, .dropzone.drag { border-color:var(--purple); background:var(--elevated); }
.dropzone #csvLabel { font-weight:700; font-size:15px; margin-bottom:6px; }

/* engagement tooltip */
.info { display:inline-grid; place-items:center; width:15px; height:15px; margin-left:6px;
  border-radius:50%; border:1px solid var(--border2); color:var(--muted); font-size:10px;
  cursor:help; vertical-align:middle; }
.info:hover { color:var(--text); border-color:var(--blue); }

/* custom hover tooltip (reliable, instant — replaces native title) */
[data-tip] { position:relative; }
[data-tip]:hover::after {
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%); width:max-content; max-width:260px; white-space:normal;
  text-align:left; background:var(--elevated2); color:var(--text);
  border:1px solid var(--border2); border-radius:10px; padding:9px 11px;
  font-size:12px; font-weight:500; line-height:1.45; letter-spacing:normal; text-transform:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45); z-index:60; pointer-events:none; }
[data-tip]:hover::before {
  content:""; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--border2); z-index:60; pointer-events:none; }

/* top post card */
.topcard { display:flex; gap:18px; align-items:stretch; }
.topcard .tc-thumb { width:150px; min-width:150px; aspect-ratio:1/1; border-radius:14px;
  overflow:hidden; position:relative;
  background:linear-gradient(135deg, color-mix(in oklch, var(--tx-violet) 45%, transparent), color-mix(in oklch, var(--tx-cyan) 30%, transparent) 60%, color-mix(in oklch, var(--tx-cyan-soft) 22%, transparent)); }
.topcard .tc-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.topcard .tc-body { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.topcard .tc-score { font-size:30px; font-weight:800; }
.topcard .tc-cap { color:#cbd2dd; font-size:13px; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; }
.topcard .tc-stats { display:flex; gap:18px; color:var(--muted); font-size:13px; flex-wrap:wrap; }

/* cards & grids */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:0 10px 34px rgba(0,0,0,.28); }
.section-title { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  margin:38px 4px 14px; display:flex; align-items:center; gap:10px; }
.section-title::after { content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--border2), transparent); }
.grid { display:grid; gap:14px; }
.kpis { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.charts { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.highlights { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.posts { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

.kpi .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.kpi .value { font-size:26px; font-weight:800; margin-top:6px; }
.kpi .sub { color:var(--faint); font-size:12px; margin-top:2px; }

/* profile header */
.phead { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.phead .avatar { width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border2); background:var(--elevated); }
.phead .name { font-size:22px; font-weight:800; display:flex; align-items:center; gap:8px; }
.verified { color:var(--blue); font-size:16px; }
.phead .handle { color:var(--muted); }
.phead .bio { margin-top:8px; max-width:560px; color:#cbd2dd; font-size:13px; }
.pstats { display:flex; gap:22px; margin-left:auto; text-align:center; flex-wrap:wrap; }
.pstats .n { font-size:20px; font-weight:800; }
.pstats .l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }

/* score */
.scorewrap { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.ring { --p:0; width:128px; height:128px; border-radius:50%; flex:none;
  background:conic-gradient(from -90deg, var(--blue), var(--purple) calc(var(--p)*1%), color-mix(in oklch, var(--text) 8%, transparent) 0);
  display:grid; place-items:center; box-shadow:0 0 34px color-mix(in oklch, var(--purple) 32%, transparent); }
.kpi { transition:transform .1s ease, border-color .2s ease; }
.kpi:hover { transform:translateY(-2px); border-color:var(--border2); }
.ring .inner { width:92px; height:92px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; text-align:center; }
.ring .big { font-size:28px; font-weight:800; }
.ring .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.subscores { flex:1; min-width:240px; }
.bar { margin:10px 0; }
.bar .row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:5px; }
.bar .track { height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar .fill { height:100%; border-radius:999px; background:var(--grad-btn); }

/* chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background:var(--elevated); border:1px solid var(--border2); border-radius:999px;
  padding:7px 13px; font-size:13px; }
.chip b { color:var(--muted); font-weight:600; margin-left:6px; }
.chip.brand { border-color:color-mix(in oklch, var(--tx-violet) 45%, transparent); }
.chip.mention-chip { cursor:pointer; transition:border-color .15s, color .15s, transform .08s; }
.chip.mention-chip:hover { border-color:var(--purple); color:#fff; transform:translateY(-1px); }
.chip.mention-chip::after { content:" ↗"; color:var(--muted); font-size:11px; }

/* charts (pure CSS bars) */
.hbar { display:grid; grid-template-columns:96px 1fr 44px; gap:10px; align-items:center; margin:9px 0; }
.hbar .k { color:var(--muted); font-size:12px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar .t { height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.hbar .f { height:100%; background:var(--grad-btn); border-radius:999px; }
.hbar .v { font-size:12px; font-weight:700; text-align:right; }
.cols { display:flex; align-items:stretch; gap:3px; height:140px; padding-top:8px; }
.cols .col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.cols .col .bw { flex:1; width:100%; display:flex; align-items:flex-end; }
.cols .col .b { width:100%; border-radius:4px 4px 0 0; background:var(--grad-btn); min-height:3px; }
.cols .col .h { font-size:9px; color:var(--faint); }

/* post cards */
.post { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .1s ease, border-color .2s ease, box-shadow .2s ease; }
.post:hover { transform:translateY(-3px); border-color:var(--border2);
  box-shadow:0 14px 34px rgba(0,0,0,.35); }
.post .thumb { aspect-ratio:1/1; position:relative;
  background:linear-gradient(135deg, color-mix(in oklch, var(--tx-violet) 45%, transparent), color-mix(in oklch, var(--tx-cyan) 30%, transparent) 60%, color-mix(in oklch, var(--tx-cyan-soft) 22%, transparent)); }
.post .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post .badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.7);
  border:1px solid var(--border2); border-radius:999px; padding:3px 9px; font-size:11px; }
.post .score { position:absolute; top:8px; right:8px; background:var(--grad-btn);
  border-radius:999px; padding:3px 9px; font-size:11px; font-weight:800; }
.post .body { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post .cap { font-size:12px; color:#cbd2dd; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; min-height:34px; }
.post .stats { display:flex; gap:12px; color:var(--muted); font-size:12px; }
.post .date { color:var(--faint); font-size:11px; }
.post .body .row-between { margin-top:auto; }

/* profile header extras */
.phead-main { flex:1; min-width:0; }
.badge-private { font-size:11px; padding:3px 9px; border-radius:999px;
  background:rgba(245,158,11,.15); color:var(--warn); border:1px solid rgba(245,158,11,.3); }
.badge-admin { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 9px; border-radius:999px; color:var(--text);
  background:color-mix(in oklch, var(--purple) 22%, transparent);
  border:1px solid color-mix(in oklch, var(--purple) 45%, transparent); }
.collected { font-size:12px; margin-top:10px; }

/* content sections grid */
.sections { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:14px; }

/* base-of-profiles list (home) */
.base-list { display:flex; flex-direction:column; }
.base-row { display:flex; align-items:center; gap:14px; padding:12px 6px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.base-row:last-child { border-bottom:0; }
.base-row:hover { background:var(--elevated); }
.avatar-sm { position:relative; width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; border:1px solid var(--border2);
  background:linear-gradient(135deg, color-mix(in oklch, var(--tx-violet) 50%, transparent), color-mix(in oklch, var(--tx-cyan) 35%, transparent)); }
.avatar-sm img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.avatar-sm .avatar-fallback { font-weight:800; font-size:16px; color:#fff; }
.base-info { flex:1; min-width:0; }
.base-name { font-weight:700; font-size:15px; }
.base-meta { font-size:12px; margin-top:2px; }
.base-row .base-open { flex:none; }

/* mini score ring (matches the profile ring, compact) */
.mini-ring { --p:0; width:46px; height:46px; border-radius:50%; flex:none;
  background:conic-gradient(from -90deg, var(--blue), var(--purple) calc(var(--p)*1%), color-mix(in oklch, var(--text) 8%, transparent) 0);
  display:grid; place-items:center; }
.mini-ring.empty { background:color-mix(in oklch, var(--text) 8%, transparent); }
.mini-ring .inner { width:36px; height:36px; border-radius:50%; background:var(--surface); display:grid; place-items:center; }
.mini-ring .v { font-size:14px; font-weight:800; }
.base-row:hover .mini-ring .inner { background:var(--elevated); }

/* backoffice — CDN settings form */
.cdn-form { display:grid; grid-template-columns:180px 1fr; gap:12px 18px; align-items:start; }
.cdn-form > label { font-weight:600; color:var(--muted); font-size:13px; padding-top:11px; }
.cdn-form input:not([type=checkbox]) { width:100%; background:var(--bg); border:1px solid var(--border2);
  color:var(--text); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none; }
.cdn-form input:not([type=checkbox]):focus { border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.cdn-check { display:flex; align-items:center; gap:8px; color:var(--text); padding-top:8px; cursor:pointer; }
@media (max-width:640px) { .cdn-form { grid-template-columns:1fr; gap:4px 0; } .cdn-form > label { padding-top:10px; } }

/* backoffice */
.bo-plan { background:var(--elevated); color:var(--text); border:1px solid var(--border2);
  border-radius:8px; padding:5px 8px; font-size:13px; font-family:inherit; cursor:pointer; }
.bo-plan:focus { outline:none; border-color:var(--blue); }

/* auth */
.auth-wrap { max-width:420px; margin:6vh auto 0; }
.auth-card { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.auth-card input { background:var(--bg); border:1px solid var(--border2); color:var(--text);
  border-radius:12px; padding:13px 16px; font-size:15px; font-family:inherit; outline:none; }
.auth-card input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.auth-card .btn { margin-top:4px; }
.auth-toggle { font-size:13px; text-align:center; }
.auth-toggle a { cursor:pointer; margin-left:6px; }

/* extension page */
.steps-list { margin:0; padding-left:20px; color:#cbd2dd; font-size:14px; }
.steps-list li { margin:8px 0; line-height:1.5; }
.steps-list li::marker { color:var(--purple); font-weight:700; }
code { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px;
  padding:1px 6px; font-size:12px; color:#e6e9f0; }

/* per-post performance status */
.status-pill { display:inline-block; font-size:10px; font-weight:700; padding:3px 9px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.04em; align-self:flex-start; }
.status-pill.up { background:rgba(34,197,94,.15); color:var(--ok); }
.status-pill.down { background:color-mix(in oklch, var(--danger) 18%, transparent); color:var(--danger); }
.status-pill.mid { background:rgba(154,163,178,.15); color:var(--muted); }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter { background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:13px; color:var(--muted); cursor:pointer; }
.filter.active { color:#fff; background:var(--grad-btn); border-color:transparent; }

/* table */
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:13px; }
th { color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.06em; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:var(--elevated); }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.pill.done { background:rgba(34,197,94,.15); color:var(--ok); }
.pill.failed { background:color-mix(in oklch, var(--danger) 18%, transparent); color:var(--danger); }
.pill.processing { background:rgba(245,158,11,.15); color:var(--warn); }

/* loading steps */
.steps { display:flex; flex-direction:column; gap:12px; max-width:420px; margin-top:10px; }
.step { display:flex; align-items:center; gap:12px; color:var(--muted); }
.step .dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--border2);
  display:grid; place-items:center; font-size:11px; flex:none; }
.step.active { color:var(--text); }
.step.active .dot { border-color:var(--purple); }
.step.done .dot { background:var(--ok); border-color:var(--ok); color:#06210f; }
.spinner { width:16px; height:16px; border:2px solid var(--border2); border-top-color:var(--purple);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }