:root{--bg-primary: #111118;--bg-card: #1c1c28;--bg-card-hover: #24243a;--bg-input: #16162a;--border-card: rgba(6, 116, 187, .2);--text-primary: #f0f0f4;--text-muted: #8e8ea0;--accent: #0674bb;--accent-hover: #0889de;--accent-light: #3da5e8;--accent-glow: rgba(6, 116, 187, .12);--success: #22c55e;--warning: #eab308;--danger: #ef4444;--touch-target: 44px;--radius: 10px;--radius-lg: 14px;--nav-height: 64px;--shadow-card: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px var(--border-card);--shadow-card-hover: 0 4px 16px rgba(6, 116, 187, .15), 0 0 0 1px rgba(6, 116, 187, .35)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;min-height:100vh;line-height:1.5}#root{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:480px;margin:0 auto;padding:0 16px}main{flex:1;padding-bottom:calc(var(--nav-height) + 24px)}a{color:var(--accent-light);text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{font-size:16px;font-family:inherit}button{font-family:inherit;font-size:16px;cursor:pointer;min-height:var(--touch-target)}img{max-width:100%;height:auto}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}.card{background-color:var(--bg-card);border-radius:var(--radius-lg);padding:20px;margin-bottom:12px;box-shadow:var(--shadow-card);transition:box-shadow .2s}.card:hover{box-shadow:var(--shadow-card-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target);padding:10px 20px;border-radius:var(--radius);border:none;font-weight:600;font-size:16px;transition:background-color .2s,opacity .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--accent);color:#fff;box-shadow:0 2px 8px #0674bb4d}.btn-primary:hover:not(:disabled){background-color:var(--accent-hover);box-shadow:0 4px 12px #0674bb66}.btn-outline{background-color:transparent;color:var(--accent-light);border:1.5px solid var(--accent)}.btn-outline:hover:not(:disabled){background-color:var(--accent);color:#fff}.btn-block{display:flex;width:100%}.input,.select{width:100%;min-height:var(--touch-target);padding:10px 14px;font-size:16px;background-color:var(--bg-input);color:var(--text-primary);border:1.5px solid rgba(255,255,255,.06);border-radius:var(--radius);outline:none;transition:border-color .2s,box-shadow .2s}.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.input::placeholder{color:var(--text-muted)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238e8ea0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.track-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;min-height:var(--touch-target);background-color:var(--bg-card);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:background-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 3px #0003,0 0 0 1px #ffffff0a}.track-item:hover{background-color:var(--bg-card-hover);box-shadow:var(--shadow-card-hover)}.track-item__info{flex:1;min-width:0}.track-item__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item__artist{color:var(--text-muted);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-row{display:flex;align-items:center;padding:12px 16px;min-height:var(--touch-target);background-color:var(--bg-card);border-radius:var(--radius);margin-bottom:8px;box-shadow:0 1px 3px #0003,0 0 0 1px #ffffff0a}.leaderboard-row__rank{width:36px;font-weight:700;color:var(--accent-light);font-size:1.125rem;flex-shrink:0}.leaderboard-row__name{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-row__score{font-weight:700;color:var(--success);flex-shrink:0;margin-left:12px}.countdown{display:flex;gap:8px;justify-content:center}.countdown__segment{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:8px 4px;background-color:var(--bg-input);border-radius:var(--radius);border:1px solid var(--border-card)}.countdown__value{font-size:1.75rem;font-weight:700;color:var(--accent-light);line-height:1.2}.countdown__label{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);background-color:#18182a;border-top:1px solid var(--border-card);display:flex;align-items:center;justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom,0);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bottom-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:var(--touch-target);min-height:var(--touch-target);padding:4px 12px;color:var(--text-muted);text-decoration:none;font-size:.6875rem;font-weight:500;transition:color .15s;-webkit-tap-highlight-color:transparent}.bottom-nav__item.active{color:var(--accent-light)}.bottom-nav__icon{width:24px;height:24px;margin-bottom:2px}.page-header{padding:20px 0 16px}.page-header__title{font-size:1.5rem;font-weight:700}.page-header__subtitle{color:var(--text-muted);font-size:.875rem;margin-top:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.empty-state__icon{font-size:2.5rem;margin-bottom:12px;opacity:.4}.empty-state__text{color:var(--text-muted);font-size:.9375rem;max-width:260px}.spinner{width:32px;height:32px;border:3px solid var(--bg-input);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:24px auto}@keyframes spin{to{transform:rotate(360deg)}}.play-count{display:inline-flex;align-items:center;padding:4px 10px;background-color:#0674bb1a;border:1px solid rgba(6,116,187,.2);border-radius:20px;font-size:.8125rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;margin-left:12px}.play-count__value{font-weight:600;color:var(--success);margin-left:4px}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.badge--pending{background-color:#eab3081f;color:var(--warning)}.badge--success{background-color:#22c55e1f;color:var(--success)}.badge--error{background-color:#ef44441f;color:var(--danger)}