: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)}.submit-btn{margin-top:.3rem;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)}.error-text{color:var(--danger);font-size:.8rem;margin:0}.success-text{color:var(--accent);font-size:.8rem;margin:0}.search-bar{position:relative;margin-bottom:1rem}.search-bar input{width:100%;border:1px solid var(--line);background:var(--paper-raised);border-radius:var(--radius);padding:.65rem 2.2rem .65rem .9rem}.clear-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}.clear-btn:hover{color:var(--ink)}.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}.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)}
