/* Polymarkets "own look" theme, first pass (2026-11-13, DEV only). Avni: "give our website a much better look, more
   premium, luxury, no more polymarket mimic", in the direction of the /intelligence page.
   One layer over the existing styles: it redefines the design tokens and restyles the shared chrome. Loaded last.
   Turn off on any dev page with ?lux=0 (and back with ?lux=1). */

/* ---------- tokens: dark ---------- */
:root[data-theme="dark"]{
  --bg:#050608; --bg-card:#0B0D12; --bg-surface:#0B0D12; --bg-hover:#12151C; --bg-input:#0F1218;
  --border:rgba(148,158,180,.11); --border-light:rgba(148,158,180,.24);
  --accent:#8B5CF6; --accent-hover:#7C3AED; --accent-soft:rgba(139,92,246,.12); --accent-glow:rgba(139,92,246,.24);
  --text:#EEF1F6; --text-strong:#fff; --text-secondary:#A2ABBA; --text-muted:#6D7686;
  --radius:14px; --radius-lg:16px; --radius-md:12px; --radius-sm:9px;
  --shadow-sm:0 1px 0 rgba(255,255,255,.03) inset; --shadow:0 18px 40px -22px rgba(0,0,0,.8); --shadow-lg:0 30px 70px -28px rgba(0,0,0,.85);
  --lux-g:linear-gradient(90deg,#8B5CF6,#F97316); --lux-a:#8B5CF6; --lux-b:#F97316;
}
/* ---------- tokens: light ---------- */
:root:not([data-theme="dark"]){
  --bg:#FBFAF8; --bg-card:#FFFFFF; --bg-surface:#FFFFFF; --bg-hover:#F3F1EE; --bg-input:#F3F1EE;
  --border:#E7E3DD; --border-light:#D3CEC6;
  --accent:#6D3FE0; --accent-hover:#5A2FC7; --accent-soft:rgba(109,63,224,.09); --accent-glow:rgba(109,63,224,.18);
  --text:#14110F; --text-secondary:#6B655E;
  --radius:14px; --radius-lg:16px; --radius-md:12px; --radius-sm:9px;
  --lux-g:linear-gradient(90deg,#6D3FE0,#EA580C); --lux-a:#6D3FE0; --lux-b:#EA580C;
}

/* ---------- page ---------- */
html[data-theme="dark"] body{background:
  radial-gradient(1100px 520px at 12% -8%,rgba(139,92,246,.10),transparent 62%),
  radial-gradient(900px 460px at 96% 4%,rgba(249,115,22,.05),transparent 62%),var(--bg);background-attachment:fixed}
body{letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1,h2,h3,.section-title,.page-title{letter-spacing:-.022em}
h1{font-weight:800}
::selection{background:rgba(139,92,246,.35)}
a{text-underline-offset:3px}

/* ---------- header ---------- */
/* The frosted glass sits on a pseudo-element, NOT on the header itself: backdrop-filter on the header made it the
   containing block of every position:fixed child, so the phone's account sheet (fixed to the screen bottom) hung from the
   header and opened above the top of the screen (owner 2026-11-13). */
.site-header{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--border)!important}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.site-header::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--lux-g);opacity:.55;pointer-events:none}
.site-header{position:sticky}
.site-header .logo-text,.site-header .pn-brand-name,.site-header .site-title{letter-spacing:-.02em;font-weight:800}

/* ---------- buttons ---------- */
.btn-primary,.pm-btn-primary,.hdr-poly-cta,.cta-btn,.btn.btn-primary,button.primary,.tpg-btn-train{
  background:var(--lux-g)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 10px 26px -12px var(--accent-glow)}
.btn-primary:hover,.pm-btn-primary:hover,.hdr-poly-cta:hover,.cta-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn,.pm-btn,button{border-radius:var(--radius-md)}
.hdr-poly-cta-dot{background:#fff!important}

/* ---------- cards / surfaces ---------- */
.market-card,.mc,.card,.pm-perk,.pm-card,.panel,.tp,.acc-card,.news-card,.guide-card,.stat-card{
  border-color:var(--border)!important;box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .market-card,html[data-theme="dark"] .mc,html[data-theme="dark"] .card,html[data-theme="dark"] .tp,html[data-theme="dark"] .news-card,html[data-theme="dark"] .guide-card{
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-card)}
.market-card:hover,.mc:hover,.news-card:hover,.guide-card:hover{border-color:var(--border-light)!important;transform:translateY(-2px);box-shadow:var(--shadow)}
.market-card,.mc,.news-card,.guide-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}

/* ---------- inputs, tabs, pills ---------- */
input[type=text],input[type=email],input[type=search],input[type=number],input[type=password],select,textarea{border-radius:var(--radius-md)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lux-a)!important;box-shadow:0 0 0 3px var(--accent-soft)}
/* (removed 2026-11-13: a border-image on active tabs drew a square frame around rounded pills) */
.pn-cat.active,.cat-pill.active,.chip.active,.pill.active{background:var(--accent-soft)!important;border-color:var(--lux-a)!important;color:var(--text)!important}

/* ---------- small marks ---------- */
.badge-new,.nav-badge,.pn-badge{background:var(--lux-g)!important;color:#fff!important}
hr,.divider{border-color:var(--border)}
.site-footer,footer.site-footer{border-top:1px solid var(--border);background:transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(148,158,180,.22);border-radius:10px;border:2px solid transparent;background-clip:content-box}
@media (prefers-reduced-motion:reduce){.market-card:hover,.mc:hover,.news-card:hover,.guide-card:hover,.btn-primary:hover{transform:none}}

/* ---------- modals (first pass): one look for every dialog ---------- */
.tm-modal-overlay,.auth-modal-overlay,.cs-modal,.tpg-modal,.logout-modal,[class$="-modal-overlay"],.sheet-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-theme="dark"] .tm-modal-overlay,html[data-theme="dark"] .auth-modal-overlay,html[data-theme="dark"] .cs-modal,html[data-theme="dark"] .tpg-modal,html[data-theme="dark"] .logout-modal{background:rgba(3,4,6,.74)!important}
.tm-modal,.auth-modal,.cs-modal-box,.tpg-box,.tpg-modal>div,.logout-modal>div,.dual-modal{
  border:1px solid var(--border-light)!important;border-radius:20px!important;box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03)!important;position:relative}
html[data-theme="dark"] .tm-modal,html[data-theme="dark"] .auth-modal,html[data-theme="dark"] .cs-modal-box,html[data-theme="dark"] .tpg-box,html[data-theme="dark"] .dual-modal{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),#0B0D12!important}
.tm-modal::before,.auth-modal::before,.cs-modal-box::before,.tpg-box::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:20px 20px 0 0;background:var(--lux-g);pointer-events:none}
.tm-modal-title,.auth-modal-title,.cs-modal-h{letter-spacing:-.02em;font-weight:800}
.tm-modal-cta,.auth-modal-submit,.tpg-btn-train,.cs-modal-box .btn-primary{background:var(--lux-g)!important;border:0!important;color:#fff!important;border-radius:12px!important;font-weight:800!important;box-shadow:0 12px 30px -14px var(--accent-glow)}
.tm-modal-cta.tm-modal-cta-login{background:transparent!important;border:1px solid var(--border-light)!important;color:var(--text)!important;box-shadow:none}
.tm-modal-close,.cs-modal-x,.auth-modal-close{border-radius:50%;opacity:.7}.tm-modal-close:hover,.cs-modal-x:hover,.auth-modal-close:hover{opacity:1}
.auth-modal-field input{border-radius:12px!important}

/* ---------- Intelligence entry: top bar + mobile menu (highlighted) ---------- */
.pn-intel{position:relative;display:inline-flex;align-items:center;gap:7px;font-weight:700!important;color:#fff!important;padding:7px 13px!important;border-radius:99px;
  background:linear-gradient(var(--bg-card,#0B0D12),var(--bg-card,#0B0D12)) padding-box,linear-gradient(90deg,#8B5CF6,#F97316) border-box;border:1px solid transparent!important}
:root:not([data-theme="dark"]) .pn-intel{color:#14110F!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#6D3FE0,#EA580C) border-box}
.pn-intel:hover{filter:brightness(1.15)}
.pn-intel-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(90deg,#8B5CF6,#F97316);box-shadow:0 0 10px rgba(249,115,22,.8)}
.mdr-intel{font-weight:700!important}.mdr-intel i{background:linear-gradient(90deg,#8B5CF6,#F97316);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- phone header: show the site icon (it was hidden and the name was cut to "The P…") ---------- */
@media (max-width:900px){
  .pn-logo .pn-mark{display:block!important;width:30px;height:30px;flex:0 0 30px}
  .pn-logo .logo-text{display:none!important}
  .pn-logo{display:inline-flex!important;align-items:center}
}

/* ---------- fluid layout (owner 2026-11-13): header, category bar and footer span the screen; content boxes a bit wider ---------- */
:root{--max-width:1480px;--fluid-pad:clamp(16px,3.2vw,56px)}
.site-header>.container,.site-header .pn-in,.subnav>.container,.pn-sub>.container,.pn-cbar>.container,.site-footer>.container,footer.site-footer .container{max-width:none!important;width:100%;padding-inline:var(--fluid-pad)!important}
main>.container,main .container{max-width:var(--max-width)}
.mya-in,.myi{max-width:1320px}.page-intel .iq .wrap{max-width:1360px}.page-intel .iq-hero .wrap{gap:64px}
@media (min-width:1700px){:root{--max-width:1560px}}

/* ---------- in-feed ad with a cover picture (owner 2026-11-13: "messed up and cut") ----------
   The card is held to the row height of the market cards (176 px), which left the 640x200 picture a 66 px strip, cropped
   to about half. The picture carries the message, so the text line under it steps aside and the picture is shown whole. */
.markets-grid>.ad-infeed.ad-has-cover .ad-text,.markets-grid>.ad-geo>.ad-infeed.ad-has-cover .ad-text{display:none}
/* the picture keeps its own 16:5 shape at the card's full width (nothing cropped, no bars); the button row takes what is left */
.ad-infeed.ad-has-cover .ad-cover{flex:0 0 auto;aspect-ratio:16/5;min-height:0;background:#0B0D12}
.ad-infeed.ad-has-cover .ad-cover img{object-fit:cover;object-position:center}
.ad-infeed.ad-has-cover .ad-card-link{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ad-infeed.ad-has-cover .ad-cta{margin:auto 14px auto 14px;align-self:flex-start}
/* the "Ad · advertise here" note sits at the end of the button's row instead of on a row of its own (owner 2026-11-13) */
.markets-grid>.ad-infeed,.markets-grid>.ad-geo>.ad-infeed{position:relative}
.markets-grid .ad-infeed .ad-label{position:absolute;inset-inline-end:14px;bottom:20px;width:auto;padding:0;margin:0;background:none;border:0}

/* ---------- count badges (owner 2026-11-13: the number sat at the top of its circle in the desktop and phone menus) ---------- */
.subnav-badge{display:inline-block!important;height:18px;min-width:18px;line-height:18px!important;padding:0 5px!important;text-align:center;box-sizing:border-box;vertical-align:middle;font-variant-numeric:tabular-nums}
.snm-btn .subnav-badge{align-self:center}

/* ---------- phone bottom bar in the site's own look ---------- */
.mobile-bottom-nav{background:color-mix(in srgb,var(--bg) 86%,transparent)!important;backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--border)!important}
.mobile-bottom-nav::before{content:"";position:absolute;inset:-1px 0 auto 0;height:1px;background:var(--lux-g);opacity:.55;pointer-events:none}
.mobile-bottom-nav .mob-nav-item{transition:color .15s ease}
.mobile-bottom-nav .mob-nav-item.active,.mobile-bottom-nav .mob-nav-item[aria-current="page"]{color:var(--text)!important}
.mobile-bottom-nav .mob-nav-item.active i,.mobile-bottom-nav .mob-nav-item[aria-current="page"] i{background:var(--lux-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-home .mobile-bottom-nav .is-home,.page-news .mobile-bottom-nav .is-news{color:var(--text)!important}
.page-home .mobile-bottom-nav .is-home i,.page-news .mobile-bottom-nav .is-news i{background:var(--lux-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.mobile-bottom-nav .pn-tbadge{line-height:17px;text-align:center}