.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;background:#000;border:2px solid var(--border);border-radius:0;padding:12px 16px;min-width:280px;max-width:420px;pointer-events:auto;animation:toast-in .15s ease-out;box-shadow:none}.toast--success{border-left:4px solid var(--accent-bop)}.toast--error{border-left:4px solid var(--accent-drop)}.toast--info{border-left:4px solid var(--accent-save)}.toast__icon{font-size:1rem;flex-shrink:0}.toast--success .toast__icon{color:var(--accent-bop)}.toast--error .toast__icon{color:var(--accent-drop)}.toast--info .toast__icon{color:var(--accent-save)}.toast__message{flex:1;font-size:.9rem}.toast__action{background:none;border:1px solid var(--accent-bop);color:var(--accent-bop);font-size:.8rem;padding:2px 10px;cursor:pointer;border-radius:6px;font-weight:600;flex-shrink:0;transition:background .15s}.toast__action:hover{background:#1db95426;opacity:1}.toast__close{background:none;border:none;color:var(--text-muted);font-size:1.2rem;padding:0 4px;cursor:pointer;line-height:1;border-radius:4px}.toast__close:hover{color:var(--text)}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:767px){.toast-container{top:60px;bottom:auto;right:12px;left:12px}.toast{min-width:0;max-width:100%}}.spinner{display:inline-block;border:2px solid var(--border);border-top-color:var(--accent-bop);border-radius:50%;animation:spinner-rotate .6s linear infinite;flex-shrink:0}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.loading-button__content{display:inline-flex;align-items:center;gap:8px}.sidebar{position:fixed;top:0;left:0;bottom:0;width:220px;display:flex;flex-direction:column;background:#000;border-right:2px solid var(--border);z-index:200;padding:20px 0;overflow-y:auto}.sidebar__top{flex:1;display:flex;flex-direction:column}.sidebar__brand{font-size:1.2rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:0 20px 24px;color:var(--accent-bop)}.sidebar__links{display:flex;flex-direction:column;gap:2px;padding:0 10px}.sidebar__link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:0;font-size:.78rem;font-weight:700;color:var(--text-muted);transition:color .1s,background .1s;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}.sidebar__link--badge-wrap{position:relative}.sidebar__link:hover{color:var(--text);background:var(--surface-hover)}.sidebar__link.active{color:var(--accent-bop);background:transparent;border-left:3px solid var(--accent-bop)}.sidebar__icon{width:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.sidebar__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:0;background:var(--accent-drop);color:#000;font-size:.6rem;font-weight:900;line-height:1;box-shadow:none;margin-left:auto}.sidebar__bottom{padding:16px 20px 4px;border-top:2px solid var(--border);display:flex;flex-direction:column;gap:8px}.sidebar__name{font-size:.82rem;color:var(--text-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__logout{padding:6px 12px;font-size:.78rem;font-weight:600;width:100%;text-align:center}.mobile-header,.mobile-menu,.mobile-tabs{display:none}@media(max-width:1023px)and (min-width:768px){.sidebar{width:68px;padding:16px 0;align-items:center}.sidebar__brand{font-size:0;padding:0 0 16px}.sidebar__brand:first-letter{font-size:1.3rem}.sidebar__brand:after{content:"B";font-size:1.3rem;font-weight:900;color:var(--accent-bop)}.sidebar__links{padding:0 8px;align-items:center}.sidebar__link{justify-content:center;padding:10px;gap:0}.sidebar__label{display:none}.sidebar__icon{width:24px}.sidebar__badge{position:absolute;top:2px;right:2px;margin-left:0;min-width:14px;height:14px;font-size:.5rem;padding:0 3px}.sidebar__bottom{padding:12px 8px 4px;align-items:center}.sidebar__name{display:none}.sidebar__logout{padding:6px;font-size:.7rem;width:auto}}@media(max-width:767px){.sidebar{display:none}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;background:#000;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:200}.mobile-header__brand{font-size:1rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bop)}.mobile-header__toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);padding:0;cursor:pointer}.mobile-header__toggle:hover{background:var(--surface-hover);transform:none}.mobile-header__hamburger{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;position:relative;transition:all .25s var(--transition-smooth)}.mobile-header__hamburger:before,.mobile-header__hamburger:after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text);border-radius:1px;transition:all .25s var(--transition-smooth)}.mobile-header__hamburger:before{top:-6px}.mobile-header__hamburger:after{top:6px}.mobile-header__hamburger--open{background:transparent}.mobile-header__hamburger--open:before{top:0;transform:rotate(45deg)}.mobile-header__hamburger--open:after{top:0;transform:rotate(-45deg)}.mobile-menu{display:block;position:fixed;top:52px;right:0;bottom:0;left:0;background:#000;z-index:199;animation:mobile-menu-in .15s ease-out}.mobile-menu__nav{display:flex;flex-direction:column;padding:8px 16px;gap:2px}.mobile-menu__link{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:0;font-size:.85rem;font-weight:700;color:var(--text-muted);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:background .1s}.mobile-menu__link:hover{background:var(--surface-hover);color:var(--text)}.mobile-menu__link.active{color:var(--accent-bop);background:transparent;border-left:3px solid var(--accent-bop)}.mobile-menu__logout{margin-top:12px;width:100%;text-align:center}@keyframes mobile-menu-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.mobile-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:#000;border-top:2px solid var(--border);z-index:200;justify-content:space-around;align-items:center;padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0)}.mobile-tabs__tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;flex:1;color:var(--text-muted);text-decoration:none;font-size:.6rem;font-weight:500;transition:color .15s;position:relative;min-width:0}.mobile-tabs__tab.active{color:var(--accent-bop)}.mobile-tabs__tab.active .mobile-tabs__icon{background:transparent;border-radius:0;padding:2px 10px;border-bottom:2px solid var(--accent-bop)}.mobile-tabs__icon{display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s var(--transition-smooth),padding .2s var(--transition-smooth)}.mobile-tabs__label{white-space:nowrap;letter-spacing:.01em}.mobile-tabs__badge{position:absolute;top:2px;right:calc(50% - 18px);min-width:14px;height:14px;padding:0 3px;border-radius:0;background:var(--accent-drop);color:#000;font-size:.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:1}}.login-page{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#000;overflow-y:auto;z-index:1}.login-page__card{text-align:center;background:#000;border:2px solid var(--border);border-radius:0;padding:56px 44px;max-width:400px;width:100%}.login-page__title{font-size:2.8rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--accent-bop)}.login-page__subtitle{color:var(--text-muted);margin-bottom:36px;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}.login-page__error{color:var(--accent-drop);background:transparent;border:2px solid var(--accent-drop);border-radius:0;padding:12px 16px;margin-bottom:20px;font-size:.85rem;line-height:1.4}.login-page__btn{width:100%;padding:15px;font-size:.9rem;font-weight:900;border-radius:0;letter-spacing:.1em;text-transform:uppercase;background:var(--accent-bop);color:#000;border:2px solid var(--accent-bop);box-shadow:none;transition:all .1s}.login-page__btn:hover{background:#000;color:var(--accent-bop);box-shadow:none;transform:none}.login-page__hint{color:var(--text-muted);font-size:.78rem;margin-top:20px;line-height:1.4}.login-page__visual{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px}.login-page__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:0;font-size:1.4rem;font-weight:900;animation:none}.login-page__icon--bop{background:transparent;color:var(--accent-bop);border:2px solid var(--accent-bop);box-shadow:none}.login-page__icon--drop{background:transparent;color:var(--accent-drop);border:2px solid var(--accent-drop);box-shadow:none;animation-delay:0s}@keyframes login-icon-float{0%,to{transform:none}50%{transform:none}}@media(max-width:767px){.login-page{padding:16px}.login-page__card{padding:40px 24px;border-radius:var(--radius)}.login-page__title{font-size:2.2rem}.login-page__subtitle{margin-bottom:28px;font-size:.9rem}.login-page__icon{width:40px;height:40px;font-size:1.1rem;border-radius:12px}.login-page__visual{gap:12px;margin-bottom:16px}}.app{min-height:100vh;display:flex;flex-direction:column}.app__main{flex:1;margin-left:220px;padding:16px 24px 24px;min-height:100vh}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:100vh;color:var(--text-muted);background:radial-gradient(ellipse at 50% 50%,rgba(30,215,96,.04) 0%,transparent 60%)}@media(max-width:1023px)and (min-width:768px){.app__main{margin-left:68px}}@media(max-width:767px){.app__main{margin-left:0;padding-bottom:72px}}:root{--bg: #000000;--bg-gradient: none;--surface: #0a0a0a;--surface-solid: #0a0a0a;--surface-hover: #141414;--surface-elevated: #111111;--text: #ffffff;--text-muted: #888888;--accent-bop: #00ff66;--accent-bop-dim: rgba(0, 255, 102, .08);--accent-drop: #ff2244;--accent-drop-dim: rgba(255, 34, 68, .08);--accent-save: #ffcc00;--border: #333333;--border-subtle: #1a1a1a;--glow-bop: none;--glow-drop: none;--radius: 0px;--radius-sm: 0px;--radius-lg: 0px;--transition-smooth: cubic-bezier(.22, 1, .36, 1);--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", monospace;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;flex-direction:column;min-height:100%}h1,h2,h3,h4,h5,h6,button,.sidebar__brand,.sidebar__link,.mobile-tabs__label{font-family:var(--font-mono)}.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999}.skip-link:focus{position:fixed;top:8px;left:50%;transform:translate(-50%);width:auto;height:auto;padding:8px 16px;background:var(--accent-bop);color:#000;border-radius:var(--radius-sm);font-weight:600;font-size:14px;z-index:9999}a{color:var(--accent-bop);text-decoration:none;transition:color .1s}a:hover{color:#fff}button{cursor:pointer;border:2px solid var(--border);font:inherit;border-radius:0;padding:10px 20px;transition:all .1s;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}button:hover{opacity:1}button:disabled{opacity:.35;cursor:not-allowed}.btn-bop:hover,.btn-drop:hover,.btn-save:hover,.btn-secondary:hover,.btn-play:hover,.btn-bop:active,.btn-drop:active,.btn-save:active,.btn-secondary:active,.btn-play:active{transform:none}.btn-bop{background:var(--accent-bop);color:#000;font-weight:900;letter-spacing:.08em;box-shadow:none;border:2px solid var(--accent-bop)}.btn-bop:hover{background:#000;color:var(--accent-bop);box-shadow:none}.btn-drop{background:var(--accent-drop);color:#fff;font-weight:900;box-shadow:none;border:2px solid var(--accent-drop)}.btn-drop:hover{background:#000;color:var(--accent-drop)}.btn-save{background:var(--accent-save);color:#000;font-weight:900;border:2px solid var(--accent-save)}.btn-save:hover{background:#000;color:var(--accent-save)}.btn-secondary{background:transparent;color:var(--text);border:2px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none}.btn-secondary:hover,.btn-secondary--active{background:var(--text);color:#000;border-color:var(--text)}.btn-play{background:transparent;color:var(--accent-bop);border:2px solid var(--accent-bop)}.btn-play:hover{background:var(--accent-bop);color:#000}textarea{border-radius:0!important}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px!important;cursor:pointer;border:2px solid var(--border);background-color:var(--bg);color:var(--text)}:focus-visible{outline:2px solid var(--accent-bop);outline-offset:0}button:focus-visible{outline:2px solid var(--accent-bop);outline-offset:0}a:focus-visible{outline:2px solid var(--accent-bop);outline-offset:0;border-radius:0}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-bop);outline-offset:0}.rating-btn-base{display:flex;align-items:center;padding:2px 8px;border-radius:0;font-size:.7rem;background:transparent;border:2px solid var(--border);color:var(--text-muted);transition:all .1s;cursor:pointer;text-transform:uppercase;font-weight:700}.rating-btn-base:hover{opacity:1}.rating-btn-base--bop:hover{border-color:var(--accent-bop);color:var(--accent-bop)}.rating-btn-base--drop:hover{border-color:var(--accent-drop);color:var(--accent-drop)}.rating-btn-base--bop.rating-btn-base--active{background:var(--accent-bop);border-color:var(--accent-bop);color:#000;box-shadow:none}.rating-btn-base--drop.rating-btn-base--active{background:var(--accent-drop);border-color:var(--accent-drop);color:#000;box-shadow:none}.rating-count-base{font-weight:600;font-size:.7rem;color:var(--text-muted);padding:2px 4px;min-width:16px;text-align:center}.rating-count-base--clickable{cursor:pointer;border-radius:4px;transition:background .15s,color .15s}.rating-count-base--clickable:hover{background:var(--surface-hover);color:var(--text)}.liked-badge{display:inline-block;font-size:.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border-radius:0;margin-left:6px;vertical-align:middle}.liked-badge--bop{background:var(--accent-bop);color:#000;border:none}.liked-badge--drop{background:var(--accent-drop);color:#000;border:none}.field-error{border-color:var(--accent-drop)!important}.field-error-msg{color:var(--accent-drop);font-size:.8rem;margin-top:4px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#000}::-webkit-scrollbar-thumb{background:var(--border);border-radius:0}::-webkit-scrollbar-thumb:hover{background:#555}::selection{background:var(--accent-bop);color:#000}@media(max-width:767px){.btn-bop:hover,.btn-drop:hover,.btn-save:hover,.btn-secondary:hover,.btn-play:hover{transform:none}button{min-height:36px}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}}@media(max-width:1023px)and (min-width:768px){.btn-bop,.btn-drop,.btn-save,.btn-secondary{padding:10px 18px}}