*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09101c;--surface:#0f1929;--surface2:#162035;--surface3:#1c2840;
  --border:#243050;--border2:#2d3e62;
  --text:#ccd8f0;--text2:#6888b0;--text3:#3a5580;
  --amber:#4faef5;--amber-bg:rgba(79,174,245,0.10);--amber-border:rgba(79,174,245,0.3);
  --green:#3a8a5a;--green-bg:rgba(58,138,90,0.12);
  --blue:#3a6ea8;--blue-bg:rgba(58,110,168,0.12);--blue-border:rgba(58,110,168,0.35);
  --red:#a83a3a;--red-bg:rgba(168,58,58,0.10);--red-border:rgba(168,58,58,0.3);
  --gaou:#7a9e5a;--gaou-bg:rgba(122,158,90,0.12);--gaou-border:rgba(122,158,90,0.35);
  --r:10px;--rl:14px;
  --fd:"Playfair Display",Georgia,serif;--fb:"DM Sans",system-ui,sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:15px;line-height:1.5;min-height:100vh}
.page{max-width:1850px;margin:0 auto;padding:2rem 1.5rem}

/* Header */
.header{margin-bottom:2.5rem;border-bottom:1px solid var(--border);padding-bottom:2rem}
.title-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.vinyl-spin{width:42px;height:42px;animation:spin 4s linear infinite;opacity:.85;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font-family:var(--fb);font-size:28px;font-weight:500;letter-spacing:-.02em}
h1 span{color:var(--amber)}
.subtitle{font-size:13px;color:var(--text3);margin-bottom:1.5rem;letter-spacing:.03em;text-transform:uppercase}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;min-width:110px}
.stat-n{font-family:var(--fb);font-size:22px;color:var(--amber);line-height:1}
.stat-l{font-size:11px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

/* Controls */
.controls{display:flex;flex-direction:column;gap:12px;margin-bottom:1.5rem}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.search-wrap{flex:1;min-width:180px;position:relative}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.search-input{width:100%;height:40px;padding:0 12px 0 38px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:14px;font-family:var(--fb);outline:none;transition:border-color .2s}
.search-input::placeholder{color:var(--text3)}
.search-input:focus{border-color:var(--amber-border)}
.btn{height:40px;padding:0 16px;border-radius:var(--r);font-size:13px;font-weight:500;font-family:var(--fb);cursor:pointer;white-space:nowrap;transition:all .2s;border:1px solid;display:inline-flex;align-items:center;gap:6px}
.btn-amber{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.btn-amber:hover{background:rgba(212,135,58,.18);border-color:var(--amber)}
.btn-blue{background:var(--blue-bg);border-color:var(--blue-border);color:#6fa3d8}
.btn-blue:hover{background:rgba(58,110,168,.2);border-color:var(--blue)}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;flex-shrink:0}
.view-btn{height:40px;padding:0 14px;background:transparent;border:none;color:var(--text2);font-size:13px;font-family:var(--fb);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s}
.view-btn:first-child{border-right:1px solid var(--border)}
.view-btn.active{background:var(--amber-bg);color:var(--amber)}
.genre-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.genre-scroll::-webkit-scrollbar{display:none}
.genre-btn{height:30px;padding:0 12px;background:transparent;border:1px solid var(--border);border-radius:20px;color:var(--text2);font-size:12px;font-family:var(--fb);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.genre-btn:hover{border-color:var(--border2);color:var(--text)}
.genre-btn.active{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber);font-weight:500}
.genre-btn.gaou-active{background:var(--gaou-bg);border-color:var(--gaou-border);color:var(--gaou);font-weight:500}
.sort-row{display:flex;align-items:center;gap:10px}
.sort-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.sort-sel{height:30px;padding:0 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px;font-family:var(--fb);cursor:pointer;outline:none}
.results-info{font-size:12px;color:var(--text3);margin-bottom:1rem}

/* Card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));max-width:calc(10*(165px + 14px) - 14px);gap:14px;margin-bottom:1.5rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;position:relative}
.card:hover{border-color:var(--amber-border);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.card.votd-glow{border-color:var(--amber)!important;box-shadow:0 0 0 2px var(--amber),0 8px 32px rgba(79,174,245,.22)!important}
.card.gaou-card{border-color:var(--gaou-border)}
.cover{width:100%;aspect-ratio:1;background:var(--surface2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cover.drag-over{outline:2px dashed var(--amber);outline-offset:-6px;background:var(--amber-bg)}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.cover img.loading{opacity:0}.cover img.loaded{opacity:1}
.cover-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* Edit overlay on cover */
/* Drop zone on cover (no image) */


.gaou-badge{position:absolute;top:6px;left:6px;z-index:10;background:rgba(9,16,28,.85);backdrop-filter:blur(4px);border:1px solid var(--gaou-border);border-radius:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;pointer-events:none}
.card-actions{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .15s;z-index:10}
.card:hover .card-actions{opacity:1}
.card-action-btn{width:28px;height:28px;border-radius:6px;border:1px solid;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;background:rgba(9,16,28,.85);backdrop-filter:blur(4px)}
.del-btn{border-color:var(--red-border);color:var(--red)}.del-btn:hover{background:var(--red-bg);border-color:var(--red)}
.card-body{padding:10px 12px 12px}
.card-album{font-size:12px;font-weight:500;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-artist{font-size:11px;color:var(--text2);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-notes{font-size:10px;color:var(--text3);margin-bottom:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;word-break:break-word;white-space:pre-line}
.card-footer{display:flex;justify-content:space-between;align-items:center;gap:4px}
.card-price{font-size:12px;font-weight:500;color:var(--amber)}
/* AllMusic brand */
.am-logo{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.am-logo svg{flex-shrink:0}
a.am-logo{text-decoration:none;color:#27aae1}
a.am-logo:hover{opacity:.8}
.card-am{font-size:10px;color:#27aae1;white-space:nowrap}
.card-am.ok{color:#5db87a}
.am-star-input{display:flex;gap:3px;margin-top:2px}
.am-star-input span{font-size:17px;cursor:pointer;color:var(--border2);position:relative;line-height:1;transition:color .1s;user-select:none}
.am-star-input span.full{color:var(--amber)}
.am-star-input span.half{color:var(--border2)}
.am-star-input span.half::before{content:'★';position:absolute;left:0;top:0;color:var(--amber);clip-path:inset(0 50% 0 0);pointer-events:none}
.am-star-input.am-ok span.full{color:#5db87a}
.am-star-input.am-ok span.half::before{color:#5db87a}
.my-rating-wrap{display:flex;flex-direction:column;gap:4px}
.my-rating-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.my-star-input{display:flex;gap:3px}
.my-star-input span{font-size:17px;cursor:pointer;color:var(--border2);position:relative;line-height:1;transition:color .1s;user-select:none}
.my-star-input span.full{color:#f5c518}
.my-star-input span.half{color:var(--border2)}
.my-star-input span.half::before{content:'★';position:absolute;left:0;top:0;color:#f5c518;clip-path:inset(0 50% 0 0);pointer-events:none}
.card-shelve{font-size:9px;font-weight:600;color:var(--text3);background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:1px 5px;white-space:nowrap;flex-shrink:0;letter-spacing:.03em}
.card-listen-btn{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--text3);background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:5px;transition:all .15s;margin-left:auto;font-family:var(--fb)}
.card-listen-btn:hover{color:var(--amber);background:var(--amber-bg)}
.card-undo-btn{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:var(--text3);background:none;border:none;cursor:pointer;padding:1px 4px;border-radius:5px;transition:all .15s;font-family:var(--fb)}
.card-undo-btn:hover{color:var(--red);background:var(--red-bg)}
.card-cond{display:flex;gap:2px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--border2)}.dot.on{background:var(--amber)}
.tag-new{font-size:9px;padding:2px 6px;border-radius:20px;background:var(--green-bg);color:#5db87a;font-weight:500;border:1px solid rgba(93,184,122,.2)}
.empty{text-align:center;padding:4rem 1rem;color:var(--text3)}
.empty-icon{font-size:48px;margin-bottom:1rem;opacity:.3}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1.5rem}
.page-btn{height:34px;min-width:34px;padding:0 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:13px;font-family:var(--fb);cursor:pointer;transition:all .15s}
.page-btn:hover:not(:disabled){border-color:var(--amber-border);color:var(--amber)}
.page-btn.active{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber);font-weight:500}
.page-btn:disabled{opacity:.3;cursor:default}

/* Grid/Table view */
.grid-view-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--rl);margin-bottom:1.5rem}
.grid-table{width:100%;border-collapse:collapse;font-size:13px}
.grid-table thead{position:sticky;top:0;z-index:5}
.grid-table th{background:var(--surface2);padding:0;white-space:nowrap;border-bottom:1px solid var(--border2)}
.th-inner{display:flex;flex-direction:column}
.th-sort{display:flex;align-items:center;gap:5px;padding:8px 12px;cursor:pointer;user-select:none;color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;transition:color .15s}
.th-sort:hover,.th-sort.sorted{color:var(--amber)}
.sort-arrow{font-size:10px;opacity:.5;width:10px;text-align:center}
.th-sort.sorted .sort-arrow{opacity:1}
.th-filter{padding:0 8px 6px}
.th-filter input,.th-filter select{width:100%;height:24px;padding:0 6px;background:var(--surface);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:11px;font-family:var(--fb);outline:none}
.th-filter input:focus,.th-filter select:focus{border-color:var(--amber-border)}
.th-filter input::placeholder{color:var(--text3)}
.th-filter select option{background:var(--surface2)}
.grid-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-table tr:last-child td{border-bottom:none}
.grid-table tbody tr{cursor:pointer;transition:background .1s}
.grid-table tbody tr:hover{background:var(--surface2)}
.grid-table tbody tr.gaou-row{background:rgba(122,158,90,.06)}
.grid-table tbody tr.gaou-row:hover{background:rgba(122,158,90,.12)}
.td-price{color:var(--amber);font-weight:500;text-align:right}
.td-cond{display:flex;gap:2px;align-items:center}
.td-icons{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.td-tag{font-size:10px;padding:1px 5px;border-radius:10px;border:1px solid;font-weight:500}
.td-tag-new{background:var(--green-bg);color:#5db87a;border-color:rgba(93,184,122,.2)}
.td-tag-gaou{background:var(--gaou-bg);color:var(--gaou);border-color:var(--gaou-border)}
.td-tag-orig{color:var(--amber);border-color:rgba(212,135,58,.3);background:var(--amber-bg)}
.grid-empty{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:13px}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl);width:min(620px,96vw);max-height:96vh;overflow:hidden;display:flex;flex-direction:column;animation:pop .2s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* Edit Modal */
.modal-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.modal-top-form{flex:1;min-width:0}
.edit-cover-area{width:130px;height:130px;min-width:130px;background:var(--surface2);position:relative;overflow:hidden;border-radius:10px;cursor:pointer;flex-shrink:0}
.edit-cover-area img{width:100%;height:100%;object-fit:cover;display:block}
.edit-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.edit-cover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;font-weight:500;opacity:0;transition:opacity .2s}
.edit-cover-area:hover .edit-cover-overlay{opacity:1}
.edit-drop-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text3);font-size:13px;font-weight:500;border:2px dashed var(--border2);margin:8px;border-radius:8px}
.edit-drop-zone.drag-over{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.edit-cover-area input[type=file]{display:none}

.modal-body{padding:12px 14px;overflow-y:auto;flex:1}
.modal-title{font-family:var(--fb);font-size:14px;font-weight:600;margin-bottom:8px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:0}
.form-field{display:flex;flex-direction:column;gap:2px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.form-input,.form-select{height:30px;padding:0 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:var(--fb);outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus{border-color:var(--amber-border)}
.form-textarea{padding:5px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:var(--fb);outline:none;transition:border-color .2s;resize:none;height:52px;width:100%;box-sizing:border-box;line-height:1.4}
.form-textarea:focus{border-color:var(--amber-border)}
.form-textarea::placeholder{color:var(--text3)}
.listen-modal-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.listen-modal-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;color:var(--amber);font-size:13px;font-family:var(--fb);cursor:pointer;transition:all .15s}
.listen-modal-btn:hover{background:rgba(212,135,58,.2)}
.listen-modal-count{font-size:12px;color:var(--text3)}
.modal-undo-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text3);font-size:13px;font-family:var(--fb);cursor:pointer;transition:all .15s}
.modal-undo-btn:hover{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.form-select option{background:var(--surface2)}
.star-input{display:flex;gap:6px;margin-top:4px}
.star-input span{font-size:18px;cursor:pointer;color:var(--border2);transition:color .1s;line-height:1}
.star-input span.on{color:var(--amber)}
.gaou-toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .2s}
.gaou-toggle-row:hover{border-color:var(--gaou-border)}
.gaou-toggle-row.gaou-on{border-color:var(--gaou-border);background:var(--gaou-bg)}
.gaou-toggle-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text2)}
.gaou-toggle-row.gaou-on .gaou-toggle-label{color:var(--gaou)}
.toggle-switch{width:36px;height:20px;background:var(--border2);border-radius:10px;position:relative;transition:background .2s;flex-shrink:0}
.toggle-switch::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:all .2s}
.gaou-toggle-row.gaou-on .toggle-switch{background:var(--gaou)}
.gaou-toggle-row.gaou-on .toggle-switch::after{left:19px;background:#fff}
.modal-footer{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0}
.btn-save{height:38px;padding:0 20px;background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;color:var(--amber);font-size:13px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .15s}
.btn-save:hover{background:rgba(212,135,58,.2);border-color:var(--amber)}
.btn-cancel{height:38px;padding:0 16px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:13px;font-family:var(--fb);cursor:pointer;transition:all .15s}
.btn-cancel:hover{border-color:var(--border2);color:var(--text)}
.btn-delete{height:38px;padding:0 16px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:8px;color:var(--red);font-size:13px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .15s}
.btn-delete:hover{background:rgba(168,58,58,.2)}
.modal-nav{display:flex;align-items:center;gap:6px;margin-right:auto}
.btn-nav{height:34px;min-width:34px;padding:0 8px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-nav:hover:not(:disabled){border-color:var(--border2);color:var(--text)}
.btn-nav:disabled{opacity:.25;cursor:default}
.modal-nav-pos{font-size:11px;color:var(--text3);white-space:nowrap;min-width:4em;text-align:center}
.card-shelve{cursor:pointer}
.card-shelve:hover{border-color:var(--amber-border);color:var(--amber)}
.card-shelve-empty{opacity:.35}
.card-shelve-input{width:30px;font-size:9px;font-weight:600;color:var(--text);background:var(--surface2);border:1px solid var(--amber-border);border-radius:4px;padding:1px 3px;text-align:center;outline:none;font-family:var(--fb);letter-spacing:.03em;flex-shrink:0}

/* Crop overlay */
#crop-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:14px;touch-action:none}
#crop-overlay.open{display:flex}
#crop-viewport{width:300px;height:300px;overflow:hidden;border-radius:6px;position:relative;cursor:grab;touch-action:none;border:1.5px solid rgba(255,255,255,.12);flex-shrink:0}
#crop-viewport:active{cursor:grabbing}
#crop-canvas{display:block}
.crop-hint{color:rgba(255,255,255,.45);font-size:12px;margin-top:-4px}
.crop-title{color:#fff;font-size:15px;font-weight:500;font-family:var(--fb)}
.crop-btns{display:flex;gap:10px}
.crop-btn-cancel{padding:9px 22px;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:14px;font-family:var(--fb);cursor:pointer}
.crop-btn-apply{padding:9px 22px;border-radius:8px;border:none;background:var(--amber);color:#fff;font-size:14px;font-weight:600;font-family:var(--fb);cursor:pointer}

/* Confirm modal */
.confirm-modal{max-width:360px}
.confirm-modal .modal-body{text-align:center}
.confirm-title{font-size:16px;font-weight:500;margin-bottom:8px}
.confirm-sub{font-size:13px;color:var(--text2);margin-bottom:1.5rem;line-height:1.6}
.confirm-footer{display:flex;gap:8px;justify-content:center}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}