/* Visual refinement shared by browser and desktop client. */
:root{--op-navy:#07152d;--op-navy-2:#10284d;--op-lime:#b9ef19;--op-coral:#ff655e;--op-blue:#235f8c;--op-shadow:0 18px 48px rgba(17,42,69,.10);--op-shadow-hover:0 24px 58px rgba(17,42,69,.17)}
body{background:radial-gradient(circle at 8% 0,rgba(60,126,174,.10),transparent 26rem),var(--paper);background-attachment:fixed}
#app .app-header{padding:14px clamp(16px,3vw,50px) 12px;background:linear-gradient(115deg,rgba(5,17,36,.98),rgba(13,39,74,.98));border-bottom:1px solid rgba(158,184,214,.32);box-shadow:0 12px 38px rgba(7,21,45,.18);backdrop-filter:blur(18px)}
#app header .header-brand-logo{width:180px;height:44px;filter:drop-shadow(0 5px 14px rgba(0,0,0,.16))}
#app header #orgSelect{min-height:46px;padding:9px 42px 9px 14px;border:1px solid #6f87a5;border-radius:12px;background-color:rgba(27,52,84,.88);box-shadow:inset 0 1px rgba(255,255,255,.06)}
#app header #account{padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.055);color:#e8eff8}
#app header nav{gap:7px;padding-top:13px;border-top:1px solid rgba(164,188,216,.14);margin-top:12px}
#app header nav button{min-height:46px;padding:10px clamp(12px,1.2vw,18px);border:1px solid transparent;border-radius:11px;background:transparent;color:#c9d5e4;box-shadow:none;transition:background .18s,border-color .18s,color .18s,transform .18s}
#app header nav button:hover{background:rgba(255,255,255,.09);border-color:rgba(170,197,225,.38);transform:translateY(-1px)}
#app header nav button.active{background:var(--op-lime)!important;border-color:var(--op-lime)!important;color:#102338!important;box-shadow:0 7px 18px rgba(185,239,25,.18)!important}
#app header nav .home-button{border-color:rgba(142,172,204,.35);background:rgba(255,255,255,.06)}
#app header #logout,#app #navToggle{border-color:#718aa7;background:rgba(29,57,92,.9);box-shadow:0 6px 18px rgba(0,0,0,.12)}
#app .theme-toggle,.login-theme-toggle{display:grid;place-items:center;flex:0 0 48px;width:48px;min-width:48px;min-height:48px;padding:0;border:1px solid #718aa7;border-radius:11px;background:rgba(29,57,92,.9);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:1.35rem!important;line-height:1}
#app .theme-toggle:hover,.login-theme-toggle:hover{border-color:var(--op-lime);background:#25466f;transform:translateY(-1px)}
.login-theme-toggle{position:fixed;z-index:3;top:20px;right:20px;background:#18375f}
#app .view:not(.home-view){max-width:1540px;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}
#app .home-view{padding-top:34px}
#app .home-welcome{position:relative;overflow:hidden;min-height:250px;padding:clamp(32px,4vw,58px);border:1px solid #2f4f76;border-radius:26px;background:radial-gradient(circle at 15% 5%,rgba(185,239,25,.13),transparent 25rem),linear-gradient(125deg,#0a1c35,#102b54);box-shadow:0 28px 65px rgba(7,21,45,.19)}
#app .home-welcome:after{content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-280px;border:70px solid rgba(185,239,25,.055);border-radius:50%;pointer-events:none}
#app .home-welcome h1{color:#fff;font-size:clamp(2.2rem,3.8vw,4rem);max-width:20ch;line-height:1.02}
#app .home-welcome p:not(.overline){max-width:650px;color:#c9d6e7;font-size:1.05rem}
#app .home-welcome .overline{color:var(--op-coral)}
#app .home-welcome>img{position:relative;z-index:1;width:min(300px,27vw);filter:drop-shadow(0 16px 25px rgba(0,0,0,.22))}
#app .mode-grid{gap:18px;margin-top:22px}
#app .mode-card{position:relative;overflow:hidden;min-height:330px;padding:30px 28px 26px;border:1px solid #ccd8e5;border-radius:19px;background:linear-gradient(160deg,#fff 50%,#f6f9fc);box-shadow:var(--op-shadow);transition:transform .2s,border-color .2s,box-shadow .2s}
#app .mode-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--op-blue);opacity:.85}
#app .mode-card.tournament:before{background:#7048e8}#app .mode-card.scratcher:before{background:var(--op-coral)}#app .mode-card.teams:before{background:#7da300}
#app .mode-card:hover{transform:translateY(-5px);border-color:#8ba6c2;box-shadow:var(--op-shadow-hover)}
#app .mode-card .mode-icon{width:58px;height:58px;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
#app .mode-card h2{font-size:clamp(1.45rem,1.8vw,1.85rem);letter-spacing:-.035em}
#app .mode-card p{color:#5a6980;line-height:1.6}
#app .mode-card>b{margin-top:auto;padding-top:20px;color:#174f77;font-size:.9rem}
#app .toolbar{padding-top:42px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent)}
#app .toolbar h2{letter-spacing:-.035em}
#app .management{gap:22px}
#app :is(.catalog-card,.team-card,.dark-card,.league-rules,.player-ranking,.calendar-month){border:1px solid color-mix(in srgb,var(--line) 80%,#fff);border-radius:18px;box-shadow:var(--op-shadow)}
#app .catalog-card{padding:22px;background:linear-gradient(155deg,var(--surface) 68%,color-mix(in srgb,var(--surface-2) 68%,var(--surface)))}
#app .catalog-card:hover{border-color:#7f9ab8;box-shadow:0 18px 42px rgba(17,42,69,.13)}
#app .catalog-card h3{letter-spacing:-.025em}
#app .dark-card{position:relative;overflow:hidden;padding:28px}
#app .dark-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--op-lime),#64b7e9)}
#app input:not([type=checkbox]):not([type=radio]):not([type=color]),#app select,#app textarea{border-width:1px;border-color:#9fb0c2;border-radius:11px;box-shadow:0 1px 2px rgba(13,35,70,.04)}
#app input:focus,#app select:focus,#app textarea:focus{border-color:#3979a7;box-shadow:0 0 0 4px rgba(57,121,167,.15)!important}
#app .primary,.login .primary,dialog .primary{border:1px solid #174f77!important;border-radius:11px;background:linear-gradient(135deg,#1b638f,#13456b)!important;box-shadow:0 8px 18px rgba(20,78,116,.18);transition:transform .18s,box-shadow .18s,filter .18s}
#app .primary:hover,.login .primary:hover,dialog .primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 24px rgba(20,78,116,.24)}
#app .outline,dialog .outline{border-width:1px!important;border-radius:11px!important;box-shadow:0 3px 10px rgba(17,42,69,.06)}
#app .score-hero{overflow:hidden;border:1px solid #bfd0df;border-radius:22px;background:radial-gradient(circle at center,rgba(185,239,25,.08),transparent 25%),linear-gradient(135deg,#fff,#eaf1f7);box-shadow:var(--op-shadow)}
#app .score-hero .versus strong b{font-variant-numeric:tabular-nums}
.login{position:relative;background:radial-gradient(circle at 18% 18%,rgba(185,239,25,.16),transparent 28rem),linear-gradient(135deg,#061329,#102e58)}
.login:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;pointer-events:none}
.login .card{position:relative;border:1px solid rgba(146,174,205,.5);border-radius:24px;background:rgba(255,255,255,.97);box-shadow:0 35px 100px rgba(0,0,0,.35)}
.login .brand{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #dde5ed}.login .brand .product-mark{width:48px;height:48px}.login .brand b{font-size:1.35rem}.login .overline{color:#d94741}.login .card h1{letter-spacing:-.055em}
[data-theme=dark] body{background:radial-gradient(circle at 10% 0,rgba(60,126,174,.12),transparent 28rem),var(--a11y-bg)}
[data-theme=dark] #app .mode-card{border-color:#536b83;background:linear-gradient(155deg,#172536,#1d3045)}
[data-theme=dark] #app .mode-card p{color:#c0ccda}
[data-theme=dark] #app .catalog-card{background:linear-gradient(155deg,#172536,#1c2d41)}
[data-theme=dark] #app .score-hero{border-color:#60768d;background:radial-gradient(circle at center,rgba(185,239,25,.07),transparent 25%),linear-gradient(135deg,#172536,#21364c)}
[data-theme=dark] .login .card{background:#172536}
@media(max-width:900px){#app .app-header{padding:11px 14px}#app .header-top{gap:10px}#app header .header-brand-logo{width:142px;height:36px}#app header nav{padding:12px;margin-top:10px;border:1px solid #48627f;border-radius:14px;background:#102744;box-shadow:0 22px 48px rgba(0,0,0,.25)}#app header nav button{justify-content:flex-start;width:100%;padding:12px 15px}#app .home-welcome{min-height:0;padding:30px 24px}#app .home-welcome>img{width:180px}#app .mode-card{min-height:280px}}
@media(max-width:600px){#app .home-view{padding-top:18px}#app .home-welcome{border-radius:19px}#app .home-welcome h1{font-size:2.25rem}#app .home-welcome>img{width:150px}#app .mode-grid{gap:14px}#app .mode-card{padding:24px 20px;border-radius:16px}#app .catalog-card{padding:18px}}
@media(prefers-reduced-motion:reduce){#app .mode-card,#app .catalog-card,#app button{transition:none!important}}
.tenant-admin{grid-column:1/-1;padding:clamp(22px,3vw,34px)}
.tenant-admin-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;margin-top:22px}
.tenant-admin-card{display:grid;gap:16px;padding:20px;border:1px solid #c9d5e2;border-radius:15px;background:color-mix(in srgb,var(--surface) 90%,var(--surface-2));box-shadow:0 9px 25px rgba(17,42,69,.07)}
.tenant-admin-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.tenant-admin-heading h4{margin:2px 0 0;font-size:1.16rem}.tenant-admin-heading small{color:var(--muted);font-weight:800;letter-spacing:.09em}.demo-badge{padding:6px 9px;border-radius:99px;background:#e6f7b8;color:#3c6000;font-size:.72rem;font-weight:900;letter-spacing:.08em}.tenant-save-state{min-height:1.5em;color:#176044;font-weight:800}