:root{--color-primary: #4dd4bf;--color-primary-hover: #3fc1ad;--color-primary-light: #4dffea;--color-white: #ffffff;--color-error: #F44336;--color-success: #4CAF50;--color-info: #2196F3;--color-danger: #ff6b6b;--color-warning: #FFC107;--bg-dark: #030303;--bg-dark-transparent: rgba(20, 20, 20, .85);--bg-light-transparent: rgba(255, 255, 255, .1);--bg-light-transparent-hover: rgba(255, 255, 255, .2);--bg-dark-transparent-active: rgba(255, 255, 255, .3);--text-primary: #ffffff;--text-secondary: #e8e8e8;--text-muted: #aaaaaa;--text-placeholder: rgba(255, 255, 255, .3);--border-light: rgba(255, 255, 255, .1);--border-medium: #444;--border-danger: rgba(255, 107, 107, .4);--border-danger-hover: rgba(255, 107, 107, .6);--modal-color-primary: var(--color-primary);--modal-color-bg: rgba(20, 20, 20, .85);--modal-color-border: var(--border-medium);--modal-spacing: 16px;--overlay-background: rgba(0, 0, 0, .85);--overlay-text: var(--text-primary);--overlay-border-radius: 4px;--overlay-box-shadow: 0 2px 10px rgba(0, 0, 0, .3);--toast-success-color: var(--color-success);--toast-error-color: var(--color-error);--toast-info-color: var(--color-info);--interaction-padding: 6px 8px;--overlay-transition: opacity .3s ease-in-out;--overlay-visible-opacity: .9;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-xxl: 24px;--action-button-width: 27px;--action-button-height: 24px;--icon-size: 14px;--font-family: "Helvetica", "Arial", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--transition-fast: all .2s ease;--transition-standard: all .3s ease-in-out;--z-index-base: 1000;--z-index-overlay: 1001;--z-index-controls: 1002;--z-index-modal: 2000;--z-index-toast: 3000}#toast-container{position:fixed;top:var(--spacing-xl);left:var(--spacing-xl);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-sm);z-index:var(--z-index-toast);font-family:var(--font-family);pointer-events:none}.toast{background-color:var(--overlay-background);color:var(--overlay-text);border-radius:var(--overlay-border-radius);box-shadow:var(--overlay-box-shadow);padding:var(--interaction-padding);opacity:0;transform:translateY(-10px);transition:var(--overlay-transition),transform var(--transition-standard);max-width:300px;font-size:var(--font-size-md);word-wrap:break-word;border:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);pointer-events:auto;will-change:transform,opacity}.toast.visible{opacity:var(--overlay-visible-opacity);transform:translateY(0)}.toast.success{border-left:4px solid var(--toast-success-color)}.toast.error{border-left:4px solid var(--toast-error-color)}.toast.info{border-left:4px solid var(--toast-info-color)}.toast.chrome-promo{position:relative;max-width:460px;width:calc(100% - 48px);background:linear-gradient(#000,#000),#000;background-blend-mode:overlay;backdrop-filter:blur(8px);--overlay-visible-opacity: 1;border:1px solid rgba(255,255,255,.08);border-radius:var(--overlay-border-radius);padding:24px 26px 24px 22px;display:flex;align-items:center;gap:20px;animation:promo-slide-in var(--transition-standard) ease-out}@keyframes promo-slide-in{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.chrome-promo .promo-copy{font-size:.95rem;line-height:1.35rem;color:var(--text-primary)}.chrome-promo .promo-copy strong{display:block;font-size:1.05rem;margin-bottom:6px}.chrome-promo .promo-cta{padding:10px 22px;border-radius:var(--overlay-border-radius);background:var(--color-primary);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:background .2s ease,transform .15s ease}.chrome-promo .promo-cta:hover{background:var(--color-primary-light);transform:translateY(-2px)}@media (max-width: 560px){html:not(.is-extension) #toast-container{top:0!important;bottom:auto!important;left:0!important;transform:none!important;width:100%;align-items:center}.toast.chrome-promo{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 18px 18px}.chrome-promo .promo-cta{width:100%;text-align:center}.chrome-promo .promo-cta-group{width:100%;display:flex;flex-wrap:wrap;gap:8px}.chrome-promo .promo-cta-group .promo-cta{flex:1 1 calc(50% - 8px)}.toast.chrome-promo.centered-promo{grid-template-columns:1fr;gap:20px;padding:24px 20px 26px;top:50%!important;left:50%;transform:translate(-50%,-50%)!important;max-height:92vh;overflow-y:auto}.promo-description,.promo-tagline,.promo-disclaimer{display:none!important}.promo-headline{margin-bottom:14px}.toast.chrome-promo.centered-promo{width:75%!important;max-width:420px}.promo-cta-group,.promo-cta-group.extensions{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:10px}.promo-cta-group .promo-cta{flex:1 1 100%!important;width:100%!important}.promo-copy{margin-bottom:6px!important}.promo-headline{margin-bottom:8px!important}.promo-description{display:block!important}.promo-mobile-note{font-size:.95rem;line-height:1.35rem;opacity:.85;margin-bottom:8px}.promo-actions{gap:10px!important}.promo-mobile-note{margin-bottom:0}.mobile-share .promo-cta{width:100%;text-align:center}.mobile-share{display:flex;flex-direction:column;gap:8px}}.chrome-promo .promo-cta-group{display:flex;gap:12px;flex-wrap:wrap}.chrome-promo .promo-cta-group .promo-cta{flex:0 0 auto}.toast a{color:var(--text-primary);text-decoration:none;transition:color var(--transition-fast)}.toast a:hover{color:var(--color-primary-light)}.toast-close{background:none;border:none;color:var(--text-primary);font-size:var(--font-size-lg);cursor:pointer;opacity:.8;transition:opacity var(--transition-fast)}.toast-close:hover{opacity:1;color:var(--color-primary)}.chrome-promo .toast-close{font-size:calc(var(--font-size-lg) + 4px)}.toast.chrome-promo{position:relative}.toast.chrome-promo .toast-close{position:absolute;top:10px;right:12px}@media (min-width: 561px){.toast.chrome-promo{grid-template-columns:1fr auto auto;align-items:center}.toast.chrome-promo .toast-close{position:static;margin-left:2px}}.toast.centered-promo{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:640px;width:calc(100% - 64px);z-index:calc(var(--z-index-toast) + 10)}.chrome-promo .promo-description{margin-top:8px;font-size:.9rem;line-height:1.35rem;opacity:.85}.chrome-promo .promo-cta-group{margin-top:14px}.toast.chrome-promo.centered-promo{display:grid;grid-template-columns:1.3fr auto;column-gap:48px;row-gap:28px;align-items:flex-start;padding:30px 34px 34px 30px}.promo-headline{font-size:1.35rem;line-height:1.6rem;margin:0 0 8px}.promo-tagline{margin:0 0 14px;font-size:1rem;line-height:1.4rem}.promo-disclaimer{display:block;margin-bottom:8px;opacity:.8}.promo-cta-group{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.promo-cta{min-width:170px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}.promo-cta[data-primary=true]{position:relative;animation:cta-breathe 4s ease-in-out infinite}@keyframes cta-breathe{0%,to{box-shadow:0 0 #ffffff1a}50%{box-shadow:0 0 12px #ffffff59}}.promo-cta[data-primary=true]:hover{animation:none}@media (prefers-reduced-motion: reduce){.promo-cta[data-primary=true]{animation:none}}.toast.centered-promo .toast-close{position:absolute;top:12px;right:14px}@media (max-width: 450px){.promo-actions{gap:20px}.promo-cta-group.extensions{display:flex;flex-direction:column;gap:10px}.promo-cta-group{display:flex;flex-direction:column;gap:10px;width:100%}.promo-cta{flex:1 1 auto;width:100%}}.promo-actions{display:flex;flex-direction:column;gap:26px}.cta-heading{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin:0 0 8px}.extensions .promo-cta{min-width:140px;padding:6px 12px;font-size:.9rem}.cta-icon{width:16px;height:16px;display:inline-block;filter:invert(1);margin-right:8px}.cta-badge{background:#fff;color:#000;font-size:.65rem;font-weight:600;border-radius:4px;padding:2px 6px;margin-left:6px;text-transform:uppercase}.promo-cta-group.extensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.promo-cta-group.wallpapers{display:flex;flex-direction:column;gap:10px}@media (max-width: 350px){.promo-cta-group.extensions{grid-template-columns:1fr}}.cta-icon.icon-safari{filter:invert(1) drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff)}.promo-cta-group.wallpapers .promo-cta{background:var(--color-primary-dark, #1bb0a0)}.promo-cta-group.wallpapers .promo-cta:hover{background:#23c0b2}.promo-link{color:var(--text-primary);opacity:.8;font-size:.9rem;text-decoration:underline;transition:opacity .2s ease}.promo-link:hover{opacity:1}@media (max-width: 768px){.toast.chrome-promo.centered-promo{display:flex!important;flex-direction:column!important;align-items:stretch}.promo-copy{margin-bottom:18px}}body.promo-active #player,body.promo-active #interactions{display:none!important}.alt-browsers{width:100%;margin-top:0}.alt-browsers summary{list-style:none}.alt-browsers summary::-webkit-details-marker{display:none}.alt-browsers summary{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.promo-cta-group.extensions .alt-browsers{grid-column:1 / -1}.alt-browsers .promo-cta{margin-top:10px}.promo-cta-group.extensions{grid-template-columns:1fr!important;gap:10px!important}.promo-cta-group.extensions .promo-cta{width:100%;min-width:0;padding:10px 22px;font-size:.95rem}.alt-browsers-toggle{list-style:none;cursor:pointer;color:var(--text-primary);font-size:.9rem;opacity:.8;text-decoration:none;padding:0;margin:0;background:none;border:none;display:block!important;text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important;gap:0!important}.alt-browsers-toggle:hover{opacity:1}.modal{display:none;position:fixed;z-index:var(--z-index-modal);left:0;top:0;width:100%;height:100%;background-color:#0006;opacity:0;transition:var(--overlay-transition);overflow-y:auto;padding:var(--spacing-xl) 0}.modal.visible{display:block;opacity:1}.modal-content{background-color:var(--modal-color-bg);color:var(--text-secondary);margin:0 auto;padding:var(--spacing-xxl);max-height:calc(100vh - 100px);overflow-y:auto;border:1px solid var(--modal-color-border);border-radius:var(--overlay-border-radius);width:80%;max-width:600px;position:relative;box-sizing:border-box}@media (max-height: 800px){.modal{padding:var(--spacing-xl) 0}.modal-content{margin:0 auto;max-height:calc(100vh - 40px)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--modal-spacing);border-bottom:1px solid var(--modal-color-border);margin-bottom:var(--modal-spacing);position:relative}.modal-header.no-border{border-bottom:none;margin-bottom:0;padding-bottom:var(--spacing-md)}.modal-header h2{margin:0;font-size:var(--font-size-xl);font-weight:500;flex:1}.modal-header .close{position:absolute;right:-8px;top:-8px;color:#888;font-size:var(--spacing-xxl);font-weight:700;cursor:pointer;line-height:1;padding:var(--spacing-sm);background:none;border:none;transition:var(--transition-fast);z-index:1}.modal-header .close:hover{color:var(--text-primary)}.modal-body{position:relative}.modal-button{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--overlay-border-radius);border:none;font-size:var(--font-size-md);cursor:pointer;transition:var(--transition-fast)}.modal-button--primary{background-color:var(--modal-color-primary);color:var(--text-primary)}.modal-button--primary:hover{background-color:var(--color-primary-hover)}.modal-button--secondary{background-color:var(--bg-light-transparent);color:var(--text-primary)}.modal-button--secondary:hover{background-color:var(--bg-light-transparent-hover)}#shaderDialog .modal-input{position:relative;z-index:1}#shaderDialog button{position:relative;z-index:2}.user-info{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:#0003;border-radius:6px;margin-bottom:var(--spacing-xl)}.user-avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background-color:#4dd4bf1a;border-radius:50%;flex-shrink:0}.user-details{flex-grow:1}.user-details h3{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-lg);font-weight:500;color:var(--text-secondary)}.user-details p{margin:0;font-size:var(--font-size-md);color:var(--text-muted)}.user-actions{display:flex;flex-direction:column;gap:var(--spacing-sm)}.user-actions button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);text-align:left;cursor:pointer;transition:var(--transition-fast)}.user-actions button svg{flex-shrink:0;opacity:.85}.user-actions button:hover svg{opacity:1}.user-actions .danger-button{background-color:#ff6b6b1a;color:var(--color-danger);border:1px solid var(--border-danger)}.user-actions .danger-button:hover{background-color:#ff6b6b33;border-color:var(--border-danger-hover)}.account-form-fields{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.account-button-row{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.account-form-message{padding:var(--spacing-sm);border-radius:var(--overlay-border-radius);font-size:var(--font-size-md);margin-top:var(--spacing-sm);color:var(--color-danger);background-color:#ff6b6b1a;display:none}#login{width:var(--action-button-width);transition:var(--transition-fast)}#login.logged-in{width:auto;padding:0 6px;justify-content:flex-start;opacity:1}#login.logged-in .username-display{display:inline-block;color:var(--color-primary)}#login.logged-in svg{stroke:var(--color-primary);filter:drop-shadow(0 0 3px var(--color-primary));margin-left:0}.username-display{display:none;font-size:var(--font-size-sm);margin-left:var(--spacing-xs);color:var(--text-primary);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.login-button{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);border:none;border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:.95em;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.login-button:hover{background:var(--color-primary-hover)}.verification-message{text-align:center;padding:var(--spacing-xl) 0}.verification-icon{margin:0 auto var(--spacing-xl);width:64px;height:64px;display:flex;align-items:center;justify-content:center}.verification-message h3{font-size:var(--spacing-xl);margin-bottom:var(--spacing-lg);color:var(--color-primary)}.verification-message p{margin-bottom:var(--spacing-lg);line-height:1.5;color:var(--text-secondary)}.email-note{background:#4dd4bf1a;padding:var(--spacing-md);border-radius:var(--overlay-border-radius);margin:var(--spacing-xl) 0;word-break:break-all;font-family:monospace;font-size:var(--font-size-md);border:1px solid rgba(77,212,191,.2);color:var(--color-primary)}.verification-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.verification-actions button{width:100%;padding:10px}#verificationMessage{margin-top:16px}.modal-links{margin-top:24px;text-align:center}.modal-links a{color:#4dd4bf;text-decoration:none;font-size:14px}.modal-links a:hover{text-decoration:underline}.link-separator{margin:0 8px;color:#888;font-size:12px}.artwork-edit-mode,body.artwork-edit-mode{overflow:hidden}.artwork-edit-mode #player.sticky-during-edit{opacity:1!important;visibility:visible!important;transition:none!important}.artwork-edit-mode .visible-during-edit{opacity:1!important;visibility:visible!important}.artwork-edit-mode .hidden-during-edit{display:none!important}.artwork-editor-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--modal-color-bg);border-radius:var(--overlay-border-radius);width:500px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;z-index:var(--z-index-modal);box-shadow:var(--overlay-box-shadow);border:1px solid var(--border-medium);animation:artwork-editor-appear var(--transition-standard);overflow:hidden;color:var(--text-primary)}@keyframes artwork-editor-appear{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.artwork-editor-panel .editor-header{padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-medium);cursor:move;user-select:none;background:#1e1e1ef2;border-radius:var(--overlay-border-radius) var(--overlay-border-radius) 0 0}.artwork-editor-panel .editor-header h2{margin:0;font-size:var(--font-size-xl);font-weight:500;color:var(--text-primary)}.artwork-editor-panel .close-editor{background:none;border:none;color:var(--text-muted);font-size:var(--spacing-xxl);cursor:pointer;transition:var(--transition-fast);padding:0;width:var(--spacing-xxl);height:var(--spacing-xxl);line-height:22px;text-align:center;border-radius:var(--overlay-border-radius)}.artwork-editor-panel .close-editor:hover{color:var(--text-primary);background-color:var(--bg-light-transparent-hover)}.artwork-editor-panel .editor-content{padding:var(--spacing-lg);overflow-y:auto;overflow-x:hidden;flex:1}.artwork-editor-panel .input-group{margin-bottom:var(--spacing-lg);margin-top:var(--spacing-md)}.artwork-editor-panel .input-group:first-child{margin-top:3px}.artwork-editor-panel .input-group:last-child{margin-bottom:3px}.artwork-editor-panel .input-group label{display:block;margin-bottom:var(--spacing-xs);font-size:var(--font-size-md);color:var(--text-secondary)}.artwork-editor-panel input[type=text],.artwork-editor-panel input[type=number],.artwork-editor-panel .interaction-row input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:#1e1e1ecc;border:1px solid var(--border-light);border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:var(--font-size-md);transition:var(--transition-fast);box-sizing:border-box}.artwork-editor-panel input:focus{outline:none;border-color:#64b4ff99;background-color:#282828cc;box-shadow:0 0 0 1px #64b4ff33}.artwork-editor-panel .input-help-text{margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-muted);line-height:1.4}.artwork-editor-panel input.typing{border-color:#ffffff4d}.artwork-editor-panel input.validating{border-color:#f0c030;background-color:#f0c0301a}.artwork-editor-panel input.valid{border-color:var(--color-success)}.artwork-editor-panel input.invalid,.artwork-editor-panel input.validation-error{border-color:var(--color-danger)}@keyframes shake-animation{0%{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}.artwork-editor-panel .shake-animation{animation:shake-animation .5s cubic-bezier(.36,.07,.19,.97) both}.artwork-editor-panel .color-input-group{display:flex;align-items:center}.artwork-editor-panel input[type=color]{height:38px;width:50px;padding:2px;background-color:#1e1e1ecc;border:1px solid rgba(255,255,255,.15);border-radius:6px 0 0 6px;cursor:pointer}.artwork-editor-panel #artworkBgText{height:38px;border-radius:0 6px 6px 0;flex:1;padding-left:12px;margin-left:-1px}.artwork-editor-panel .zoom-input-wrapper{position:relative;display:flex}.artwork-editor-panel .zoom-input-wrapper input[type=number]{width:100%;padding-right:30px;text-align:right;border-radius:6px}.artwork-editor-panel .zoom-unit{position:absolute;right:10px;top:0;bottom:0;display:flex;align-items:center;color:#ccc;font-size:var(--font-size-md);pointer-events:none}.artwork-editor-panel .interactions-editor{border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:12px;background-color:#191919cc;display:flex;flex-direction:column;gap:8px}.artwork-editor-panel .interactions-list{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}.artwork-editor-panel .interaction-row{display:flex;align-items:center;margin-bottom:8px;gap:8px;width:100%}.artwork-editor-panel .interaction-row:last-child{margin-bottom:0}.artwork-editor-panel .interaction-row .interaction-key{width:120px;flex-shrink:0}.artwork-editor-panel .interaction-row .interaction-value{flex:1}.artwork-editor-panel .remove-interaction{width:24px;height:24px;padding:0;background:#3c3c3ccc;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#ccc;font-size:16px;cursor:pointer;transition:all .2s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center}.artwork-editor-panel .remove-interaction:hover{background:#ff505033;color:#ff6b6b}.artwork-editor-panel .add-interaction{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background-color:#282828cc;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#ccc;font-size:14px;cursor:pointer;transition:all .2s ease;width:100%;margin-top:4px}.artwork-editor-panel .add-interaction:hover{background-color:#3c3c3ccc;color:#fff}.artwork-editor-panel .add-interaction img{opacity:.85;transition:opacity .2s ease}.artwork-editor-panel .add-interaction:hover img{opacity:1}.artwork-editor-panel .interactions-help{font-size:12px;color:#aaa;margin-top:10px}.artwork-editor-panel .additional-fields{transition:opacity .3s ease-out}.artwork-editor-panel .editor-footer{padding:14px 18px;display:flex;justify-content:flex-end;border-top:1px solid rgba(255,255,255,.12)}.artwork-editor-panel .editor-actions{display:flex;gap:10px;width:100%}.artwork-editor-panel .primary-button{padding:9px 16px;background-color:var(--color-primary);color:var(--text-primary);border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background-color .2s;width:100%;display:flex;align-items:center;justify-content:center}.artwork-editor-panel .primary-button:hover{background-color:var(--color-primary-hover)}.artwork-editor-panel .secondary-button{padding:8px 12px;background-color:#ffffff1a;color:var(--text-primary);border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center}.artwork-editor-panel .secondary-button:hover:not(:disabled){background-color:#ffffff26;border-color:#ffffff4d}.artwork-editor-panel .secondary-button:disabled{opacity:.4;cursor:not-allowed;background-color:#ffffff0d;color:#ffffff80}.artwork-editor-panel .secondary-button:not(:disabled){background-color:#4dd4bf26;border-color:#4dd4bf66;color:var(--color-primary)}.artwork-editor-panel .secondary-button:not(:disabled):hover{background-color:#4dd4bf40;border-color:#4dd4bf99}#artworkInteractions{display:none}.additional-fields{opacity:0;transition:opacity .5s ease-out}.radio-group{display:flex;gap:15px;margin-top:5px}.radio-group label{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:var(--font-size-sm);color:var(--text-secondary)}.radio-group input[type=radio]{cursor:pointer;accent-color:var(--color-primary)}.input-group+.input-group{margin-top:var(--spacing-sm)}.display-mode-selector{display:flex;gap:10px;margin-top:5px}.mode-option{flex:1;padding:10px;border:1px solid var(--border-light);border-radius:4px;text-align:center;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;background-color:#ffffff0d;min-height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mode-option:hover{background-color:#ffffff1a;border-color:var(--border-medium)}.mode-option.selected{background-color:#4dd4bf26;border-color:var(--color-primary);color:var(--color-primary)}.mode-option.selected .mode-icon{color:var(--color-primary)}.mode-text{font-size:var(--font-size-sm);margin-bottom:8px;font-weight:500;color:var(--text-secondary)}.mode-option.selected .mode-text{color:var(--color-primary)}.mode-icon{font-size:.9em;font-weight:700;line-height:1;color:var(--text-muted)}.playlist-menu-modal .modal-content{max-width:600px;max-height:80vh;overflow-y:auto;background-color:#141414eb}.playlist-editor-modal .modal-content{width:85%;max-width:800px;max-height:90vh;overflow-y:auto;padding:20px 24px!important;box-sizing:border-box;overflow-x:hidden}.playlist-editor-modal .playlist-content{padding:0 0 20px}.artwork-form-modal-container .modal-content{max-width:900px;width:90%}.playlist-section{margin-bottom:var(--spacing-xl);margin-top:var(--spacing-xl)}.playlist-section:first-child{margin-top:var(--spacing-lg)}.section-title{font-size:var(--font-size-md);color:var(--text-muted);margin:0 0 var(--spacing-md) 0;font-weight:400;letter-spacing:.5px;border:none;padding:0}.playlist-header h2{margin:0 0 var(--spacing-lg) 0;display:flex;align-items:center;gap:var(--spacing-sm)}.playlist-actions-row{display:flex;justify-content:space-between;gap:var(--spacing-sm);margin:0 0 20px;padding:12px 15px;background:#0000004d;border-radius:4px;border:1px solid var(--border-light)}.playlist-actions-row .left-actions,.playlist-actions-row .right-actions{display:flex;gap:var(--spacing-sm);align-items:center}.playlist-actions-row .right-actions{margin-left:auto}.playlist-actions-row .info-text{font-size:var(--font-size-sm);color:var(--text-muted);display:flex;align-items:center;height:100%}.playlist-list{max-height:none;overflow-y:visible;border-radius:6px;background-color:transparent;margin:15px 0}.playlist-section .playlist-list{max-height:none;overflow-y:visible;margin:0;padding:0;border-radius:4px}.playlist-section:first-child .playlist-list{padding:0}.playlist-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--border-light);transition:var(--transition-fast);margin:0;cursor:pointer;background-color:transparent}.playlist-item:last-child{border-bottom:none}.playlist-item:hover{background-color:var(--bg-light-transparent)}.playlist-item.selected{background-color:#4dd4bf1a;border-left:3px solid var(--color-primary);padding-left:calc(var(--spacing-lg) - 3px)}.playlist-info{flex:1}.playlist-name-row{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.95em;color:var(--text-secondary);font-weight:500;margin-bottom:var(--spacing-xs)}.playlist-meta{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-sm)}.creator-name{color:var(--text-muted);font-style:italic;margin-left:var(--spacing-sm)}.storage-info{color:var(--text-muted);font-size:var(--font-size-sm);font-style:italic;opacity:.9;margin-left:var(--spacing-sm)}.visibility-indicator{display:inline-flex;align-items:center;margin-left:var(--spacing-xs);opacity:.5;transition:var(--transition-fast)}.visibility-indicator svg{color:currentColor}.visibility-indicator.public{color:var(--color-primary)}.visibility-indicator.private{color:var(--text-muted)}.playlist-item:hover .visibility-indicator{opacity:.8}.playlist-actions{display:flex;gap:var(--spacing-sm);align-items:center}.playlist-actions button{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:6px 12px;border-radius:var(--overlay-border-radius);display:flex;align-items:center;justify-content:center;transition:var(--transition-fast);width:var(--spacing-xxl);height:var(--spacing-xxl);font-size:13px}.playlist-actions button:hover{background-color:var(--bg-light-transparent-hover);color:var(--text-primary)}.playlist-actions button img,.playlist-actions button svg{width:var(--icon-size);height:var(--icon-size);opacity:.85;transition:var(--transition-fast)}.playlist-actions button:hover img,.playlist-actions button:hover svg{opacity:1}.view-toggle-container{display:flex;align-items:center;justify-content:flex-end;margin:0 0 15px;gap:10px;background:#00000026;padding:8px 12px;border-radius:4px}.view-toggle-container span{font-size:14px;color:var(--text-muted)}.view-toggle{display:flex;background:#0003;border-radius:4px;padding:2px}.view-option{background:none;border:none;color:var(--text-secondary);padding:5px 10px;border-radius:3px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s ease;min-width:70px;justify-content:center}.view-option svg{opacity:.7;transition:opacity .2s ease}.view-option:hover{color:var(--text-primary)}.view-option:hover svg{opacity:1}.view-option.active{background:#4dd4bf26;color:var(--color-primary)}.view-option.active svg{opacity:1;stroke:var(--color-primary)}.playlist-artworks.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:14px;margin:0 0 20px;padding:5px 0;width:100%;contain:content;overflow-y:visible}.playlist-artworks.list-view{display:flex;flex-direction:column;gap:0;margin:0 0 20px;padding:5px 0;width:100%;overflow-y:visible;overflow-x:hidden;box-sizing:border-box}.playlist-artworks.list-view .artwork-item{height:auto;padding-bottom:0;display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);background:transparent;border-bottom:1px solid var(--border-light);transition:background-color .2s ease;width:100%;cursor:pointer}.playlist-artworks.list-view .artwork-item:hover{background:var(--bg-light-transparent);transform:none;box-shadow:none}.playlist-artworks.list-view .artwork-item:last-child{border-bottom:none}.playlist-artworks.list-view .artwork-preview{display:none}.playlist-artworks.list-view .artwork-info{position:static;display:flex;flex:1;background:transparent;padding:0;min-width:0;max-width:calc(100% - 70px);overflow:hidden}.playlist-artworks.list-view .artwork-name{flex:.45;margin-bottom:0;margin-right:10px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.playlist-artworks.list-view .artwork-artist{flex:.45;font-size:13px;margin-right:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.playlist-artworks.list-view .artwork-actions{position:static;display:flex;gap:4px;flex:0 0 auto}.playlist-artworks.list-view .artwork-actions button{position:static;margin:0;padding:4px;width:28px;height:28px;min-width:28px;background:none;border:none;color:var(--text-secondary)}.playlist-artworks.list-view .artwork-actions button:hover{background:var(--bg-light-transparent-hover);color:var(--text-primary);transform:scale(1.1)}.playlist-artworks.list-view .artwork-actions .edit-artwork:hover{background:#4dd4bfd9}.playlist-artworks.list-view .artwork-actions .remove-artwork:hover{background:#ff6b6bd9;color:#ff6b6b}.playlist-artworks.list-view .artwork-item.add-artwork-button{height:auto;background:#0000001a;border:1px dashed rgba(255,255,255,.15);padding:0;max-width:100%}.playlist-artworks.list-view .show-add-artwork{position:static;flex-direction:row;justify-content:center;width:100%;padding:8px;box-sizing:border-box}.artwork-item{position:relative;background:#0003;border-radius:6px;overflow:hidden;height:0;padding-bottom:100%;transition:transform .2s ease,box-shadow .2s ease;width:100%;cursor:pointer}.artwork-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.artwork-preview{position:relative;width:100%;padding-top:100%;overflow:hidden;background-color:#000;border-radius:6px;z-index:1}.artwork-preview .artwork-content{position:absolute;top:0;left:0;width:100%;height:100%;display:block;border:none;object-fit:cover;opacity:0;transition:opacity .2s ease-in-out}.playlist-artworks.grid-view .artwork-preview .artwork-content{pointer-events:none}.artwork-preview img.artwork-content{object-fit:cover}.artwork-preview video.artwork-content{object-fit:cover}.artwork-preview .artwork-content.loaded,.artwork-preview .artwork-content.error{opacity:1}.artwork-info{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:#000000b3;color:#fff;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px}.artwork-name{font-size:14px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artwork-artist{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.playlist-artworks.grid-view .artwork-actions{opacity:0;transition:opacity .15s ease}.playlist-artworks.grid-view .artwork-item:hover .artwork-actions{opacity:1}.artwork-actions{position:absolute;inset:0;z-index:15;pointer-events:none}.artwork-actions button{position:absolute;width:24px;height:24px;border-radius:50%;border:none;background:#000000b3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3;pointer-events:auto}.artwork-actions .remove-artwork{top:8px;right:8px}.artwork-actions .copy-artwork-link{bottom:6px;right:36px}.artwork-actions .edit-artwork{bottom:6px;right:8px}.artwork-actions button:hover{background:#000000d9;transform:scale(1.1)}.artwork-actions .edit-artwork:hover{background:#4dd4bfd9}.artwork-actions .remove-artwork:hover{background:#ff6b6bd9;color:#ff6b6b}.artwork-actions button svg{width:12px;height:12px;opacity:.85;transition:opacity .2s ease}.artwork-actions button:hover svg{opacity:1}.artwork-actions .copy-artwork-link:hover{background:#4dd4bfd9;transform:scale(1.1)}.artwork-item.add-artwork-button{display:block;background:#0003;cursor:pointer}.show-add-artwork{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:none;border:none;color:#fff;cursor:pointer;padding:20px;transition:background-color .2s ease}.show-add-artwork:hover{background-color:#ffffff1a}.show-add-artwork img{width:14px;height:14px;opacity:.85}.show-add-artwork:hover img{opacity:1}.show-add-artwork span{font-size:14px}.add-to-playlist{padding:6px 12px;background:#4dd4bf;border:none;border-radius:4px;color:#fff;font-size:.9em;cursor:pointer;transition:all .2s ease}.add-to-playlist:hover{background:#3fc1ad;transform:translateY(-1px)}.add-to-playlist:active{transform:translateY(0)}.action .add-to-playlist{opacity:.7;transition:all .2s ease}.action .add-to-playlist:hover{opacity:.9;transform:scale(1.05)}#addArtwork{padding:8px 16px;background:#4dd4bf;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s ease}#addArtwork:hover{background:#3fc1ad}.new-playlist-section{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);box-sizing:border-box}.modal-header+.new-playlist-section,.modal-content>.new-playlist-section:first-child{margin-top:0;padding-top:0;border-top:none}.create-playlist-button{background:none;border:1px dashed rgba(255,255,255,.3);color:#ccc;padding:8px 15px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:14px;transition:all .2s ease}.create-playlist-button:hover{background-color:#ffffff0d;border-color:#ffffff80;color:#fff}.new-playlist-section label{display:block;margin-bottom:8px;font-size:14px;color:#e8e8e8;text-align:left}.new-playlist-section .button-row{text-align:center}.new-playlist-section input{width:100%;box-sizing:border-box;padding:8px 12px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-size:.95em;margin-bottom:12px}.new-playlist-section input:focus{outline:none;border-color:#4dd4bf}.new-playlist-section button{width:100%;padding:8px 12px;background:#4dd4bf;border:none;border-radius:4px;color:#fff;font-size:.95em;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.new-playlist-section button:hover{background:#3fc1ad}.new-playlist-section button img{width:14px;height:14px;opacity:.9}.form-fields{margin:15px 0}.input-group{margin-bottom:15px}.input-group label{display:block;margin-bottom:5px;font-size:14px;color:#ccc}.input-group input{width:100%;padding:8px 12px;background-color:#282828cc;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:14px}.input-group input:focus{border-color:#4dd4bf;outline:none}.form-error-message{color:#ff6b6b;font-size:.9em;margin-top:10px;padding:8px;border-radius:4px;background-color:#ff6b6b1a}.action-button{background-color:#ffffff1a;padding:6px 12px;border:1px solid var(--border-light);border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:13px;line-height:1.4;cursor:pointer;transition:var(--transition-fast);white-space:nowrap;display:flex;align-items:center;gap:var(--spacing-sm)}.action-button:hover{background-color:#ffffff26;border-color:#ffffff40}.action-button svg{display:inline-flex;vertical-align:middle}.action-button span{display:inline-flex;vertical-align:middle}.action-button.danger{background-color:#ff6b6b26;color:#ff6b6b;border-color:#ff6b6b33}.action-button.danger:hover{background-color:#ff6b6b40;border-color:#ff6b6b4d}.action-button.primary{background-color:#4dd4bf26;color:var(--color-primary);border-color:#4dd4bf4d}.action-button.primary:hover{background-color:#4dd4bf40;border-color:#4dd4bf66}.artwork-form-modal{display:flex;gap:40px;padding:24px;background:#0000001a;border-radius:8px;margin-bottom:24px}.artwork-form-modal .form-section{flex:1;min-width:0}.artwork-form-modal .preview-section{flex:1;min-width:0;position:relative}.artwork-form-modal .preview-container{aspect-ratio:1;position:relative;background:#0003;border-radius:8px;overflow:hidden;transition:background-color .3s ease}.artwork-form-modal .preview-container iframe{position:absolute;inset:0;width:100%;height:100%;border:none;transition:transform .3s ease;transform-origin:center}.artwork-form-modal .preview-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888;font-size:13px}.preview-interactions{position:absolute;bottom:10px;right:10px;padding:8px;font-size:12px;z-index:9999;opacity:.85;transition:opacity .3s ease-in-out;max-width:300px;background-color:#141414d9;color:#fff;pointer-events:none;border-radius:3px;display:none}.preview-interactions:hover{opacity:1}.preview-interactions table{width:100%;border-collapse:collapse}.preview-interactions td{padding:2px 4px;opacity:.85;transition:opacity .2s ease}.preview-interactions td:first-child{text-align:right;font-weight:400;padding-right:8px}.preview-interactions td:last-child{text-align:left}#artworkInteractions{width:100%;min-height:100px;padding:8px 12px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-family:monospace;font-size:13px;line-height:1.4;resize:vertical;display:none}@media (max-width: 768px){.playlist-editor-modal .modal-content{width:95%;height:95vh}}@media (max-width: 600px){.playlist-artworks.grid-view{grid-template-columns:repeat(2,1fr)!important;gap:12px}.playlist-actions-row{flex-direction:column;align-items:flex-start;gap:10px;padding:var(--spacing-md) var(--spacing-lg)}.left-actions,.right-actions{width:100%}.artwork-form-modal{flex-direction:column;gap:20px}.view-toggle-container{justify-content:flex-start;margin-top:5px}}@media (max-width: 480px){.playlist-item{flex-direction:column;align-items:flex-start;gap:10px}.playlist-actions{width:100%;justify-content:space-between}.playlist-artworks.list-view .artwork-info{flex-direction:column}.playlist-artworks.list-view .artwork-name,.playlist-artworks.list-view .artwork-artist{margin-right:0;margin-bottom:5px}}.modal-header{position:relative;z-index:20;padding-bottom:15px;margin-bottom:10px}.modal-header h2{display:flex;align-items:center;gap:var(--spacing-sm);margin:0}.modal-header .visibility-indicator{display:inline-flex;align-items:center;opacity:.8;transition:var(--transition-fast);margin-left:var(--spacing-sm)}.modal-header .visibility-indicator svg{color:currentColor}.modal-header .visibility-indicator.public{color:var(--color-primary)}.modal-header .visibility-indicator.private{color:var(--text-muted)}.playlist-content h3{margin:25px 0 15px}.content-section{margin:0;padding:0;width:100%}.content-section h3{margin:0 0 15px}.playlist-artworks.grid-view,.playlist-artworks.list-view{margin-bottom:20px;max-height:none;overflow-y:visible}.playlist-content{padding:0 0 20px;width:100%}.playlist-artworks.grid-view{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;width:100%;padding:5px 0}.playlist-artworks.grid-view .artwork-info{padding:6px 8px;background:#0000008c}.playlist-artworks.grid-view .artwork-name{font-size:13px;margin-bottom:2px}.playlist-artworks.grid-view .artwork-artist{display:none}.playlist-artworks.list-view{width:100%;padding:5px 0}.artwork-item{width:100%}.playlist-actions-row{padding:12px 15px}.modal-content{padding-left:24px!important;padding-right:24px!important;box-sizing:border-box;overflow-x:hidden}.playlist-actions button{width:auto;height:auto;min-width:var(--spacing-xxl);min-height:var(--spacing-xxl);padding:6px}.modal-dialog{--modal-padding: 15px;overflow-x:hidden;max-width:100vw}.playlist-artworks.list-view.no-sort{contain:content}.artwork-play-overlay{position:absolute;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;opacity:1;transition:background-color .2s ease;z-index:12;pointer-events:auto;cursor:pointer}.artwork-preview:hover .artwork-play-overlay,.artwork-play-overlay.hover,.artwork-play-overlay:hover{background:#00000080}.playlist-artworks.grid-view .artwork-play-overlay{opacity:0;background:#0000;transition:opacity .15s ease,background-color .2s ease;pointer-events:none}.playlist-artworks.grid-view .artwork-item:hover .artwork-play-overlay,.playlist-artworks.grid-view .artwork-preview:hover .artwork-play-overlay{opacity:1;background:#00000059;pointer-events:auto}.playlist-artworks.grid-view .play-artwork-button:hover{transform:scale(1.12)}.play-artwork-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;position:relative;z-index:2;width:48px;height:48px}.play-artwork-button:hover{transform:scale(1.1)}.play-artwork-button svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.play-artwork-button img,.play-artwork-button svg{opacity:.9;transition:transform .2s ease,opacity .15s ease}.play-artwork-button:hover img,.play-artwork-button:hover svg{opacity:1;transform:scale(1.12)}.playlist-artworks.list-view .artwork-play-overlay{position:relative;display:inline-flex;opacity:1;background:none;width:auto;height:auto;margin-right:10px}.playlist-artworks.list-view .play-artwork-button{transform:scale(.8)}.playlist-artworks.list-view .play-artwork-button:hover{transform:scale(.9)}.playlist-artworks.grid-view .play-artwork-button:hover{transform:scale(1.15)}.playlist-artworks.list-view .artwork-preview{display:inline-flex;width:auto;padding-top:0;margin-right:10px}.list-view-play{display:none;margin-right:10px;background:none;border:none;padding:0;cursor:pointer;min-width:20px;flex-shrink:0}.playlist-artworks.list-view .list-view-play{display:inline-flex;align-items:center;justify-content:center}.playlist-artworks.list-view .artwork-play-overlay{display:none}.playlist-artworks.list-view .artwork-info{display:flex;align-items:center}.share-link-container{display:flex;align-items:center;border:1px solid var(--input-border-color, #555);border-radius:4px;overflow:hidden;min-width:250px}.share-link-container.disabled{opacity:.5;cursor:default}.share-link-input{flex-grow:1;padding:5px 8px;border:none;background-color:var(--input-bg-color, #222);color:var(--text-color, #eee);font-size:.9em;height:28px;box-sizing:border-box;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.share-link-container.disabled .share-link-input{color:var(--text-color-muted, #888)}.share-link-copy-button{border:none;border-left:1px solid var(--input-border-color, #555);height:28px;display:flex;align-items:center;justify-content:center;padding:0 10px;background-color:var(--button-secondary-bg-color, transparent);cursor:pointer;margin:0;flex-shrink:0}.share-link-container.disabled .share-link-copy-button{cursor:default}.share-link-copy-button:hover:not(:disabled){background-color:#ffffff26}.playlist-tabs{display:flex;gap:0;margin:0 0 20px;border-bottom:1px solid var(--border-light);background:#0003;border-radius:6px 6px 0 0;overflow:hidden}.playlist-tab{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-muted);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;border-right:1px solid var(--border-light)}.playlist-tab:last-child{border-right:none}.playlist-tab:hover{background:#ffffff0d;color:var(--text-secondary)}.playlist-tab.active{background:#4dd4bf1a;color:var(--color-primary);position:relative}.playlist-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--color-primary)}.playlist-tab.active .tab-count{background:#4dd4bf33;color:var(--color-primary)}.tab-contents{position:relative;min-height:200px}.tab-content{display:none;animation:fadeIn .2s ease-in-out}.tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:14px;font-style:italic}.tab-content .playlist-section,.tab-content .playlist-section:first-child{margin-top:0}.tab-content .playlist-section:last-child{margin-bottom:0}@media (max-width: 600px){.playlist-tabs{flex-direction:column;border-radius:0}.playlist-tab{border-right:none;border-bottom:1px solid var(--border-light)}.playlist-tab:last-child{border-bottom:none}.playlist-tab.active:after{display:none}.playlist-tab.active{border-left:3px solid var(--color-primary);padding-left:13px}}.active-playlist-name{font-weight:600;color:var(--color-primary)}.now-playing .playlist-section,.now-playing-section{background:#ffffff0a;border:1px solid var(--border-light);border-radius:6px;padding:12px 15px;margin:0 0 var(--spacing-lg) 0}.now-playing .section-title{margin-top:0}.now-playing-help{font-size:12px;color:var(--text-muted);margin:4px 0 10px;text-align:center}.playlist-section.now-playing{background:none;border:none;padding:0;margin:0 0 var(--spacing-md) 0}.playlist-section.now-playing .playlist-item{padding:4px 8px;gap:6px}.playlist-section.now-playing .playlist-name-row{font-size:.9em;margin-bottom:0}.playlist-section.now-playing .playlist-meta{display:block}.playlist-section.now-playing .playlist-actions button:not(.select-playlist){display:none}.playlist-section.now-playing .playlist-actions button{width:24px;height:24px;padding:4px}.playlist-section.now-playing .playlist-item{display:flex;align-items:center;gap:8px;padding:4px 8px}.playlist-section.now-playing .playlist-info{display:flex;align-items:center;gap:8px}.playlist-section.now-playing .playlist-name-row{display:inline;margin-bottom:0}.playlist-section.now-playing .playlist-meta{display:inline;margin:0}.playlist-section.now-playing .creator-name,.playlist-section.now-playing .storage-info{display:none}#player{position:fixed;top:6px;right:6px;display:flex;flex-direction:column;gap:0px;opacity:0;transition:var(--overlay-transition);pointer-events:auto;z-index:var(--z-index-overlay);width:auto;min-width:240px;max-width:max-content;align-items:stretch}#player:not(.visible) .control-row:not(:hover){pointer-events:none}#player.visible{opacity:var(--overlay-visible-opacity)}#player:hover{opacity:1}.control-row{display:flex;align-items:center;gap:var(--spacing-xs);justify-content:flex-end;padding:0;width:100%;pointer-events:auto;z-index:var(--z-index-controls);margin:1.8px 0}.control-row:first-of-type,#playlist-row{justify-content:flex-start;width:100%;gap:var(--spacing-xs)}#artwork-row{justify-content:flex-start;width:100%;gap:var(--spacing-xs)}.action{width:var(--action-button-width);justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:var(--z-index-controls);background-color:var(--overlay-background);border-radius:var(--overlay-border-radius);height:var(--action-button-height);display:flex;align-items:center;transition:var(--transition-fast);padding:0}.action:hover{background-color:var(--bg-light-transparent-hover)}.action.active:not(#layback):not(#login){background-color:var(--bg-dark-transparent-active)}.action img,.action svg{width:var(--icon-size);height:var(--icon-size);opacity:.85;transition:var(--transition-fast);display:block;pointer-events:none}.action:hover img,.action:hover svg{opacity:1;transform:scale(1.05)}.action.active img,.action.active svg{opacity:1}#next{flex:1;pointer-events:auto!important;z-index:1003!important;margin-right:auto}#layback{position:relative;min-width:var(--action-button-width);transition:var(--transition-fast);padding:0}#layback:hover{background-color:var(--bg-light-transparent-hover)}#layback svg{opacity:.85}#layback:hover svg{opacity:1}#layback svg .clock-hands,#layback svg .play-symbol{transition:opacity var(--transition-fast)}#layback svg .clock-hands{opacity:1}#layback svg .play-symbol{opacity:0}#layback.active svg .clock-hands{opacity:0}#layback.active svg .play-symbol{opacity:1}#layback svg .clock-marks{opacity:.6}#layback .layback-seconds{display:none;font-size:var(--font-size-sm);margin-left:var(--spacing-xs);cursor:pointer;opacity:.85;transition:var(--transition-fast)}#layback.active svg,#layback.active .layback-seconds{color:var(--modal-color-primary);stroke:var(--modal-color-primary);filter:drop-shadow(0 0 3px var(--modal-color-primary));opacity:1}#layback.active .layback-seconds{display:inline}#layback.active{width:auto;padding:0 7px 0 var(--spacing-xs)}#layback .layback-seconds:hover{text-decoration:underline}.iframe-container{position:relative;width:100%;height:100%;overflow:hidden}iframe,#myframe{width:100%;height:100%;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}#myframe::-webkit-scrollbar{display:none;width:0;height:0}#artwork-contain{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#artworkName{color:var(--text-primary);font-size:var(--font-size-sm);opacity:.9;white-space:nowrap;pointer-events:none;user-select:none;cursor:default;text-align:center;padding:0 var(--spacing-xs);display:block;width:100%}#interactions{background-color:var(--overlay-background);color:var(--overlay-text);border-radius:var(--overlay-border-radius);box-shadow:var(--overlay-box-shadow);padding:var(--interaction-padding);position:fixed;bottom:var(--spacing-md);right:var(--spacing-md);font-size:var(--font-size-md);z-index:var(--z-index-toast);opacity:0;transition:var(--overlay-transition);max-width:300px;pointer-events:auto}#interactions:empty{display:none}#interactions.visible{opacity:var(--overlay-visible-opacity)}#interactions:hover{pointer-events:auto}#interactions table{width:100%;border-collapse:collapse}#interactions td{padding:var(--spacing-xs) var(--spacing-xs);opacity:.85;transition:opacity var(--transition-fast)}#interactions:hover td{opacity:1}#interactions td:first-child{text-align:right;font-weight:400;padding-right:var(--spacing-sm)}#interactions td:last-child{text-align:left}input:checked+.slider{background-color:var(--modal-color-primary)}input:focus+.slider{box-shadow:0 0 1px var(--modal-color-primary)}.artwork-edit-mode #player{opacity:0;pointer-events:none;transition:var(--overlay-transition)}.artwork-edit-mode #player.visible,.artwork-edit-mode #interactions.visible{opacity:.4}.artwork-edit-mode #myframe{pointer-events:none}#player.sticky-during-edit,#interactions.sticky-during-edit{opacity:var(--overlay-visible-opacity)!important;pointer-events:auto!important;z-index:10001}.artwork-edit-mode #player.visible,.artwork-edit-mode #interactions.visible{pointer-events:none}.artwork-edit-mode #interactions{opacity:0}#artworkContain{display:flex;justify-content:center;overflow:hidden;position:relative;background-color:transparent}#artworkContain iframe{border:none!important}#artwork-contain>.artwork-content,#artworkContain>.artwork-content{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:none!important;object-fit:contain;max-width:100%;max-height:100%;opacity:0;transition:opacity .15s ease-in-out}#artworkContain.loading>.artwork-content{opacity:0}#artworkContain.loading{background-color:#121212}#artworkContain.loading:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 55%,transparent 100%);background-size:200% 100%;z-index:0;animation:shimmer 2.4s linear infinite;pointer-events:none}#artwork-contain>.artwork-content,#artworkContain>.artwork-content{z-index:1}#artworkContain.loaded>.artwork-content{opacity:1}#artworkContain.error{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-triangle'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-size:48px 48px}#artworkContain.error>.artwork-content{opacity:0}body.css-ready #player.visible{opacity:var(--overlay-visible-opacity)}body.css-ready #player:not(.visible){opacity:0}body.css-ready #interactions.visible{opacity:var(--overlay-visible-opacity)}body.css-ready #interactions:not(.visible){opacity:0}.form-group{margin-bottom:var(--spacing-md);width:100%}.form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--text-primary);font-size:var(--font-size-md)}.form-group input,.modal-input{width:100%;box-sizing:border-box;padding:var(--spacing-sm) var(--spacing-md);background:#0003;border:1px solid var(--border-light);border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:var(--font-size-md)}.form-group input:focus,.modal-input:focus{outline:none;border-color:var(--color-primary)}.form-message{margin:var(--spacing-lg) 0;padding:var(--spacing-sm);border-radius:var(--overlay-border-radius);font-size:var(--font-size-md);text-align:center}.form-fields{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--spacing-lg);width:100%;box-sizing:border-box}.input-group{display:flex;flex-direction:column;gap:4px}.input-group label{font-size:var(--font-size-sm);color:var(--text-secondary)}.input-group input{width:100%;box-sizing:border-box;padding:var(--spacing-sm) var(--spacing-md);background:#0003;border:1px solid var(--border-light);border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:var(--font-size-sm);line-height:1.4;font-family:var(--font-family);max-width:100%}.input-group input:focus{outline:none;border-color:var(--color-primary)}.input-group input::placeholder{color:var(--text-placeholder)}.input-help-text{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:var(--spacing-xs);margin-bottom:var(--spacing-sm);line-height:1.4}.color-input-group{display:flex;gap:var(--spacing-sm);align-items:center}.color-input-group input[type=color]{width:40px;height:32px;padding:0;border:none;border-radius:var(--overlay-border-radius);background:none;cursor:pointer}.color-input-group input[type=text]{flex:1;width:auto}.zoom-input-group{display:flex;gap:var(--spacing-sm);align-items:center}.zoom-input-group input[type=number]{width:70px;flex-shrink:0}.zoom-input-group .unit{color:var(--text-muted);font-size:var(--font-size-sm)}.zoom-slider{margin-top:var(--spacing-sm)}.zoom-slider input[type=range]{width:100%;height:4px;-webkit-appearance:none;background:var(--bg-light-transparent);border-radius:2px;outline:none}.zoom-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:var(--transition-fast)}.zoom-slider input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1)}.zoom-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:var(--transition-fast)}.zoom-slider input[type=range]::-moz-range-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1)}.toggle-row{display:flex;align-items:center;margin-bottom:var(--spacing-md)}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:var(--transition-standard)}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:var(--color-white);transition:var(--transition-standard)}input:checked+.slider{background-color:var(--color-primary)}input:focus+.slider{box-shadow:0 0 1px var(--color-primary)}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.modal input,.modal select,.modal textarea{box-sizing:border-box!important;max-width:100%!important}.modal form{width:100%}.modal form button[type=submit]{width:100%;padding:8px 12px;background:#4dd4bf;border:none;border-radius:4px;color:#fff;font-size:.95em;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;margin-top:16px}.modal form button[type=submit]:hover{background:#3fc1ad}#artworkInteractions{width:100%;min-height:100px;padding:8px 12px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-family:monospace;font-size:13px;line-height:1.4;resize:vertical}#artworkInteractions.error{border-color:#ff6b6b}.interactions-help{margin-top:8px;font-size:12px;color:#888}.interactions-help pre{margin:4px 0 0;padding:8px;background:#0003;border-radius:4px;font-family:monospace;white-space:pre-wrap;word-break:break-all}.confirmation-message{padding:15px 0;text-align:center}.confirmation-message p{margin:10px 0;line-height:1.5}.confirmation-message .button-row{margin-top:20px;display:flex;justify-content:center;gap:10px}.order-radio-group{display:flex;gap:30px;margin-top:12px}.radio-option{display:flex;align-items:center;cursor:pointer;font-size:14px;color:#ffffffb3;transition:color .2s;line-height:1}.radio-option:hover{color:#ffffffe6}.radio-option input{appearance:none;width:16px;height:16px;border:1px solid rgba(255,255,255,.3);border-radius:50%;margin-right:8px;position:relative;transition:all .2s ease;background:transparent;flex-shrink:0}.radio-option span{display:inline-block;transform:translateY(-4px)}.radio-option input:checked{border-color:#4dd4bf;background:transparent}.radio-option input:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#4dd4bf}.radio-option input:focus{outline:none;box-shadow:0 0 0 2px #4dd4bf4d}.radio-option:has(input:checked){color:#4dd4bf}.primary-button{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);border:none;border-radius:var(--overlay-border-radius);color:var(--text-primary);font-size:.95em;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.primary-button:hover{background:var(--color-primary-hover)}.secondary-button{background-color:var(--bg-light-transparent);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--overlay-border-radius);cursor:pointer;transition:var(--transition-fast)}.secondary-button:hover{background-color:var(--bg-light-transparent-hover)}.danger-button{background-color:#ff6b6b33;color:var(--color-danger);border:1px solid var(--border-danger);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--overlay-border-radius);cursor:pointer;transition:var(--transition-fast)}.danger-button:hover{background-color:#ff6b6b4d;border-color:var(--border-danger-hover)}.danger-button:disabled{opacity:.5;cursor:not-allowed}.button-row{display:flex;gap:var(--spacing-sm);justify-content:center;margin:var(--spacing-sm) 0;align-items:center}.button-separator{color:var(--text-muted);font-size:var(--font-size-md);margin:0 var(--spacing-xs)}.login-button,.add-to-playlist,.modal form button[type=submit],#addArtwork .save{@extend .primary-button;}.full-width-button{width:100%;box-sizing:border-box}.validation-error{border-color:var(--color-error)!important;box-shadow:0 0 0 1px var(--color-error)!important;background-color:#ff6b6b0d!important}.validation-error:focus{box-shadow:0 0 0 2px #ff6b6b4d!important;outline:none}.shake-animation{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.required-indicator,label span[style*="color:#ff6b6b"]{color:var(--color-danger)!important;display:inline-block;margin-left:var(--spacing-xs)}.form-error-message{color:var(--color-danger);font-size:var(--font-size-sm);margin-top:var(--spacing-xs);padding:var(--spacing-xs) 0;display:block}.error-message{background-color:var(--bg-dark-transparent);color:var(--color-danger);padding:0 var(--spacing-md);border-radius:var(--overlay-border-radius);font-size:var(--font-size-sm);height:var(--action-button-height);display:flex;align-items:center;justify-content:center;opacity:1;transition:var(--overlay-transition);line-height:var(--action-button-height);flex:1;text-align:center}#copySuccess{background-color:var(--bg-dark-transparent);color:var(--text-primary);padding:0 var(--spacing-md);border-radius:var(--overlay-border-radius);font-size:var(--font-size-sm);height:var(--action-button-height);display:flex;align-items:center;justify-content:center;opacity:1;transition:var(--overlay-transition);line-height:var(--action-button-height);flex:1;text-align:center}#artworkUrl.typing{border-color:var(--color-info);transition:border-color .3s}#artworkUrl.validating{background-size:200% 100%;background-image:linear-gradient(to right,#ffffff1a,#4285f433,#ffffff1a);animation:shimmer 1.5s infinite;border-color:var(--color-info);transition:border-color .3s}#artworkUrl.valid{border-color:var(--color-primary);box-shadow:0 0 0 1px #4dd4bf80;transition:all .3s}#artworkUrl.invalid{border-color:var(--color-danger);box-shadow:0 0 0 1px #ff6b6b80;background-color:#ff6b6b0d;animation:shake .5s cubic-bezier(.36,.07,.19,.97) both;transition:all .3s}#artworkUrl:focus{border-color:var(--color-primary)}#artworkUrl.validation-error:focus{border-color:var(--color-danger)!important}.preview-loading{display:flex;align-items:center;justify-content:center;padding:12px;margin:10px 0;background:#0003;border-radius:4px;color:#fff;font-size:14px}.preview-loading.error{background:#ff00001a;border-left:3px solid #ff6b6b}.preview-loading.success{background:#00ff801a;border-left:3px solid #4dd4bf}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes shimmer{0%{background-position:0% 0}to{background-position:-200% 0}}.modal-tabs{display:flex;gap:0;margin:0 0 20px;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid var(--border-light);background:#ffffff0a;border-radius:6px 6px 0 0;overflow:hidden;flex-wrap:wrap;justify-content:center}.modal-tab{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-muted);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;border-right:1px solid var(--border-light)}.modal-tab:last-child{border-right:none}.modal-tab:hover{background:#ffffff14;color:var(--text-secondary)}.modal-tab.active{background:#4dd4bf1a;color:var(--text-primary);position:relative}.modal-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--color-primary)}.modal-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.tab-count{font-size:12px;padding:2px 6px;background:#ffffff1a;border-radius:10px;min-width:20px;text-align:center;font-weight:400}.modal-tab.active .tab-count{background:#4dd4bf33;color:var(--color-primary)}.modal-tab-contents{position:relative;min-height:200px}.modal-tab-content{display:none;animation:fadeIn .08s ease-in-out}.modal-tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.modal-tab-content{animation:none!important}}@media (max-width: 600px){.modal-tabs{flex-direction:column;border-radius:0}.modal-tab{border-right:none;border-bottom:1px solid var(--border-light)}.modal-tab:last-child{border-bottom:none}.modal-tab.active:after{display:none}.modal-tab.active{border-left:3px solid var(--color-primary);padding-left:13px}}body{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:0;background-color:var(--bg-dark);font-family:var(--font-family);overflow:hidden}.overlay{background-color:var(--overlay-background);color:var(--overlay-text);border-radius:var(--overlay-border-radius);box-shadow:var(--overlay-box-shadow);pointer-events:auto;z-index:var(--z-index-overlay);transition:var(--overlay-transition)}#artwork{flex:1;justify-content:center;min-width:100px;width:auto;padding:0 var(--spacing-sm);margin-right:auto}.action,#playlistSelector,#artwork{background-color:var(--bg-dark-transparent);border-radius:var(--overlay-border-radius);height:var(--action-button-height);display:flex;align-items:center;transition:var(--transition-fast);pointer-events:auto;z-index:var(--z-index-controls);padding:0}#playlistSelector{flex:1 1 auto;min-width:100px;width:auto;cursor:pointer;user-select:none;transition:var(--transition-fast);padding:0 var(--spacing-sm);justify-content:center;margin-right:auto}#playlistSelector:hover{box-shadow:0 0 8px #4dd4bf4d}#playlistSelector .edit-indicator{width:var(--icon-size);height:var(--icon-size);opacity:.5;transition:var(--transition-fast);margin-left:var(--spacing-xs)}#playlistSelector:hover .edit-indicator{opacity:.85}#currentPlaylistName{font-size:var(--font-size-sm);color:var(--text-primary);overflow:visible;white-space:nowrap;flex:1;text-align:center;padding:0 var(--spacing-xs);width:100%;display:block}::-webkit-scrollbar{width:var(--spacing-sm);height:var(--spacing-sm)}::-webkit-scrollbar-track{background:#ffffff0d;border-radius:var(--spacing-xs)}::-webkit-scrollbar-thumb{background:#fff3;border-radius:var(--spacing-xs);transition:background .15s ease}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) rgba(255,255,255,.05)}.playlist-menu-modal .visibility-indicator,.playlist-editor-modal .visibility-indicator,.playlist-item .visibility-indicator,.modal-header .visibility-indicator,.playlist-section .visibility-indicator{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;vertical-align:middle}.visibility-indicator.public,.playlist-item .visibility-indicator.public,.playlist-section .visibility-indicator.public,.playlist-name-row .visibility-indicator.public{color:var(--accent)!important}.visibility-indicator.private{color:var(--text-secondary)}.visibility-svg{display:inline-block;vertical-align:middle}#extension-prompt{position:fixed;top:var(--spacing-md);left:var(--spacing-md);z-index:var(--z-index-base);padding:var(--spacing-sm);background-color:var(--overlay-background);border-radius:var(--overlay-border-radius);box-shadow:var(--overlay-box-shadow);font-family:var(--font-family);font-size:var(--font-size-md);color:var(--text-primary);max-width:300px;animation:fadeIn .5s ease-in-out;backdrop-filter:blur(2px);border:1px solid var(--border-light)}.prompt-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}#extension-prompt a{color:var(--text-primary);text-decoration:none;flex:1;transition:var(--transition-fast)}#extension-prompt a:hover{color:var(--color-info);text-decoration:underline}#close-prompt{background:transparent;border:none;color:var(--text-muted);font-size:var(--font-size-lg);cursor:pointer;padding:0;width:var(--spacing-xl);height:var(--spacing-xl);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition-fast)}#close-prompt:hover{color:var(--text-primary);background:var(--bg-light-transparent-hover)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){#extension-prompt{left:var(--spacing-sm);right:var(--spacing-sm);max-width:calc(100% - calc(var(--spacing-sm) * 2))}}