.loading-dots-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:200px;padding:40px 0;box-sizing:border-box}.loading-dots--fullpage{position:fixed;inset:0;z-index:999999;background:var(--blue-page)}.loading-dots--container-overlay{position:absolute;inset:0;z-index:100;background:var(--blue-page);min-height:100%}.loading-dots--white{background:var(--blue-page)!important}.loading-spinner{position:relative;display:block;width:68px;height:68px;flex-shrink:0;border-radius:50%;background:conic-gradient(from 12deg,var(--blue-deep) 0deg,var(--blue-strong) 92deg,var(--blue-mid) 188deg,var(--blue-pill-hover) 276deg,var(--blue-soft) 360deg);-webkit-mask:radial-gradient(farthest-side,var(--transparent) calc(100% - 8px),var(--color-000) calc(100% - 7px));mask:radial-gradient(farthest-side,var(--transparent) calc(100% - 8px),var(--color-000) calc(100% - 7px));backface-visibility:hidden;transform:translateZ(0) rotate(0);will-change:transform;animation:loading-spinner-turn .9s linear infinite}@keyframes loading-spinner-turn{0%{transform:translateZ(0) rotate(0)}to{transform:translateZ(0) rotate(-360deg)}}@media(prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.8s}}.modal-backdrop{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:99999;animation:modal-fade-in .2s ease-out forwards}.modal-backdrop--closing{animation:modal-fade-out .2s ease-in forwards!important;opacity:0;pointer-events:none!important;cursor:default!important}.modal-card{position:relative;width:90%;background:var(--white);border-radius:var(--radius-card);padding:32px 28px 28px;animation:modal-pop-in .2s cubic-bezier(.16,1,.3,1) forwards;transform-origin:center center}.modal-card [class*=__actions],.modal-card .admin-actions{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;box-sizing:border-box}.modal-card [role=alert],.modal-card [class*=__error],.modal-card .admin-error{min-height:22px;display:flex;align-items:center;justify-content:center;text-align:center}.modal-card--closing{animation:modal-pop-out .2s cubic-bezier(.4,0,1,1) forwards!important;opacity:0;transform:scale(.98);pointer-events:none!important}.modal-close{position:absolute;top:14px;right:16px;font-size:22px;line-height:1;color:var(--muted-text);transition:color .15s ease,transform .15s ease}.modal-close:hover{color:var(--navy-text);transform:scale(1.05)}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}to{opacity:0}}@keyframes modal-pop-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes modal-pop-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:700;text-align:center;transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .16s ease;white-space:nowrap}.pill-btn--sm{padding:7px 16px;font-size:.85rem}.pill-btn--md{padding:10px 22px;font-size:.95rem}.pill-btn--lg{padding:14px 30px;font-size:1.05rem}.pill-btn--filled{background:var(--blue-pill);color:var(--blue-strong);border:2px solid var(--transparent);box-sizing:border-box}.pill-btn--filled:hover{background:var(--blue-pill-hover);transform:scale(1.01)}.pill-btn--outline{background:var(--white);color:var(--blue-strong);border:2px solid var(--blue-soft)}.pill-btn--outline:hover{border-color:var(--blue-mid);transform:scale(1.01)}.pill-btn--static{background:var(--blue-pale);color:var(--blue-strong)}.pill-btn--static:hover{transform:scale(1.01)}.pill-btn--full{width:100%}.pill-btn--circle{width:40px;height:40px;flex-shrink:0;padding:0;border-radius:50%}.pill-btn--circle .ui-icon{width:20px;height:20px;stroke-width:2.8}.pill-btn--disabled{opacity:.55;cursor:not-allowed}.pill-btn--disabled:hover{transform:none}.confirm-modal{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;padding:0}.confirm-modal__title{color:var(--blue-strong);font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:0 0 12px;text-align:center;width:100%}.confirm-modal__body{color:var(--navy-text);font-family:var(--font-body);font-size:1rem;font-weight:600;margin:0 0 24px;text-align:center;width:100%}.confirm-modal__actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;box-sizing:border-box;margin:0 auto}.confirm-modal__actions .pill-btn{width:110px!important;min-width:110px!important;max-width:110px!important;height:42px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:var(--radius-pill)!important;font-weight:700!important;font-size:1rem!important;text-align:center!important;box-sizing:border-box!important}.sidebar{width:220px;min-width:220px;height:100vh;position:sticky;top:0;background:var(--white);border-right:3px solid var(--blue-soft);display:flex;flex-direction:column;justify-content:space-between;padding:22px 16px}.sidebar-brand{position:relative;width:100%;border:0;background:var(--transparent);text-align:left;display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--blue-strong);margin-bottom:24px;padding:0 6px}.sidebar-logo-slot{display:flex;align-items:center;width:clamp(18px,4vw,38px);height:auto;color:var(--blue-strong)}.sidebar-nav{display:flex;text-align:center;flex-direction:column;gap:12px}.sidebar-link{display:block;width:100%;padding:10px 18px;border-radius:var(--radius-pill);background:var(--blue-pill);color:var(--blue-strong);font-weight:700;font-size:1rem;font-family:var(--font-body);text-align:center;box-sizing:border-box;border:none;cursor:pointer;line-height:1.5;transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .16s ease}.sidebar-link:hover{transform:scale(1.01)}.sidebar-link:not(.sidebar-link--active):hover{background:var(--blue-pill-hover)}.sidebar-link--active,.sidebar-link--active:focus{background:var(--blue-strong)!important;color:var(--white)!important}.sidebar-link--active:hover{background:var(--blue-strong)!important;color:var(--white)!important;transform:scale(1.01)}.sidebar-bottom{display:flex;text-align:center;flex-direction:column;gap:12px}.logout-confirm-modal{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px 6px;gap:10px}.logout-confirm-modal__title{color:var(--blue-strong);font-family:var(--font-display);font-size:1.5rem;margin:0}.logout-confirm-modal__desc{color:var(--navy-text);font-family:var(--font-body);font-weight:600;font-size:1rem;margin:0 0 10px}.logout-confirm-modal__actions{display:flex;justify-content:center;gap:20px;width:100%}@media(max-width:860px){.sidebar{width:76px;min-width:76px;padding:16px 8px}.sidebar-brand{font-size:0;justify-content:center;padding:0}.sidebar-brand:before{content:none}.sidebar-link{font-size:0;padding:12px 0;text-align:center}.sidebar-link:first-letter{font-size:1rem}}.app-main-content{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--blue-page);min-height:100vh}.app-main-content--loading{height:100vh;overflow:hidden}.app-main-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--blue-page)}.app-main-outlet{flex:1;display:flex;flex-direction:column}.app-main-outlet--loading{position:absolute;inset:0;visibility:hidden;pointer-events:none}.custom-scrollbar-track{position:fixed;top:0;right:0;bottom:0;width:8px;background-color:var(--blue-soft);z-index:1000;-webkit-user-select:none;user-select:none;border-radius:0;cursor:pointer}.custom-scrollbar-track--left{left:0;right:auto}.custom-scrollbar-thumb{position:absolute;top:0;left:1px;right:1px;background-color:var(--blue-pill-hover);border-radius:var(--radius-pill);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.custom-scrollbar-thumb:hover,.custom-scrollbar-thumb:active{background-color:var(--blue-pill-hover)}body.custom-scrollbar-dragging{-webkit-user-select:none!important;user-select:none!important}.not-found-page{position:fixed;inset:0;z-index:1000;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--blue-page);color:var(--navy-text)}.not-found-page p{margin:0}.page-with-sidebar{display:flex;min-height:100vh}#root.card-only-scroll{overflow:hidden}.page-with-sidebar__content{flex:1;padding:28px 32px;min-width:0}:root{--blue-light: #f8fbff;--blue-page: #edf2f8;--blue-pale: #dbe9fd;--blue-soft: #c7dafc;--blue-pill: #c9dcfb;--blue-pill-hover: #aecaf7;--blue-mid: #6c8eeb;--blue-strong: #4468e0;--blue-deep: #2d4bb8;--navy-text: #223056;--muted-text: #5b6b8c;--white: #ffffff;--danger: #e34d59;--counter-limit: #ff4d4f;--table-header-bg: var(--blue-soft);--table-header-text: var(--blue-strong);--font-display: "Baloo 2", cursive, sans-serif;--font-body: "Nunito", sans-serif;--radius-pill: 999px;--radius-card: 18px;--stats-banner-height: 140px;--stats-banner-title-size: 1.12rem;--stats-banner-title-icon-size: 19px;--band-low: #e05252;--band-basic: #e8794f;--band-developing: #d6a62c;--band-competent: #4eaa70;--band-strong: #4f83cc;--band-advanced: #8566c5;--band-exceptional: linear-gradient( 90deg, #ff4d6d, #ff8a3d, #ffd23f, #35c759, #2f9bff, #7c5cff, #d946ef, #ff4d6d );--streak-off: #9aa5bd;--streak-on: #ff6a3d;--tab-hover-gray: #687896;--streak-inactive-circle: #e2e8f0;--black-score: #000000;--overlay-bg: #22305647;--avatar-overlay-bg: #00000073;--error-text: #e53e3e;--error-bg: #fff5f5;--error-border: #fed7d7;--ranking-crown: #e5b62b;--ranking-gold-coin: #efc64e;--ranking-silver-coin: #bbc6d5;--ranking-bronze-coin: #cd9466;--ranking-gold-score: #f7e29a;--ranking-silver-score: #dce3ed;--ranking-bronze-score: #efd4bd;--ranking-you-bg: #e4eaff;--ranking-you-text: #5068b6;--ranking-halo: radial-gradient(ellipse, #f7e29a80, #ffffff00 70%);--ranking-soft-beam: radial-gradient(ellipse at 50% 12%, #fff4d4b3, #fff4d440 45%, #ffffff00 75%);--ranking-focus-light: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #daeaff99 35%, #ffffff00 72%);--ranking-focus-ring: #a9ccff;--ranking-beam-core: linear-gradient(to bottom, #ffffffeb, #c4dfff99 50%, #ffffff00);--ranking-veil-bg: #34405438;--ranking-burst-rays: repeating-conic-gradient(from 10deg, #ffffff00 0deg 16deg, #ffffffd9 18deg 21deg, #ffffff00 24deg 40deg);--ranking-burst-glow: radial-gradient(circle, #ffffff 0%, #c4dfffaa 25%, #c4dfff00 68%);--ranking-column-gold: linear-gradient(145deg, #f9eac4, #e7c980);--ranking-column-silver: linear-gradient(145deg, #e9eff5, #bccbdc);--ranking-column-bronze: linear-gradient(145deg, #f1dfd1, #d6b196);--ranking-spotlight-gold: #ffd75c9e;--ranking-spotlight-silver: #dbe5f2a3;--ranking-spotlight-bronze: #e2a77991;--ranking-ribbon: #3c557d;--ranking-ribbon-back: #293f62;--ranking-ribbon-stripe: #b8cbea;--ranking-gold-sweep: linear-gradient(110deg, #ffffff00 25%, #fff4d4b3 50%, #ffffff00 75%);--battle-unplaced-bg: #e6e2f4;--battle-unplaced-text: #69558e;--ranking-podium-column: linear-gradient(to bottom, var(--blue-soft), var(--blue-pale));--ranking-gold-row: #fff8df;--ranking-silver-row: #f0f4fb;--ranking-bronze-row: #fcf1e8;--ranking-spotlight: linear-gradient(to bottom, #fff5c900, #fff5c9b3 50%, #fff5c900);--ranking-fade-down: linear-gradient(to bottom, var(--white), #ffffff00);--ranking-fade-up: linear-gradient(to top, var(--white), #ffffff00);--battle-active-bg: #e0f8ee;--battle-active-text: #167a52;--battle-finished-bg: #eeeafd;--battle-finished-text: #6950af;--battle-stat-matches-bg: #e3ebff;--battle-stat-rate-bg: #dff3e7;--battle-stat-result-bg: #ffead8;--battle-stat-score-blue-bg: #cadcff;--battle-stat-score-green-bg: #bfebd4;--battle-stat-score-orange-bg: #ffd7ac;--battle-stat-rate-text: #278257;--battle-result-text: #b85d18;--battle-rank-default-bg: #e8edf5;--battle-rank-default-text: #53627a;--battle-gold-bg: #fce9a5;--battle-gold-text: #79520b;--battle-silver-bg: #e6eaf0;--battle-silver-text: #526073;--battle-bronze-bg: #f3dcc6;--battle-bronze-text: #885234;--battle-rank-gold: linear-gradient( 145deg, #fff0a3 0%, #f2c94c 52%, #dca514 100% );--battle-rank-gold-text: #674600;--battle-rank-silver: linear-gradient( 145deg, #f7f9fc 0%, #cbd3df 52%, #9eabbc 100% );--battle-rank-silver-text: #3e4a5f;--battle-rank-bronze: linear-gradient( 145deg, #f3c39b 0%, #cf8750 52%, #a85e2c 100% );--battle-rank-bronze-text: #572b0d;--metric-blue-bg: #f2f7ff;--metric-blue-icon-bg: #e3edff;--metric-blue: #4479ef;--metric-blue-track: #dce8ff;--metric-purple-bg: #f7f3ff;--metric-purple-icon-bg: #eee5ff;--metric-purple: #8155e9;--metric-purple-track: #e5dafb;--metric-orange-bg: #fff8ed;--metric-orange-icon-bg: #ffedd5;--metric-orange: #f4a638;--metric-orange-track: #fcebd1;--metric-green-bg: #effaf6;--metric-green-icon-bg: #dcf5eb;--metric-green: #059a6c;--metric-red: #f5787e;--progress-blue: linear-gradient(90deg, #419dff, #4468ff);--progress-purple: linear-gradient(90deg, #9978ff, #8848ed);--lobby-writer-bg: #f0f5fc;--lobby-writer-hover: #dce8fb;--lobby-presence: #34aa78;--transparent: transparent;--color-e0eaff: #e0eaff;--color-264aa8: #264aa8;--color-b32635: #b32635;--color-ffe4e6: #ffe4e6;--color-d92d43: #d92d43;--color-17633c: #17633c;--color-dcf5e5: #dcf5e5;--color-861b2b: #861b2b;--color-f9bfc6: #f9bfc6;--color-a4142e: #a4142e;--color-104b2c: #104b2c;--color-a9e1bc: #a9e1bc;--color-rgba-219-233-253-0-25: rgba(219, 233, 253, .25);--color-rgba-199-218-252-0-60: rgba(199, 218, 252, .6);--color-000: #000;--color-rgba-250-251-253-94: rgba(250, 251, 253, .94);--color-rgba-242-246-251-72: rgba(242, 246, 251, .72);--color-rgba-71-119-239-08: rgba(71, 119, 239, .08);--color-68a3ff: #68a3ff;--color-4383ee: #4383ee;--color-071a36: #071a36;--color-ffe29a: #ffe29a;--color-dcaa43: #dcaa43;--color-5e420c: #5e420c;--color-f0f3f7: #f0f3f7;--color-aebdce: #aebdce;--color-39485e: #39485e;--color-ecc6a1: #ecc6a1;--color-bc805b: #bc805b;--color-57341e: #57341e;--color-d7deea: #d7deea;--color-c7d1e3: #c7d1e3;--color-111827: #111827;--color-ff4d3f: #ff4d3f;--color-ff7438: #ff7438;--color-ff9c32: #ff9c32;--color-ffc43f: #ffc43f;--color-fff3a8: #fff3a8;--color-ffd861: #ffd861;--color-ff8b5a: #ff8b5a;--color-ff643f: #ff643f;--color-e54a33: #e54a33;--color-fff2bd: #fff2bd;--color-ffb047: #ffb047;--color-ffdf70: #ffdf70;--color-ff7a32: #ff7a32;--color-fff9d7: #fff9d7;--color-ffd46a: #ffd46a;--color-rgba-63-104-226-0-25: rgba(63, 104, 226, .25);--color-eef4ff: #eef4ff;--color-edf1f7: #edf1f7;--color-edf3ff: #edf3ff;--color-e1f5e9: #e1f5e9;--color-fff0cf: #fff0cf;--color-875500: #875500;--color-a92335: #a92335;--color-e7edff: #e7edff;--color-f5f7fc: #f5f7fc;--color-334875: #334875;--color-e7ebf5: #e7ebf5;--color-f0f3fb: #f0f3fb;--color-6a789c: #6a789c}@keyframes rainbowFlow{0%{background-position:0% 0%}to{background-position:200% 0%}}*{box-sizing:border-box;scrollbar-width:none!important;-ms-overflow-style:none!important}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}html,body{height:100%;margin:0;overflow:hidden}#root{height:100vh;overflow-y:auto;position:relative}body{font-family:var(--font-body);color:var(--navy-text);background:var(--blue-page);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-display);margin:0}p,span,li,a,button,input,textarea{font-family:var(--font-body)}button{font-family:inherit;cursor:pointer;border:none;background:none}a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}img{max-width:100%;display:block}li{text-align:justify}button,.btn{text-align:center}.ui-icon{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle;color:inherit}.page-pop-in:not(.intro-page){animation:none}.intro-page.page-pop-in{animation:PopIn .1s ease-out both}@keyframes PopIn{0%{transform:scale(.99)}to{transform:scale(1)}}