:root{--bg:#050505;--fg:#f2f2f2;--mute:#8a8a8a;--line:rgba(255,255,255,.14);--card:rgba(255,255,255,.045);--glow:rgba(255,255,255,.35);--accent:#27d3ff;--hero:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.88));
color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="light"]{--bg:#ececec;--fg:#111;--mute:#666;--line:rgba(0,0,0,.18);--card:rgba(255,255,255,.6);--glow:rgba(0,0,0,.2);--hero:linear-gradient(rgba(240,240,240,.82),rgba(240,240,240,.94));color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:'Prompt',system-ui,sans-serif;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-2;background:var(--hero),radial-gradient(ellipse at 70% 30%,#202020,#050505 70%);}
/* ใส่รูปพื้นหลังของคุณได้ที่ BG_IMAGE ใน config ด้านล่าง */
canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
#cursorTrail{z-index:60}
.page-loader{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;background:rgba(5,5,5,.88);backdrop-filter:blur(8px);color:#e4e8ed;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s}
.page-loader.active{opacity:1;visibility:visible}
.loader-ring{width:38px;height:38px;border:2px solid rgba(220,228,238,.18);border-top-color:#f6f8fa;border-right-color:#aab4c0;border-radius:50%;box-shadow:0 0 18px rgba(220,228,238,.22);animation:loader-spin .7s linear infinite}
.loader-label{font:500 .62rem 'Orbitron',sans-serif;letter-spacing:.35em;color:#aab4c0}
@keyframes loader-spin{to{transform:rotate(360deg)}}
.display{font-family:'Orbitron',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.view{display:none;min-height:100vh}.view.on{display:block;animation:page-fade-in .55s ease both}
.view.route-wait,.view.route-wait *{animation:none!important;opacity:0!important}
@keyframes page-fade-in{from{opacity:0}to{opacity:1}}
@keyframes content-rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes content-drop-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes content-left-in{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
@keyframes content-right-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes content-pop-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes content-focus-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
#home.on>#siteName{animation:content-drop-in .65s cubic-bezier(.2,.7,.25,1) both}
#home.on>.since{animation:content-focus-in .7s .08s ease both}
#home.on>.emblem{animation:content-rise-in .8s .14s cubic-bezier(.2,.7,.25,1) both}
#home.on>.picks{animation:content-pop-in .7s .24s cubic-bezier(.2,.7,.25,1) both}
#home.on>.picks>.pick:first-child{animation:content-left-in .65s .34s cubic-bezier(.2,.7,.25,1) both}
#home.on>.picks>.pick:last-child{animation:content-right-in .65s .4s cubic-bezier(.2,.7,.25,1) both}
#members.on>nav,#admin.on>nav{animation:content-drop-in .6s cubic-bezier(.2,.7,.25,1) both}
#members.on>.wrap>.head{animation:content-focus-in .75s .08s ease both}
#admin.on>.wrap>.head{animation:content-drop-in .65s .08s cubic-bezier(.2,.7,.25,1) both}
#members.on>.wrap>.tools{animation:content-left-in .7s .16s cubic-bezier(.2,.7,.25,1) both}
#members.on>.wrap>#list{animation:content-right-in .75s .2s cubic-bezier(.2,.7,.25,1) both}
#members.on .grid .m:nth-child(odd){animation:content-left-in .6s .28s cubic-bezier(.2,.7,.25,1) both}
#members.on .grid .m:nth-child(even){animation:content-right-in .6s .34s cubic-bezier(.2,.7,.25,1) both}
#admin.on>.wrap>#lock{animation:content-pop-in .75s .18s cubic-bezier(.2,.7,.25,1) both}
#admin.on>.wrap>#adminBody{animation:content-rise-in .7s .18s cubic-bezier(.2,.7,.25,1) both}
#admin.on #adminBody>.panel:nth-child(odd){animation:content-left-in .65s .26s cubic-bezier(.2,.7,.25,1) both}
#admin.on #adminBody>.panel:nth-child(even){animation:content-right-in .65s .34s cubic-bezier(.2,.7,.25,1) both}
/* HOME */
#home{display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;padding:2rem 1rem 6rem}
#home.on{display:flex}
h1{font-size:clamp(2rem,8vw,5rem);margin:0;font-weight:900;text-shadow:0 0 40px var(--glow)}
.since{letter-spacing:.5em;font-size:.8rem;color:var(--mute);margin:0}
.emblem{width:min(340px,70vw);filter:drop-shadow(0 0 22px var(--glow));animation:rise 1.4s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.picks{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}
.pick{display:flex;align-items:center;gap:1rem;min-width:300px;padding:1rem 1.4rem;border-radius:999px;border:1.5px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));color:var(--fg);cursor:pointer;font:inherit;text-align:left;backdrop-filter:blur(10px);transition:border-color .25s,box-shadow .25s,transform .25s}
.pick:hover,.pick:focus-visible{border-color:var(--fg);box-shadow:0 0 24px var(--glow);transform:translateY(-2px);outline:none}
.pick.pick-lady:hover,.pick.pick-lady:focus-visible{border-color:#ff69b4;color:#fff;box-shadow:0 0 0 1px rgba(255,105,180,.2),0 0 28px rgba(255,105,180,.32)}
.pick.pick-lady:hover svg,.pick.pick-lady:hover b,.pick.pick-lady:focus-visible svg,.pick.pick-lady:focus-visible b{color:#ff8fc6}
.pick.pick-lady svg{color:#fff}
.pick-timeline{width:300px!important;min-width:300px!important;max-width:300px!important;margin-inline:auto;flex:0 0 100%!important;justify-content:center;order:3}
.pick[data-g]{order:1}
.pick-timeline svg{color:var(--fg)}
.pick-timeline{box-sizing:border-box;clear:both}
@media(max-width:420px){
 .pick-timeline{width:min(300px,calc(100vw - 2rem));min-width:0;max-width:300px;flex-basis:min(300px,calc(100vw - 2rem))}
}
.pick.pick-lady .lady-name{color:#ff69b4}
.pick svg{width:26px;height:26px;flex:none}
.pick .sep{width:1px;height:34px;background:var(--line)}
.pick b{display:block;font-family:'Orbitron';letter-spacing:.2em;font-size:.95rem}
.pick small{display:block;color:var(--mute);letter-spacing:.3em;font-size:.65rem;margin-top:.2rem}
.pick .go{margin-left:auto;font-size:1.2rem}
footer.site-footer{position:fixed;left:0;right:0;bottom:.8rem;z-index:30;width:auto;text-align:center;font-size:.7rem;color:var(--mute);letter-spacing:.15em;pointer-events:none}
/* NAV */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;gap:.3rem;align-items:center;width:max-content;max-width:94vw;margin:1rem auto;padding:.45rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(0,0,0,.68);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:0 14px 38px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08)}
nav button,.tbtn{border:0;background:none;color:var(--mute);font:500 .78rem 'Orbitron';letter-spacing:.14em;padding:.6rem 1rem;border-radius:999px;cursor:pointer}
nav button.act,nav button:hover{color:var(--fg);background:rgba(255,255,255,.1)}
.tbtn{position:fixed;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;z-index:30;border:1px solid var(--line);width:42px;height:42px;padding:0;background:var(--card);font-size:1rem}
/* MEMBERS */
.wrap{max-width:1200px;margin:0 auto;padding:1rem 1.2rem 8rem}
.head{text-align:center;margin:1.5rem 0}
.head h2{font-size:clamp(1.6rem,5vw,2.6rem);margin:.3rem 0;font-weight:900}
.head h2 .lady-title{color:#ff69b4;text-shadow:0 0 14px rgba(255,105,180,.32)}
.head p{color:var(--mute);letter-spacing:.3em;font-size:.72rem;margin:0}
.tools{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:1.5rem 0 2rem}
.tools input{flex:1 1 280px;max-width:360px;padding:.8rem 1.2rem;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(120,120,120,.22);color:#fff;font:inherit;backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)}
.tools input::placeholder{color:rgba(255,255,255,.58)}
.tools input:focus{outline:2px solid var(--fg);outline-offset:2px}
.chip{padding:.7rem 1.1rem;border-radius:12px;border:1px solid var(--line);background:none;color:var(--mute);font:500 .72rem 'Orbitron';letter-spacing:.16em;cursor:pointer}
.chip.act{color:var(--fg);border-color:var(--fg);background:rgba(255,255,255,.08)}
.chip.chip-lady.act,.chip.chip-lady:hover,.chip.chip-lady.act:hover{border-color:#ff69b4;color:#fff;background:rgba(255,105,180,.14);box-shadow:0 0 0 1px rgba(255,105,180,.22),0 0 18px rgba(255,105,180,.32)}
.sect{display:flex;align-items:center;gap:1rem;color:var(--fg);font:700 .85rem 'Orbitron';letter-spacing:.3em;margin:2rem 0 1.2rem}
.sect::before,.sect::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.sect i{font-style:normal;color:var(--mute);font-size:.7rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid>.m:only-child{grid-column:1/-1;justify-self:center;width:calc((100% - 2rem)/3)}
.grid>.m:not(:only-child):last-child:nth-child(3n+1){grid-column:auto;width:100%}
.grid:has(> .m:nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 2rem)/3));justify-content:center}
.grid:not(:has(> .m:nth-child(2):last-child))>.m:not(:only-child):last-child:nth-child(3n+1){grid-column:2;justify-self:center;width:100%}
.m{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(120,120,120,.18);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.07);transition:border-color .2s,transform .2s,color .2s}
.m:hover{border-color:var(--fg);transform:translateY(-2px)}
.m.lead{grid-column:span 1;border-color:rgba(255,255,255,.4)}
.m.lady{border-color:rgba(255,105,180,.42);background:linear-gradient(135deg,rgba(255,105,180,.13),rgba(120,120,120,.18) 58%,rgba(255,105,180,.07));box-shadow:0 14px 34px rgba(0,0,0,.26),0 0 18px rgba(255,105,180,.08),inset 0 1px rgba(255,170,210,.12)}
.m.lady:hover{border-color:#ff69b4;box-shadow:0 16px 38px rgba(0,0,0,.3),0 0 22px rgba(255,105,180,.18),inset 0 1px rgba(255,170,210,.16)}
.av{width:56px;height:56px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;background:#111;font:700 1.1rem 'Orbitron';flex:none;position:relative;isolation:isolate}
.av::before{content:"";position:absolute;inset:5px;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(235,240,255,.28),rgba(205,220,255,.09) 46%,transparent 75%);filter:blur(6px);transform:scale(1.2)}
.member-logo{position:relative;z-index:1;display:block;width:100%;height:100%;padding:3px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(235,240,255,.4)) drop-shadow(0 0 8px rgba(205,220,255,.2))}
.member-logo.member-photo{padding:0;border-radius:11px;object-fit:cover;object-position:center;filter:none}
.m.lady .av::before{inset:2px;border-radius:14px;background:radial-gradient(circle,rgba(255,105,180,.42) 0%,rgba(255,105,180,.14) 42%,transparent 70%);filter:blur(3px);transform:scale(1.08)}
.m.lady .member-logo{filter:drop-shadow(0 0 2px rgba(255,105,180,.65)) drop-shadow(0 0 5px rgba(255,105,180,.32))}
.m.lady .member-logo.member-photo{filter:none}
.av::after{content:"";position:absolute;z-index:2;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:#555;border:2px solid var(--bg)}
.av.on::after{background:#3ddc84}
.m.lady .av.on::after{background:#ff5fa2!important;box-shadow:0 0 10px rgba(255,95,162,.85)!important}
.mi{flex:1;text-align:center;min-width:0}
.mi b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi small{color:var(--mute);letter-spacing:.2em;font-size:.65rem;font-family:'Orbitron'}
.tag{display:inline-block;margin-top:.3rem;padding:.15rem .6rem;border:1px solid var(--line);border-radius:6px;font:700 .6rem 'Orbitron';letter-spacing:.2em}
.fb{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);text-decoration:none;font-weight:700}
.fb.fb-lady{border-color:rgba(255,105,180,.62);color:#b9b9b9;box-shadow:inset 0 0 10px rgba(255,105,180,.08)}
.fb.fb-lady:hover{border-color:#ff69b4;color:#d7d7d7;box-shadow:0 0 14px rgba(255,105,180,.22)}
.fb-leader .leader-crown{position:absolute;top:-9px;right:-8px;width:17px;height:17px;padding:2px;overflow:visible;color:#f2f2f2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.fb-leader .lady-crown{color:#ff69b4;filter:drop-shadow(0 0 3px rgba(255,105,180,.65)) drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.fb:hover{color:var(--fg);border-color:var(--fg)}
.fb-disabled{opacity:.42;cursor:not-allowed}
.fb-disabled:hover{color:var(--mute);border-color:var(--line)}
.m[data-profile]{cursor:pointer}
.m[data-profile]:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.profile-dialog{width:min(390px,calc(100vw - 2rem));padding:2.2rem 1.6rem 1.8rem;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(145deg,#18181a,#0b0b0c);color:var(--fg);text-align:center;box-shadow:0 28px 100px rgba(0,0,0,.75)}
.profile-dialog[open]{animation:dialog-in .2s ease-out both}
.profile-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.profile-dialog.lady-profile{border-color:rgba(255,105,180,.58);background:linear-gradient(145deg,rgba(255,105,180,.16),rgba(18,18,20,.98) 48%,rgba(255,105,180,.08))}
.profile-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}
.profile-avatar{width:128px;height:128px;margin:.4rem auto 1rem;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:30px;background:#111;box-shadow:0 0 22px rgba(255,255,255,.08)}
.profile-avatar img{width:100%;height:100%;object-fit:contain}
.profile-avatar img.member-photo{padding:0;border-radius:22px;object-fit:cover;object-position:center}
.lady-profile .profile-avatar{border-color:rgba(255,105,180,.6);box-shadow:0 0 24px rgba(255,105,180,.25)}
.profile-group{margin:.5rem 0;color:var(--mute);font:500 .62rem 'Orbitron',sans-serif;letter-spacing:.16em}
.profile-dialog.lady-profile .profile-group,.profile-dialog.lady-profile .profile-role{color:#ff69b4}
.profile-dialog h2{margin:.35rem 0;font-size:1.2rem}
.profile-role{display:inline-block;margin:.2rem 0 1.3rem;color:#d7d7d7;font:700 .68rem 'Orbitron',sans-serif;letter-spacing:.18em}
.profile-facebook{display:flex;align-items:center;justify-content:center;width:100%;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:999px;color:#fff;text-decoration:none;font-size:.78rem}
.lady-profile .profile-facebook{border-color:rgba(255,105,180,.55);color:#fff;box-shadow:0 0 16px rgba(255,105,180,.12)}
.empty{text-align:center;color:var(--mute);padding:3rem 0}
/* ADMIN */
.panel{max-width:520px;margin:2rem auto;padding:1.6rem;border:1px solid var(--line);border-radius:18px;background:var(--card);backdrop-filter:blur(10px)}
#admin-members{width:min(760px,calc(100vw - 2rem));max-width:760px}
.panel label{display:block;font-size:.75rem;color:var(--mute);margin:1rem 0 .3rem}
.panel input,.panel select{width:100%;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--fg);font:inherit}
.panel textarea{width:100%;resize:vertical;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--fg);font:inherit;line-height:1.7}
.background-history-title{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.background-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.background-history-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.background-history-card img{display:block;width:100%;height:82px;object-fit:cover;background:#111}
.background-history-card div{display:flex;align-items:center;justify-content:space-between;gap:.35rem;padding:.5rem}
.background-history-card span{min-width:0;color:var(--mute);font-size:.66rem}
.background-history-card button{flex:none;padding:.35rem .55rem;border:1px solid var(--line);border-radius:8px;background:none;color:var(--fg);font:inherit;font-size:.68rem;cursor:pointer}
.background-history-card button:hover{background:#fff;color:#111}
.background-history-empty{grid-column:1/-1;color:var(--mute);font-size:.75rem;text-align:center;padding:1rem}
@media(max-width:520px){.background-history{grid-template-columns:1fr}}
.bulk-member-rows{display:grid;gap:.65rem;max-height:420px;padding-right:.2rem;overflow-y:auto}
.bulk-member-row{position:relative;display:grid;grid-template-columns:minmax(110px,.9fr) minmax(150px,1.25fr) minmax(130px,.8fr) 34px;gap:.55rem;align-items:center;padding:.75rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 8px 24px rgba(0,0,0,.18)}
.bulk-member-row input[type="text"]{min-width:0}
.bulk-member-row input[type="file"]{width:100%;min-width:0;padding:.55rem;font-size:.68rem}
.bulk-member-row .mini{width:32px;height:32px;margin:0;padding:0;border-radius:50%}
@media(max-width:700px){.bulk-member-row{grid-template-columns:1fr}.bulk-member-row .mini{width:100%;border-radius:8px}}
.panel .bulk-toggle{display:flex!important;align-items:center;gap:.7rem;margin:.15rem 0 1.15rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--fg)!important;font-size:.72rem!important;cursor:pointer}
.panel .bulk-toggle input{position:relative;width:38px;height:21px;margin:0;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);appearance:none;-webkit-appearance:none;cursor:pointer;transition:.2s}
.panel .bulk-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#aaa;box-shadow:0 2px 8px rgba(0,0,0,.55);transition:.2s}
.panel .bulk-toggle input:checked{background:#fff}
.panel .bulk-toggle input:checked::after{left:20px;background:#111}
.panel select{appearance:none;padding-right:2.8rem;border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.045);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8b8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.panel select:hover{border-color:rgba(255,255,255,.32);background-color:rgba(255,255,255,.075)}
.panel select:focus-visible{outline:none;border-color:rgba(255,255,255,.62);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.panel select option{background:#151515;color:#f2f2f2}
:root[data-theme="light"] .panel select option{background:#fff;color:#171717}
.panel button.go2{margin-top:1.4rem;width:100%;padding:.85rem;border-radius:10px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:700 .8rem 'Orbitron';letter-spacing:.2em;cursor:pointer}
.panel button.go2:disabled{opacity:.45;cursor:not-allowed}
.admin-login{display:none}
#admin .admin-nav{gap:.15rem;padding:.28rem .36rem}
#admin .admin-nav button{display:flex;align-items:center;justify-content:center;gap:.38rem;padding:.48rem .62rem;font-size:.62rem;line-height:1;letter-spacing:.08em}
#admin .admin-nav button svg{display:block;width:14px;height:14px;flex:none}
#admin .admin-nav .nav-brand{width:32px;padding:.45rem}
#admin .admin-nav .nav-brand svg,#admin .admin-nav .nav-logo{width:17px;height:17px}
#admin .admin-nav .nav-logo{object-fit:contain;border-radius:4px}
#admin .admin-nav .nav-divider{width:1px;height:20px;flex:none}
#admin .admin-nav .admin-theme{width:30px;height:30px;padding:0;font:400 .9rem system-ui;letter-spacing:0}
.admin-panel-nav{position:sticky;top:calc(.75rem + env(safe-area-inset-top,0px));z-index:19;display:flex;gap:.35rem;width:max-content;max-width:100%;margin:0 auto 1rem;padding:.38rem;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(10,10,12,.82);backdrop-filter:blur(16px);overflow-x:auto;box-shadow:0 14px 36px rgba(0,0,0,.38)}
.admin-panel-nav button{flex:none;padding:.55rem .72rem;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:var(--mute);font:500 .56rem 'Orbitron',sans-serif;letter-spacing:.05em;cursor:pointer}
.admin-panel-nav button.active{background:#fff;color:#111;box-shadow:0 4px 18px rgba(255,255,255,.16)}
.admin-panel-nav button:hover,.admin-panel-nav button:focus-visible{background:rgba(255,255,255,.14);color:var(--fg);outline:none}
#admin-members,#admin-background,#admin-city,#admin-match,#admin-delete,#admin-logout{scroll-margin-top:5rem}
.admin-panel-nav ~ .panel[hidden]{display:none!important}
.member-delete-section{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}

@media(max-width:700px){
  .admin-panel-nav{width:100%;justify-content:flex-start;border-radius:.8rem}
  .admin-panel-nav button{padding:.55rem .65rem;font-size:.52rem}
}
#members .members-nav{gap:.15rem;padding:.28rem .36rem}
#members .members-nav button{display:flex;align-items:center;justify-content:center;gap:.38rem;padding:.48rem .62rem;font-size:.62rem;line-height:1;letter-spacing:.08em}
#members .members-nav button svg{display:block;width:14px;height:14px;flex:none}
#members .members-nav .nav-brand{width:32px;padding:.45rem}
#members .members-nav .nav-brand svg,#members .members-nav .nav-logo{width:17px;height:17px}
#members .members-nav .nav-logo{object-fit:contain;border-radius:4px}
#members .members-nav .nav-divider{width:1px;height:20px;flex:none}
#members .members-nav .admin-theme{width:30px;height:30px;padding:0;font:400 .9rem system-ui;letter-spacing:0}
.admin-shortcut{position:fixed;top:calc(.9rem + env(safe-area-inset-top,0px));right:.8rem;z-index:31;display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(8,8,10,.72);color:var(--mute);font-size:0;text-indent:-9999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.32);cursor:pointer}
.admin-shortcut svg{width:13px;height:13px;flex:none}
.admin-shortcut:hover,.admin-shortcut:focus-visible{border-color:rgba(255,255,255,.34);color:var(--fg);outline:none}
.story-wrap{max-width:760px}
#story .story-nav{gap:.15rem;padding:.28rem .36rem}
#story .story-nav button{display:flex;align-items:center;justify-content:center;gap:.38rem;padding:.48rem .62rem;font-size:.62rem;line-height:1;letter-spacing:.08em}
#story .story-nav button svg{display:block;width:14px;height:14px;flex:none}
#story .story-nav .nav-brand{width:32px;padding:.45rem}
#story .story-nav .nav-brand svg,#story .story-nav .nav-logo{width:17px;height:17px}
#story .story-nav .nav-logo{object-fit:contain;border-radius:4px}
#story .story-nav .nav-divider{width:1px;height:20px;flex:none}
#story .story-nav .admin-theme{width:30px;height:30px;padding:0;font:400 .9rem system-ui;letter-spacing:0}
#story.on>nav{animation:content-drop-in .6s cubic-bezier(.2,.7,.25,1) both}
#story.on>.story-wrap>.head{animation:content-focus-in .75s .08s ease both}
#story.on>.story-wrap{padding-top:.25rem}
.story-tabs{display:flex;justify-content:center;gap:.55rem;margin:-.15rem 0 1.2rem}
.timeline-team-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin:-.25rem 0 1rem}
.timeline-team-button{min-width:90px;padding:.58rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--mute);font:500 .62rem 'Orbitron',sans-serif;letter-spacing:.08em;cursor:pointer;transition:.2s ease}
.timeline-team-button:hover,.timeline-team-button:focus-visible,.timeline-team-button.act{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.11);color:var(--fg);outline:none;box-shadow:0 0 18px rgba(255,255,255,.08)}
.timeline-team-lady:hover,.timeline-team-lady:focus-visible,.timeline-team-lady.act{border-color:rgba(255,105,180,.72);background:rgba(255,105,180,.14);color:#ff9ac8;box-shadow:0 0 18px rgba(255,105,180,.18)}
.story-tab{min-width:120px;padding:.68rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--mute);font:500 .68rem 'Orbitron',sans-serif;letter-spacing:.16em;cursor:pointer;transition:.2s ease}
.story-tab:hover,.story-tab:focus-visible,.story-tab.act{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.11);color:var(--fg);outline:none;box-shadow:0 0 18px rgba(255,255,255,.08)}
.story-panel{animation:content-pop-in .45s cubic-bezier(.2,.7,.25,1) both}
.story-panel[hidden]{display:none}
.story-card.city-card{position:absolute;display:block;left:50%;top:auto;width:min(900px,calc(100% - 2rem));height:150px;min-height:150px;max-height:150px;margin:0;padding:0;border-color:rgba(255,255,255,.16);border-radius:16px;background:#090909;box-sizing:border-box;overflow:hidden;transform:translateX(-50%)}
.story-card.city-card{position:relative;left:auto;transform:none;margin:.65rem auto 1rem}
.story-card.city-card .city-card-image{box-sizing:border-box;flex:none}
.city-card::before{display:none}
.city-card-image{position:absolute;left:24px;top:50%;z-index:4;width:min(150px,20%);height:min(110px,72%);margin:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;object-fit:contain;object-position:center;transform:translateY(-50%);background:transparent;backdrop-filter:none;mix-blend-mode:screen;box-shadow:none;-webkit-mask-image:none;mask-image:none;padding:0;pointer-events:none}
.city-card-city,.city-card-year{position:absolute;left:205px;z-index:5;font-family:'Orbitron',sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.city-card-city{top:45px;font-size:18px;font-weight:700;letter-spacing:.04em;color:#fff}
.city-card-year{top:78px;color:rgba(255,255,255,.92);font-size:17px;font-weight:500;letter-spacing:.04em}
.city-card-actions{position:absolute;left:205px;top:10px;z-index:5;display:flex;gap:.45rem;transform:none}
.city-team{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .42rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:500 .38rem 'Orbitron',sans-serif;letter-spacing:.02em;backdrop-filter:blur(8px);cursor:pointer}
.city-team-logo{width:14px;height:14px;object-fit:contain;border:1px solid rgba(255,255,255,.5);border-radius:50%}
.city-team-lady{color:#ff69b4}
.city-group-buttons{position:absolute;top:.75rem;left:2.2rem;display:flex;gap:.35rem;align-items:center}
.city-group-button{width:auto;min-width:0;padding:.18rem .38rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);color:var(--fg);font-size:.42rem;letter-spacing:.05em;line-height:1;text-align:center;white-space:nowrap;cursor:pointer}
.city-group-button{display:inline-flex;align-items:center;gap:.22rem}
.city-button-logo{width:.78rem;height:.78rem;object-fit:contain;object-position:center;flex:none;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:#050505;padding:1px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 7px rgba(255,255,255,.12)}
.city-group-button.lady .city-button-logo{border-color:rgba(255,105,180,.85);box-shadow:0 0 0 1px rgba(255,105,180,.18),0 0 7px rgba(255,105,180,.22)}
.city-group-button:hover,.city-group-button:focus-visible,.city-group-button.act{border-color:rgba(255,255,255,.55);color:#fff;box-shadow:0 0 18px rgba(255,255,255,.12);outline:none}
.city-group-button.lady,.city-group-button.lady:hover,.city-group-button.lady:focus-visible{border-color:rgba(255,105,180,.55);color:#ff69b4;box-shadow:0 0 18px rgba(255,105,180,.18)}
.story-card{position:relative;margin-top:2rem;padding:2.2rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
.story-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(transparent,#fff,transparent)}
.story-label{font:500 .65rem 'Orbitron';letter-spacing:.18em;color:var(--mute)}
.story-card h3{margin:.8rem 0;font:700 1.45rem 'Orbitron';letter-spacing:.08em}
.story-card p{margin:0;color:var(--mute)}
.story-city-list,.story-match-list{display:grid;gap:1rem}
.story-city-list:empty,.story-match-list:empty{display:none}
.story-match-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);align-items:center;gap:.8rem;min-height:82px;margin-top:1rem;padding:.55rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
.story-match-card::before{display:block;width:3px;background:linear-gradient(transparent,rgba(255,255,255,.9),transparent)}
.story-match-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 22% 50%,rgba(255,255,255,.055),transparent 24%),radial-gradient(circle at 78% 50%,rgba(255,50,50,.06),transparent 24%);pointer-events:none}
.story-match-side{display:flex;align-items:center;gap:.72rem;min-width:0}
.story-match-right{justify-content:flex-end;text-align:right}
.story-match-card.lady-right::after{background:radial-gradient(circle at 78% 50%,rgba(255,105,180,.22),transparent 28%),radial-gradient(circle at 22% 50%,rgba(255,255,255,.055),transparent 24%)}
.story-match-card.lady-right .story-match-right .story-match-logo{border-color:rgba(255,105,180,.72);box-shadow:0 0 14px rgba(255,105,180,.42);filter:drop-shadow(0 0 7px rgba(255,105,180,.48))}
.story-match-card.lady-right .story-match-score-right strong{color:#ff70b5;text-shadow:0 0 16px rgba(255,105,180,.62)}
.story-match-card.lady-left::after{background:radial-gradient(circle at 22% 50%,rgba(255,105,180,.22),transparent 28%),radial-gradient(circle at 78% 50%,rgba(255,50,50,.06),transparent 24%)}
.story-match-card.lady-left .story-match-left .story-match-logo{border-color:rgba(255,105,180,.72);box-shadow:0 0 14px rgba(255,105,180,.42);filter:drop-shadow(0 0 7px rgba(255,105,180,.48))}
.story-match-card.lady-left > .story-match-score:nth-child(2) strong{color:#fff!important;text-shadow:0 0 16px rgba(255,255,255,.52)}
.story-match-card.ath-left::after{background:radial-gradient(circle at 22% 50%,rgba(220,225,235,.18),transparent 28%),radial-gradient(circle at 78% 50%,rgba(255,50,50,.06),transparent 24%)}
.story-match-card.ath-left .story-match-left .story-match-logo{border-color:rgba(220,225,235,.42);box-shadow:0 0 14px rgba(220,225,235,.32);filter:drop-shadow(0 0 7px rgba(220,225,235,.38))}
.story-match-card.ath-left > .story-match-score:nth-child(2) strong{color:#fff!important;text-shadow:0 0 16px rgba(220,225,235,.52)}
.story-match-card.ath-right::after{background:radial-gradient(circle at 78% 50%,rgba(220,225,235,.18),transparent 28%),radial-gradient(circle at 22% 50%,rgba(255,255,255,.055),transparent 24%)}
.story-match-card.ath-right .story-match-right .story-match-logo{border-color:rgba(220,225,235,.42);box-shadow:0 0 14px rgba(220,225,235,.32);filter:drop-shadow(0 0 7px rgba(220,225,235,.38))}
.story-match-card.ath-right .story-match-score-right strong{text-shadow:0 0 16px rgba(220,225,235,.52)}
.story-match-logo{width:58px;height:58px;padding:.22rem;object-fit:contain;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(0,0,0,.42)}
.story-match-team{min-width:0}
.story-match-team span{display:block;margin-bottom:.12rem;color:rgba(255,255,255,.72);font:500 .48rem 'Orbitron';letter-spacing:.05em}
.story-match-team strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:700 clamp(.62rem,1vw,.82rem) 'Orbitron';letter-spacing:.02em;text-shadow:0 2px 8px #000}
.story-match-score{text-align:center;min-width:58px;padding:.2rem .55rem}
.story-match-card > .story-match-score:nth-child(2) strong{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.28)}
.story-match-score strong{display:block;color:#fff;font:700 2rem 'Orbitron';line-height:1;text-shadow:0 0 14px rgba(255,255,255,.28)}
.story-match-score span{display:block;margin-top:.25rem;color:rgba(255,255,255,.68);font-size:.45rem;letter-spacing:.12em;text-transform:uppercase}
.story-match-score-right strong{color:#ff3434;text-shadow:0 0 14px rgba(255,52,52,.38)}
.story-timeline{position:relative;display:grid;gap:1rem;margin-top:1rem}
.story-timeline::before{display:none}
.story-chapter{position:relative;padding:1.35rem 1.5rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(8,8,10,.58);box-shadow:0 16px 42px rgba(0,0,0,.22)}
.story-chapter::before{display:none}
.story-year{font:500 .62rem 'Orbitron';letter-spacing:.16em;color:var(--mute)}
.story-chapter h3{margin:.65rem 0 .55rem;font:700 1rem 'Orbitron';letter-spacing:.08em}
.story-chapter p{margin:0;color:var(--mute);line-height:1.75}
.group-logo{position:fixed;top:.72rem;left:.8rem;width:56px;height:56px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(8,8,10,.72);object-fit:contain;z-index:31;filter:drop-shadow(0 0 7px rgba(255,255,255,.18))}
.group-logo.lady-logo{border-color:rgba(255,105,180,.48);filter:drop-shadow(0 0 8px rgba(255,105,180,.42))}
body:has(#admin.on) .admin-shortcut{display:none}
body:has(#members.on)>.tbtn{display:none}
#admin.locked{position:relative;isolation:isolate;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6.5rem 1.5rem 5rem}
#admin.locked:not(.on){display:none}
#admin.locked::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.82)),radial-gradient(ellipse at 50% 38%,rgba(55,55,58,.38),transparent 55%);pointer-events:none}
#admin.locked .admin-nav{position:absolute;top:1.35rem;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2rem);margin:0;padding:.38rem .48rem;border-color:rgba(255,255,255,.1);background:rgba(12,12,14,.68);box-shadow:0 10px 40px rgba(0,0,0,.28);box-sizing:border-box;animation:none!important}
#admin.locked .admin-nav button{display:flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap;padding:.58rem .82rem;font-size:.67rem;letter-spacing:.1em}
#admin.locked .admin-nav button svg{width:15px;height:15px;flex:none}
#admin.locked .admin-nav .nav-brand{width:38px;padding:.55rem;color:#aaa}
#admin.locked .admin-nav .nav-brand svg,#admin.locked .admin-nav .nav-logo{width:19px;height:19px}
#admin.locked .nav-divider{width:1px;height:23px;background:rgba(255,255,255,.1)}
#admin.locked .admin-nav .admin-theme{width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:50%;font:400 1rem system-ui;letter-spacing:0}
#admin.locked>.wrap>.head{display:none}
#admin.locked .wrap{width:100%;max-width:560px;margin:0;padding:0}
#admin.locked #lock{display:block;width:100%;max-width:414px;margin:0 auto;padding:3rem 2.35rem 2.6rem;border:1px solid rgba(255,255,255,.09);border-radius:29px;background:linear-gradient(155deg,rgba(13,13,15,.96),rgba(7,7,8,.97));box-shadow:0 30px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025);text-align:center;backdrop-filter:blur(16px)}
.login-shield{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 1.4rem;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:rgba(255,255,255,.045);color:#929296}
.login-shield svg{width:28px;height:28px}
.login-title{margin:0;color:#f3f3f4;font-size:1.3rem;letter-spacing:.24em}
.login-subtitle{margin:.45rem 0 2.1rem;color:#48484c;font:700 .69rem 'Orbitron',sans-serif;letter-spacing:.2em}
#loginForm{text-align:left}
#admin.locked #lock label{display:block;margin:1.2rem 0 .55rem;color:#5f5f64;text-align:center;font:700 .68rem 'Orbitron',sans-serif;letter-spacing:.16em}
#admin.locked #lock input{width:100%;height:60px;padding:.9rem 1.15rem;border:1px solid rgba(255,255,255,.075);border-radius:15px;outline:none;background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(255,255,255,.025));color:#eee;font:500 .9rem 'Prompt',sans-serif;transition:border-color .2s,box-shadow .2s}
#admin.locked #lock input::placeholder{color:#454549}
#admin.locked #lock input:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.035)}
.password-field{position:relative}
#admin.locked #lock .password-field input{padding-right:3.4rem}
.password-toggle{position:absolute;top:50%;right:.9rem;display:grid;place-items:center;width:34px;height:34px;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:#626267;cursor:pointer}
.password-toggle:hover{background:rgba(255,255,255,.06);color:#ddd}
.password-toggle svg{width:19px;height:19px}
#admin.locked #lock .login-error{min-height:1rem;margin:.5rem 0 0;text-align:center;font-size:.74rem}
#admin.locked #lock .go2{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;height:57px;margin:1rem 0 0;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:linear-gradient(110deg,#202022,#19191b);color:#f5f5f5;font:700 .78rem 'Orbitron',sans-serif;letter-spacing:.14em;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
#admin.locked #lock .go2:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.24);background:linear-gradient(110deg,#29292b,#202022)}
#admin.locked #lock .go2:disabled{opacity:.6;cursor:wait}
.login-arrow{font-size:1.25rem;font-weight:400}
.login-divider{height:1px;margin:1.8rem 0 1.45rem;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.login-footer{margin:0;color:#414145;font:700 .63rem 'Orbitron',sans-serif;letter-spacing:.16em}
.login-footer span{color:#55555a}
#admin.locked #lock .login-local-warning{color:#9e9ea2;font-size:.72rem}
body:has(#admin.locked.on)>.tbtn{display:none}
body:has(#admin.locked.on)>.player{right:1.2rem;bottom:1.2rem;z-index:25;width:288px;padding:.72rem .8rem;border:1px solid rgba(255,255,255,.25);border-radius:17px;background:rgba(13,13,15,.83);box-shadow:0 12px 40px rgba(0,0,0,.55)}
body:has(#admin.locked.on)>.player .player-top{display:flex;align-items:center;gap:.7rem}
body:has(#admin.locked.on)>.player .disc{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at center,#101014 0 20%,#282a30 21% 30%,transparent 31%),conic-gradient(#101014,#333740,#131417,#59606a,#111);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body:has(#admin.locked.on)>.player .pi{flex:1}
body:has(#admin.locked.on)>.player .pi b{font:700 .77rem 'Orbitron',sans-serif}
body:has(#admin.locked.on)>.player .pi small{display:block;margin-top:.18rem}
.player-collapse{width:29px;height:29px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.04);color:#aaa;cursor:pointer}
.player-timeline{display:flex;align-items:center;gap:.45rem;margin:.5rem 0;color:#888;font:500 .55rem 'Orbitron',sans-serif}
.player-timeline input,.player-controls input{height:4px;accent-color:#e9e9eb;cursor:pointer}
.player-timeline input{flex:1}
.player-controls{display:flex;align-items:center;gap:.5rem;padding-left:3.5rem;color:#818187;font:500 .53rem 'Orbitron',sans-serif}
.player-controls input{width:65px}
.volume-icon{font-size:.72rem}
.player-controls #volumeValue{min-width:23px;text-align:right}
.player-controls .pb{margin-left:auto}
.player.collapsed{width:210px}
.player.collapsed .player-timeline,.player.collapsed .player-controls{display:none}
@media (max-width:979px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>.m:only-child{grid-column:1/-1;justify-self:center;width:calc((100% - 1rem)/2)}
.grid>.m:not(:only-child):last-child:nth-child(3n+1){grid-column:auto}
.grid>.m:not(:only-child):last-child:nth-child(2n+1){grid-column:auto;width:100%}
.grid:has(> .m:nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 1rem)/2));justify-content:center}
.grid:not(:has(> .m:nth-child(2):last-child))>.m:not(:only-child):last-child:nth-child(2n+1){grid-column:2;justify-self:center;width:100%}
}
@media (max-width:640px){
.grid{grid-template-columns:minmax(0,1fr)}
.grid>.m:only-child,.grid>.m:not(:only-child):last-child:nth-child(3n+1),.grid>.m:not(:only-child):last-child:nth-child(2n+1){grid-column:auto;width:100%}
.grid:has(> .m:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){body:has(#admin.locked.on)>.player{right:.75rem;bottom:.75rem;transform:scale(.88);transform-origin:bottom right}#admin.locked{padding:6rem 1rem 5rem}#admin.locked .admin-nav{top:1rem;max-width:calc(100vw - 1.5rem)}#admin.locked .admin-nav button{padding:.52rem .55rem;font-size:.58rem;letter-spacing:.04em}#admin.locked .admin-nav .nav-brand{width:29px}.nav-divider{margin:0 .05rem}.admin-shortcut{top:.72rem;right:.55rem;width:29px;height:29px;padding:0}.admin-shortcut span{display:none}}
@media(max-width:520px){#admin.locked #lock{padding:2.7rem 1.6rem 2.3rem;border-radius:25px}.login-shield{width:60px;height:60px}}
@media(max-width:640px){#admin.locked .admin-nav{flex-wrap:nowrap;justify-content:center}#admin.locked .admin-nav .nav-divider{display:none}}
.note{font-size:.75rem;color:var(--mute);margin-top:1rem}
.music-status{padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow-wrap:anywhere}
.panel input[type=file]{padding:.6rem}
.mini{margin-top:.6rem;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--line);background:none;color:var(--mute);font:inherit;font-size:.75rem;cursor:pointer}
.mini:hover{color:var(--fg);border-color:var(--fg)}
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.row small{color:var(--mute);margin-left:.4rem}
.del{padding:.35rem .8rem;border-radius:8px;border:1px solid #a33;background:none;color:#ff8a8a;cursor:pointer;font:inherit;font-size:.75rem}
.del:hover{background:#a33;color:#fff}
.row-actions{display:flex;align-items:center;gap:.45rem;flex:none}
.edit-member{padding:.35rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:none;color:var(--fg);cursor:pointer;font:inherit;font-size:.75rem}
.edit-member:hover{background:rgba(255,255,255,.1)}
#alist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.25rem;max-height:430px;overflow-y:auto;overflow-x:hidden;padding:.25rem .75rem .25rem .25rem}
.admin-member-group{min-width:0;margin-top:0;padding:.15rem .65rem .65rem;border-radius:14px;background:rgba(255,255,255,.025)}
.admin-member-group:first-child{margin-top:0}
.admin-member-group h3{margin:.2rem 0 .35rem;padding:.15rem 0 .55rem;color:#c6c6c6;font-size:.72rem;letter-spacing:.18em;border-bottom:1px solid var(--line)}
.admin-member-group-lady h3{color:#ff9ac8}
.admin-member-group .row{min-height:58px;padding:.7rem .35rem;gap:1rem}
.admin-member-group .row>span:first-child{min-width:0}
.admin-member-group .row small{display:block;margin:.18rem 0 0}
@media(max-width:700px){#alist{grid-template-columns:1fr;gap:1rem;padding-right:.25rem}}
.confirm-dialog{width:min(420px,calc(100vw - 2rem));padding:2rem;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(145deg,#171717,#0b0b0b);color:var(--fg);text-align:center;box-shadow:0 28px 100px rgba(0,0,0,.7)}
.confirm-dialog[open]{animation:dialog-in .2s ease-out both}
.confirm-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.confirm-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 1.1rem;border:1px solid rgba(255,105,105,.28);border-radius:18px;background:rgba(220,65,65,.12);color:#ff8585}
.confirm-icon svg{width:26px;height:26px}
.confirm-eyebrow{margin:0 0 .45rem;color:#ff8585;font-size:.7rem;letter-spacing:.24em}
.confirm-dialog h2{margin:0;font-size:1.15rem;letter-spacing:.12em}
.confirm-message{margin:1rem 0 .4rem;color:#dedede;font-size:.95rem;overflow-wrap:anywhere}
.confirm-message strong{color:#fff}
.confirm-note{margin:0;color:var(--mute);font-size:.76rem}
.confirm-actions{display:flex;gap:.75rem;margin-top:1.7rem}
.confirm-actions button{flex:1;padding:.8rem 1rem;border-radius:12px;font:500 .85rem 'Prompt',sans-serif;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.confirm-actions button:hover{transform:translateY(-1px)}
.confirm-cancel{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg)}
.confirm-cancel:hover{background:rgba(255,255,255,.1)}
.confirm-delete{border:1px solid #d84a4a;background:linear-gradient(135deg,#d94e4e,#a92727);color:#fff;box-shadow:0 6px 20px rgba(190,40,40,.22)}
.confirm-delete:hover{background:linear-gradient(135deg,#ef5c5c,#ba3030)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.notice-dialog{width:min(390px,calc(100vw - 2rem));padding:1.9rem 1.6rem 1.5rem;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(145deg,#19191b,#09090a);color:var(--fg);text-align:center;box-shadow:0 28px 100px rgba(0,0,0,.78)}
.notice-dialog[open]{animation:dialog-in .2s ease-out both}
.notice-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.notice-mark{display:grid;width:54px;height:54px;margin:0 auto .9rem;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));font:700 1.6rem 'Orbitron',sans-serif;box-shadow:0 0 28px rgba(255,255,255,.12)}
.notice-eyebrow{margin:0;color:#9a9a9a!important;font-size:.58rem!important;letter-spacing:.28em;text-transform:uppercase}
.notice-dialog h2{margin:.35rem 0 .75rem;font-size:1.05rem;letter-spacing:.12em}
#noticeMessage{margin:0;color:#d8d8d8;line-height:1.65;white-space:pre-line}
.notice-ok{width:100%;margin-top:1.35rem;padding:.78rem 1rem;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,#fff,#cfcfcf);color:#111;font:700 .78rem 'Orbitron',sans-serif;letter-spacing:.08em;cursor:pointer}
.notice-ok:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,255,255,.14)}
/* PLAYER */
.player{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:40;width:290px;display:flex;flex-direction:column;gap:.45rem;align-items:stretch;padding:.8rem;border:1px solid var(--line);border-radius:18px;background:rgba(10,10,10,.82);color:#f2f2f2;backdrop-filter:blur(14px)}
.player-top{display:flex;gap:.8rem;align-items:center;min-width:0}
.disc{width:52px;height:52px;border-radius:50%;background:conic-gradient(#222,#777,#222,#555,#222);background-position:center;background-size:cover;flex:none;border:1px solid var(--line);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.disc.has-artwork{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 0 12px rgba(255,255,255,.12)}
.player.play .disc{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pi{flex:1;min-width:0}
.pi b{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi small{font-size:.65rem;color:#999}
.bar{height:3px;background:rgba(255,255,255,.2);border-radius:2px;margin:.5rem 0}
.bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.pb{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;font-size:.8rem}
@media(max-width:640px){.player{left:1rem;width:auto}.pick{min-width:260px}.group-logo{top:.65rem;left:.65rem;width:48px;height:48px;padding:5px;border-radius:7px}}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .confirm-dialog{background:linear-gradient(145deg,#fff,#f3f3f3);color:#171717;border-color:rgba(0,0,0,.12)}:root:not([data-theme="dark"]) .confirm-message{color:#444}:root:not([data-theme="dark"]) .confirm-message strong{color:#111}:root:not([data-theme="dark"]) .confirm-cancel{color:#222;background:#f0f0f2;border-color:rgba(0,0,0,.14)}:root:not([data-theme="dark"]) .confirm-cancel:hover{background:#e7e7ea}}