/* Reusable UI: buttons, hero, wizard, tooltips, cards, score, charts. */
/* 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.danger { background:var(--danger); color:#fff; }
.btn.danger:hover { background:color-mix(in oklch, var(--danger) 88%, black 12%); }
.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; }
/* selo verificado (SVG colorido — markup em VERIFIED_SVG, 01-core.js) */
.verified { display:inline-flex; align-items:center; vertical-align:middle; line-height:0; flex:none; }
.verified svg { width:16px; height:16px; display:block; }
.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; }

/* gained/lost vs previous analysis */
.delta { font-size:11px; font-weight:700; margin-left:6px; white-space:nowrap; vertical-align:middle; }
.delta.up { color:var(--ok); }
.delta.down { color:var(--danger); }

/* followers-over-time chart */
.hist-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.hist-n { font-size:24px; font-weight:800; }
.hist-since { font-size:13px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hist-since .delta { margin-left:0; font-size:14px; }
.linechart { width:100%; height:140px; display:block; overflow:visible; }
.hist-axis { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:6px; }

/* admin right-click context menu (remove a post) */
.ctx-menu { position:fixed; z-index:2000; min-width:210px; background:var(--elevated2);
  border:1px solid var(--border2); border-radius:12px; padding:6px;
  box-shadow:0 16px 50px rgba(0,0,0,.5); }
.ctx-item { display:block; width:100%; text-align:left; border:0; background:transparent;
  color:var(--text); font:inherit; font-weight:600; padding:9px 12px; border-radius:8px; cursor:pointer; }
.ctx-item:hover { background:var(--surface); }
.ctx-item.danger { color:var(--danger); }

/* interactive hover tooltip for line charts */
.lc-wrap { position:relative; touch-action:none; }
.lc-cursor { position:absolute; top:0; bottom:0; width:1px; background:var(--border2);
  transform:translateX(-0.5px); display:none; pointer-events:none; }
.lc-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--c,var(--blue));
  box-shadow:0 0 0 4px color-mix(in oklab, var(--c, var(--blue)) 28%, transparent);
  transform:translate(-50%,-50%); display:none; pointer-events:none; }
.lc-tip { position:absolute; transform:translateY(-100%); display:none; pointer-events:none; z-index:6;
  background:var(--elevated); border:1px solid var(--border2); color:var(--text);
  border-radius:8px; padding:5px 9px; font-size:12px; line-height:1.25; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.35); }
.lc-tip b { display:block; font-weight:800; }
.lc-tip span { color:var(--muted); font-size:11px; }

/* prod finder: "@ não está na base" call-to-action */
.notinbase-cta { margin-top:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; }

/* score + evolução lado a lado (50/50; vira full-width quando a evolução some) */
.score-history { display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; }
.score-history > .col { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; }
.score-history > .col > .sh-card { flex:1; }

/* 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); }