:root{
  --bg:#0c1117;
  --surface:#141b23;
  --surface-2:#1c2530;
  --surface-3:#242f3c;
  --line:#2a3542;
  --text:#e7ecf1;
  --text-dim:#8b98a7;
  --text-faint:#5c6b7a;
  --accent:#ff7a1f;
  --accent-dim:#7a3e18;
  --accent-2:#f2c94c;
  --cad:#4fd6dd;
  --contour:#c7d1db;
  --danger:#e5484d;
  --success:#5ecb6f;
  --interior:#c77bdc;
  --shadow: 0 12px 32px rgba(0,0,0,0.45);
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.label{
  font-weight:700; text-transform:uppercase; letter-spacing:0.09em;
}
.mono{ font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }

a{ color:var(--cad); }

button, input, select, textarea{ font-family:inherit; }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--text-dim);
  font-size:12.5px; font-weight:600; letter-spacing:0.02em;
  cursor:pointer;
}
.btn:hover{ background:var(--surface-3); color:var(--text); }
a.btn{ text-decoration:none; }
.btn:focus-visible{ outline:2px solid var(--cad); outline-offset:2px; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a0f05; }
.btn.primary:hover{ background:#ff8a3a; }
.btn.danger{ color:var(--danger); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:10px; color:var(--text-faint); letter-spacing:0.06em; text-transform:uppercase; }
.field input, .field select, .field textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:8px 9px; color:var(--text); font-size:12.5px;
}
.field textarea{ resize:none; height:52px; }
.field input[type=color]{ width:52px; height:30px; padding:2px; cursor:pointer; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--cad); }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, #16202b, var(--bg) 60%);
}
.login-card{
  width:340px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.login-card .brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:10px; }
.brand-tagline{ margin:0; font-size:12px; color:var(--text-dim); letter-spacing:0.02em; }
.login-error{ font-size:12px; color:var(--danger); min-height:16px; }

/* ---------- Toasts ---------- */
.toast-stack{
  position:fixed; bottom:16px; right:16px; z-index:1000;
  display:flex; flex-direction:column; gap:8px;
}
.toast{
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:10px 14px; font-size:12.5px; box-shadow:var(--shadow);
  max-width:320px;
}
.toast.error{ border-color:var(--danger); }
.toast.success{ border-color:var(--success); }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:999;
  display:flex; align-items:center; justify-content:center;
}
.modal{
  width:360px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
}
.modal h3{ margin:0; font-size:14px; }
.modal p{ margin:0; font-size:12.5px; color:var(--text-dim); }
.modal .actions{ display:flex; justify-content:flex-end; gap:8px; }
.modal.wide{ width:460px; max-width:calc(100vw - 32px); }
.open-project-dialog{ display:flex; flex-direction:column; gap:12px; }
.dialog-search{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:8px 9px; color:var(--text); font-size:12.5px;
}
.dialog-search:focus{ outline:none; border-color:var(--cad); }
.project-list{ max-height:360px; overflow-y:auto; }
.project-row{ align-items:flex-start; }
.project-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.project-row .id{ font-size:12.5px; }

/* ---------- App shell ---------- */
.app{
  height:100vh; display:grid;
  grid-template-rows: 52px 38px 1fr 28px;
  grid-template-columns: 58px 268px 1fr 280px;
  grid-template-areas: "top top top top" "opts opts opts opts" "rail left canvas right" "status status status status";
  transition: grid-template-columns .15s ease;
}
.app.panel-left-collapsed{
  grid-template-columns: 58px 0px 1fr 280px;
}
.topbar{
  grid-area: top; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 16px; gap:10px;
  position:relative; z-index:5;
}
.topbar .wordmark{ margin-right:4px; }
.topbar-sep{ width:1px; height:22px; background:var(--line); flex-shrink:0; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost:hover{ background:var(--surface-2); }
.btn.icon{ width:34px; padding:0; justify-content:center; }
.btn.icon svg{ width:17px; height:17px; }
.btn .caret{ font-size:9px; opacity:0.7; }
.btn-split .btn:first-child{ border-radius:5px 0 0 5px; }
.btn-split .caret-btn{ border-radius:0 5px 5px 0; border-left:1px solid #c9560c; padding:0 9px; font-size:10px; }
.save-state{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
.save-state.dirty{ color:var(--accent-2); }
.save-state.dirty::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ---------- Dropdown menus (js/ui/menu.js) ---------- */
/* Visibility only through .open -- never the hidden attribute. */
.menu-wrap{ position:relative; display:inline-flex; }
.menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:40;
  min-width:220px; padding:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
}
.menu.open{ display:block; }
.menu.align-right{ left:auto; right:0; }
.menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; background:none; border:0; border-radius:5px;
  color:var(--text-dim); font-size:12.5px; text-align:left; cursor:pointer; white-space:nowrap;
}
.menu-item:hover, .menu-item:focus-visible{ background:var(--surface-3); color:var(--text); outline:none; }
.menu-item .kb{ margin-left:auto; font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:10.5px; color:var(--text-faint); }
.menu-sep{ height:1px; background:var(--line); margin:4px 2px; }
.menu-heading{ padding:6px 10px 3px; font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); }
.wordmark{ display:flex; align-items:center; gap:9px; padding-right:16px; border-right:1px solid var(--line); }
/* cota360 (includes/brand.php): icona + lletres; les lletres "cota" són blanques, cal fons fosc. */
.brand-logo{ display:flex; align-items:center; gap:8px; }
.brand-logo img{ display:block; }
.brand-logo.bar .brand-icon{ width:32px; height:32px; }
.brand-logo.bar .brand-letters{ height:19px; width:auto; }
.brand-logo.login{ flex-direction:column; gap:14px; }
.brand-logo.login .brand-icon{ width:96px; height:96px; }
.brand-logo.login .brand-letters{ height:30px; width:auto; }
.topbar-spacer{ flex:1; }
.project-name-input{
  background:transparent; border:1px solid transparent; color:var(--text);
  font-size:12.5px; padding:5px 7px; border-radius:5px; min-width:220px;
}
.project-name-input:hover, .project-name-input:focus{ border-color:var(--line); outline:none; background:var(--surface-2); }
.user-chip{ font-size:11.5px; color:var(--text-faint); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.tool-rail{
  grid-area:rail; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0;
  position:relative; z-index:2;
}
.tool-rail .tool-btn{
  width:36px; height:36px; padding:0; flex-direction:row; gap:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text-dim);
}
.tool-rail .tool-btn:hover{ background:var(--surface-2); border-color:transparent; color:var(--text); }
.tool-rail .tool-btn.active{ background:rgba(255,122,31,0.14); border-color:transparent; color:var(--accent); }
.tool-rail .tool-btn svg{ width:19px; height:19px; flex-shrink:0; }
/* ---------- Options bar (js/panels/options-bar.js) ---------- */
.optionsbar{
  grid-area:opts; display:flex; align-items:center; gap:10px; padding:0 14px; min-width:0; overflow:hidden;
  background:var(--surface); border-bottom:1px solid var(--line); font-size:12px; color:var(--text-dim);
}
.ob-tool{ font-weight:700; color:var(--text); white-space:nowrap; }
.ob-sep{ width:1px; height:18px; background:var(--line); flex-shrink:0; }
.ob-spacer{ flex:1; min-width:8px; }
.ob-label{ white-space:nowrap; }
.ob-seg{ display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:2px; flex-shrink:0; }
.ob-seg button{ padding:3px 9px; background:none; border:0; border-radius:4px; color:var(--text-dim); font-size:11.5px; cursor:pointer; white-space:nowrap; }
.ob-seg button.on{ background:rgba(255,122,31,0.16); color:var(--accent); }
.ob-field{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ob-field input{
  width:62px; padding:4px 6px; background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  color:var(--text); font-size:12px;
}
.ob-field input:focus{ outline:none; border-color:var(--cad); }
.ob-toggle{ padding:4px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--text-faint); font-size:11.5px; cursor:pointer; flex-shrink:0; }
.ob-toggle.on{ border-color:var(--accent); color:var(--accent); background:rgba(255,122,31,0.1); }
.ob-select{
  max-width:150px; padding:3px 6px; background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  color:var(--text); font-size:12px; flex-shrink:1; min-width:0;
}
.ob-select:disabled{ opacity:0.5; }
.ob-note{ font-size:11px; color:var(--accent-2); white-space:nowrap; }
.ob-btn{ padding:4px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--text-dim); font-size:11.5px; font-weight:600; cursor:pointer; flex-shrink:0; }
.ob-btn:hover{ background:var(--surface-3); color:var(--text); }
.ob-btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a0f05; }
.ob-warn{ font-size:11px; color:var(--accent-2); white-space:nowrap; }
.ob-hints{ display:flex; gap:12px; font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; }
.ob-hints kbd{
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:10px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:3px; padding:0 4px;
}
.optionsbar button:focus-visible, .optionsbar input:focus-visible{ outline:2px solid var(--cad); outline-offset:1px; }

/* Canvas cursors: crosshair while drawing, hand while panning. */
#stage-container.drawing canvas{ cursor:crosshair; }
#stage-container.can-pan canvas{ cursor:grab; }
#stage-container.panning canvas{ cursor:grabbing; }
#stage-container.dragging-vertex canvas{ cursor:move; }

/* Loupe while placing a perspective corner (main.js). Visibility only via .open. */
.loupe{
  display:none; position:absolute; z-index:5; width:160px; height:160px; pointer-events:none;
  border-radius:50%; border:2px solid var(--accent); box-shadow:var(--shadow); background:#0a0e13;
}
.loupe.open{ display:block; }

/* Llegenda panel */
.legend-panel{ display:flex; flex-direction:column; gap:12px; }
.lg-check{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.lg-check input{ accent-color:var(--accent); }
.lg-rows{ display:flex; flex-direction:column; gap:8px; }
.lg-row{ display:flex; flex-direction:column; gap:4px; }
.lg-row input[type=text], .lg-row textarea, .lg-layer input{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:6px 8px; color:var(--text); font-size:12px; margin-left:22px;
}
.lg-row textarea{ resize:vertical; font-family:inherit; }
.lg-row input:focus, .lg-row textarea:focus, .lg-layer input:focus{ outline:none; border-color:var(--cad); }
.lg-auto{ margin-left:22px; font-size:11px; color:var(--text-faint); }
.lg-layer-names{ display:flex; flex-direction:column; gap:6px; }
.lg-layer{ display:flex; flex-direction:column; gap:3px; }
.lg-layer-default{ font-size:10.5px; color:var(--text-faint); margin-left:22px; }

/* Label settings (Capes "Aa" dialog + inspector) */
.lt-aa{ font-size:11px; font-weight:700; opacity:0.45; }
.lt-row:hover .lt-aa{ opacity:1; }
.label-fields{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.label-field, .field .label-field{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); cursor:pointer; text-transform:none; letter-spacing:0; }
.label-field input{ accent-color:var(--accent); }
.label-size input{ width:90px; }
.label-dialog{ display:flex; flex-direction:column; gap:14px; }
.label-dialog-body{ display:flex; flex-direction:column; gap:12px; }
.insp-label-block .label-fields{ margin-top:6px; }
.insp-label-block .label-size{ margin-top:6px; }

/* Inspector: model picker, model checks */
.model-pick{ display:flex; flex-direction:column; gap:6px; }
.model-pick select{ background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:7px 8px; color:var(--text); font-size:12.5px; }
.model-pick select:disabled{ opacity:0.5; }
.insp-hint{ margin:2px 0 0; font-size:10.5px; color:var(--text-faint); }
.insp-check{ border:1px solid var(--line); border-left:3px solid var(--cad); border-radius:6px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--text-dim); }
.insp-check p{ margin:0; }
.insp-check ul{ margin:0; padding-left:18px; }
.insp-check .btn{ height:28px; justify-content:center; }
.insp-check.bad{ border-left-color:var(--danger); background:rgba(229,72,77,0.07); color:var(--text); }
.insp-check.vertex{ border-left-color:var(--accent); }

/* Inspector: spans of a lifeline/guardrail */
.span-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.span-table th{ text-align:left; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); padding:2px 6px 4px; }
.span-table td{ padding:3px 6px; border-top:1px solid var(--line); color:var(--text-dim); }
.span-table tr[data-span-row]{ cursor:pointer; }
.span-table tr[data-span-row]:hover td{ background:var(--surface-2); }
.span-table tr.on td{ background:rgba(255,122,31,0.12); color:var(--text); }
.span-table input{ width:56px; padding:3px 6px; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; color:var(--text); font-size:11.5px; }
.span-table input:focus{ outline:none; border-color:var(--cad); }

/* ---------- Rail: tool group with flyout + panel (activity) buttons ---------- */
.tool-group{ position:relative; }
.fly-toggle{
  position:absolute; right:-2px; top:-2px; width:14px; height:14px; padding:0;
  background:none; border:0; cursor:pointer; z-index:1;
}
.fly-toggle::after{
  content:""; position:absolute; right:3px; top:3px;
  border-left:5px solid transparent; border-top:5px solid var(--text-faint);
}
.fly-toggle:hover::after, .fly-toggle[aria-expanded="true"]::after{ border-top-color:var(--accent); }
.menu.flyout{ left:calc(100% + 10px); top:-4px; }
.menu-item svg{ width:15px; height:15px; flex-shrink:0; }
.rail-sep.wide{ width:38px; }
.act-btn{
  position:relative; width:52px; height:46px; flex-shrink:0; border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; cursor:pointer; color:var(--text-faint);
  font-size:8.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}
.act-btn svg{ width:18px; height:18px; }
.act-btn:hover{ background:var(--surface-2); color:var(--text); }
.act-btn.on{ color:var(--text); }
.act-btn.on::before{ content:""; position:absolute; left:-3px; top:9px; bottom:9px; width:2px; border-radius:1px; background:var(--accent); }
.act-btn:focus-visible, .fly-toggle:focus-visible{ outline:2px solid var(--cad); outline-offset:1px; }

/* ---------- Left panel bodies ---------- */
.panel-body{ display:none; flex-direction:column; gap:14px; }
.panel-body.active{ display:flex; }
.panel-title{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:700; letter-spacing:0.02em; }
.panel-title-meta{ font-size:11px; font-weight:400; color:var(--text-faint); }
.panel-hint{ margin:0; font-size:11px; line-height:1.45; color:var(--text-faint); }
.btn-row{ display:flex; gap:6px; flex-wrap:wrap; }
.btn-row .btn{ flex:1; justify-content:center; }
.field .btn-row input{ flex:0 0 78px; }
.link-btn{ align-self:flex-start; padding:0; background:none; border:0; color:var(--cad); font-size:11.5px; text-align:left; cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }
.link-btn:disabled{ color:var(--text-faint); cursor:default; text-decoration:none; }
.kbd-hint{ font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:10px; color:var(--text-faint); border:1px solid var(--line); border-radius:3px; padding:0 4px; }
.photo-info{ font-size:11.5px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:8px 10px; overflow-wrap:anywhere; }
.calib-card .btn{ justify-content:center; }

/* Projecte: steps */
.step{ border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.step-head{
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px;
  background:none; border:0; color:var(--text); text-align:left; cursor:pointer; border-radius:8px;
}
.step-head:focus-visible{ outline:2px solid var(--cad); outline-offset:-2px; }
.step-status{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.step-status.ok{ background:rgba(94,203,111,0.16); color:var(--success); }
.step-status.todo{ background:rgba(242,201,76,0.16); color:var(--accent-2); }
.step-status.optional{ border:1.5px solid var(--line); color:var(--text-faint); }
.step-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.step-title{ font-size:12.5px; font-weight:600; }
.step-summary{ font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.step-chip{ display:inline-flex; align-items:center; gap:4px; margin-right:4px; padding:0 7px; border-radius:9px; background:var(--surface-3); color:var(--text-dim); font-size:10.5px; }
.step-chip .swatch{ width:8px; height:8px; }
.step-chev{
  width:7px; height:7px; flex-shrink:0; margin:0 4px 3px 0;
  border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint);
  transform:rotate(45deg); transition:transform .15s ease;
}
.step:not(.open) .step-chev{ transform:rotate(-45deg); margin-bottom:0; }
.step-body{ display:none; flex-direction:column; gap:10px; padding:2px 10px 12px 39px; }
.step.open .step-body{ display:flex; }
.steps-footer{ font-size:11.5px; color:var(--accent-2); padding-top:10px; border-top:1px solid var(--line); }
.steps-footer.ready{ color:var(--success); }

/* Capes: layer tree */
.layer-tree{ display:flex; flex-direction:column; gap:1px; }
.layer-tree button:focus-visible{ outline:2px solid var(--cad); outline-offset:-1px; }
.lt-row{ display:flex; align-items:center; gap:5px; padding:3px 4px; border-radius:6px; }
.lt-row:hover{ background:var(--surface-2); }
.lt-row.active{ background:rgba(255,122,31,0.1); }
.lt-chev{ width:16px; flex-shrink:0; padding:0; background:none; border:0; color:var(--text-faint); font-size:10px; cursor:pointer; text-align:center; }
.lt-chev:disabled{ visibility:hidden; }
.lt-icon{
  width:24px; height:24px; flex-shrink:0; padding:0; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--text-faint); cursor:pointer;
}
.lt-icon svg{ width:15px; height:15px; }
.lt-icon:hover{ background:var(--surface-3); color:var(--text); }
.lt-lock{ opacity:0.4; }
.lt-row:hover .lt-lock{ opacity:1; }
.lt-lock.on{ opacity:1; color:var(--accent); }
.lt-name{ flex:1; min-width:0; padding:4px 0; background:none; border:0; color:var(--text); font-size:12.5px; text-align:left; cursor:pointer; }
.lt-name:disabled{ cursor:default; color:var(--text-dim); }
.lt-row.is-hidden .lt-name, .lt-row.is-hidden .swatch{ opacity:0.4; }
.lt-children{ display:flex; flex-direction:column; gap:1px; padding-left:22px; margin-bottom:4px; }
.lt-children.is-hidden{ opacity:0.45; }
.lt-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:5px 8px; border-radius:5px;
  background:none; border:0; color:var(--text-dim); font-size:11.5px; text-align:left; cursor:pointer;
}
.lt-item:hover{ background:var(--surface-2); color:var(--text); }
.lt-item.active{ background:rgba(255,122,31,0.12); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); }
.lt-item.multi-active{ background:rgba(255,122,31,0.14); color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,122,31,0.55); }
.lt-swatch{ position:relative; width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; }
.lt-swatch:hover{ background:var(--surface-3); }
.lt-swatch .swatch{ width:12px; height:12px; }
.lt-swatch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.lt-swatch:focus-within{ outline:2px solid var(--cad); outline-offset:1px; }
.lt-multi{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; padding:7px 9px; border-radius:6px; background:rgba(255,122,31,0.1); font-size:11.5px; color:var(--text); }
.lt-reset-colors{ margin:8px 0 0 4px; }
.lt-label{ width:34px; flex-shrink:0; color:var(--text); }
.lt-meta{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; color:var(--text-faint); }
.lt-val{ font-size:10.5px; color:var(--text-dim); }

.canvas-empty .btn-row{ justify-content:center; }
.canvas-empty .btn-row .btn{ flex:0 0 auto; }

.tool-rail .tool-btn{ position:relative; }
.tool-rail .tool-btn .k{
  position:absolute; right:2px; bottom:1px; pointer-events:none;
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:8.5px; line-height:1; color:var(--text-faint);
}
.tool-rail .tool-btn.active .k{ color:var(--accent); }

.shortcuts-dialog{ display:flex; flex-direction:column; gap:14px; max-height:70vh; overflow-y:auto; }
.shortcuts-group{ display:flex; flex-direction:column; gap:4px; }
.shortcut-row{ display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:baseline; font-size:12.5px; color:var(--text-dim); }
.shortcut-row kbd{
  justify-self:start; font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:11px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 6px;
}

.rail-sep{ width:22px; height:1px; background:var(--line); margin:6px 0; flex-shrink:0; }
.rail-spacer{ flex:1; }

.rail-btn{
  width:36px; height:36px; padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text-dim); cursor:pointer;
}
.rail-btn:hover{ background:var(--surface-2); color:var(--text); }
.rail-btn svg{ width:19px; height:19px; flex-shrink:0; transition:transform .15s ease; }
.app.panel-left-collapsed .rail-btn svg{ transform:rotate(180deg); }

.panel-left, .panel-right{
  background:var(--surface); overflow-y:auto; padding:14px 12px;
  display:flex; flex-direction:column; gap:16px;
}
.panel-left{
  grid-area:left; border-right:1px solid var(--line); position:relative;
  overflow-x:hidden; padding:14px 12px;
}
.app.panel-left-collapsed .panel-left{ padding-left:0; padding-right:0; border-right:none; }
.panel-right{ grid-area:right; border-left:1px solid var(--line); }
.panel-heading{ font-size:10px; color:var(--text-faint); letter-spacing:0.12em; margin:0 0 8px 2px; }

.panel-tabs, .insp-tabs{ display:flex; gap:3px; background:var(--surface-2); padding:3px; border-radius:7px; flex-shrink:0; }
.panel-tab, .insp-tab{
  flex:1; text-align:center; font-size:9.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-faint); padding:7px 2px; border-radius:5px; cursor:pointer; white-space:nowrap;
}
.panel-tab:hover, .insp-tab:hover{ color:var(--text); }
.panel-tab.active, .insp-tab.active{ background:var(--surface-3); color:var(--accent); }
.panel-tab-body, .insp-tab-body{ display:none; flex-direction:column; gap:14px; }
.panel-tab-body.active, .insp-tab-body.active{ display:flex; }

.layer-row{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:6px; }
.layer-row:hover{ background:var(--surface-2); }
.swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.swatch.contour{ background:transparent; border:1.5px solid var(--contour); border-radius:2px; }
.swatch.anchors{ background:var(--accent); border-radius:50%; }
.swatch.lifelines{ background:var(--cad); border-radius:2px; }
.swatch.guardrails{ background:var(--accent-2); border-radius:2px; }
.swatch.ladders{ background:#7be089; border-radius:2px; }
.swatch.interiors{ background:var(--interior); border-radius:2px; }
.layer-name{ flex:1; font-size:12.5px; }
.layer-count{ font-size:10.5px; color:var(--text-faint); background:var(--surface-3); padding:1px 7px; border-radius:9px; }
.layer-row input[type=checkbox]{ accent-color:var(--accent); }

.tool-btn{ cursor:pointer; }

.calib-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:11px; display:flex; flex-direction:column; gap:8px; }
.calib-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; }
.calib-row .k{ color:var(--text-faint); }
.calib-scale{ font-size:13.5px; color:var(--cad); font-weight:600; border-top:1px dashed var(--line); padding-top:8px; }

.canvas-wrap{ grid-area:canvas; position:relative; background:#0a0e13; overflow:hidden; }
.canvas-wrap.white-bg{ background:#ffffff; }
#stage-container{ position:absolute; inset:0; }
.canvas-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:var(--text-faint); font-size:13px;
}

.statusbar{
  grid-area:status; background:var(--surface); border-top:1px solid var(--line);
  display:flex; align-items:center; gap:20px; padding:0 16px; font-size:10.5px; color:var(--text-faint);
}
.statusbar b{ color:var(--text-dim); font-weight:500; }
.statusbar .spacer{ flex:1; }

.inspector-header{ display:flex; align-items:center; gap:9px; }
.inspector-header .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }
.divider{ height:1px; background:var(--line); margin:2px 0; }
.element-list{ display:flex; flex-direction:column; gap:2px; }
.element-row{ display:flex; align-items:center; gap:8px; padding:7px; border-radius:5px; cursor:pointer; }
.element-row:hover{ background:var(--surface-2); }
.element-row.active{ background:rgba(255,122,31,0.1); }
.element-row.multi-active{ background:rgba(255,122,31,0.16); box-shadow:inset 0 0 0 1px var(--accent); }
.element-row .id{ font-size:11.5px; flex:1; }
.element-row .meta{ font-size:10px; color:var(--text-faint); }

.variant-toggle{ display:flex; gap:6px; }
.variant-toggle button{
  flex:1; padding:7px 0; font-size:10.5px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; color:var(--text-dim); cursor:pointer;
}
.variant-toggle button.on{ background:rgba(255,122,31,0.14); border-color:var(--accent); color:var(--accent); }

.point-picker{
  position:fixed; z-index:1000; min-width:170px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:4px; box-shadow:var(--shadow);
}
.point-picker-item{
  padding:8px 10px; font-size:12px; color:var(--text-dim); border-radius:5px; cursor:pointer; white-space:nowrap;
}
.point-picker-item:hover{ background:var(--surface-3); color:var(--text); }

/* ---------- Access admin ---------- */
.access-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.access-table th, .access-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
.access-table th{ color:var(--text-faint); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; }
.pill{ display:inline-block; padding:2px 9px; border-radius:9px; font-size:10.5px; }
.pill.on{ background:rgba(94,203,111,0.15); color:var(--success); }
.pill.off{ background:rgba(139,152,167,0.15); color:var(--text-faint); }

/* ---------- Fitxer › Opcions… (js/panels/options-dialog.js) ---------- */
.modal.opt-modal{ width:760px; max-width:calc(100vw - 32px); height:min(780px, calc(100vh - 48px)); padding:0; gap:0; overflow:hidden; }
.opt-dialog{ display:flex; flex-direction:column; height:100%; min-height:0; }
.opt-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px 10px; }
.opt-close{ background:none; border:0; color:var(--text-dim); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.opt-close:hover{ color:var(--text); }
.opt-tabs{ display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--line); }
.opt-tabs button{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:9px 12px; color:var(--text-dim); font-size:12.5px; font-weight:600; cursor:pointer;
}
.opt-tabs button:hover{ color:var(--text); }
.opt-tabs button.on{ color:var(--accent); border-bottom-color:var(--accent); }
.opt-body{ flex:1; min-height:0; overflow-y:auto; padding:16px 20px 20px; }
.opt-pane{ display:none; flex-direction:column; gap:18px; }
.opt-pane.on{ display:flex; }
.opt-foot{ display:none; align-items:center; justify-content:flex-end; gap:12px; padding:12px 20px; border-top:1px solid var(--line); background:var(--surface); }
.opt-foot.on{ display:flex; }
.opt-dirty{ font-size:11.5px; color:var(--accent-2); }
.modal .opt-intro{ font-size:12px; color:var(--text-dim); max-width:72ch; }
.modal .opt-hint{ font-size:11px; color:var(--text-faint); }
.opt-group{ display:flex; flex-direction:column; gap:8px; }
.opt-group.off{ display:none; }
.opt-group h4{ margin:0; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-faint); display:flex; align-items:center; gap:8px; }
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px 14px; }
.opt-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.opt-check input{ accent-color:var(--accent); width:15px; height:15px; margin:0; }
.opt-check.small{ font-size:11.5px; white-space:nowrap; }

.opt-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.opt-chips button{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim); font-size:11.5px; cursor:pointer;
}
.opt-chips button.on{ border-color:var(--accent); color:var(--accent); background:rgba(255,122,31,0.1); }
.opt-count{ font-size:10px; color:var(--text-faint); }

.opt-model{ background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }
.opt-model[open]{ border-color:#3a4756; }
.opt-model summary{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:10px 12px; cursor:pointer; list-style:none; }
.opt-model summary::-webkit-details-marker{ display:none; }
.opt-model summary::before{ content:"▸"; color:var(--text-faint); font-size:10px; margin-right:-4px; }
.opt-model[open] summary::before{ content:"▾"; }
.opt-model-name{ flex:1; font-size:13px; font-weight:600; color:var(--text); }
.opt-model-sum{ font-size:11px; color:var(--text-faint); }
.opt-badge{ font-size:10.5px; padding:1px 8px; border-radius:9px; background:var(--surface-3); color:var(--text-dim); }
.opt-model-form{ display:flex; flex-direction:column; gap:10px; padding:2px 12px 12px; }
.opt-model-form .field input, .opt-model-form .field textarea{ background:var(--surface); }
.opt-model-form textarea{ height:auto; resize:vertical; }
.opt-model-foot{ display:flex; align-items:center; gap:10px; }
.opt-saved{ font-size:11.5px; color:var(--success); }

.opt-list{ display:flex; flex-direction:column; gap:6px; }
.opt-row{ display:flex; align-items:center; gap:8px; }
.opt-row input[type=text], .opt-row select{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:6px 8px; color:var(--text); font-size:12.5px; min-width:0;
}
.opt-row input[type=text]{ flex:1; }
.opt-row select{ width:220px; }
.opt-row input:focus, .opt-row select:focus{ outline:none; border-color:var(--cad); }
.opt-row.is-hidden input[type=text]{ color:var(--text-faint); text-decoration:line-through; }
.opt-move{ display:flex; flex-direction:column; }
.opt-move button, .opt-del{ background:none; border:0; color:var(--text-faint); cursor:pointer; padding:0 3px; font-size:9px; line-height:1.2; }
.opt-move button:hover:not(:disabled), .opt-del:hover:not(:disabled){ color:var(--text); }
.opt-move button:disabled, .opt-del:disabled{ opacity:0.3; cursor:default; }
.opt-del{ font-size:17px; }
.opt-seg button{ padding:6px 0; }
@media (max-width:620px){
  .opt-row{ flex-wrap:wrap; }
  .opt-row select{ width:100%; order:5; }
}