.custom-audio-controls{display:flex;align-items:center;width:100%;max-width:800px;gap:calc(var(--spacing-unit) * 2);animation:fadeIn .3s ease-out}.play-pause-btn{background-color:var(--accent-color);color:var(--accent-text-color);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0;box-shadow:0 2px 4px var(--shadow-color-medium)}.play-pause-btn:hover{background-color:var(--accent-color-darker);transform:scale(1.05)}.play-pause-btn svg{display:block}.progress-bar{flex-grow:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--border-color-medium);border-radius:3px;outline:none;cursor:pointer;transition:background .2s}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;transition:transform .1s;box-shadow:0 1px 3px var(--shadow-color-medium)}.progress-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-bar::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent-color);cursor:pointer;transition:transform .1s;box-shadow:0 1px 3px var(--shadow-color-medium)}.progress-bar::-moz-range-thumb:hover{transform:scale(1.2)}.time-text{font-size:var(--font-size-tiny);font-family:monospace;color:var(--secondary-text-color);min-width:45px;text-align:center;font-weight:var(--font-weight-semibold)}.player{width:100%;max-width:800px;background-color:transparent;color:var(--primary-text-color)}audio{width:100%;border-radius:var(--border-radius-soft);outline:none}@media (max-width:480px){.player-container{padding:calc(var(--spacing-unit) * 2)}.custom-audio-controls{gap:var(--spacing-unit)}.play-pause-btn{width:36px;height:36px}.time-text{font-size:11px;min-width:35px}}.add-funds-modal-box{max-width:400px}.add-funds-message{margin-bottom:20px;text-align:left}.amount-input-group{margin-bottom:20px}.amount-input-wrapper{display:flex;align-items:center}.amount-currency{font-size:1.2rem;margin-right:8px;color:var(--primary-text-color);font-weight:700}.amount-input-field{flex:1;padding:10px;border-radius:6px;border:1px solid var(--border-color-medium);font-size:1.1rem;background-color:var(--bg-main);color:var(--primary-text-color)}.add-funds-error{color:var(--error-color,#d32f2f);margin-bottom:15px;font-size:.9rem}.add-token-modal-box{max-width:460px}.add-token-message{margin-bottom:20px;text-align:left}.token-field-group{margin-bottom:16px;text-align:left}.token-field-label{display:block;margin-bottom:6px;font-size:.9rem;color:var(--primary-text-color)}.token-input-field,.token-select-field{width:100%;padding:10px;border-radius:6px;border:1px solid var(--border-color-medium);font-size:1rem;background-color:var(--bg-main);color:var(--primary-text-color)}.token-field-hint{display:block;margin-top:6px;font-size:.8rem;opacity:.7}.add-token-error{color:var(--error-color,#d32f2f);margin-bottom:15px;font-size:.9rem}.token-current{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;margin-bottom:16px;border-radius:6px;border:1px solid var(--border-color-medium);background-color:var(--bg-main);text-align:left}.token-current-provider{font-weight:700}.token-current-mask{font-family:monospace;opacity:.8}.whole-page{margin:0;padding:0;height:100vh;height:100dvh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.page-content{flex:1;flex-direction:column;min-width:0;overflow-y:auto;overflow-x:hidden}.login-bar,.page-content{display:flex;width:100%;position:relative}.login-bar{background-color:var(--bg-offset);padding:calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);box-sizing:border-box;justify-content:space-between;box-shadow:0 1px 3px var(--shadow-color-soft);z-index:1000;border-bottom:1px solid var(--border-color-soft)}.login-bar,.logo-container-link{align-items:center;flex-shrink:0}.logo-container-link{display:flex;text-decoration:none;gap:var(--spacing-unit);color:var(--primary-text-color)}.logo-image{width:40px;height:40px;margin-right:12px;margin-left:0;flex-shrink:0;object-fit:contain}.login-bar play-history-logo{cursor:default;border:none;color:var(--accent-color);text-decoration:none;font-weight:var(--font-weight-bold);font-family:var(--font-family-headings);font-size:var(--font-size-large)}.login-bar login-bar-button{visibility:hidden;cursor:pointer;background-color:var(--accent-color);border:none;color:var(--accent-text-color);padding:calc(var(--spacing-unit)*1) calc(var(--spacing-unit) * 2.5);text-align:center;text-decoration:none;display:inline-block;font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-soft);transition:background-color var(--transition-speed) var(--transition-timing),transform var(--transition-speed) var(--transition-timing)}.login-bar login-bar-button:hover{background-color:var(--accent-color-darker);transform:translateY(-1px)}.login-bar build-text{color:var(--bg-main);font-size:var(--font-size-tiny);margin-left:auto;padding-left:var(--spacing-unit) * 2}.user-info-display{display:flex;position:relative;align-items:center;margin-left:var(--spacing-unit)}.profile-icon-container{cursor:pointer;transition:transform .2s ease}.profile-icon-container:hover{transform:scale(1.05)}.user-avatar{width:36px;height:36px;border-radius:50%;margin-right:0;border:2px solid var(--border-color-soft);object-fit:cover;display:block}.user-avatar-placeholder{width:36px;height:36px;border-radius:50%;background-color:var(--accent-color);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;border:2px solid var(--bg-offset);box-shadow:0 1px 3px var(--shadow-color-soft)}.profile-dropdown{position:absolute;top:120%;right:0;width:220px;background-color:white;border:1px solid var(--border-color-soft);border-radius:var(--border-radius-soft);box-shadow:0 4px 12px var(--shadow-color-medium);padding:var(--spacing-unit);z-index:2000;animation:fadeIn .2s ease-out}.dropdown-item{padding:10px;display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-small);color:var(--primary-text-color)}.balance-item span{color:var(--secondary-text-color)}.dropdown-divider{height:1px;background-color:var(--border-color-soft);margin:6px 0}.dropdown-button{width:100%;border:none;background:none;cursor:pointer;border-radius:var(--border-radius-soft);text-align:left;transition:background-color .2s;justify-content:center;font-weight:var(--font-weight-semibold)}.dropdown-button.primary{background-color:var(--success-color);color:white;margin-bottom:6px}.dropdown-button.primary:hover{background-color:hsl(122,39%,40%)}.dropdown-button.danger{color:var(--primary-text-color);background-color:var(--bg-main);border:1px solid var(--border-color-soft)}.dropdown-button.danger:hover{background-color:var(--bg-subtle-accent);color:#d32f2f}.upgrade-link{text-decoration:none;margin-right:8px}.upgrade-button{cursor:pointer;background-color:var(--accent-color);border:none;color:white;padding:6px 12px;text-align:center;text-decoration:none;display:inline-block;font-size:.85rem;font-weight:600;border-radius:6px;transition:background-color .2s}.upgrade-button:hover{background-color:var(--accent-color-darker)}.main-nav{align-items:center;gap:30px;position:absolute;left:50%;top:0;bottom:0;height:100%;transform:translateX(-50%)}.desktop-nav,.main-nav{display:flex}.mobile-nav-wrapper{display:none;position:relative;margin-left:auto;margin-right:15px}.mobile-menu-toggle{background:none;border:none;cursor:pointer;color:var(--accent-color);padding:8px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-soft)}.mobile-menu-toggle:hover{background-color:var(--bg-subtle-accent);color:var(--accent-color)}.mobile-menu-dropdown{position:absolute;top:100%;right:-50px;margin-top:10px;width:200px;background-color:white;border:1px solid var(--border-color-soft);border-radius:var(--border-radius-soft);box-shadow:0 4px 12px var(--shadow-color-medium);padding:8px 0;z-index:2001;display:flex;flex-direction:column}.mobile-nav-link{font-family:var(--font-family-headings);padding:12px 20px;text-decoration:none;color:var(--accent-color);font-size:1.1rem;transition:background-color .2s}.mobile-nav-link:hover{background-color:var(--bg-subtle-accent);color:var(--accent-color)}.nav-link{font-family:var(--font-family-title-bar);text-decoration:none;color:var(--accent-color);font-weight:600;font-size:1.1rem;padding:8px 12px;border-radius:var(--border-radius-soft);transition:all .2s ease;position:relative;letter-spacing:.01em;white-space:nowrap;display:inline-flex;align-items:center;line-height:normal}.nav-link:hover{color:var(--accent-color);background-color:transparent}.nav-dropdown-wrapper{position:relative;display:inline-flex;align-items:center;height:100%}.nav-dropdown-btn{font-family:var(--font-family-title-bar);background:none;border:none;color:var(--accent-color);font-weight:600;font-size:1.1rem;padding:8px 12px;border-radius:var(--border-radius-soft);cursor:pointer;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em;white-space:nowrap;line-height:normal;transition:opacity .2s}.nav-dropdown-btn:hover{opacity:.85}.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:1px;min-width:250px;background-color:#ffffff;border:1px solid var(--border-color-soft);border-radius:var(--border-radius-soft);box-shadow:0 6px 20px rgba(0,0,0,.1);padding:6px 0;z-index:2002;display:flex;flex-direction:column}.nav-dropdown-menu:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}.nav-dropdown-item{font-family:var(--font-family-headings);padding:10px 16px;text-decoration:none;color:var(--primary-text-color);font-size:.95rem;font-weight:500;display:flex;flex-direction:column;gap:2px;transition:background-color .15s}.nav-dropdown-item:hover{background-color:var(--bg-subtle-accent);color:var(--accent-color)}.nav-dropdown-item-title{font-weight:600;color:var(--accent-color)}.nav-dropdown-item-desc{font-size:.78rem;color:var(--secondary-text-color);line-height:1.3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1100px){.login-bar{padding:var(--spacing-unit);gap:10px;justify-content:flex-start}.desktop-nav{display:none}.mobile-nav-wrapper{display:block;margin-left:auto;margin-right:10px}.main-nav{position:static;transform:none;gap:10px;margin-left:10px;margin-right:auto}.nav-link{font-size:var(--font-size-small);padding:4px 8px}.logo-container-link{margin-right:auto;flex-shrink:1;min-width:0;overflow:hidden}.logo-image{margin-right:0;padding-right:8px}play-history-logo{white-space:nowrap;font-size:1.1rem}.upgrade-link{display:inline-block;margin-right:4px}}@media (max-width:480px){.login-bar build-text{display:none}play-history-logo{font-size:1rem}.mobile-nav-wrapper{margin-right:5px}}.bottom-bar{width:100%;display:flex;flex-direction:column;z-index:900;flex-shrink:0}playback-description-text{display:block;background-color:var(--bg-subtle-accent);color:var(--secondary-text-color);padding:var(--spacing-unit) calc(var(--spacing-unit) * 3);font-size:var(--font-size-small);text-align:center}.player-container{cursor:default;display:flex;justify-content:center;align-items:center;width:100%;background-color:var(--bg-offset);padding:calc(var(--spacing-unit) * 1.5);box-shadow:0 -2px 5px var(--shadow-color-soft);border-top:1px solid var(--border-color-soft);min-height:80px}