:root { --ink:#18201d; --muted:#6e7772; --paper:#f4f1e9; --card:#fffdf8; --line:#ddd9cf; --green:#174f43; --coral:#e46e52; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#758078 0.65px,transparent .65px); background-size:5px 5px; }
main { width:min(1180px,calc(100% - 36px)); margin:auto; padding:54px 0 60px; position:relative; }
header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:34px; }
.eyebrow,.step { margin:0 0 8px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.18em; }
h1 { font-family:Georgia,serif; font-size:clamp(42px,6vw,72px); line-height:.9; font-weight:500; letter-spacing:-.04em; margin:0; }
.subtitle { color:var(--muted); margin:16px 0 0; }
.youtube-status { display:flex; align-items:center; gap:9px; padding:10px 14px; background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:99px; font-size:13px; }
.dot { width:8px; height:8px; background:#a9aea9; border-radius:50%; }.dot.online{background:#27a171;box-shadow:0 0 0 4px #27a17120}
.set-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px;padding:15px 20px;background:#e7ece5;border:1px solid #d2d9d1;border-radius:14px}.set-list-toolbar .step{margin-bottom:4px}.set-list-toolbar h2{font-family:inherit;font-size:17px;font-weight:800}.set-list-toolbar .secondary{white-space:nowrap}
.gig-details{display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,220px) minmax(220px,1fr);gap:14px;margin-bottom:18px;padding:18px 22px;background:#fffdf8;border:1px solid var(--line);border-radius:14px}.gig-details label{display:grid;gap:7px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.gig-details input{height:43px;border:1px solid #d7d5cd;border-radius:9px;background:white;padding:0 12px;color:var(--ink);font:600 14px/1 inherit}.gig-details input:focus{outline:2px solid #174f4330;border-color:var(--green)}
.gig-details input[readonly]{background:#f0f1ed;color:#4f5a55;cursor:default}.gig-details input:disabled{opacity:.55}
.workspace { display:grid; grid-template-columns:minmax(255px,.52fr) minmax(0,1.48fr); gap:18px; }
.panel { height:570px; padding:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px #3b423910; display:flex; flex-direction:column; }
.set-panel { background:#eff1e9; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
h2 { font-family:Georgia,serif; font-size:29px; line-height:1.05; margin:0; font-weight:500; }
.count { min-width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#e4e7df; color:var(--green); font-weight:800; font-size:12px; }.coral{color:var(--coral)}.coral-bg{background:#f7ddd5;color:#b74830}
.search { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:0 12px; background:white; margin-bottom:12px; }
.search input { border:0; outline:0; width:100%; height:42px; background:transparent; font:inherit; }
.song-list { overflow:auto; flex:1; border-top:1px solid var(--line); }
.song { width:100%; border:0; border-bottom:1px solid #e8e5dc; background:transparent; text-align:left; padding:11px 12px; font:500 14px/1.25 inherit; color:var(--ink); cursor:pointer; border-radius:7px; user-select:none; }
.song:hover { background:#f1eee6; }.song.selected{background:#dbe8e1;color:#103e34}.set-list .song.selected{background:#f5dcd5;color:#873d2c}
.song:disabled{color:#8b918d;cursor:not-allowed}.song:disabled:hover{background:transparent}
.song[draggable="true"],.set-row[draggable="true"]{cursor:grab}.song.drag-source,.set-row.drag-source{opacity:.35}.set-drop-zone{height:2px;margin:0 6px;border-radius:99px;transition:height .12s,background .12s}.set-drop-zone.drag-over{height:7px;background:var(--coral);box-shadow:0 0 0 2px #e46e5225}.set-drop-zone.empty{height:0;overflow:hidden;margin:0;color:var(--green);font-size:12px;font-weight:800}.dragging-set-item .set-drop-zone.empty{height:88px;margin:8px 2px;display:grid;place-items:center;border:2px dashed #9bb5aa;border-radius:10px;background:#edf3ef}.dragging-set-item #emptySet{display:none}
.set-row{display:grid;grid-template-columns:minmax(125px,.75fr) minmax(180px,1.5fr) auto;align-items:center;border-bottom:1px solid #dde0d7}.set-row .song{border-bottom:0}.song-comment{width:100%;height:31px;border:1px solid #d2d8d2;border-radius:7px;background:#fffdf9;padding:0 9px;color:#48534e;font:italic 500 11px/1 inherit}.song-comment::placeholder{color:#9da49f}.song-comment:focus{outline:2px solid #174f4328;border-color:#88aa9f}.order-controls{display:flex;gap:3px;padding:0 4px}.order-button{width:28px;height:28px;border:1px solid #d2d7d1;border-radius:7px;background:#fff;color:var(--green);font:800 13px/1 inherit;cursor:pointer}.order-button:hover{background:#e2ebe6}.order-button:disabled{opacity:.25;cursor:not-allowed}
.divider-row{background:#dfe6df;border:1px solid #c8d2ca;border-radius:8px;margin:7px 2px}.divider-label{grid-column:1/3;padding:9px 11px;color:var(--green);font:800 12px/1 inherit;letter-spacing:.12em;text-transform:uppercase}.divider-remove{color:#9a4a38}.divider-hint{margin:8px 2px 0;color:var(--muted);font-size:10px}
.move-button,.primary,.secondary,.text-button { border:0; font:700 13px/1 inherit; cursor:pointer; }
.move-button { display:flex; justify-content:space-between; margin-top:14px; padding:14px 16px; border-radius:10px; background:var(--green); color:white; }.move-button:disabled,.primary:disabled{opacity:.35;cursor:not-allowed}
.text-button { text-align:left; padding:14px 4px 2px; background:transparent; color:#a14c38; }.text-button:disabled{opacity:.3}
.set-actions{display:flex;align-items:center;justify-content:space-between;gap:7px}.set-actions .text-button{white-space:nowrap}.divider-button{color:var(--green)}.clear-button{color:#7a4035}
.empty { margin:auto; text-align:center; color:#8a918b; line-height:1.6; font-size:14px; }
.action-bar { margin-top:18px; padding:22px 26px; border:1px solid #cbd2c8; border-radius:16px; background:var(--green); color:white; display:flex; align-items:center; justify-content:space-between; }
.action-bar .step { color:#b9d7ce; }.action-bar p:last-child{margin:0;color:#dce8e4;font-size:14px}.action-bar a{color:#fff;text-decoration-thickness:1px;text-underline-offset:3px}.action-bar a:hover{color:#ffe0d8}.actions{display:flex;gap:10px}
.playlist-result{margin-top:9px;padding:13px 18px;border:1px solid #cfd8d2;border-radius:12px;background:#fffdf8;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 7px 22px #3b42390c}.playlist-result[hidden]{display:none}.playlist-result>div{display:flex;align-items:center;gap:9px;color:var(--green);font-size:13px;font-weight:800}.playlist-check{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#dcece4;color:var(--green);font-size:13px}.playlist-result a{color:#b94e36;font-size:13px;font-weight:800;text-decoration-thickness:1px;text-underline-offset:3px}.playlist-result a:hover{color:#843725}
.primary,.secondary { padding:14px 19px; border-radius:10px; }.primary{background:var(--coral);color:white}.secondary{background:#fff;color:var(--green);border:1px solid #d7ddd8}
.pdf-bar{background:#ebe8df;color:var(--ink);border-color:var(--line)}.pdf-bar .step{color:var(--coral)}.pdf-bar p:last-child{color:var(--muted)}
.setlist-bar{background:#234f44}.setlist-bar .primary{background:#fff;color:var(--green)}
.instrument-picker{display:grid;gap:7px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.instrument-picker select{min-width:220px;height:45px;border:1px solid #cfd4cf;border-radius:10px;background:white;color:var(--ink);padding:0 34px 0 12px;font:600 14px/1 inherit}.pdf-bar .primary{height:41px}.pdf-dialog-body{margin:24px 0 8px;padding:18px;background:#f1eee6;border-radius:12px}.pdf-dialog-body .instrument-picker select{width:100%}
dialog { width:min(680px,calc(100% - 30px)); max-height:85vh; border:1px solid var(--line); border-radius:18px; padding:30px; background:var(--card); color:var(--ink); box-shadow:0 30px 100px #0005; }dialog::backdrop{background:#17201c99;backdrop-filter:blur(3px)}
.close{float:right;border:0;background:transparent;font-size:28px;cursor:pointer}.dialog-copy{color:var(--muted)}.matches{max-height:290px;overflow:auto;border-top:1px solid var(--line)}.match{padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}.match b{display:block}.match span{color:var(--muted);font-size:12px}.warning{margin-top:14px;padding:13px;background:#fff1da;border-radius:9px;color:#724d17;font-size:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.pdf-actions{flex-wrap:wrap}
.manager-dialog{width:min(780px,calc(100% - 30px))}.saved-set-lists{display:grid;gap:9px;max-height:430px;overflow:auto;margin-top:22px}.saved-set-empty{padding:30px;text-align:center;color:var(--muted);background:#f1eee6;border-radius:12px}.saved-set-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:#fff}.saved-set-row.active{border-color:#8fb4a7;background:#f0f6f2}.saved-set-title{display:flex;align-items:center;gap:8px;font-weight:800}.saved-set-meta{margin-top:5px;color:var(--muted);font-size:12px}.active-badge{padding:4px 7px;border-radius:99px;background:#dcece4;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.saved-set-actions{display:flex;gap:6px}.small-button{border:1px solid #d2d8d3;border-radius:8px;background:white;color:var(--green);padding:9px 10px;font:800 11px/1 inherit;cursor:pointer}.small-button:hover{background:#edf3ef}.small-button:disabled{opacity:.45;cursor:default}.small-button.danger{color:#a14c38}.create-fields{display:grid;gap:14px;margin-top:24px;padding:19px;background:#f1eee6;border-radius:12px}.create-fields label{display:grid;gap:7px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.create-fields input,.create-fields select{width:100%;height:44px;border:1px solid #cfd4cf;border-radius:9px;background:white;color:var(--ink);padding:0 12px;font:600 14px/1 inherit}
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; background:#16231e;color:white;padding:13px 18px;border-radius:10px;transition:.2s;pointer-events:none;max-width:calc(100% - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){main{width:min(100% - 20px,600px);padding-top:28px}header{display:block}.youtube-status{margin-top:22px;width:max-content}.set-list-toolbar{align-items:flex-start;flex-direction:column}.set-list-toolbar .secondary{width:100%}.gig-details{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.panel{height:470px}.action-bar{align-items:flex-start;gap:18px;flex-direction:column}.action-bar>button{width:100%}.actions{width:100%;flex-wrap:wrap}.actions button{flex:1}.playlist-result{align-items:flex-start;flex-direction:column;gap:8px}.saved-set-row{grid-template-columns:1fr}.saved-set-actions{flex-wrap:wrap}.instrument-picker{width:100%}.instrument-picker select{width:100%}h1{font-size:48px}}
@media(max-width:500px){.set-row{grid-template-columns:minmax(0,1fr) auto}.set-row .song{grid-column:1}.song-comment{grid-column:1;margin:0 10px 8px;width:calc(100% - 20px)}.set-row .order-controls{grid-column:2;grid-row:1/3}.divider-label{grid-column:1}.divider-row .order-controls{grid-row:1}}