:root{--ink: #21252b;--ink-soft: #565b63;--paper: #eae5d8;--paper-raised: #f8f5ec;--line: #d3ccb8;--accent: #2b6f76;--accent-soft: #dcebe9;--warm: #c8862c;--berry: #9c3d54;--danger: #ad4a2f;--muted: #948d7c;--font-display: "Fraunces", Georgia, serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;--radius: 4px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5}input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{max-width:1180px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.app-header{border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:2rem}.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .35rem}.app-header h1{font-family:var(--font-display);font-weight:600;font-size:2.4rem;margin:0;letter-spacing:-.01em}.app-main{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}@media (max-width: 860px){.app-main{grid-template-columns:1fr}}.form-column{position:sticky;top:1.5rem}.album-form{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 1px 2px #21252b0d}.form-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:0 0 .25rem;padding-bottom:.6rem;border-bottom:1px dashed var(--line)}.album-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.album-form input,.album-form select,.album-form textarea{font-weight:400;text-transform:none;letter-spacing:normal;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:.5rem .6rem}.album-form textarea{resize:vertical}.hint{font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--muted)}.button-group{display:flex;gap:.5rem;margin-top:.3rem}.submit-btn{flex:1;background:var(--ink);color:var(--paper-raised);border:none;border-radius:var(--radius);padding:.65rem 1rem;font-weight:600;transition:background .15s ease}.submit-btn:hover:not(:disabled){background:var(--accent)}.cancel-btn{background:transparent;color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);padding:.65rem 1rem;font-weight:600;transition:all .15s ease}.cancel-btn:hover:not(:disabled){background:var(--paper);color:var(--ink);border-color:var(--ink-soft)}.error-text{color:var(--danger);font-size:.8rem;margin:0}.success-text{color:var(--accent);font-size:.8rem;margin:0}.search-container{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}.search-bar{position:relative}.search-bar input{width:100%;border:1px solid var(--line);background:var(--paper-raised);border-radius:var(--radius);padding:.65rem 2.4rem .65rem .9rem;font-size:.9rem;box-shadow:0 1px 2px #21252b0a}.search-bar input:focus{border-color:var(--accent)}.clear-btn,.tips-toggle-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.1rem;color:var(--muted);line-height:1;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}.tips-toggle-btn{font-family:var(--font-mono);font-size:.85rem;font-weight:600;width:1.4rem;height:1.4rem;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}.tips-toggle-btn:hover,.tips-toggle-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.clear-btn:hover{color:var(--ink)}.search-chips-row{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .5rem;font-size:.75rem}.chips-label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.quick-filter-chip{font-family:var(--font-mono);font-size:.72rem;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:.15rem .45rem;color:var(--ink-soft);transition:all .15s ease}.quick-filter-chip:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.tips-link{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--accent);background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}.tips-link:hover{color:var(--ink)}.active-filters-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .6rem;background:var(--paper-raised);border:1px dashed var(--line);border-radius:var(--radius);padding:.45rem .75rem;font-size:.78rem}.active-filters-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.active-filters-list{display:flex;flex-wrap:wrap;gap:.35rem}.active-filter-badge{display:inline-flex;align-items:center;gap:.3rem;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(43,111,118,.25);border-radius:var(--radius);padding:.15rem .45rem;font-size:.75rem}.active-filter-badge.text-terms-badge{background:var(--paper);color:var(--ink);border-color:var(--line)}.badge-field{font-family:var(--font-mono);font-weight:600;font-size:.7rem}.badge-value{font-weight:500}.remove-badge-btn{background:none;border:none;font-size:.95rem;line-height:1;color:var(--accent);padding:0 .1rem;cursor:pointer}.remove-badge-btn:hover{color:var(--danger)}.search-tips-box{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;font-size:.82rem;color:var(--ink);display:flex;flex-direction:column;gap:.5rem;box-shadow:0 2px 6px #0000000d}.search-tips-box h4{font-family:var(--font-display);font-size:.95rem;margin:0;color:var(--ink)}.search-tips-box p{margin:0;color:var(--ink-soft)}.search-tips-box ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.25rem}.search-tips-box code,.example-block code{font-family:var(--font-mono);font-size:.75rem;background:var(--paper);padding:.1rem .35rem;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink)}.example-block{margin-top:.2rem;padding-top:.4rem;border-top:1px dashed var(--line);display:flex;align-items:center;gap:.5rem;font-size:.78rem}.table-panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px #21252b0d}.table-scroll{overflow-x:auto}.album-table{width:100%;border-collapse:collapse;font-size:.85rem}.album-table thead th{text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);padding:.6rem .75rem;white-space:nowrap}.album-table tbody td{padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}.album-table tbody tr:hover{background:#2b6f760d}.album-table tbody tr.editing-row{background:var(--accent-soft)}.actions-cell{white-space:nowrap}.edit-btn{background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.25rem .55rem;font-size:.75rem;font-weight:600;color:var(--accent);transition:all .15s ease}.edit-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.mono{font-family:var(--font-mono);font-size:.82rem;white-space:nowrap}.album-title{font-family:var(--font-display);font-weight:600}.tags-cell,.notes-cell{color:var(--ink-soft);max-width:220px}.tag-pills{display:flex;flex-wrap:wrap;gap:.3rem}.tag-pill{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.02em;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.15rem .55rem;white-space:nowrap;margin-bottom:.25rem}.tag-pill--headphones{background:var(--warm-soft, #f3e3c8);color:var(--warm)}.tag-pill--chilling{background:linear-gradient(135deg,#ffb347,#ff6f61,#c2185b);color:#fff}.tag-pill--nighttime{background:radial-gradient(circle at 22% 35%,#ffffffd9,#fff0 1.2%),radial-gradient(circle at 68% 65%,#ffffffb3,#fff0 1.2%),radial-gradient(circle at 82% 25%,#fffc,#fff0 1%),radial-gradient(circle at 40% 80%,#fff9,#fff0 1%),linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e4dcfa}.tag-pill--driving{background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.18) 1px,transparent 1px,transparent 5px),linear-gradient(135deg,#120024,#6a00ff 55%,#ff2fb0);color:#4dfcf7;text-shadow:0 0 4px rgba(77,252,247,.7)}.tag-pill--exercise{background:linear-gradient(135deg,#050505,#3d0000,#8b0000);color:#f5f5f5;font-weight:700;letter-spacing:.09em;text-shadow:0 0 5px rgba(255,0,0,.65)}.tag-pill--working{background:repeating-linear-gradient(180deg,rgba(0,255,140,.08) 0px,rgba(0,255,140,.08) 1px,transparent 1px,transparent 3px),linear-gradient(135deg,#000,#001a00);color:#39ff14;text-shadow:0 0 4px rgba(57,255,20,.8)}.tag-pill--company{background:linear-gradient(135deg,#d9f2e6,#9fd8b8,#6fb98f);color:#1f4d36}.tag-pill--walking{background:repeating-linear-gradient(135deg,rgba(255,255,255,.25) 0px,rgba(255,255,255,.25) 2px,transparent 2px,transparent 10px),linear-gradient(135deg,#e8c39e,#c98a4b,#7c9473);color:#2f2410}.tag-pill--background{background:linear-gradient(135deg,#eceae4,#d8d5cb);color:#9a9484;border:1px dashed #c7c2b3}.muted{color:var(--muted)}.empty-row{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-style:italic}.rating-icon{display:inline-block;font-size:1.05rem;line-height:1}.pager{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-top:1px solid var(--line)}.pager button{background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .75rem;font-size:.8rem}.pager button:hover:not(:disabled){border-color:var(--ink)}.pager-status{font-size:.75rem;color:var(--muted)}.mobile-only{display:none!important}.desktop-only{display:block}@media (max-width: 768px){.mobile-only{display:block!important}.desktop-only{display:none!important}.app-shell{padding:1.25rem .85rem 3rem}.app-header h1{font-size:1.8rem}.app-main{grid-template-columns:1fr;gap:1.25rem}.form-column{position:static}.album-form input,.album-form select,.album-form textarea,.search-bar input{font-size:16px;min-height:44px;padding:.6rem .75rem}.submit-btn,.cancel-btn{min-height:44px;font-size:.95rem}.album-form-wrapper .album-form{display:none}.album-form-wrapper.is-mobile-open .album-form{display:flex;margin-top:.75rem}.mobile-form-toggle{width:100%;background:var(--ink);color:var(--paper-raised);border:none;border-radius:var(--radius);padding:.75rem 1rem;font-weight:600;font-size:.95rem;text-align:center;box-shadow:0 1px 2px #21252b1a}.mobile-cards{display:flex;flex-direction:column;gap:.85rem;padding:.75rem}.album-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 1px 3px #21252b0a;margin-bottom:.5rem}.album-card.editing-row{border-color:var(--accent);background:var(--accent-soft)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}.card-artist{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-soft)}.card-album-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:.1rem 0 0;line-height:1.25}.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.75rem}.meta-pill{font-family:var(--font-mono);background:var(--paper);color:var(--ink);padding:.15rem .45rem;border-radius:var(--radius)}.genre-pill{background:var(--accent-soft);color:var(--accent)}.meta-date{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;margin-left:auto}.card-tags{display:flex;flex-wrap:wrap;gap:.3rem}.card-notes{font-size:.85rem;color:var(--ink-soft);margin:0;background:var(--paper-raised);padding:.5rem .65rem;border-radius:var(--radius);border-left:2px solid var(--line)}.card-actions{margin-top:.25rem}.edit-btn.full-width-mobile{width:100%;min-height:40px;font-size:.85rem;text-align:center}.pager{flex-direction:column;gap:.6rem;padding:.85rem}.pager button{width:100%;min-height:40px;font-size:.85rem}}.header-top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.admin-toggle-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:600;border-radius:var(--radius);padding:.45rem .8rem;transition:all .15s ease;white-space:nowrap}.admin-toggle-btn.locked{background:var(--paper-raised);border:1px solid var(--line);color:var(--accent)}.admin-toggle-btn.locked:hover{background:var(--accent-soft);border-color:var(--accent)}.admin-toggle-btn.unlocked{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent)}.admin-toggle-btn.unlocked:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.readonly-banner{background:var(--paper-raised);border:1px dashed var(--line);border-radius:var(--radius);padding:1.5rem 1.2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;box-shadow:0 1px 2px #21252b0d}.readonly-banner .lock-icon{font-size:2rem;line-height:1}.readonly-banner h3{font-family:var(--font-display);font-size:1.1rem;margin:0;color:var(--ink)}.readonly-banner p{font-size:.82rem;color:var(--ink-soft);margin:0;max-width:240px;line-height:1.4}.unlock-banner-btn{margin-top:.4rem;background:var(--ink);color:var(--paper-raised);border:none;border-radius:var(--radius);padding:.55rem .9rem;font-size:.8rem;font-weight:600;transition:background .15s ease}.unlock-banner-btn:hover{background:var(--accent)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#21252b8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:400px;padding:1.5rem;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;gap:1rem;animation:modalFadeIn .15s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-family:var(--font-display);font-size:1.2rem;margin:0}.modal-close-btn{background:none;border:none;font-size:1.3rem;color:var(--muted);line-height:1;padding:.2rem}.modal-close-btn:hover{color:var(--ink)}.modal-form{display:flex;flex-direction:column;gap:.9rem}.modal-desc{font-size:.85rem;color:var(--ink-soft);margin:0}.modal-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}.modal-form input{font-size:16px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:.5rem .75rem}.modal-actions{margin-top:.5rem}