/* Edition 34 · premium layer. Brand palette from assets/brand (magenta #c11777 / pink #ff4fa8 / glass highlights).
   Dark (midnight) is primary; rose is the tuned light mode. GPU-cheap: only transform/opacity animate. */
html[data-theme=midnight]{--page:#0c0a12;--surface:#15121d;--soft:#1d1828;--ink:#f6f1fa;--muted:#b4a9c0;--line:#2c2538;--accent:#ff6fb5;--accent-dark:#b3125f;--accent-soft:#3a1d31;--yes:#5fe0b7;--yes-soft:#123328;--no:#ff7fae;--no-soft:#3b1a2b;--cyan:#7fdcf0;--glass:rgba(29,24,40,.62);--glass-line:rgba(255,255,255,.08);--glow-a:#c11777;--glow-b:#5b2bd1;--glow-c:#118ab2;--shadow:0 24px 70px -30px #000c;color-scheme:dark}
html[data-theme=rose]{--page:#fff8fc;--surface:#ffffff;--ink:#22172b;--muted:#6c5a72;--line:#efdfea;--accent:#c11777;--accent-dark:#a50f63;--glass:rgba(255,255,255,.72);--glass-line:rgba(193,23,119,.12);--glow-a:#ff9fd0;--glow-b:#c9b6ff;--glow-c:#9fe6f5;--yes:#0f8a63;--no:#c11777}
html[data-theme=aqua]{--glass:rgba(255,255,255,.72);--glass-line:rgba(20,110,150,.14);--glow-a:#9fe6f5;--glow-b:#c9d6ff;--glow-c:#ffc6e4}
body{background:var(--page);color:var(--ink);position:relative;isolation:isolate}
/* Animated mesh glow: three blurred blobs on one fixed layer; transform-only drift, disabled for reduced motion. */
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;opacity:.55;
 background:radial-gradient(38vmax 30vmax at 18% 12%,color-mix(in srgb,var(--glow-a) 55%,transparent),transparent 70%),radial-gradient(34vmax 28vmax at 85% 20%,color-mix(in srgb,var(--glow-b) 45%,transparent),transparent 70%),radial-gradient(40vmax 30vmax at 60% 95%,color-mix(in srgb,var(--glow-c) 30%,transparent),transparent 70%);
 animation:wm-drift 28s ease-in-out infinite alternate;will-change:transform}
html[data-theme=midnight] body::before{opacity:.42}
@keyframes wm-drift{to{transform:translate3d(3vmax,-2vmax,0) rotate(6deg) scale(1.05)}}
html[data-motion=off] body::before{animation:none}
@media (prefers-reduced-motion:reduce){body::before{animation:none}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Header: sticky glass */
.contract-public-header,.hub-public-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 72%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--glass-line)}
.contract-public-header .brand{font-weight:800;letter-spacing:-.02em}
.brand-edition{background:linear-gradient(90deg,var(--accent),#8f5bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.contract-public-nav a{position:relative;transition:color .2s}
.contract-public-nav a::after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s var(--ease,ease)}
.contract-public-nav a:hover::after,.contract-public-nav a[aria-current=page]::after{transform:scaleX(1)}
.web3-connect{background:linear-gradient(135deg,var(--accent-dark),#7a2bd6)!important;color:#fff!important;border:0!important;box-shadow:0 8px 28px -10px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .2s,box-shadow .2s}
.web3-connect:hover{transform:translateY(-1px);box-shadow:0 12px 34px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
/* Hero */
.hub-hero h1{letter-spacing:-.035em;line-height:1.02}
.hub-hero h1 span{background:linear-gradient(90deg,var(--accent),#9a6bff 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=rose] .hub-hero h1 span{background:linear-gradient(90deg,#a50f63,#5b2bd1);-webkit-background-clip:text;background-clip:text}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .8rem .35rem .4rem;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(8px)}
.hero-mark{width:34px;height:auto;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 55%,transparent))}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:1.6rem 0 1rem;min-height:84px}
.hero-stat{padding:.8rem .9rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);min-width:0}
.hero-stat dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero-stat dd{margin:.25rem 0 0;font-variant-numeric:tabular-nums}
.hero-stat strong{font-size:1.55rem;font-weight:800;letter-spacing:-.02em}
.hero-stat strong small{font-size:.85rem;color:var(--muted);font-weight:600}
.hero-pools{display:flex;flex-direction:column;gap:.1rem;font-weight:700;font-size:.85rem}
.hero-pools small{color:var(--muted);font-weight:600}
.stat-skeleton,.net-skeleton span{display:inline-block;width:3.2em;height:1.1em;border-radius:6px;background:linear-gradient(90deg,var(--soft),color-mix(in srgb,var(--soft) 60%,var(--ink) 8%),var(--soft));background-size:200% 100%;animation:wm-shimmer 1.4s linear infinite}
@keyframes wm-shimmer{to{background-position:-200% 0}}
@media (max-width:760px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Glass surfaces */
.net-card,.hub-network,.hub-market,.hub-funds-card,.hub-account,willmay-trade>section,willmay-trade .contract-panel,.contract-card,.hub-guide details,.market-card-premium,.contract-action-group{background:var(--glass)!important;border:1px solid var(--glass-line)!important;backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);box-shadow:var(--shadow)}
.net-card,.hub-market,.market-card-premium,.hub-network{border-radius:20px!important;transition:transform .25s var(--ease,ease),border-color .25s,box-shadow .25s}
.net-card:hover,.hub-market:hover,.market-card-premium:hover,.hub-network:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important;box-shadow:0 24px 60px -28px color-mix(in srgb,var(--accent) 55%,transparent)}
/* Network strip */
.net-status-grid{gap:.8rem}
.net-card header{display:flex;align-items:center;gap:.6rem}
.net-logo{width:28px;height:28px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--glass-line)}
.net-pill[data-net-status=connected]{background:var(--yes-soft);color:var(--yes)}
.net-pill[data-net-status=connected]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:.35rem;box-shadow:0 0 0 0 currentColor;animation:wm-pulse 2.2s ease-out infinite}
@keyframes wm-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
/* Premium market cards */
.contract-open-markets{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}
.market-card-premium{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem}
.mc-top,.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mc-question{font-size:1.05rem;line-height:1.35;letter-spacing:-.01em}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600;border:1px solid var(--glass-line)}
.chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.chip-category{background:var(--accent-soft);color:var(--accent)}
html[data-theme=rose] .chip-category{color:#a50f63}
.chip-time{color:var(--muted);font-variant-numeric:tabular-nums}
.contract-odds-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--soft);gap:2px}
.contract-odds-bar span{display:block;transform-origin:left;animation:wm-grow .9s cubic-bezier(.2,.8,.2,1) both}
.contract-odds-bar span:first-child{background:linear-gradient(90deg,#1fb58a,var(--yes))}
.contract-odds-bar span:last-child{background:linear-gradient(90deg,var(--no),var(--accent-dark));transform-origin:right}
@keyframes wm-grow{from{transform:scaleX(0)}}
.hub-market-labels span{border-radius:999px}
/* Buttons & focus micro-interactions */
.button,.text-button,.icon-button{transition:transform .18s var(--ease,ease),box-shadow .18s,background .18s}
.button:hover:not([disabled]){transform:translateY(-1px)}
.button-primary:not([disabled]),willmay-trade .button-primary,willmay-owner .button-primary{background:linear-gradient(135deg,var(--accent-dark),#6a24c4)!important;border-color:transparent!important;color:#fff!important}
.button-dark{background:linear-gradient(135deg,var(--accent-dark),#6a24c4)!important;color:#fff!important;border:0}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px;border-radius:8px}
/* Empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.4rem;border:1px dashed var(--glass-line);border-radius:18px;background:var(--glass)}
.empty-state img{width:96px;height:auto;opacity:.9;filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--accent) 45%,transparent))}
.net-empty::before,.hub-empty::before{content:"";display:block;width:64px;height:44px;margin:0 auto .4rem;background:url(/assets/brand/glass-160.webp) center/contain no-repeat;opacity:.85}
.net-empty,.hub-empty{text-align:center}
/* Footer */
.site-footer{border-top:1px solid var(--glass-line);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent-soft) 35%,transparent));border-radius:28px 28px 0 0;margin-top:3rem}
.site-footer .footer-links a{transition:color .2s}.site-footer .footer-links a:hover{color:var(--accent)}
/* Dark-mode contrast fixes for legacy rules */
html[data-theme=midnight] .button-primary,html[data-theme=midnight] .web3-connect:not(.is-connected){color:#fff}
html[data-theme=midnight] .contract-network-tabs .button[aria-pressed=true]{background:#b3125f;color:#fff}
/* Layout stability: reserve the viewport for async workspaces so later growth never shifts visible content. */
willmay-desk,willmay-markets{display:block;min-height:100vh}
/* Legibility: no body text below 12px */
.contract-data-note,.contract-source-reference p,.contract-findings li,.contract-source-reference code,.how-steps p,.contract-entry-link p,.network-hub-note{font-size:12px!important}
/* Practice contrast */
.practice-balance span,.current-index{color:var(--ink)!important;opacity:1!important}
/* Practice runs its own fluid canvas: keep the mesh static there to save main-thread/GPU time. */
body.practice-page::before,html:has(.product-context) body::before{animation:none}
/* Edition 35 · Balance button + modal (bottom sheet on mobile) */
.balance-button{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;margin-right:.5rem;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer;backdrop-filter:blur(10px);transition:transform .18s,border-color .18s;font-variant-numeric:tabular-nums}
.balance-button[hidden]{display:none}
.balance-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.balance-button svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2}
.balance-button .balance-label{color:var(--muted)}
.contract-public-header .wrap,.hub-public-header .wrap{align-items:center}
.balance-modal{width:min(560px,calc(100vw - 2rem));max-height:min(88vh,860px);padding:0;border:1px solid var(--glass-line);border-radius:24px;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink);box-shadow:0 40px 120px -30px #000d;overflow:auto}
.balance-modal::backdrop{background:rgba(8,6,14,.62);backdrop-filter:blur(6px)}
.balance-modal[open]{animation:bm-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes bm-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.bm-head{display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 1.4rem .6rem}
.bm-head h2{margin:.2rem 0;font-size:1.7rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bm-head small{color:var(--muted)}
.bm-close{font-size:1.5rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-line);background:transparent;color:var(--ink);cursor:pointer}
.bm-tabs{display:flex;gap:.3rem;margin:0 1.4rem;padding:.3rem;border-radius:999px;background:var(--soft)}
.bm-tabs [role=tab]{flex:1;padding:.55rem;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.bm-tabs [role=tab][aria-selected=true]{background:linear-gradient(135deg,var(--accent-dark),#6a24c4);color:#fff}
#bm-panel{padding:1rem 1.4rem 1.4rem}
.bm-form fieldset{border:0;padding:0;margin:0 0 1rem}
.bm-form legend{display:flex;align-items:center;gap:.5rem;font-weight:700;margin-bottom:.5rem}
.bm-step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.75rem}
.bm-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem}
.bm-choice{position:relative;cursor:pointer}
.bm-choice input{position:absolute;opacity:0;inset:0}
.bm-choice span{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;padding:.65rem .75rem;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass);transition:border-color .18s,box-shadow .18s}
.bm-choice img{grid-row:span 2;width:22px;height:22px;border-radius:50%;object-fit:contain}
.bm-choice small{color:var(--muted);font-size:.75rem}
.bm-choice input:checked+span{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.bm-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.bm-amount{display:flex;align-items:center;border:1px solid var(--glass-line);border-radius:16px;background:var(--soft);padding:.2rem .9rem}
.bm-amount:focus-within{border-color:var(--accent)}
.bm-amount input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.6rem;font-weight:700;padding:.5rem 0;font-variant-numeric:tabular-nums;outline:none}
.bm-amount span{color:var(--muted);font-weight:700}
.bm-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.bm-quick .chip{cursor:pointer;background:var(--glass);color:var(--ink);font:inherit;font-size:.8rem;padding:.35rem .8rem}
.bm-quick .chip:hover{border-color:var(--accent)}
.bm-note{color:var(--muted);font-size:.82rem;margin:.3rem 0}
.bm-error{color:var(--no);font-size:.85rem;margin:.3rem 0;font-weight:600}
.bm-preview{display:grid;gap:.35rem;margin:0 0 1rem;padding:.9rem 1rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line)}
.bm-preview div{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem}
.bm-preview dt{color:var(--muted)}.bm-preview dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bm-submit,.bm-form>.button{width:100%;min-height:48px;font-size:1rem}
.bm-field{display:grid;gap:.3rem;margin-top:.6rem;font-size:.85rem;color:var(--muted)}
.bm-field input{padding:.6rem .8rem;border-radius:12px;border:1px solid var(--glass-line);background:var(--soft);color:var(--ink);font:inherit;font-family:var(--font-mono,monospace);font-size:.8rem}
.bm-notice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.4rem;border-radius:18px;border:1px dashed var(--glass-line);background:var(--glass)}
.bm-notice strong{font-size:1.15rem}.bm-notice p{margin:0;color:var(--muted)}.bm-notice .button{min-width:180px}
.bm-overview{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bm-overview li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line)}
.bm-overview img{width:28px;height:28px}.bm-overview span{display:grid}.bm-overview small{color:var(--muted)}.bm-overview strong{font-variant-numeric:tabular-nums}
.balance-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line)}
.balance-cta>div:first-child{flex:1 1 320px}.balance-cta-actions{display:flex;gap:.5rem}
@media (max-width:640px){
 .balance-modal{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
 .balance-modal[open]{animation:bm-sheet .3s cubic-bezier(.2,.8,.2,1)}
 @keyframes bm-sheet{from{transform:translateY(100%)}}
 .balance-button .balance-label{display:none}
 .balance-button{padding:.45rem .7rem;margin-right:.35rem}
}
.bm-amount input:focus-visible{outline:none!important}
@media (max-width:640px){.balance-modal{inset:auto 0 0 0;margin:0;width:100%;max-width:none;box-sizing:border-box}}
.balance-modal{overflow-x:hidden}.bm-form fieldset{min-width:0}.bm-error,.bm-note{overflow-wrap:anywhere}
.balance-modal .bm-amount input,.balance-modal .bm-amount input:focus,.balance-modal .bm-amount input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important;background:transparent!important}