/* Kanevas — interface. Outfit est embarquée (fonts/, licence OFL). */
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent: #2f6fdb;
  --accent-rgb: 47, 111, 219;
  --accent-2: #1f56b3;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1fd;
  --danger: #c23a22;
  --ok: #1f9d64;
  --warn: #8a5a00;
  --radius: 8px;
  --radius-lg: 12px;
  --ui: "Outfit", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --titlebar-h: 40px;
  --caption-w: 140px;
}

body.theme-dark {
  color-scheme: dark;
  --bg: #111317;
  --chrome: #16181d;
  --panel: #1b1e24;
  --panel-2: #20242b;
  --raised: #262a32;
  --hover: #2c313a;
  --field: #121419;
  --border: #2a2f38;
  --border-2: #353b46;
  --text: #e3e7ee;
  --text-2: #b9c0cc;
  --muted: #7f8896;
  --workspace: #0e1013;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --ruler: #181b20;
  --ruler-ink: #6f7886;
}
body.theme-graphite {
  color-scheme: dark;
  --bg: #2b2b2b;
  --chrome: #323232;
  --panel: #383838;
  --panel-2: #3e3e3e;
  --raised: #474747;
  --hover: #4f4f4f;
  --field: #2a2a2a;
  --border: #2a2a2a;
  --border-2: #555;
  --text: #ececec;
  --text-2: #cfcfcf;
  --muted: #a0a0a0;
  --workspace: #262626;
  --shadow: 0 10px 30px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --ruler: #303030;
  --ruler-ink: #9a9a9a;
}
body.theme-light {
  color-scheme: light;
  --bg: #eef1f4;
  --chrome: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #f4f6f8;
  --raised: #eef1f4;
  --hover: #e6eaef;
  --field: #f8fafb;
  --border: #dde3ea;
  --border-2: #cbd4df;
  --text: #1d2530;
  --text-2: #3b4552;
  --muted: #5b6675;
  --workspace: #eef1f4;
  --shadow: 0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.04);
  --ruler: #f4f6f8;
  --ruler-ink: #5b6675;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg); color: var(--text);
  font: 12.5px/1.35 var(--ui);
  user-select: none; -webkit-user-select: none;
}
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { flex-shrink: 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* ------------------------------------------------------------ barre de titre */
#titlebar {
  height: var(--titlebar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  background: var(--chrome); border-bottom: 1px solid var(--border);
  padding-left: 10px; padding-right: var(--caption-w);
  -webkit-app-region: drag;
}
#titlebar > * { -webkit-app-region: no-drag; }
#titlebar .drag-region { -webkit-app-region: drag; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 40px; }
.brand { display: flex; align-items: center; padding: 0 8px 0 2px; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 0;
  background: transparent url(../icon.png) center / contain no-repeat;
  position: relative;
}
.brand-mark.xl { width: 64px; height: 64px; border-radius: 0; flex-shrink: 0; }
.brand-mark.xl::after { font-size: 34px; }
#menubar { display: flex; align-items: center; height: 100%; }
.menu-btn {
  height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-2); font-size: 12.5px;
}
.menu-btn:hover, .menu-btn.open { background: var(--hover); color: var(--text); }
#workspace-actions { display: flex; align-items: center; gap: 2px; padding-right: 6px; }

/* ------------------------------------------------------------ barre d'options */
#optionsbar {
  height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: var(--chrome); border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
#optionsbar::-webkit-scrollbar { height: 4px; }
.opt-tool { display: flex; align-items: center; gap: 8px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--border); height: 28px; color: var(--text); font-weight: 500; }
.opt-tool svg { width: 18px; height: 18px; color: var(--accent-2); }
.opt-group { display: flex; align-items: center; gap: 6px; height: 30px; }
.opt-label { color: var(--muted); font-size: 12px; }
.opt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; flex-shrink: 0; }

/* ------------------------------------------------------------ disposition */
#main { flex: 1; display: flex; min-height: 0; }
#center { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------------------------------------ outils */
#toolbar {
  width: 52px; flex-shrink: 0; background: var(--chrome); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow-y: auto; overflow-x: hidden;
}
#toolbar::-webkit-scrollbar { width: 0; }
.tool-btn {
  position: relative; width: 38px; height: 34px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-2); display: grid; place-items: center; flex-shrink: 0;
}
.tool-btn svg { width: 20px; height: 20px; }
.tool-btn:hover { background: var(--hover); color: var(--text); }
.tool-btn.active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 10px rgba(var(--accent-rgb),.35); }
.tool-btn.has-group::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 0; height: 0;
  border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .55;
}
.tool-sep { width: 26px; height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; }
.color-well { position: relative; width: 40px; height: 44px; margin-top: 8px; flex-shrink: 0; }
.color-well .sw { position: absolute; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--chrome); box-shadow: 0 0 0 1px var(--border-2); cursor: pointer; }
.color-well .fg { left: 2px; top: 2px; z-index: 2; }
.color-well .bg { left: 14px; top: 16px; }
.color-well .mini { position: absolute; width: 14px; height: 14px; border: 0; padding: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.color-well .mini:hover { color: var(--text); }
.color-well .mini svg { width: 12px; height: 12px; }
.color-well .swap { right: -2px; top: 0; }
.color-well .reset { left: 0; bottom: -2px; }
.qm-btn.active { color: #ff6b6b; }

.tool-flyout {
  position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; min-width: 220px;
}
.tool-flyout .item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text-2); }
.tool-flyout .item:hover { background: var(--hover); color: var(--text); }
.tool-flyout .item.current { color: var(--accent-2); }
.tool-flyout .item svg { width: 18px; height: 18px; }
.tool-flyout .item .key { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* ------------------------------------------------------------ onglets */
#tabs {
  height: 34px; flex-shrink: 0; display: flex; align-items: flex-end; gap: 2px; padding: 0 8px;
  background: var(--chrome); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden;
}
#tabs::-webkit-scrollbar { height: 3px; }
.tab {
  height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; max-width: 260px;
  border-radius: 8px 8px 0 0; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  border: 1px solid transparent; border-bottom: 0;
}
.tab:hover { color: var(--text-2); background: var(--panel-2); }
.tab.active { background: var(--panel); color: var(--text); border-color: var(--border); }
.tab .name { overflow: hidden; text-overflow: ellipsis; }
.tab .close { width: 18px; height: 18px; border: 0; border-radius: 5px; background: transparent; display: grid; place-items: center; color: var(--muted); padding: 0; }
.tab .close:hover { background: var(--hover); color: var(--text); }
.tab .close svg { width: 12px; height: 12px; }
.tab .dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }

/* ------------------------------------------------------------ zone de travail */
#viewport { position: relative; flex: 1; min-height: 0; background: var(--workspace); overflow: hidden; }
#view { position: absolute; left: 0; top: 0; touch-action: none; }
#viewport.rulers #view { left: 20px; top: 20px; }
#ruler-h, #ruler-v, #ruler-corner { position: absolute; display: none; background: var(--ruler); z-index: 3; }
#viewport.rulers #ruler-h, #viewport.rulers #ruler-v, #viewport.rulers #ruler-corner { display: block; }
#ruler-corner { left: 0; top: 0; width: 20px; height: 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#ruler-h { left: 20px; top: 0; height: 20px; cursor: s-resize; }
#ruler-v { left: 0; top: 20px; width: 20px; cursor: e-resize; }
#overlay-ui { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#overlay-ui > * { pointer-events: auto; }
#viewport.rulers #overlay-ui { left: 20px; top: 20px; }

.text-editor {
  position: absolute; min-width: 4px; white-space: pre; outline: 1px dashed var(--accent-2); outline-offset: 2px;
  background: transparent; caret-color: var(--accent-2); line-height: 1.2; user-select: text; -webkit-user-select: text;
  transform-origin: 0 0; padding: 0; margin: 0; border: 0; overflow: visible; cursor: text;
}

/* ------------------------------------------------------------ accueil */
#home {
  position: absolute; inset: 0; z-index: 5; overflow: auto;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(var(--accent-rgb),.06), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(var(--accent-rgb),.04), transparent 60%),
    var(--workspace);
}
.home-inner { max-width: 1120px; margin: 0 auto; padding: 56px 40px 40px; }
.home-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.home-hero .brand-mark { width: 54px; height: 54px; border-radius: 0; }
.home-hero .brand-mark.xl { width: 64px; height: 64px; border-radius: 0; flex-shrink: 0; }
.brand-mark.xl::after { font-size: 34px; }
.home-hero .brand-mark::after { font-size: 30px; }
.home-hero h1 { margin: 0; font-size: 36px; font-weight: 300; letter-spacing: -.02em; }
.home-hero p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.home-actions { display: flex; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.home h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: 26px 0 12px; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.preset {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px;
  cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
}
.preset:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--panel-2); }
.preset .shape { height: 64px; display: grid; place-items: center; margin-bottom: 10px; }
.preset .shape i { display: block; background: linear-gradient(135deg, var(--raised), var(--hover)); border: 1px solid var(--border-2); border-radius: 4px; }
.preset .t { font-weight: 600; }
.preset .s { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.recent {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; overflow: hidden;
}
.recent:hover { border-color: var(--accent); }
.recent svg { width: 20px; height: 20px; color: var(--accent-2); }
.recent .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent .p { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent .x { margin-left: auto; }
.drop-hint {
  margin-top: 30px; border: 2px dashed var(--border-2); border-radius: var(--radius-lg); padding: 30px; text-align: center; color: var(--muted);
}
.drop-active .drop-hint, #viewport.drop-active::after {
  border-color: var(--accent);
}
#viewport.drop-active::after {
  content: "Déposer pour importer"; position: absolute; inset: 12px; border: 2px dashed var(--accent); border-radius: 14px;
  display: grid; place-items: center; font-size: 18px; color: var(--accent-2); background: rgba(var(--accent-rgb),.08); z-index: 20; pointer-events: none;
}

/* ------------------------------------------------------------ barre d'état */
#statusbar {
  height: 26px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: var(--chrome); border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
#statusbar .zoom-field { width: 62px; height: 20px; background: var(--field); border: 1px solid var(--border); border-radius: 5px; text-align: center; color: var(--text); font-size: 11.5px; }
#statusbar .st-color { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--border-2); }
#statusbar .hint { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ dock / panneaux */
#dock {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px;
  background: var(--chrome); border-left: 1px solid var(--border); overflow: hidden; position: relative;
}
#dock .dock-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 5; }
.pgroup { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pgroup.grow { flex: 1; min-height: 190px; }
.pgroup.collapsed .pbody { display: none; }
.pgroup.collapsed { flex: 0 0 auto !important; }
.ptabs { display: flex; align-items: center; height: 32px; flex-shrink: 0; padding: 0 4px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.pgroup.collapsed .ptabs { border-bottom: 0; }
.ptab { height: 26px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; font-weight: 500; font-size: 12px; }
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--text); background: var(--raised); }
.ptabs .spacer { flex: 1; }
.pcollapse { width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; display: grid; place-items: center; padding: 0; }
.pcollapse:hover { background: var(--hover); color: var(--text); }
.pcollapse svg { width: 14px; height: 14px; transition: transform .15s; }
.pgroup.collapsed .pcollapse svg { transform: rotate(-90deg); }
.pbody { flex: 1; min-height: 0; overflow: auto; position: relative; }
.ppane { display: none; padding: 10px; }
.ppane.active { display: block; }
.ppane.flush { padding: 0; }
.ppane.fill.active { display: flex; flex-direction: column; height: 100%; }
.pgroup-resizer { height: 6px; margin: -6px 0 0; cursor: ns-resize; flex-shrink: 0; position: relative; z-index: 3; }

/* ------------------------------------------------------------ champs & contrôles */
.btn {
  height: 30px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--raised);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; font-weight: 500;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-2); }
.btn.big { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 10px; }
.btn.small { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn svg { width: 16px; height: 16px; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--text-2);
  display: inline-grid; place-items: center; padding: 0; flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.on { background: var(--accent-soft); color: var(--accent-2); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.sm { width: 24px; height: 24px; }
.icon-btn.sm svg { width: 15px; height: 15px; }

.field, select.field {
  height: 26px; background: var(--field); border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; color: var(--text);
  min-width: 0;
}
.field:focus, select.field:focus { border-color: var(--accent); }
select.field { padding-right: 22px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 11px) 11px, calc(100% - 7px) 11px; background-size: 4px 4px; background-repeat: no-repeat; }
select.field option { background: var(--panel); color: var(--text); }
textarea.field { height: auto; padding: 6px 8px; resize: vertical; user-select: text; }
input.field { user-select: text; -webkit-user-select: text; }
.num-field { width: 58px; text-align: right; }

/* curseur numérique « glissable » façon Photoshop */
.scrub { display: inline-flex; align-items: center; gap: 6px; }
.scrub .lbl { color: var(--muted); cursor: ew-resize; }
.scrub .lbl:hover { color: var(--text); }
.scrub .box { display: inline-flex; align-items: center; background: var(--field); border: 1px solid var(--border); border-radius: 6px; height: 26px; }
.scrub .box:focus-within { border-color: var(--accent); }
.scrub input { width: 46px; height: 24px; border: 0; background: transparent; text-align: right; padding: 0 2px 0 6px; user-select: text; }
.scrub .unit { color: var(--muted); padding-right: 4px; font-size: 11px; }
.scrub .drop { width: 18px; height: 24px; border: 0; background: transparent; color: var(--muted); padding: 0; display: grid; place-items: center; border-left: 1px solid var(--border); }
.scrub .drop:hover { color: var(--text); }
.scrub .drop svg { width: 10px; height: 10px; }
.slider-pop { position: fixed; z-index: 80; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow); width: 200px; }

input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 18px; width: 100%; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--p, 50%), var(--border-2) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.1); }
input[type=range].plain::-webkit-slider-runnable-track { background: var(--border-2); }
input[type=range].centered::-webkit-slider-runnable-track { background: var(--border-2); }
.grad-wrap { position: relative; display: flex; align-items: center; }
.grad-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 4px; pointer-events: none; }
input[type=range].grad-range { position: relative; }
input[type=range].grad-range::-webkit-slider-runnable-track { background: transparent; }

.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-2); }
.check input { appearance: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-2); background: var(--field); display: grid; place-items: center; margin: 0; cursor: pointer; flex-shrink: 0; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }

.seg { display: inline-flex; background: var(--field); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
.seg button { height: 22px; min-width: 26px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.seg button svg { width: 15px; height: 15px; }

.color-chip { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-2); cursor: pointer; padding: 0; flex-shrink: 0; background-clip: padding-box; }
.checker {
  background-color: #fff;
  background-image: linear-gradient(45deg, #cfd3d8 25%, transparent 25%, transparent 75%, #cfd3d8 75%), linear-gradient(45deg, #cfd3d8 25%, transparent 25%, transparent 75%, #cfd3d8 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}

/* ------------------------------------------------------------ menus déroulants */
.menu {
  position: fixed; z-index: 100; min-width: 240px; max-height: calc(100vh - 60px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow); padding: 5px;
  animation: pop .1s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.menu .mi { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px 0 8px; border-radius: 6px; color: var(--text-2); cursor: default; white-space: nowrap; }
.menu .mi .ic { width: 18px; display: grid; place-items: center; color: var(--muted); }
.menu .mi .ic svg { width: 15px; height: 15px; }
.menu .mi .lb { flex: 1; }
.menu .mi .kb { color: var(--muted); font-size: 11.5px; margin-left: 24px; }
.menu .mi .sub-arrow { color: var(--muted); }
.menu .mi .sub-arrow svg { width: 12px; height: 12px; }
.menu .mi:hover:not(.disabled), .menu .mi.hl { background: var(--accent); color: #fff; }
.menu .mi:hover:not(.disabled) .kb, .menu .mi:hover:not(.disabled) .ic, .menu .mi.hl .kb, .menu .mi.hl .ic, .menu .mi:hover .sub-arrow, .menu .mi.hl .sub-arrow { color: rgba(255,255,255,.85); }
.menu .mi.disabled { opacity: .4; }
.menu .msep { height: 1px; background: var(--border); margin: 4px 6px; }
.menu .mhead { padding: 6px 10px 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------ boîtes de dialogue */
.modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(5,7,10,.45); display: grid; place-items: center; animation: fade .12s ease-out; }
.modal-back.see-through { background: rgba(5,7,10,.12); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: var(--shadow);
  min-width: 360px; max-width: calc(100vw - 60px); max-height: calc(100vh - 60px); display: flex; flex-direction: column;
  animation: rise .14s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; cursor: move; }
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.modal-body { padding: 4px 16px 14px; overflow: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.modal-foot .spacer { flex: 1; }
.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.form-grid label.l { color: var(--text-2); }
.form-row { display: flex; align-items: center; gap: 8px; }
.form-col { display: flex; flex-direction: column; gap: 6px; }
.param { display: grid; grid-template-columns: 130px 1fr 64px; gap: 10px; align-items: center; margin: 8px 0; }
.param .pl { color: var(--text-2); }
.param input.field { width: 64px; text-align: right; }
.param.wide { grid-template-columns: 130px 1fr; }
.dialog-split { display: flex; gap: 16px; }
.dialog-side { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.dialog-side .side-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; color: var(--text-2); }
.dialog-side .side-item:hover { background: var(--hover); }
.dialog-side .side-item.active { background: var(--raised); color: var(--text); }
.note { color: var(--muted); font-size: 11.5px; }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.anchor-grid button { width: 26px; height: 26px; border: 1px solid var(--border-2); background: var(--field); border-radius: 5px; padding: 0; }
.anchor-grid button.on { background: var(--accent); border-color: var(--accent); }

.preset-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.preset-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.preset-row:hover { background: var(--hover); }
.preset-row.on { border-color: var(--accent); background: var(--accent-soft); }
.preset-row .t { font-weight: 500; }
.preset-row .s { color: var(--muted); font-size: 11.5px; margin-left: auto; }

.shortcut-table { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; }
.shortcut-table .k { font-family: var(--mono); color: var(--accent-2); font-size: 11.5px; text-align: right; }
.shortcut-cols { columns: 3; column-gap: 32px; }
.shortcut-cols section { break-inside: avoid; margin-bottom: 16px; }
.shortcut-cols h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }

/* courbes / niveaux */
.curve-box { position: relative; width: 256px; height: 256px; background: var(--field); border: 1px solid var(--border); border-radius: 6px; cursor: crosshair; }
.curve-box canvas { display: block; }
.levels-hist { width: 100%; height: 110px; background: var(--field); border: 1px solid var(--border); border-radius: 6px; display: block; }
.grad-bar { height: 14px; border-radius: 4px; border: 1px solid var(--border-2); }

/* ------------------------------------------------------------ sélecteur de couleurs */
.cp { display: flex; flex-direction: column; gap: 8px; }
.cp-main { display: flex; gap: 8px; }
.cp-sv { position: relative; flex: 1; aspect-ratio: 1.45; border-radius: 6px; overflow: hidden; cursor: crosshair; min-height: 110px; }
.cp-sv canvas, .cp-hue canvas { width: 100%; height: 100%; display: block; }
.cp-sv .knob { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.3); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { position: relative; width: 14px; border-radius: 6px; overflow: hidden; cursor: ns-resize; }
.cp-hue .knob { position: absolute; left: -1px; right: -1px; height: 6px; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); transform: translateY(-50%); pointer-events: none; }
.cp-row { display: flex; gap: 6px; align-items: center; }
.cp-row .field { width: 100%; }
.cp-chan { display: grid; grid-template-columns: 14px 1fr 44px; gap: 8px; align-items: center; }
.cp-chan .field { width: 44px; height: 22px; padding: 0 4px; text-align: right; }
.cp-chan span { color: var(--muted); font-size: 11px; }
.cp-compare { display: flex; flex-direction: column; width: 60px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-2); }
.cp-compare div { flex: 1; min-height: 28px; }
.cp-big .cp-sv { width: 300px; flex: none; aspect-ratio: auto; height: 300px; }
.cp-big .cp-hue { width: 20px; height: 300px; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 4px; }
.swatches .s { aspect-ratio: 1; border-radius: 4px; cursor: pointer; border: 1px solid rgba(0,0,0,.25); }
.swatches .s:hover { transform: scale(1.12); box-shadow: 0 0 0 2px var(--accent); }
.swatches .add { display: grid; place-items: center; border: 1px dashed var(--border-2); background: transparent; color: var(--muted); padding: 0; }
.swatches .add svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ calques */
.layers-top { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
.layers-top .row { display: flex; align-items: center; gap: 6px; }
.layers-top .row .grow { flex: 1; }
.layers-list { flex: 1; overflow-y: auto; padding: 4px; min-height: 60px; }
.layer-row {
  display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 6px 0 2px; border-radius: 8px; cursor: pointer; position: relative;
  border: 1px solid transparent;
}
.layer-row:hover { background: var(--hover); }
.layer-row.active { background: var(--accent-soft); border-color: rgba(var(--accent-rgb),.45); }
.layer-row.drop-above::before, .layer-row.drop-below::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent); border-radius: 2px; }
.layer-row.drop-above::before { top: -2px; }
.layer-row.drop-below::after { bottom: -2px; }
.layer-row .eye { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; padding: 0; border-radius: 6px; }
.layer-row .eye:hover { background: var(--raised); }
.layer-row .eye svg { width: 15px; height: 15px; }
.layer-row.hidden-layer .eye { color: var(--muted); opacity: .6; }
.layer-row.hidden-layer .thumb, .layer-row.hidden-layer .lname { opacity: .5; }
.layer-row .thumb { width: 38px; height: 34px; border-radius: 4px; border: 1px solid var(--border-2); overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.layer-row .thumb.sel { box-shadow: 0 0 0 2px var(--accent-2); }
.layer-row .thumb canvas { display: block; max-width: 100%; max-height: 100%; }
.layer-row .thumb.kind { background: var(--raised); color: var(--text-2); }
.layer-row .thumb.kind svg { width: 20px; height: 20px; }
.layer-row .link { width: 8px; color: var(--muted); display: grid; place-items: center; }
.layer-row .link svg { width: 10px; height: 10px; }
.layer-row .lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row .lname input { width: 100%; height: 24px; }
.layer-row .badges { display: flex; gap: 2px; color: var(--muted); }
.layer-row .badges svg { width: 13px; height: 13px; }
.layer-row .fx-badge { font-size: 10px; font-weight: 700; font-style: italic; color: var(--text-2); padding: 0 3px; }
.layers-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--border); }

/* historique */
.hist-row { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; cursor: pointer; color: var(--text-2); }
.hist-row:hover { background: var(--hover); }
.hist-row.current { background: var(--accent-soft); color: var(--text); }
.hist-row.future { opacity: .45; }
.hist-row svg { width: 14px; height: 14px; color: var(--muted); }

/* propriétés, réglages, navigateur, histogramme */
.prop-section { margin-bottom: 14px; }
.prop-section h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prop-grid .scrub .box { width: 100%; }
.prop-grid .scrub input { width: 100%; }
.adj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.adj-btn { height: 52px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 2px; font-size: 10px; text-align: center; line-height: 1.1; }
.adj-btn:hover { border-color: var(--accent); color: var(--text); }
.adj-btn svg { width: 18px; height: 18px; }
.nav-wrap { position: relative; display: grid; place-items: center; background: var(--field); border-radius: 6px; min-height: 120px; overflow: hidden; }
.nav-wrap canvas { display: block; cursor: move; }
.nav-zoom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nav-zoom input[type=range] { flex: 1; }
.histo { width: 100%; height: 100px; display: block; background: var(--field); border-radius: 6px; }
.info-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; font-family: var(--mono); font-size: 11.5px; margin-top: 8px; color: var(--text-2); }
.info-grid b { color: var(--muted); font-weight: 400; }
.empty-note { color: var(--muted); text-align: center; padding: 18px 8px; }

/* ------------------------------------------------------------ toasts */
#toasts { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--border-2); color: var(--text); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); animation: rise .15s ease-out; display: flex; gap: 10px; align-items: center; max-width: 600px; }
.toast.err { border-color: var(--danger); }
.toast.ok svg { color: var(--ok); }
.toast.err svg { color: var(--danger); }
.toast svg { width: 16px; height: 16px; }

.busy { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(0,0,0,.25); cursor: progress; }
.busy .spin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tip { position: fixed; z-index: 450; background: var(--raised); color: var(--text); border: 1px solid var(--border-2); padding: 5px 8px; border-radius: 6px; font-size: 11.5px; pointer-events: none; box-shadow: var(--shadow); white-space: nowrap; }
.tip .k { color: var(--accent-2); margin-left: 6px; font-family: var(--mono); }

body.no-panels #dock, body.no-panels #toolbar, body.no-panels #optionsbar { display: none; }
body.cursor-hidden #view { cursor: none !important; }

/* paramètres empilés dans les panneaux étroits */
.ppane .param { grid-template-columns: 1fr 64px; gap: 4px 10px; margin: 6px 0 10px; }
.ppane .param > input[type=range], .ppane .param > .grad-wrap { grid-column: 1 / -1; grid-row: 2; }
.ppane .param.wide { grid-template-columns: 1fr auto; }
.ppane .curve-box { width: 100%; height: auto; aspect-ratio: 1; }
.ppane .curve-box canvas { width: 100%; height: 100%; }
.ppane .levels-hist { width: 100%; }

.layer-row.multi { background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.25); }
.layer-row.drop-into { box-shadow: inset 0 0 0 2px var(--accent); }
.layer-row .thumb { position: relative; }
.layer-row .kind-badge { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 3px; background: var(--raised); color: var(--accent-2); display: grid; place-items: center; }
.layer-row .kind-badge svg { width: 10px; height: 10px; }

.brush-hud { position: absolute; z-index: 10; pointer-events: none !important; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); font: 500 12px var(--ui); white-space: nowrap; }

/* Barre des tâches contextuelle (façon Photoshop) */
.ctx-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; max-width: calc(100% - 40px);
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); font: 500 12.5px var(--ui); color: var(--text-2); transition: opacity .15s; z-index: 6; }
.ctx-bar[hidden] { display: none; }
.ctx-bar.ghost { opacity: 0; pointer-events: none !important; }
.ctx-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; white-space: nowrap; }
.ctx-btn svg { width: 16px; height: 16px; display: block; }
.ctx-btn:hover { background: var(--hover); color: var(--text); }
.ctx-btn.primary { background: var(--accent); color: var(--accent-ink); }
.ctx-btn.primary:hover { background: var(--accent-2); color: var(--accent-ink); }
.ctx-bar .icon-btn { width: 30px; height: 30px; }
.ctx-count { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.ctx-ico { display: grid; place-items: center; width: 26px; color: var(--accent-2); }
.ctx-ico svg { width: 17px; height: 17px; }
.ctx-bar.prompt { width: min(720px, calc(100% - 40px)); }
.ctx-prompt { flex: 1; min-width: 120px; height: 30px; }
@media (max-width: 1250px) { .ctx-bar:not(.prompt) .ctx-btn:not(.primary) .t { display: none; } }

/* Tâches longues (génération) */
.gen-busy { background: rgba(0,0,0,.3); }
.gen-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); font: 500 13px var(--ui); cursor: default; }
.gen-card .spin { width: 26px; height: 26px; border-width: 3px; border-color: var(--border-2); border-top-color: var(--accent); }
.gen-txt { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.gen-pct { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Panneau IA (mini Forge) */
.gp { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 14px; font-size: 12.5px; }
.gp-status { display: flex; align-items: center; gap: 7px; color: var(--text-2); }
.gp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.gp-dot.ok { background: #3fb36b; }
.gp-sec { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.gp-h { font-weight: 600; color: var(--text); font-size: 12px; letter-spacing: .02em; }
.gp-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
.gp-row.gp-wide { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-l { color: var(--text-2); }
.gp-sel { width: 100%; min-width: 0; }
.gp-prompt, .gp-neg { width: 100%; resize: vertical; font: inherit; }
.gp-sent { word-break: break-word; }
.gp-det summary { cursor: pointer; color: var(--text-2); margin-bottom: 4px; }
.gp-search { width: 100%; }
.gp-loras { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; max-height: 236px; overflow: auto; padding: 2px; }
.gp-lora { display: flex; flex-direction: column; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); cursor: pointer; color: var(--text-2); min-width: 0; }
.gp-lora img, .gp-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; display: grid; place-items: center; background: var(--panel-2); }
.gp-noimg svg { width: 20px; height: 20px; opacity: .5; }
.gp-lora:hover { border-color: var(--accent); }
.gp-lora.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.gp-lora.dim { opacity: .5; }
.gp-ln { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.gp-chips { display: flex; flex-direction: column; gap: 5px; }
.gp-chip { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.gp-chip img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.gp-cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-inline { display: flex; align-items: center; gap: 4px; }
.gp-seed { width: 110px; }
.gp-actions { display: flex; flex-direction: column; gap: 6px; }
.gp-actions .btn { justify-content: center; }

/* Studio Forge : aperçu en direct, actions, ADetailer */
.gen-card { flex-direction: column; align-items: stretch; }
.gen-row { display: flex; align-items: center; gap: 14px; }
.gen-live { max-width: 360px; max-height: 360px; border-radius: 8px; align-self: center; image-rendering: auto; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.gp-agrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gp-agrid .btn { justify-content: flex-start; padding: 0 8px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-actions .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
details.gp-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
details.gp-sec > summary::before { content: '▸'; color: var(--muted); font-size: 10px; transition: transform .15s; }
details.gp-sec[open] > summary::before { transform: rotate(90deg); }
details.gp-sec > summary::-webkit-details-marker { display: none; }
.gp-units { display: flex; flex-direction: column; gap: 8px; }
.gp-unit { display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.pi-grid { grid-template-columns: 130px 1fr; }
.pi-v { word-break: break-word; color: var(--text); }
/* IA en direct */
.lv-win { position: fixed; right: 330px; top: 120px; z-index: 300; width: 380px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.lv-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; cursor: move; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.lv-head svg { width: 15px; height: 15px; color: var(--accent-2); }
.lv-status { color: var(--muted); font-size: 11.5px; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-canvas { display: block; width: 100%; height: auto; background: var(--panel-2); min-height: 120px; }
.lv-note { padding: 6px 10px 8px; }
/* Découpe pour les réseaux */
.sc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.sc-opt { display: flex; align-items: center; gap: 8px; }
.sc-opt[hidden] { display: none; }
.sc-opt .l { min-width: 86px; color: var(--text-2); }
.sc-stage { display: grid; place-items: center; min-height: 200px; background: var(--panel-2); border-radius: 10px; padding: 10px; }
.sc-prev { max-width: 100%; border-radius: 4px; cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
/* Atelier LoRA */
.ls-root { position: fixed; inset: 0; z-index: 250; background: var(--bg, var(--panel-2)); display: flex; flex-direction: column; font-size: 12.5px; }
.ls-top { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--panel); }
.ls-top svg { width: 18px; height: 18px; color: var(--accent-2); }
.ls-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr 330px; }
.ls-left, .ls-right { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.ls-left { border-right: 1px solid var(--border); }
.ls-right { border-left: 1px solid var(--border); }
.ls-center { overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ls-empty { display: grid; place-items: center; text-align: center; }
.ls-h { font-weight: 600; color: var(--text); font-size: 12.5px; margin-top: 2px; }
.ls-projects { display: flex; flex-direction: column; gap: 4px; }
.ls-proj { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; text-align: left; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text-2); cursor: pointer; }
.ls-proj.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ls-pn { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-pc { grid-column: 1; font-size: 11px; color: var(--muted); }
.ls-badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 10.5px; padding: 2px 6px; border-radius: 10px; background: var(--panel-2); }
.ls-badge.running { background: #2f6fdb; color: #fff; }
.ls-badge.done { background: #2e9e5b; color: #fff; }
.ls-badge.error { background: #c94a4a; color: #fff; }
.ls-runbar { padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); font-size: 11.5px; }
.ls-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-row .l { color: var(--text-2); }
.ls-trig { width: 180px; }
.ls-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-tag { width: 140px; }
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ls-card { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.ls-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ls-imgw { position: relative; }
.ls-imgw img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: var(--panel-2); display: block; }
.ls-pick { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.45); border-radius: 5px; padding: 2px 4px; display: flex; }
.ls-fn { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }
.ls-fn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cap { width: 100%; resize: vertical; font: 11.5px var(--ui); }
.ls-form { display: grid; grid-template-columns: 112px 1fr; gap: 6px 8px; align-items: center; }
.ls-form .l { color: var(--text-2); }
.ls-form select { width: 100%; min-width: 0; }
.ls-checks { display: flex; flex-direction: column; gap: 4px; }
.ls-start { justify-content: center; height: 36px; margin-top: 4px; }
.ls-prog { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.ls-bar { height: 8px; border-radius: 6px; background: var(--border-2); overflow: hidden; }
.ls-bar > div { height: 100%; background: var(--accent); transition: width .4s; }
.ls-ptxt { white-space: pre-wrap; color: var(--text-2); font-size: 11.5px; }
.ls-samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ls-samples img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; }
.ls-ckpts { display: flex; flex-direction: column; gap: 4px; }
.ls-ck { display: flex; align-items: center; gap: 6px; }
.ls-ck span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-log { max-height: 140px; overflow: auto; font: 10.5px ui-monospace, Consolas, monospace; background: var(--field); padding: 6px; border-radius: 6px; white-space: pre-wrap; }

/* Studio IA */
#studio { display: none; }
/* Studio IA : mêmes couleurs et composants que l'espace Édition. */
body.studio #main > #toolbar, body.studio #main > #center, body.studio #main > #dock { display: none; }
body.studio:not(.fx-i2i) #optionsbar { display: none; }
body.studio #studio.fx { display: flex; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); }
.fx { --fx-accent: var(--accent); --fx-accent-soft: var(--accent-soft); font: 12.5px var(--ui); color: var(--text); }
.fx .spacer { flex: 1; }
.fx-rail { width: 70px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--chrome); border-right: 1px solid var(--border); overflow: auto; }
.fx-rail button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 500 10.5px var(--ui); cursor: pointer; line-height: 1.15; text-align: center; }
.fx-rail button svg { width: 19px; height: 19px; }
.fx-rail button:hover { background: var(--hover); color: var(--text); }
.fx-rail button.on { background: var(--fx-accent-soft); color: var(--fx-accent); box-shadow: inset 3px 0 0 var(--fx-accent); }
.fx-page { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.fx-top { display: flex; align-items: flex-end; gap: 10px; padding: 8px 14px 9px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fx-top .fx-ck { width: 280px; }
.fx-top .fx-mods { min-width: 300px; max-width: 520px; flex: 0 1 auto; }
.fx-top > .fx-field:nth-of-type(3) { width: 210px; }
.fx-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 16px; }
body.fx-i2i .fx-body { overflow: hidden; display: flex; flex-direction: column; }
.fx-gen { display: flex; flex-direction: column; gap: 12px; }
body.fx-i2i .fx-gen { flex: 1; min-height: 0; }
.fx-toprow { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.fx-prompts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx-pbox { position: relative; }
.fx-tok { position: absolute; right: 8px; top: 7px; font: 11px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--raised); color: var(--text-2); pointer-events: none; }
.fx-ta { display: block; width: 100%; box-sizing: border-box; resize: vertical; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field); color: var(--text); font: 13px/1.45 var(--ui); }
.fx-ta.fx-prompt { min-height: 74px; padding-right: 70px; }
body.fx-i2i .fx-ta.fx-prompt { min-height: 58px; }
.fx-ta.fx-small { min-height: 46px; font-size: 12.5px; }
.fx-ta::placeholder, .fx-in::placeholder { color: var(--muted); opacity: .8; }
.fx-ta:focus, .fx-in:focus, .fx-sel:focus, .fx-num:focus { outline: none; border-color: var(--fx-accent); box-shadow: 0 0 0 3px var(--fx-accent-soft); }
.fx-trnote { font-size: 11.5px; color: var(--muted); min-height: 0; }
.fx-trnote:empty { display: none; }
.fx-side { display: flex; flex-direction: column; gap: 8px; }
.fx-genbox { display: flex; gap: 8px; }
.fx-genbox > * { flex: 1; }
.fx-generate, .fx-interrupt, .fx-skip { height: 46px; border-radius: var(--radius); font: 600 13px var(--ui); cursor: pointer; }
.fx-generate { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.fx-generate:hover { background: var(--accent-2); }
.fx-interrupt { border: 1px solid var(--danger); background: var(--danger); color: var(--accent-ink); }
.fx-generate:disabled, .fx-interrupt:disabled { opacity: .5; cursor: default; }
.fx-skip { border: 1px solid var(--border-2); background: var(--raised); color: var(--text); }
body.fx-i2i .fx-generate, body.fx-i2i .fx-interrupt, body.fx-i2i .fx-skip { height: 58px; }
.fx-ptools-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.fx-ptools { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-ptools-row .fx-styles { min-width: 120px; }
.fx-ebtn { min-width: 34px; height: 34px; padding: 0 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.fx-ebtn:hover, .fx-ebtn.on { border-color: var(--fx-accent); }
.fx-ebtn.on { background: var(--fx-accent-soft); }
/* Chercher / remplacer dans l'invite (studio.js, findBar) */
.kf-bar { padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--raised); }
.kf-bar[hidden], .kf-row[hidden] { display: none !important; }
.kf-row { display: flex; align-items: center; gap: 4px; }
.kf-row2 { margin-top: 5px; }
.kf-field { flex: 1 1 auto; min-width: 120px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); }
.kf-field:focus-within { border-color: var(--fx-accent); box-shadow: 0 0 0 3px var(--fx-accent-soft); }
.kf-field.kf-none { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent); }
.kf-glass { font-size: 12px; opacity: .6; }
.kf-field .kf-input { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.kf-field .kf-input:focus { box-shadow: none; }
.kf-rinput { flex: 1 1 auto; min-width: 0; height: 30px; }
.kf-count { min-width: 30px; font: 11.5px var(--mono); text-align: right; color: var(--text-2); white-space: nowrap; }
.kf-field.kf-none .kf-count { color: var(--danger); }
.kf-btn { height: 30px; min-width: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: 12px var(--ui); cursor: pointer; white-space: nowrap; }
.kf-btn:hover { border-color: var(--border); background: var(--field); }
.kf-btn.on { border-color: var(--fx-accent); background: var(--fx-accent-soft); }
.kf-row2 .kf-btn { border-color: var(--border); }
.kf-bar .kf-scope { flex: 0 0 96px; width: 96px; height: 30px; padding: 0 6px; font-size: 12px; }
.kf-mirror { position: absolute; box-sizing: border-box; margin: 0; border: 0; overflow: hidden; pointer-events: none; z-index: 1; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; background: transparent; }
.kf-mirror mark { color: transparent; background: rgba(255, 196, 0, .42); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 160, 0, .35); }
.kf-mirror mark.kf-cur { background: rgba(255, 110, 0, .55); box-shadow: 0 0 0 2px rgba(255, 110, 0, .85); }
.fx-tok { z-index: 2; }
/* Historique des invites (studio.js, historyDialog) */
.kf-hbox { display: flex; flex-direction: column; gap: 8px; }
.kf-hist { max-height: 56vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.kf-hrow { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--field); cursor: pointer; }
.kf-hrow:hover { border-color: var(--fx-accent); }
.kf-hmeta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.kf-hmeta > span { flex: 1; }
.kf-hmeta .fx-ebtn { min-width: 26px; height: 24px; font-size: 12px; }
.kf-hp { font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kf-hn { margin-top: 3px; font-size: 11.5px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kf-hn::before { content: 'Négative : '; color: var(--muted); }
.fx-styles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); cursor: pointer; text-align: left; }
.fx-styles .fx-lbl { font-size: 10.5px; }
.fx-styles-v { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.fx-cols { display: grid; grid-template-columns: minmax(460px, 46%) minmax(0, 1fr); gap: 14px; align-items: start; }
body.fx-i2i .fx-cols { flex: 1; min-height: 0; grid-template-columns: minmax(440px, 520px) minmax(0, 1fr); align-items: stretch; }
.fx-left { min-width: 0; display: flex; flex-direction: column; }
body.fx-i2i .fx-left { overflow: auto; padding-right: 4px; }
.fx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-wrap: wrap; }
.fx-tabs button { padding: 7px 13px; border: 0; background: transparent; color: var(--text-2); font: 500 12.5px var(--ui); border-radius: 8px 8px 0 0; cursor: pointer; }
.fx-tabs button:hover { color: var(--text); background: var(--hover); }
.fx-tabs button.on { color: var(--fx-accent); background: var(--fx-accent-soft); box-shadow: inset 0 -2px 0 var(--fx-accent); }
.fx-tabs.fx-subtabs { margin: 0; }
.fx-tabs.fx-subtabs button { padding: 5px 11px; font-size: 12px; }
.fx-tabs.fx-modes { margin: 0; }
.fx-panel { display: flex; flex-direction: column; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); min-width: 0; }
.fx-left > .fx-panel + .fx-panel { margin-top: 10px; }
.fx-h { font: 600 13.5px var(--ui); }
.fx-note { color: var(--text-2); }
.fx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fx-lbl { font: 600 12px var(--ui); color: var(--text-2); }
.fx-info { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fx-sel, .fx-in { height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: 13px var(--ui); min-width: 0; width: 100%; }
.fx-sel:disabled { opacity: .6; }
.fx-slider .fx-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-num { width: 78px; height: 26px; box-sizing: border-box; padding: 0 6px; text-align: right; border: 1px solid var(--border); border-radius: 6px; background: var(--field); color: var(--text); font: 12.5px var(--mono); }
.fx input[type=range].fx-rng { height: 16px; margin: 2px 0 0; }
.fx input[type=range].fx-rng::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--fx-accent) var(--p, 0%), var(--border-2) var(--p, 0%)); }
.fx input[type=range].fx-rng::-webkit-slider-thumb { background: var(--fx-accent); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--fx-accent); }
.fx-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; }
.fx-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.fx-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-mid { align-items: center; justify-content: center; gap: 6px; }
.fx-accs { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-accs > .fx-acc { flex: 1 1 200px; }
.fx-accs > .fx-acc.open { flex-basis: 100%; }
.fx-acc { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.fx-acc.active { border-color: var(--accent); }
.fx-acc-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; font-weight: 600; }
.fx-acc-h input, .fx-check input, .fx-ropt input { accent-color: var(--fx-accent); }
.fx-acc-t { flex: 1; }
.fx-acc-a { font-size: 10px; color: var(--muted); }
.fx-acc-b { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; }
.fx-acc-b .fx-acc { background: var(--panel); }
.fx-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.fx-radio { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-ropt { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); cursor: pointer; font-size: 12.5px; }
.fx-ropt input { pointer-events: none; margin: 0; }
.fx-ropt.on { border-color: var(--fx-accent); background: var(--fx-accent-soft); }
.fx-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.fx-fmt { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.fx-fmt-l { font: 700 10.5px var(--ui); letter-spacing: .07em; color: var(--muted); margin-right: 2px; }
.fx-chip { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); color: var(--text-2); font: 600 11px var(--ui); cursor: pointer; }
.fx-chip:hover { border-color: var(--fx-accent); }
.fx-chip.on { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.fx-chip.fx-scale { border-radius: 6px; }
.fx-seedrow { display: flex; align-items: flex-end; gap: 8px; }
.fx-seedrow .fx-field { flex: 1; }
.fx-seedrow .fx-check { height: 34px; }
.fx-preset { display: flex; gap: 8px; align-items: flex-end; }
.fx-preset .grow { flex: 1; }
.fx-btn2 { height: 34px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--raised); color: var(--text); cursor: pointer; font: 500 12.5px var(--ui); white-space: nowrap; }
.fx-btn2:hover { border-color: var(--fx-accent); }
.fx-btn2:disabled { opacity: .5; cursor: default; }
.fx-btn2.primary { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.fx-btn2.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.fx-script { display: flex; flex-direction: column; gap: 10px; }
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.fx-card { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--raised); cursor: pointer; border: 2px solid transparent; }
.fx-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-nopv { display: flex; align-items: center; justify-content: center; height: 100%; font: 800 14px var(--ui); color: var(--muted); letter-spacing: .05em; background: repeating-linear-gradient(45deg, var(--raised) 0 10px, var(--panel-2) 10px 20px); }
.fx-card-n { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; font: 600 11.5px/1.25 var(--ui); word-break: break-word; }
.fx-card.on { border-color: var(--fx-accent); }
.fx-card:hover { box-shadow: 0 0 0 3px var(--fx-accent-soft); }
.fx-lorabar { display: flex; gap: 6px; align-items: center; }
.fx-search { flex: 1; }
.fx-sort { width: auto; max-width: 200px; }
.fx-folders { display: flex; flex-wrap: wrap; gap: 5px; }
.fx-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx-view { position: relative; min-height: 440px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-view > img { max-width: 100%; max-height: calc(100vh - 330px); object-fit: contain; display: block; }
.fx-view > img.fx-live { max-height: 74vh; }
.fx-ph { opacity: .22; }
.fx-ph svg { width: 44px; height: 44px; }
.fx-prog { position: absolute; left: 0; right: 0; top: 0; padding: 9px 11px 14px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); color: #fff; font: 12px var(--mono); z-index: 1; }
.fx-prog-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.fx-prog-bar i { display: block; height: 100%; width: 0; background: var(--fx-accent); transition: width .3s; }
.fx-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-thumbs img { width: 68px; height: 68px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.fx-thumbs img.on { border-color: var(--fx-accent); }
.fx-outbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fx-sep { width: 1px; height: 22px; background: var(--border-2); margin: 0 4px; }
.fx-outinfo { white-space: pre-wrap; font: 12px/1.5 var(--ui); color: var(--text-2); padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); user-select: text; overflow-wrap: anywhere; }
.fx-oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; }
.fx-pnginfo { min-height: 240px; }
.fx-canvascol { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.fx-i2ihead { display: flex; flex-direction: column; gap: 7px; }
.fx-i2itools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.fx-docinfo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.fx-help { font-size: 12px; color: var(--muted); }
.fx-slot { flex: 1; min-height: 280px; display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--workspace); }
.fx-slot > #center { flex: 1; min-width: 0; }
.fx-strip { display: flex; flex-direction: column; gap: 6px; }
.fx-strip:empty { display: none; }
.fx-strip-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fx-strip .fx-thumbs img { width: 54px; height: 54px; }
.fx-strip-prog { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.fx-strip-prog img { height: 110px; border-radius: 6px; }
.fx-strip-prog .fx-prog { position: static; flex: 1; background: none; }
.fx-eng { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); padding-bottom: 6px; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.fx-dot.ok { background: #3fb36b; }
.fx-dot.busy { background: #e0a020; animation: egpulse 1s infinite alternate; }
.fx-modchips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 34px; box-sizing: border-box; padding: 3px 4px 3px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); }
.fx-mchip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border-radius: 6px; background: var(--raised); font-size: 12px; white-space: nowrap; }
.fx-mchip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 4px; }
.fx-mchip button:hover { color: var(--text); }
.fx-modadd { margin-left: auto; width: 38px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.fx-dropzone { border: 2px dashed var(--border-2); border-radius: 12px; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); cursor: pointer; text-align: center; padding: 12px; }
.fx-dropzone.over, .fx-dropzone:hover { border-color: var(--fx-accent); }
.fx-dropzone img { max-width: 100%; max-height: 52vh; border-radius: 8px; }
.fx-i2i-work { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fx-source .fx-dropzone { min-height: 170px; }
.fx-source .fx-dropzone img { max-height: 30vh; object-fit: contain; }
.fx-source .fx-docinfo { overflow-wrap: anywhere; }
.fx-painter { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; touch-action: none; cursor: crosshair; outline: none; }
.fx-painter:focus-visible { outline: 2px solid var(--fx-accent); }
.fx-source .fx-paintzone { cursor: crosshair; }
.fx-i2itools > .fx-slider { width: 175px; }
body.studio .ws-to-studio { display: none; }
.fx-img2img > .fx-cols > .fx-out { position: sticky; top: 0; }
.fx-img2img .fx-view { min-height: 340px; }
.fx-img2img .fx-view > img { max-height: 48vh; }
@media (max-width: 1100px) {
  .fx-img2img .fx-cols { grid-template-columns: minmax(0, 1fr); }
  .fx-img2img > .fx-cols > .fx-out { position: static; }
  .fx-img2img .fx-toprow { grid-template-columns: minmax(0, 1fr); }
}
.fx-settings { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
/* LoRA actifs sous l'invite, bouton 🛠 des cartes, fiche d'un LoRA */
.fx-lchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-lchips:empty { display: none; }
.fx-lchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-size: 12px; }
.fx-lchip img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.fx-lchip .fx-num { width: 58px; height: 22px; }
.fx-lchip.missing { border-color: var(--danger); background: transparent; }
.fx-ebtn.sm { min-width: 24px; height: 22px; padding: 0 4px; font-size: 12px; }
.fx-card-edit { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 1; }
.fx-card:hover .fx-card-edit { opacity: 1; }
.fx-card-edit:hover { background: var(--fx-accent); }
.fx-meta { display: flex; flex-direction: column; gap: 10px; }
.fx-meta-top { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.fx-lpv { width: 150px; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--raised); }
.fx-lpv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-md { font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.fx-md:empty { display: none; }
.fx-md code { font: 11.5px var(--mono); background: var(--raised); padding: 0 4px; border-radius: 4px; }
.fx-toprow.fx-compact { display: flex; flex-direction: column; gap: 6px; }
.fx-output-actions { display: grid; gap: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.fx-actiongroup { display: grid; gap: 6px; min-width: 0; }
.fx-actionlabel { color: var(--muted); font-size: 11px; font-weight: 600; }
.fx-actionbuttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fx-actionbuttons .fx-btn2 { height: auto; min-height: 34px; padding: 8px 10px; white-space: normal; text-align: left; line-height: 1.3; }
.fx-actiongroup[data-group="files"] .fx-actionbuttons { grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); }
/* Panneau optionnel de dessin dans l'Édition. */
.edraw { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 9px; height: 100%; overflow-y: auto; padding: 2px; }
.edraw .fx-ta { font-size: 12px; border-radius: var(--radius); }
.edraw .fx-ta.fx-prompt { min-height: 62px; }
.edraw .fx-generate, .edraw .fx-interrupt, .edraw .fx-skip { height: 34px; font-size: 12px; }
.edraw .fx-ptools-row { flex-wrap: wrap; }
.edraw .fx-styles { min-width: 90px; min-height: 30px; }
.edraw .fx-lchip { max-width: 100%; flex-wrap: wrap; }
.edraw .fx-lchip > span { overflow-wrap: anywhere; }
.edraw .fx-lorabar { flex-wrap: wrap; }
.edraw .fx-sort { max-width: none; flex: 1; }
.edraw .fx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edraw .fx-panel { padding: 7px; gap: 7px; }
.edraw .fx-btn2 { height: auto; min-height: 30px; white-space: normal; }
.edraw-details > summary { cursor: pointer; color: var(--text-2); padding: 5px 0; font-weight: 600; }
.edraw-details > .fx-left { margin-top: 7px; }
.edraw-status { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.edraw-model { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.edraw > * { flex-shrink: 0; }
.pgroup[data-id="g-nav"]:has(.ppane.active .edraw) { flex-shrink: 0; }
.pgroup[data-id="g-nav"]:has(.ppane.active .edraw) .pbody { height: 390px; max-height: 48vh; flex: 0 1 auto; }
.pgroup[data-id="g-nav"] .ptabs { overflow-x: auto; scrollbar-width: thin; }
.pgroup[data-id="g-nav"] .ptab { padding: 0 6px; font-size: 11px; flex-shrink: 0; }
.pgroup[data-id="g-nav"] .pcollapse { flex-shrink: 0; }
/* Train LoRA */
.fx-train { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 12px; align-items: start; max-width: 2400px; }
.lt-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-intro { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.lt-card .fx-h { margin-bottom: 2px; }
.lt-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lt-row > .fx-field { flex: 1; min-width: 220px; }
.lt-row > .fx-md { flex: 1; }
.lt-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; }
.lt-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; }
.lt-drop { min-height: 90px; }
.lt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.lt-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--raised); }
.lt-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; opacity: 0; }
.lt-cell:hover .lt-x { opacity: 1; }
.lt-x:hover { background: var(--danger); }
.lt-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; max-height: 460px; overflow: auto; }
.lt-caprow { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.lt-caprow img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.lt-acc > summary { list-style: none; }
.lt-acc > summary::-webkit-details-marker { display: none; }
.lt-acc > summary::after { content: '◀'; font-size: 10px; color: var(--muted); }
.lt-acc[open] > summary::after { content: '▼'; }
.lt-go .fx-btn2 { height: 42px; }
.lt-start { flex: 2; font-size: 14px; }
.lt-bar { height: 6px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.lt-bar > i { display: block; height: 100%; background: var(--fx-accent); transition: width .4s; }
.lt-log { max-height: 150px; overflow: auto; margin: 0; padding: 8px; border-radius: 8px; background: var(--field); font: 11px var(--mono); white-space: pre-wrap; color: var(--text-2); }
.lt-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.lt-samples img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.lt-results { display: flex; flex-direction: column; gap: 6px; }
.lt-results:empty { display: none; }
.lt-ck { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; font: 12px var(--mono); }
.gp-studio { gap: 8px; }
#studio-bar { display: none; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
body.studio #studio-bar { display: flex; }
.sb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-modes { display: flex; gap: 4px; background: var(--panel-2); padding: 3px; border-radius: 10px; }
.sb-mode { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 500 12.5px var(--ui); cursor: pointer; white-space: nowrap; }
.sb-mode svg { width: 15px; height: 15px; }
.sb-mode:hover { color: var(--text); background: var(--hover); }
.sb-mode.on { background: var(--panel); color: var(--accent-2); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sb-gen { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 14px var(--ui); cursor: pointer; }
.sb-gen svg { width: 17px; height: 17px; }
.sb-gen:hover { background: var(--accent-2); }
.sb-tools { min-height: 30px; }
.sb-help { color: var(--muted); font-size: 12px; max-width: 520px; text-align: right; }
.sb-dim { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ws-switch { display: flex; background: var(--panel-2); border-radius: 9px; padding: 2px; margin-right: 8px; }
.ws-btn { height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: 500 12px var(--ui); cursor: pointer; -webkit-app-region: no-drag; }
.ws-btn.on { background: var(--panel); color: var(--accent-2); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.eg-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-right: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-2); color: var(--text-2); font: 500 11.5px var(--ui); cursor: pointer; -webkit-app-region: no-drag; }
.eg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.eg-chip[data-state="ready"] .eg-dot, .eg-chip[data-state="external"] .eg-dot { background: #3fb36b; }
.eg-chip[data-state="starting"] .eg-dot { background: #e0a020; animation: egpulse 1s infinite alternate; }
.eg-chip[data-state="error"] .eg-dot { background: #d04040; }
@keyframes egpulse { to { opacity: .35; } }
.eg-log { max-height: 60vh; overflow: auto; font: 11px ui-monospace, Consolas, monospace; white-space: pre-wrap; background: var(--field); padding: 8px; border-radius: 8px; margin: 0; }
/* Galerie */
.ga { display: flex; flex-direction: column; gap: 8px; }
.ga-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ga-cell { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); cursor: pointer; aspect-ratio: 1; }
.ga-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-cell:hover { border-color: var(--accent); }
.ga-k { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }

/* Espaces intégrés : ComfyUI, Wallpaper, Vidéo (KaneClip) */
#ws-ext { display: none; }
body.ws-ext #main > :not(#ws-ext), body.ws-ext #optionsbar { display: none !important; }
body.ws-ext #ws-ext { display: flex; flex: 1; min-width: 0; min-height: 0; background: var(--bg); }
.wx-ws { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.wx-ws[hidden] { display: none; }
.wx-bar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wx-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.wx-title svg { width: 16px; height: 16px; color: var(--accent); }
.wx-sub { color: var(--text-2); font-size: 12px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.wx-sep { width: 1px; height: 22px; background: var(--border-2); margin: 0 2px; }
.wx-note { font-size: 11.5px; color: var(--muted); }
.wx-bar .btn.on { border-color: var(--accent); color: var(--accent); }
.wx-body { flex: 1; min-height: 0; display: flex; }
.wx-frame { flex: 1; min-width: 0; display: flex; }
.wx-iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #111; }
.wx-empty { margin: auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-2); padding: 24px; }
.wx-empty .wx-icon svg { width: 46px; height: 46px; opacity: .5; }
.wx-empty b { font-size: 18px; color: var(--text); }
.wx-msg { color: var(--muted); font-size: 12.5px; }
.wx-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: auto; background: var(--panel); border-left: 1px solid var(--border); }
.wx-side[hidden] { display: none; }
.wx-side-h { display: flex; align-items: center; gap: 6px; }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.wx-cell { position: relative; padding: 0; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); cursor: pointer; }
.wx-cell img, .wx-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-cell:hover { border-color: var(--accent); }
.wx-badge { position: absolute; left: 4px; bottom: 4px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }

/* ------------------------------------------------------------ préférences */
.pf { display: flex; height: min(640px, calc(100vh - 170px)); min-height: 420px; }
.pf-side { width: 200px; flex-shrink: 0; padding: 12px; border-right: 1px solid var(--border); overflow: auto; }
.pf-side > .field { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.pf-side .side-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.pf-main { flex: 1; min-width: 0; overflow: auto; padding: 4px 24px 22px; }
.pf-title { font-size: 19px; font-weight: 600; margin: 14px 0 0; letter-spacing: -.01em; }
.pf-group { margin-top: 18px; }
.pf-group h4 { margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.pf-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.pf-row.stack .pf-ctl { width: 100%; }
.pf-row.pf-click .pf-text { cursor: pointer; }
.pf-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-text b { font-weight: 500; }
.pf-text span { color: var(--muted); font-size: 11.5px; line-height: 1.5; max-width: 470px; }
.pf-ctl { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pf-empty { margin: 60px auto; text-align: center; color: var(--muted); }

/* éléments masquables (Préférences › Affichage) */
body.pf-hide-hero .suite-hero, body.pf-hide-pipeline .suite-pipeline, body.pf-hide-library .suite-library, body.pf-hide-homefoot .suite-home-footer,
body.pf-hide-capture .sb-capture, body.pf-hide-libbtn .sb-library, body.pf-hide-activity .sb-activity,
body.pf-hide-statusbar #statusbar, body.pf-hide-gpu #gpu-status,
body.pf-hide-ws-studio .ws-btn[data-v="studio"], body.pf-hide-ws-wallpaper .ws-btn[data-v="wallpaper"],
body.pf-hide-ws-comfyui .ws-btn[data-v="comfyui"], body.pf-hide-ws-video .ws-btn[data-v="video"] { display: none !important; }
body.pf-reduce-motion *, body.pf-reduce-motion *::before, body.pf-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
body.pf-home-empty .suite-home-scroll::before { content: "Tout est masqué sur cet écran. Rétablissez-le dans Préférences › Affichage (Ctrl+K)."; display: block; margin: 80px auto; max-width: 420px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ panneau vertical Kane App (bouton K) */
.brand.kn-brand { cursor: pointer; border-radius: 8px; }
.brand.kn-brand:hover .brand-mark { filter: brightness(1.15); }
.brand.kn-brand.kn-on .brand-mark { outline: 2px solid var(--accent-2); outline-offset: 2px; }
#kane-nav { position: fixed; left: 0; top: var(--titlebar-h); bottom: 0; width: 236px; z-index: 90; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; background: var(--chrome); border-right: 1px solid var(--border); box-shadow: 8px 0 26px rgba(0,0,0,.28); overflow: auto; animation: kn-in .14s ease-out; }
#kane-nav[hidden] { display: none; }
@keyframes kn-in { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
html.kn-pinned #kane-nav { box-shadow: none; animation: none; }
html.kn-pinned #app > :not(#titlebar) { margin-left: 236px; }
.kn-head { display: flex; align-items: center; gap: 6px; }
#kane-nav .suite-project-button { flex: 1; min-width: 0; max-width: none; height: 32px; }
.kn-title { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 8px 2px; }
#kane-nav .ws-switch { flex-direction: column; gap: 2px; padding: 0; margin: 0; background: transparent; border-radius: 0; }
#kane-nav .ws-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; text-align: left; font-size: 13px; border-radius: 6px; position: relative; color: var(--text-2); }
#kane-nav .ws-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--space-color, var(--accent)); opacity: .85; }
#kane-nav .ws-btn:not(.on):hover { background: var(--hover); color: var(--text); }
#kane-nav .ws-btn.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 3px 0 var(--space-color, var(--accent)); }
#kane-nav .ws-btn[data-running="true"]::after { content: "actif"; margin-left: auto; font-size: 10px; color: var(--muted); }
.kn-actions { display: flex; flex-direction: column; gap: 4px; }
.kn-actions .btn, .kn-foot .btn { width: 100%; justify-content: flex-start; }
.kn-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Aperçu en direct : la zone prend la forme de l'image et l'aperçu la remplit (avant : petite image au milieu d'un grand cadre) */
.fx-view.live { width: 100%; box-sizing: border-box; min-height: 340px; max-height: calc(100vh - 260px); background: #101216; }
.fx-view.live > img.fx-live { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.fx-view.live > img.fx-live[hidden] { display: none; }
.fx-view.live .fx-prog { background: linear-gradient(rgba(0, 0, 0, .72), transparent); font-size: 12.5px; }
.fx-view.fx-peek, .iv-viewport.iv-click-open { cursor: zoom-in; }
.iv-viewport.iv-click-open:active { cursor: grabbing; }
.fx-stale { padding: 6px 10px; border-left: 3px solid var(--fx-accent); background: var(--fx-accent-soft); border-radius: 6px; margin: 0 0 8px; }

/* Merge (Studio IA) */
.mg-page { grid-template-columns: minmax(0, 1100px); }
.mg-col { gap: 12px; }
.mg-rows { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mg-row { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(200px, 1fr) 28px; gap: 12px; align-items: end; width: 100%; }
.mg-pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mg-note { min-height: 16px; }
.mg-x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--raised); color: var(--text-2); cursor: pointer; }
.mg-x:hover:not(:disabled) { background: var(--danger); color: #fff; }
.mg-x:disabled { opacity: .3; cursor: default; }
.mg-warn:empty { display: none; }
.mg-err { color: var(--danger); }
.mg-result { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mg-bar { margin-top: 4px; }