@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{color:#f5f0ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;--purple:#a855f7;--bright-purple:#c084fc;--border:#282037;--muted:#a39ab7;--panel:#100d19;background:#07060d;font-family:Inter,sans-serif;font-weight:400}*{box-sizing:border-box}body{color:#e5e7eb;background-color:#080b16;background-image:radial-gradient(at 15% 10%,#6d28d938,#0000 45%),radial-gradient(at 85% 80%,#0ea5e91f,#0000 45%),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--bright-purple);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.4}.app-shell{width:min(100%,760px);margin:auto;padding:22px 18px 36px}.topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.menu-toggle{color:#c4b5fd;cursor:pointer;background:#7c3aed1f;border:1px solid #a855f759;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:23px;transition:all .2s;display:flex}.menu-toggle:hover{color:#fff;background:#7c3aed4d;border-color:#a855f7}.menu-toggle:active{transform:scale(.95)}.brand-mark{color:#e9c7ff;background:linear-gradient(145deg,#4c1679,#150a25);border:1px solid #c084fc;border-radius:14px;flex-shrink:0;place-items:center;width:46px;height:46px;font-family:Georgia,serif;font-size:30px;font-weight:700;display:grid;box-shadow:0 0 24px #8b5cf633}.brand-copy{min-width:0}.brand-copy h1{margin:0;font-size:16px;font-weight:800}.brand-copy p{color:var(--muted);margin:5px 0 0;font-size:11px}.patch-badge{border:1px solid var(--border);color:var(--bright-purple);white-space:nowrap;background:#171020;border-radius:9px;margin-left:auto;padding:7px 9px;font-size:10px}.hero{padding:34px 3px 25px}.eyebrow{color:var(--bright-purple);letter-spacing:2px;font-size:10px;font-weight:800}.hero h2{letter-spacing:-1.8px;margin:12px 0 8px;font-size:clamp(29px,7vw,43px)}.hero h2 span{color:var(--bright-purple)}.hero p{max-width:420px;color:var(--muted);margin:0;font-size:13px;line-height:1.7}.panel{border:1px solid var(--border);background:linear-gradient(155deg,#151020,#0b0911 75%);border-radius:20px;margin-bottom:18px;padding:20px 15px;box-shadow:0 14px 40px #00000025}.section-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px;display:flex}.section-heading>div{align-items:center;gap:10px;display:flex}.section-heading h2{margin:0;font-size:15px;font-weight:700}.step{width:27px;height:27px;color:var(--bright-purple);background:#301443;border:1px solid #7540a7;border-radius:9px;place-items:center;font-size:11px;font-weight:800;display:grid}.role-selector{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:27px;display:grid}.role-button{color:#c6bdd6;background:#0c0a13;border:1px solid #30263f;border-radius:13px;justify-content:center;align-items:center;gap:10px;min-height:64px;font-size:13px;font-weight:700;transition:all .2s;display:flex}.role-button.active{color:#fff;background:linear-gradient(130deg,#581b91,#27103f);border-color:#b45cff;box-shadow:inset 0 0 20px #a855f722,0 0 15px #a855f718}.role-icon{color:var(--bright-purple);font-size:23px}.champion-heading{margin-bottom:13px}.search-input{color:#fff;background:#090710;border:1px solid #332741;border-radius:12px;outline:none;width:100%;height:46px;margin-bottom:14px;padding:0 14px;font-size:13px;display:block}.search-input::placeholder{color:#8c829f}.search-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #a855f71c}.champion-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 6px;display:grid}.champion-card{color:#cfc4df;background:0 0;border:1px solid #0000;border-radius:10px;min-width:0;padding:4px;transition:all .15s}.champion-card img{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%;display:block}.champion-card span{text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-size:10px;display:block;overflow:hidden}.champion-card:hover,.champion-card.chosen{border-color:var(--purple);background:#301443}.champion-card.chosen img{box-shadow:0 0 0 2px var(--purple)}.selected-card{background:#1c102a;border:1px solid #7540a7;border-radius:12px;align-items:center;gap:12px;margin-bottom:14px;padding:10px;display:flex}.selected-card img{object-fit:cover;border-radius:9px;width:52px;height:52px}.selected-card div{gap:6px;display:grid}.selected-card strong{font-size:14px}.selected-card span{color:var(--muted);font-size:11px}.remove-button{color:#d8b4fe;background:0 0;border:0;margin-left:auto;font-size:25px}.enemy-heading{margin-top:29px}.counter{color:var(--bright-purple);font-size:12px;font-weight:700}.enemy-list{flex-wrap:wrap;gap:7px;margin-bottom:13px;display:flex}.enemy-chip{color:#f1e5ff;background:#21132f;border:1px solid #51306c;border-radius:30px;align-items:center;gap:7px;padding:5px 8px 5px 5px;font-size:11px;display:flex}.enemy-chip img{border-radius:50%;width:25px;height:25px}.enemy-chip span{color:#d8b4fe;font-size:16px}.enemy-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.enemy-option{color:#e4d9f2;text-align:left;background:#0c0a13;border:1px solid #282037;border-radius:10px;align-items:center;gap:7px;min-width:0;padding:7px;display:flex}.enemy-option img{object-fit:cover;border-radius:7px;width:32px;height:32px}.enemy-option>span:nth-child(2){text-overflow:ellipsis;flex:1;font-size:10px;overflow:hidden}.add-icon{color:var(--bright-purple);font-size:16px}.primary-button{color:#fff;letter-spacing:.7px;background:linear-gradient(100deg,#7e22ce,#a855f7);border:1px solid #c084fc;border-radius:12px;width:100%;min-height:50px;margin-top:22px;font-size:12px;font-weight:800;transition:all .2s;box-shadow:0 7px 24px #7e22ce30}.primary-button:not(:disabled):hover{filter:brightness(1.15);transform:translateY(-1px)}.helper-text,.message{color:var(--muted);font-size:11px;line-height:1.7}.helper-text{text-align:center;margin:12px 0 0}.error-message{color:#fca5a5;font-size:12px;line-height:1.6}.summary-panel{scroll-margin-top:20px}.summary-panel>h2{margin:10px 0 20px;font-size:23px}.matchup-versus{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;display:grid}.matchup-versus>div:first-child,.enemy-portraits>div{flex-direction:column;align-items:center;gap:7px;min-width:0;display:flex}.matchup-versus img{object-fit:cover;border:1px solid #7540a7;border-radius:13px;width:66px;height:66px}.matchup-versus strong{overflow-wrap:anywhere;text-align:center;max-width:100%;font-size:11px}.matchup-versus span:not(.versus){color:var(--muted);font-size:10px}.versus{color:var(--bright-purple);font-size:13px;font-weight:800}.enemy-portraits{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}.enemy-portraits img{width:48px;height:48px}.more-enemies{color:var(--bright-purple);align-self:center;font-size:12px}footer{text-align:center;flex-direction:column;align-items:center;gap:7px;padding:20px 0 0;display:flex}.brand-mark.small{border-radius:10px;width:32px;height:32px;font-size:20px}footer p{color:#c4b5d8;letter-spacing:1.3px;margin:5px 0 0;font-size:9px;font-weight:700}footer>span:last-child{color:#766b85;font-size:10px}@media (width<=390px){.app-shell{padding-left:12px;padding-right:12px}.panel{padding:16px 11px}.champion-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.enemy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.patch-badge{font-size:9px}}.analysis-panel h2{margin:12px 0 25px;font-size:25px}.analysis-panel h3{color:#e9d5ff;margin:25px 0 13px;font-size:15px}.advice-list{gap:9px;display:grid}.advice-card{background:#171020;border:1px solid #342344;border-radius:12px;align-items:center;gap:12px;padding:13px;display:flex}.advice-dot{color:#c084fc;font-size:20px}.advice-card p{color:#ddd0eb;margin:0;font-size:12px;line-height:1.6}.rune-box{background:linear-gradient(140deg,#30154b,#100b1a);border:1px solid #69349b;border-radius:14px;flex-direction:column;gap:9px;padding:18px;display:flex}.rune-box strong{color:#fff;font-size:18px}.rune-box p{color:#c9b7dc;margin:0 0 13px;font-size:12px}.suggested-items{gap:10px;display:grid}.suggested-item{background:#120d1b;border:1px solid #322440;border-radius:12px;align-items:center;gap:14px;padding:12px;display:flex}.suggested-item img{border:1px solid #8640c2;border-radius:10px;width:55px;height:55px}.suggested-item strong{color:#f3e8ff;font-size:13px}.suggested-item p{color:#bca9cf;margin:6px 0;font-size:11px;line-height:1.5}.suggested-item span{color:#d8b4fe;font-size:11px}.update-banner{color:#f3e8ff;background:#241035;border:1px solid #a855f7;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:14px;font-size:12px;display:flex}.update-banner button{color:#fff;background:#9333ea;border:none;border-radius:8px;padding:10px 14px;font-weight:700}.lane-opponent-box{background:#1b1029;border:1px solid #69349b;border-radius:12px;flex-direction:column;gap:10px;margin:15px 0;padding:15px;display:flex}.lane-opponent-box label{color:#e9d5ff;font-size:12px;font-weight:700}.lane-opponent-box select{color:#fff;background:#0c0915;border:1px solid #8640c2;border-radius:9px;width:100%;padding:12px;font-size:13px}.build-panel{background:#171326;border:1px solid #7445c7;border-radius:14px;margin:24px 0;padding:20px}.build-panel h3{color:#c9a7ff;margin-bottom:8px}.build-panel p{color:#aaa3bb;margin-bottom:18px;font-size:14px}.build-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.build-item{text-align:center;background:#241b38;border:1px solid #49356c;border-radius:10px;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;display:flex}.build-item img{border:2px solid #a66bff;border-radius:8px;width:56px;height:56px}.build-item strong{overflow-wrap:anywhere;font-size:13px}.build-item span{color:#d3b8ff;font-size:13px}@media (width<=480px){.build-items{grid-template-columns:repeat(2,minmax(0,1fr))}}.build-warning{color:#ffd99b;background:#332314;border:1px solid #e5a340;border-radius:10px;margin:16px 0;padding:14px 16px;font-size:14px;line-height:1.5}.build-warning p{color:#ffca75;margin:8px 0 0;font-size:12px}.riot-stats-panel{color:#f5edff;background:linear-gradient(135deg,#21102f,#120d1c);border:1px solid #7436a8;border-radius:18px;margin:20px 0;padding:24px;box-shadow:0 8px 28px #0003}.riot-stats-panel h3{color:#d8a3ff;margin:0 0 18px;font-size:21px}.riot-stats-panel h4{color:#c78dff;margin:20px 0 12px}.riot-stats-panel strong{color:#fff}.riot-stats-panel p{color:#d4c6e2;font-size:14px;line-height:1.6}.riot-stats-panel>div>div{background:#9e56dc1a;border:1px solid #9e56dc33;border-radius:10px;margin-top:10px;padding:12px 15px}.riot-stats-panel>div>div p{margin:6px 0 0}.app-tabs{background:#1d142a;border:1px solid #ac68ff33;border-radius:16px;gap:6px;margin:18px 0 26px;padding:6px;display:flex}.app-tabs button{color:#bdaacb;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:11px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 18px;font-size:14px;font-weight:700;transition:background .2s,color .2s,box-shadow .2s;display:flex}.app-tabs button:hover{color:#fff;background:#9b55eb29}.app-tabs button.active{color:#fff;background:linear-gradient(135deg,#7b36c7,#572494);border-color:#d6a5ff4d;box-shadow:0 4px 16px #752ec640}.app-tabs button:focus-visible{outline-offset:2px;outline:2px solid #d6a5ff}@media (width<=480px){.app-tabs{gap:4px;padding:4px}.app-tabs button{padding:12px 8px;font-size:12px}}.items-dropdown{background:#1c1129;border:1px solid #603184;border-radius:12px;margin-top:12px;overflow:hidden}.items-dropdown summary{cursor:pointer;color:#f3e5ff;justify-content:space-between;align-items:center;gap:12px;padding:16px;font-weight:700;list-style:none;display:flex}.items-dropdown summary::-webkit-details-marker{display:none}.items-dropdown summary:after{content:"⌄";color:#c78dff;font-size:22px;transition:transform .2s}.items-dropdown[open] summary:after{transform:rotate(180deg)}.items-count{color:#bd9ad9;margin-left:auto;font-size:12px;font-weight:400}.items-dropdown-content{padding:4px 16px 16px}.stats-item{border-top:1px solid #b478ff26;align-items:center;gap:12px;padding:10px 0;display:flex}.stats-item img{border-radius:8px;flex-shrink:0}.stats-item p{margin:4px 0 0}.glass-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111827c7;border:1px solid #a78bfa40;border-radius:16px;box-shadow:0 8px 32px #00000040}.rune-box.glass-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#14162ad1;border:1px solid #a855f7a6;border-radius:18px;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 8px 32px #00000059,0 0 22px #8b5cf626}.rune-box.glass-card:hover{border-color:#c084fc;transform:translateY(-4px);box-shadow:0 12px 35px #0006,0 0 30px #a855f74d}@media (hover:none) and (pointer:coarse){.rune-box.glass-card:hover{transform:none}.rune-box.glass-card:active{border-color:#d8b4fe;transform:scale(.98);box-shadow:0 0 35px #a855f773,0 8px 25px #0006}}.swipe-hint{display:none}@media (width<=768px){.swipe-hint{color:#c4b5fd;text-align:center;justify-content:center;align-items:center;gap:10px;margin:12px 0 20px;font-size:12px;display:flex}.swipe-hint-arrow{color:#a78bfa;font-size:22px}}.tab-transition{animation:1s ease-out both tabSlideIn}@keyframes tabSlideIn{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){.tab-transition{animation:none}}.app-tabs{isolation:isolate;position:relative;overflow:hidden}.app-tabs:before{content:"";width:calc(50% - 8px);transform:translateX(calc(var(--bubble-x,0%) * 1));pointer-events:none;background:#8b5cf673;border:1px solid #c4b5fd8c;border-radius:12px;transition:transform .25s ease-out;position:absolute;top:8px;bottom:8px;left:6px;box-shadow:0 0 20px #8b5cf640}.app-tabs button{z-index:1;position:relative}.champion-card{transition:transform .25s,border-color .25s,box-shadow .25s}.champion-card.chosen{border:2px solid #c084fc;transform:scale(1.04);box-shadow:0 0 12px #a855f78c,0 0 28px #8b5cf640}@media (hover:hover){.champion-card:not(.chosen):hover{border-color:#c084fcb3;transform:translateY(-4px);box-shadow:0 8px 20px #8b5cf640}}.enemy-chip{border:1px solid #f472b6a6;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 0 12px #f43f5e2e}@media (hover:hover){.enemy-chip:hover{border-color:#fb7185;transform:translateY(-3px);box-shadow:0 0 15px #f43f5e66,0 6px 18px #00000040}}.sidebar-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:999;background:#000000a6;position:fixed;inset:0}.sidebar-menu{box-sizing:border-box;z-index:1000;background:linear-gradient(160deg,#171126,#0c0b17);border-right:1px solid #a855f74d;flex-direction:column;gap:12px;width:min(300px,85vw);height:100dvh;padding:24px 18px;animation:.25s ease-out sidebarSlide;display:flex;position:fixed;top:0;left:0;box-shadow:10px 0 50px #00000080}.sidebar-heading{color:#fff;border-bottom:1px solid #a855f733;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:18px;font-size:21px;display:flex}.sidebar-heading button{color:#c4b5fd;cursor:pointer;background:0 0;border:none;font-size:22px}.sidebar-menu>button{text-align:left;color:#e9d5ff;cursor:pointer;background:#7c3aed14;border:1px solid #0000;border-radius:12px;width:100%;padding:15px 18px;font-size:15px;font-weight:600;transition:all .2s}.sidebar-menu>button:hover{background:#7c3aed40;border-color:#a855f766;transform:translate(3px)}.sidebar-footer{color:#8b7ba9;text-align:center;border-top:1px solid #a855f733;margin-top:auto;padding-top:18px;font-size:12px}@keyframes sidebarSlide{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.news-page{flex-direction:column;gap:24px;padding:28px 0;animation:.35s newsFadeIn;display:flex}.news-header{background:linear-gradient(135deg,#211334,#11101f);border:1px solid #a855f740;border-radius:20px;padding:30px 26px}.news-header span{color:#a78bfa;letter-spacing:2px;font-size:11px;font-weight:700}.news-header h2{color:#fff;margin:12px 0;font-size:clamp(28px,5vw,38px)}.news-header p{color:#aaa0bc;line-height:1.6}.news-card{background:linear-gradient(145deg,#191326,#100f1c);border:1px solid #a855f733;border-radius:18px;padding:26px;transition:transform .2s,border-color .2s}.news-card:hover{border-color:#a855f78c;transform:translateY(-3px)}.news-card>span{color:#c4b5fd;letter-spacing:1.5px;font-size:11px;font-weight:700}.news-card h3{color:#fff;margin:14px 0 8px;font-size:22px}.news-card p{color:#aaa0bc;line-height:1.6}.news-card a{color:#c4b5fd;margin-top:16px;font-weight:700;text-decoration:none;display:inline-block}.news-card a:hover{color:#fff}@keyframes newsFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.news-card{transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}.news-card:hover{border-color:#a78bfaa6;transform:translateY(-4px);box-shadow:0 12px 30px #7c3aed2e}.news-card img{border-radius:10px;max-width:100%;height:auto;transition:transform .3s;display:block}@media (hover:hover){.news-card:hover img{transform:scale(1.015)}}@media (prefers-reduced-motion:reduce){.news-card,.news-card img{transition:none}}.auth-page{background:radial-gradient(circle at 50% 20%,#7c3aed2e,#0000 55%),#0c0914;justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.auth-card{text-align:center;background:#141021;border:1px solid #a78bfa33;border-radius:20px;width:100%;max-width:420px;padding:36px 28px;box-shadow:0 20px 60px #00000059}.auth-logo{color:#fff;margin-bottom:8px;font-size:27px;font-weight:800}.auth-subtitle{color:#bca8dc;letter-spacing:2px;margin-bottom:28px;font-size:11px;font-weight:600}.auth-card h2{color:#fff;margin-bottom:26px;font-size:22px}.auth-card form{flex-direction:column;gap:14px;display:flex}.auth-card input{color:#fff;box-sizing:border-box;background:#211931;border:1px solid #403354;border-radius:10px;outline:none;width:100%;padding:15px;font-size:14px}.auth-card input:focus{border-color:#a78bfa;box-shadow:0 0 0 3px #a78bfa1f}.auth-card input::placeholder{color:#8c7aab}.auth-card form>button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:10px;margin-top:8px;padding:14px;font-size:15px;font-weight:700;transition:background .2s}.auth-card form>button:hover{background:#6d28d9}.auth-card form>button:disabled{opacity:.6;cursor:not-allowed}.auth-switch{color:#bca8dc;margin-top:24px;font-size:13px}.auth-switch button{color:#c4b5fd;cursor:pointer;background:0 0;border:none;font-weight:700}.auth-switch button:hover{text-decoration:underline}.auth-success{color:#4ade80;margin-top:18px;font-size:13px}.auth-error{color:#f87171;margin-top:18px;font-size:13px}@media (width<=480px){.auth-card{padding:28px 20px}.auth-logo{font-size:24px}}@media (prefers-reduced-motion:reduce){.auth-card form>button{transition:none}}.sidebar-user{background:#7c3aed1f;border:1px solid #a78bfa40;border-radius:12px;align-items:center;gap:12px;margin:12px 0;padding:14px;display:flex}.sidebar-user>span{font-size:25px}.sidebar-user>div{flex-direction:column;gap:4px;min-width:0;display:flex}.sidebar-user strong{color:#e9d5ff;overflow-wrap:anywhere;font-size:14px}.sidebar-user small{color:#a78bfa;font-size:11px}.profile-page{box-sizing:border-box;justify-content:center;width:100%;padding:36px 16px;display:flex}.profile-card{color:#f5edff;text-align:center;box-sizing:border-box;background:#141021;border:1px solid #a78bfa40;border-radius:20px;width:100%;max-width:560px;padding:32px;box-shadow:0 20px 60px #00000040}.profile-avatar{background:#291b42;border:3px solid #a78bfa;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto 18px;display:flex;overflow:hidden}.profile-avatar span{font-size:42px}.profile-avatar img{object-fit:cover;width:100%;height:100%}.profile-card h2{color:#f5edff;margin:0 0 12px;font-size:26px}.profile-role{color:#e9d5ff;background:#7c3aed26;border:1px solid #a78bfa;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700;display:inline-block}.profile-card h3{color:#e9d5ff;text-align:left;margin:30px 0 12px;font-size:17px}.profile-card textarea{color:#fff;width:100%;font:inherit;resize:vertical;box-sizing:border-box;background:#211931;border:1px solid #403354;border-radius:12px;outline:none;padding:14px}.profile-card textarea:focus{border-color:#a78bfa}.profile-card>button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:10px;width:100%;margin-top:16px;padding:14px;font-weight:700}.profile-card>button:hover{background:#6d28d9}.profile-card>p{color:#c4b5fd;margin-top:14px}@media (width<=480px){.profile-card{padding:24px 18px}}.profile-upload{color:#e9d5ff;cursor:pointer;background:#7c3aed26;border:1px solid #7c3aed;border-radius:10px;margin:0 auto 20px;padding:10px 16px;font-size:13px;font-weight:600;transition:background .2s;display:inline-block}.profile-upload:hover{background:#7c3aed4d}.profile-upload:has(input:disabled){opacity:.6;cursor:wait}.user-search-page{color:#f5f3ff;width:min(100%,700px);margin:30px auto;padding:25px}.user-search-page h2{margin-bottom:10px;font-size:26px}.user-search-page>p{color:#a1a1aa;margin-bottom:25px}.user-search-page form{gap:12px;margin-bottom:25px;display:flex}.user-search-page input{color:#fff;background:#181222;border:1px solid #4c1d95;border-radius:12px;outline:none;flex:1;min-width:0;padding:14px 16px}.user-search-page input:focus{border-color:#a855f7}.user-search-page form button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:12px;padding:12px 22px;font-weight:600}.user-search-page form button:hover{background:#9333ea}.user-search-result{background:#181222;border:1px solid #34234e;border-radius:14px;align-items:center;gap:15px;margin-bottom:12px;padding:16px;display:flex}.user-search-result img,.user-search-result>span{object-fit:cover;border-radius:50%;width:55px;height:55px}.user-search-result>span{background:#302044;justify-content:center;align-items:center;font-size:26px;display:flex}.user-search-result strong{color:#fff;font-size:16px}.user-search-result p{color:#c4b5fd;margin:5px 0 0;font-size:13px}@media (width<=480px){.user-search-page{padding:15px}.user-search-page form{flex-direction:column}.user-search-page form button{width:100%}}.public-profile-back{color:#ddd6fe;cursor:pointer;background:#7c3aed1f;border:1px solid #6d28d9;border-radius:10px;align-self:flex-start;margin-bottom:24px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .2s}.public-profile-back:hover{background:#7c3aed4d}.public-profile-description{color:#e9d5ff;white-space:pre-wrap;overflow-wrap:anywhere;background:#181222;border:1px solid #34234e;border-radius:12px;width:100%;margin-top:12px;padding:18px;line-height:1.6}.user-search-result{cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.user-search-result:hover,.user-search-result:focus-visible{background:#241834;border-color:#a855f7;transform:translateY(-2px)}.user-search-result:focus-visible{outline-offset:3px;outline:2px solid #c084fc}.profile-banner{color:#e9d5ff;background:linear-gradient(135deg,#251044,#6d28d9,#a21caf) 50%/cover;border:1px solid #a855f759;border-radius:16px;justify-content:center;align-items:center;width:100%;height:220px;font-size:18px;font-weight:600;display:flex;overflow:hidden}.profile-banner-upload{color:#fff;cursor:pointer;background:#6d28d9;border-radius:10px;justify-content:center;align-items:center;margin:12px 0 20px;padding:10px 16px;font-weight:600;transition:background .2s;display:inline-flex}.profile-banner-upload:hover{background:#7c3aed}.profile-banner-upload:has(input:disabled){opacity:.6;cursor:wait}@media (width<=600px){.profile-banner{border-radius:12px;height:150px;font-size:15px}.profile-banner-upload{width:100%}}.profile-avatar{z-index:2;box-sizing:border-box;border:4px solid #151021;margin-top:-55px;margin-left:24px;position:relative}.profile-banner{z-index:1;position:relative}@media (width<=600px){.profile-avatar{margin-top:-45px;margin-left:16px}}.profile-banner{z-index:1;background:linear-gradient(120deg,#251044 0%,#5b21b6 45%,#9333ea 75%,#c026d3 100%) 50%/cover;border:1px solid #c084fc40;border-radius:18px;width:100%;height:180px;position:relative;overflow:hidden}.profile-avatar{z-index:3;box-sizing:border-box;border:5px solid #151021;border-radius:50%;margin-top:-48px;margin-bottom:18px;margin-left:24px;position:relative;box-shadow:0 6px 20px #00000059}.profile-banner-upload{color:#fff;vertical-align:middle;background:#6d28d9;border-radius:12px;margin:0 12px 16px 0;padding:11px 18px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.profile-banner-upload:hover{background:#7c3aed;transform:translateY(-2px)}.profile-upload{vertical-align:middle;border-radius:12px;margin:0 0 16px;padding:11px 18px;transition:transform .2s}.profile-upload:hover{transform:translateY(-2px)}@media (width<=600px){.profile-banner{border-radius:14px;height:145px}.profile-avatar{margin-top:-42px;margin-bottom:16px;margin-left:16px}.profile-banner-upload,.profile-upload{box-sizing:border-box;justify-content:center;width:100%;margin:0 0 12px;display:flex}}.profile-banner-upload{color:#fff;background:0 0;border:1px solid #8b5cf6}.profile-banner-upload:hover{background:#8b5cf626;border-color:#a78bfa}.friend-actions{background:#6d28d914;border:1px solid #8b5cf6;border-radius:14px;flex-direction:column;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:18px auto 24px;padding:14px 22px;display:flex;box-shadow:0 0 15px #8b5cf61f}.friend-actions p{color:#e9d5ff;text-align:center;margin:0;font-size:14px;font-weight:600}.friend-actions button{border-radius:10px}.friend-request-received{flex-direction:column;align-items:center;gap:14px;width:100%;display:flex}.friend-request-received p{color:#e9d5ff;text-align:center;margin:0;font-size:14px;font-weight:600}.friend-request-received{grid-template-columns:1fr 1fr;gap:12px;display:grid}.friend-request-received p{grid-column:1/-1}.friend-request-received button{cursor:pointer;border-radius:10px;width:100%;min-width:110px;padding:11px 16px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.friend-request-received button:first-of-type{color:#fff;background:#6d28d9;border:1px solid #8b5cf6}.friend-request-received button:last-of-type{color:#e9d5ff;background:#24182f;border:1px solid #8157b4}.friend-request-received button:hover:not(:disabled){transform:translateY(-2px)}.friend-request-received button:first-of-type:hover:not(:disabled){background:#7c3aed}.friend-request-received button:last-of-type:hover:not(:disabled){background:#382348}.friend-request-received button:disabled{opacity:.5;cursor:wait}@media (width<=420px){.friend-request-received{grid-template-columns:1fr}.friend-request-received p{grid-column:1}.friend-request-received button{min-width:0}}.friend-actions{text-align:center;flex-direction:column;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;display:flex}.friend-request-received{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.friend-request-received button{width:fit-content;margin:0 auto}.friends-page{width:100%;max-width:850px;margin:30px auto;padding:24px}.friends-header{margin-bottom:24px}.friends-header h2{color:#fff;margin-bottom:8px}.friends-header p{color:#b9a7cc}.friends-count{color:#c4b5fd;margin-bottom:20px}.friends-list{gap:14px;display:grid}.friends-card{background:#1c142b;border:1px solid #553478;border-radius:14px;align-items:center;gap:16px;padding:16px;display:flex}.friends-avatar{background:#40215f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:58px;height:58px;font-size:25px;display:flex;overflow:hidden}.friends-avatar img{object-fit:cover;width:100%;height:100%}.friends-info{flex-direction:column;gap:6px;min-width:0;display:flex}.friends-info strong{color:#fff;overflow-wrap:anywhere}.friends-info span{color:#c4b5fd;font-size:13px}.friends-empty{color:#a99ab8;text-align:center;padding:30px 12px}@media (width<=600px){.friends-page{margin:15px auto;padding:16px}}.friends-profile-button{color:#fff;cursor:pointer;white-space:nowrap;background:#43216a;border:1px solid #8050b5;border-radius:10px;margin-left:auto;padding:10px 14px;font-size:13px;font-weight:600;transition:background .2s}.friends-profile-button:hover{background:#6933a0}@media (width<=600px){.friends-card{flex-wrap:wrap}.friends-profile-button{width:100%;margin-left:0}}.friends-requests-section{margin-top:36px}.friends-requests-section h3{color:#fff;margin-bottom:18px}.friends-request-actions{gap:10px;margin-left:auto;display:flex}.friends-request-actions button{color:#fff;background:#43216a;border:1px solid #8050b5;border-radius:10px;padding:10px 14px;font-weight:600}.friends-request-actions button:disabled{opacity:.65;cursor:not-allowed}@media (width<=600px){.friends-request-actions{width:100%;margin-left:0}.friends-request-actions button{flex:1}}.friend-actions>button{color:#fff;cursor:pointer;background:#43216a;border:1px solid #8050b5;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.friend-actions>button:hover:not(:disabled){background:#6933a0;transform:translateY(-1px)}.friend-actions>button:disabled{opacity:.6;cursor:not-allowed}