/* Effect.Labs — styles du configurateur de générateurs.
   Confinés dans .gen-app : l'outil est un bloc de la page, pas une app plein écran. */
  .gen-app *, .gen-app *::before, .gen-app *::after  { box-sizing: border-box }
.gen-app  {
    --bg:#0a0a0f; --panel:#101017; --line:#1e202b; --text:#e6e8ef; --muted:#757b8c;
    background: var(--bg); color: var(--text);
    font: 400 14px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
    display: grid; grid-template-columns: 1fr 368px; grid-template-rows: 1fr auto;
    height: min(78vh, 760px); min-height: 520px;
    border: 1px solid #1c2030; border-radius: 14px; overflow: hidden;
  }
 .gen-app .left { display: grid; grid-template-rows: 1fr auto; min-width: 0; min-height: 0 }
 .gen-app .stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0 }
 .gen-app .fx-field { position: relative; width: 680px; height: 620px; max-width: 88%; max-height: 86%; cursor: none }
 .gen-app .fx-field canvas { display: block; width: 100%; height: 100%; position: relative }
 .gen-app .stage-foot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
    color: #5b6276; font-size: 11.5px; letter-spacing: .02em; pointer-events: none; margin: 0 }

 .gen-app /* ---------- timeline ---------- */
  .tlwrap { border-top: 1px solid var(--line); background: #08090d; padding: 15px 18px 19px;
            min-width: 0; overflow: hidden }
 .gen-app .tlbar { display: flex; align-items: center; gap: 14px; min-width: 0 }
 .gen-app .tl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
        overflow-x: auto; padding: 2px 0 6px }
 .gen-app .tl::-webkit-scrollbar { height: 5px }
 .gen-app .tl::-webkit-scrollbar-thumb { background: #23273a; border-radius: 3px }
 .gen-app .tl::-webkit-scrollbar-track { background: transparent }

 .gen-app /* étapes : les blocs pleins, .gen-app ce qu'on voit à l'écran */
  .tlstep {
    position: relative; flex: var(--w, 2) 0 0; min-width: var(--sw, 134px);
    height: 66px; padding: 9px 11px; border-radius: 9px;
    border: 1px solid #212536; background: linear-gradient(180deg, #171b28 0%, #12151f 100%);
    color: #ccd2e0; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: border-color .12s ease, background .12s ease;
  }
 .gen-app .tlstep:hover { border-color: #39405a }
 .gen-app .tlstep .k { display: flex; align-items: center; gap: 7px; min-width: 0 }
 .gen-app .tlstep .th {
    width: 20px; height: 20px; border-radius: 5px; flex: none;
    background: #262c3d center/cover no-repeat; display: grid; place-items: center;
    font-size: 8px; font-weight: 600; letter-spacing: .02em; color: #8b93a8;
  }
 .gen-app .tlstep .nm { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .gen-app .tlstep .d { font-size: 10.5px; color: #6b7488; font-variant-numeric: tabular-nums; align-self: flex-end }

 .gen-app /* transitions : plus basses et discrètes, .gen-app ce sont des passages */
  .tltrans {
    position: relative; flex: var(--w, 1) 0 0; min-width: var(--tw, 66px);
    height: 40px; padding: 0 6px; border-radius: 7px;
    border: 1px dashed #2a3044; background: transparent; color: #7f8799; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    transition: border-color .12s ease, color .12s ease;
  }
 .gen-app .tltrans:hover { border-color: #39405a; color: #9aa2b8 }
 .gen-app .tltrans .t { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
                max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .gen-app .tltrans .d { font-size: 9.5px; color: #646c82; font-variant-numeric: tabular-nums }

 .gen-app /* sélection : un anneau net, .gen-app pas un effet */
  .tlstep.sel { border-color: #e8eaf2; background: linear-gradient(180deg, #1e2333 0%, #171b28 100%); color: #fff }
 .gen-app .tltrans.sel { border-style: solid; border-color: #e8eaf2; color: #e8eaf2 }

 .gen-app /* lecture en cours : un liseré à la base, .gen-app discret */
  .tlstep.playing::after {
    content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px;
    background: #6a74ff; border-radius: 2px 2px 0 0;
  }

 .gen-app /* point d'insertion : apparait entre deux blocs au survol de la piste */
  .tlins { flex: none; width: 14px; align-self: stretch; border: 0; background: none;
    padding: 0; cursor: pointer; position: relative; opacity: 0; transition: opacity .12s ease }
 .gen-app .tl:hover .tlins { opacity: 1 }
 .gen-app .tlins::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px;
    background: #2a3044; transform: translateX(-50%) }
 .gen-app .tlins::after { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 16px; height: 16px; line-height: 15px; text-align: center; font-size: 12px;
    color: #7f8799; background: #12151f; border: 1px solid #2a3044; border-radius: 50% }
 .gen-app .tlins:hover::after { color: #fff; border-color: #6a74ff; background: #1b2033 }

 .gen-app /* au-delà de quelques étapes, .gen-app on allège plutôt que de tout écraser */
  .tl.compact .tlstep { height: 56px; padding: 7px 9px }
 .gen-app .tl.compact .tlstep .nm { font-size: 11.5px }
 .gen-app .tl.compact .tlstep .th { width: 17px; height: 17px }
 .gen-app .tl.compact .tltrans { height: 34px }
 .gen-app .tl.compact .tltrans .d { display: none }
 .gen-app .tl.compact .tltrans .t { font-size: 9px; letter-spacing: .04em }

 .gen-app /* estompe les bords quand la piste continue au-delà */
  .tl.ovf-r { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
              mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%) }
 .gen-app .tl.ovf-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%) }
 .gen-app .tl.ovf-l.ovf-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
                    mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%) }

 .gen-app .tladd { display: flex; gap: 5px; flex: none }
 .gen-app .tladd .plus { width: 38px; height: 38px; padding: 0; font-size: 19px; line-height: 1; color: #cdd3e2 }
 .gen-app .tladd .plus:hover { border-color: #6a74ff; color: #fff }

/* ---------- popup d'ajout — vit dans <body>, donc HORS du scope .gen-app ---------- */
  .gen-ovl { position: fixed; inset: 0; background: rgba(6,7,11,.72); display: grid; place-items: center; z-index: 10000 }
.gen-pop { width: 380px; max-width: 92vw; background: #101320; border: 1px solid #242940;
    border-radius: 14px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55) }
.gen-pop h2 { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: #e6e9f2 }
.gen-pop .sub2 { margin: 0 0 15px; font-size: 11.5px; color: #6e768b }
.gen-pop .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.gen-pop .opt { display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer;
    background: #171b28; border: 1px solid #242940; border-radius: 10px; text-align: left; color: #dfe3ee;
    font: inherit; font-size: 12.5px }
.gen-pop .opt:hover { border-color: #6a74ff; background: #1b2033 }
.gen-pop .opt .ic { width: 26px; height: 26px; border-radius: 7px; background: #232838; flex: none;
    display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #9aa2b8 }
.gen-pop .note2 { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #1c2030;
    font-size: 11px; line-height: 1.5; color: #6e768b }
.gen-pop .cls { margin-top: 12px; width: 100%; padding: 9px; font: inherit; font-size: 12px; color: #9aa2b8;
    background: transparent; border: 1px solid #242940; border-radius: 8px; cursor: pointer }
.gen-pop .cls:hover { border-color: #39405a; color: #e6e8ef }
 .gen-app .tladd button {
    padding: 7px 11px; font: inherit; font-size: 11.5px; color: #b9c0d0;
    background: #12151f; border: 1px solid #212536; border-radius: 7px; cursor: pointer; white-space: nowrap;
  }
 .gen-app .tladd button:hover { border-color: #39405a; color: #e6e8ef }

 .gen-app .panel { background: var(--panel); border-left:1px solid var(--line); overflow-y:auto; overflow-x:hidden; padding:20px 16px 28px }
 .gen-app .panel .head { display:flex; align-items:center; gap:10px }
 .gen-app .panel h1 { margin: 0; flex:1; font-size: 15px; font-weight: 600; letter-spacing: -.01em }
 .gen-app .langsw { display:flex; gap:3px; flex:none }
 .gen-app .langsw button { padding:2px 7px; font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.04em;
    color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:5px; cursor:pointer }
 .gen-app .langsw button.on { background:#fff; border-color:#fff; color:#0a0a0f }
 .gen-app .transport { display:flex; gap:6px; margin:0 0 6px }
 .gen-app .transport button { flex:1; padding:8px; font:inherit; font-size:12.5px; color:var(--muted);
    background:transparent; border:1px solid var(--line); border-radius:7px; cursor:pointer }
 .gen-app .transport button.on { background:#fff; border-color:#fff; color:#0a0a0f; font-weight:500 }
 .gen-app .panel .sub { margin: 5px 0 14px; color: var(--muted); font-size: 12px }
 .gen-app .grp { margin: 22px 0 10px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase }
 .gen-app .grp:first-of-type { margin-top: 4px }
 .gen-app .row { margin-bottom: 15px }
 .gen-app .row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px }
 .gen-app .row label { font-size: 12.5px; color: #b9beca }
 .gen-app .row .val { font-size: 12px; font-variant-numeric: tabular-nums }

 .gen-app input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; background:#262a37; outline:none }
 .gen-app input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; cursor:pointer }
 .gen-app input[type=range]::-moz-range-thumb { width:13px; height:13px; border:0; border-radius:50%; background:#fff; cursor:pointer }

 .gen-app .seg, .gen-app .chips { display: flex; gap: 6px }
 .gen-app .chips { flex-wrap: wrap }
 .gen-app .seg button, .gen-app .chips button {
    padding: 7px 10px; font: inherit; font-size: 12px; color: var(--muted);
    background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
  }
 .gen-app .seg button { flex: 1 }
 .gen-app .seg button.on, .gen-app .chips button.on { background:#fff; border-color:#fff; color:#0a0a0f; font-weight:500 }

 .gen-app input[type=text] { width:100%; padding:8px 10px; font:inherit; font-size:13px; color:var(--text);
    background:#0c0d13; border:1px solid var(--line); border-radius:7px; outline:none }
 .gen-app input[type=text]:focus { border-color:#3a3f52 }
 .gen-app .note { margin:6px 0 0; color:var(--muted); font-size:11px }

 .gen-app /* --- sections repliables --- */
  details.sect { border-top:1px solid var(--line); padding:2px 0 }
 .gen-app details.sect:first-of-type { border-top:0 }
 .gen-app details.sect > summary {
    list-style:none; cursor:pointer; padding:13px 2px 12px;
    display:flex; align-items:center; gap:7px;
    font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  }
 .gen-app details.sect > summary::-webkit-details-marker { display:none }
 .gen-app details.sect > summary:hover { color:#a7adbd }
 .gen-app details.sect > summary::before {
    content:"›"; font-size:14px; line-height:1; transform:rotate(0deg);
    transition:transform .12s ease; color:#4d5468;
  }
 .gen-app details.sect[open] > summary::before { transform:rotate(90deg) }
 .gen-app details.sect > summary .count { margin-left:auto; font-size:10px; letter-spacing:.04em; color:#4d5468; text-transform:none }
 .gen-app details.sect > .body { padding:4px 0 16px }

 .gen-app /* --- carte de l'objet sélectionné --- */
  .step {
    border: 1px solid #212536; border-radius: 10px;
    background: linear-gradient(180deg, #12151f 0%, #0f121a 100%);
    padding: 12px 13px 13px; margin-bottom: 12px;
  }
 .gen-app .step.sel { border-color: #2b3145 }

 .gen-app .step .r1 { display: flex; align-items: center; gap: 9px; min-width: 0;
              padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid #1a1e2c }
 .gen-app .step .num { font-size: 10px; font-weight: 700; color: #6a74ff; letter-spacing: .06em; flex: none; width: 15px }
 .gen-app .step .thumb { width: 26px; height: 26px; border-radius: 6px; flex: none;
    background: #232838 center/cover no-repeat; display: grid; place-items: center;
    font-size: 9px; font-weight: 600; color: #8b93a8 }
 .gen-app .step .lbl { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #e2e6ef }
 .gen-app .step .rm { border: 0; background: none; color: #4d5468; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; flex: none }
 .gen-app .step .rm:hover { color: #e06a6a }

 .gen-app /* une ligne = un intitulé à gauche, .gen-app la commande à droite */
  .step .r2, .gen-app .step .r3, .gen-app .step .r4 { display: flex; align-items: center; gap: 7px; margin-top: 9px }
 .gen-app .step .r2:first-of-type, .gen-app .step .r3:first-of-type { margin-top: 0 }
 .gen-app .step .fld { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #656d84;
               flex: none; min-width: 58px }
 .gen-app .step .grow { flex: 1 1 auto }

 .gen-app .step .ord { width: 24px; height: 24px; padding: 0; font: inherit; font-size: 11px; color: #9aa2b8;
    background: #171b28; border: 1px solid #232838; border-radius: 6px; cursor: pointer; flex: none }
 .gen-app .step .ord:disabled { opacity: .3; cursor: default }
 .gen-app .step .ord:not(:disabled):hover { border-color: #39405a; color: #e6e8ef }

 .gen-app .step .hold, .gen-app .step .deg {
    width: 56px; padding: 5px 6px; font: inherit; font-size: 11.5px; color: #e2e6ef;
    background: #171b28; border: 1px solid #232838; border-radius: 6px; text-align: right;
    font-variant-numeric: tabular-nums;
  }
 .gen-app .step .deg { width: 100%; min-width: 0 }
 .gen-app .step .hold:focus, .gen-app .step .deg:focus, .gen-app .step select:focus { outline: none; border-color: #39405a }

 .gen-app .step .colmode, .gen-app .step .axis, .gen-app .shapesel {
    flex: 1 1 0; min-width: 0; padding: 5px 7px; font: inherit; font-size: 12px; color: #e2e6ef;
    background: #171b28; border: 1px solid #232838; border-radius: 6px; cursor: pointer;
  }
 .gen-app .step input[type=color] {
    width: 28px; height: 25px; padding: 0; border: 1px solid #232838;
    border-radius: 6px; background: none; cursor: pointer; flex: none;
  }
 .gen-app .step .arw { color: #4d5468; font-size: 12px; flex: none }
 .gen-app .step .axfield { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0 }
 .gen-app .step .axfield i { font-style: normal; font-size: 9.5px; font-weight: 600; color: #656d84; flex: none }
 .gen-app .step .tag { padding: 4px 7px; font: inherit; font-size: 10px; color: #9aa2b8;
    background: #171b28; border: 1px solid #232838; border-radius: 6px; cursor: pointer; flex: none }
 .gen-app .step .tag:hover { border-color: #39405a }

 .gen-app .textedit { width: 100%; text-align: left; padding: 5px 7px; font: inherit; font-size: 12.5px;
    color: #e2e6ef; background: #171b28; border: 1px dashed #2b3145; border-radius: 6px; cursor: pointer }
 .gen-app .textedit:hover { border-color: #39405a }

 .gen-app .legend { margin: 0; padding: 9px 11px; border-radius: 9px;
    background: #0d1017; border: 1px solid #191d29; color: #6e768b; font-size: 10.5px; line-height: 1.5 }
 .gen-app .legend b { color: #a8b0c4; font-weight: 600 }

 .gen-app .swatch { display:flex; align-items:center; gap:9px }
 .gen-app .swatch input[type=color] { width:34px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer }
 .gen-app .swatch code { color: var(--muted); font-size: 12px }

 .gen-app .actions { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:8px }
 .gen-app .actions button { padding:10px; font:inherit; font-size:13px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--text) }
 .gen-app .actions button.primary { background:#fff; border-color:#fff; color:#0a0a0f; font-weight:500 }
 .gen-app .actions .hint { color:var(--muted); font-size:11.5px; text-align:center; margin:2px 0 0 }
 .gen-app .actions button:disabled { opacity:.55; cursor:default }
 .gen-app #rec.on { background:#c0392b; border-color:#c0392b; color:#fff }
 .gen-app .reset { color:var(--muted); font-size:12px; background:none; border:0; cursor:pointer; padding:0 }
  @media (max-width: 860px)  { body { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto } }