/* Shifter HUB — control panel styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --orange-500: #F97316; --orange-600: #EA580C;
  --orange-grad: linear-gradient(135deg, #F97316, #EA580C);
  --navy: #0F172A;
  --g50:#F8FAFC; --g100:#F1F5F9; --g200:#E2E8F0; --g300:#CBD5E1;
  --g400:#94A3B8; --g500:#64748B; --g600:#475569; --g700:#334155; --g900:#0F172A;
  --white:#fff; --green:#16a34a; --red:#dc2626;
  --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-2xl:1.5rem; --r-full:9999px;
  --fast:150ms ease; --base:250ms ease;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }  /* beats class display rules (.hub-empty etc.) */
body { font-family:'Inter',-apple-system,sans-serif; color:var(--g700); -webkit-font-smoothing:antialiased; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* Buttons */
.hub-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:9px 16px; border-radius:var(--r-lg); font-size:.875rem; font-weight:600; transition:all var(--base); white-space:nowrap; }
.hub-btn--primary { background:var(--orange-grad); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.3); }
.hub-btn--primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(249,115,22,.4); }
.hub-btn--ghost { background:var(--g100); color:var(--g700); }
.hub-btn--ghost:hover { background:var(--g200); }
.hub-btn--text { background:none; color:var(--g500); padding:6px 8px; font-weight:500; }
.hub-btn--text:hover { color:var(--g900); }
.hub-btn--block { width:100%; }
.hub-btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

.hub-error { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:var(--red); padding:.6rem .8rem; border-radius:var(--r-md); font-size:.85rem; margin-bottom:1rem; word-break:break-word; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.85rem; font-weight:500; color:var(--g700); margin-bottom:.35rem; }
.form-group input { width:100%; padding:11px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg); font-size:1rem; color:var(--g900); outline:none; transition:border-color var(--fast); }
.form-group input:focus { border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(249,115,22,.1); }

/* Logo */
.hub-logo-mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--orange-grad); color:#fff; font-weight:900; font-size:15px; flex-shrink:0; }
.hub-logo-text { font-weight:700; color:var(--g900); font-size:.95rem; }
.hub-logo-text strong { color:var(--orange-600); }

/* Login */
.hub-body--centered { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--g50),#FFF7ED); padding:2rem 1rem; }
.hub-login-card { background:#fff; border:1px solid rgba(249,115,22,.12); border-radius:var(--r-2xl); padding:2.5rem; width:100%; max-width:400px; box-shadow:var(--shadow-xl); position:relative; overflow:hidden; }
.hub-login-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--orange-grad); }
.hub-login-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; }
.hub-login-card h1 { font-size:1.5rem; font-weight:800; color:var(--g900); margin-bottom:.4rem; }
.hub-login-sub { font-size:.875rem; color:var(--g500); margin-bottom:1.5rem; }

/* Layout */
.hub-body { background:var(--g50); }
.hub-layout { display:flex; min-height:100vh; }
.hub-sidebar { width:260px; flex-shrink:0; background:#fff; border-right:1px solid var(--g200); display:flex; flex-direction:column; padding:1.25rem; position:sticky; top:0; height:100vh; }
.hub-brand { display:flex; align-items:center; gap:.6rem; padding-bottom:1.25rem; border-bottom:1px solid var(--g100); margin-bottom:1rem; }

.hub-communities { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem; }
.hub-community-loading { color:var(--g400); font-size:.85rem; padding:.75rem; font-style:italic; }
.hub-community-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem .85rem; border-radius:var(--r-lg); cursor:pointer; transition:all var(--fast); color:var(--g700); font-weight:600; font-size:.9rem; }
.hub-community-item:hover { background:var(--g50); }
.hub-community-item.active { background:rgba(249,115,22,.1); color:var(--orange-600); }
.hub-community-item .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hub-community-item .dot.active { background:var(--green); }
.hub-community-item .dot.pending { background:var(--g400); }
.hub-community-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hub-add-btn { margin-top:.75rem; }
.hub-sidebar-footer { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--g100); display:flex; flex-direction:column; gap:.4rem; }
.hub-user-email { font-size:.75rem; color:var(--g500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Main */
.hub-main { flex:1; padding:2rem; overflow-x:hidden; }
.hub-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; text-align:center; color:var(--g400); }
.hub-empty-icon { font-size:3rem; margin-bottom:1rem; }
.hub-empty h2 { color:var(--g700); font-size:1.5rem; margin-bottom:.4rem; }

.hub-view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.hub-view-header h1 { font-size:1.6rem; font-weight:800; color:var(--g900); display:inline-flex; align-items:center; gap:.25rem; }
.hub-rename-btn { background:none; border:none; cursor:pointer; font-size:.85rem; color:var(--g400); padding:3px 7px; border-radius:var(--r-md); transition:all var(--fast); }
.hub-rename-btn:hover { color:var(--orange-600); background:rgba(249,115,22,.1); }
.hub-view-meta { font-size:.8rem; color:var(--g500); }
.hub-eye-btn { background:none; border:none; cursor:pointer; color:var(--g400); padding:3px; border-radius:var(--r-md); display:inline-flex; align-items:center; flex-shrink:0; opacity:.55; transition:all var(--fast); }
.hub-eye-btn:hover { color:var(--orange-600); background:rgba(249,115,22,.12); opacity:1; }
.hub-view-website { font-size:.8rem; color:var(--g500); margin-top:.2rem; display:flex; align-items:center; gap:.25rem; }
.hub-view-website a { color:var(--orange-600); text-decoration:none; font-weight:600; }
.hub-view-website a:hover { text-decoration:underline; }
.hub-view-website-empty { color:var(--g400); font-style:italic; }

/* sidebar dashboard nav item + section label */
.hub-nav-item { display:flex; align-items:center; gap:.5rem; width:100%; padding:.7rem .85rem; border-radius:var(--r-lg); cursor:pointer; font-weight:700; font-size:.9rem; color:var(--g700); background:none; border:none; text-align:left; margin-bottom:.75rem; transition:all var(--fast); }
.hub-nav-item:hover { background:var(--g50); }
.hub-nav-item.active { background:var(--orange-grad); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.25); }
.hub-sidebar-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--g400); font-weight:700; padding:0 .85rem .4rem; }

/* dashboard cards + filter */
.hub-dash-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.hub-dash-head h1 { font-size:1.6rem; font-weight:800; color:var(--g900); }
.hub-viewtoggle { display:inline-flex; gap:2px; background:var(--g100); border-radius:var(--r-lg); padding:3px; flex-shrink:0; }
.hub-vt-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; border:none; background:none; color:var(--g500); border-radius:var(--r-md); cursor:pointer; transition:all var(--fast); }
.hub-vt-btn:hover { color:var(--g700); }
.hub-vt-btn.on { background:#fff; color:var(--orange-600); box-shadow:var(--shadow-sm); }

/* dashboard right-side toolbar (archive + view) */
.hub-dash-tools { display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; flex-wrap:wrap; }
.hub-archive-tab { display:inline-flex; align-items:center; gap:.4rem; padding:6px 12px; border-radius:var(--r-lg); border:1.5px solid var(--g200); background:#fff; color:var(--g600); font-size:.78rem; font-weight:700; cursor:pointer; transition:all var(--fast); }
.hub-archive-tab:hover { background:var(--g50); color:var(--g900); }
.hub-archive-tab.on { background:var(--g900); color:#fff; border-color:var(--g900); }
.hub-archive-tab svg { color:inherit; }

/* per-card archive icon */
.hub-arch-btn { background:none; border:none; cursor:pointer; color:var(--g300); padding:3px; border-radius:var(--r-md); display:inline-flex; align-items:center; flex-shrink:0; transition:all var(--fast); }
.hub-arch-btn:hover { color:var(--g700); background:var(--g100); }
.hub-card-amount--dead { font-size:1.25rem; font-weight:800; color:var(--g300); }

/* rows / list view — strictly one card per line, full width */
.hub-cards--rows { display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:.5rem; }
.hub-cards--rows .hub-card-community { width:100%; flex-direction:row; align-items:center; gap:1rem; min-height:0; padding:.75rem 1.1rem; }
.hub-cards--rows .hub-card-top { flex:0 0 260px; min-width:0; }
.hub-cards--rows .hub-card-tags { flex:1; min-height:0; min-width:0; overflow:hidden; }
.hub-cards--rows .hub-card-foot { flex:0 0 auto; margin-top:0; flex-direction:row; align-items:center; gap:.85rem; }
.hub-cards--rows .hub-card-payouts { display:none; }
@media (max-width:640px) { .hub-cards--rows .hub-card-community { flex-wrap:wrap; } .hub-cards--rows .hub-card-top { flex-basis:100%; } }
.hub-dash-filter { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.hub-search { width:100%; max-width:420px; padding:10px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg); font-size:.9rem; color:var(--g900); outline:none; margin-bottom:1rem; transition:border-color var(--fast); }
.hub-search:focus { border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.hub-view-payout { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; font-size:.8rem; color:var(--g500); }
.hub-date-input { padding:5px 9px; border:1.5px solid var(--g200); border-radius:var(--r-md); font-size:.82rem; color:var(--g900); font-family:inherit; outline:none; }
.hub-date-input:focus { border-color:var(--orange-500); }
.hub-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.hub-card-community { text-align:left; background:#fff; border:1px solid var(--g200); border-radius:var(--r-xl); padding:1.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.7rem; min-height:140px; box-shadow:var(--shadow-sm); transition:all var(--base); }
.hub-card-community:hover { transform:translateY(-2px); border-color:rgba(249,115,22,.4); box-shadow:0 8px 24px rgba(15,23,42,.08); }
/* Bulk-select mode */
.hub-card--selectable { position:relative; }
.hub-card--selectable:hover { transform:none; }
.hub-card--selected { border-color:var(--red); box-shadow:0 0 0 2px rgba(220,38,38,.35); }
.hub-card-check { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:6px; border:2px solid var(--g200); background:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:900; color:#fff; line-height:1; }
.hub-card--selected .hub-card-check { background:var(--red); border-color:var(--red); }
.hub-bulkbar { display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem; padding:.55rem .8rem; background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.2); border-radius:var(--r-lg); }
.hub-bulk-count { font-size:.8rem; font-weight:700; color:var(--g600); margin-right:auto; }
.hub-bulk-btn { padding:6px 14px; border-radius:var(--r-lg); border:1.5px solid var(--g200); background:#fff; color:var(--g900); font-size:.78rem; font-weight:700; cursor:pointer; transition:all var(--fast); }
.hub-bulk-btn:hover { background:var(--g50); }
.hub-bulk-btn--danger { background:var(--red); color:#fff; border-color:var(--red); }
.hub-bulk-btn--danger:hover:not(:disabled) { background:#b91c1c; }
.hub-bulk-btn--ghost { border:none; color:var(--g500); }
.hub-bulk-btn:disabled { opacity:.5; cursor:not-allowed; }
.hub-card-top { display:flex; align-items:center; gap:.5rem; }
.hub-card-top .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.hub-card-top .dot.active { background:var(--green); }
.hub-card-top .dot.pending { background:var(--g400); }
.hub-card-name { flex:1; min-width:0; font-weight:700; font-size:1rem; color:var(--g900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-card-top .hub-eye-btn { flex-shrink:0; }
.hub-eye-btn.filled { color:var(--green); opacity:1; }
.hub-eye-btn.empty { color:var(--g300); opacity:1; }
.hub-card-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:18px; }
.hub-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.hub-card-amount { font-size:1.25rem; color:var(--green); font-weight:800; }
.hub-card-payout { display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:600; color:var(--g600); background:var(--g100); padding:3px 9px; border-radius:var(--r-full); }
.hub-card-payouts { margin-top:.4rem; padding-top:.45rem; border-top:1px dashed var(--g200); display:flex; flex-direction:column; gap:3px; }
.hub-card-payout-row { font-size:.74rem; color:var(--g600); line-height:1.4; }
.hub-card-payout-row strong { color:var(--g900); font-weight:700; }

/* Payouts modal sections */
.hub-payouts-mark { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r-lg); padding:.9rem 1rem; margin-bottom:1.25rem; }
.hub-payouts-mark h4, .hub-payouts-history h4 { font-size:.85rem; font-weight:700; color:var(--g700); margin-bottom:.65rem; text-transform:uppercase; letter-spacing:.04em; }
.hub-payouts-mark .hub-modal-actions { margin-top:.5rem; }
.hub-payouts-history { margin-bottom:1rem; }
.hub-po-x { color:var(--g400); font-size:1rem; }
.hub-po-x:hover { color:var(--red); }

/* tag editor presets */
.hub-tag-presets-label { font-size:.78rem; font-weight:600; color:var(--g600); margin-bottom:.4rem; }
.hub-tag-presets { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.hub-tagpreset { font-size:.78rem; font-weight:700; color:#fff; padding:5px 13px; border-radius:var(--r-full); border:none; cursor:pointer; transition:all var(--fast); }
.hub-tagpreset:hover { transform:translateY(-1px); filter:brightness(1.06); }
.hub-quickwrap { display:inline-flex; align-items:center; }
.hub-quick-x { background:var(--g200); border:none; color:var(--g600); cursor:pointer; width:18px; height:18px; border-radius:var(--r-full); margin-left:-3px; font-size:.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.hub-quick-x:hover { background:var(--red); color:#fff; }
.hub-checkbox { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--g600); margin-bottom:1rem; cursor:pointer; }
.hub-checkbox input { width:16px; height:16px; cursor:pointer; }

/* note button (cards) + textarea */
.hub-note-btn { background:none; border:none; cursor:pointer; color:var(--g400); padding:3px; border-radius:var(--r-md); display:inline-flex; align-items:center; flex-shrink:0; transition:all var(--fast); }
.hub-note-btn:hover { background:rgba(249,115,22,.12); }
.hub-note-btn.filled { color:var(--orange-600); }
.hub-note-btn.empty { color:var(--g300); }
.hub-textarea { width:100%; padding:11px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg); font-size:.95rem; font-family:inherit; color:var(--g900); outline:none; resize:vertical; min-height:140px; transition:border-color var(--fast); margin-bottom:1rem; }
.hub-textarea:focus { border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.hub-textarea[readonly] { background:var(--g50); color:var(--g700); }

/* dashboard saved filters */
.hub-filter-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.hub-saved-row { margin-top:.5rem; }
.hub-saved-label { font-size:.74rem; font-weight:700; color:var(--g500); }
.hub-savefilter { font-size:.72rem; font-weight:700; color:var(--g700); background:var(--g100); border:1.5px dashed var(--g300); border-radius:var(--r-full); padding:3px 10px; cursor:pointer; transition:all var(--fast); }
.hub-savefilter:hover { background:var(--g200); }
.hub-savedwrap { display:inline-flex; align-items:center; }
.hub-savedfilter { font-size:.72rem; font-weight:700; color:#fff; background:var(--g700); border:none; border-radius:var(--r-full); padding:4px 11px; cursor:pointer; transition:all var(--fast); }
.hub-savedfilter:hover { filter:brightness(1.1); }
.hub-savedfilter.on { background:var(--orange-600); }
.hub-saved-x { background:var(--g200); border:none; color:var(--g600); cursor:pointer; width:18px; height:18px; border-radius:var(--r-full); margin-left:-3px; font-size:.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.hub-saved-x:hover { background:var(--red); color:#fff; }

/* tag filter chips (dashboard) */
.hub-tagfilter { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.75rem; }
.hub-filterchip { font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:var(--r-full); border:1.5px solid var(--g300); background:#fff; cursor:pointer; transition:all var(--fast); }
.hub-filterchip:hover { filter:brightness(.96); }
.hub-filterchip.on { color:#fff!important; }
.hub-filterclear { border-style:dashed!important; color:var(--g500)!important; border-color:var(--g300)!important; background:#fff!important; }

/* community item with tags */
.hub-community-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.hub-tagchips { display:flex; flex-wrap:wrap; gap:3px; }
.hub-tagchip { display:inline-flex; align-items:center; gap:3px; font-size:.66rem; font-weight:600; color:#fff; padding:1px 7px; border-radius:var(--r-full); line-height:1.5; white-space:nowrap; }
.hub-tagchip--removable { padding-right:3px; }
.hub-tagchip-x { background:rgba(255,255,255,.3); border:none; color:#fff; cursor:pointer; border-radius:var(--r-full); width:15px; height:15px; line-height:1; font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.hub-tagchip-x:hover { background:rgba(255,255,255,.55); }

/* header tags + actions */
.hub-view-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:.35rem; }
.hub-view-tags-empty { font-size:.78rem; color:var(--g400); font-style:italic; }
.hub-view-actions { display:flex; gap:.5rem; margin-top:.65rem; }
.hub-btn--sm { padding:5px 11px; font-size:.78rem; }
.hub-btn--danger { background:rgba(220,38,38,.08); color:var(--red); border:1px solid rgba(220,38,38,.25); }
.hub-btn--danger:hover { background:var(--red); color:#fff; }

/* all-time collected stat */
.hub-stat--money strong { color:var(--green); }

/* tag editor modal */
.hub-tag-current { display:flex; flex-wrap:wrap; gap:5px; align-items:center; min-height:30px; margin-bottom:1rem; padding:.5rem; background:var(--g50); border-radius:var(--r-md); }
.hub-tag-swatches { display:flex; flex-wrap:wrap; gap:7px; margin:-.4rem 0 1rem; }
.hub-swatch { width:26px; height:26px; border-radius:var(--r-full); border:2px solid #fff; box-shadow:0 0 0 1.5px var(--g200); cursor:pointer; transition:transform var(--fast); padding:0; }
.hub-swatch:hover { transform:scale(1.12); }
.hub-swatch.on { box-shadow:0 0 0 2.5px var(--g900); transform:scale(1.12); }
.hub-modal-actions--end { justify-content:flex-end; }
.hub-stats { display:flex; gap:.75rem; flex-wrap:wrap; }
.hub-stat { font-size:.85rem; color:var(--g500); background:var(--g50); border:1px solid var(--g200); padding:5px 12px; border-radius:var(--r-full); }
.hub-stat strong { color:var(--g900); margin-right:3px; }
.hub-stat--ok strong { color:var(--green); }
.hub-stat--bad strong { color:var(--red); }

.hub-card { background:#fff; border:1px solid var(--g200); border-radius:var(--r-xl); padding:1.25rem; box-shadow:var(--shadow-sm); margin-bottom:1.25rem; }
.hub-card h3 { font-size:1.05rem; font-weight:700; color:var(--g900); margin-bottom:1rem; }
.hub-card-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.hub-card-head h3 { margin-bottom:0; }

/* Table */
.hub-table-wrap { overflow-x:auto; border:1px solid var(--g200); border-radius:var(--r-lg); }
.hub-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.hub-table thead { background:var(--g50); }
.hub-table th { text-align:left; padding:10px 14px; font-size:.7rem; font-weight:600; color:var(--g700); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--g200); }
.hub-table td { padding:12px 14px; border-bottom:1px solid var(--g100); color:var(--g700); }
.hub-table tbody tr:last-child td { border-bottom:none; }
.hub-table tbody tr:hover { background:rgba(249,115,22,.03); }
.hub-empty-row td { text-align:center; color:var(--g400); font-style:italic; padding:2rem 1rem!important; }
.hub-cust { display:flex; flex-direction:column; gap:2px; }
.hub-cust strong { color:var(--g900); font-weight:600; }
.hub-cust small { color:var(--g500); font-size:.75rem; }

.hub-badge { display:inline-block; padding:3px 9px; border-radius:var(--r-full); font-size:.7rem; font-weight:600; background:var(--g100); color:var(--g700); }
.hub-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-full); font-size:.7rem; font-weight:600; text-transform:capitalize; }
.hub-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.hub-status--active,.hub-status--succeeded { background:rgba(34,197,94,.12); color:var(--green); }
.hub-status--inactive,.hub-status--failed,.hub-status--rejected,.hub-status--cancelled,.hub-status--expired { background:rgba(239,68,68,.1); color:var(--red); }
.hub-status--trialing { background:rgba(59,130,246,.12); color:#2563eb; }
.hub-status--open,.hub-status--pending,.hub-status--unknown { background:var(--g100); color:var(--g500); }
.hub-tag { display:inline-block; padding:2px 7px; border-radius:var(--r-full); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--g100); color:var(--g700); margin-right:4px; }
.hub-tag--manual { background:rgba(249,115,22,.12); color:var(--orange-600); }
.hub-fail { color:var(--red); font-size:.75rem; background:rgba(239,68,68,.06); padding:2px 7px; border-radius:var(--r-md); }
.hub-pid { font-family:'SF Mono',Monaco,monospace; font-size:.62rem; color:var(--g400); }
.hub-charge-btn { padding:6px 12px; font-size:.72rem; }
.hub-charge-btn:disabled { opacity:.4; }

/* Modal */
.hub-modal { position:fixed; inset:0; background:rgba(15,23,42,.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.hub-modal[hidden] { display:none; }
.hub-modal-inner { background:#fff; border-radius:var(--r-2xl); padding:2rem; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 32px 64px rgba(0,0,0,.3); }
.hub-modal-inner h3 { font-size:1.25rem; font-weight:800; color:var(--g900); margin-bottom:.5rem; }
.hub-modal-sub { font-size:.85rem; color:var(--g500); margin-bottom:1.25rem; line-height:1.6; }
.hub-modal-close { position:absolute; top:1rem; right:1rem; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--g100); color:var(--g600); font-size:1.2rem; transition:all var(--fast); }
.hub-modal-close:hover { background:var(--g200); color:var(--g900); }
.hub-modal-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.25rem; }
.hub-steps { margin:0 0 1rem 1.1rem; font-size:.85rem; color:var(--g600); line-height:1.9; }
.hub-code { display:inline-block; font-family:'SF Mono',Monaco,monospace; font-size:.75rem; background:var(--g100); padding:3px 8px; border-radius:var(--r-md); color:var(--g900); word-break:break-all; }

/* Toast */
.hub-toast { position:fixed; bottom:2rem; right:2rem; padding:14px 22px; border-radius:var(--r-lg); font-size:.85rem; font-weight:500; color:#fff; z-index:9999; transform:translateY(100px); opacity:0; transition:all var(--base); max-width:400px; box-shadow:var(--shadow-xl); }
.hub-toast.show { transform:translateY(0); opacity:1; }
.hub-toast.success { background:var(--green); }
.hub-toast.error { background:var(--red); }
.hub-toast.info { background:var(--g900); }

@media (max-width:820px) {
  .hub-layout { flex-direction:column; }
  .hub-sidebar { width:100%; height:auto; position:relative; flex-direction:column; }
  .hub-main { padding:1.25rem; }
}

/* Sidebar communities accordion toggle */
.hub-nav-toggle { display:flex; align-items:center; gap:.5rem; width:100%; padding:.55rem .85rem; border-radius:var(--r-lg); cursor:pointer; background:none; border:none; text-align:left; font-size:.7rem; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.06em; transition:color var(--fast); margin-bottom:.25rem; }
.hub-nav-toggle:hover { color:var(--g700); }
.hub-nav-toggle-label { flex:1; }
.hub-nav-toggle-count { background:var(--g100); color:var(--g600); border-radius:var(--r-full); padding:1px 8px; font-size:.7rem; font-weight:700; }
.hub-nav-toggle-chev { font-size:.65rem; color:var(--g400); transition:transform var(--fast); }

/* Wide modal (Caisse entry) */
.hub-modal-inner--wide { max-width:560px; }

/* Caisse view */
.hub-caisse-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.hub-caisse-head h1 { font-size:1.6rem; font-weight:800; color:var(--g900); }
.hub-caisse-totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; margin-bottom:1.25rem; }
.hub-caisse-stat { background:#fff; border:1px solid var(--g200); border-radius:var(--r-xl); padding:.9rem 1.1rem; box-shadow:var(--shadow-sm); }
.hub-caisse-stat-label { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--g500); font-weight:700; margin-bottom:4px; }
.hub-caisse-stat strong { font-size:1.4rem; font-weight:800; color:var(--g900); }
.hub-caisse-stat--in { background:linear-gradient(180deg,#F0FDF4,#fff); border-color:rgba(34,197,94,.25); }
.hub-caisse-stat--in strong { color:var(--green); }
.hub-caisse-stat--out { background:linear-gradient(180deg,#FEF2F2,#fff); border-color:rgba(220,38,38,.25); }
.hub-caisse-stat--out strong { color:var(--red); }
.hub-caisse-stat--bal { background:linear-gradient(180deg,#EFF6FF,#fff); border-color:rgba(59,130,246,.25); }
.hub-caisse-stat--bal strong.pos { color:var(--green); }
.hub-caisse-stat--bal strong.neg { color:var(--red); }

/* Caisse filters */
.hub-caisse-filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; padding:.75rem .9rem; background:#fff; border:1px solid var(--g200); border-radius:var(--r-lg); }
.hub-caisse-sep { color:var(--g400); font-size:.85rem; }
.hub-select { padding:7px 11px; border:1.5px solid var(--g200); border-radius:var(--r-md); font-size:.82rem; color:var(--g900); font-family:inherit; background:#fff; outline:none; cursor:pointer; }
.hub-select:focus { border-color:var(--orange-500); }

/* Caisse entry-type pill (in table) */
.hub-ce-type-tag { display:inline-block; font-size:.66rem; font-weight:700; padding:2px 9px; border-radius:var(--r-full); text-transform:uppercase; letter-spacing:.03em; }
.hub-ce-type-tag--in { background:rgba(34,197,94,.12); color:var(--green); }
.hub-ce-type-tag--out { background:rgba(220,38,38,.12); color:var(--red); }
.hub-ce-amt { font-size:.95rem; font-weight:800; }
.hub-ce-amt--in { color:var(--green); }
.hub-ce-amt--out { color:var(--red); }

/* Caisse entry modal */
.hub-ce-type { display:flex; gap:.5rem; }
.hub-ce-type-btn { flex:1; padding:11px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg); background:#fff; font-weight:700; font-size:.9rem; cursor:pointer; transition:all var(--fast); color:var(--g500); }
.hub-ce-type-btn--in.on { background:var(--green); border-color:var(--green); color:#fff; }
.hub-ce-type-btn--out.on { background:var(--red); border-color:var(--red); color:#fff; }
.hub-ce-type-btn:hover:not(.on) { background:var(--g50); color:var(--g900); }
.hub-ce-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.hub-ce-combo { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.hub-ce-combo .hub-select { flex:1; min-width:140px; }
.hub-ce-combo input[type="text"] { flex:1; min-width:140px; padding:7px 11px; border:1.5px dashed var(--g300); border-radius:var(--r-md); font-size:.82rem; outline:none; }
.hub-ce-combo input[type="text"]:focus { border-color:var(--orange-500); border-style:solid; }
.hub-ce-del { width:26px; height:26px; border:1px solid var(--g200); background:#fff; color:var(--g500); border-radius:var(--r-md); cursor:pointer; font-size:.95rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:all var(--fast); }
.hub-ce-del:hover { background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- Version mode switch (Rebill / Clipper) ---------- */
.hub-modeswitch { display:inline-flex; gap:4px; padding:4px; background:var(--g100); border-radius:var(--r-full); margin-bottom:1rem; }
.hub-mode-btn { border:none; background:transparent; color:var(--g600); font-size:.82rem; font-weight:700; padding:7px 20px; border-radius:var(--r-full); cursor:pointer; transition:all var(--fast); }
.hub-mode-btn:hover { color:var(--g900); }
.hub-mode-btn.on { background:var(--orange-grad); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.3); }

/* ---------- Clipper type chip (card + meta) ---------- */
.hub-clip-type { display:inline-flex; align-items:center; flex-shrink:0; font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:1px 8px; border-radius:var(--r-full); line-height:1.6; text-transform:uppercase; }
.hub-clip-type--clipper { background:rgba(99,102,241,.12); color:#4F46E5; }
.hub-clip-type--funder { background:rgba(22,163,74,.12); color:var(--green); }
.hub-card-name-wrap { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }

/* ---------- Clipper payout status (expected vs received) ---------- */
.hub-po-badge { display:inline-flex; align-items:center; gap:3px; font-size:.64rem; font-weight:700; letter-spacing:.02em; padding:2px 9px; border-radius:var(--r-full); line-height:1.6; text-transform:uppercase; border:none; }
.hub-po-badge--exp { background:rgba(245,158,11,.15); color:#B45309; }
.hub-po-badge--recv { background:rgba(22,163,74,.14); color:var(--green); }
button.hub-po-flip { cursor:pointer; transition:filter var(--fast); }
button.hub-po-flip:hover { filter:brightness(.94); }
.hub-card-payout--exp { background:rgba(245,158,11,.12); color:#B45309; }
.hub-card-payout-row--exp { color:var(--g500); }
.hub-ce-row--3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:560px) { .hub-ce-row--3 { grid-template-columns:1fr; } }

/* ---------- Version switcher dropdown (top of sidebar) ---------- */
.hub-version-switch { margin-bottom:1rem; }
.hub-version-select {
  width:100%; padding:11px 38px 11px 14px; border:1.5px solid var(--g200); border-radius:var(--r-lg);
  font-family:inherit; font-size:.92rem; font-weight:700; color:var(--g900); background:#fff; cursor:pointer;
  outline:none; transition:all var(--fast); -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EA580C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.hub-version-select:hover { border-color:var(--orange-500); }
.hub-version-select:focus { border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(249,115,22,.12); }

/* full-width inputs inside modals (e.g. clipper payout date) */
.hub-input-block { width:100%; padding:11px 14px; font-size:.95rem; }

/* ---------- Trafic (Views) — SMMFollows ---------- */
.hub-traffic-headtools { display:flex; align-items:center; gap:.85rem; }
.hub-traffic-balance { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; padding:6px 14px; background:rgba(22,163,74,.1); border-radius:var(--r-lg); }
.hub-traffic-balance-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--g500); font-weight:700; }
.hub-traffic-balance strong { font-size:1.05rem; color:var(--green); font-weight:800; }
.hub-traffic-warn { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); color:#B45309; padding:.7rem .9rem; border-radius:var(--r-md); font-size:.85rem; margin-bottom:1rem; }
.hub-traffic-run .hub-modal-sub { margin-bottom:1rem; }
.hub-traffic-runbtn-wrap { display:flex; flex-direction:column; justify-content:flex-end; }
.hub-traffic-tokenstate { font-weight:600; font-size:.78rem; }
.hub-traffic-tokenstate.set { color:var(--green); }
.hub-traffic-tokenstate.unset { color:var(--g400); }
.hub-traffic-link { color:var(--orange-600); max-width:240px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.hub-traffic-orderid { font-size:.75rem; color:var(--g500); }
.hub-traffic-status { display:inline-flex; align-items:center; font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:2px 9px; border-radius:var(--r-full); text-transform:uppercase; background:var(--g100); color:var(--g600); }
.hub-traffic-status--completed { background:rgba(22,163,74,.14); color:var(--green); }
.hub-traffic-status--inprogress, .hub-traffic-status--processing, .hub-traffic-status--pending { background:rgba(59,130,246,.14); color:#2563EB; }
.hub-traffic-status--partial { background:rgba(245,158,11,.16); color:#B45309; }
.hub-traffic-status--canceled, .hub-traffic-status--refunded { background:rgba(239,68,68,.12); color:var(--red); }

/* ---------- Trafic price estimate ---------- */
.hub-traffic-price { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.25rem; font-size:.82rem; color:var(--g600); }
.hub-traffic-rate strong { color:var(--g900); }
.hub-traffic-est { background:rgba(22,163,74,.1); color:var(--green); font-weight:600; padding:3px 10px; border-radius:var(--r-full); }
.hub-traffic-est strong { color:var(--green); }
.hub-traffic-est.over { background:rgba(239,68,68,.1); color:var(--red); }
.hub-traffic-est.over strong { color:var(--red); }
.hub-link { background:none; border:none; color:var(--orange-600); font-size:.82rem; font-weight:600; cursor:pointer; padding:2px 4px; border-radius:var(--r-md); }
.hub-link:hover { background:rgba(249,115,22,.1); }

/* ---------- Payout date filter (Clipper dashboard) ---------- */
.hub-payout-filter { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:#fff; border:1.5px solid var(--g200); border-radius:var(--r-lg); flex-wrap:wrap; }
.hub-pf-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--g500); }
.hub-pf-presets { display:inline-flex; gap:3px; }
.hub-pf-preset { font-size:.72rem; font-weight:600; color:var(--g600); background:var(--g100); border:none; padding:4px 9px; border-radius:var(--r-full); cursor:pointer; transition:all var(--fast); }
.hub-pf-preset:hover { background:var(--g200); color:var(--g900); }
.hub-pf-preset.on { background:var(--orange-grad); color:#fff; }
.hub-pf-sep { color:var(--g400); font-size:.8rem; }
.hub-payout-filter .hub-date-input { padding:4px 7px; font-size:.78rem; }
.hub-pf-clear { width:22px; height:22px; border:none; background:var(--g100); color:var(--g500); border-radius:var(--r-full); cursor:pointer; font-size:1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.hub-pf-clear:hover { background:var(--red); color:#fff; }
.hub-pf-total { display:inline-flex; align-items:center; font-size:.78rem; font-weight:800; color:var(--green); background:rgba(22,163,74,.12); padding:4px 11px; border-radius:var(--r-full); white-space:nowrap; }