/* Pick Show shared styles. Four themes, switched with . */ :root,[data-theme="night"]{--bg:#0f1420;--panel:#181f31;--panel2:#1f2840;--line:#2b3654;--text:#e8ecf6;--mut:#8f9bb8;--acc:#4f8cff;--acc-text:#fff;--win:#2ecc71;--loss:#ff5d5d;--push:#e6b93d;--head:#181f31;--head-text:#e8ecf6;--radius:14px;--font:system-ui,"Segoe UI",Roboto,sans-serif;--hero:linear-gradient(135deg,#182448,#0f1420)} [data-theme="day"]{--bg:#f3f5fa;--panel:#fff;--panel2:#eef1f8;--line:#d7dcea;--text:#1a2138;--mut:#5d6883;--acc:#2f6bef;--acc-text:#fff;--win:#1f9d55;--loss:#d63b3b;--push:#b8860b;--head:#fff;--head-text:#1a2138;--hero:linear-gradient(135deg,#e2ebff,#f3f5fa)} [data-theme="broadcast"]{--bg:#0a0f2d;--panel:rgba(30,40,80,.78);--panel2:rgba(255,255,255,.08);--line:rgba(255,255,255,.14);--text:#fff;--mut:#b0bec5;--acc:#ff5722;--acc-text:#fff;--win:#3ddc84;--loss:#ff6b6b;--push:#ffb74d;--head:linear-gradient(to right,#1a237e,#283593);--head-text:#fff;--radius:10px;--font:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--link:#ffb199;--hero:linear-gradient(rgba(10,15,45,.75),rgba(10,15,45,.92)),url(https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?auto=format&fit=crop&w=1600&q=70) center/cover} [data-theme="classic"]{--bg:#fbfaf6;--panel:#fff;--panel2:#f1efe6;--line:#d9d5c4;--text:#22252b;--mut:#6a6d75;--acc:#c8102e;--acc-text:#fff;--win:#1b7f3b;--loss:#c8102e;--push:#a7780f;--head:#0b2545;--head-text:#fff;--radius:4px;--font:Georgia,"Times New Roman",serif;--hero:linear-gradient(135deg,#0b2545,#13315c)} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font)} a{color:var(--link,var(--acc))} h1,h2,h3{line-height:1.2;margin:0 0 .5em} button,select,input,textarea{font:inherit;color:var(--text)} button,.btn{background:var(--panel2);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);padding:7px 12px;cursor:pointer;text-decoration:none;color:var(--text);display:inline-block} button:hover,.btn:hover{border-color:var(--acc)} button.on,button.primary,.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-text)} button.danger{border-color:var(--loss);color:var(--loss)} button:disabled{opacity:.5;cursor:not-allowed} input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);padding:8px 10px;max-width:100%} label.f{display:block;margin:0 0 12px;font-size:13px;color:var(--mut)} label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:4px;font-size:15px} main{max-width:1100px;margin:0 auto;padding:16px} .hide{display:none!important} .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .mut{color:var(--mut);font-size:13px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px} /* top bar */ .topbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--head);color:var(--head-text);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .topbar a{color:var(--head-text);text-decoration:none} .brand{font-weight:700;font-size:18px} .topbar nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center} .topbar nav a{opacity:.85;padding:4px 2px}.topbar nav a:hover,.topbar nav a.cur{opacity:1;text-decoration:underline} .topbar select{padding:5px 8px} .badge{background:var(--acc);color:var(--acc-text);border-radius:99px;font-size:11px;padding:1px 7px;margin-left:4px} /* modal */ .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px} .modal .box{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:22px;width:100%;max-width:400px;max-height:92vh;overflow:auto} .tabs{display:flex;gap:6px;margin-bottom:14px}.tabs button{flex:1} .err{color:var(--loss);font-size:13px;min-height:18px;margin:6px 0} /* hero + grids */ .hero{background:var(--hero);padding:42px 16px;text-align:center;border-bottom:1px solid var(--line)} .hero h1{font-size:clamp(28px,5vw,44px)} .hero p{max-width:640px;margin:0 auto 18px;color:var(--mut)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px} .grid.sm{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .pill{font-size:11px;padding:2px 9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);display:inline-block;white-space:nowrap} .pill.premium{background:var(--push);color:#111;border-color:var(--push)}.pill.locked{background:var(--win);color:#fff;border-color:var(--win)}.pill.draft{opacity:.7} .rec-big{font-size:26px;font-weight:700} table.t{width:100%;border-collapse:collapse} table.t th,table.t td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center} table.t th{color:var(--mut);font-size:12px;font-weight:600} table.t td:first-child,table.t th:first-child{text-align:left} .form{display:inline-flex;gap:3px}.form i{width:18px;height:18px;border-radius:4px;display:inline-block;font-size:10px;line-height:18px;text-align:center;color:#fff;font-style:normal} .form .W{background:var(--win)}.form .L{background:var(--loss)}.form .P{background:var(--push);color:#111} /* game cards */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px} .card .top{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)} .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center} .team b{display:block;font-size:15px} .logo{width:46px;height:46px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-weight:700;font-size:12px;overflow:hidden} .logo img{width:100%;height:100%;object-fit:contain} .at{color:var(--mut);font-weight:700} .odds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;text-align:center;font-size:13px} .odds div{background:var(--panel2);border-radius:calc(var(--radius) - 6px);padding:6px} table.rec{width:100%;border-collapse:collapse;font-size:12px} table.rec td{white-space:nowrap;padding:3px 3px;border-top:1px solid var(--line);text-align:center} table.rec td.lbl{color:var(--mut);width:34%} .picks{display:flex;flex-direction:column;gap:6px} .pk{display:grid;grid-template-columns:62px repeat(auto-fit,minmax(0,1fr));gap:6px;align-items:center} .pk span{font-size:12px;color:var(--mut)} .pk button.sel{background:var(--acc);border-color:var(--acc);color:var(--acc-text)} .pk button.w,.chip.w{background:var(--win);border-color:var(--win);color:#fff} .pk button.l,.chip.l{background:var(--loss);border-color:var(--loss);color:#fff} .pk button.p,.chip.p{background:var(--push);border-color:var(--push);color:#111} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{background:var(--acc);color:var(--acc-text);border-radius:99px;padding:3px 11px;font-size:13px;border:1px solid var(--acc)} .chip small{opacity:.8;margin-right:4px} .notes{width:100%;min-height:52px;resize:vertical;font-size:13px} .note-view{font-size:13px;background:var(--panel2);border-radius:calc(var(--radius) - 6px);padding:8px 10px;white-space:pre-wrap} .res{display:flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap} .res input{width:64px} .gate{position:relative;text-align:center;padding:14px;border:1px dashed var(--line);border-radius:calc(var(--radius) - 4px);background:var(--panel2)} .blur{filter:blur(5px);user-select:none;pointer-events:none;opacity:.7} .banner{padding:14px 16px;border-radius:var(--radius);border:1px solid var(--push);background:var(--panel);margin-bottom:16px} .warn{color:var(--push);font-size:13px} .notif{padding:10px 0;border-bottom:1px solid var(--line)}.notif.unread{border-left:3px solid var(--acc);padding-left:10px} .footer{padding:24px 16px;text-align:center;color:var(--mut);font-size:13px} /* team backdrop + style popover + picker */ #psBackdrop{position:fixed;inset:0;z-index:-1;pointer-events:none} html[data-team] .hero{background:rgba(0,0,0,.30);color:#fff} html[data-team] .hero h1,html[data-team] .hero p{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)} html[data-team] main>h2,html[data-team] main>h1{display:inline-block;background:var(--panel);color:var(--text);padding:4px 14px;border-radius:99px;border:1px solid var(--line)} html[data-team] .footer{background:rgba(0,0,0,.45);color:#fff;margin-top:24px} html[data-team] main>.row>.mut,html[data-team] main>.grid+.mut{background:var(--panel);padding:2px 10px;border-radius:99px} .pop{position:fixed;top:56px;right:12px;z-index:40;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 72px);overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.45)} .tp-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px;margin-bottom:10px} .tp-modes button{text-align:center;padding:6px 4px;line-height:1.15} .tp-modes small{opacity:.8;font-size:11px} .tp-sel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 10px} .tp-prev{height:64px;border-radius:calc(var(--radius) - 4px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.7)} .av{border-radius:50%;object-fit:cover;background:var(--panel2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none;vertical-align:middle} .qr{background:#fff;padding:4px;border-radius:8px;border:1px solid var(--line)} .qr svg{display:block;width:100%;height:auto} .paywrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start} .pay{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .swatch{display:inline-block;width:46px;height:22px;border-radius:5px;border:1px solid var(--line);vertical-align:middle} input[type=color]{width:46px;height:32px;padding:2px;cursor:pointer;vertical-align:middle} input[type=checkbox]{accent-color:var(--acc)} /* odds ticker */ .ticker{position:relative;overflow:hidden;white-space:nowrap;background:var(--panel2);border-bottom:1px solid var(--line);font-size:13px;padding:6px 0} .ticker .tk-track{display:inline-block;animation:tkscroll 60s linear infinite} .ticker:hover .tk-track{animation-play-state:paused} .tk-i{display:inline-block;margin-right:34px}.tk-i em{font-style:normal;font-weight:700;opacity:.7;margin-right:4px} .tk-sc{font-weight:700}.tk-w{opacity:.65} .tk-src{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;padding-left:24px;font-size:11px;opacity:.75;background:linear-gradient(90deg,transparent,var(--panel2) 40%)} @keyframes tkscroll{to{transform:translateX(-25%)}} @media (prefers-reduced-motion:reduce){.ticker{overflow-x:auto}.ticker .tk-track{animation:none;padding-left:8px}} /* rankings */ .rk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0} .rk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px} .rk-tile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 8px 10px;text-align:center;user-select:none} .rk-tile .rk-n{position:absolute;left:8px;top:4px;font-size:22px;font-weight:800;opacity:.9} .rk-tile .logo{width:64px;height:64px;font-size:14px;margin:8px auto 6px} .rk-tile .rk-name{font-weight:700;line-height:1.15} .rk-tile .rk-rec{font-size:12px;opacity:.7} .rk-tile .rk-mv{position:absolute;right:8px;top:6px;font-size:12px;font-weight:700} .rk-up{color:#1a9b4a}.rk-dn{color:#d23b3b}.rk-new{color:var(--acc)} .rk-tile .rk-note{font-size:12px;margin-top:6px;opacity:.85} .rk-edit .rk-tile{cursor:grab}.rk-tile.sel{outline:3px solid var(--acc)}.rk-tile.drag{opacity:.4}.rk-tile.over{outline:2px dashed var(--acc)} .rk-tools{display:flex;gap:4px;justify-content:center;margin-top:6px;flex-wrap:wrap} .rk-tools button,.rk-tools input{padding:2px 6px;font-size:12px}.rk-tools input{width:44px} .rk-top3 .rk-tile:nth-child(-n+3){border-color:var(--acc)} .rk-show .rk-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.rk-show .rk-tile .logo{width:96px;height:96px}.rk-show .rk-tile .rk-n{font-size:32px}.rk-show .rk-name{font-size:18px} .subnav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.subnav a{text-decoration:none;font-weight:600} [hidden]{display:none!important} .logo img+.ab{display:none} /* JacAI ecosystem bar + viewer */ .eco-bar{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:7px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:13px} .eco-lbl{font-weight:800;letter-spacing:.06em;margin-right:6px;font-size:12px} .eco-card{padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700} .eco-viewer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60} .eco-viewer{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));max-height:90vh;overflow:auto;z-index:61;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.5)} .eco-viewer-head{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.eco-viewer-head>div:nth-child(2){flex:1} .eco-orb{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-size:18px} .eco-viewer-title{font-size:20px;font-weight:800}.eco-viewer-tag{font-size:10px;letter-spacing:.2em;opacity:.7} .eco-viewer-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 18px} .eco-lab{font-size:10px;letter-spacing:.2em;opacity:.7;margin-bottom:6px}.eco-dyk{margin-top:12px;padding:10px;border:1px dashed var(--line);border-radius:8px;font-size:13px} .eco-list{margin:0;padding-left:18px}.eco-list li{margin:6px 0} .eco-viewer-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line)} @media(max-width:640px){.eco-viewer-body{grid-template-columns:1fr}} .ticker.tk-static{white-space:normal}.ticker.tk-static .tk-track{animation:none} .stat{font-size:11px;font-weight:700;letter-spacing:.06em;text-align:center;margin:2px 0 4px;color:var(--mut)} .stat.live{color:#e5484d}.stat.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5484d;margin-right:4px;animation:pl 1.2s infinite} .stat.fin small{font-weight:400;opacity:.7} @keyframes pl{50%{opacity:.25}} .drw{font-size:12px;color:var(--mut);display:inline-flex;gap:3px;align-items:center} .sbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0} .smsg{font-size:13px;color:var(--mut)}