:root, :root[data-theme="dark"]{
  --bg:#0f1020; --panel:#1a1b33; --panel2:#22244a; --ink:#e9e9f5;
  --muted:#a0a2c0; --line:#2f3160; --brand:#7c6bff; --brand2:#5b3df5;
  --good:#3ecf8e; --warn:#ffce54; --bad:#ff6b6b; --you:#ffd24d;
  --you-row:rgba(255,210,77,.12); --shadow:0 1px 3px rgba(0,0,0,.4);
  --chart-grid:#2f3160; --chart-tick:#a0a2c0; --chart-legend:#e9e9f5;
}
:root[data-theme="light"]{
  --bg:#f4f5fb; --panel:#ffffff; --panel2:#f0f1f8; --ink:#1b1c2e;
  --muted:#5c5f7a; --line:#e3e4ef; --brand:#5b3df5; --brand2:#5b3df5;
  --good:#0e9f63; --warn:#b07d00; --bad:#d64545; --you:#c98a00;
  --you-row:rgba(245,180,0,.14); --shadow:0 1px 3px rgba(20,20,50,.10);
  --chart-grid:#e3e4ef; --chart-tick:#5c5f7a; --chart-legend:#1b1c2e;
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:1.5rem auto;padding:0 1rem}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink)}
.topbar nav{display:flex;align-items:center;gap:1rem}
.topbar nav a{color:var(--muted)}
.topbar nav a:hover{color:var(--ink);text-decoration:none}
.who{color:var(--muted);font-size:.85rem}

/* buttons */
.btn,button.btn,input[type=submit]{background:var(--brand2);color:#fff;border:0;
  padding:.55rem 1rem;border-radius:8px;font-weight:600;cursor:pointer;display:inline-block}
.btn:hover{background:var(--brand);text-decoration:none}
.btn-ghost{border:1px solid var(--line);padding:.4rem .8rem;border-radius:8px;color:var(--muted)}
.btn-danger{background:transparent;border:1px solid var(--bad);color:var(--bad);
  padding:.3rem .6rem;border-radius:6px;font-size:.8rem;cursor:pointer}
.btn-danger:hover{background:var(--bad);color:#fff}
.btn-lg{padding:.7rem 1.4rem;font-size:1.05rem}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.3rem;margin-bottom:1.3rem;box-shadow:var(--shadow)}

/* light/dark toggle button */
.theme-toggle{background:transparent;border:1px solid var(--line);border-radius:8px;
  width:36px;height:34px;padding:0;font-size:1rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.theme-toggle:hover{border-color:var(--brand);background:var(--panel2)}
h1{font-size:1.7rem;margin:.2rem 0 1rem}
h2{font-size:1.2rem;margin:.1rem 0 1rem}
h3{font-size:1rem;margin:0 0 .6rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;font-weight:700}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.pill.wix{color:#7c6bff}.pill.shopify{color:#95d600}

/* tables */
table{border-collapse:collapse;width:100%;margin:.3rem 0}
th,td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tr.you{background:var(--you-row)}
tr.you td{font-weight:600}
.rank{font-variant-numeric:tabular-nums;font-weight:700}
.rank-good{color:var(--good)}.rank-mid{color:var(--warn)}.rank-none{color:var(--muted)}
.badge{font-size:.7rem;color:var(--good);border:1px solid var(--good);border-radius:5px;
  padding:0 .35rem;margin-left:.3rem}
.you-tag{color:var(--you);font-weight:700}

/* forms */
form.stack{display:flex;flex-direction:column;gap:.7rem;max-width:420px}
.form-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.2rem}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:.55rem .65rem;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font-size:.95rem}
input:focus,select:focus{outline:2px solid var(--brand)}
.field{flex:1;min-width:160px}
.hint{font-size:.78rem;color:var(--muted)}

/* flash */
.flash{padding:.7rem 1rem;border-radius:9px;margin-bottom:.8rem;border:1px solid var(--line)}
.flash-success{background:rgba(62,207,142,.13);border-color:var(--good)}
.flash-danger{background:rgba(255,107,107,.13);border-color:var(--bad)}
.flash-warning{background:rgba(255,206,84,.13);border-color:var(--warn)}
.flash-info{background:rgba(124,107,255,.13);border-color:var(--brand)}

/* dashboard matrix */
.matrix td .rank{font-size:1.05rem}
.matrix .term{color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.matrix .term:hover{color:var(--ink)}

/* clickable keyword chips: "click a keyword -> full top 20" */
.kw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.2rem 0 1rem}
.kw-bar-label{color:var(--muted);font-size:.82rem;margin-right:.2rem}
.kw-chip{display:inline-block;padding:.35rem .75rem;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-size:.85rem;font-weight:600;cursor:pointer}
.kw-chip:hover{background:var(--brand2);border-color:var(--brand);color:#fff;text-decoration:none}

/* rank cells link to the keyword's full list */
.rank-td{padding:0}
.rank-link{display:block;padding:.5rem .6rem;color:inherit}
.rank-link:hover{background:var(--panel2);text-decoration:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

.hero{text-align:center;padding:3rem 1rem}
.hero h1{font-size:2.4rem}
.hero p{font-size:1.15rem;color:var(--muted);max-width:600px;margin:.6rem auto 1.6rem}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 1rem}
.split{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.delta-up{color:var(--good)}.delta-down{color:var(--bad)}
td.delta{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* app icon in result lists */
.app-cell{display:flex;align-items:center;gap:.6rem}
.app-icon{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none;
  background:var(--panel2);border:1px solid var(--line)}
.app-icon-blank{display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--muted)}
.app-name{min-width:0}

/* ---- "Check now" loading animation ------------------------------------- */
.btn:disabled{opacity:.6;cursor:not-allowed}

.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;background:rgba(8,8,20,.55);backdrop-filter:blur(4px);
  animation:ov-fade .25s ease}
:root[data-theme="light"] .overlay{background:rgba(30,30,60,.32)}
.overlay[hidden]{display:none}
@keyframes ov-fade{from{opacity:0}to{opacity:1}}

.overlay-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:2rem 2.4rem;max-width:360px;width:90%;
  text-align:center;animation:ov-pop .3s cubic-bezier(.2,.8,.3,1.2)}
.overlay-card h2{margin:.2rem 0 .35rem;font-size:1.25rem}
.overlay-card .small{font-size:.82rem}
@keyframes ov-pop{from{transform:scale(.9);opacity:.3}to{transform:scale(1);opacity:1}}

/* radar sweep (fits "RankRadar") */
.radar{position:relative;width:132px;height:132px;margin:0 auto 1.3rem;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.radar-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:1px solid var(--line);border-radius:50%}
.radar-ring:nth-of-type(1){width:88px;height:88px}
.radar-ring:nth-of-type(2){width:44px;height:44px}
.radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 278deg,
    rgba(124,107,255,.14) 320deg, rgba(124,107,255,.6) 358deg, transparent 360deg);
  animation:radar-spin 1.5s linear infinite}
.radar::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;
  border-radius:50%;background:var(--brand);transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--brand)}
.radar-blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--good);
  opacity:0;box-shadow:0 0 6px var(--good)}
.radar-blip.b1{top:30%;left:63%;animation:radar-blip 1.5s ease-in-out .2s infinite}
.radar-blip.b2{top:58%;left:37%;animation:radar-blip 1.5s ease-in-out .7s infinite}
.radar-blip.b3{top:67%;left:64%;animation:radar-blip 1.5s ease-in-out 1.1s infinite}
@keyframes radar-spin{to{transform:rotate(360deg)}}
@keyframes radar-blip{0%,100%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}}

.progress{height:9px;background:var(--panel2);border:1px solid var(--line);
  border-radius:99px;overflow:hidden;margin:1.1rem 0 .5rem}
.progress-fill{height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--brand2),var(--brand));transition:width .45s ease}
.progress-fill.indeterminate{width:38%;transition:none;animation:indet 1.15s ease-in-out infinite}
@keyframes indet{0%{margin-left:-42%}100%{margin-left:104%}}

@media (prefers-reduced-motion: reduce){
  .radar-sweep,.radar-blip,.progress-fill.indeterminate,.overlay,.overlay-card{animation:none}
}