:root {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 5px;
  --r-l: 9px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --chassis: #e4e7e2;
  --faceplate: #f2f3f0;
  --sheet: #fff;
  --recess: #e9ebe6;
  --raised: #fff;
  --hover: rgba(21, 25, 29, 0.06);
  --sel: rgba(31, 95, 224, 0.1);
  --ink: #15191d;
  --ink-2: #4a545d;
  --ink-3: #66707a;
  --on-ink: #f2f3f0;
  --seam: rgba(21, 25, 29, 0.11);
  --seam-2: rgba(21, 25, 29, 0.24);
  --signal: #1f5fe0;
  --ok: #168a4d;
  --warn: #a86d00;
  --err: #cc3326;
  --off: #9aa3a9;
  --t-c: #66707a;
  --t-s: #8a5a00;
  --t-k: #1f5fe0;
  --t-g: #0b7770;
  --t-n: #a14a14;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --chassis: #0b0e10;
  --faceplate: #111519;
  --sheet: #161b20;
  --recess: #0b0e10;
  --raised: #1f272d;
  --hover: rgba(255, 255, 255, 0.06);
  --sel: rgba(106, 162, 255, 0.16);
  --ink: #e6eaed;
  --ink-2: #a0abb3;
  --ink-3: #85919b;
  --on-ink: #0b0e10;
  --seam: rgba(255, 255, 255, 0.08);
  --seam-2: rgba(255, 255, 255, 0.2);
  --signal: #6aa2ff;
  --ok: #3ddc84;
  --warn: #f0b429;
  --err: #ff6b5e;
  --off: #4a555d;
  --t-c: #85919b;
  --t-s: #e6b673;
  --t-k: #6aa2ff;
  --t-g: #6fd0c8;
  --t-n: #f0a070;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--chassis);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  text-wrap: balance;
  letter-spacing: -0.012em;
}
p {
  text-wrap: pretty;
}
[hidden] {
  display: none !important;
}
.num {
  font-variant-numeric: tabular-nums;
}
.mono {
  font-family: var(--mono);
}
.mut {
  color: var(--ink-3);
}
.sec {
  color: var(--ink-2);
}
.grow {
  flex: 1;
  min-width: 0;
}
.trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— coque ——— */
.app {
  display: grid;
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: 44px minmax(0, 1fr) auto 26px;
  grid-template-areas: "top top" "rail main" "rail dock" "status status";
}
.app[data-mode="launcher"] {
  grid-template-columns: minmax(0, 1fr);
}
.app[data-mode="launcher"] .rail,
.app[data-mode="launcher"] .dock {
  display: none;
}
.app[data-mode="launcher"] {
  grid-template-areas: "top" "main" "dock" "status";
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
@keyframes ping {
  from {
    box-shadow: 0 0 0 0 var(--ok);
  }
  to {
    box-shadow: 0 0 0 7px transparent;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--r);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--seam-2);
  white-space: nowrap;
  transition:
    background 0.15s var(--ease),
    transform 0.12s var(--ease),
    opacity 0.15s;
}
.btn:hover:not(:disabled) {
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--seam-2);
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn.pri {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
  font-weight: 500;
}
.btn.pri:hover:not(:disabled) {
  background: var(--ink);
  opacity: 0.88;
}
.btn.quiet {
  background: none;
  box-shadow: none;
}
.btn.quiet:hover:not(:disabled) {
  background: var(--hover);
}
.btn.bad {
  color: var(--err);
}
.btn.sm {
  min-height: 26px;
  padding: 0 8px;
}
kbd {
  font: 11px var(--sans);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.pri kbd {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  box-shadow: none;
}
[data-theme="dark"] .pri kbd {
  background: rgba(0, 0, 0, 0.14);
}
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--chassis);
}
.rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 12px;
  position: relative;
  transition:
    background 0.15s,
    color 0.15s;
}
.rail button:hover {
  background: var(--hover);
  color: var(--ink);
}
.rail button[aria-current="page"] {
  background: var(--faceplate);
  color: var(--ink);
  font-weight: 500;
}
.rail button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--ink);
}
.rail svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail .sp {
  flex: 1;
}
.badge {
  position: absolute;
  top: 6px;
  right: 12px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--err);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  font-weight: 600;
}
main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--faceplate);
  border-top-left-radius: 10px;
  overflow: hidden;
}
.app[data-mode="launcher"] main {
  border-radius: 0;
  background: var(--faceplate);
}
.stage,
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.view {
  animation: in 0.2s var(--ease);
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 14px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--chassis);
}
.status button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  color: inherit;
}
.status button:hover {
  background: var(--hover);
  color: var(--ink);
}
.lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--off);
  flex: none;
}
.lamp.ok {
  background: var(--ok);
}
.lamp.warn {
  background: var(--warn);
}
.lamp.err {
  background: var(--err);
}

/* ——— primitives de vue ——— */
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  flex-wrap: wrap;
  min-height: 44px;
}
.bar.tight {
  padding: 4px 8px;
  min-height: 36px;
}
.sheet {
  background: var(--sheet);
}
.in,
select.in {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--r);
  border: 0;
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
  width: 100%;
}
.in:hover {
  box-shadow: inset 0 0 0 1px var(--seam-2);
}
.in:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--signal);
  background: var(--sheet);
}
select.in {
  width: auto;
  padding-right: 6px;
}
.field {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}
.field > span {
  font-weight: 500;
  color: var(--ink-2);
  font-size: 12px;
}
.hint {
  color: var(--ink-3);
  font-size: 12px;
}
.hint.bad {
  color: var(--err);
}
.hint.good {
  color: var(--ok);
}
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.seg button {
  min-height: 26px;
  padding: 0 12px;
  border-radius: 5px;
  color: var(--ink-2);
}
.seg button:hover {
  color: var(--ink);
}
.seg button[aria-pressed="true"] {
  background: var(--sheet);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--seam-2);
}
.empty {
  display: grid;
  gap: 6px;
  place-content: center;
  justify-items: start;
  padding: 32px;
  color: var(--ink-2);
  max-width: 46ch;
  margin: auto;
}
.empty b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}
.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  min-height: 28px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--faceplate);
  flex: none;
  flex-wrap: wrap;
}

/* ——— accueil ——— */
.launch {
  flex:1; overflow:auto; width:100%; max-width:1160px; margin:0 auto;
  padding:clamp(24px,5vh,56px) clamp(18px,4vw,48px); display:flex; flex-direction:column; gap:30px;
}
.welcome-kicker {font-size:11px; font-weight:600; letter-spacing:.13em; color:var(--signal); margin:0 0 12px;}
.launch h1 {font-size:clamp(26px,3.3vw,40px); font-weight:600; line-height:1.16; letter-spacing:-.035em; margin:0 0 12px;}
.welcome-intro {color:var(--ink-2); font-size:15px; margin:0;}
.home-actions {display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:stretch;}
.create-project, .open-project {border:1px solid var(--seam); border-radius:14px; padding:26px; min-width:0;}
.create-project {background:var(--sheet); box-shadow:0 4px 16px #00000004;}
.open-project {background:var(--faceplate); display:flex; flex-direction:column;}
.launch h2 {font-size:17px; line-height:1.35; font-weight:600; margin:0; letter-spacing:-.015em;}
.home-card-heading {display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.home-card-heading p, .home-card-intro {color:var(--ink-2); margin:4px 0 0; font-size:13px;}
.home-icon {display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--seam); border-radius:10px; flex:none; color:var(--signal); background:var(--sheet);}
.home-icon svg {width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.starter-options {display:grid; grid-template-columns:1fr 1fr; border:0; gap:10px; padding:0; margin:0 0 22px; min-width:0;}
.starter-choice {position:relative; display:flex; align-items:flex-start; gap:9px; padding:15px 12px; border:1px solid var(--seam-2); border-radius:9px; cursor:pointer; min-width:0;}
.starter-choice:has(:checked) {background:var(--sel); border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal);}
.starter-choice:has(:focus-visible) {outline:2px solid var(--signal); outline-offset:3px;}
.starter-choice:has(:disabled) {opacity:.6; cursor:default;}
.starter-choice input {accent-color:var(--signal); flex:none; width:15px; height:15px; margin:3px 0 0;}
.starter-copy {display:flex; flex-direction:column; gap:7px; min-width:0;}
.starter-copy b {font-size:13px; font-weight:600;}
.starter-copy > span {font-size:12px; line-height:1.5; color:var(--ink-2);}
.starter-copy small {font-size:10px; font-weight:500; color:var(--ink-2); margin-top:3px;}
.project-name {margin-bottom:0; gap:7px;}
.project-name > span {font-size:12px; font-weight:500;}
.project-name .in {min-height:42px; width:100%; background:var(--faceplate); padding:9px 12px; font-size:14px;}
.project-name-help {min-height:32px; font-size:11px; padding-top:6px; margin:0 0 16px;}
.create-footer {display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--seam); padding-top:18px;}
.create-footer > span {font-size:11px; color:var(--ink-2); max-width:23ch;}
.create-footer .btn {min-height:42px; padding:9px 16px; white-space:nowrap; gap:12px;}
.home-card-intro {margin-bottom:20px;}
.open-source {display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--seam); background:var(--sheet); border-radius:10px; padding:16px 14px; margin-bottom:12px; transition:border-color .15s, background .15s;}
.open-source:hover {border-color:var(--signal); background:var(--sel);}
.open-source .home-icon {width:36px; height:38px; border:0; background:transparent; color:var(--ink-2);}
.open-source > span:nth-child(2) {display:flex; flex-direction:column; gap:5px; min-width:0;}
.open-source b {font-size:13px; font-weight:600;}
.open-source > span:nth-child(2) > span {font-size:12px; color:var(--ink-2); line-height:1.45;}
.source-arrow {color:var(--ink-2); margin-left:auto; width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.home-note {margin-top:auto; padding-top:18px; font-size:12px; line-height:1.6; color:var(--ink-2);}
.home-note b {color:var(--ink); font-weight:500;}
.home-note p {margin:5px 0 0; max-width:45ch;}
.home-footer {display:flex; justify-content:space-between; gap:14px; align-items:flex-start; font-size:11px; color:var(--ink-2); padding-bottom:8px;}
.home-environment {max-width:400px;}
.home-environment summary {cursor:pointer; text-align:right;}
.home-environment .env {padding:12px 0; font-size:11px; gap:8px; display:grid;}
.home-section-head {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px;}
.home-count {display:inline-block; color:var(--ink-2); background:var(--recess); font-size:11px; border-radius:5px; padding:2px 6px; margin-left:5px; vertical-align:middle;}
#projectFilter {max-width:220px; min-width:0; font-size:12px; min-height:36px;}
.recent-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.proj-row {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; width:100%; text-align:left; padding:16px; border:1px solid var(--seam); background:var(--sheet); border-radius:10px;}
.proj-row:hover {border-color:var(--signal); background:var(--sel);}
.proj-row b {font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.proj-row .go {grid-column:2; grid-row:1/3; align-self:center; color:var(--ink-2); font-size:18px;}
.proj-row .project-meta {font-size:11px; line-height:1.5; color:var(--ink-2);}
#showRecent {margin-top:12px;}
.recent-empty {grid-column:1/-1; color:var(--ink-2); font-size:13px; padding:10px 0;}
@media(max-width:900px) {
  .home-actions {grid-template-columns:1fr; gap:16px;}
  .open-project {padding:22px;}
  .recent-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:520px) {
  .launch {gap:24px;}
  .create-project, .open-project {padding:18px; border-radius:10px;}
  .starter-options {grid-template-columns:1fr;}
  .starter-choice {padding:12px;}
  .starter-copy small {display:none;}
  .create-footer {flex-direction:column-reverse; align-items:stretch; gap:10px;}
  .create-footer > span {max-width:none; text-align:center;}
  .create-footer .btn {justify-content:center;}
  .home-footer, .home-section-head {flex-direction:column; align-items:stretch;}
  .home-environment summary {text-align:left;}
  #projectFilter {max-width:none;}
  .recent-grid {grid-template-columns:1fr;}
}
.panel {
  background: var(--sheet);
  border-radius: var(--r-l);
  padding: 18px;
  box-shadow: 0 0 0 1px var(--seam);
}
.panel h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}
.radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--seam);
  cursor: pointer;
  margin-bottom: 6px;
  align-items: start;
}
.radio:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.radio input {
  margin: 3px 0 0;
  accent-color: var(--ink);
  grid-row: 1/3;
}
.radio b {
  font-weight: 500;
}
.env {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 14px clamp(16px, 5vw, 72px);
  color: var(--ink-2);
  font-size: 12px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.env span {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ——— code ——— */
.ed-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--sheet);
}
.edwrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  font: 13px/20px var(--mono);
  position: relative;
  tab-size: 2;
}
.gut {
  padding: 12px 10px 12px 14px;
  text-align: right;
  color: var(--ink-3);
  user-select: none;
  white-space: pre;
  position: sticky;
  left: 0;
  background: var(--sheet);
  z-index: 2;
}
.stack {
  position: relative;
  min-width: 100%;
  width: max-content;
  padding: 12px 24px 12px 6px;
}
.stack pre,
.stack textarea {
  margin: 0;
  font: inherit;
  white-space: pre;
  tab-size: 2;
  letter-spacing: 0;
  border: 0;
  padding: 0;
}
.stack pre {
  position: absolute;
  inset: 12px 24px 12px 6px;
  pointer-events: none;
  color: var(--ink);
}
.stack pre.mk {
  color: transparent;
}
.stack pre.mk mark {
  background: color-mix(in srgb, var(--warn) 32%, transparent);
  color: transparent;
  border-radius: 2px;
}
.stack pre.mk mark.cur {
  background: color-mix(in srgb, var(--warn) 70%, transparent);
}
.stack textarea {
  position: relative;
  display: block;
  width: 100%;
  min-width: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  resize: none;
  outline: 0;
  overflow: hidden;
}
.stack textarea::selection {
  background: var(--sel);
  color: transparent;
}
.t-c {
  color: var(--t-c);
  font-style: italic;
}
.t-s {
  color: var(--t-s);
}
.t-k {
  color: var(--t-k);
}
.t-g {
  color: var(--t-g);
}
.t-n {
  color: var(--t-n);
}
.t-v {
  color: var(--ink);
}
.t-p {
  color: var(--t-k);
  font-weight: 500;
}

/* ——— données ——— */

/* ——— schéma ——— */

/* ——— clients ——— */

/* ——— dock serveur ——— */
.dock {
  grid-area: dock;
  display: none;
  flex-direction: column;
  background: var(--sheet);
  height: var(--dh, 264px);
  min-height: 120px;
  border-top: 1px solid var(--seam-2);
  position: relative;
}
.dock.on {
  display: flex;
}
.dock .grip {
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
}
.dock-b {
  flex: 1;
  overflow: auto;
  padding: 4px 0 10px;
}
.st2 {
  font-weight: 500;
}
.st2.s2 {
  color: var(--ok);
}
.st2.s4 {
  color: var(--warn);
}
.st2.s5 {
  color: var(--err);
}
.log {
  padding: 5px 14px;
  font: 12px/1.5 var(--mono);
  display: grid;
  grid-template-columns: 70px 78px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
.log:hover {
  background: var(--hover);
}
.log .e {
  color: var(--err);
}
.log .w {
  color: var(--warn);
}
.log-d {
  padding: 6px 14px 10px 174px;
  font: 12px/1.6 var(--mono);
  color: var(--ink-2);
  white-space: pre-wrap;
}
.meter {
  display: grid;
  gap: 5px;
  margin: 10px 14px;
  max-width: 560px;
}
.meter > div:first-child {
  display: flex;
  justify-content: space-between;
}
.mbar {
  height: 6px;
  border-radius: 3px;
  background: var(--recess);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--seam);
}
.mbar i {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.5s var(--ease);
}

/* ——— flottants ——— */
.pop {
  position: fixed;
  z-index: 50;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 16px));
  background: var(--raised);
  border-radius: var(--r-l);
  padding: 5px;
  box-shadow:
    0 0 0 1px var(--seam-2),
    0 14px 40px rgba(0, 0, 0, 0.28);
  animation: pop 0.14s var(--ease);
  transform-origin: top left;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.pop button.mi {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
}
.pop button.mi:hover:not(:disabled) {
  background: var(--hover);
}
.pop button.mi:disabled {
  opacity: 0.4;
}
.pop .mi small {
  margin-left: auto;
  color: var(--ink-3);
}
.pop hr {
  border: 0;
  height: 1px;
  background: var(--seam);
  margin: 4px 2px;
}
.pop .ph {
  padding: 8px 10px 4px;
  font-weight: 600;
}
.pop .pp {
  padding: 2px 10px 8px;
  color: var(--ink-2);
}
dialog {
  border: 0;
  border-radius: 12px;
  background: var(--raised);
  color: var(--ink);
  padding: 0;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  box-shadow:
    0 0 0 1px var(--seam-2),
    0 24px 70px rgba(0, 0, 0, 0.4);
}
dialog::backdrop {
  background: rgba(5, 8, 10, 0.5);
}
dialog[open] {
  animation: pop 0.18s var(--ease);
  display: flex;
  flex-direction: column;
}
.dlg-h {
  padding: 18px 20px 4px;
}
.dlg-h h2 {
  font-size: 16px;
  font-weight: 600;
}
.dlg-b {
  padding: 10px 20px;
  overflow: auto;
}
.dlg-f {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 18px;
}
.pal {
  top: 10vh;
  margin-top: 0;
  width: min(580px, calc(100vw - 24px));
}
.pal input {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  padding: 16px 18px;
  font-size: 15px;
  border-bottom: 1px solid var(--seam);
}
.pal ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 52vh;
  overflow: auto;
}
.pal li button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 5px;
}
.pal li button[aria-selected="true"] {
  background: var(--sel);
}
.pal li small {
  margin-left: auto;
  color: var(--ink-2);
}

@media (min-width: 861px) {
  .show-s {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ═════════ v2 : composants ajoutés ═════════ */
.fi {
  flex: none;
  display: block;
}
.sw {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.sw.big {
  width: 12px;
  height: 12px;
}
.ident {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chev {
  flex: none;
  transition: transform 0.15s var(--ease);
  color: var(--ink-3);
}
.chev.open {
  transform: rotate(90deg);
}
.chev.sp {
  width: 12px;
  height: 12px;
  display: block;
}
mark {
  background: color-mix(in srgb, var(--warn) 38%, transparent);
  color: inherit;
  border-radius: 2px;
}
.td {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: hsl(var(--h, 212) 62% 50%);
  flex: none;
  display: inline-block;
}
.td.big {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.td.ghost {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--seam-2);
}
[data-theme="dark"] .td {
  background: hsl(var(--h, 212) 56% 60%);
}
.st2 {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.st2.s2 {
  color: var(--ok);
}
.st2.s3 {
  color: var(--ink-2);
}
.st2.s4 {
  color: var(--warn);
}
.st2.s5 {
  color: var(--err);
}

/* arbres : fichiers, bases */
.side {
  background: var(--faceplate);
}
.side-h {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 4px 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.side-h .btn {
  min-width: 26px;
  padding: 0 6px;
}
.h-s {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
}
.tree {
  flex: 1;
  overflow: auto;
  padding: 2px 6px 10px;
  position: relative;
}
.tree.drop {
  box-shadow: inset 0 0 0 1.5px var(--signal);
  border-radius: 6px;
}
.row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 4px 0 calc(6px + var(--d, 0) * 14px);
  border-radius: 5px;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.row:hover {
  background: var(--hover);
  color: var(--ink);
}
.row:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}
.row.active {
  background: var(--sel);
  color: var(--ink);
}
.row[aria-selected="true"]:not(.active) {
  box-shadow: inset 0 0 0 1px var(--seam-2);
}
.row.drop {
  background: var(--sel);
  box-shadow: inset 0 0 0 1.5px var(--signal);
}
.row.dir {
  color: var(--ink);
  font-weight: 500;
}
.row .nm {
  min-width: 0;
}
.row .cnt {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 400;
  padding-right: 4px;
}
.row .acts {
  display: none;
  gap: 1px;
  margin-left: auto;
}
.row:hover .acts,
.row:focus-within .acts,
.row.active .acts {
  display: flex;
}
.row:hover .cnt:not(.keep),
.row:focus-within .cnt {
  display: none;
}
.row.active .cnt {
  display: none;
}
.row .acts button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--ink-2);
}
.row .acts button:hover {
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--seam-2);
}
.row .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
  margin-left: auto;
}
.row .d.a {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--warn);
}
.row .d + .cnt,
.row .d + .acts {
  margin-left: 6px;
}
.row .entry {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0 6px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--seam-2);
  flex: none;
}
.row .ren {
  flex: 1;
  min-width: 0;
  height: 22px;
  border: 0;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--sheet);
  box-shadow: inset 0 0 0 2px var(--signal);
  outline: 0;
  font: inherit;
  color: var(--ink);
}
.row.sys {
  opacity: 0.6;
}
.row.db {
  color: var(--ink);
  font-weight: 500;
}
.row.tb {
  padding-left: 28px;
}
.row.tb .td {
  margin-right: 1px;
}
.row.ghostrow {
  color: var(--ink-3);
  padding-left: 6px;
}
.row.ghostrow:hover {
  color: var(--ink);
}
.row.tb.ghostrow {
  padding-left: 28px;
}
.row.tb.new {
  cursor: default;
}

/* code */
.cgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 0;
}
.cgrid.pv {
  grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 40%);
}
.ed-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--sheet);
}
.tabs {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  padding: 6px 8px 0;
  background: var(--faceplate);
  flex: none;
}
.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 4px 0 10px;
  border-radius: 6px 6px 0 0;
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 210px;
}
.tab:has([role="tab"][aria-selected="true"]) {
  background: var(--sheet);
  color: var(--ink);
}
.tab:hover {
  color: var(--ink);
}
.tab .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}
.tab .c {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--ink-3);
}
.tab .c:hover {
  background: var(--hover);
  color: var(--ink);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 14px;
  min-height: 38px;
  color: var(--ink-3);
  flex-wrap: nowrap;
}
.crumbs b {
  color: var(--ink);
  font-weight: 500;
}
.crumbs .grow {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}
.split-btn {
  display: inline-flex;
}
.split-btn .btn:first-child {
  border-radius: var(--r) 0 0 var(--r);
}
.split-btn .btn:last-child {
  border-radius: 0 var(--r) var(--r) 0;
  margin-left: -1px;
  padding: 0 8px;
}
#runBtn[aria-pressed="true"] {
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--signal);
}
#runBtn svg {
  color: var(--ok);
}
.find {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: var(--faceplate);
  flex-wrap: wrap;
}
.find .in {
  width: 180px;
}
.edwrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  font: 13px/20px var(--mono);
  position: relative;
  tab-size: 2;
}
.gut {
  padding: 12px 10px 12px 14px;
  text-align: right;
  color: var(--ink-3);
  user-select: none;
  white-space: pre;
  position: sticky;
  left: 0;
  background: var(--sheet);
  z-index: 2;
}
.stack {
  position: relative;
  min-width: 100%;
  width: max-content;
  padding: 12px 24px 12px 6px;
}
.stack pre,
.stack textarea {
  margin: 0;
  font: inherit;
  white-space: pre;
  tab-size: 2;
  letter-spacing: 0;
  border: 0;
  padding: 0;
}
.stack pre {
  position: absolute;
  inset: 12px 24px 12px 6px;
  pointer-events: none;
  color: var(--ink);
}
.stack pre.mk {
  color: transparent;
}
.stack pre.mk mark {
  background: color-mix(in srgb, var(--warn) 32%, transparent);
  color: transparent;
  border-radius: 2px;
}
.stack pre.mk mark.cur {
  background: color-mix(in srgb, var(--warn) 70%, transparent);
}
.stack textarea {
  position: relative;
  display: block;
  width: 100%;
  min-width: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  resize: none;
  outline: 0;
  overflow: hidden;
}
.stack textarea::selection {
  background: var(--sel);
  color: transparent;
}
.t-c {
  color: var(--t-c);
  font-style: italic;
}
.t-s {
  color: var(--t-s);
}
.t-k {
  color: var(--t-k);
}
.t-g {
  color: var(--t-g);
}
.t-n {
  color: var(--t-n);
}
.t-v {
  color: var(--ink);
}
.t-p {
  color: var(--t-k);
  font-weight: 500;
}
.foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  min-height: 28px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--faceplate);
  flex: none;
  flex-wrap: nowrap;
  overflow: hidden;
}
.foot #lang {
  display: flex;
  align-items: center;
  gap: 7px;
}
.foot .sqlecho {
  color: var(--ink-3);
}
.pv-col {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--faceplate);
}
.cgrid.pv .pv-col {
  display: flex;
}
.pv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  flex-wrap: nowrap;
}
.pv-head .in {
  min-width: 60px;
}
.pv-head .tg[aria-pressed="true"] {
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--signal);
}
.pv-frames {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  padding: 0 8px 8px;
}
.pv-frames[data-n="2"] {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.pv-cell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 4px;
}
.fhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.pv-frame {
  flex: 1;
  min-height: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--seam-2);
}
.pv-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* données */
.dgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}
.dh {
  background: var(--faceplate);
}
.crumbs .td {
  vertical-align: middle;
}
.fl {
  background: var(--faceplate);
}
.q-ed {
  height: 140px;
  min-height: 80px;
  max-height: 45vh;
  resize: vertical;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  flex: none;
}
.q-ed .edwrap {
  flex: 1;
}
.gridwrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--sheet);
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.dg th,
.dg td {
  text-align: left;
  padding: 0 12px;
  height: 34px;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--seam);
  border-right: 1px solid color-mix(in srgb, var(--seam) 55%, transparent);
}
.dg th {
  position: sticky;
  top: 0;
  background: var(--faceplate);
  font-weight: 500;
  color: var(--ink-2);
  z-index: 1;
  user-select: none;
  cursor: pointer;
  height: 38px;
}
.dg th:hover {
  color: var(--ink);
}
.dg th .cn {
  margin-right: 7px;
  color: var(--ink);
  font-weight: 600;
}
.dg th .srt {
  margin-left: 6px;
  color: var(--signal);
}
.dg td.r {
  text-align: right;
}
.dg td.ck,
.dg th.ck {
  width: 38px;
  padding: 0 0 0 12px;
  cursor: default;
  border-right: 0;
}
.dg td.ra,
.dg th.ra {
  width: 44px;
  padding: 0 6px;
  text-align: center;
  border-right: 0;
  cursor: default;
}
.dg input[type="checkbox"] {
  accent-color: var(--ink);
}
.dg tbody tr:hover td {
  background: var(--hover);
}
.dg tbody tr.sel td {
  background: var(--sel);
}
.dg tbody tr.ghost:hover td {
  background: none;
}
.dg td[tabindex] {
  cursor: cell;
  outline: 0;
}
.dg td.cur {
  box-shadow: inset 0 0 0 2px var(--signal);
  background: color-mix(in srgb, var(--signal) 7%, transparent);
}
.dg td.edit {
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 0 0 2px var(--signal);
}
.dg td.edit .ce {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 56px 0 12px;
  background: var(--sheet);
  outline: 0;
  font: inherit;
}
.nullb {
  position: absolute;
  right: 5px;
  top: 6px;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--recess);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--seam-2);
}
.nullb:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}
.nullb:disabled {
  opacity: 0.35;
}
.nulchip {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.dg td.fkc {
  color: var(--ink);
}
.fkd {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: hsl(var(--h) 60% 50%);
  margin-right: 7px;
}
[data-theme="dark"] .fkd {
  background: hsl(var(--h) 55% 60%);
}
.dg tr.ghost td {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border-bottom: 0;
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.dg tr.ghost td.ck {
  color: var(--ink-3);
  text-align: center;
  padding: 0;
  display: table-cell;
}
.dg tr.ghost input {
  width: 100%;
  height: 100%;
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 0;
  outline: 0;
  font: inherit;
}
.dg tr.ghost input::placeholder {
  color: var(--ink-3);
  font-style: italic;
}
.dg tr.ghost input:focus {
  background: var(--sheet);
  box-shadow: inset 0 -2px 0 var(--signal);
}
.dg tr.ghost input.err,
.in.err {
  box-shadow: inset 0 0 0 2px var(--err);
}
.dg tr.ghost input:disabled::placeholder {
  font-style: normal;
  color: var(--ink-3);
}
.dg td .ra button,
.ra button {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-3);
}
.ra button:hover {
  background: var(--hover);
  color: var(--ink);
}
.dg td.ra button.btn {
  width: auto;
  color: inherit;
}
.dg th.ra button {
  color: var(--signal);
}
.dg th .kb {
  display: inline-grid;
  vertical-align: -1px;
  margin-right: 6px;
}
.kb.pk {
  color: #b4780a;
}
[data-theme="dark"] .kb.pk {
  color: #f0b429;
}
.kb.fk {
  color: hsl(var(--h) 60% 42%);
}
[data-theme="dark"] .kb.fk {
  color: hsl(var(--h) 60% 65%);
}
.ty {
  --c: #66707a;
  display: inline-block;
  font: 500 11px/16px var(--mono);
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  white-space: nowrap;
}
.ty.int {
  --c: #2f6fd0;
}
.ty.str {
  --c: #1f8a58;
}
.ty.date {
  --c: #b86a14;
}
.ty.num {
  --c: #c0407a;
}
.ty.bool {
  --c: #7a5ad0;
}
.ty.bin {
  --c: #66707a;
}
[data-theme="dark"] .ty.int {
  --c: #6aa2ff;
}
[data-theme="dark"] .ty.str {
  --c: #4fcf93;
}
[data-theme="dark"] .ty.date {
  --c: #f0a050;
}
[data-theme="dark"] .ty.num {
  --c: #ee7fb0;
}
[data-theme="dark"] .ty.bool {
  --c: #a99aff;
}
[data-theme="dark"] .ty.bin {
  --c: #a0abb3;
}
.dg th .ty {
  font-weight: 400;
}
/* structure */
.gridwrap.st {
  padding: 14px 18px 24px;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chip2 {
  font-size: 12px;
  color: var(--ink-2);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.sg {
  border: 1px solid var(--seam);
  border-radius: var(--r-l);
  overflow: hidden;
}
.sg th {
  text-align: left;
  padding: 0 14px;
  height: 34px;
  background: var(--faceplate);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--seam);
}
.sg td {
  padding: 0 14px;
  height: 44px;
  border-bottom: 1px solid var(--seam);
  vertical-align: middle;
}
.sg tr:last-child td {
  border-bottom: 0;
}
.sg tbody tr:hover td {
  background: var(--hover);
}
.sg tr.addrow td {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.cname {
  font-weight: 600;
  cursor: text;
}
.btnty {
  cursor: pointer;
}
.btnty:hover {
  filter: brightness(0.92);
  box-shadow: 0 0 0 1px var(--c);
}
.sg .in.cren {
  width: 180px;
}
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}
.pill.nl {
  color: var(--ink-3);
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.pill.nn {
  color: var(--on-ink);
  background: var(--ink);
}
.pill:disabled {
  opacity: 0.5;
}
.badges {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 44px;
  flex-wrap: wrap;
}
.bd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.bd.pk {
  color: #8a5a00;
  background: color-mix(in srgb, #e6a93a 22%, transparent);
}
[data-theme="dark"] .bd.pk {
  color: #f0b429;
}
.bd.un {
  color: #1f8a58;
  background: color-mix(in srgb, #1f8a58 14%, transparent);
}
.bd.ix {
  color: var(--ink-2);
  background: var(--recess);
}
.bd.ai {
  color: var(--ink-2);
  background: var(--recess);
  font-weight: 500;
}
.bd.fk {
  color: hsl(var(--h) 60% 36%);
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) 16%, transparent);
  cursor: pointer;
}
[data-theme="dark"] .bd.fk {
  color: hsl(var(--h) 70% 72%);
}
.bd.fk:hover {
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) 28%, transparent);
}
.chk2 {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-2);
}
.sec2 {
  margin-top: 22px;
}
.sec2 h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pillx {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: var(--recess);
  box-shadow: inset 0 0 0 1px var(--seam);
}
.pillx.pk {
  color: #8a5a00;
}
[data-theme="dark"] .pillx.pk {
  color: #f0b429;
}
.pillx em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--ok);
}
.pillx button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--ink-3);
}
.pillx button:hover {
  background: var(--hover);
  color: var(--err);
}
.rel2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r);
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) 12%, transparent);
  box-shadow: inset 3px 0 0 hsl(var(--h) 60% 50%);
  font-size: 12px;
}
.rel2:hover {
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) 22%, transparent);
}
.rel2 em {
  font-style: normal;
  color: var(--ink-3);
}
.rel2.in {
  opacity: 0.9;
}
.pre {
  margin: 0;
  padding: 12px 14px;
  font: 12px/1.65 var(--mono);
  background: var(--recess);
  border-radius: var(--r);
  overflow: auto;
  white-space: pre-wrap;
  box-shadow: inset 0 0 0 1px var(--seam);
}
.rs-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  background: var(--faceplate);
}
.dg.ro td {
  cursor: default;
}
.dg.ro th {
  cursor: default;
}

/* schéma */
.sgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  position: relative;
}
.sgrid.has-sel {
  grid-template-columns: minmax(0, 1fr) 300px;
}
.canvas {
  position: relative;
  overflow: hidden;
  background: var(--faceplate);
  touch-action: none;
  min-width: 0;
  min-height: 0;
}
.canvas svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
}
.canvas svg.panning {
  cursor: grabbing;
}
.canvas .grid-bg {
  fill: none;
}
.hintchip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--seam-2);
  color: var(--ink-2);
  font-size: 12px;
  pointer-events: none;
}
.tb {
  transition: opacity 0.15s;
}
.tb.dim,
.lkg.dim {
  opacity: 0.28;
}
.tb .shadow {
  fill: rgba(0, 0, 0, 0.14);
}
[data-theme="dark"] .tb .shadow {
  fill: rgba(0, 0, 0, 0.45);
}
.tb .box {
  fill: var(--sheet);
  stroke: var(--seam-2);
}
.tb.sel .box {
  stroke: hsl(var(--h) 60% 48%);
  stroke-width: 2.5;
}
.tb .head {
  fill: hsl(var(--h) 52% 40%);
}
[data-theme="dark"] .tb .head {
  fill: hsl(var(--h) 42% 33%);
}
.tb.jt .head {
  fill: hsl(var(--h) 20% 46%);
}
.tb .hd {
  cursor: grab;
}
.tb .hd:active {
  cursor: grabbing;
}
.tb .hd:focus-visible {
  outline: none;
}
.tb .hd:focus-visible rect {
  stroke: #fff;
  stroke-width: 2;
}
.tt {
  fill: #fff;
  font: 600 13px var(--sans);
}
.tn {
  fill: rgba(255, 255, 255, 0.75);
  font: 11px var(--sans);
}
.col .cbg {
  fill: transparent;
}
.col:hover .cbg {
  fill: color-mix(in srgb, hsl(var(--h) 60% 50%) 12%, transparent);
}
.col.pk .cbg {
  fill: color-mix(in srgb, #e6a93a 10%, transparent);
}
.col.fk .cbg {
  fill: color-mix(in srgb, hsl(var(--h) 60% 50%) 8%, transparent);
}
.col .cn {
  fill: var(--ink);
  font: 13px var(--sans);
}
.col.pk .cn {
  font-weight: 600;
}
.col .cy {
  fill: var(--ink-3);
  font: 11px var(--mono);
}
.ic {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.ic.pk {
  stroke: #b4780a;
}
[data-theme="dark"] .ic.pk {
  stroke: #f0b429;
}
.ic.fk {
  stroke: hsl(var(--h) 60% 42%);
}
[data-theme="dark"] .ic.fk {
  stroke: hsl(var(--h) 60% 68%);
}
.port {
  fill: var(--sheet);
  stroke: hsl(var(--h) 60% 48%);
  stroke-width: 2;
  opacity: 0;
  cursor: crosshair;
  transition: opacity 0.12s;
}
.col:hover .port,
.tb.sel .port {
  opacity: 1;
}
.port:hover {
  fill: hsl(var(--h) 60% 48%);
}
.col.target .cbg {
  fill: color-mix(in srgb, var(--ok) 22%, transparent);
}
.col.target .port {
  opacity: 1;
  stroke: var(--ok);
}
.col.muted {
  opacity: 0.35;
}
.col.hov .cbg {
  fill: color-mix(in srgb, var(--ok) 38%, transparent);
  stroke: var(--ok);
  stroke-width: 1.5;
}
.lk {
  fill: none;
  stroke: hsl(var(--h) 60% 46%);
  stroke-width: 2.2;
  stroke-linecap: round;
}
[data-theme="dark"] .lk {
  stroke: hsl(var(--h) 62% 62%);
}
.lk-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
}
.lkg:hover .lk {
  stroke-width: 3.4;
}
.crow,
.one {
  fill: none;
  stroke: hsl(var(--h) 60% 46%);
  stroke-width: 2;
  stroke-linecap: round;
}
[data-theme="dark"] .crow,
[data-theme="dark"] .one {
  stroke: hsl(var(--h) 62% 62%);
}
.opt {
  fill: var(--faceplate);
  stroke: hsl(var(--h) 60% 46%);
  stroke-width: 1.8;
}
.lkg .lab {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.lkg .lab rect {
  fill: var(--raised);
  stroke: var(--seam-2);
}
.lkg .lab text {
  fill: var(--ink);
  font: 600 10.5px var(--sans);
}
.lkg:hover .lab {
  opacity: 1;
}
.rubber {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.4;
  stroke-dasharray: 6 5;
  pointer-events: none;
}
.rubber-dot {
  fill: var(--signal);
  pointer-events: none;
}
.insp {
  background: var(--sheet);
  overflow: auto;
  padding: 16px;
  border-left: 1px solid var(--seam);
  display: none;
}
.sgrid.has-sel .insp {
  display: block;
}
.ihead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ihead h3 {
  font-size: 16px;
}
.sw8 {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.hsw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: hsl(var(--h) 56% 48%);
}
.hsw.on {
  box-shadow:
    0 0 0 2px var(--sheet),
    0 0 0 4px var(--ink);
}
.ibtns {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.qa {
  display: grid;
  gap: 6px;
}
.relpop {
  width: 340px;
}
.relhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  flex-wrap: wrap;
}
.pillt {
  font: 600 12px var(--mono);
  padding: 3px 10px;
  border-radius: 999px;
  color: hsl(var(--h) 60% 34%);
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) 18%, transparent);
}
[data-theme="dark"] .pillt {
  color: hsl(var(--h) 70% 74%);
}

/* sessions */
.sess-wrap {
  flex: 1;
  overflow: auto;
  padding: 24px clamp(16px, 4vw, 48px) 40px;
  display: grid;
  gap: 22px;
  align-content: start;
}
.sess-wrap h1 {
  font-size: 22px;
  font-weight: 600;
}
.sess-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.sesGrid,
#sesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.scard {
  background: var(--sheet);
  border-radius: var(--r-l);
  box-shadow:
    0 0 0 1px var(--seam),
    inset 0 4px 0 var(--sc);
  padding: 18px 16px 14px;
  display: grid;
  gap: 16px;
}
.scard header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scard header .sw {
  background: var(--sc);
}
.scard .lab {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.scard h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 8px;
  display: flex;
  gap: 8px;
}
.scard footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--seam);
  padding-top: 12px;
}
.scard footer .btn[aria-pressed="true"] {
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--signal);
}
.ck2 {
  width: 100%;
}
.ck2 td {
  padding: 3px 4px 3px 0;
  border: 0;
}
.ck2 .in {
  min-height: 28px;
}
.ck2 td.mono {
  font-size: 12px;
  color: var(--ink-2);
  width: 34%;
  word-break: break-all;
}
.winrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: var(--r);
  background: var(--recess);
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px var(--seam);
}
.openrow {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.req2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  min-height: 24px;
}

/* serveur */
.req {
  display: grid;
  grid-template-columns: 70px 14px 40px 52px minmax(0, 1fr) 62px;
  gap: 10px;
  align-items: center;
  padding: 3px 14px;
  font: 12px/1.5 var(--mono);
  min-height: 24px;
}
.req:hover {
  background: var(--hover);
}

/* fenêtres flottantes et divers */
.cols-ed {
  display: grid;
  gap: 6px;
}
.cols-ed .r {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto auto;
  gap: 6px;
  align-items: center;
}
.cols-ed label {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--ink-2);
}
.blocked {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--faceplate);
  display: grid;
  place-items: center;
  padding: 24px;
}
.blocked .panel {
  max-width: 520px;
}
.chk {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
}
.pop .mi .fi,
.pop .mi svg {
  flex: none;
}

@media (max-width: 860px) {
  .app,
  .app[data-mode="launcher"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr) auto auto auto;
    grid-template-areas: "top" "main" "dock" "status" "rail";
  }
  .rail {
    flex-direction: row;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0));
  }
  .rail button {
    flex: 1;
    min-height: 48px;
  }
  .rail .sp,
  .rail .minor {
    display: none;
  }
  .rail button[aria-current="page"]::before {
    display: none;
  }
  .rail button[aria-current="page"] {
    background: none;
    color: var(--signal);
  }
  .badge {
    right: calc(50% - 22px);
  }
  main {
    border-radius: 0;
  }
  .launch,
  .cols2,
  .dgrid,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .sgrid.has-sel {
    grid-template-columns: minmax(0, 1fr);
  }
  .sgrid .insp {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 55%;
    border-top: 1px solid var(--seam-2);
    border-left: 0;
  }
  .cgrid,
  .cgrid.pv {
    grid-template-columns: minmax(0, 1fr);
  }
  .cgrid > .side {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
  }
  .cgrid[data-ex="on"] > .side {
    display: flex;
  }
  .cgrid.pv .ed-col {
    display: none;
  }
  .cgrid.pv .pv-col {
    display: flex;
  }
  .dgrid > .side {
    max-height: 150px;
  }
  .req {
    grid-template-columns: 58px 12px 38px minmax(0, 1fr) 52px;
  }
  .req span:nth-child(3) {
    display: none;
  }
  .dock {
    height: 46dvh;
  }
  .hide-s {
    display: none !important;
  }
  .launch {
    padding-bottom: 16px;
  }
  .relpop {
    width: min(340px, calc(100vw - 16px));
  }
}
@media (min-width: 861px) {
  .show-s {
    display: none !important;
  }
}
/* Production editor and explicit icon contrast in both themes. */
.edwrap {
  display: block;
  overflow: hidden;
  min-width: 0;
}
.edwrap .cm-editor {
  height: 100%;
  font: 13px/1.55 var(--mono);
  background: var(--sheet);
  color: var(--ink);
}
.cm-scroller {
  overflow: auto;
}
.cm-gutters {
  background: var(--sheet) !important;
  color: var(--ink-3) !important;
  border: 0 !important;
}
.cm-cursor {
  border-left-color: var(--ink) !important;
}
.cm-activeLine,
.cm-activeLineGutter {
  background: var(--hover) !important;
}
.cm-editor .cm-panels,
.cm-editor .cm-tooltip {
  background: var(--raised) !important;
  color: var(--ink) !important;
  border-color: var(--seam-2) !important;
}
.cm-editor .cm-panels button,
.cm-editor .cm-panels input {
  background: var(--sheet) !important;
  color: var(--ink) !important;
  border-color: var(--seam-2) !important;
}
.cm-editor .cm-selectionBackground {
  background: var(--sel) !important;
}
.cm-tooltip-autocomplete [aria-selected="true"] {
  background: var(--signal) !important;
  color: var(--on-ink) !important;
}
.cm-editor-tools {
  font-family: var(--sans);
  font-size: 11px;
}
.cm-editor-tools button {
  padding: 3px 6px;
  border-radius: var(--r);
  min-height: 24px;
}
button svg:not(.fi):not(.folder) {
  color: inherit;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.pri svg {
  color: inherit !important;
}
:root {
  --on-signal: #fff;
}
:root[data-theme="dark"] {
  --on-signal: #0b0e10;
}
.btn.pri {
  color: var(--on-signal);
}
.cm-tooltip-autocomplete [aria-selected="true"] {
  color: var(--on-signal) !important;
}
input,
select,
textarea {
  background-color: var(--sheet);
  color: var(--ink);
}
option {
  background: var(--sheet);
  color: var(--ink);
}
[role="status"],
.cm-editor .cm-search input {
  max-width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 600px) {
  #sesGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cols-ed .r {
    display: flex;
    flex-wrap: wrap;
  }
  .cols-ed .r > * {
    min-width: 0;
  }
  .cm-editor-tools {
    gap: 2px !important;
  }
  .cm-editor-tools button {
    font-size: 10px;
  }
  .dg {
    min-width: 500px;
  }
}
.cardinality {
  fill: var(--ink);
  font: 600 11px var(--mono);
  paint-order: stroke;
  stroke: var(--faceplate);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.dlg-b {
  max-height: 70dvh;
  overflow: auto;
}
.dlg-b .field {
  margin-bottom: 10px;
}
.dlg-b select,
.dlg-b input {
  width: 100%;
  max-width: 100%;
}
.cols-ed .r {
  grid-template-columns: minmax(80px, 1fr) minmax(120px, 1fr) auto auto auto;
}
.app > *,
main,
.ws,
.view,
.pv-col,
.pv-frames,
.pv-cell,
.pv-frame,
.ed-col,
.dgrid,
.dmain {
  min-width: 0;
}
.pv-frame iframe {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bar,
.pvbar {
  flex-wrap: wrap;
}
.top,
.status {
  min-width: 0;
}
.status #stext {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .top {
    gap: 4px;
    padding-inline: 6px;
  }
  .top .mark {
    font-size: 12px;
    gap: 4px;
  }
  .top .btn {
    padding-inline: 6px;
    font-size: 11px;
  }
  .bar {
    gap: 5px;
  }
  .pv-col input {
    min-width: 0;
  }
  .pv-col .bar {
    flex-wrap: wrap;
  }
  .pv-cell {
    overflow: hidden;
  }
  .sesGrid {
    min-width: 0;
  }
  .scard {
    min-width: 0;
  }
  .scard .openrow {
    flex-wrap: wrap;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dlg-h h1 {
  font-size: 18px;
}
.scard .session-heading {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.entry {
  color: var(--ink-2);
}
.btn.pri,
.btn.pri:hover:not(:disabled) {
  background: var(--ink);
  color: var(--on-ink);
}
.tb .head,
.tb.jt .head {
  fill: hsl(var(--h) 52% 29%);
}
[data-theme="dark"] .tb .head,
[data-theme="dark"] .tb.jt .head {
  fill: hsl(var(--h) 42% 28%);
}
.tn {
  fill: #fff;
}
.row .entry {
  color: var(--ink-2);
}
.row.sys {
  opacity: 1;
  color: var(--ink-3);
}
.row.sys .cnt {
  color: var(--ink-2);
}
.rel2 em {
  color: var(--ink-2);
}
.column-row {
  border: 1px solid var(--seam-2);
  border-radius: var(--r);
  padding: 8px;
  margin-bottom: 8px;
}
.column-row details {
  padding-top: 6px;
}
.column-row .r {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.column-row .r .in {
  width: 160px;
}
.column-row .r label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.column-row .r input[type="checkbox"] {
  width: auto;
}
#edq .cm-editor-tools {
  display: none;
}
#ed1 .cm-editor-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--seam-2);
}
#ed1 .cm-editor-tools button:not([data-tool="Formater"]):not([data-tool="Emmet"]) {
  display: none;
}
#ed1 .cm-editor-tools select {
  width: auto;
  padding: 3px 6px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--seam-2);
  border-radius: 4px;
}
.resource-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 12px;
}
.resource-tools label {
  display: grid;
  gap: 4px;
}
.pop {
  position: fixed;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
}
.relpop .pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Explicit action colours keep native/hover buttons readable in both themes. */
.ra button:not(.btn), .row .acts button, .nullb {
  appearance: none;
  -webkit-appearance: none;
}
.ra button:not(.btn), .row .acts button {
  background-color: transparent;
  color: var(--ink-2);
}
.ra button:not(.btn):hover, .ra button:not(.btn):focus-visible,
.row .acts button:hover, .row .acts button:focus-visible {
  background-color: var(--raised);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--seam-2);
}
.ra button:not(.btn):active, .row .acts button:active {
  background-color: var(--recess);
  color: var(--signal);
}
.ra button:disabled, .row .acts button:disabled { opacity: .5; cursor: not-allowed; }
#siteVersion { white-space: nowrap; color: var(--ink-2); }
#siteUpdate[data-available="true"] { color: var(--signal); font-weight: 600; }
@media(max-width:600px) { #siteVersion { font-size: 10px; } #siteUpdate { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.status { min-width: 0; }
.status > * { min-width: 0; }
#siteVersion { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
@media(max-width:600px) {
  #siteVersion { max-width: 100px; }
  #sPersist { max-width: 70px; overflow: hidden; white-space: nowrap; }
  #sDock { max-width: 90px; overflow: hidden; white-space: nowrap; }
  .status { padding-left: 6px; gap: 3px; }
  .status button { padding-inline: 4px; }
  #siteUpdate { max-width: 70px; }
  #stext { max-width: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

:root:not([data-theme="dark"]) .ty.int { --c: #1b4b98; }
:root:not([data-theme="dark"]) .ty.str { --c: #125d38; }
:root:not([data-theme="dark"]) .ty.date { --c: #7a4309; }
:root:not([data-theme="dark"]) .ty.num { --c: #8a2854; }
:root:not([data-theme="dark"]) .ty.bool { --c: #583899; }
:root:not([data-theme="dark"]) .pill.nl { color: #48525c; }
:root:not([data-theme="dark"]) .bd.fk { color: #126247; }

/* Workspace hierarchy: project, document tools, then the editing surface. */
.ed-col > .crumbs { position:relative; z-index:2; min-height:46px; gap:8px; background:var(--faceplate); border-block:1px solid var(--seam-2); box-shadow:0 1px 0 var(--sheet); }
.ed-col > .crumbs #crumb { font-size:12px; }
#runBtn { color:var(--ink-2); }
:root:not([data-theme="dark"]) .rail button[aria-current="page"] { color:#164ab3; }
#edFoot { white-space:nowrap; }
#edFoot > span { flex-shrink:0; }
#edFoot #lsp { flex-shrink:1; min-width:0; max-width:50%; overflow:hidden; text-overflow:ellipsis; }
.ed-col > .crumbs .icon-btn { width:30px; padding:6px; flex:none; justify-content:center; }
#codeTools { flex:none; border-left:1px solid var(--seam-2); padding-left:8px; }
#codeTools .cm-editor-tools button { display:none; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:5px 7px; color:var(--ink-2); }
#codeTools .cm-editor-tools button[data-tool="Formater"], #codeTools .cm-editor-tools button[data-tool="Problèmes"] { display:inline-flex; }
#codeTools .cm-editor-tools button[data-tool="Formater"] { width:30px; }
#codeTools .cm-editor-tools button:hover { color:var(--ink); background:var(--hover); }
#codeTools .cm-editor-tools select:not([hidden]) { position:absolute; right:12px; top:calc(100% + 4px); z-index:5; padding:8px; border-radius:6px; background:var(--raised); box-shadow:0 8px 24px #0002; }
.pop .mi { gap:10px; min-height:36px; }
.pop .mi > svg { flex:none; color:var(--ink-2); }
.save-summary { padding:4px 14px 14px; display:grid; gap:10px; max-width:330px; }
.save-summary .btn { justify-self:start; }
.new-entry { align-items:flex-start; background:var(--sel); min-height:66px; padding-block:6px; }
.new-entry > .fi { margin-top:7px; }
.entry-input { flex:1; min-width:0; display:grid; gap:3px; padding-right:8px; }
.entry-input .ren { width:100%; min-width:0; background:var(--sheet); border:1px solid var(--signal); border-radius:4px; padding:4px 6px; }
.entry-input .hint { font-size:10px; white-space:normal; line-height:1.4; }
.entry-input [aria-invalid="true"] { border-color:var(--err); }
.sql-disclosure, .relation-options { margin-block:16px; border:1px solid var(--seam); border-radius:7px; }
.sql-disclosure > summary, .relation-options > summary { padding:10px 12px; cursor:pointer; font-weight:500; color:var(--ink-2); }
.sql-disclosure .pre { margin:0; border:0; border-top:1px solid var(--seam); border-radius:0 0 7px 7px; }
.data-searchbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--seam); }
.data-search { display:flex; align-items:center; flex:1; max-width:450px; min-width:180px; gap:8px; background:var(--sheet); border:1px solid var(--seam-2); border-radius:6px; padding-left:10px; }
.data-search:focus-within { outline:2px solid var(--signal); outline-offset:1px; }
.data-search .in { width:100%; border:0; background:transparent; box-shadow:none; outline:0; padding:7px 8px 7px 0; }
.data-search > svg { color:var(--ink-2); flex:none; }
.data-searchbar > [role="status"] { margin-left:auto; }
.table-search { padding:2px 10px 10px; }
.table-search .in { width:100%; }
.dg tr.ghost .btn { color:var(--on-signal); background:var(--signal); }
.data-filters { border-bottom:1px solid var(--seam); background:var(--faceplate); }
.data-filters > summary { cursor:pointer; padding:8px 16px; color:var(--ink-2); font-size:12px; }
.data-filters .fl { flex-wrap:wrap; }
.relation-intro { color:var(--ink-2); margin-bottom:18px; }
.relation-tables { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); align-items:center; gap:10px; }
.relation-card { display:grid; gap:10px; padding:16px; border:1px solid var(--seam-2); border-radius:10px; background:var(--faceplate); min-width:0; }
.relation-card .in { width:100%; min-width:0; background:var(--sheet); padding:8px; }
.relation-step { font-size:11px; font-weight:600; color:var(--signal); }
.relation-connector { display:grid; justify-items:center; gap:6px; color:var(--ink-2); font-size:11px; }
.relation-connector > svg { width:22px; height:22px; }
.relation-mapping { margin-top:22px; }
.relation-mapping h2 { font-size:14px; margin-bottom:12px; }
.relation-mapping > .field .in { width:100%; }
.relation-pair { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:12px; align-items:center; margin-block:10px; padding:12px; background:var(--faceplate); border:1px solid var(--seam); border-radius:8px; }
.relation-pair .field { margin:0; min-width:0; }
.relation-pair .in { width:100%; min-width:0; background:var(--sheet); }
.relation-pair-arrow { color:var(--ink-2); }
.relation-target { display:grid; gap:3px; min-width:0; }
.relation-target > span, .relation-target > small { color:var(--ink-2); font-size:11px; overflow-wrap:anywhere; }
.relation-target b { display:flex; gap:7px; align-items:center; overflow-wrap:anywhere; }
.relation-options .field { padding-inline:12px; }
.relation-options .in { width:100%; }
@media (max-width:680px) {
  .top { gap:6px; }
  #codeTools [data-tool="Problèmes"] span { display:none; }
  .relation-tables { grid-template-columns:minmax(0,1fr); }
  .relation-connector { display:flex; justify-content:center; }
  .relation-card { padding:12px; gap:6px; }
  .relation-pair { padding:8px; gap:6px; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); }
  .data-searchbar { padding:10px; }
}

/* Shared file toolbar and readable diagnostics. */
#codeTools .cm-editor-tools { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
#codeTools button:not([data-tool="Formater"]):not([data-tool="Emmet"]):not([data-tool="Problèmes"]) { display:none; }
#codeTools select { width:auto; color:var(--ink); background:var(--sheet); border:1px solid var(--seam-2); }
#dbtree .sys { color:var(--ink-3); background:var(--faceplate); font-size:11px; }
.cm-lintRange-error { text-decoration:underline wavy #d43434; text-underline-offset:3px; }
.cm-lintRange-warning { text-decoration:underline wavy #b97800; text-underline-offset:3px; }
.cm-lintPoint-error::after {border-bottom-color:#d43434; border-bottom-width:7px;}
.cm-lintPoint-warning::after {border-bottom-color:#b97800; border-bottom-width:7px;}
@media (max-width:860px) {
  .project-transfer {display:none;} /* ZIP remains available in the project menu. */
  #primary {max-width:130px; white-space:normal; font-size:11px;}
  #codeTools .cm-editor-tools {gap:2px;}
}
.session-intro {grid-column:1/-1;}
.scard summary {cursor:pointer; padding:10px 0; color:var(--ink-2);}
/* Keyboard hints are visual only; aria-keyshortcuts remains available to AT. */
kbd, .shortcut-label { display:none; }
.shortcut-hints kbd, .shortcut-hints .shortcut-label { display:inline; }
#shortcutHints {position:fixed; inset:0; pointer-events:none; z-index:10000;}
.shortcut-hint {position:absolute; padding:2px 5px; border:1px solid var(--ink); border-radius:4px; background:var(--raised); color:var(--ink); font:600 11px var(--sans); box-shadow:0 2px 5px #0003;}
button:focus-visible, [role="tab"]:focus-visible, [role="treeitem"]:focus-visible, summary:focus-visible, select:focus-visible {outline:2px solid var(--signal); outline-offset:2px;}
#tabs [role="tab"][aria-selected="true"] {font-weight:600; color:var(--ink);}
.skip-link {position:fixed; top:8px; left:8px; transform:translateY(-200%); z-index:10001; background:var(--raised); color:var(--ink); padding:8px 12px; border:2px solid var(--signal);}
.skip-link:focus {transform:none;}
#grip:focus-visible {outline:2px solid var(--signal); outline-offset:-2px;}
.sort-column {display:flex; align-items:center; gap:6px; width:100%; font:inherit; color:inherit; text-align:inherit;}
.pal [aria-selected="true"] small {color:inherit;}

/* Project opening: one changing line and a quiet, continuous activity cue. */

/* Keep every workspace command reachable on narrow phones, including 320px. */
#sCount { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:600px) {
  .ed-col > .crumbs { display:grid; grid-template-columns:auto 22px minmax(0,1fr) auto; gap:6px; padding:6px 8px; }
  .ed-col > .crumbs > .split-btn { grid-row:2; grid-column:1/3; }
  .ed-col > .crumbs > #codeTools { grid-row:2; grid-column:3; justify-self:end; }
  .ed-col > .crumbs > #fileMenuBtn { grid-row:2; grid-column:4; }
  #crumb b { white-space:nowrap; }
}
@media(max-width:360px) { #primary span { display:none; } #primary { min-width:30px; } }

/* Workspace feedback stays in flow and remains legible in both themes. */
#main { display:flex; flex-direction:column; }
#alertHost { flex:none; max-height:30%; overflow:auto; }
#main > .stage { position:relative; inset:auto; flex:1; min-height:0; }
.dock [data-act="dockClose"], .cm-panel .cm-panel-close { min-width:32px; min-height:32px; font-size:18px; }
.cm-editor .cm-panel.cm-panel-lint { background:var(--sheet); color:var(--ink); max-height:180px; }
.cm-editor .cm-diagnostic { color:var(--ink); background:var(--sheet); padding:8px 12px; line-height:1.5; white-space:pre-wrap; }
.cm-editor .cm-panel-lint [aria-selected="true"] { background:var(--hover); color:var(--ink); }
.cm-editor .cm-diagnosticText { color:inherit; }
.column-target { color:var(--ink-2); margin-bottom:16px; }
.column-form { display:grid; gap:16px; }
.column-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.column-form .field { min-width:0; margin:0; }
.column-form .in { width:100%; }
.column-form details > .column-fields { margin-top:14px; }
.column-form summary { cursor:pointer; padding:6px 0; }
@media(max-width:520px) { .column-fields { grid-template-columns:1fr; } }
.cm-editor > .cm-panels-top:has(.alwis-search) { position:absolute; top:0; right:12px; z-index:12; max-width:calc(100% - 24px); border:1px solid var(--seam); border-radius:0 0 7px 7px; box-shadow:0 5px 15px #0003; }
.cm-editor .alwis-search { padding:6px; background:var(--sheet); color:var(--ink); }
.alwis-search .search-row { display:flex; align-items:center; gap:3px; }
.alwis-search .search-row[hidden] { display:none; }
.cm-editor .alwis-search input { width:170px; min-width:40px; flex:1; background:var(--faceplate); color:var(--ink); border:1px solid var(--seam); padding:6px; }
.cm-editor .alwis-search button { width:28px; height:28px; padding:2px; border:1px solid transparent; background:transparent; color:var(--ink); font-weight:600; cursor:pointer; }
.cm-editor .alwis-search button[aria-pressed=true] { border-color:var(--accent); background:var(--hover); }
.alwis-search .search-count { display:block; font-size:11px; padding:4px 32px 0; }
.alwis-search .replace-row { margin-top:4px; padding-left:31px; }
@media(max-width:600px) { .cm-editor .alwis-search input { width:90px; } .cm-editor .alwis-search button {width:24px;} }
.project-entry { display:flex; gap:4px; align-items:center; min-width:0; }
.project-entry .proj-row { flex:1; min-width:0; }
.project-remove { width:36px; height:36px; flex:none; }
.php-output { padding:16px; }
.php-output pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; font-family:var(--mono); }
.cm-editor > .cm-panels-top:has(.alwis-search) { left:auto; width:460px; }
.cm-editor .alwis-search { font:13px/1.4 var(--sans,system-ui,sans-serif); }
.cm-editor .alwis-search button[aria-pressed=true] { background:var(--sel) !important; border-color:var(--signal) !important; }
.cm-editor .cm-panel-lint ul [aria-selected], .cm-editor .cm-panel-lint ul:focus [aria-selected] { background:var(--hover) !important; color:var(--ink) !important; }
@media(max-width:600px) {
 .alwis-search .search-row { flex-wrap:wrap; }
 .alwis-search .search-row input[name=search] { flex-basis:calc(100% - 40px); }
}
.alwis-problems { font:13px/1.5 var(--sans); overflow:auto; border-top:1px solid var(--seam); }
.alwis-problems > header { display:flex; align-items:center; justify-content:space-between; padding:4px 12px; position:sticky; top:0; background:var(--sheet); z-index:1; }
.cm-editor .alwis-problems > header button { min-width:32px; min-height:32px; font-size:20px; border:0; }
.alwis-problems .cm-diagnostic { display:flex; align-items:center; gap:12px; border-left:3px solid var(--err); padding:8px 12px; }
.alwis-problems .diagnostic-warning { border-left-color:var(--warn); }
.cm-editor .alwis-problems .diagnostic-location { flex:1; min-width:0; text-align:left; border:0; white-space:pre-wrap; font:inherit; padding:4px; }
.cm-editor .alwis-problems .diagnostic-fix { padding:6px 10px; border-radius:4px; }
@media(max-width:600px) { .alwis-problems .cm-diagnostic { flex-wrap:wrap; } }

/* Browser chrome and explicit pane handles. */
.cgrid { grid-template-columns:260px minmax(0,1fr); }
.cgrid.pv { grid-template-columns:260px minmax(0,var(--editor-fr,60fr)) 10px minmax(0,var(--preview-fr,40fr)); }
.cgrid.pv > .pane-resizer { display:flex; }
.pane-resizer[hidden] { display:none; }
.resize-shield { position:fixed; inset:0; z-index:10000; cursor:col-resize; }
.resize-shield.y { cursor:row-resize; }
.pv-col { container-type:inline-size; }
.pv-head { gap:3px; padding:8px; flex-wrap:wrap; border-bottom:1px solid var(--seam-2); margin-bottom:6px; }
.browser-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-width:30px; height:30px; padding:0 7px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; }
.browser-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.browser-btn:hover:not(:disabled) { background:var(--hover); color:var(--ink); }
.browser-btn:disabled { opacity:.35; cursor:default; }
.browser-pill { border-color:var(--seam-2); padding:0 9px; }
.browser-btn[aria-pressed=true],.browser-btn[aria-expanded=true] { background:var(--sel); color:var(--signal); border-color:var(--signal); }
.browser-address { display:flex; align-items:center; gap:6px; border:1px solid var(--seam-2); border-radius:999px; background:var(--sheet); padding:0 10px; flex:1 1 150px; min-width:100px; height:32px; color:var(--ink-3); }
.browser-address:focus-within { outline:2px solid var(--signal); outline-offset:1px; }
.browser-address input { width:100%; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font:12px var(--mono); }
@container (max-width:650px) { .pv-head .browser-pill span { display:none; } .browser-address { flex-basis:120px; } }
#networkPanel { display:flex; flex-direction:column; flex:0 0 var(--network-height,42%); min-height:100px; min-width:0; overflow:hidden; background:var(--sheet); }
#networkPanel[hidden] { display:none; }
.network-toolbar { display:flex; align-items:center; gap:8px; padding:3px 8px; border-bottom:1px solid var(--seam-2); font-size:11px; }
.network-toolbar strong { font-size:12px; }
.network-live { width:6px; height:6px; background:var(--signal); border-radius:50%; }
.network-body { display:flex; flex:1; min-height:0; min-width:0; }
.network-list { flex:1; overflow:auto; min-width:0; }
.network-list table { border-collapse:collapse; width:100%; font-size:11px; white-space:nowrap; }
.network-list th { position:sticky; top:0; z-index:1; text-align:left; background:var(--faceplate); color:var(--ink-2); font-weight:500; }
.network-list th,.network-list td { padding:5px 7px; border-bottom:1px solid var(--seam); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.network-list td:first-child { padding:0; }
.network-list button { display:flex; align-items:center; gap:7px; padding:6px 8px; width:100%; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.network-list tr:hover { background:var(--hover); }
.network-list tr.selected { background:var(--sel); }
.network-status { font-size:8px; }
.network-body.has-selection .network-list { flex:0 0 30%; border-right:1px solid var(--seam-2); }
.network-detail { display:flex; flex-direction:column; flex:1; min-width:0; overflow:hidden; }
.network-tabs { display:flex; align-items:center; flex-shrink:0; gap:2px; padding:0 4px; overflow:auto; border-bottom:1px solid var(--seam-2); }
.network-tabs [role=tab] { padding:9px 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-2); font:inherit; font-size:11px; cursor:pointer; }
.network-tabs [aria-selected=true] { color:var(--signal); border-bottom-color:var(--signal); }
#networkDetail { overflow:auto; flex:1; min-height:0; padding:0 10px 12px; font-size:12px; }
#networkDetail h3 { margin:0 -10px 8px; padding:7px 10px; border-bottom:1px solid var(--seam); background:var(--faceplate); font-size:12px; }
.network-pairs { display:grid; grid-template-columns:minmax(80px,30%) minmax(0,1fr); gap:7px 10px; margin:10px 0 16px; overflow-wrap:anywhere; }
.network-pairs dt { color:var(--ink-2); }.network-pairs dd { margin:0; user-select:text; }
.network-response { margin:10px 0; font:12px/1.6 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.network-note { padding:5px 8px; border-top:1px solid var(--seam-2); color:var(--ink-3); font-size:10px; }
.network-empty { padding:12px; color:var(--ink-2); font-size:12px; }
@media(max-width:860px) { .cgrid,.cgrid.pv { grid-template-columns:minmax(0,1fr); } .cgrid.pv > .pane-resizer { display:none; } }
.network-list .s2 {color:var(--signal);} .network-list .s4,.network-list .s5 {color:var(--err);}
.browser-actions { display:contents; }
.network-list table { font-size:12px; }
@container (max-width:480px) {
  .browser-actions { display:flex; align-items:center; justify-content:flex-end; gap:3px; width:100%; }
  .browser-actions .browser-pill span { display:inline; }
}
@container (max-width:340px) { .browser-actions .browser-pill span { display:none; } }
.network-tabs [role=tablist] { display:flex; }

/* ═════════ ALWIS — système de composants (v3) ═════════ */
.ic { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.ic.sm { width:14px; height:14px; } .ic.lg { width:20px; height:20px; }
.btn .ic { margin-inline:-1px; }
.iconbtn { display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:var(--r); color:var(--ink-2); transition:background .15s var(--ease), color .15s, transform .12s var(--ease); }
.iconbtn:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--hover); color:var(--ink); }
.iconbtn:active:not(:disabled) { transform:scale(.94); }
.iconbtn:disabled, .iconbtn[aria-disabled="true"] { opacity:.38; cursor:not-allowed; }
.iconbtn[aria-pressed="true"] { background:var(--sel); color:var(--signal); }

/* En-tête : repère, projet, recherche d'actions, état d'enregistrement, thème */
.app > .top { grid-area:top; display:flex; align-items:center; gap:10px; min-width:0; padding:0 12px 0 10px; background:var(--faceplate); border-bottom:1px solid var(--seam-2); }
.mark { display:flex; align-items:center; gap:9px; height:34px; padding:0 8px 0 4px; border-radius:var(--r); font-size:13.5px; transition:background .15s; }
.mark:hover { background:var(--hover); }
.mark-name { font-weight:650; letter-spacing:.05em; }
.chip { display:flex; align-items:center; gap:10px; height:36px; flex:0 1 auto; min-width:150px; max-width:min(400px,38vw); padding:0 10px 0 9px; border-radius:var(--r); background:var(--sheet); box-shadow:inset 0 0 0 1px var(--seam-2); transition:box-shadow .15s; }
.chip:hover { box-shadow:inset 0 0 0 1px var(--ink-3); }
.chip[aria-expanded="true"] { box-shadow:inset 0 0 0 2px var(--signal); }
.chip-ic { color:var(--ink-2); }
.chip-text { display:grid; min-width:0; line-height:1.2; text-align:left; }
.chip #pname { font-size:13px; font-weight:600; color:var(--ink); }
.chip .project-caption { font-size:10px; color:var(--ink-3); letter-spacing:.02em; }
.chip .ladder { display:none; }
#psum { display:inline-flex; align-items:center; gap:7px; padding-left:10px; border-left:1px solid var(--seam-2); font-size:11px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
#psum::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--off); }
#psum[data-lvl="k"]::before { background:var(--ok); } #psum[data-lvl="w"]::before { background:var(--warn); } #psum[data-lvl="e"]::before { background:var(--err); }
#psum:empty { display:none; }
.project-chevron { color:var(--ink-3); margin-left:-2px; }
.cmd { display:flex; align-items:center; gap:10px; flex:1; min-width:160px; max-width:460px; height:34px; margin-inline:auto; padding:0 8px 0 12px; border-radius:999px; background:var(--recess); box-shadow:inset 0 0 0 1px var(--seam); color:var(--ink-2); text-align:left; transition:box-shadow .15s, color .15s; }
.cmd:hover { box-shadow:inset 0 0 0 1px var(--seam-2); color:var(--ink-2); }
.cmd span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd kbd { flex:none; }
.top-spacer { display:none; }
#primary { gap:8px; }
@media (max-width:860px) { .top-spacer { display:block; flex:1; } #themeBtn { order:9; } }
@media (max-width:680px) { .chip { max-width:none; min-width:0; flex:1; } #psum { display:none; } .mark-name { display:inline; } .top-spacer { display:none; } }
@media (max-width:360px) { #primary span { display:none; } #primary { padding:0; width:32px; } }

/* Notifications : pile en bas à droite, une icône et une gravité par message. */
.toast-stack { position:fixed; right:16px; bottom:40px; z-index:10000; display:grid; gap:8px; width:min(380px,calc(100vw - 32px)); pointer-events:none; }
.toast-item { --c:var(--signal); position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:start; gap:2px 12px; padding:12px 8px 14px 14px; border-radius:10px; background:var(--raised); box-shadow:0 0 0 1px var(--seam-2), 0 12px 32px rgba(0,0,0,.2); pointer-events:auto; overflow:hidden; animation:toast-in .26s var(--ease); }
.toast-item[data-kind="success"] { --c:var(--ok); } .toast-item[data-kind="warn"] { --c:var(--warn); } .toast-item[data-kind="error"] { --c:var(--err); }
.toast-item.leaving { animation:toast-out .22s var(--ease) forwards; }
.toast-ic { color:var(--c); display:grid; padding-top:1px; }
.toast-ic .ic { width:18px; height:18px; }
.toast-body { display:grid; gap:2px; min-width:0; }
.toast-title { font-size:12px; font-weight:600; color:var(--ink); }
.toast-msg { font-size:13px; color:var(--ink-2); overflow-wrap:anywhere; }
.toast-act { align-self:center; height:28px; padding:0 10px; border-radius:var(--r); font-weight:600; color:var(--signal); box-shadow:inset 0 0 0 1px var(--seam-2); }
.toast-act:hover { background:var(--hover); }
.toast-x { width:26px; height:26px; margin-top:-2px; }
.toast-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--c); opacity:.7; transform-origin:left; animation:toast-bar var(--toast-ms) linear forwards; }
.toast-item.paused .toast-bar { animation-play-state:paused; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes toast-out { to { opacity:0; transform:translateX(16px); } }
@keyframes toast-bar { to { transform:scaleX(0); } }
@media (max-width:680px) { .toast-stack { right:12px; left:12px; width:auto; bottom:84px; } }

/* Bandeau d'erreur : même langage que les notifications, avec la piste de récupération. */
.alert { display:flex; align-items:flex-start; gap:12px; margin:10px 12px 0; padding:12px 12px 12px 14px; border-radius:10px; background:color-mix(in srgb,var(--err) 9%,var(--sheet)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--err) 35%,transparent); }
.alert-ic { color:var(--err); display:grid; padding-top:1px; } .alert-ic .ic { width:18px; height:18px; }
.alert-body { flex:1; min-width:0; display:grid; gap:2px; }
.alert-body b { color:var(--err); font-size:13px; } .alert-body p { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.alert-recover { color:var(--ink-2) !important; font-size:12px; }
.alert-actions { display:flex; align-items:center; gap:6px; flex:none; }

/* Ouverture d'un projet : repère, projet, étape courante, avancement par jalons. */
.project-loading { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:var(--sheet); color:var(--ink); animation:fade-in .2s var(--ease); }
.project-loading-content { display:grid; justify-items:center; gap:14px; width:min(440px,calc(100vw - 48px)); text-align:center; }
.project-loading-brand { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:15px; font-weight:650; letter-spacing:.06em; }
.project-loading-label { margin:0; font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.project-loading-name { margin:0; font-size:22px; font-weight:650; letter-spacing:-.01em; overflow-wrap:anywhere; }
.project-loading-step { position:relative; width:100%; height:30px; margin-top:6px; overflow:hidden; }
.project-loading-step p { position:absolute; inset:0; margin:0; display:grid; place-items:center; font-size:15px; color:var(--ink-2); animation:project-step-in .32s var(--ease) both; }
.project-loading-step .leaving { animation:project-step-out .22s var(--ease) both; }
.project-loading-track { display:flex; gap:5px; width:100%; margin-top:6px; }
.project-loading-track i { flex:1; height:4px; border-radius:2px; background:var(--seam-2); transition:background .3s var(--ease); }
.project-loading-track i.done { background:var(--ink); } .project-loading-track i.now { background:var(--signal); animation:project-pulse 1.2s ease-in-out infinite; }
.project-loading-dots { display:flex; gap:6px; margin-top:2px; }
.project-loading-dots i { width:5px; height:5px; border-radius:50%; background:var(--ink-3); animation:project-dot 1.1s infinite; }
.project-loading-dots i:nth-child(2) { animation-delay:.16s; } .project-loading-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes fade-in { from { opacity:0; } }
@keyframes project-step-in { from { opacity:0; transform:translateY(10px); } }
@keyframes project-step-out { to { opacity:0; transform:translateY(-10px); } }
@keyframes project-pulse { 50% { opacity:.35; } }
@keyframes project-dot { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { .project-loading, .project-loading-step p, .project-loading-step .leaving, .project-loading-track i.now, .project-loading-dots i, .toast-item, .toast-bar { animation:none !important; } .project-loading-dots i { opacity:.6; } }


/* ===== Finitions : accueil, schéma, sessions, poignées, états, modales ===== */
.ic.inline-ic { display:inline-block; vertical-align:-3px; width:15px; height:15px; }
.btn .ic { width:15px; height:15px; flex:none; }

/* États inutilisables : un seul langage pour tous les boutons */
.btn:disabled, .iconbtn:disabled, .seg button:disabled, .pill:disabled, .nullb:disabled,
.btn[aria-disabled="true"], .iconbtn[aria-disabled="true"] {
  opacity:.4; cursor:not-allowed; box-shadow:none; filter:saturate(.4);
}
.btn.pri:disabled { background:var(--ink-3); color:var(--on-ink); }
.btn.quiet:disabled { background:none; }

/* Poignées de redimensionnement : fines au repos, nettes au survol */
.pane-resizer { position:relative; display:none; align-items:center; justify-content:center; margin:0; background:transparent; color:var(--ink-3); cursor:col-resize; touch-action:none; user-select:none; outline:0; border-radius:0; }
.pane-resizer::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); background:var(--seam-2); transition:width .12s var(--ease), background .12s; }
.pane-resizer .grip { position:relative; width:14px; height:14px; opacity:0; transition:opacity .12s; background:var(--faceplate); border-radius:4px; padding:1px; box-shadow:0 0 0 1px var(--seam-2); }
.pane-resizer:hover::before, .pane-resizer:focus-visible::before, .pane-resizer.dragging::before { width:3px; background:var(--signal); }
.pane-resizer:hover .grip, .pane-resizer:focus-visible .grip, .pane-resizer.dragging .grip { opacity:1; color:var(--signal); }
.pane-resizer:focus-visible { box-shadow:inset 0 0 0 2px var(--signal); }
.pane-resizer.horizontal { display:flex; flex:0 0 9px; cursor:row-resize; margin:0; }
.pane-resizer.horizontal::before { top:50%; bottom:auto; left:0; right:0; width:auto; height:1px; transform:translateY(-50%); transition:height .12s var(--ease), background .12s; }
.pane-resizer.horizontal:hover::before, .pane-resizer.horizontal:focus-visible::before, .pane-resizer.horizontal.dragging::before { width:auto; height:3px; }
.dock .grip { position:absolute; }
.dock .grip::after { content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:transparent; transition:background .12s, height .12s; }
.dock .grip:hover::after { height:3px; top:2px; background:var(--signal); }

/* Accueil */
.launch { max-width:1040px; margin-inline:auto; }
.welcome { text-align:left; }
.create-project { box-shadow:0 1px 0 var(--seam), 0 12px 32px -18px rgba(21,25,29,.22); }
.open-project { background:var(--faceplate); }
.home-icon { background:var(--sel); border-color:transparent; border-radius:11px; }
.starter-choice { align-items:flex-start; padding:14px; transition:border-color .15s, background .15s; }
.starter-choice:hover { border-color:var(--signal); }
.starter-choice input { position:absolute; opacity:0; z-index:2; top:12px; right:12px; width:16px; height:16px; margin:0; cursor:pointer; }
.starter-choice::after { content:""; position:absolute; top:12px; right:12px; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--seam-2); transition:box-shadow .15s, background .15s; }
.starter-choice:has(:checked)::after { background:var(--signal); box-shadow:inset 0 0 0 4px var(--sheet), 0 0 0 1.5px var(--signal); }
.starter-ic { width:20px; height:20px; flex:none; color:var(--signal); margin-top:1px; }
.open-source { box-shadow:0 1px 0 var(--seam); }
.open-source .source-arrow { width:16px; height:16px; margin-left:auto; color:var(--ink-3); flex:none; transition:transform .15s var(--ease), color .15s; }
.open-source:hover .source-arrow { transform:translateX(3px); color:var(--signal); }
.recent-grid > * { transition:border-color .15s, box-shadow .15s; }

/* Barre du schéma */
.bar-group { display:inline-flex; gap:6px; align-items:center; }
.bar-sep { width:1px; height:18px; background:var(--seam-2); margin:0 4px; }
#v-schema .bar .btn.sm { min-height:28px; }
#v-schema .seg button { display:inline-grid; place-items:center; min-width:28px; }
#v-schema .seg .ic { width:15px; height:15px; }
@media(max-width:700px) { .bar-sep { display:none; } #v-schema .bar { flex-wrap:wrap; } }

/* Sessions */
.sess-wrap { max-width:1100px; margin-inline:auto; width:100%; }
.sess-wrap h1 { letter-spacing:-.02em; }
.sess-bar { padding-bottom:4px; border-bottom:1px solid var(--seam); }
.scard { box-shadow:0 0 0 1px var(--seam), inset 0 3px 0 var(--sc), 0 10px 26px -20px rgba(21,25,29,.3); transition:box-shadow .15s var(--ease), transform .15s var(--ease); }
.scard:hover { transform:translateY(-1px); box-shadow:0 0 0 1px var(--seam-2), inset 0 3px 0 var(--sc), 0 14px 30px -18px rgba(21,25,29,.35); }
.scard footer .btn { flex:1 1 auto; }

/* Modales : en-tête, fermeture, pied cohérents */
dialog { border-radius:14px; }
.dlg-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 12px 20px; border-bottom:1px solid var(--seam); }
.dlg-h h1 { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.dlg-x { margin:-4px 0; }
.dlg-b { padding:16px 20px; }
.dlg-f { padding:12px 20px 16px; border-top:1px solid var(--seam); background:var(--faceplate); border-radius:0 0 14px 14px; }
.btn.pri.bad { background:var(--err); color:#fff; }

/* Listes déroulantes : même aspect partout (la liste ouverte reste celle du navigateur) */
select.in, select.in:hover { appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2366707a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:14px; }
select.in:focus { background-color:var(--sheet); }

/* Dialogue d'ajout de colonne */
.column-target { color:var(--ink-2); margin:0 0 14px; }
.column-form { display:grid; gap:14px; }
.column-form fieldset { border:0; padding:0; margin:0; min-width:0; display:grid; gap:12px; }
.column-form legend { padding:0; margin-bottom:10px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); float:left; width:100%; }
.column-form legend + * { clear:both; }
.column-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; align-items:start; }
.column-form .field { min-width:0; margin:0; }
.column-form .field > span { font-size:12px; font-weight:500; color:var(--ink-2); }
.column-form .hint { font-size:11px; line-height:1.4; color:var(--ink-3); }
.column-form .chk2.span-all { grid-column:1/-1; padding:4px 0; }
.column-form .chk2 input { accent-color:var(--signal); width:15px; height:15px; margin:0; flex:none; }
.column-form .chk2:has(input:disabled) { opacity:.45; }
.column-form details { border:1px solid var(--seam); border-radius:9px; padding:0 14px; }
.column-form summary { padding:10px 0; font-weight:500; color:var(--ink-2); }
.column-form details[open] > summary { border-bottom:1px solid var(--seam); margin-bottom:12px; }
.column-form details > .column-fields { padding-bottom:14px; margin-top:0; }
#column-error { margin:0; min-height:0; color:var(--err); font-size:12px; }
#column-error:empty { display:none; }
#column-error:not(:empty) { padding:8px 10px; border-radius:7px; background:color-mix(in srgb, var(--err) 9%, transparent); }
@media(max-width:520px) { .column-fields { grid-template-columns:1fr; } }
/* Text-only identity, including narrow screens and the loading overlay. */
.project-loading-brand { font-weight:700; letter-spacing:.14em; }
@media(max-width:680px) { .mark { flex:none; padding:0 4px; } }
@media(prefers-reduced-motion:reduce) { .pane-resizer::before,.pane-resizer .grip,.scard { transition:none; } .scard:hover { transform:none; } }

/* Language-navigation results share the editor's panel controls. */
.cm-editor .cm-help-results { padding:0; font:13px/1.5 var(--sans); max-height:240px; }
.cm-help-results > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; position:sticky; top:0; z-index:1; background:var(--raised); border-bottom:1px solid var(--seam); }
.cm-editor .cm-help-results .cm-results-close { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:6px; border:0; border-radius:6px; }
.cm-results-close svg { width:18px; height:18px; }
.cm-results-list { padding:4px; }
.cm-editor .cm-help-results .cm-result-item { display:block; width:100%; padding:8px 10px; border:0; border-radius:5px; text-align:left; overflow-wrap:anywhere; font:inherit; }
.cm-editor .cm-help-results button:hover { background:var(--hover) !important; }
.cm-editor .cm-help-results button:focus-visible { outline:2px solid var(--signal); outline-offset:-2px; }
.cell-error { display:block; max-width:28ch; padding:4px 6px; color:var(--err); font:12px/1.5 var(--sans); white-space:normal; }
.cell-error:empty { display:none; }
.dg tr.ghost input.err { border:1px solid var(--err); background:color-mix(in srgb,var(--err) 8%,var(--sheet)); animation:invalid-cell 180ms ease-in-out; }
@keyframes invalid-cell { 25% { transform:translateX(-2px); } 75% { transform:translateX(2px); } }
@media (prefers-reduced-motion:reduce) { .dg tr.ghost input.err { animation:none; } }
.cm-result-form > label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 12px; }
.cm-result-form > label input { flex:1; min-width:120px; padding:6px 8px; border:1px solid var(--seam); border-radius:5px; font:inherit; }
.cm-editor .cm-result-form > button { display:inline-block; padding:6px 12px; margin:0 12px 10px; border-radius:5px; font:inherit; }
.cm-result-form > p { padding:0 12px 10px; }
.alwis-problems > header button svg { width:18px; height:18px; vertical-align:middle; }
.dg tr.ghost td { vertical-align:top; }
.dg tr.ghost input { display:block; height:32px; padding:4px 6px; }
.dg tr.ghost .cell-error { max-width:none; }

/* Hover labels paint in a separate final SVG layer, above tables and links. */
.lkg:hover .lab { opacity:0; }
.schema-link-overlay, .schema-link-overlay * { pointer-events:none; }
.schema-link-overlay .lab { opacity:1; }
.relation-rule-help { margin:0 0 8px; line-height:1.5; }
.relpop { max-height:calc(100dvh - 24px); overflow:auto; }
.dg td.edit .ce { display:block; height:32px; min-height:32px; }
.dg td.edit:has([aria-invalid="true"]) { box-shadow:inset 0 0 0 2px var(--err); }
.dg td.edit [aria-invalid="true"] { background:color-mix(in srgb,var(--err) 8%,var(--sheet)); animation:invalid-cell 180ms ease-in-out; }
.dg td.edit .cell-error { max-width:46ch; min-width:180px; }
.cell-error .btn, .data-feedback .btn { margin:6px 6px 2px 0; }
.cell-error small, .data-feedback small { display:block; font:inherit; }
.data-feedback { padding:12px 16px; border-left:3px solid var(--err); background:var(--sheet); color:var(--ink); font:13px/1.5 var(--sans); }
.data-feedback:empty { display:none; }
#ghost-feedback { max-width:none; }
@media(prefers-reduced-motion:reduce) { .dg td.edit [aria-invalid="true"] { animation:none; } }
.cell-error { text-align:left; }
.cell-error .btn { color:var(--ink); }
#modal .in[aria-invalid="true"] { border-color:var(--err); box-shadow:0 0 0 1px var(--err); }

.folder-failure { display:grid; gap:12px; overflow-wrap:anywhere; }
.folder-exclusions { display:grid; gap:6px; margin:0; padding:0; list-style:none; max-height:220px; overflow:auto; }
.folder-exclusions li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--seam); border-radius:5px; background:var(--faceplate); }
.folder-exclusions span { min-width:0; overflow-wrap:anywhere; }
.folder-exclusions small { flex:none; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.import-picker { display: grid; gap: 12px; }
.import-picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.import-group, .import-file { display: flex; gap: 10px; align-items: start; padding: 8px; border-bottom: 1px solid var(--seam); }
.import-file > span:first-of-type, .import-group > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.import-file small, .import-group small { display: block; color: var(--ink-2); }
.import-file-list { max-height: 280px; overflow: auto; border: 1px solid var(--seam-2); }
#importIssue { color: var(--err); }
#importBudget { font-weight: 600; }
.import-file input, .import-group input { flex: none; margin-top: 4px; }
.site-updating { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; padding: 24px; color: var(--ink); background: var(--sheet); font-size: 18px; }
.site-update-error { position: fixed; bottom: 32px; left: 12px; right: 12px; max-width: 680px; padding: 12px; color: var(--err); background: var(--sheet); border: 1px solid var(--err); z-index: 1000; }