:root{--bg: #14161b;--surface: #1e2129;--surface-2: #262a34;--surface-3: #2f3440;--border: #383e4c;--text: #f1f2f5;--text-muted: #9aa1b1;--text-dim: #6b7280;--accent: #7c9eff;--accent-strong: #5c7cfa;--danger: #e05a5a;--featured: #ec4899}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app-shell{min-height:100vh;display:flex;flex-direction:column}.top-bar{padding:16px 28px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.brand{color:var(--text);text-decoration:none;font-size:20px;font-weight:700}.top-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.backup-menu{display:flex;align-items:center;gap:8px}.content{flex:1;padding:28px;max-width:900px;width:100%;margin:0 auto}.breadcrumb{display:inline-block;margin-bottom:14px;color:var(--text-muted);text-decoration:none;font-size:14px}.breadcrumb:hover{color:var(--accent)}.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}.page-header h1{margin:0;font-size:28px}.page-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:9px 16px;border-radius:10px;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--surface-3)}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn-primary:hover{background:var(--accent)}.btn-secondary{background:var(--surface-2)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}.btn-small{padding:5px 10px;font-size:12px;border-radius:8px}.btn:disabled{opacity:.6;cursor:default}.inline-add-form{display:flex;gap:8px;align-items:center}.inline-add-form input{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:14px;min-width:200px}.inline-add-form input:focus{outline:2px solid var(--accent)}.empty-hint{color:var(--text-muted);font-size:14px}.card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.card-list li{display:flex;align-items:center;gap:8px}.entity-card{display:block;flex:1;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;font-size:17px;font-weight:600;transition:border-color .15s,background .15s}.entity-card:hover{border-color:var(--accent);background:var(--surface-2)}.entity-delete{flex-shrink:0}.song-list{display:flex;flex-direction:column;gap:14px}.song-card{display:flex;flex-direction:column}.song-pill{background:var(--surface);border:1px solid var(--border);border-radius:34px;padding:10px 24px;cursor:pointer;min-height:68px;display:flex;flex-direction:column;justify-content:center;gap:4px;transition:border-color .15s}.song-pill:hover{border-color:var(--accent)}.song-pill-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;min-height:14px}.song-pill-traits{display:flex;flex-wrap:wrap;gap:6px 10px}.trait-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1;padding:4px 10px;border-radius:999px;border:1.5px solid var(--trait-color, var(--border));background:transparent}.trait-chip.rated{background:color-mix(in srgb,var(--trait-color) 12%,transparent);box-shadow:0 0 10px 1px color-mix(in srgb,var(--trait-color) 40%,transparent)}.trait-chip-person{font-size:10px;font-weight:700;color:var(--trait-color, var(--text-muted))}.trait-chip-text{font-size:11px;color:var(--text-muted)}.trait-chip-plus{margin-left:2px;font-weight:800;color:var(--trait-color, var(--text-muted))}.song-pill-main{display:flex;align-items:center;justify-content:space-between;gap:16px}.song-name{font-size:21px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-context{font-size:12px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}.rating-badge-wrap{position:relative;flex-shrink:0;display:flex;align-items:center;gap:6px}.rating-plus-toggle{width:26px;height:26px;flex-shrink:0;border-radius:50%;border:2px solid;background:transparent;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center}.rating-pill-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;border:2px solid transparent;font-family:inherit;cursor:pointer;touch-action:manipulation}.rating-pill-badge.unrated{background:transparent;border:2px dashed var(--border);color:var(--text-muted)}.rating-picker{display:flex;flex-direction:column;position:absolute;top:calc(100% + 6px);right:0;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:6px;gap:4px;z-index:20;min-width:150px}.rating-option{border:none;border-radius:8px;padding:8px 14px;font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;text-align:left;cursor:pointer;font-family:inherit;touch-action:manipulation;opacity:.75;transition:opacity .1s}.rating-option:hover,.rating-option.active{opacity:1}.song-dropdown{margin:6px 14px 0;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);border-top:none;border-radius:0 0 20px 20px;cursor:default}.song-dropdown-header{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}.trait-detail-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.delete-song-btn{margin-top:14px}.trait-detail-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px 4px 4px 14px}.trait-detail-main{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;cursor:pointer;padding:6px 0}.trait-editor{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:8px;display:flex;flex-direction:column;gap:8px}.trait-editor-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}.trait-editor input{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;font-family:inherit}.trait-editor input:focus{outline:2px solid var(--accent)}.trait-editor-reset{align-self:flex-start;background:none;border:none;color:var(--text-dim);font-size:11px;text-decoration:underline;cursor:pointer;padding:0;font-family:inherit}.trait-editor-actions{display:flex;gap:6px}.trait-detail-controls{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;flex-wrap:wrap}.trait-tier-buttons{display:flex;gap:3px}.trait-tier-btn{padding:3px 6px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.02em;cursor:pointer;font-family:inherit;border:1.5px solid;background:transparent;white-space:nowrap}.trait-tier-plus{padding:3px 7px}.lineup-tag{margin:-6px 0 12px;font-size:12px;color:var(--text-dim)}.lineup-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}.lineup-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface-2);border-radius:8px}.lineup-instrument{width:90px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--text-muted)}.lineup-performer{flex:1;font-size:13px;cursor:pointer;border-bottom:1px dashed transparent}.lineup-performer:hover{border-bottom-color:var(--text-dim)}.lineup-row input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--text);font-size:13px;font-family:inherit}.lineup-remove{width:22px;height:22px;border-radius:50%;border:none;background:var(--surface-3);color:var(--text-muted);font-size:13px;cursor:pointer;flex-shrink:0;padding:0}.lineup-remove:hover{background:var(--danger);color:#fff}.quick-picker{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;margin:8px 0}.quick-picker-header{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:8px}.quick-picker-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.chip-option{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer}.chip-option:hover{border-color:var(--accent);color:var(--accent)}.edit-options-link{margin-top:8px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.modal-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;width:380px;max-width:calc(100vw - 32px);max-height:80vh;overflow-y:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal-header h3{margin:0;font-size:16px}.options-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}.options-list-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--surface-2);border-radius:8px}.options-list-actions{display:flex;gap:6px}.reset-defaults-link{margin-top:10px}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.section-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 16px;display:flex;flex-direction:column;gap:10px;min-height:130px;color:var(--text);text-decoration:none;transition:border-color .15s}.section-card:hover{border-color:var(--accent)}.section-card .icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px}.section-card.ratings .icon{background:#9333ea2e}.section-card.rotation .icon{background:#ec48992e}.section-card h3{margin:0;font-size:15px}.section-card p{margin:0;font-size:12px;color:var(--text-muted);line-height:1.4;flex:1}.rotation-context{font-size:12px;color:var(--text-muted);margin:-10px 0 18px}.day-stack{display:flex;flex-direction:column;gap:10px}.day-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:14px 16px 16px}.day-card.others-card{border-style:dashed}.day-card h4{margin:0;font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}.day-card h4 .hint{font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-dim)}.empty-note{margin:4px 0 10px;font-size:12px;color:var(--text-muted);font-style:italic}.band-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}.band-slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex-shrink:0;border:none;background:none;padding:0;font-family:inherit}.band-slot .name{font-size:11px;font-weight:600;text-align:center;line-height:1.25;color:var(--text);height:27px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.avatar{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#ffffffeb;position:relative;flex-shrink:0}.band-slot.featured .avatar{box-shadow:0 0 0 3px var(--featured),0 0 16px 1px #ec48998c}.band-slot.featured .name{color:var(--featured)}.featured-badge{position:absolute;right:-6px;bottom:-6px;background:var(--featured);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:999px;border:2px solid var(--surface);letter-spacing:.02em}.remove-btn{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;background:var(--surface-3);border:2px solid var(--surface);color:var(--text-muted);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;touch-action:manipulation}.remove-btn:hover{background:var(--danger);color:#fff}.add-slot-wrap{position:relative}.add-slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;border:none;background:none;padding:0;font-family:inherit;cursor:pointer;touch-action:manipulation}.add-avatar{background:transparent;border:2px dashed var(--border);color:var(--text-muted);font-size:22px;font-weight:400}.add-slot:hover .add-avatar{border-color:var(--accent);color:var(--accent)}.add-slot .name{color:var(--text-muted)}.add-slot-popover{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px;z-index:20;width:200px;display:flex;flex-direction:column;gap:8px}.add-slot-popover input{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;width:100%}.add-slot-popover input:focus{outline:2px solid var(--accent)}.add-slot-actions{display:flex;gap:6px}@media (max-width: 640px){.top-bar{padding:14px 16px}.content{padding:16px}.page-header h1{font-size:22px}.page-header-actions{width:100%}.inline-add-form input{min-width:0;flex:1}.song-pill{padding:12px 16px;border-radius:24px}.song-name{font-size:18px}.rating-pill-badge{padding:7px 12px;font-size:11px}.song-context{white-space:normal}.modal-panel{width:100%}.section-grid{grid-template-columns:1fr}.band-slot{width:64px}.avatar{width:56px;height:56px}}
