/* ==========================================================================
   Joboola Partner Hub — same design system as the site ("Aurora White"):
   white glass header across the top, content in the site's 1240px column,
   the same font, cards, buttons, tabs and footer.
   Colours: --brand / --btn come from Admin → Appearance (same as the site).
   Volume (clicks, impressions, jobs) is drawn in the brand colour; click
   quality uses the site's own status colours: green valid · amber suspicious · red blocked.
   ========================================================================== */
@font-face{font-family:"Jakarta";font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/jakarta-latin.woff2) format("woff2-variations"),url(../fonts/jakarta-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/jakarta-latin-ext.woff2) format("woff2-variations"),url(../fonts/jakarta-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#2557D6;
  --brand-50:color-mix(in srgb,var(--brand) 6%,#fff); --brand-100:color-mix(in srgb,var(--brand) 12%,#fff); --brand-300:color-mix(in srgb,var(--brand) 45%,#fff);
  --ink:#0A1024; --ink2:#333D55; --text:#0A1024; --muted:#5B6680; --faint:#8E98AD;
  --line:#E5EAF3; --line2:#EEF2F8; --pearl:#F7F9FD; --card:#FFFFFF; --bg:#FFFFFF;
  --azure:#2F6BFF; --violet:#8B3DFF; --cyan:#22C3EE;
  /* click quality — the site's status colours */
  --valid:#12A06B; --valid-d:#0F7B55; --valid-l:#E6F5EE;
  --susp:#F5A524;  --susp-d:#A35A06;  --susp-l:#FFF4E2;
  --bad:#EF5350;   --bad-d:#C2362B;   --bad-l:#FDECEA;
  --vol:var(--brand); --imp:#94A3B8;
  --hi:inset 0 1px 0 rgba(255,255,255,.95);
  --sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 1px rgba(16,24,40,.02);
  --sh-2:0 1px 2px rgba(16,24,40,.04),0 14px 34px -18px rgba(30,64,175,.24);
  --sh-3:0 2px 6px rgba(16,24,40,.04),0 26px 56px -24px color-mix(in srgb,var(--brand) 55%,transparent);
  --ring:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);
  --r:18px; --r-s:12px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.55 Jakarta,"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(640px 300px at 12% -60px,color-mix(in srgb,var(--azure) 13%,transparent),transparent 70%) no-repeat,radial-gradient(560px 280px at 88% -40px,color-mix(in srgb,var(--violet) 10%,transparent),transparent 70%) no-repeat,#fff}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{margin:0;letter-spacing:-.018em;color:var(--ink)}
h1{font-weight:800}h2,h3{font-weight:700}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px}
.muted{color:var(--muted)}.small{font-size:13px}
::selection{background:var(--brand-100)}
:focus-visible{outline:0;box-shadow:var(--ring);border-radius:10px}
[hidden]{display:none!important}
.ph-wrap{max-width:1240px;margin:0 auto;padding:0 24px;width:100%}

/* ---------- logo (same as the site header) ---------- */
.logo-mark{display:inline-grid;filter:drop-shadow(0 6px 12px color-mix(in srgb,#4F46E5 38%,transparent));transition:transform .35s var(--ease)}
.logo-mark svg{width:36px;height:36px}
.ph-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important;font-weight:800;font-size:23px;letter-spacing:-.04em;flex:none}
.ph-brand:hover .logo-mark{transform:translateY(-1px) rotate(-4deg)}
.ph-badge{font-size:12px;font-weight:700;letter-spacing:0;color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;padding:3px 10px;margin-left:2px}

/* ---------- buttons & forms (site buttons) ---------- */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;font:inherit;font-weight:650;cursor:pointer;text-decoration:none!important;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--btn,var(--brand));color:var(--btn-ink,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08),0 1px 2px rgba(16,24,40,.12),0 10px 24px -12px var(--btn,var(--brand));
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),filter .2s}
.ph-btn:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(16,24,40,.12),0 18px 34px -14px var(--btn,var(--brand))}
.ph-btn:active{transform:translateY(0) scale(.985)}
.ph-btn.sm{padding:7px 14px;font-size:14px}.ph-btn.lg{padding:14px 26px;font-size:16px}.ph-btn.block{width:100%}
.ph-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--hi),var(--sh-1)}
.ph-btn.ghost:hover{color:var(--brand);border-color:var(--brand-300);box-shadow:var(--hi),var(--sh-2);filter:none}
.ph-btn.danger{color:var(--bad-d)}.ph-btn.danger:hover{color:var(--bad-d);border-color:#F5C2BD}
.ph-btn[disabled]{opacity:.5;pointer-events:none}
.ph-form{display:grid;gap:12px}
.ph-form label,.pg-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--ink)}
.ph-form label small,.pg-card label small{font-weight:400;color:var(--muted)}
.ph-form input:not([type=checkbox]),.ph-form select,.pg-card input:not([type=checkbox]),.ph-filters input,.ph-filters select,.inl select{border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;color:var(--text);background:#fff;outline:0;box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s;min-width:0}
.ph-form input:focus,.ph-form select:focus,.pg-card input:focus,.ph-filters :is(input,select):focus,.inl select:focus{border-color:var(--brand-300);box-shadow:var(--ring)}
.ph-chk,.pg-check{flex-direction:row!important;align-items:flex-start;gap:8px!important;font-weight:400!important}
.ph-chk input,.pg-check input{margin-top:4px;accent-color:var(--brand)}
.inl{display:inline}

/* ---------- header: white glass, like the site ---------- */
.ph-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid rgba(229,234,243,.9)}
.ph-head:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.55;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--azure) 40%,transparent) 25%,color-mix(in srgb,var(--violet) 35%,transparent) 55%,color-mix(in srgb,var(--cyan) 35%,transparent) 80%,transparent)}
.ph-head-in{display:flex;align-items:center;gap:20px;min-height:70px}
.ph-nav{display:flex;gap:2px;margin-left:8px;min-width:0}
.ph-nav a{display:inline-flex;align-items:center;gap:7px;color:var(--ink2);font-weight:600;font-size:15px;padding:8px 13px;border-radius:999px;white-space:nowrap;text-decoration:none!important;transition:background .2s,color .2s}
.ph-nav a .ic{display:none}
.ph-nav a:hover{background:var(--pearl);color:var(--ink)}
.ph-nav a.on{color:var(--brand);background:var(--brand-50)}
.ph-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.ph-me{position:relative}
.ph-me summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:999px;padding:5px 12px 5px 5px;border:1px solid var(--line);background:#fff;box-shadow:var(--hi),var(--sh-1);transition:box-shadow .2s}
.ph-me summary::-webkit-details-marker{display:none}
.ph-me summary:hover,.ph-me[open] summary{box-shadow:var(--hi),var(--sh-2)}
.ph-me summary>span:last-child{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ph-me summary strong{font-size:14px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-me summary small{font-size:12px;color:var(--muted)}
.ph-org-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--azure),var(--violet));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;overflow:hidden;flex:none;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--violet) 60%,transparent)}
.ph-org-av img{width:100%;height:100%;object-fit:contain;background:#fff}
.ph-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:8px;z-index:70;
  box-shadow:0 1px 0 #fff inset,0 24px 60px -24px rgba(15,23,42,.32),0 8px 24px -16px color-mix(in srgb,var(--brand) 40%,transparent);animation:phPop .16s var(--ease)}
@keyframes phPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.ph-menu-h{padding:8px 10px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.ph-menu-h strong{display:block;font-size:14px}.ph-menu-h small{color:var(--muted);font-size:12.5px;word-break:break-all}
.ph-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);font-weight:550;font-size:14.5px;text-decoration:none!important}
.ph-menu a:hover{background:var(--pearl)}
.ph-menu a .ic{color:var(--muted)}
.ph-menu a.out{color:var(--bad-d)}.ph-menu a.out .ic{color:var(--bad-d)}
.ph-burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);place-items:center;cursor:pointer;color:var(--ink2)}

/* mobile drawer (same as the site's) */
.ph-drawer{position:fixed;inset:0;z-index:150;background:rgba(10,16,36,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.ph-drawer-open .ph-drawer{opacity:1;visibility:visible}
.ph-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,90vw);background:#fff;border-radius:24px 0 0 24px;box-shadow:-30px 0 80px -30px rgba(15,23,42,.35);transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column;overflow:auto;padding:18px 14px}
.ph-drawer-open .ph-drawer-panel{transform:none}
.ph-drawer-top{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.ph-drawer-top>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.ph-drawer-top strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph-drawer-top small{color:var(--muted);font-size:12.5px}
.ph-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--pearl);display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.ph-drawer nav{display:grid;gap:2px}
.ph-drawer nav a{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;color:var(--ink);font-weight:550;text-decoration:none!important}
.ph-drawer nav a .ic{color:var(--muted)}
.ph-drawer nav a:hover{background:var(--pearl)}
.ph-drawer nav a.on{background:var(--brand-50);color:var(--brand)}.ph-drawer nav a.on .ic{color:var(--brand)}
.ph-drawer nav h4{margin:14px 10px 4px;font-size:12.5px;font-weight:600;color:var(--faint)}
.ph-drawer nav a.out{color:var(--bad-d)}

/* ---------- page head: title + date range (site tabs style) ---------- */
.ph-pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:28px;padding-bottom:6px}
.ph-pagehead h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;margin-right:auto}
.ph-range{display:flex;gap:4px;align-items:center;padding:5px;background:var(--pearl);border:1px solid var(--line2);border-radius:999px;max-width:100%}
.ph-range>button,.ph-custom summary{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;list-style:none;white-space:nowrap;transition:background .2s,color .2s}
.ph-custom summary::-webkit-details-marker{display:none}
.ph-range>button.on,.ph-custom.on summary{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08),0 6px 16px -10px rgba(30,64,175,.4)}
.ph-range>button:hover:not(.on),.ph-custom:not(.on) summary:hover{color:var(--ink)}
.ph-custom{position:relative}
.ph-custom>div{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;gap:8px;align-items:flex-end;box-shadow:0 24px 60px -24px rgba(15,23,42,.32);z-index:10}
.ph-custom label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.ph-custom input{border:1px solid var(--line);border-radius:10px;padding:7px 9px;font:inherit}
.ph-asadmin{margin-top:16px;background:#FFF8EB;color:#8A5300;border:1px solid #F7DDA8;border-radius:14px;padding:10px 14px;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ph-flash{margin-top:14px;border-radius:14px;padding:11px 14px;font-size:14px;background:var(--valid-l);color:var(--valid-d);border:1px solid color-mix(in srgb,var(--valid) 20%,#fff)}
.ph-flash.error{background:var(--bad-l);color:var(--bad-d);border-color:#F5C2BD}.ph-flash.info{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.ph-content{padding-top:18px;padding-bottom:56px;display:grid;gap:16px;align-content:start;min-height:calc(100vh - 70px - 160px)}

/* ---------- cards & KPIs (site cards) ---------- */
.ph-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;min-width:0;box-shadow:var(--hi),var(--sh-2)}
.ph-card h2{font-size:18px;margin-bottom:12px;letter-spacing:-.02em}
.ph-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}.ph-h h2{margin:0}.ph-h a{font-weight:600;font-size:14.5px}
.ph-kpis{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:14px}
.ph-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:2px;color:var(--text);text-decoration:none!important;min-width:0;box-shadow:var(--hi),var(--sh-2);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
a.ph-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 22%,var(--line));box-shadow:var(--hi),var(--sh-3)}
.ph-kpi>span:first-child{font-size:13px;color:var(--muted);font-weight:600}
.ph-kpi strong{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2}
.ph-kpi small{color:var(--muted);font-size:12.5px}
.ph-kpi.hero{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--violet) 10%,transparent),transparent 60%),linear-gradient(180deg,#fff,var(--brand-50));border-color:var(--brand-100);box-shadow:var(--hi),var(--sh-3)}
.ph-kpi.hero strong{font-size:40px;background:linear-gradient(100deg,var(--brand),#5B4BFF 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-kpi .d{align-self:flex-start;margin-top:2px}
.d{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}.d.up{color:var(--valid-d)}.d.dn{color:var(--bad-d)}.d.n{color:var(--muted)}
.qbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line2);margin:8px 0 6px}
.qbar i{display:block;height:100%}.qbar .v{background:var(--valid)}.qbar .s{background:var(--susp)}.qbar .x{background:var(--bad)}
.ph-legend{display:flex;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.ph-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ph-legend .v::before{background:var(--vol)}.ph-legend .x::before{background:var(--bad)}.ph-legend .i::before{background:var(--imp);height:3px;vertical-align:3px}
.ph-chart{position:relative;height:300px}.ph-chart.sm{height:220px}
.ph-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ph-grid2.wide-left{grid-template-columns:1.5fr 1fr}
.ph-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* tables (site .tbl) */
.ph-t{overflow-x:auto;margin:0 -6px}
.ph-t table{width:100%;border-collapse:collapse;font-size:14px}
.ph-t th{text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);padding:9px 10px;background:var(--pearl);border-bottom:1px solid var(--line2);white-space:nowrap}
.ph-t th:first-child{border-radius:10px 0 0 10px}.ph-t th:last-child{border-radius:0 10px 10px 0}
.ph-t td{padding:12px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.ph-t tr:hover td{background:color-mix(in srgb,var(--brand) 2.5%,#fff)}
.ph-t tr:last-child td{border-bottom:0}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.nw{white-space:nowrap}
.sub{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.ph-none{color:var(--muted);text-align:center;padding:18px!important}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#CBD5E1;margin-right:6px}.dot.ok{background:var(--valid)}.dot.bad{background:var(--bad)}
.vd{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.vd.valid{background:var(--valid-l);color:var(--valid-d)}.vd.suspicious{background:var(--susp-l);color:var(--susp-d)}.vd.invalid{background:var(--bad-l);color:var(--bad-d)}.vd.foreign{background:var(--pearl);color:var(--muted)}
.risk{display:inline-grid;place-items:center;min-width:28px;height:21px;border-radius:7px;background:var(--pearl);border:1px solid var(--line2);font-size:11.5px;font-weight:700;color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.ph-log code{font-size:12px;color:var(--muted)}

/* lists & bars — volume in the brand colour */
.bar{display:block;height:6px;border-radius:3px;background:var(--line2);overflow:hidden}.bar i{display:block;height:100%;background:var(--vol);border-radius:3px}.bar.x i{background:var(--bad)}
.ph-rank{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ph-rank li{display:grid;grid-template-columns:minmax(0,1fr) 90px 48px;gap:12px;align-items:center}
.ph-rank li>div{min-width:0}.ph-rank strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.ph-rank b,.ph-reasons b,.ph-split b{text-align:right;font-variant-numeric:tabular-nums}
.ph-reasons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ph-reasons li{display:grid;grid-template-columns:minmax(0,1fr) 110px 54px;gap:12px;align-items:center;font-size:14.5px}
.ph-split{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ph-split li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14.5px}.ph-split .bar{grid-column:1/-1}
.ph-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:110px;margin-top:8px}
.ph-hours i{display:block;height:max(3px,var(--h));background:linear-gradient(180deg,var(--vol),color-mix(in srgb,var(--vol) 45%,#fff));border-radius:4px 4px 0 0;opacity:.9;transition:opacity .2s}
.ph-hours i:hover{opacity:1}
.ph-hours-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px}

/* feeds */
.ph-feedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ph-feed{display:grid;gap:10px;color:var(--text);text-decoration:none!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.ph-feed:hover,.ph-feed.on{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:var(--hi),var(--sh-3)}
.ph-feed.on{background:linear-gradient(180deg,var(--brand-50),#fff 60%)}
.pf-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.pf-top strong{font-size:16px}
.pf-st{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--pearl);color:var(--muted);white-space:nowrap}
.pf-st.ok{background:var(--valid-l);color:var(--valid-d)}.pf-st.bad{background:var(--bad-l);color:var(--bad-d)}.pf-st.off{background:var(--pearl)}
.pf-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.pf-n div{display:flex;flex-direction:column}.pf-n b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.pf-n span{font-size:12px;color:var(--muted)}
.ph-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.ph-mini div{background:var(--pearl);border:1px solid var(--line2);border-radius:14px;padding:11px 13px;display:flex;flex-direction:column}.ph-mini span{font-size:12px;color:var(--muted)}.ph-mini b{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ph-warn{background:var(--susp-l);color:#7A4A06;border-radius:14px;padding:11px 13px;font-size:14px;margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}

/* click log filters */
.ph-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ph-filters select,.ph-filters input{padding:9px 11px;font-size:14px}
.ph-filters .grow{flex:1}

/* quality */
.ph-qhead{display:flex;gap:26px;align-items:center}
.qh-ring{--v:0;--s:0;width:136px;height:136px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--valid) 0 calc(var(--v)*1%),var(--susp) 0 calc((var(--v) + var(--s))*1%),var(--bad) 0 100%);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--valid) 60%,transparent)}
.qh-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 6px rgba(16,24,40,.06)}
.qh-ring b,.qh-ring span{position:relative}.qh-ring b{font-size:25px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.qh-ring span{font-size:12px;color:var(--muted)}
.qh-txt h2{font-size:22px;letter-spacing:-.025em}.qh-txt p{color:var(--muted);margin:6px 0 12px;max-width:62ch}
.qh-legend{display:flex;flex-wrap:wrap;gap:8px}
.qh-legend span{background:var(--pearl);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:13.5px}
.qh-legend span.v{background:var(--valid-l);border-color:transparent;color:var(--valid-d)}.qh-legend span.s{background:var(--susp-l);border-color:transparent;color:var(--susp-d)}.qh-legend span.x{background:var(--bad-l);border-color:transparent;color:var(--bad-d)}
.ph-how{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px}
.ph-how li{display:flex;flex-direction:column;padding-left:14px;border-left:3px solid var(--brand-100)}.ph-how span{color:var(--muted);font-size:14px}

/* tracking */
.ph-code{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--pearl);border:1px solid var(--line2);border-radius:14px;padding:11px 13px;margin:10px 0}
.ph-code code{flex:1;min-width:0;word-break:break-all}.ph-code code b{color:var(--brand)}
.ph-code .muted{flex-basis:100%}
.ph-params{margin:0 0 10px;padding-left:18px;font-size:14px;display:grid;gap:4px}
.ph-conv{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ph-conv li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px}.ph-conv time{color:var(--muted);font-size:12.5px}

/* welcome */
.ph-welcome{max-width:920px;display:grid;gap:22px}
.pg-kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-100);padding:4px 11px;border-radius:999px;justify-self:start}
.pw-head h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.035em;margin:12px 0 6px}.pw-head p{color:var(--muted);margin:0;font-size:16.5px}
.pw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pw-steps li{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--hi),var(--sh-2)}
.pw-ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--brand-50),color-mix(in srgb,var(--violet) 9%,#fff));border:1px solid var(--brand-100);color:var(--brand);display:grid;place-items:center;flex:none}
.pw-steps h3{font-size:16.5px;margin-bottom:4px}.pw-steps p{margin:0;color:var(--muted);font-size:14.5px}
.pw-go{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ph-empty{text-align:center;padding:40px 24px}.ph-empty p{color:var(--muted)}

/* ---------- footer (site footer bottom) ---------- */
.ph-foot{border-top:1px solid var(--line2);position:relative;background:#fff}
.ph-foot:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--azure) 35%,transparent),color-mix(in srgb,var(--violet) 30%,transparent),transparent)}
.ph-foot-in{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;font-size:13.5px;color:var(--muted)}
.ph-foot-in nav{display:flex;gap:16px;flex-wrap:wrap}.ph-foot-in a{color:var(--muted)}.ph-foot-in a:hover{color:var(--brand)}

/* ---------- sign-in / invite / reset: the site's sign-in page ---------- */
.ph-gate .ph-content{min-height:0}
.pg-wrap{display:grid;place-items:center;padding:56px 16px 40px;min-height:calc(100vh - 70px - 110px)}
.pg-card{width:100%;max-width:460px;display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,40px);box-shadow:var(--hi),var(--sh-2)}
.pg-card h1{font-size:clamp(24px,3vw,30px);letter-spacing:-.03em;line-height:1.15}
.pg-sub{color:var(--muted);margin:-4px 0 4px}
.pg-card form{display:grid;gap:14px}
.pg-err{background:var(--bad-l);color:var(--bad-d);padding:11px 14px;border-radius:12px;font-size:14px}
.pg-ok{background:var(--valid-l);color:var(--valid-d);padding:11px 14px;border-radius:12px;font-size:14px}
.pg-alt{text-align:center;margin:2px 0 0;font-size:14px}
.pg-note{border-top:1px solid var(--line2);padding-top:14px;color:var(--muted);font-size:13.5px;margin:4px 0 0}
.pg-points{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--muted);max-width:560px}
.pg-points li{display:inline-flex;align-items:center;gap:7px}
.pg-points i{width:8px;height:8px;border-radius:50%}
.pg-points .v{background:var(--valid)}.pg-points .s{background:var(--susp)}.pg-points .x{background:var(--bad)}
.ph-gate .ph-head-in{justify-content:space-between}
.ph-gate .ph-back{font-weight:600;font-size:15px;color:var(--ink2);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--hi),var(--sh-1);text-decoration:none!important}
.ph-gate .ph-back:hover{color:var(--brand);box-shadow:var(--hi),var(--sh-2)}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:phVtOut .16s ease-in both}
::view-transition-new(root){animation:phVtIn .24s var(--ease) both}
@keyframes phVtOut{to{opacity:0}}
@keyframes phVtIn{from{opacity:0;transform:translateY(4px)}}
.ph-head{view-transition-name:ph-header}
::view-transition-old(ph-header),::view-transition-new(ph-header){animation:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1280px){.ph-kpis{grid-template-columns:repeat(3,1fr)}.ph-mini{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1180px){.ph-nav{display:none}.ph-burger{display:grid}}
@media (max-width:1000px){.ph-grid2,.ph-grid2.wide-left,.ph-grid3,.pw-steps{grid-template-columns:1fr}}
@media (max-width:860px){
  .ph-kpis{grid-template-columns:1fr 1fr}.ph-kpi.hero,.ph-kpis .ph-kpi.quality{grid-column:1/-1}
  .ph-qhead{flex-direction:column;align-items:flex-start}
  .ph-me summary>span:last-child{display:none}.ph-me summary{padding:4px}
}
@media (max-width:640px){
  .ph-wrap{padding:0 16px}
  .ph-head-in{min-height:60px;gap:10px}
  .ph-brand{font-size:20px}.logo-mark svg{width:32px;height:32px}
  .ph-badge{display:none}
  .ph-burger{width:38px;height:38px}
  .ph-pagehead{padding-top:18px}
  .ph-range{width:100%;overflow-x:auto;scrollbar-width:none}.ph-range::-webkit-scrollbar{display:none}
  .ph-custom>div{position:fixed;left:12px;right:12px;top:auto;bottom:12px;flex-wrap:wrap}
  .ph-card{padding:18px 16px}
  .pg-wrap{padding:28px 12px 32px;align-items:start}
}
@media (max-width:480px){.ph-kpi strong{font-size:22px}.ph-kpi.hero strong{font-size:32px}.ph-mini{grid-template-columns:1fr 1fr}.ph-rank li{grid-template-columns:minmax(0,1fr) 40px}.ph-rank .bar{display:none}.ph-reasons li{grid-template-columns:minmax(0,1fr) 50px}.ph-reasons .bar{display:none}.ph-gate .ph-back span{display:none}}

/* v2.16 — Matte finish (Admin → Appearance → Look): flat surfaces, no glow, blur or gradients */
body.finish-matte{--hi:0 0 #0000;--sh-1:0 1px 2px rgba(16,24,40,.06);--sh-2:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.04);--sh-3:0 2px 4px rgba(16,24,40,.06),0 8px 20px rgba(16,24,40,.08);--ring:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);--line:#E3E6EC;--pearl:#F5F6F8}
body.ph.finish-matte{background:#fff!important}
.finish-matte .logo-mark{filter:none!important}
.finish-matte .ph-btn,.finish-matte .ph-btn:hover{background:var(--btn,var(--brand));box-shadow:none;transform:none}
.finish-matte .ph-btn:hover{filter:brightness(.92)}
.finish-matte .ph-btn.ghost{background:#fff;box-shadow:none}.finish-matte .ph-btn.ghost:hover{background:var(--pearl);filter:none}
.finish-matte .ph-head{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
.finish-matte .ph-head:after,.finish-matte .ph-foot:before{display:none}
.finish-matte .ph-org-av{background:var(--brand)}
.finish-matte .ph-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 4px 16px rgba(16,24,40,.12)}
.finish-matte .ph-drawer{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,16,36,.4)}
.finish-matte .ph-range>button.on,.finish-matte .ph-custom.on summary{box-shadow:0 1px 2px rgba(16,24,40,.1)}
.finish-matte .ph-kpi.hero{background:#fff}
.finish-matte .ph-kpi.hero strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--brand)}
.finish-matte a.ph-kpi:hover,.finish-matte .ph-feed:hover,.finish-matte .ph-feed.on{transform:none}
.finish-matte .ph-feed.on{background:var(--brand-50)}
.finish-matte .ph-hours i{background:var(--vol)}
.finish-matte .qh-ring{box-shadow:none}
.finish-matte .pw-ic{background:var(--brand-50)}
.finish-matte .ph-kpi,.finish-matte .ph-kpi.hero{box-shadow:var(--sh-1)!important}