/* ===================================================================
   AutoCAD 2027 — Translation Pre-flight prototype
   Static visual replica of the AutoCAD for Windows dark UI.
   No external assets, no fonts loaded, no network requests.
   =================================================================== */

:root {
  --chrome:        #2B3240;   /* app chrome */
  --ribbon:        #3B4453;   /* ribbon background */
  --palette:       #2E3542;   /* docked palettes */
  --palette-title: #262C37;   /* palette title bars */
  --section:       #3C4556;   /* palette section header rows */
  --row-a:         #343B48;   /* table rows, alternating */
  --row-b:         #2F3643;
  --sel:           #1F7FD1;   /* selected blue */
  --text:          #D9DEE6;
  --muted:         #9AA3B2;
  --paper:         #FFFFFF;   /* drawing sheet */
  --surround:      #4A505C;   /* grey around the sheet */
  --warn:          #F5A623;
  --error:         #E5484D;
  --ok:            #3FB950;

  --line:          #1F242E;   /* hairline between chrome regions */
  --line-soft:     #454D5C;   /* hairline inside palettes */
  --hover:         rgba(31, 127, 209, 0.22);
  --press:         rgba(31, 127, 209, 0.40);

  /* CAD linework */
  --cad-blue:      #1A1AE6;
  --cad-magenta:   #E01AE0;
  --cad-cyan:      #00B7C7;
  --cad-green:     #22A33A;
  --cad-grey:      #808080;

  --ui: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: Consolas, "SF Mono", Menlo, Monaco, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  background: var(--chrome);
  color: var(--text);
  font-family: var(--ui);
  font-size: 12px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100vh; min-width: 1280px; }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: default; }
svg { display: block; }
input, select { font-family: inherit; }

.hidden { display: none !important; }

/* ===================================================================
   TITLE BAR
   =================================================================== */

.titlebar {
  flex: 0 0 30px; height: 30px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 2px; padding-left: 2px;
}
.app-btn { width: 38px; height: 28px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.app-btn:hover { background: var(--hover); }
.app-mark {
  width: 20px; height: 20px; background: #E51937; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px; line-height: 1;
}
.caret { font-size: 8px; color: var(--muted); }

.qat { display: flex; align-items: center; gap: 1px; padding: 0 4px; }
.qat-btn {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 2px;
}
.qat-btn:hover { background: var(--hover); border-color: var(--sel); }
.qat-btn:active { background: var(--press); }
.qat-sep { width: 1px; height: 16px; background: var(--line-soft); margin: 0 3px; }

.title-centre { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.title-centre .product { color: var(--muted); }
.title-centre .doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-box {
  display: flex; align-items: center; gap: 4px;
  height: 20px; width: 180px; padding: 0 5px; margin-right: 4px;
  background: #222835; border: 1px solid var(--line-soft); border-radius: 2px;
}
.search-box:focus-within { border-color: var(--sel); }
.search-box input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 11px; }
.search-box input::placeholder { color: #6E7786; }

.title-right { display: flex; align-items: center; height: 100%; }
.title-icon-btn { width: 26px; height: 28px; display: flex; align-items: center; justify-content: center; }
.title-icon-btn:hover { background: var(--hover); }
.win-controls { display: flex; height: 100%; margin-left: 6px; }
.win-btn { width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; }
.win-btn:hover { background: rgba(255,255,255,.12); }
.win-btn.close:hover { background: #C42B1C; }

/* ===================================================================
   RIBBON
   =================================================================== */

.ribbon { flex: 0 0 auto; background: var(--ribbon); border-bottom: 1px solid var(--line); }

.ribbon-tabs {
  height: 24px; display: flex; align-items: flex-end;
  background: var(--chrome); padding-left: 6px; gap: 1px;
}
.ribbon-tab {
  height: 22px; padding: 0 10px; display: flex; align-items: center;
  font-size: 12px; color: var(--text);
  border: 1px solid transparent; border-bottom: none; border-radius: 2px 2px 0 0;
  white-space: nowrap;
}
.ribbon-tab:hover { background: var(--hover); }
.ribbon-tab.active { background: var(--ribbon); border-color: var(--line-soft); border-bottom-color: var(--ribbon); }
.ribbon-tab.plugin.active { background: var(--sel); border-color: var(--sel); color: #fff; }

.ribbon-panels { height: 92px; display: flex; align-items: stretch; padding-left: 2px; overflow: hidden; }

.panel { display: flex; flex-direction: column; padding: 2px 3px 0; position: relative; flex: 0 0 auto; }
.panel + .panel::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 17px; width: 1px; background: var(--line-soft);
}
.panel-body { flex: 1; display: flex; align-items: flex-start; gap: 2px; padding: 2px 5px 0; }
.panel-label {
  height: 15px; display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; color: var(--muted); white-space: nowrap; padding: 0 6px;
}
.panel:hover .panel-label { color: var(--text); }

.btn-large {
  min-width: 56px; max-width: 80px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 3px 2px; border: 1px solid transparent; border-radius: 2px;
  font-size: 11px; line-height: 1.15; text-align: center;
}
.btn-large .label { display: block; max-width: 72px; overflow-wrap: normal; hyphens: none; }
.btn-large:hover { background: var(--hover); border-color: var(--sel); }
.btn-large:active { background: var(--press); }

.btn-grid {
  display: grid; grid-template-rows: repeat(3, 20px); grid-auto-flow: column; grid-auto-columns: 20px;
  gap: 1px; padding-top: 1px;
}
.btn-small {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 2px;
}
.btn-small:hover { background: var(--hover); border-color: var(--sel); }

/* ===================================================================
   FILE TABS
   =================================================================== */

.file-tabs {
  flex: 0 0 24px; height: 24px;
  background: var(--chrome); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1px; padding-left: 4px;
}
.ft-menu { width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ft-menu:hover { background: var(--hover); color: var(--text); }
.ft-slash { color: #5A6273; padding: 0 2px; }
.file-tab {
  height: 22px; padding: 0 8px; display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
  border: 1px solid transparent; border-bottom: none; border-radius: 2px 2px 0 0;
  max-width: 300px;
}
.file-tab:hover { background: var(--hover); color: var(--text); }
.file-tab.active { background: var(--ribbon); border-color: var(--line-soft); color: var(--text); }
.file-tab .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tab .x { color: var(--muted); font-size: 11px; }
.file-tab .x:hover { color: var(--text); }
.ft-add { width: 20px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ft-add:hover { background: var(--hover); color: var(--text); }

/* ===================================================================
   MAIN ROW: left palette | canvas | right palette
   =================================================================== */

.main { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---------- Palettes (shared) ---------- */

.palette {
  background: var(--palette);
  display: flex; flex-direction: column;
  flex: 0 0 auto; min-height: 0;
}
.palette-left  { width: 300px; border-right: 1px solid var(--line); }
.palette-right { width: 600px; border-left: 1px solid var(--line); }

.palette-title {
  flex: 0 0 24px; height: 24px; background: var(--palette-title);
  display: flex; align-items: center; gap: 6px; padding: 0 2px 0 6px;
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.palette-title .grip { color: #5A6273; letter-spacing: 0; }
.palette-title .ptitle { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-title .pbtn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.palette-title .pbtn:hover { background: var(--hover); color: var(--text); }

.palette-subbar {
  flex: 0 0 22px; height: 22px; background: var(--section);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text); border-bottom: 1px solid var(--line);
}

.palette-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

.palette-body::-webkit-scrollbar, .pf-tablewrap::-webkit-scrollbar, .cmd-history::-webkit-scrollbar { width: 11px; }
.palette-body::-webkit-scrollbar-track, .pf-tablewrap::-webkit-scrollbar-track, .cmd-history::-webkit-scrollbar-track { background: #262C37; }
.palette-body::-webkit-scrollbar-thumb, .pf-tablewrap::-webkit-scrollbar-thumb, .cmd-history::-webkit-scrollbar-thumb { background: #525A6B; border: 2px solid #262C37; }

/* ---------- PROPERTIES palette ---------- */

.prop-select {
  display: flex; align-items: center; gap: 4px; padding: 3px 4px;
  border-bottom: 1px solid var(--line);
}
.prop-select select {
  flex: 1; height: 20px; background: #222835; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 2px; font-size: 12px; padding: 0 4px; outline: none;
}
.prop-select .pbtn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.prop-select .pbtn:hover { background: var(--hover); }

.prop-section {
  background: var(--section); color: var(--text);
  font-size: 12px; font-weight: 600;
  padding: 3px 6px; display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid var(--line);
  cursor: default;
}
.prop-section .tw { font-size: 8px; color: var(--muted); width: 8px; }

table.prop-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.prop-table tr { border-bottom: 1px solid #272D38; }
table.prop-table tr:nth-child(odd)  { background: var(--row-b); }
table.prop-table tr:nth-child(even) { background: var(--row-a); }
table.prop-table tr:hover { background: var(--hover); }
table.prop-table td { padding: 2px 6px; vertical-align: middle; }
table.prop-table td.k { width: 46%; color: var(--muted); border-right: 1px solid #272D38; }
table.prop-table td.v { color: var(--text); }
.swatch { display: inline-block; width: 11px; height: 11px; border: 1px solid #000; vertical-align: -1px; margin-right: 5px; }

/* ===================================================================
   CANVAS
   =================================================================== */

.canvas-area {
  flex: 1 1 auto; position: relative; min-width: 0;
  background: var(--surround); overflow: hidden;
}
.canvas-area.crosshair-on { cursor: none; }
.canvas-area.grabbing { cursor: grabbing; }

#sheet-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#sheet {
  background: var(--paper);
  box-shadow: 0 0 0 1px #20242C;
  transform-origin: center center;
  will-change: transform;
  /* Must lay out at its intrinsic viewBox size: the zoom maths assumes
     one viewBox unit renders as one CSS pixel before the transform.
     As a flex item it would otherwise be shrunk to fit, and every pan
     would be wrong by that shrink factor. */
  flex: 0 0 auto;
  width: 1400px;
  height: 990px;
}

#crosshair-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xh-line { stroke: #E8E8E8; stroke-width: 1; shape-rendering: crispEdges; opacity: .85; }
.xh-box  { fill: none; stroke: #E8E8E8; stroke-width: 1; shape-rendering: crispEdges; }

/* ViewCube + nav bar */
.viewcube { position: absolute; top: 12px; right: 18px; width: 86px; height: 86px; }
.viewcube .face { fill: #7A818E; stroke: #A7AEBA; stroke-width: 1; }
.viewcube .face:hover { fill: var(--sel); }
.viewcube .face-top { fill: #8C939F; }
.viewcube .cube-label { fill: #fff; font-family: var(--ui); font-size: 11px; text-anchor: middle; pointer-events: none; }
.viewcube .compass { fill: none; stroke: #99A0AC; stroke-width: 1; }
.viewcube .compass-letter { fill: #C8CDD6; font-family: var(--ui); font-size: 9px; text-anchor: middle; }

.navbar {
  position: absolute; top: 108px; right: 36px; width: 30px;
  background: rgba(43,50,64,.88); border: 1px solid var(--line-soft); border-radius: 2px;
  display: flex; flex-direction: column; padding: 2px 0;
}
.nav-btn { height: 28px; display: flex; align-items: center; justify-content: center; }
.nav-btn:hover { background: var(--hover); }
.nav-sep { height: 1px; background: var(--line-soft); margin: 2px 4px; }

.ucs-icon { position: absolute; left: 20px; bottom: 16px; width: 84px; height: 72px; pointer-events: none; }

.zoom-readout {
  position: absolute; left: 14px; top: 10px;
  font-size: 11px; color: #C6CCD6; background: rgba(38,44,55,.8);
  border: 1px solid var(--line-soft); border-radius: 2px; padding: 2px 7px;
}

/* ---------- Selection + prediction overlays on the sheet ---------- */

.sel-box { fill: none; stroke: var(--sel); stroke-width: 1.4; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.grip { fill: var(--sel); stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; }
.ghost-text { fill: var(--error); opacity: .85; }
.ghost-box  { fill: none; stroke: var(--error); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.frame-box  { fill: none; stroke: var(--sel); stroke-width: .8; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.compare-hi { fill: none; stroke: #C44BE0; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ---------- Floating command line ---------- */

.cmd-float {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px;
  width: 760px; max-width: calc(100% - 40px);
  background: rgba(38,44,55,.96); border: 1px solid var(--line-soft); border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.cmd-history {
  max-height: 96px; overflow-y: auto; padding: 4px 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--text);
}
.cmd-history:empty { display: none; }
.cmd-line { white-space: pre-wrap; word-break: break-word; }
.cmd-line.dim { color: #7E8696; }
.cmd-line.ok { color: var(--ok); }
.cmd-line.warn { color: var(--warn); }
.cmd-line.err { color: var(--error); }
.cmd-input-row { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-top: 1px solid var(--line-soft); }
.cmd-tool { width: 18px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cmd-tool:hover { background: var(--hover); color: var(--text); }
#cmd-input {
  flex: 1; height: 20px; background: #222835; border: 1px solid var(--line-soft); border-radius: 2px;
  outline: none; color: var(--text); font-family: var(--mono); font-size: 12px; padding: 0 6px;
}
#cmd-input:focus { border-color: var(--sel); }
#cmd-input::placeholder { color: #6E7786; font-style: italic; }
.cmd-progress { display: inline-block; width: 190px; height: 9px; background: #222835; border: 1px solid var(--line-soft); vertical-align: middle; margin-left: 6px; }
.cmd-progress > i { display: block; height: 100%; background: var(--sel); width: 0; }

/* ===================================================================
   STATUS BAR
   =================================================================== */

.statusbar {
  flex: 0 0 26px; height: 26px; background: var(--chrome);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 2px; padding: 0 4px; font-size: 11px;
}
.sb-menu { width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sb-menu:hover { background: var(--hover); color: var(--text); }
.layout-tab {
  height: 20px; padding: 0 10px; display: flex; align-items: center;
  color: var(--muted); border: 1px solid transparent; border-radius: 2px 2px 0 0;
}
.layout-tab:hover { background: var(--hover); color: var(--text); }
.layout-tab.active { background: var(--ribbon); border-color: var(--line-soft); color: var(--text); font-weight: 600; }
.status-spacer { flex: 1; }
.status-coords { font-family: var(--mono); color: var(--muted); padding: 0 10px; min-width: 170px; white-space: nowrap; }
.paper-chip { padding: 0 8px; color: var(--text); font-weight: 600; letter-spacing: .4px; }
.status-toggle {
  height: 20px; min-width: 24px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 2px; color: #7C8495;
}
.status-toggle:hover { background: var(--hover); border-color: var(--sel); color: var(--text); }
.status-toggle.on { color: #6FB6F0; background: rgba(31,127,209,.16); border-color: rgba(31,127,209,.5); }
.status-sep { width: 1px; height: 16px; background: var(--line-soft); margin: 0 4px; }

.reset-btn {
  height: 20px; padding: 0 9px; display: flex; align-items: center; gap: 5px;
  border: 1px solid #7A6421; border-radius: 2px;
  background: rgba(245,166,35,.14); color: var(--warn); margin-left: 6px;
}
.reset-btn:hover { background: rgba(245,166,35,.28); border-color: var(--warn); }

.sel-readout {
  height: 20px; padding: 0 9px; display: flex; align-items: center; margin-left: 6px;
  border: 1px solid rgba(31,127,209,.55); background: rgba(31,127,209,.16);
  color: #8FD0FF; border-radius: 2px; white-space: nowrap;
}

/* ===================================================================
   DIALOGS
   =================================================================== */

.modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.dialog {
  background: var(--palette); border: 1px solid #5A6273;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
  display: flex; flex-direction: column; max-height: 86vh;
}
.dialog-title {
  flex: 0 0 28px; height: 28px; background: var(--palette-title);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px; padding: 0 2px 0 7px; font-size: 12px;
}
.dialog-title .t-mark {
  width: 15px; height: 15px; background: #E51937; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10px;
}
.dialog-title .t-text { flex: 1; }
.dialog-close { width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; }
.dialog-close:hover { background: #C42B1C; }
.dialog-body { padding: 13px 15px; overflow-y: auto; font-size: 12px; line-height: 1.5; }
.dialog-footer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-top: 1px solid var(--line-soft);
}
.dialog-footer .spacer { flex: 1; }

.fieldset { border: 1px solid var(--line-soft); border-radius: 2px; padding: 9px 11px 11px; margin-bottom: 11px; }
.fieldset > legend { padding: 0 5px; font-size: 11px; color: var(--muted); }

.btn {
  min-width: 84px; height: 25px; padding: 0 13px;
  background: #3A4252; border: 1px solid #586173; border-radius: 2px; color: var(--text); font-size: 12px;
}
.btn:hover { background: #454E60; border-color: var(--sel); }
.btn:active { background: #333B49; }
.btn.primary { background: var(--sel); border-color: #2E8FE0; font-weight: 600; color: #fff; }
.btn.primary:hover { background: #2A8CDE; }
.btn.warn { background: #8A5E12; border-color: var(--warn); color: #FFE2B0; }
.btn.warn:hover { background: #A06E16; }
.btn:disabled { color: #6E7786; border-color: #454D5C; background: #333A47; }
.btn.link { min-width: 0; background: none; border: none; color: #6FB6F0; text-decoration: underline; padding: 0 4px; }
.btn.link:hover { color: #9CD0FF; background: none; }

.field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.field-row label { width: 128px; color: var(--muted); }
.field-row select, .field-row input[type=number], .field-row input[type=text] {
  height: 22px; background: #222835; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 2px; padding: 0 5px; font-size: 12px; outline: none;
}
.field-row select:focus, .field-row input:focus { border-color: var(--sel); }
.field-row .hint { color: var(--muted); font-size: 11px; }

/* ===================================================================
   PRE-FLIGHT PALETTE
   =================================================================== */

.pf-head { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pf-file { font-size: 12px; color: var(--text); margin-bottom: 4px; }
.pf-langrow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.pf-langrow select {
  height: 21px; background: #222835; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 2px; font-size: 12px; padding: 0 4px; outline: none;
}
.pf-langrow select:focus { border-color: var(--sel); }
.pf-cmdline { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 10.5px; line-height: 15px; font-weight: 600;
}
.pill.notsent { background: rgba(245,166,35,.2); color: var(--warn); border: 1px solid rgba(245,166,35,.45); }
.pill.sent    { background: rgba(63,185,80,.18); color: var(--ok); border: 1px solid rgba(63,185,80,.45); }

/* Four summary cards, 2x2 */
.pf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.pf-card { background: var(--palette); padding: 8px 10px 9px; min-height: 86px; }
.pf-card .c-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.pf-card .c-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.pf-card .c-value { font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--text); }
.pf-card .c-value.sm { font-size: 14px; }
.pf-card .c-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.pf-card.risk .c-value { color: var(--warn); }
.pf-card.risk.clean .c-value { color: var(--ok); }
.pf-card .c-grey { color: #7E8696; }

.beta-toggle { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.beta-toggle input[type=checkbox] { accent-color: var(--sel); width: 12px; height: 12px; margin: 0; }
.beta-toggle { cursor: pointer; }

/* Filter chips */
.pf-filters { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chip {
  height: 20px; padding: 0 9px; display: flex; align-items: center;
  border: 1px solid var(--line-soft); border-radius: 2px; color: var(--muted); font-size: 11px;
}
.chip:hover { border-color: var(--sel); color: var(--text); }
.chip.active { background: var(--sel); border-color: var(--sel); color: #fff; }
.chip.risk.active { background: #8A5E12; border-color: var(--warn); color: #FFE2B0; }

/* String table */
.pf-tablewrap { overflow-y: auto; overflow-x: hidden; border-bottom: 1px solid var(--line); }
table.pf-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11.5px; }
table.pf-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--section); text-align: left; font-weight: 600;
  padding: 4px 7px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  white-space: nowrap;
}
table.pf-table th:first-child { background: var(--sel); color: #fff; }
table.pf-table td {
  padding: 3px 7px; border-bottom: 1px solid #272D38; border-right: 1px solid #272D38;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.pf-table tbody tr:nth-child(odd)  { background: var(--row-b); }
table.pf-table tbody tr:nth-child(even) { background: var(--row-a); }
table.pf-table tbody tr:hover { background: var(--hover); }
table.pf-table tbody tr.selected { background: rgba(31,127,209,.38); }
table.pf-table tbody tr.keep td { color: #8992A2; }
td.preview-pending { color: #6E7786; font-style: italic; }

.tag { display: inline-block; padding: 0 6px; border-radius: 2px; font-size: 10.5px; line-height: 15px; }
.tag.translate { background: rgba(31,127,209,.22); color: #8FC8F5; }
.tag.keep      { background: rgba(255,255,255,.07); color: var(--muted); }
.tag.skip      { background: rgba(255,255,255,.07); color: var(--muted); }
.tag.sampled   { background: rgba(63,185,80,.18); color: #7FD68C; }
.tag.overflow  { background: rgba(229,72,77,.2); color: #FF9094; }
.tag.font      { background: rgba(245,166,35,.2); color: var(--warn); }
.tag.abbrev    { background: rgba(255,255,255,.08); color: #B6BECC; }

.pf-note { font-size: 10.5px; color: #7E8696; padding: 6px 10px; line-height: 1.45; }

/* Output + cap */
.pf-block { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.pf-block h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.radio-row { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; font-size: 12px; }
.radio-row input { margin: 2px 0 0; accent-color: var(--sel); }
.radio-row .sub { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.cap-row { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.cap-row input { width: 86px; height: 21px; background: #222835; color: var(--text); border: 1px solid var(--line-soft); border-radius: 2px; padding: 0 5px; font-size: 12px; outline: none; }
.cap-row input:focus { border-color: var(--sel); }
.cap-state { font-size: 11px; }
.cap-state.over { color: var(--error); }
.cap-state.under { color: var(--ok); }

/* Sticky footer */
.pf-footer {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--palette-title);
  padding: 8px 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.pf-footer .btn { min-width: 0; }
.pf-footer .grow { flex: 1; }

/* Sample banner */
.banner {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: rgba(245,166,35,.12); border-left: 3px solid var(--warn);
  font-size: 12px;
}
.banner.good { background: rgba(63,185,80,.12); border-left-color: var(--ok); }
.banner .btxt { flex: 1 1 100%; }

/* Progress inside the palette */
.pf-progress { padding: 10px; border-bottom: 1px solid var(--line); }
.pbar { height: 12px; background: #222835; border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--sel); width: 0; transition: width .1s linear; }
.pf-progress .ptext { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-family: var(--mono); }

/* Review: estimate vs actual */
table.ev-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.ev-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 7px; border-bottom: 1px solid var(--line-soft); }
table.ev-table td { padding: 3px 7px; border-bottom: 1px solid #272D38; }
table.ev-table td.num { font-family: var(--mono); }
.delta.ok { color: var(--ok); }
.delta.flat { color: var(--muted); }
.delta.warn { color: var(--warn); }

.stat-block { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: #C2C9D4; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.stat-block .k { color: var(--muted); }

/* DWG Compare toolbar */
.compare-bar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: var(--palette-title); border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 4px 8px; font-size: 12px; z-index: 20;
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.compare-bar .cb-btn { width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2px; }
.compare-bar .cb-btn:hover { background: var(--hover); border-color: var(--sel); }
.compare-bar .swatch-c { width: 11px; height: 11px; background: #C44BE0; display: inline-block; vertical-align: -1px; }

/* Toast */
.toast-host { position: fixed; right: 18px; bottom: 44px; display: flex; flex-direction: column; gap: 7px; z-index: 200; }
.toast {
  background: var(--palette-title); border: 1px solid var(--line-soft); border-left: 3px solid var(--sel);
  border-radius: 2px; padding: 8px 12px; font-size: 12px; color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.5); max-width: 340px;
}
.toast.warn { border-left-color: var(--warn); }
.toast.ok { border-left-color: var(--ok); }

/* Scale demo: file picker + per-file table */
.file-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 2px; }
.file-list label {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px; font-size: 12px;
  border-bottom: 1px solid #272D38;
}
.file-list label:nth-child(odd) { background: var(--row-b); }
.file-list label:nth-child(even) { background: var(--row-a); }
.file-list label:hover { background: var(--hover); }
.file-list input { accent-color: var(--sel); }
.file-list .fsize { margin-left: auto; color: var(--muted); font-size: 11px; }

.summary-strip {
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: rgba(31,127,209,.1); font-size: 12px; line-height: 1.5;
}
.summary-strip b { color: #8FC8F5; }

/* Tooltip */
.tip {
  position: fixed; z-index: 300; pointer-events: none;
  background: #1A1F28; border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 5px 8px; font-size: 11.5px; color: var(--text); max-width: 280px;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.tip .tip-cjk { font-size: 14px; color: var(--warn); }

/* Geometry picked during a TRANSLATE selection */
#linework .sx.picked { fill: var(--sel) !important; }
#linework .sx { cursor: pointer; }

/* Include / exclude column */
table.pf-table th.chk-col, table.pf-table td.chk-col {
  width: 26px; text-align: center; padding: 2px 0; overflow: visible;
}
table.pf-table th.chk-col { background: var(--sel); }
table.pf-table input[type=checkbox] { accent-color: var(--sel); width: 12px; height: 12px; margin: 0; }
table.pf-table input[type=checkbox]:disabled { opacity: .35; }
table.pf-table tbody tr.excluded td:not(.chk-col) { opacity: .42; text-decoration: line-through; }
table.pf-table tbody tr.excluded td .tag { text-decoration: none; }

/* Predicted-width overlay: the width is shown, the text never is */
.ghost-fill { fill: rgba(229, 72, 77, .3); stroke: none; }
.ghost-label { fill: var(--error); font-family: var(--ui); }

/* ---- Zoom and pan affordances ---- */
.canvas-area.grabbing, .canvas-area.grabbing * { cursor: grabbing !important; }
.canvas-area.grabbing #crosshair-layer { display: none; }
.zoom-readout { cursor: pointer; user-select: none; }
.zoom-readout:hover { border-color: var(--sel); color: #fff; }
.zoom-readout::after { content: " · fit"; color: var(--muted); }
.zoom-readout:hover::after { color: #9CD0FF; }


/* ---- Collapsible Properties sections ---- */
.prop-section { cursor: pointer; }
.prop-section:hover { background: #45506580; }
.prop-section.collapsed + table.prop-table { display: none; }

/* ---- The palette's Settings bar is a control, not a label ---- */
.palette-subbar.live { cursor: pointer; }
.palette-subbar.live:hover { background: #46526A; color: #fff; }

/* ---- In-place text editor ---- */
.text-editor {
  position: fixed;
  z-index: 400;
  background: #11161F;
  color: #FFFFFF;
  border: 1px solid var(--sel);
  box-shadow: 0 0 0 1px rgba(31,127,209,.45), 0 4px 16px rgba(0,0,0,.55);
  border-radius: 2px;
  padding: 2px 6px;
  outline: none;
  font-family: 'Arial Narrow', 'Segoe UI', sans-serif;
  letter-spacing: .2px;
}

/* Edit affordance in the Properties palette */
.prop-edit-wrap { display: flex; align-items: center; gap: 6px; }
.prop-edit-wrap > :first-child { overflow: hidden; text-overflow: ellipsis; }
.prop-edit {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10.5px; line-height: 14px; padding: 0 5px;
  color: #6FB6F0; border: 1px solid #3C4556; border-radius: 2px; background: #2A3140;
}
.prop-edit:hover { border-color: var(--sel); color: #fff; background: var(--sel); }

.tag.edited { background: rgba(31,127,209,.2); color: #8FC8F5; }

/* Preview is released only for flagged strings */
.preview-locked { color: #5E6675; letter-spacing: 2px; user-select: none; }
.preview-bad { color: #FF9094; }

/* Automatic overflow fix */
.btn.fixbtn {
  min-width: 0; height: 20px; padding: 0 8px; margin-top: 7px;
  font-size: 11px; background: #8A5E12; border-color: var(--warn); color: #FFE2B0;
}
.btn.fixbtn:hover { background: #A06E16; }
.tag.fixed { background: rgba(63,185,80,.18); color: #7FD68C; }
.linkbtn { font-size: 10.5px; color: #6FB6F0; text-decoration: underline; }
.linkbtn:hover { color: #9CD0FF; }

.wrapmark { color: #6FB6F0; opacity: .8; }


/* ---- Resizable palettes, as AutoCAD's are ---- */
.palette { position: relative; }
.pal-resize {
  position: absolute; top: 0; bottom: 0; width: 7px; z-index: 6; cursor: col-resize;
}
.pal-resize.on-left  { left: -3px; }
.pal-resize.on-right { right: -3px; }
.pal-resize:hover { background: rgba(31,127,209,.55); }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing .pal-resize { background: rgba(31,127,209,.55); }