:root{
  --bg:#0f1014;
  --panel:#151720;
  --ink:#f7f7fb;
  --muted:#b9bfd3;
  --gold:#d4af37;
  /*--purple:#5b4b8a;*/
  --purple:#7c3aed;
  --ok:#31c48d;
  --err:#ef4444;
  --ring:0 0 0 2px rgba(212,175,55,.35), 0 0 0 6px rgba(212,175,55,.15);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* Top nav + hero (landing) */
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
.logo .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#bf953f 60%,var(--purple));display:grid;place-items:center;box-shadow:0 6px 30px rgba(212,175,55,.25)}
.logo .text{font-size:20px}
.cta-min{border:1px solid rgba(212,175,55,.45);padding:10px 14px;border-radius:10px}
.cta-min:hover{background:rgba(212,175,55,.08)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:36px 0}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 10px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 20px}
.badge{display:inline-block;background:rgba(91,75,138,.18);border:1px solid rgba(91,75,138,.5);color:#dcd7ff;padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:12px}

.panel{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.0));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.35)}

form{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
input[type="email"]{flex:1;min-width:260px;background:#0c0d11;color:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;font-size:16px;outline:none}
input[type="email"]:focus{box-shadow:var(--ring);border-color:rgba(212,175,55,.6)}
button[type="submit"]{background:var(--gold);color:#111217;border:none;border-radius:12px;padding:14px 18px;font-weight:700;font-size:16px;cursor:pointer}
button[disabled]{opacity:.7;cursor:not-allowed}

.micro{color:var(--muted);font-size:12px;margin-top:8px}

.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.feat{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:var(--panel)}
.feat h3{margin:0 0 6px;font-size:16px}
.feat p{margin:0;color:var(--muted);font-size:14px}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.how .step{padding:18px;border-radius:16px;border:1px dashed rgba(212,175,55,.35)}
.step .n{font-weight:800;color:var(--gold);font-size:12px;letter-spacing:.3px;text-transform:uppercase}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0}
.price{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px;position:relative}
.price .tier{font-weight:800;margin-bottom:6px}
.price .amt{font-size:34px;font-weight:900}
.price ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.price .choose{margin-top:16px;background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 14px;border-radius:12px;cursor:pointer}
.price .choose:hover{background:rgba(212,175,55,.08)}
.pro{outline:2px solid rgba(212,175,55,.35)}

.trust{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px;margin-top:10px}
.tick{width:18px;height:18px;border-radius:6px;background:rgba(49,196,141,.18);border:1px solid rgba(49,196,141,.55);display:grid;place-items:center;color:var(--ok);font-weight:800}

.foot{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;margin-top:30px;color:var(--muted);font-size:13px}

/* Shared utilities */
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
.muted{color:var(--muted)}
.ticker{font-weight:800}
.center{ text-align:center; }
.pad{ padding:16px; }

/* Primary button (landing dark) */
.btn{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700}
.btn:hover{background:rgba(212,175,55,.08)}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .featgrid,.how,.pricing{grid-template-columns:1fr}
  .hero h1{font-size:36px}
}

/* ---------- Light theme (dashboard) ---------- */
:root.theme-light{
  --bg:#f8fafc;
  --panel:#ffffff;
  --ink:#0b1220;
  --muted:#5b657a;
  --border:#e6e9f1;
  --gold:#d4af37;
}

html.theme-light, html.theme-light body{
  background:var(--bg);
  color:var(--ink);
}

/* Panel + table (dashboard) */
.panel.flat{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:0}
.gridtable{width:100%;border-collapse:separate;border-spacing:0}
.gridtable thead th{position:sticky;top:0;background:#fbfcff;border-bottom:1px solid var(--border);text-align:left;padding:12px 14px;font-weight:600}

/* High-contrast headers for dashboard table */
.gridtable--dashboard .th-contrast{color:var(--purple);font-weight:700}

.gridtable tbody td{padding:12px 14px;border-bottom:1px solid var(--border)}
.gridtable tbody tr:hover{background:#f4f7ff}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:6px 0 16px}
.toolbar .left h1{margin:0}
.toolbar .small{font-size:13px}
.btnrow{display:flex;gap:8px}

/* Buttons (dashboard light overrides) */
.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn.ghost{background:transparent}

/* Branded destructive action: purple */
.btn.danger-outline{border-color:var(--purple);color:var(--purple);background:#fff}
.btn.danger-outline:hover{background:rgba(91,75,138,.08);border-color:var(--purple);color:var(--purple)}
.btn.danger-outline:active{background:rgba(91,75,138,.16);border-color:var(--purple);color:var(--purple);transform:translateY(1px)}

/* Search */
.searchwrap{position:relative;min-width:360px}
.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink)}
.input:focus{outline:none;box-shadow:var(--ring,0 0 0 2px rgba(212,175,55,.25))}

/* Results dropdown */
.results{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px 0;list-style:none;display:none;max-height:280px;overflow:auto;z-index:20}
.results.open{display:block}
.results li{padding:8px 12px;cursor:pointer;display:flex;gap:6px;align-items:center}
.results li:hover{background:#f7f9ff}
.dim{color:var(--muted)}

/* Switch (Alert toggle) */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d2d8e4;border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.switch:hover .slider{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.switch input:focus-visible + .slider{box-shadow:var(--ring);outline:none}

/* ON state (green) + gold variant */
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.switch.gold input:checked + .slider{background:var(--gold)}

/* Dashboard table alignment */
.gridtable--dashboard td,
.gridtable--dashboard th {
  vertical-align: middle;
}

.gridtable--dashboard td.center,
.gridtable--dashboard th.center {
  text-align: center;
}

.gridtable--dashboard td.actioncell {
  white-space: nowrap;
}


/* Default ticker pill (“Always in 🎯”) */
.lockpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #b7aed3;      /* Rebel purple outline */
  background: #f5f3fc;            /* Soft lavender fill */
  color: #5b4aa1;                 /* Text color */
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;                 /* Fixes emoji vertical wobble */
  height: 34px;                   /* Matches button height */
  box-sizing: border-box;
}
.lockpill .label {
  white-space: nowrap;            /* Prevent wrap */
}
.lockpill .emoji {
  display: inline-block;
  line-height: 1;
  transform: translateY(0.5px);   /* Optical centering */
}

/* Optional: bolder Rebel-purple pill variant */
/*.lockpill {
  background: #5b4aa1;
  color: #ffffff;
  border-color: #5b4aa1;
}*/

/* Checkbox line (used in toggles/filters) */
.chkline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Defaults footer note under table */
#defaultsNote {
  margin-top: 12px;
  color: #6b7280; /* Muted gray */
}
#defaultsNote .pill-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
}


/* Smaller variant for footer note */
.lockpill.lockpill--sm {
  font-size: 11px;
  height: 26px;
  padding: 4px 10px;
  font-weight: 500;
}


/* Emoji alignment fix */
.lockpill .emoji {
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px); /* nudge upward */
}

.lockpill.lockpill--sm .emoji {
  transform: translateY(-0.5px);
}

/* Ensure inline pill aligns nicely with surrounding text */
#defaultsNote .lockpill {
  vertical-align: middle;
}

#defaultsNote .lockpill {
  vertical-align: middle;
  position: relative;
  top: -1px; /* optional fine-tune */
}

/* Counting tickers */
/* Tools row stays tidy */
.content-tools { gap: 12px; align-items: center; }

/* Counter + progress */
.mutedcnt.cap { min-width: 220px; }
.cap-line { text-align:right; font-size:12px; color:#6b7280; }
.cap-bar { height:4px; margin-top:6px; border-radius:999px; overflow:hidden;
           background:rgba(255,255,255,.08); }
.cap-bar i { display:block; height:100%; width:0%;
             background:var(--gold); transition:width .25s ease; }

/* At cap: nudge color to “err” */
[data-atcap="true"] .cap-bar i { background: var(--err); }