:root{--bg: #0f1419;--bg-card: #14191f;--bg-el: #1a1f2e;--bg-hover: #20262f;--bg-press: #252d38;--b0: #1a1f2e;--b1: #23293a;--b2: #2d3544;--b3: #3a4455;--t1: #e0e1e6;--t2: #8a8f9e;--t3: #5a6370;--t4: #3a3f47;--primary: #00d9ff;--primary-dim: #00d9ff08;--primary-bg: #00d9ff12;--red: #ef4444;--red-bg: #ef444412;--green: #10b981;--green-bg: #10b98112;--blue: #3b82f6;--blue-bg: #3b82f612;--yellow: #eab308;--yellow-bg: #eab30812;--orange: #f59e0b;--orange-bg: #f59e0b12;--purple: #a78bfa;--purple-bg: #a78bfa12;--success: #10b981;--success-bg: #10b98110;--error: #ef4444;--error-bg: #ef444410;--warning: #f59e0b;--warning-bg: #f59e0b10;--info: #3b82f6;--info-bg: #3b82f610;--font: "Inter", system-ui, sans-serif;--mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg)}body{font-family:var(--font);color:var(--t1);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}#root{height:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}::selection{background:var(--primary-bg);color:var(--primary)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-500px 0}to{background-position:500px 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes barGrow{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes panelSwitch{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebarIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.anim-up{animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both}.anim-in{animation:fadeIn .25s ease both}.anim-scale{animation:scaleIn .35s cubic-bezier(.16,1,.3,1) both}.anim-spin{animation:spin .75s linear infinite}.anim-float{animation:float 3s ease-in-out infinite}.panel-in{animation:panelSwitch .25s cubic-bezier(.16,1,.3,1) both}.sidebar-anim{animation:sidebarIn .45s cubic-bezier(.16,1,.3,1) both}.bar-grow{transform-origin:bottom;animation:barGrow .6s cubic-bezier(.16,1,.3,1) both}.skel{background:linear-gradient(90deg,var(--bg-card) 0%,var(--bg-el) 50%,var(--bg-card) 100%);background-size:500px 100%;animation:shimmer 1.8s ease-in-out infinite;border-radius:6px}.lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);transition:color .2s ease}.pp-input{width:100%;background:var(--bg-el);border:1px solid var(--b1);border-radius:6px;padding:8px 11px;font-size:13px;font-family:var(--mono);color:var(--t1);outline:none;transition:all .15s ease;caret-color:var(--primary)}.pp-input::placeholder{color:var(--t3)}.pp-input:focus{border-color:var(--primary);background:var(--bg-hover)}.pp-input.err{border-color:var(--error)}.pp-input.err:focus{border-color:var(--error);background:var(--bg-hover)}.pp-input:disabled{opacity:.4;cursor:not-allowed}.pp-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:5px;white-space:nowrap;font-size:11px;font-family:var(--mono);font-weight:600;border:1px solid var(--b2);background:var(--bg-el);color:var(--t2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .12s ease}.pp-tag:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-hover)}.pp-tag.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary)}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:6px;cursor:pointer;transition:all .12s ease;border:1px solid transparent;background:transparent;width:100%;text-align:left;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);-webkit-user-select:none;user-select:none;position:relative}.nav-item:hover{background:var(--bg-el);color:var(--t1)}.nav-item.active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}.nav-divider{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);padding:13px 14px 5px;margin-top:4px}.stat-card{background:var(--bg-el);border:1px solid var(--b1);border-radius:8px;padding:14px 16px;transition:all .12s ease}.stat-card:hover{border-color:var(--primary);background:var(--bg-hover)}.rank-newbie{color:gray}.rank-pupil{color:#00d084}.rank-specialist{color:#03a89e}.rank-expert{color:#00f}.rank-cm{color:#a0a}.rank-master,.rank-im{color:#ff8c00}.rank-gm,.rank-lgm{color:red}.pp-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--bg-card);border:1px solid var(--b1);border-radius:6px;padding:6px 10px;font-size:11px;font-family:var(--mono);color:var(--t2);white-space:nowrap;pointer-events:none;z-index:99;box-shadow:0 4px 12px #0000004d;animation:slideDown .2s cubic-bezier(.16,1,.3,1) both}.progress-ring{transition:stroke-dasharray .8s cubic-bezier(.16,1,.3,1)}button,a.btn{font-family:var(--font);font-size:13px;font-weight:600;border:none;border-radius:9px;cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;justify-content:center;gap:7px;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}button:active,a.btn:active{transform:scale(.98)}.spinner{display:inline-block;width:16px;height:16px;border:2.5px solid var(--b2);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}