:root{--bg:#0b0613;--panel:#150b26;--panel2:#21113a;--panel3:#2b1750;--line:#463065;--text:#f8f3ff;--muted:#a99dbd;--accent:#8c4dff;--accent2:#5d73ff;--good:#69d391;--danger:#ff7388;--shadow:0 18px 60px #0006}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 75% -10%,#35205d 0,#0b0613 34%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100%}button,input{font:inherit}.app-shell{min-height:100vh;padding-bottom:96px}.topbar{height:76px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;background:#110820d9;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--accent),var(--accent2));font-weight:900;font-size:22px}.brand strong{display:block;font-size:19px}.brand small{display:block;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:8px;align-items:center}.chip,.btn,.avatar{border:1px solid #ffffff14;color:var(--text);background:#ffffff08;border-radius:12px;min-height:42px;padding:0 14px;cursor:pointer}.chip b{margin-left:6px}.btn.primary{background:linear-gradient(100deg,var(--accent),var(--accent2));border:0;font-weight:800}.avatar{width:42px;padding:0}.transport-card{margin:22px auto 16px;width:min(1180px,calc(100% - 32px));display:grid;grid-template-columns:auto auto 1fr auto auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid #ffffff12;background:linear-gradient(180deg,#1b0e30,#130a22);border-radius:18px;box-shadow:var(--shadow)}.play{width:54px;height:54px;border-radius:50%;border:0;color:white;background:linear-gradient(145deg,var(--accent),var(--accent2));font-size:22px;cursor:pointer}.tempo{display:flex;align-items:center;gap:6px}.tempo button{width:34px;height:34px;border:0;border-radius:8px;background:#ffffff0d;color:#fff;cursor:pointer}.tempo input{width:70px;background:transparent;color:#fff;border:0;text-align:center;font-size:22px;font-weight:800}.tempo span{color:var(--muted);font-size:12px}.transport-card input[type=range]{accent-color:var(--accent2)}.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 14px var(--good)}.workspace{width:min(1360px,calc(100% - 32px));margin:0 auto;background:#10091d;border:1px solid #ffffff10;border-radius:20px;overflow:hidden}.timeline-head{display:grid;grid-template-columns:250px 1fr;min-height:62px;align-items:end;border-bottom:1px solid #ffffff10}.beats{display:grid;grid-template-columns:repeat(16,1fr);padding:0 16px 10px}.beat{color:var(--muted);text-align:center;font-size:13px}.beat.major{color:#fff;font-size:15px;font-weight:700}.tracks{display:flex;flex-direction:column}.track{display:grid;grid-template-columns:250px 1fr;min-height:92px;border-bottom:1px solid #ffffff0d}.track-meta{padding:13px 14px;display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center}.instrument-icon{width:46px;height:46px;border-radius:12px;background:#ffffff0b;display:grid;place-items:center;font-size:26px}.track-title strong{display:block;font-size:15px}.track-title button{padding:0;background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer}.track-controls{display:grid;grid-template-columns:repeat(2,34px);gap:5px}.mini{width:34px;height:30px;border:1px solid #ffffff15;background:#ffffff08;color:#fff;border-radius:8px;cursor:pointer}.mini.on{background:#6b4cd6}.mini.danger{color:#ff9bab}.grid{display:grid;grid-template-columns:repeat(16,1fr);padding:12px 16px;gap:4px}.step{min-width:30px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff04;display:grid;place-items:center;position:relative;cursor:pointer;transition:.12s}.step:nth-child(8){margin-right:5px}.step:nth-child(9){margin-left:5px}.step.active{background:linear-gradient(180deg,#322052,#24143e);border-color:#ffffff24}.step.playing{outline:2px solid #b38aff;box-shadow:0 0 20px #8c4dff55}.glyph{width:17px;height:17px;border-radius:50%;background:#fff}.glyph.slash{border-radius:4px;transform:rotate(35deg)}.glyph.ring{background:transparent;border:3px solid #fff}.add-track{margin:14px;border:1px dashed #744fb0;background:#ffffff03;color:#d6c5ef;padding:15px;border-radius:12px;cursor:pointer}.mobile-transport{display:none}.modal{position:fixed;inset:0;z-index:100;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:#05020bb5;backdrop-filter:blur(5px)}.modal-panel{position:relative;width:min(760px,calc(100% - 28px));max-height:88vh;overflow:auto;margin:6vh auto;background:linear-gradient(180deg,#1d1035,#130a24);border:1px solid #ffffff14;border-radius:22px;box-shadow:0 24px 90px #000a;padding:24px}.modal-close{position:absolute;right:18px;top:12px;border:0;background:none;color:#fff;font-size:34px;cursor:pointer}.modal h2{margin:0 0 18px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.card{padding:15px;background:#ffffff07;border:1px solid #ffffff10;border-radius:14px;cursor:pointer}.card:hover{border-color:#8d66ca}.field{display:grid;gap:7px;margin:12px 0}.field label{color:#c8bbdb;font-size:13px}.field input,.field select{width:100%;background:#0f081b;border:1px solid #ffffff15;color:#fff;border-radius:10px;padding:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.modal .btn{padding:11px 15px}.auth-tabs{display:flex;gap:8px;margin-bottom:14px}.toast{position:fixed;right:20px;bottom:20px;background:#25133f;border:1px solid #ffffff18;color:white;padding:13px 16px;border-radius:12px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:200}.toast.show{opacity:1;transform:none}.range-row{display:grid;grid-template-columns:44px 1fr 42px;gap:8px;align-items:center}.pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#ffffff0a;color:#cdbde3;font-size:12px}
@media(max-width:900px){.top-actions .chip:nth-child(n+2),.top-actions .btn{display:none}.timeline-head{grid-template-columns:180px 1fr}.track{grid-template-columns:180px 1fr}.track-meta{grid-template-columns:42px 1fr}.track-controls{display:none}.beats,.grid{min-width:760px}.timeline-head,.track{width:max-content;min-width:100%}.workspace{overflow-x:auto}.transport-card{grid-template-columns:auto auto 1fr}.status{display:none}.brand small{display:none}.mobile-transport{display:flex;position:fixed;bottom:0;left:0;right:0;height:66px;background:#170b2ae8;backdrop-filter:blur(18px);border-top:1px solid #ffffff15;z-index:30;align-items:center;justify-content:space-around}.mobile-transport button{border:0;background:none;color:#fff;font-size:16px}.mobile-transport button:first-child{font-size:25px}.app-shell{padding-bottom:80px}}
@media(max-width:560px){.topbar{padding:0 14px}.transport-card{width:calc(100% - 20px);margin-top:12px;grid-template-columns:auto 1fr}.transport-card>input[type=range]{grid-column:1/-1}.workspace{width:calc(100% - 20px)}.timeline-head{grid-template-columns:155px 1fr}.track{grid-template-columns:155px 1fr}.track-meta{padding-left:9px}.instrument-icon{width:38px;height:38px}.track-title strong{font-size:13px}}

.master-volume{display:grid;grid-template-columns:auto 110px 44px;gap:8px;align-items:center;color:var(--muted);font-size:12px}.master-volume strong{color:var(--text);font-size:12px;text-align:right}.master-volume input{width:110px}
@media(max-width:900px){.master-volume{grid-column:1/-1;grid-template-columns:auto 1fr 44px}.master-volume input{width:100%}}
.beat.playing{background:#8c4dff33;color:#fff;border-radius:7px}.rhythm-edit-grid{display:grid;grid-template-columns:repeat(8,minmax(72px,1fr));gap:7px}.rhythm-edit-grid>div{display:grid;gap:4px}.rhythm-edit-grid small{text-align:center;color:var(--muted)}.rhythm-edit-grid select{min-width:0}@media(max-width:760px){.rhythm-edit-grid{grid-template-columns:repeat(4,minmax(68px,1fr))}}
.instrument-photo{width:100%;height:100%;object-fit:contain;display:block}.loop-inactive{opacity:.24!important;filter:saturate(.55)}.step.loop-inactive{cursor:pointer}.beat,.step{transition:opacity .15s,outline .08s,box-shadow .08s,background .08s}.step.playing{outline:2px solid #b38aff;box-shadow:0 0 20px #8c4dff55;opacity:1!important}.beat.playing{background:#8c4dff55;color:#fff;border-radius:7px;opacity:1!important}

.rhythm-edit-measures{display:grid;gap:12px}.rhythm-edit-measures .rhythm-edit-grid{padding:10px;border:1px solid #ffffff10;border-radius:12px;background:#ffffff03}.pattern-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 18px}.pattern-tools small{color:var(--muted)}.track-settings-link:hover{color:#fff}.pattern-step:hover{border-color:#8c4dff88;background:#8c4dff13}

/* v3.4 — grille compacte et sélecteur instrument/rythme */
.beats{grid-template-columns:repeat(16,42px);gap:4px;justify-content:start}
.grid{grid-template-columns:repeat(16,42px);gap:4px;justify-content:start;align-content:center}
.step{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:7px}
.instrument-picker .instrument-choice{appearance:none;color:inherit;text-align:left;width:100%}.instrument-choice small{display:block;color:var(--muted);margin-top:5px}.picker-visual{width:54px;height:54px;display:grid;place-items:center;font-size:34px;margin-bottom:8px}.picker-visual .instrument-photo{object-fit:contain}.modal-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.modal-title-row h2{margin:0}.rhythm-picker-list{display:grid;gap:10px}.rhythm-choice{display:grid;grid-template-columns:minmax(170px,1fr) auto;align-items:center;gap:18px;width:100%;padding:13px 15px;border-radius:13px;border:1px solid #ffffff12;background:#ffffff06;color:var(--text);cursor:pointer;text-align:left}.rhythm-choice:hover{border-color:#8d66ca;background:#ffffff09}.rhythm-choice small{display:block;color:var(--muted);margin-top:3px}.mini-pattern{display:grid;grid-template-columns:repeat(16,18px);gap:2px}.mini-pattern>span{width:18px;height:18px;border:1px solid #ffffff18;border-radius:3px;display:grid;place-items:center;background:#0f081b}.mini-pattern>span.measure-start{margin-left:3px}.mini-pattern>span.hit{background:#332052;border-color:#ffffff2a}.mini-pattern .glyph{width:7px;height:7px}.mini-pattern .glyph.ring{border-width:1px}.mini-pattern .glyph.slash{border-radius:2px}
@media(max-width:900px){.beats,.grid{min-width:auto}.rhythm-choice{grid-template-columns:1fr}.mini-pattern{grid-template-columns:repeat(16,16px)}.mini-pattern>span{width:16px;height:16px}}

/* v3.5 — symboles de rythme compacts */
.step .rhythm-symbol-img{width:30px;height:30px;object-fit:contain;display:block}.step .rhythm-symbol-letter{font-size:11px;font-weight:800;line-height:1}.mini-pattern .rhythm-symbol-img{width:8px;height:8px;object-fit:contain}.mini-pattern .rhythm-symbol-letter{font-size:7px;font-weight:800}

/* v3.6 — édition visuelle, modèles et réordonnancement */
.rhythm-picker-list{margin-top:20px}
.drag-handle{border:0;background:transparent;color:var(--muted);cursor:grab;font-size:18px;padding:4px;line-height:1}.drag-handle:active{cursor:grabbing}.track.dragging{opacity:.45}.track.drag-over{box-shadow:inset 0 2px 0 #a77cff}.track-settings-hotspot{cursor:pointer}.track-meta{grid-template-columns:22px 48px 1fr auto}.track-settings-link{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.model-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.model-choice{border:1px solid #ffffff14;background:#ffffff06;color:var(--text);border-radius:13px;padding:10px;cursor:pointer;text-align:center}.model-choice.selected{border-color:#a77cff;background:#6c3cb733;box-shadow:0 0 0 2px #8c4dff33}.model-choice-image{height:78px;display:grid;place-items:center;margin-bottom:7px}.model-choice-image .instrument-photo{max-width:100%;max-height:78px}.model-choice strong{font-size:13px}
.player-pattern .pattern-palette{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 13px}.player-pattern .palette-item{width:44px;height:44px;padding:6px;border-radius:8px;border:1px solid #ffffff14;background:#0f081b;color:#fff;display:grid;place-items:center;cursor:pointer}.player-pattern .palette-item.active{border-color:#a77cff;background:#6c3cb733;box-shadow:0 0 0 2px #8c4dff33}.player-pattern .pattern-measure.visual{display:grid;grid-template-columns:repeat(8,42px);gap:4px;justify-content:flex-start;overflow:auto;padding:8px}.player-pattern .visual-cell{width:42px;display:grid;gap:3px}.player-pattern .visual-cell label{text-align:center;font-size:12px;font-weight:400;color:#f6efff}.player-pattern .pattern-slot{width:42px;height:42px;border:1px solid #ffffff19;border-radius:7px;background:#0f081b;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}.player-pattern .pattern-slot:hover{border-color:#a77cff}.player-pattern .pattern-slot.filled{background:#332052;border-color:#9c70df}.player-pattern .pattern-symbol-img{width:30px;height:30px;object-fit:contain;display:block}.player-pattern .pattern-symbol-letter{font-size:13px;font-weight:800;color:#fff}.player-pattern .clear-pattern,.player-pattern .invert-pattern{height:44px}
@media(max-width:900px){.track-meta{grid-template-columns:18px 42px 1fr}.drag-handle{display:none}}

/* v3.7 — actions player */
.track-actions{display:flex;align-items:center;gap:8px;padding:0 14px 14px;flex-wrap:wrap}.track-actions .add-track{margin:0;flex:1;min-width:220px}.clear-tracks{min-height:48px;padding:0 16px}
.btn.danger{background:#ff738818;color:#ff9aaa;border-color:#ff738855}.btn.danger:hover{background:#ff73882b;border-color:#ff738888}