:root{font-family:Inter,PingFang SC,system-ui,sans-serif;color:#f7f9ff;background:#080b14;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:720px;min-height:100vh;background:#080b14}button,input{font:inherit}button{cursor:pointer}.splash,.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#172a48,#080b14 65%)}.splash{text-align:center;align-content:center;overflow:hidden}.splash .logo{width:112px;height:112px;display:grid;place-items:center;margin:auto;border-radius:50%;font-size:54px;background:linear-gradient(135deg,#4bdaf8,#7888ff);box-shadow:0 0 60px #45dff655;animation:float 2s ease-in-out infinite}.splash h1{font-size:36px;margin:28px 0 8px}.splash p{font-size:11px;letter-spacing:3px;color:#fff5}.loader{width:180px;height:3px;background:#ffffff15;margin:34px auto;border-radius:9px;overflow:hidden}.loader i{display:block;height:100%;background:#4bdaf8;animation:load 2.2s ease-in-out infinite}.particles{position:fixed;inset:0;background-image:radial-gradient(#4bdaf8 1px,transparent 1px),radial-gradient(#7888ff 1px,transparent 1px);background-size:71px 71px,113px 113px;opacity:.25;animation:drift 8s linear infinite}@keyframes load{0%{width:5%}to{width:100%}}@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes drift{to{transform:translateY(71px)}}.login-card{width:min(920px,calc(100vw - 48px));min-height:520px;display:grid;grid-template-columns:390px 1fr;background:#111725;border:1px solid #ffffff12;border-radius:32px;overflow:hidden;box-shadow:0 30px 100px #0008}.brand{padding:54px 44px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#1c5871,#29305d)}.brand b{font-size:65px}.brand h1{font-size:44px;line-height:.95;margin:28px 0 18px}.brand p,form>p{color:#fff8}.login-card form{padding:54px 48px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:30px;margin:0 0 4px}.login-card label{display:flex;flex-direction:column;gap:7px;color:#7de6fb;font-size:12px;margin-top:18px}.login-card input,.search input{background:#ffffff08;color:#fff;border:1px solid #ffffff20;border-radius:14px;padding:15px;outline:none}.login-card input:focus{border-color:#4bdaf8;box-shadow:0 0 0 2px #4bdaf822}.login-card em{color:#ff7288;font-style:normal;margin-top:12px}.login-card button,.admin button,.mapping footer button{margin-top:24px;border:0;border-radius:14px;padding:15px;background:#4bdaf8;color:#07121d;font-weight:800}.library,.admin{min-height:100vh;padding:24px;background:radial-gradient(circle at 65% -20%,#182541,#080b14 48%)}.library>header,.admin>header{height:56px;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:12px;font-size:30px}.wordmark span{display:flex;flex-direction:column}.wordmark b{font-size:22px}.wordmark small{font-size:9px;color:#fff5;letter-spacing:2.3px}.account,.account .seg{display:flex;align-items:center;gap:9px}.seg{padding:3px;border:1px solid #ffffff33;border-radius:13px}.seg button,.icon,.systems button{border:0;color:#fff;background:transparent;border-radius:10px;padding:9px 14px}.seg button.active,.systems button.active{color:#09101a;background:#ffc858}.icon{font-size:20px;padding:9px}.library nav{margin-top:18px;padding:10px 14px;display:flex;align-items:center;gap:18px;background:#111725cc;border:1px solid #ffffff12;border-radius:18px}.systems{display:flex;gap:8px;flex:1;overflow:auto}.systems button{border:1px solid #ffffff44;font-weight:700}.search{width:300px;display:flex;align-items:center;gap:8px;padding-left:12px;border:1px solid #ffffff33;border-radius:12px}.search input{width:100%;border:0;background:transparent;padding:10px 0}.search button{border:0;background:transparent;color:#fff;font-size:20px}.content{height:calc(100vh - 150px);padding-top:18px;display:flex;gap:22px}.grid{flex:5;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;align-content:start;overflow:auto;padding:4px}.grid article{height:142px;padding:17px;display:flex;flex-direction:column;background:linear-gradient(145deg,#294e68,#111725 70%);border:1px solid #ffffff12;border-radius:18px;transition:.18s}.grid article:hover{transform:translateY(-3px);border-color:#fff5}.grid article.selected{border:2px solid white;box-shadow:0 10px 30px #42dff533}.grid article span{align-self:flex-start;padding:4px 9px;border-radius:99px;background:#0004;font-size:10px;font-weight:900}.grid h3{margin:auto 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid small{color:#ffc858}.content aside{flex:3;padding:20px;border:1px solid #ffffff12;border-radius:22px;background:linear-gradient(#171e2e,#111725);display:flex;flex-direction:column}.cover{flex:1;min-height:180px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#2b7793,#292f5d);font-size:70px}.content aside h2{margin:17px 0}.content aside button{padding:14px;border:0;border-radius:12px;background:#4bdaf8;font-weight:800}.content aside .secondary{margin-top:10px;background:transparent;color:#fff;border:1px solid #ffffff55}.empty{width:100%;display:grid;place-items:center;color:#fff8}.error{color:#ff7288}.admin section{max-width:800px;margin:40px auto}.admin article{display:flex;align-items:center;gap:14px;padding:16px;border-bottom:1px solid #ffffff13}.admin article div{flex:1;display:flex;flex-direction:column}.admin article button{margin:0 0 0 8px;padding:9px 13px}.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#284d68}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#000b}.mapping{width:min(980px,calc(100vw - 60px));max-height:90vh;overflow:auto;padding:22px;background:#111725;border:1px solid #ffffff20;border-radius:24px}.mapping header{display:flex;align-items:center;justify-content:space-between}.mapping header h2{margin:0}.mapping .mapping-close{flex:0 0 40px;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid #ffffff26;border-radius:50%;background:#ffffff0b;color:#dce6f7;font-size:25px;font-weight:400;line-height:1;transition:.16s}.mapping .mapping-close:hover{background:#ff647822;border-color:#ff7185;color:#ff8b9b;transform:rotate(90deg)}.players{display:grid;grid-template-columns:1fr 1fr;gap:22px}.players>div{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.players h3{grid-column:1/-1}.players button{display:flex;justify-content:space-between;padding:10px;border:1px solid #ffffff15;border-radius:10px;background:#ffffff08;color:#fff}.player{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:100;background:#000}.logout-modal{z-index:120}.logout-confirm{width:min(410px,calc(100vw - 32px));padding:30px;background:#111725;border:1px solid #ffffff20;border-radius:24px;box-shadow:0 24px 80px #000b;text-align:center}.logout-confirm>span{width:56px;height:56px;margin:auto;display:grid;place-items:center;border-radius:18px;background:#ff66751a;color:#ff8491;font-size:30px}.logout-confirm h2{margin:18px 0 8px}.logout-confirm p{margin:0;color:#ffffff8f}.logout-confirm em{display:block;margin-top:12px;color:#ff7c8d;font-style:normal}.logout-confirm div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.logout-confirm button{height:46px;border-radius:12px;border:1px solid #ffffff20;color:#fff;font-weight:800}.logout-confirm .secondary{background:#ffffff0a}.logout-confirm .danger{background:#e9586c;border-color:#e9586c}.logout-confirm button:disabled{opacity:.55}.portrait-modal{z-index:130!important;align-items:center!important;background:#03060dcc!important;padding:20px!important}.portrait-notice{width:min(360px,calc(100vw - 36px));padding:30px 26px;border:1px solid #ffffff20;border-radius:24px;background:linear-gradient(160deg,#172238,#101624);box-shadow:0 24px 80px #000c;text-align:center}.portrait-notice>span{width:62px;height:62px;margin:auto;display:grid;place-items:center;border-radius:20px;background:#58ddf51c;color:#70e7fb;font-size:38px}.portrait-notice h2{margin:18px 0 8px;font-size:25px}.portrait-notice p{margin:0;color:#fff9}.portrait-notice button{width:100%;height:48px;margin-top:24px;border:0;border-radius:13px;background:#50daf5;color:#07121d;font-weight:900}html,body,#app{width:100%;height:100%;overflow:hidden}.library{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}.library .icon{width:48px;height:44px;display:grid;place-items:center;padding:0;font-size:27px;line-height:1}.library .search{height:44px;padding-left:14px;font-size:25px;line-height:1}.library .search input{height:42px;padding:8px 0;font-size:16px}.library .content{height:auto;flex:1;min-height:0;overflow:hidden}.library .grid{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.library .grid::-webkit-scrollbar{display:none}.admin-actions{display:flex;align-items:center;gap:14px}.admin .admin-actions button{height:44px;margin:0;padding:0 20px;border-radius:12px}.admin .admin-actions .logout-button{color:#dbe5f5;background:#ffffff0a;border:1px solid #ffffff38}.admin .admin-actions .logout-button:hover{color:#fff;background:#ffffff16;border-color:#fff6}.admin .admin-actions .enter-library:hover{background:#76e7ff}.library .keyboard-button{width:58px}.library .keyboard-button span{display:block;font-size:32px;line-height:1;transform:scale(1.2)}.library .grid h3{margin:auto 0 2px;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}@media(max-width:1024px){body{min-width:0;min-height:100dvh}.splash,.login-page{min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}input{font-size:16px!important}.splash .logo{width:84px;height:84px;font-size:40px}.splash h1{font-size:27px;margin-top:22px}.splash p{font-size:9px;letter-spacing:2px}.loader{width:145px;margin-top:28px}.login-card{width:100%;min-height:0;max-width:430px;display:block;border-radius:24px}.brand{min-height:174px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-content:center;justify-content:initial}.brand b{grid-row:1/3;font-size:48px;align-self:center}.brand h1{font-size:31px;line-height:1;margin:0}.brand p{margin:8px 0 0;font-size:13px}.login-card form{padding:30px 26px 34px}.login-card h2{font-size:25px}.login-card form>p{margin:6px 0 2px;font-size:13px}.login-card label{margin-top:15px}.login-card input{padding:13px}.login-card button{margin-top:20px;padding:14px}.library,.admin{height:100dvh;min-height:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}.library>header{height:auto;min-height:46px;gap:8px}.wordmark{gap:8px;font-size:23px;min-width:0}.wordmark b{font-size:16px;white-space:nowrap}.wordmark small{font-size:7px;letter-spacing:1.5px}.account{gap:5px;font-size:0}.account .seg{gap:2px;border-radius:11px}.seg button{padding:7px 9px;font-size:12px;white-space:nowrap}.library .icon{width:38px;height:38px;font-size:23px}.library nav{margin-top:10px;padding:9px;display:grid;grid-template-columns:1fr;gap:9px;border-radius:15px}.systems{width:100%;padding-bottom:2px;scrollbar-width:none}.systems::-webkit-scrollbar{display:none}.systems button{flex:0 0 auto;padding:7px 12px;font-size:12px}.library .search{width:100%;height:40px;font-size:21px}.library .search input{height:38px;font-size:14px}.library .content{padding-top:10px;display:flex;flex-direction:column;gap:10px;overflow:hidden}.content aside{order:-1;flex:0 0 auto;min-height:0;padding:10px;border-radius:16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr;gap:8px;align-items:center}.content aside .cover{display:none}.content aside h2{grid-column:1;grid-row:1;margin:0;font-size:16px;line-height:1.3;overflow-wrap:anywhere;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content aside button{grid-row:1;min-width:108px;padding:10px 12px;font-size:12px}.content aside .secondary{margin-top:0}.library .grid{flex:1;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:2px}.grid article{height:112px;padding:12px;border-radius:14px}.grid article:hover{transform:none}.library .grid h3{font-size:12px;line-height:1.3}.grid article span{padding:3px 7px;font-size:8px}.grid small{font-size:10px}.empty{min-height:160px;text-align:center;padding:20px}.admin{overflow-y:auto}.admin>header{height:auto;display:block}.admin>header h1{font-size:21px;margin:8px 0 16px}.admin-actions{gap:9px}.admin .admin-actions button{height:40px;padding:0 15px;font-size:13px}.admin section{margin:22px 0 0}.admin section>button{width:100%;margin:0 0 12px}.admin article{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:8px;padding:13px 2px}.admin article div{min-width:0}.admin article div b{overflow:hidden;text-overflow:ellipsis}.admin article div small{font-size:11px;color:#fff8}.admin article button{margin:0;padding:8px 9px;font-size:12px}.avatar{width:38px;height:38px}.modal{align-items:stretch;padding:0;background:#080b14}.mapping{width:100%;height:100dvh;max-height:none;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;border-radius:0}.mapping header{position:sticky;top:0;z-index:2;padding-bottom:12px;background:#111725}.mapping header h2{font-size:21px}.players{display:block}.players>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.players>div+div{margin-top:22px}.players h3{margin:10px 0}.players button{min-width:0;padding:10px 9px;font-size:12px}.players button b{max-width:55%;overflow:hidden;text-overflow:ellipsis}.mapping footer{position:sticky;bottom:0;padding-top:10px;background:#111725}.mapping footer button{width:100%;margin:0}}@media(max-width:480px){.wordmark small{display:none}.wordmark b{font-size:14px}.seg button{padding:7px;font-size:11px}.library .grid{grid-template-columns:1fr}.grid article{height:96px}.content aside{grid-template-columns:minmax(0,1fr) 104px}.content aside button{min-width:104px}.admin article{grid-template-columns:38px minmax(0,1fr) auto}.admin article button:last-child{grid-column:3}.admin article button:nth-last-child(2){grid-column:3}.admin article{align-items:center}}@media(max-width:1024px)and (max-height:540px){.login-card{max-width:760px;display:grid;grid-template-columns:280px 1fr}.brand{min-height:0;display:flex;padding:24px}.brand b{font-size:38px}.brand h1{font-size:28px;margin-top:12px}.login-card form{padding:22px 28px}.login-card label{margin-top:10px}.library>header{min-height:40px}.library nav{grid-template-columns:minmax(0,1fr) 230px}.library .content{flex-direction:column}.content aside{order:-1;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr}.content aside h2{grid-row:1;margin:0}.content aside button{grid-row:1}.library .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1024px)and (orientation:landscape){.splash,.login-page,.library,.admin{width:100vw;max-width:none;height:100dvh;min-height:100dvh;margin:0}.login-page{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.login-card{width:100%;max-width:none;height:100%;min-height:0;grid-template-columns:clamp(220px,32vw,330px) minmax(0,1fr);border-radius:18px}.login-card form,.brand{width:100%;max-width:none}.library,.admin{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.library>header,.library nav,.library .content,.admin>header,.admin section{width:100%;max-width:none;margin-left:0;margin-right:0}.admin section{max-width:none;margin-top:16px}.logout-confirm,.portrait-notice{max-width:min(460px,calc(100vw - 32px))}}