/* ====== Palette & base ====== */
:root{
  --bg:#0b1220; --card:#121a2a; --muted:#9fb1ca; --grid:#25324a;
  --fy23:#6ea8fe; --fy24:#f0b429; --fy25:#2e8b57; --down:#e06161;
  --violet:#6366f1; --orange:#fb923c;
}
.uis-page{max-width:1220px;margin:36px auto;padding:0 16px}
.uis-traffic-wrap,.uis-wrap{margin:28px 0}
.uis-traffic-card,.uis-card{background:var(--card);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.4);padding:22px 20px 28px;position:relative;overflow:hidden}
.uis-traffic-header,.uis-header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.uis-traffic-title,.uis-title{font-size:clamp(18px,2.2vw,28px);font-weight:800;letter-spacing:.3px;color:#fff;margin:.5em 0}
.uis-traffic-subtitle,.uis-sub{color:var(--muted);font-size:14px}
.uis-traffic-controls,.uis-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.uis-traffic-btn,.uis-btn{appearance:none;border:1px solid #334566;background:#172239;color:#e8f1ff;padding:8px 14px;border-radius:12px;cursor:pointer;font-weight:700}
.uis-traffic-btn:hover,.uis-btn:hover{background:#1b2946}
.uis-traffic-legend,.uis-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.uis-traffic-key,.uis-key{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.uis-traffic-swatch,.uis-swatch{width:12px;height:12px;border-radius:3px}
.uis-traffic-swatch--fy23{background:var(--fy23)} .uis-traffic-swatch--fy24{background:var(--fy24)} .uis-traffic-swatch--fy25{background:var(--fy25)}
.uis-traffic-note,.uis-note{margin-top:10px;color:var(--muted);font-size:12px}

/* ====== Overall traffic (static bars already in HTML) ====== */
.uis-traffic-chart{margin-top:18px;display:grid;grid-template-columns:64px 1fr;gap:10px;min-height:360px}
.uis-traffic-y{display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:12px}
.uis-traffic-grid{position:relative}
.uis-traffic-grid::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(to top,transparent 0 32px, rgba(37,50,74,.7) 32px 33px);
  mask:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,1) 80%);}
.uis-traffic-groups{position:relative;height:100%;display:flex;gap:28px;padding:6px 10px 0 4px}
.uis-traffic-group{flex:1;display:flex;flex-direction:column}
.uis-traffic-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.uis-traffic-bar{--h:0%;width:40px;border-radius:10px 10px 6px 6px;height:var(--h);position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 86%, #ffffff 0%), var(--bar));}
.uis-traffic-bar--fy23{--bar:var(--fy23)} .uis-traffic-bar--fy24{--bar:var(--fy24)} .uis-traffic-bar--fy25{--bar:var(--fy25)}
.uis-traffic-bar::after{content:attr(data-label);position:absolute;bottom:calc(var(--h) + 8px);left:50%;transform:translateX(-50%);
  background:#0f1a2d;color:#d7e6ff;padding:6px 8px;border:1px solid #2c3e61;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .35s, translate .35s;pointer-events:none}
.uis-traffic-bar:hover::after,.uis-traffic-bar:focus-visible::after{opacity:1;translate:0 0}
.uis-traffic-x{margin-top:10px;text-align:center;color:#d0ddf4;font-weight:700}
.uis-traffic-animate .uis-traffic-bar{animation:uis-traffic-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay) forwards}
@keyframes uis-traffic-grow{from{height:0} to{height:var(--h)}}
@media (max-width:680px){.uis-traffic-chart{grid-template-columns:44px 1fr}.uis-traffic-bar{width:28px}.uis-traffic-bars{gap:10px}}

/* ====== Duo bars (Events / News) ====== */
.uis-duo{position:relative;padding:10px 6px 6px}
.uis-duo-grid{position:absolute;inset:0;pointer-events:none}
.uis-duo-grid::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(to right, rgba(37,50,74,0) 0, rgba(37,50,74,0) 90px, rgba(37,50,74,.7) 90px, rgba(37,50,74,.7) 91px);
  mask:linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.95) 10%)}
.uis-duo-head{display:grid;grid-template-columns:320px 1fr;gap:10px;color:var(--muted);font-size:12px;margin:0 0 6px}
.uis-duo-axis{display:flex;justify-content:space-between;padding:0 12px 0 0}
.uis-duo-rows{display:flex;flex-direction:column;gap:12px}
.uis-duo-row{display:grid;grid-template-columns:320px 1fr;gap:10px;align-items:center}
.uis-duo-label{color:#d0ddf4;font-weight:600;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.uis-duo-bars{display:block;gap:14px;align-items:center}
.uis-duo-bar{--w:0%;--bar:#999;height:14px;width:var(--w);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 86%, #ffffff 0%), var(--bar));
  border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08)}
.uis-duo-bar--views{--bar:var(--fy25)} .uis-duo-bar--users{--bar:var(--fy24)}
.uis-duo-val{color:var(--muted);font-size:12px;width:70px}
.uis-duo-animate .uis-duo-bar{animation:uis-duo-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay) forwards}
@keyframes uis-duo-grow{from{width:0} to{width:var(--w)}}

/* ====== GA4 compare (current vs previous) ====== */
.uis-ga4-chart{position:relative;margin-top:14px;padding:10px 8px 6px}
.uis-ga4-grid{position:absolute;inset:0;pointer-events:none}
.uis-ga4-grid::before{
  content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(to right, rgba(37,50,74,0) 0, rgba(37,50,74,0) 90px, rgba(37,50,74,.7) 90px, rgba(37,50,74,.7) 91px);
  mask: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.95) 12%);
}
.uis-ga4-rows{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.uis-ga4-row{display:grid;grid-template-columns: 220px 1fr;gap:12px;align-items:center}
.uis-ga4-label{color:#d0ddf4;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uis-ga4-stack{position:relative;display:flex;flex-direction:column;gap:8px;padding-right:10px}
.uis-ga4-line{display:flex;align-items:center;gap:10px}
.uis-ga4-bar{--w:0%;--bar-color:#888;width:var(--w);height:14px;border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 86%, #ffffff 0%), var(--bar-color));
  box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08);}
.uis-ga4-bar--prev{--bar-color:var(--fy24)} .uis-ga4-bar--curr{--bar-color:var(--fy25)}
.uis-ga4-val{color:#9fb1ca;font-size:12px;min-width:90px}
.uis-ga4-yoy{position:absolute;left:calc(var(--x,0%) + 12px);top:50%;transform:translateY(-50%);
  background:#0f1a2d;color:#d7e6ff;border:1px solid #2c3e61;border-radius:999px;padding:4px 8px;font-size:12px;white-space:nowrap;}
.uis-ga4-animate .uis-ga4-bar{animation:uis-ga4-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay,0ms) forwards}
@keyframes uis-ga4-grow{from{width:0} to{width:var(--w)}}

/* ====== KPI tiles (Search Overview) ====== */
.srch-kpis{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;margin-top:10px}
.srch-kpi{border:1px solid var(--grid);border-radius:12px;padding:14px;background:rgba(255,255,255,.03);display:flex;gap:10px;align-items:center}
.srch-kpi .icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:900;color:#0b1220}
.srch-kpi.clicks .icon{background:var(--fy25)}
.srch-kpi.impr .icon{background:var(--violet)}
.srch-kpi.ctr .icon{background:var(--fy24)}
.srch-kpi.pos .icon{background:var(--orange)}
.srch-kpi .meta{min-width:0}
.srch-kpi .label{font-size:12px;color:var(--muted)}
.srch-kpi .value{font-weight:800;font-size:20px;line-height:1;margin-top:2px}
.srch-kpi .delta{margin-left:auto;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}
.srch-kpi .delta.up{color:#22c55e}
.srch-kpi .delta.down{color:#ef4444}
.srch-kpi .delta.better{color:var(--orange)}

/* ====== KPI tiles ====== */
.srch-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.srch-kpi{background:rgba(255,255,255,.02);border:1px solid #2a3550;border-radius:14px;padding:14px 14px 16px;display:grid;gap:6px}
.srch-kpi-top{display:flex;align-items:center;gap:10px}
.srch-kpi-dot{width:12px;height:12px;border-radius:3px}
.srch-kpi--clicks .srch-kpi-dot{background:var(--fy25)}
.srch-kpi--impr   .srch-kpi-dot{background:var(--violet)}
.srch-kpi--ctr    .srch-kpi-dot{background:var(--fy24)}
.srch-kpi--pos    .srch-kpi-dot{background:var(--orange)}
.srch-kpi-name{font-weight:800}
.srch-kpi-value{font-size:28px;font-weight:900;letter-spacing:.3px}
.srch-kpi-delta{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-weight:800;width:max-content;font-size:13px}
.srch-kpi-delta--up{color:var(--fy24);border:1px solid color-mix(in srgb, var(--fy24) 60%, #000 40%)}
.srch-kpi-delta--down{color:var(--down);border:1px solid color-mix(in srgb, var(--down) 60%, #000 40%)}

/* ====== Top Queries (Clicks + Impressions) ====== */
.uis-qc-card{padding:18px}
.uis-qc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.uis-qc-title{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:.3px;color:#fff}
.uis-qc-subtitle{color:var(--muted);font-size:13px;margin-top:2px}
.uis-qc-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.uis-qc-headrow{display:grid;grid-template-columns: 40px 1fr 44% 110px 100px;gap:12px;color:var(--muted);font-size:12px;padding:8px 4px 6px;border-bottom:1px solid color-mix(in srgb, var(--grid) 75%, transparent)}
.uis-qc-headbars{text-align:center}
.uis-qc-rows{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.uis-qc-row{display:grid;grid-template-columns: 40px 1fr 44% 110px 100px;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px dashed color-mix(in srgb, var(--grid) 55%, transparent)}
.uis-qc-rank{color:#d0ddf4;font-weight:800;text-align:right}
.uis-qc-query{color:#e8f1ff;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uis-qc-barwrap{position:relative;width:100%;height:34px;display:grid;grid-template-rows:16px 16px;gap:2px}
.uis-qc-bar{--w:0%;--bar-color:#888;width:var(--w);height:100%;border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 86%, #ffffff 0%), var(--bar-color));
  box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08);}
.uis-qc-bar--impr{--bar-color:var(--violet)} .uis-qc-bar--click{--bar-color:var(--fy25)}
.uis-qc-val{position:absolute;right:6px;font-size:12px;color:#d7e6ff}
.uis-qc-val--impr{top:1px} .uis-qc-val--click{bottom:1px}
.uis-qc-ctr,.uis-qc-pos{color:#d0ddf4;font-weight:700;text-align:right}
.uis-qc-animate .uis-qc-bar{animation:uis-qc-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay) forwards}
@keyframes uis-qc-grow{from{width:0} to{width:var(--w)}}
@media (max-width:760px){
  .uis-qc-headrow,.uis-qc-row{grid-template-columns:28px 1fr 1fr}
  .uis-qc-headrow>:nth-child(4),.uis-qc-headrow>:nth-child(5),
  .uis-qc-row>:nth-child(4),.uis-qc-row>:nth-child(5){display:none}
}

/* ====== Top Pages (stacked), Ranked Programs, College donuts ====== */
.uis-pages-head{display:grid;grid-template-columns:230px 1fr;gap:10px;color:var(--muted);font-size:12px;margin:0 0 6px}
.uis-pages-axis{display:flex;justify-content:space-between;padding:0 12px 0 0}
.uis-pages-chart{margin-top:8px;position:relative;padding:10px 6px 6px}
.uis-pages-grid{position:absolute;inset:0;pointer-events:none}
.uis-pages-grid::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(to right, rgba(37,50,74,0) 0, rgba(37,50,74,0) 90px, rgba(37,50,74,.7) 90px, rgba(37,50,74,.7) 91px);
  mask:linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.95) 12%)}
.uis-pages-rows{display:flex;flex-direction:column;gap:12px}
.uis-pages-row{display:grid;grid-template-columns:230px 1fr;gap:10px;align-items:center}
.uis-pages-label{color:#d0ddf4;font-weight:600;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.uis-pages-stack{position:relative;display:flex;flex-direction:column;gap:6px;padding-right:8px}
.uis-pages-bar{--w:0%;--bar:#999;height:14px;width:var(--w);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 86%, #ffffff 0%), var(--bar));
  border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08)}
.uis-pages-bar--fy24{--bar:var(--fy24)} .uis-pages-bar--fy25{--bar:var(--fy25)}
.uis-pages-yoy{position:absolute;left:calc(var(--w-fy25) + 10px);top:50%;transform:translateY(-50%);background:#0f1a2d;color:#d7e6ff;border:1px solid #2c3e61;border-radius:8px;padding:4px 8px;font-size:12px;white-space:nowrap}
.uis-pages-animate .uis-pages-bar{animation:uis-pages-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay) forwards}
@keyframes uis-pages-grow{from{width:0} to{width:var(--w)}}
.uis-rank-chart{position:relative;margin-top:12px;padding:8px}
.uis-rank-grid{position:absolute;inset:0;pointer-events:none}
.uis-rank-grid::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(to right, rgba(37,50,74,0) 0, rgba(37,50,74,0) 90px, rgba(37,50,74,.7) 90px, rgba(37,50,74,.7) 91px);
  mask:linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.95) 10%)}
.uis-rank-rows{display:flex;flex-direction:column;gap:10px}
.uis-rank-row{display:grid;grid-template-columns:36px auto 1fr max-content;gap:10px;align-items:center}
.uis-rank-rank{color:#d0ddf4;font-weight:800;text-align:right}
.uis-rank-label{color:#d0ddf4;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uis-rank-barwrap{position:relative;height:16px;width:100%}
.uis-rank-bar{--w:0%;--bar:var(--fy25);width:var(--w);height:100%;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar) 86%, #ffffff 0%), var(--bar));
  border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.08)}
.uis-rank-value{color:var(--muted);font-size:12px}
.uis-rank-animate .uis-rank-bar{animation:uis-rank-grow 900ms cubic-bezier(.23,1,.32,1) var(--delay) forwards}
@keyframes uis-rank-grow{from{width:0} to{width:var(--w)}}

.uis-col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:14px}
.uis-col-card{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,0.02);border:1px solid #2a3550;border-radius:16px;padding:14px 16px}
.uis-col-gauge{--p:0;--accent:var(--fy25);width:110px;height:110px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1deg), var(--grid) 0);
  position:relative;flex:0 0 auto;}
.uis-col-gauge::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--card);box-shadow:inset 0 2px 0 rgba(255,255,255,.07)}
.uis-col-gauge-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.uis-col-gauge-sub{font-size:12px;color:var(--muted);display:block;margin-top:2px;text-align:center}
.uis-col-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.uis-col-name{font-size:18px;font-weight:800;letter-spacing:.2px;color:#fff}
.uis-col-views{font-weight:700;color:#fff}
.uis-col-delta{font-weight:800;font-size:14px;padding:4px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;width:max-content}
.uis-col-delta--up{color:var(--fy24);border:1px solid color-mix(in srgb, var(--fy24) 60%, #000 40%)}
.uis-col-delta--down{color:var(--down);border:1px solid color-mix(in srgb, var(--down) 60%, #000 40%)}

/* ====== Tables (AdWords) ====== */
.uis-table{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:12px}
.uis-table thead th{font-size:13px;color:#cfe1ff;text-align:left;padding:8px 10px}
.uis-row{background:rgba(255,255,255,.03);border:1px solid #2a3550;color:#fff}
.uis-row td,.uis-row th{padding:10px;border-top:1px solid #2a3550;border-bottom:1px solid #2a3550}
.uis-row th:first-child,.uis-row td:first-child{border-left:1px solid #2a3550;border-top-left-radius:10px;border-bottom-left-radius:10px}
.uis-row th:last-child,.uis-row td:last-child{border-right:1px solid #2a3550;border-top-right-radius:10px;border-bottom-right-radius:10px}
.uis-pos{color:var(--fy24)} .uis-neg{color:#ff7b7b} .uis-mono{font-variant-numeric:tabular-nums}
.uis-kicker{color:var(--muted);font-size:12px;margin-top:-4px;margin-bottom:10px}

.kpi-card {
  display:inline-block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px;
  margin: 8px;
  min-width: 160px;
  color: #fff;
}
.kpi-card .kpi-label {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 14px;
}
.kpi-card .legend {
  display:inline-block;
  width:12px; height:12px;
  margin-right:6px;
  border-radius:3px;
}
.kpi-card .legend.orange { background:#ff9800; }
.kpi-card .legend.purple { background:#9c27b0; }
.kpi-card .legend.green { background:#4caf50; }
.kpi-card .legend.red { background:#f44336; }
.kpi-card .kpi-value {
  font-size: 22px;
  font-weight: bold;
}
.kpi-card .kpi-delta.up { color:#4caf50; font-size: 14px; }
.kpi-card .kpi-delta.down { color:#f44336; font-size: 14px; }

  .conv-step { margin: 12px 0; }
  .conv-label { font-weight: bold; margin-bottom: 4px; }
  .conv-barwrap {
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    height: 18px;
  }
  .conv-bar { height: 100%; transition: width 0.6s ease; }
  .conv-value { font-size: 14px; margin-top: 2px; opacity: 0.8; }
  .conv-rate { margin-top: 12px; font-weight: bold; color: #ffc107; }