/* microinfluencers.us — shared design system */
:root {
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f3f4f6;
  --text:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --border:#e5e7eb; --border-strong:#d6dae1;
  --primary:#4f46e5; --primary-hover:#4338ca; --primary-ink:#ffffff; --primary-soft:#eef2ff;
  --ok:#047857; --ok-bg:#ecfdf5; --ok-bd:#a7f3d0;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-bd:#fde68a;
  --bad:#b91c1c; --bad-bg:#fef2f2; --bad-bd:#fecaca;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.06);
  --radius:12px; --radius-sm:8px;
  --maxw:1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f172a; --surface:#1e293b; --surface-2:#273449;
    --text:#f1f5f9; --muted:#94a3b8; --faint:#64748b;
    --border:#334155; --border-strong:#3f4d63;
    --primary:#818cf8; --primary-hover:#a5b4fc; --primary-ink:#0b1120; --primary-soft:#1e2a4a;
    --ok:#34d399; --ok-bg:#06281f; --ok-bd:#14543e;
    --warn:#fbbf24; --warn-bg:#2a2008; --warn-bd:#5a4409;
    --bad:#f87171; --bad-bg:#2a1111; --bad-bd:#5a1f1f;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:#0f172a; --surface:#1e293b; --surface-2:#273449;
  --text:#f1f5f9; --muted:#94a3b8; --faint:#64748b;
  --border:#334155; --border-strong:#3f4d63;
  --primary:#818cf8; --primary-hover:#a5b4fc; --primary-ink:#0b1120; --primary-soft:#1e2a4a;
  --ok:#34d399; --ok-bg:#06281f; --ok-bd:#14543e;
  --warn:#fbbf24; --warn-bg:#2a2008; --warn-bd:#5a4409;
  --bad:#f87171; --bad-bg:#2a1111; --bad-bd:#5a1f1f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 16px; }

/* Topbar */
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); }
.topbar .inner { display:flex; align-items:center; justify-content:space-between; height:56px; gap:16px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.logo .dot { width:22px; height:22px; border-radius:6px; background:var(--primary); display:inline-grid; place-items:center; color:var(--primary-ink); font-size:13px; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a { color:var(--muted); padding:7px 12px; border-radius:8px; font-size:14px; font-weight:500; }
.nav a:hover { color:var(--text); background:var(--surface-2); text-decoration:none; }
.nav a.active { color:var(--text); background:var(--surface-2); }
.icon-btn { background:none; border:1px solid var(--border); color:var(--muted); width:34px; height:34px; border-radius:8px; cursor:pointer; display:grid; place-items:center; font-size:15px; }
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); }

/* Header block */
.pagehead { padding:28px 0 8px; }
.pagehead h1 { font-size:26px; line-height:1.2; margin:0 0 6px; letter-spacing:-.02em; }
.pagehead p { margin:0; color:var(--muted); max-width:62ch; }

/* Cards / panels */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.pad { padding:16px; }

/* Buttons */
.btn { font:inherit; font-weight:600; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.btn.primary:hover { background:var(--primary-hover); }
.btn.primary:disabled { opacity:.55; cursor:default; }
.btn.sm { padding:6px 12px; font-size:13px; }
.btn.ghost { border-color:transparent; background:transparent; color:var(--muted); }
.btn.ghost:hover { color:var(--text); background:var(--surface-2); }

/* Fields */
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12px; font-weight:500; color:var(--muted); }
input, select { font:inherit; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); width:100%; }
input::placeholder { color:var(--faint); }
input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--surface); border:1px solid var(--border-strong); color:var(--muted); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:500; cursor:pointer; transition:background .14s, color .14s, border-color .14s; }
.chip:hover { color:var(--text); }
.chip.on { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }

/* Badges / tags */
.tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.tag.valid { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.tag.role { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd); }
.tier { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--surface-2); color:var(--muted); }

/* Table */
.tablewrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); font-size:14px; }
thead th { position:sticky; top:0; background:var(--surface-2); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; z-index:1; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.avatar { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; flex:0 0 auto; }
.creator { display:flex; align-items:center; gap:10px; }
.creator .meta b { font-weight:600; }
.creator .meta small { display:block; color:var(--muted); font-size:12px; }
.erbar { height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; width:72px; margin-top:3px; }
.erbar > span { display:block; height:100%; background:var(--primary); }
.lock { color:var(--muted); font-variant-numeric:tabular-nums; }
.lock .dom { color:var(--text); }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }

/* Stat strip */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; box-shadow:var(--shadow); }
.stat .n { font-size:21px; font-weight:700; letter-spacing:-.01em; }
.stat .l { color:var(--muted); font-size:12px; margin-top:2px; }

/* Sticky action bar */
.actionbar { position:sticky; bottom:16px; margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); padding:12px 16px; box-shadow:0 6px 24px rgba(15,23,42,.12); }
.actionbar .sel { font-weight:600; }
.actionbar .muted { color:var(--muted); font-weight:400; }

/* States */
.state { color:var(--muted); padding:40px 16px; text-align:center; }
.skeleton { height:14px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2)); background-size:200% 100%; animation:sh 1.2s infinite; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

footer.foot { color:var(--muted); font-size:12px; padding:28px 0 56px; }
code { background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:12px; }
.hide { display:none !important; }

@media (max-width:720px){
  .stats { grid-template-columns:repeat(2,1fr); }
  .pagehead h1 { font-size:22px; }
}