
:root{--cyan:#20ceff;--panel:#06152f;--muted:#8fa3c2}
body.asp-page{min-height:100vh!important;background:linear-gradient(90deg,rgba(1,6,19,.96),rgba(2,11,31,.86),rgba(1,6,19,.97)),url("assets/football-stadium-bg.png") center/cover fixed!important;color:#f4f7ff!important}
.asp-shell{width:min(1500px,calc(100% - 36px));margin:18px auto 46px}.asp-page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0 18px;border-bottom:1px solid rgba(76,135,205,.12)}.asp-title-wrap{display:flex;align-items:center;gap:14px}.asp-back{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(40,199,255,.48);background:#082149;color:#fff;text-decoration:none}.asp-kicker{display:block;color:#59dfff;font-size:.48rem;font-weight:950;letter-spacing:.16em}.asp-page-head h1{margin:2px 0 0;font-size:1.7rem}.asp-page-head p{margin:3px 0;color:#94a7c4;font-size:.66rem}.asp-login{display:flex;gap:12px;align-items:center;color:#9cacc3;font-size:.58rem}.asp-login a{padding:9px 14px;border:1px solid rgba(100,159,231,.32);border-radius:9px;color:#fff;text-decoration:none;background:#06142c}
.asp-player-section{margin:16px 0 14px}.asp-section-label{color:#dbe7f8;font-size:.52rem;font-weight:950;letter-spacing:.13em}.asp-section-label.cyan{color:#5de2ff}.asp-player-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:8px}.asp-player-row button{min-height:56px;padding:7px 12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(65,126,204,.27);border-radius:10px;color:#dbe7f6;background:#06142e;cursor:pointer}.asp-player-row button.active{border-color:#20cfff;box-shadow:inset 0 0 24px rgba(22,119,255,.13)}.asp-mini-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;display:block;border:1px solid #19cfff}.asp-mini-avatar svg{width:100%;height:100%}.asp-player-row b{font-size:.66rem}
.asp-studio{display:grid;grid-template-columns:330px minmax(540px,1fr) 300px;gap:14px;padding:14px;border:1px solid rgba(43,150,227,.42);border-radius:19px;background:linear-gradient(145deg,rgba(4,17,42,.98),rgba(2,11,29,.995));box-shadow:0 30px 95px rgba(0,0,0,.34)}.asp-preview-column{display:grid;gap:12px;align-content:start}.asp-preview-card,.asp-presets-card,.asp-live-preview article{border:1px solid rgba(71,132,204,.31);border-radius:15px;background:linear-gradient(180deg,#071b3c,#04142e)}.asp-preview-card{padding:18px;text-align:center}.asp-preview-card>.asp-section-label{text-align:left}.asp-avatar-orbit{position:relative;width:236px;height:236px;margin:14px auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(29,118,255,.25),rgba(4,18,43,.2) 58%,transparent 60%)}.asp-avatar-orbit:before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid #1acfff;box-shadow:0 0 30px rgba(26,207,255,.38)}.asp-avatar-preview{width:218px;height:218px;border-radius:50%;overflow:hidden;background:#061735}.asp-avatar-preview svg{width:100%;height:100%}.asp-glow-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#60eaff;box-shadow:0 0 14px #42dfff}.asp-glow-dot.one{top:26px;right:39px}.asp-glow-dot.two{bottom:38px;left:22px}.asp-preview-card h2{margin:8px 0 4px;font-size:1.05rem}.asp-preview-card p{margin:0;color:#91a5c3;font-size:.6rem}.asp-presets-card{padding:15px}.asp-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.asp-presets button{aspect-ratio:1;border:2px solid transparent;border-radius:50%;overflow:hidden;padding:0;background:#06152e;cursor:pointer}.asp-presets button.active{border-color:#1bd0ff;box-shadow:0 0 16px rgba(27,208,255,.32)}.asp-presets svg{width:100%;height:100%}
.asp-controls{padding:5px 2px;display:grid;align-content:start;gap:16px}.asp-control-block{display:grid;gap:8px}.asp-choice-grid.two{display:grid;grid-template-columns:repeat(2,140px);gap:9px}.asp-choice-grid button{min-height:44px;border:1px solid rgba(73,132,205,.31);border-radius:10px;background:#06142e;color:#b9c8dd;cursor:pointer}.asp-choice-grid button.active{border-color:#1bcfff;color:#fff}.asp-color-row{display:flex;gap:9px;flex-wrap:wrap}.asp-color-row button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:var(--sw);cursor:pointer}.asp-color-row button.active{border-color:#20d3ff;box-shadow:0 0 0 3px rgba(32,211,255,.10)}.asp-option-grid{display:grid;gap:8px}.asp-option-grid.hair{grid-template-columns:repeat(7,1fr)}.asp-option-grid.beard{grid-template-columns:repeat(6,1fr)}.asp-option-grid button{min-height:76px;padding:5px;display:grid;place-items:center;align-content:center;gap:3px;border:1px solid rgba(66,123,194,.26);border-radius:10px;background:#06142e;color:#94a8c6;cursor:pointer}.asp-option-grid button.active{border-color:#1bd0ff}.asp-option-grid [data-option-avatar]{width:47px;height:47px;display:block;border-radius:9px;overflow:hidden}.asp-option-grid [data-option-avatar] svg{width:100%;height:100%}.asp-option-grid b{font-size:1.45rem}.asp-option-grid small{font-size:.43rem}.asp-accessories{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.asp-accessories button{min-height:82px;padding:6px;display:grid;place-items:center;align-content:center;gap:7px;border:1px solid rgba(66,123,194,.26);border-radius:10px;background:#06142e;color:#9cafca;cursor:pointer}.asp-accessories button.active{border-color:#1bd0ff}.asp-accessories b{font-size:1.45rem;color:#d9e5f5}.asp-accessories span{font-size:.49rem}.asp-actions{display:flex;gap:10px}.asp-actions button{min-height:43px;padding:0 18px;border:1px solid rgba(72,132,204,.31);border-radius:9px;background:#06142e;color:#acbed7;cursor:pointer}.asp-actions button.primary{border-color:#1acfff;color:#4adfff}
.asp-live-preview{display:grid;gap:14px;align-content:start}.asp-live-preview article{padding:14px}.asp-preview-title{font-size:.7rem;font-weight:900}.asp-live-preview p{color:#8fa3c0;font-size:.53rem}.asp-profile-demo{margin-top:12px;padding:12px;display:flex;align-items:center;gap:12px;border:1px solid rgba(65,121,190,.24);border-radius:11px;background:#031027}.asp-profile-demo>span{width:78px;height:78px;border-radius:50%;overflow:hidden;display:block;border:2px solid #1bcfff}.asp-profile-demo svg{width:100%;height:100%}.asp-profile-demo strong{display:block}.asp-profile-demo small{display:block;margin-top:6px;color:#879bb8;font-size:.47rem}.asp-mini-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}.asp-mini-person{text-align:center}.asp-mini-person>span{width:43px;height:43px;margin:auto;display:block;border-radius:50%;overflow:hidden;border:1px solid #1bcfff}.asp-mini-person svg{width:100%;height:100%}.asp-mini-person small{display:block;margin-top:4px;color:#c2d1e5;font-size:.4rem}
.asp-password{margin-top:14px}.asp-password h2{margin:0 0 7px}.asp-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:14px;border:1px solid rgba(44,146,222,.35);border-radius:13px;background:#04142d}.asp-password label>span{display:block;margin-bottom:6px;font-size:.53rem}.asp-password-input{height:43px;display:grid;grid-template-columns:35px 1fr 38px;align-items:center;border:1px solid rgba(70,121,188,.27);border-radius:9px;background:#061630}.asp-password-input i{text-align:center}.asp-password-input input{height:40px;border:0;outline:0;background:transparent;color:#fff}.asp-password-input button{height:34px;border:0;background:transparent;color:#879bb9}.asp-password>small{display:block;margin-top:6px;color:#7186a3;font-size:.48rem}.asp-message{min-height:20px;margin-top:8px;text-align:center}.asp-message.error{color:#ff9db0}.asp-message.success{color:#73efbd}.asp-submit{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:30px}.asp-submit button{min-width:390px;min-height:48px;border:1px solid #1bcfff;border-radius:9px;color:#fff;background:linear-gradient(180deg,#137dff,#07469f);font-weight:950}.asp-submit a{color:#55dcff;text-decoration:none}
@media(max-width:1200px){.asp-studio{grid-template-columns:300px 1fr}.asp-live-preview{grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media(max-width:820px){.asp-shell{width:calc(100% - 16px)}.asp-login{display:none}.asp-player-row{display:flex;overflow:auto}.asp-player-row button{min-width:135px}.asp-studio{grid-template-columns:1fr;padding:9px}.asp-preview-column{grid-template-columns:1fr 1fr}.asp-option-grid.hair{grid-template-columns:repeat(4,1fr)}.asp-option-grid.beard{grid-template-columns:repeat(3,1fr)}.asp-accessories{grid-template-columns:repeat(3,1fr)}.asp-live-preview{grid-template-columns:1fr}.asp-password-grid{grid-template-columns:1fr}.asp-submit{display:grid;text-align:center}.asp-submit button{min-width:0;width:100%}}
@media(max-width:540px){.asp-preview-column{grid-template-columns:1fr}.asp-avatar-orbit{width:210px;height:210px}.asp-avatar-preview{width:194px;height:194px}.asp-option-grid.hair{grid-template-columns:repeat(3,1fr)}}
