:root{--color-bg: #1a1a2e;--color-surface: #16213e;--color-surface-hover: #1c2a4a;--color-primary: #e94560;--color-primary-hover: #d63851;--color-accent: #0f3460;--color-text: #eaeaea;--color-text-muted: #a0a0b0;--color-text-dim: #6b6b80;--color-border: #2a2a4a;--color-badge-unopened: #f59e0b;--color-badge-unlistened: #3b82f6;--color-success: #10b981;--color-danger: #ef4444;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius: 8px;--radius-sm: 4px;--shadow: 0 2px 8px rgba(0, 0, 0, .3);--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.5;min-height:100vh}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.app-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.app-header h1{font-size:1.25rem;font-weight:600;color:var(--color-text)}.app-header h1 span{color:var(--color-primary)}.app-main{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:background var(--transition);text-decoration:none;line-height:1.4}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);text-decoration:none}.btn-secondary{background:var(--color-accent);color:var(--color-text)}.btn-secondary:hover{background:var(--color-surface-hover)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}.search-bar{width:100%;margin-bottom:var(--spacing-md)}.search-bar input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-size:1rem;outline:none;transition:border-color var(--transition)}.search-bar input:focus{border-color:var(--color-primary)}.search-bar input::placeholder{color:var(--color-text-dim)}.filter-panel{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);align-items:center}.filter-toggle{padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.8rem;cursor:pointer;transition:all var(--transition)}.filter-toggle:hover{border-color:var(--color-text-muted)}.filter-toggle.active{background:var(--color-accent);border-color:var(--color-primary);color:var(--color-text)}.filter-select{padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.8rem;cursor:pointer;outline:none}.filter-select:focus{border-color:var(--color-primary)}.stats-bar{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md);font-size:.85rem;color:var(--color-text-muted)}.stats-bar strong{color:var(--color-text)}.record-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}@media(min-width:640px){.record-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.record-grid{grid-template-columns:repeat(3,1fr)}}.record-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-md);cursor:pointer;transition:all var(--transition);text-decoration:none;color:inherit;display:block}.record-card:hover{border-color:var(--color-primary);background:var(--color-surface-hover);text-decoration:none}.record-card .artist{font-weight:600;font-size:.95rem;color:var(--color-text);margin-bottom:var(--spacing-xs)}.record-card .title{color:var(--color-text-muted);font-size:.875rem;font-style:italic}.record-card .meta{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.badge-unopened{background:var(--color-badge-unopened);color:#000}.badge-unlistened{background:var(--color-badge-unlistened);color:#fff}.badge-pull{background:var(--color-accent);color:var(--color-text)}.badge-notes{background:var(--color-surface-hover);border:1px solid var(--color-border);color:var(--color-text-muted)}.record-detail{max-width:700px;margin:0 auto}.record-detail h2{font-size:1.5rem;margin-bottom:var(--spacing-xs)}.record-detail .subtitle{color:var(--color-text-muted);font-size:1.1rem;font-style:italic;margin-bottom:var(--spacing-lg)}.detail-fields{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-lg)}.detail-fields dt{color:var(--color-text-dim);font-size:.85rem;text-align:right}.detail-fields dd{color:var(--color-text);font-size:.9rem}.empty-value{color:var(--color-text-dim)}.detail-actions{display:flex;gap:var(--spacing-sm)}.record-form{max-width:600px;margin:0 auto}.record-form h2{margin-bottom:var(--spacing-lg)}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-size:.85rem;color:var(--color-text-muted)}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color var(--transition)}.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary)}.form-group textarea{min-height:80px;resize:vertical}.autocomplete-wrapper{position:relative}.autocomplete-suggestions{position:absolute;top:100%;left:0;right:0;margin:0;padding:0;list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:200px;overflow-y:auto;z-index:10}.autocomplete-suggestions li{padding:var(--spacing-sm);cursor:pointer;font-size:.9rem;color:var(--color-text)}.autocomplete-suggestions li:hover,.autocomplete-suggestions li.highlighted{background:var(--color-surface-hover)}.form-checkbox{display:flex;align-items:center;gap:var(--spacing-sm)}.form-checkbox input[type=checkbox]{width:auto;accent-color:var(--color-primary)}.form-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding:var(--spacing-md)}.pagination span{color:var(--color-text-muted);font-size:.85rem}.loading,.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted)}.error-message{background:#ef44441a;border:1px solid var(--color-danger);border-radius:var(--radius-sm);padding:var(--spacing-md);color:var(--color-danger);margin-bottom:var(--spacing-md)}.back-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);color:var(--color-text-muted);font-size:.85rem;margin-bottom:var(--spacing-md)}.back-link:hover{color:var(--color-text)}.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-md)}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-xl);width:100%;max-width:400px}.login-card h1{font-size:1.5rem;text-align:center;margin-bottom:var(--spacing-lg)}.login-card h1 span{color:var(--color-primary)}.login-btn{width:100%;justify-content:center;padding:var(--spacing-sm) var(--spacing-md)}.login-divider{display:flex;align-items:center;gap:var(--spacing-md);margin:var(--spacing-lg) 0;color:var(--color-text-dim);font-size:.85rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.header-user{color:var(--color-text-muted);font-size:.8rem}.btn-logout{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition)}.btn-logout:hover{border-color:var(--color-text-muted);color:var(--color-text)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:var(--spacing-md)}.modal-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-xl);width:100%;max-width:400px}.modal-card h2{margin-bottom:var(--spacing-lg)}.success-message{color:var(--color-success);margin-bottom:var(--spacing-lg)}.photo-gallery{margin-bottom:var(--spacing-lg)}.photo-gallery-title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text-muted)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.photo-thumb-wrapper{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden}.photo-thumb{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity var(--transition)}.photo-thumb:hover{opacity:.85}.photo-delete-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none;background:#000000b3;color:#fff;font-size:16px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}.photo-thumb-wrapper:hover .photo-delete-btn{display:flex}.photo-upload-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:var(--spacing-lg);text-align:center;color:var(--color-text-dim);cursor:pointer;transition:all var(--transition);font-size:.85rem}.photo-upload-zone:hover,.photo-upload-zone.drag-over{border-color:var(--color-primary);color:var(--color-text-muted);background:#e945600d}.lightbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:300}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.lightbox-image{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-sm)}.lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff26;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:301}.lightbox-close:hover{background:#ffffff4d}.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:#ffffff26;color:#fff;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:301}.lightbox-nav:hover{background:#ffffff4d}.lightbox-prev{left:16px}.lightbox-next{right:16px}.lightbox-counter{position:fixed;bottom:16px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:.85rem;z-index:301}.queue-list{max-width:700px;margin:0 auto}.queue-list h2{margin-bottom:var(--spacing-md)}.queue-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.queue-list-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);transition:border-color var(--transition)}.queue-list-item:hover{border-color:var(--color-primary)}.queue-list-item a{color:var(--color-text);font-weight:500;flex:1}.queue-list-item a:hover{text-decoration:none;color:var(--color-primary)}.queue-item-count{color:var(--color-text-dim);font-size:.8rem;margin:0 var(--spacing-md)}.queue-detail{max-width:700px;margin:0 auto}.queue-detail-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.queue-detail-header h2{margin:0}.queue-name-edit{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.queue-name-edit input{font-size:1.5rem;font-weight:700;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);padding:var(--spacing-xs) var(--spacing-sm);outline:none;flex:1}.queue-name-edit input:focus{border-color:var(--color-primary)}.btn-icon{background:none;border:none;color:var(--color-text-dim);cursor:pointer;font-size:.85rem;padding:var(--spacing-xs);transition:color var(--transition)}.btn-icon:hover{color:var(--color-text)}.queue-item-row{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-xs);transition:all var(--transition)}.queue-item-row.dragging{opacity:.4}.queue-item-row.drag-over{border-color:var(--color-primary);box-shadow:0 -2px 0 0 var(--color-primary)}.drag-handle{cursor:grab;color:var(--color-text-dim);-webkit-user-select:none;user-select:none;padding:0 var(--spacing-xs);font-size:1rem;line-height:1}.drag-handle:active{cursor:grabbing}.queue-item-position{color:var(--color-text-dim);font-size:.8rem;min-width:1.5rem;text-align:right}.queue-item-info{flex:1;min-width:0}.queue-item-info a{color:var(--color-text);display:block}.queue-item-info a:hover{text-decoration:none;color:var(--color-primary)}.queue-item-artist{font-weight:600;font-size:.9rem}.queue-item-title{color:var(--color-text-muted);font-size:.8rem;font-style:italic}.add-to-queue-wrapper{position:relative;display:inline-block}.queue-dropdown{position:absolute;bottom:100%;left:0;margin-bottom:var(--spacing-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:240px;max-height:300px;overflow-y:auto;z-index:150}.queue-dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:.85rem;color:var(--color-text);border:none;background:none;width:100%;text-align:left;transition:background var(--transition)}.queue-dropdown-item:hover{background:var(--color-surface-hover)}.queue-dropdown-item.disabled{color:var(--color-text-dim);cursor:default}.queue-dropdown-item.disabled:hover{background:none}.queue-dropdown-item.last-used{border-left:2px solid var(--color-primary)}.queue-dropdown-check{color:var(--color-success);font-size:.8rem}.queue-dropdown-separator{height:1px;background:var(--color-border);margin:var(--spacing-xs) 0}.queue-dropdown-new{padding:var(--spacing-sm) var(--spacing-md)}.queue-dropdown-new input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.85rem;outline:none}.queue-dropdown-new input:focus{border-color:var(--color-primary)}.record-queues{margin-bottom:var(--spacing-lg)}.record-queues-title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text-muted)}.queue-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.badge-queue{background:var(--color-accent);color:var(--color-text);cursor:pointer;text-decoration:none}.badge-queue:hover{text-decoration:none;background:var(--color-surface-hover)}.post-now-playing{max-width:700px;margin:0 auto}.post-now-playing h2{margin-bottom:var(--spacing-lg)}.post-now-playing .form-group textarea{min-height:80px}.post-now-playing .form-group textarea.ghost-body{min-height:200px}.wysiwyg-editor{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}.wysiwyg-editor.disabled{opacity:.6;pointer-events:none}.wysiwyg-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg);border-bottom:1px solid var(--color-border);align-items:center}.wysiwyg-toolbar button{background:transparent;border:1px solid transparent;color:var(--color-text-muted);padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;line-height:1;transition:all var(--transition)}.wysiwyg-toolbar button:hover{background:var(--color-surface-hover);color:var(--color-text)}.wysiwyg-toolbar button.active{background:var(--color-accent);color:var(--color-text);border-color:var(--color-primary)}.toolbar-divider{width:1px;height:20px;background:var(--color-border);margin:0 4px}.wysiwyg-editor .tiptap{padding:var(--spacing-md);min-height:200px;color:var(--color-text);outline:none}.wysiwyg-editor .tiptap p{margin:0 0 .5em}.wysiwyg-editor .tiptap h3{margin:.5em 0 .3em;color:var(--color-text)}.wysiwyg-editor .tiptap ul,.wysiwyg-editor .tiptap ol{padding-left:1.5em;margin:.3em 0}.wysiwyg-editor .tiptap blockquote{border-left:3px solid var(--color-primary);padding-left:var(--spacing-md);margin:.5em 0;color:var(--color-text-muted)}.wysiwyg-editor .tiptap a{color:var(--color-primary);text-decoration:underline}.photo-selector{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.photo-selector-thumb{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;border:2px solid transparent;transition:border-color var(--transition)}.photo-selector-thumb.selected{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.photo-selector-thumb:hover{border-color:var(--color-text-muted)}.photo-selector-item{position:relative;display:inline-block}.photo-selector-item.excluded .photo-selector-thumb{opacity:.3;border-color:transparent;box-shadow:none}.exclude-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:#000000b3;color:var(--color-text);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.exclude-btn:hover{background:var(--color-danger)}.char-count-display{margin-bottom:var(--spacing-md)}.char-count{font-size:.85rem;color:var(--color-text-muted)}.char-count.over-limit{color:var(--color-danger);font-weight:700}.ghost-link-field input{background:var(--color-bg)}.post-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.success-message{color:var(--color-success);font-size:.9rem;margin-bottom:var(--spacing-sm)}