/* ─── Modern refresh layer ─────────────────────────────────
   Overrides on top of the existing CSS to bring the look closer to
   Instagram / X: bigger sans labels, calmer status pills, softer
   borders, more breathing room, monochrome buttons by default.

   Loaded LAST so it wins specificity wars without rewriting layout.
   Specificity is kept minimal — only escalated where the original
   selector uses inline styles or is matched by another non-modern rule. */

/* ─── Type scale ───────────────────────────────────────────
   Existing CSS scatters 7px/8px/9px mono everywhere. At those sizes
   even Inter/JetBrains Mono are hard to read. Bump the floor. */
.mono, .pmeta, .pkey, .pval, .scl, .stl, .pglbl, .api-lbl, .api-d,
.kf-notif-time, .kf-notif-msg, .crm-meta, .stat-lbl, .stat-sub,
.az-meta, .az-kw, .az-signal, .ch-meta, .row-mono, .pill-mono,
.fchip { font-size: 11px; }

.scv, .stv, .stat-val, .pcard-meta { font-size: 12px; }

/* Most "labels" in the UI use mono not because they need to —
   tradition from the early terminal aesthetic. Modern apps (X / IG /
   Linear / Notion) keep mono only for IDs, hashes, codes, numeric
   counters. Convert label-style mono to sans across the board. */
.cfgl, .scl, .stl, .pkey, .pglbl, .crm-card-title, .crm-card-header,
.crm-meta, .crm-deal-metric-lbl, .stage-lbl, .auth-tab,
.psectit, .psh-desc, .pcard-nm, .pmeta, .stat-lbl, .stat-sub,
.notif-from, .kf-notif-from, .kf-notif-title,
.tk-tab, .auth-logo, .pempty,
.tabs .tab, .nav .brand .bname,
.fchip, .api-d {
  font-family: var(--sans) !important;
  letter-spacing: -.005em;
  text-transform: none;
}

/* Numeric / technical: keep mono, but raise weight + size for legibility */
.tv, .stv, .scv, .ch-id, .quota-num,
[id^="tokLeft"], [id^="aiQuota"], [id^="tc-"], .tc {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ─── Buttons ──────────────────────────────────────────────
   The current "btn-ghost" list looks like rainbow Skittles because each
   button gets inline color: var(--accent|--green|--red|--purple). Modern
   apps (X "Post", IG "Share") use ONE primary action and tonal greys for
   secondaries. Soften: reduce per-button color, raise padding, round more. */
.btn, .btn-ghost {
  font-family: var(--sans);
  font-size: 12.5px !important;
  font-weight: 500;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  letter-spacing: -.005em;
  transition: var(--transition);
  border: 1px solid transparent;
}
.btn-ghost {
  background: transparent;
  color: var(--text2) !important;
  border-color: var(--line2) !important;
}
.btn-ghost:hover {
  background: var(--bg2);
  color: var(--text) !important;
  border-color: var(--line2) !important;
}

/* Primary action — use accent only on the hero CTA */
.btn-primary, .btn.btn-primary, button[type="submit"]:not(.btn-ghost) {
  background: var(--text);
  color: var(--bg0);
  border-color: var(--text);
  font-weight: 600;
}
.btn-primary:hover, .btn.btn-primary:hover {
  opacity: .92;
}

/* ─── Tabs ────────────────────────────────────────────────
   The top nav tab "Analyzer / Búsqueda / Lista …" is currently a
   dense mono row. X uses big sans tabs with a 3px underline on active. */
.tabs .tab {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 14px 16px !important;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.tabs .tab.on, .tabs .tab.active {
  color: var(--text) !important;
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: transparent !important;
}
.tabs .tab:hover { background: var(--bg1) !important; color: var(--text); }
.tabs .tab .tc {
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg2);
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.tabs .tab.on .tc, .tabs .tab.active .tc {
  background: var(--accent);
  color: #000;
}

/* ─── Cards / Sections ────────────────────────────────────
   Sharper corners → softer corners, refined borders. */
.card, .panel, .crm-card, .psec, .scard,
.notif-item, .kf-notif-item,
.api-card, .cfgi, .auth-card {
  border-radius: var(--radius-lg);
  border-color: var(--line) !important;
}

/* ─── Status pills (kanban + badges) ──────────────────────
   The current status pills use loud colored backgrounds. X / IG use
   tonal pills — colored TEXT on a faintly tinted bg with subtle border.
   This brings down visual noise across the table + kanban. */
.stpill, .ql, .stage-pill, .pipe-pill,
.tag, .ch-tag, .pcard-xref {
  font-family: var(--sans);
  font-size: 11px;
  padding: 3px 9px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 500;
  letter-spacing: -.003em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ─── Inputs ──────────────────────────────────────────────
   Bigger touch targets, softer borders, focus ring uses accent. */
input, textarea, select {
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: -.005em;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="number"], input[type="date"],
textarea, select, .settings-input {
  border-radius: 10px !important;
  border-color: var(--line2) !important;
  padding: 9px 12px !important;
  background: var(--bg1);
  transition: var(--transition);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(240,180,41,.12);
}

/* ─── Table density ───────────────────────────────────────
   Bump row height + tighten column gaps so it feels less spreadsheet-y. */
.kf-table td, .kf-table th, .ch-table td, .ch-table th, table td, table th {
  padding: 12px 14px !important;
  font-size: 13px;
}
.kf-table th, .ch-table th, table th {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: -.003em;
  text-transform: none;
  border-bottom: 1px solid var(--line2);
}
/* Channel meta line under the channel name (handle, country) */
.chhd, .pmeta, .pcard-meta {
  color: var(--text3);
  font-size: 11.5px !important;
}

/* ─── Avatar / image rounding ────────────────────────────
   Square 28×28 thumbnails feel old. Channels are people → full circle. */
.av, .ch-avatar, .pcard-av, .panel-avatar img,
img[src*="yt3.googleusercontent"], img[src*="ggpht"] {
  border-radius: 50%;
}

/* ─── Logo / title in nav ────────────────────────────────
   "KOL Finder" was thin DM Sans. Bump to a real heading. */
.brand .bname, .nav .brand-title {
  font-family: var(--sans) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ─── Quota indicator ────────────────────────────────────
   Make the YT / AI bars feel like the X notification dot rather than
   a debug widget. */
.tokbar {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg1);
  border: 1px solid var(--line);
  gap: 6px;
}
.tokbar .tok-lbl {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -.005em;
}

/* ─── Modal polish ───────────────────────────────────────
   Bigger, more breathing room — feels closer to IG share sheet. */
.modal, .kf-modal-content, .auth-card,
[class*="overlay"] > div[class*="modal"] {
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}

/* ─── Reduce mono creep on pipeline / kanban ─────────────
   Card titles in the kanban were mono — switch to sans for readability. */
.pipe-col-title, .kanban-col-title, .pcol-title,
.notes-h, .crm-h, .pkanban-h, .stage-title {
  font-family: var(--sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
}

/* ─── Drop hard caps / uppercase that scream "code editor" ─ */
.psectit, .crm-card-title, .scl, .stl,
.tabs .tab, .stage-lbl, .crm-section-title {
  text-transform: none !important;
}

/* ─── Nicer scrollbars (thicker, more visible like macOS) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; border: 2px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* Light theme — flip thumb to dark, keep system feel */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-color: var(--bg0);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }

/* ─── Compose toolbar (Gmail-style) ─────────────────────────
   The reply composer's toolbar gets new icon-text buttons (🔗 Link,
   🖼 Imagen, 📎 Adjuntar). Original styling targets 24×24 icon buttons —
   give the labelled buttons proper width and breathing room. */
.compose-toolbar {
  padding: 6px 10px;
  gap: 4px;
  border-radius: 0 0 10px 10px;
}
.compose-toolbar button {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
  transition: var(--transition);
}
.compose-toolbar button:hover {
  background: var(--bg2);
  border-color: transparent;
  color: var(--text);
}
.compose-toolbar-sep { height: 18px; margin: 0 6px; }

.reply-attachment-list { font-family: var(--sans); }
.compose-editable { font-family: var(--sans) !important; font-size: 14px !important; line-height: 1.55 !important; border-radius: 10px 10px 0 0; }