.bottom-nav{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);border-top:.5px solid var(--separator);z-index:20;justify-content:space-evenly;align-items:center;max-width:600px;margin:0 auto;padding:8px 12px 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-item{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;padding:8px;font-size:22px;transition:all .2s;display:flex;position:relative}.nav-badge{background:var(--like);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:1;display:flex;position:absolute;top:4px;right:4px}.nav-item:hover{background:var(--separator)}.nav-item.active{color:var(--accent)}.nav-item:active{transform:scale(.9)}.nav-pending-hint{background:var(--accent);opacity:0;visibility:hidden;border-radius:999px;width:4px;height:4px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.nav-pending-hint.is-pending{visibility:visible;animation-name:nav-pending-fade-in,nav-pending-pulse;animation-duration:.2s,1s;animation-timing-function:ease,ease-in-out;animation-iteration-count:1,infinite;animation-delay:.1s,.1s;animation-fill-mode:forwards,none}@keyframes nav-pending-fade-in{to{opacity:1}}@keyframes nav-pending-pulse{50%{opacity:.4}}@media (min-width:1200px){.bottom-nav{display:none}}body.keyboard-open .bottom-nav{display:none}
.app-sidebar{display:none}@media (min-width:1200px){.app-sidebar{gap:var(--space-6);width:240px;padding:var(--space-6) var(--space-3);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:max(16px,50vw - 564px);overflow-y:auto}}.app-sidebar__logo{padding-left:var(--space-3);letter-spacing:-.5px;background:linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:650}.app-sidebar__create{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--tap-min);border-radius:var(--radius-full);background:var(--accent);color:var(--text-inverse);font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;transition:background var(--transition-fast), transform var(--transition-fast);border:none;display:flex}.app-sidebar__create:hover{background:var(--accent-strong)}.app-sidebar__create:active{transform:scale(.97)}.app-sidebar__list{gap:var(--space-1);flex-direction:column;list-style:none;display:flex}.app-sidebar__item{align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:0 var(--space-3);border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--fs-lg);transition:background var(--transition-fast);text-decoration:none;display:flex}.app-sidebar__item:hover{background:var(--placeholder)}.app-sidebar__item.is-active{font-weight:var(--fw-semibold);color:var(--accent)}.app-sidebar__item-icon{justify-content:center;align-items:center;width:24px;font-size:20px;display:flex;position:relative}.app-sidebar__item-icon .nav-pending-hint{bottom:-3px}.app-sidebar__badge{background:var(--like);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:1;display:flex;position:absolute;top:-6px;right:-10px}
.global-player-wrap{z-index:15;max-width:584px;margin:0 auto;position:fixed;bottom:88px;left:8px;right:8px}body.keyboard-open .global-player-wrap{display:none}@media (min-width:1200px){.global-player-wrap{width:320px;max-width:320px;margin:0;inset:150px auto auto calc(50vw + 324px)}}.global-player{border-radius:var(--radius-xl);background:var(--bg-elevated);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-lg);border:.5px solid var(--separator);position:relative;overflow:hidden}.global-player-thumb{background:var(--accent);border:2px solid var(--bg-elevated);pointer-events:none;z-index:1;border-radius:50%;width:11px;height:11px;position:absolute;top:5px;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000059}.global-player-progress{cursor:pointer;touch-action:none;height:10px;position:relative}.global-player-progress:before{content:"";background:color-mix(in srgb, currentColor 20%, transparent);height:3px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.global-player-progress-fill{background:linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);pointer-events:none;border-radius:0 2px 2px 0;height:3px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.global-player-main{align-items:center;gap:12px;padding:10px 10px 10px 12px;display:flex}.global-player-art{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);color:#fff;cursor:pointer;width:42px;height:42px;box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);transition:box-shadow var(--transition-normal), transform var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;display:flex;position:relative}.global-player-art:active{transform:scale(.94)}.global-player-art i.fa-play{margin-left:2px}.global-player-art--playing{box-shadow:0 3px 14px color-mix(in srgb, var(--accent) 55%, transparent)}.global-player-body{min-width:0;color:inherit;flex-direction:column;flex:auto;gap:1px;text-decoration:none;display:flex}.global-player-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:5px;display:flex;overflow:hidden}.global-player-title i{color:var(--text-secondary);flex-shrink:0;font-size:10px}.global-player-subtitle{font-size:var(--fs-xs);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.global-player-time{font-size:var(--fs-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.global-player-close{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:flex}.global-player-close:hover{background:var(--separator);color:var(--text-primary)}