:root{
  --bg:#0b0f17; --card:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --line:#1f2937; --brand:#7c3aed; --brand2:#a78bfa;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#070a10 0%, #0b0f17 60%, #070a10 100%); color:var(--text);}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.card{background:rgba(17,24,39,.92);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand{font-weight:700;letter-spacing:.2px}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(124,58,237,.18);
  cursor:pointer;color:var(--text);font-weight:600}
.btn:hover{border-color:rgba(167,139,250,.8)}
.btn.secondary{background:transparent}
.h1{font-size:22px;margin:0 0 6px 0}
.p{margin:0;color:var(--muted)}
.input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(2,6,23,.6);color:var(--text);outline:none}
.input:focus{border-color:rgba(167,139,250,.8)}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:600}
.small{font-size:14px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:14px 0}
.toast{position:fixed;right:16px;bottom:16px;background:#0b1220;border:1px solid var(--line);
  padding:12px 14px;border-radius:14px;display:none;max-width:360px}
.toast.show{display:block}
.thbtn{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  font-weight:600;
}
.thbtn:hover{ text-decoration: underline; }
.grid{display:grid;grid-template-columns:1fr;gap:16px} /* full width stacked */

.table th{color:var(--muted);font-weight:600;user-select:none}
.thbtn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:0;padding:0;margin:0;
  color:var(--muted);font:inherit;font-weight:700;
  cursor:pointer;
}
.thbtn:hover{color:var(--text)}
.sorticon{
  width:10px;height:10px;display:inline-block;opacity:.7;
  transform: translateY(1px);
}
.thbtn[data-state="asc"] .sorticon{opacity:1; transform: translateY(1px) rotate(180deg);}
.thbtn[data-state="desc"] .sorticon{opacity:1}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tab{
  padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;font-weight:700;font-size:12px;
}
.tab.active{background:rgba(124,58,237,.18);color:var(--text);border-color:rgba(167,139,250,.8)}
/* stack cards (full width table) */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* pretty sortable headers */
.table th{user-select:none}
.thbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  cursor:pointer;
  font-weight:700;
  color:inherit;
  opacity:.85;
}
.thbtn:hover{opacity:1}
.sorticon{width:10px;height:10px;display:inline-block;opacity:.55;transform:translateY(1px)}
.thbtn[data-state="desc"] .sorticon{opacity:1}
.thbtn[data-state="asc"] .sorticon{opacity:1;transform:translateY(1px) rotate(180deg)}
.pos-ind{display:inline-block;margin-left:6px;font-size:12px;line-height:1;vertical-align:middle}
.pos-same{color:#f59e0b} /* orange */
.pos-up{color:#22c55e}   /* green */
.pos-down{color:#ef4444} /* red */
.pos-none{color:#9ca3af} /* gray */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.segbtn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  opacity:.9;
}
.segbtn.active{
  background:rgba(124,58,237,.18);
  border-color:rgba(167,139,250,.8);
  opacity:1;
}

.totals{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.totals .kpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  min-width:160px;
  min-width: 130px;
  text-align: center;
}
.totals .kpi .lbl{font-size:12px;opacity:.7;font-weight:700}
.totals .kpi .val{font-size:18px;font-weight:900;margin-top:2px}
.iconbtn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:4px 8px;cursor:pointer;opacity:.85}
.iconbtn:hover{opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px);z-index:999}
.modalbox{max-width:980px;margin:6vh auto;background:rgba(17,24,39,.92);border:1px solid var(--line);border-radius:18px;padding:14px}
.modalhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modaltitle{font-size:18px;font-weight:900}
/* keep table from stretching horizontally */
.table{table-layout:fixed;width:100%}

/* widths: tune as you like */
th.col-eye, td.col-eye{width:84px}
td.col-eye{
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}
th.col-query, td.col-query{width:220px}
th.col-page, td.col-page{width:auto}
th.col-country, td.col-country{width:90px}
th.col-num, td.col-num{width:80px}
th.col-pos, td.col-pos{width:90px}

.pagecell{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.pagepath{font-weight:800;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pageactions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
body{overflow-x:hidden}
.spark{display:block}
.sp-axis{stroke:rgba(255,255,255,.18);stroke-width:1}
.sp-tick{stroke:rgba(255,255,255,.18);stroke-width:1}
.sp-txt{fill:rgba(255,255,255,.65);font-size:10px;font-weight:700}
.sp-line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2}
.sp-dot{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.55);stroke-width:1;cursor:crosshair}
.sp-dot:hover{fill:rgba(255,255,255,.18);stroke:rgba(255,255,255,.95)}
.sptooltip{
  position:absolute; z-index:5; pointer-events:none;
  background:rgba(17,24,39,.95); border:1px solid rgba(255,255,255,.18);
  padding:6px 8px; border-radius:10px;
  white-space:pre; font-size:11px; font-weight:800;
}
#favOnlyBtn.fav-on { color:#f4c430;border-color: #f4c430; }

.noterow{
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 10px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:8px;
  background:rgba(255,255,255,.03);
  align-items: center;
}
.iconbtn.fav{ color:rgba(255,255,255,.25); }
.iconbtn.fav.fav-on{ color:#f4c430; } /* gold */
#qpcMeta {display:none;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.topbarActions{display:flex;align-items:center;gap:8px;}
.tag{font-size:11px; padding:2px 6px; border-radius:10px; margin-left:6px;}
.tagNew{background: #10833d;color: #ffffff;font-weight: bold;}
.tagLost{background:#f48585; font-weight: bold; color: #000;}
.iconbtn.filter{ color: rgba(255,255,255,.25); }
.iconbtn.filter.filter-on{ color:#f4c430;border-color: #f4c430; }