@font-face {
  font-family: "PGS Starter Vize";
  src: url("/fonts/studio/starters/gg-vize.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Medi";
  src: url("/fonts/studio/starters/gg-medi.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Baar";
  src: url("/fonts/studio/starters/gg-baar.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Star";
  src: url("/fonts/studio/starters/gg-star.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Cosm";
  src: url("/fonts/studio/starters/gg-cosm-var.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Cosm Italic";
  src: url("/fonts/studio/starters/gg-cosm-italic-var.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Deco";
  src: url("/fonts/studio/starters/gg-deco.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Ocra";
  src: url("/fonts/studio/starters/gg-ocra.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Pixa";
  src: url("/fonts/studio/starters/gg-pixa-latin-devanagari.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Plum";
  src: url("/fonts/studio/starters/gg-plum-var.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PGS Starter Veni";
  src: url("/fonts/studio/starters/gg-veni.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #ecebe7;
  --panel: #f8f7f3;
  --panel-2: #ffffff;
  --ink: #1d1c1a;
  --muted: #77736c;
  --line: #d9d6cf;
  --line-strong: #b8b3a9;
  --accent: #ff5c35;
  --accent-soft: #ffe5dd;
  --blue: #3f6df6;
  --danger: #c94335;
  --shadow: 0 8px 30px rgba(31, 29, 25, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overscroll-behavior: none; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 9px;
  min-height: 36px;
  padding: 7px 9px;
  outline: none;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,109,246,.12); }

.topbar {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #22211f;
  color: white;
  border-bottom: 1px solid #141311;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--accent); border-radius: 10px; font-weight: 800; letter-spacing: -.04em;
}
.brand strong { display: block; font-size: 14px; }
.brand span { display: block; color: #aaa69e; font-size: 11px; margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.topbar button, .topbar .button { color: white; border-color: #4a4844; background: #2f2e2b; }
.topbar .primary { background: var(--accent); border-color: var(--accent); }
.workflow-select {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 10px;
  border: 1px solid #4a4844;
  border-radius: 9px;
  background: #2f2e2b;
  color: #aaa69e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.workflow-select select {
  width: 112px;
  min-height: 28px;
  padding: 4px 24px 4px 7px;
  border: 0;
  background: #22211f;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  box-shadow: none;
}

.workspace {
  --left-panel-width: 294px;
  --right-panel-width: 315px;
  --top-panel-height: 54px;
  --bottom-panel-height: 180px;
  height: calc(100vh - 76px);
  min-height: 0;
  display: grid;
  grid-template-columns: var(--left-panel-width) 8px minmax(520px, 1fr) 8px var(--right-panel-width);
  gap: 0;
  padding: 10px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.left-panel, .right-panel { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.center-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.canvas-toolbar {
  flex: 0 0 var(--top-panel-height, 54px);
}

.canvas-shell {
  flex: 1 1 auto;
  min-height: 0;
}

.preview-panel {
  flex: 0 0 var(--bottom-panel-height, 180px);
  min-height: 0;
}

button, .button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 8px 11px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 650;
  font-size: 12px;
}

.panel-resize-handle {
  position: relative;
  background: transparent;
  pointer-events: none;
  user-select: none;
  cursor: col-resize;
}

.panel-resize-handle-vertical {
  flex: 0 0 8px;
  height: 8px;
  cursor: row-resize;
}

.panel-resize-handle::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 1px;
  right: 1px;
  border-radius: 99px;
  background: rgba(120, 118, 112, .20);
}

.panel-resize-handle-vertical::after {
  top: 1px;
  bottom: 1px;
  left: 10px;
  right: 10px;
}

body.panel-resize-unlocked .panel-resize-handle {
  pointer-events: auto;
}

body.panel-resize-unlocked .panel-resize-handle::after {
  background: rgba(63, 109, 246, .38);
}

body.is-panel-resizing { cursor: col-resize; user-select: none; }
button:hover, .button:hover { border-color: var(--line-strong); background: #f5f3ef; }
button.primary { background: var(--accent); color: white; border-color: var(--accent); }
button.primary:hover { filter: brightness(.96); }
button.primary-soft { background: var(--accent-soft); border-color: #ffc6b6; color: #a72e13; }
button.ghost, .button.ghost { background: transparent; }
button.small, .button.small { min-height: 30px; padding: 5px 8px; font-size: 11px; }
button.wide { width: 100%; }
.file-button input, .button input[type=file] { display: none; }
.icon-button { width: 34px; padding: 0; font-size: 20px; }
.danger-text { color: var(--danger); }

.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 15px 10px; }
h2, h3, p { margin-top: 0; }
.panel-heading h2 { font-size: 17px; margin-bottom: 2px; }
.panel-heading p { margin: 0; font-size: 11px; color: var(--muted); }

.batch-drop {
  margin: 0 12px 10px;
  padding: 14px 11px;
  border: 1.5px dashed #aaa59c;
  border-radius: 11px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #f1f0eb;
}
.batch-drop.dragover, .canvas-shell.dragover { border-color: var(--accent); background: var(--accent-soft); }
.batch-drop strong { font-size: 12px; }
.batch-drop span { font-size: 10px; color: var(--muted); margin-bottom: 5px; }

.segmented { display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; padding: 0 12px 8px; }
.segmented button { padding: 5px 2px; min-height: 30px; border-radius: 7px; font-size: 10px; background: transparent; }
.segmented button.active { background: #22211f; color: #fff; border-color: #22211f; }
.search-row { padding: 0 12px 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.search-row input { min-width: 0; }

.glyph-grid {
  padding: 0 10px 14px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-content: start;
}
.glyph-card {
  height: 67px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  position: relative;
  padding: 6px;
  overflow: hidden;
  cursor: pointer;
}
.glyph-card:hover { border-color: #aaa59b; }
.glyph-card.selected { border: 2px solid var(--blue); padding: 5px; box-shadow: 0 0 0 2px rgba(63,109,246,.12); }
.glyph-card.imported::after {
  content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #25a561;
}
.glyph-card .card-char { font-family: Georgia, serif; font-size: 28px; line-height: 1; }
.glyph-card .card-name { display:block; color: var(--muted); font-size: 9px; margin-top: 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glyph-card svg { position:absolute; inset: 3px 3px 14px 25px; width: calc(100% - 28px); height: calc(100% - 17px); overflow:visible; }

.canvas-toolbar {
  min-width: 0;
  min-height: 50px;
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 7px 8px;
  flex-wrap: wrap;
  overflow: visible;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tool-group.right {
  width: 100%;
  justify-content: flex-end;
  margin-left: 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.tool { background: transparent; min-height: 32px; padding: 6px 9px; }
.tool.active { background: #22211f; color: #fff; border-color: #22211f; }
.zoom-label { font-size: 11px; min-width: 42px; text-align: center; color: var(--muted); }

.canvas-shell {
  position: relative;
  overflow: hidden;
  background-color: #fdfcf9;
  background-image:
    linear-gradient(#efede8 1px, transparent 1px),
    linear-gradient(90deg, #efede8 1px, transparent 1px);
  background-size: 22px 22px;
  min-height: 0;
}
#glyphCanvas { width: 100%; height: 100%; display: none; touch-action: none; }
#glyphCanvas.visible { display: block; }
.empty-canvas { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-canvas.hidden { display: none; }
.empty-icon { margin: 0 auto 10px; width: 58px; height: 66px; border: 2px solid #aaa59d; display:grid; place-items:center; font-family:Georgia,serif; font-size:36px; color:#57534d; }
.empty-canvas h2 { color: var(--ink); margin-bottom: 5px; font-size: 18px; }
.empty-canvas p { font-size: 12px; }
.canvas-drop-hint { position:absolute; inset: 18px; border:2px dashed var(--accent); border-radius:14px; display:none; place-items:center; color:#a62f13; font-weight:750; background:rgba(255,229,221,.84); pointer-events:none; }
.canvas-shell.dragover .canvas-drop-hint { display:grid; }

.guide-line { vector-effect: non-scaling-stroke; stroke-width: 1; stroke-dasharray: 6 4; }
.guide-label { font-size: 16px; fill: #746f67; transform: scale(1,-1); }
.em-box { fill: rgba(255,255,255,.62); stroke: #bcb7ad; stroke-width: 1; vector-effect: non-scaling-stroke; }
.advance-line { stroke: #b9c8ef; stroke-width: .6; vector-effect: non-scaling-stroke; }
.glyph-outline { fill: #22211f; stroke: none; cursor: move; }
.glyph-selected-outline { fill: none; stroke: var(--blue); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; pointer-events:none; }

.preview-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.preview-header { padding: 11px 13px 7px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-header h3 { font-size: 13px; margin-bottom:2px; }
.preview-header p { margin:0; font-size:10px; color:var(--muted); }
.preview-controls { display:flex; align-items:center; gap:8px; }
.preview-controls input[type=text], #previewText { width: 210px; }
.preview-controls input[type=range] { width: 105px; min-height:auto; padding:0; border:0; box-shadow:none; }
.preview-stage {
  flex: 1;
  min-height: 0;
  border-top:1px solid var(--line);
  background:#fff;
  overflow:auto;
}
#previewSvg { width:100%; height:100%; min-width:800px; }

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 9px;
  border-bottom: 1px solid var(--line);
}
.inspector-tabs button {
  min-width: 0;
  min-height: 31px;
  padding: 4px 7px;
  background: transparent;
  font-size: 10px;
}
.inspector-tabs button.active { background:#22211f; color:white; border-color:#22211f; }
.inspector-section { display:none; padding:14px; overflow:auto; }
.inspector-section.active { display:block; }
.selection-card { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.selection-char { width:44px; height:49px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:9px; font-family:Georgia,serif; font-size:28px; }
.selection-card strong, .selection-card span { display:block; }
.selection-card span { color:var(--muted); font-size:10px; margin-top:3px; }
.notice { padding:9px; border-radius:8px; background:#fff4d9; color:#805c00; font-size:11px; margin-bottom:10px; }
.notice.hidden { display:none; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.field-grid.one-col { grid-template-columns:1fr; }
.field-grid label, .modal-card label { display:flex; flex-direction:column; gap:4px; font-size:10px; color:var(--muted); }
.field-grid input { width:100%; }
.button-stack { display:grid; gap:7px; margin-top:12px; }
.production-section {
  margin: 0;
  border-top: 1px solid var(--line);
}
.production-section:last-of-type { border-bottom: 1px solid var(--line); }
.production-section > summary,
.production-subsection > summary {
  position: relative;
  padding: 11px 20px 11px 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.production-section > summary::-webkit-details-marker,
.production-subsection > summary::-webkit-details-marker { display: none; }
.production-section > summary::after,
.production-subsection > summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}
.production-section[open] > summary::after,
.production-subsection[open] > summary::after { content: "−"; }
.production-section-body {
  display: grid;
  gap: 9px;
  padding: 1px 0 13px;
}
.production-section input,
.production-section select,
.production-section textarea { width: 100%; min-width: 0; }
.production-section-body > label,
.production-subsection label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.production-section-body > .check-row {
  flex-direction: row;
  align-items: center;
}
.production-section-body > .check-row input { width: auto; }
.production-section-body .button-stack { margin-top: 0; }
.production-subsection {
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.production-subsection > div { padding-bottom: 9px; }
.production-subsection > button { margin-bottom: 9px; width: 100%; }
.contour-audit-readout {
  min-height: 52px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f6f5f1;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.contour-audit-readout strong { color: var(--ink); }
.readout { margin-top:14px; border-top:1px solid var(--line); padding-top:7px; }
.readout div { display:grid; grid-template-columns:90px 1fr; gap:7px; padding:5px 0; font-size:10px; }
.readout span { color:var(--muted); }
.readout strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.inspector-section h3 { font-size:13px; margin-bottom:4px; }

.kerning-class-form,
.kerning-class-pair-form { display:grid; gap:7px; margin:10px 0; }
.kerning-class-form { grid-template-columns:1fr 1fr; }
.kerning-class-form input:nth-of-type(2),
.kerning-class-form button { grid-column:1 / -1; }
.kerning-class-pair-form { grid-template-columns:1fr 1fr; }
.kerning-class-pair-form input,
.kerning-class-pair-form button { min-width:0; }
.kern-class-card { display:grid; gap:6px; padding:9px 0; border-bottom:1px solid var(--line); }
.kern-class-card:last-child { border-bottom:0; }
.kern-class-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kern-class-card-head span { color:var(--muted); font-size:11px; text-transform:uppercase; }
.kern-class-card input { width:100%; }
.kern-review-actions { display:flex; gap:5px; }
.kern-review-actions button { flex:1; }
#metricLinkStatus:empty { display:none; }
.feature-tag-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:10px 0; }
.feature-tag-grid label { display:flex; align-items:center; gap:4px; min-width:0; padding:6px; border:1px solid var(--line); background:#fff; font-size:10px; }
.feature-tag-grid input { min-height:auto; }
.feature-class-form { grid-template-columns:1fr 1fr auto; }
.compiled-feature-code { margin-top:10px; font-size:10px; }
.compiled-feature-code pre { max-height:260px; overflow:auto; padding:9px; border:1px solid var(--line); background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
#featureRawCodeInput, #featureTestTextInput { width:100%; resize:vertical; }
.feature-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:10px 0; }
.feature-stage-grid span { padding:6px 4px; border:1px solid var(--line); background:#fff; font:600 10px/1 var(--mono); text-align:center; }
.shaping-display-options { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; font-size:10px; }
.shaping-display-options label { display:flex; gap:4px; align-items:center; }
.shaping-result { max-height:300px; overflow:auto; margin:9px 0; border:1px solid var(--line); background:#fff; }
.shaping-glyph { display:grid; grid-template-columns:minmax(75px,1fr) auto; gap:8px; padding:7px; border-bottom:1px solid var(--line); font:10px/1.35 var(--mono); }
.shaping-glyph:last-child { border-bottom:0; }
.shaping-glyph strong { overflow:hidden; text-overflow:ellipsis; }
.variable-axis-card { display:grid; gap:6px; padding:8px 0; border-bottom:1px solid var(--line); }
.variable-location-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.variable-preview-control { display:grid; grid-template-columns:42px 1fr 48px; align-items:center; gap:6px; margin:7px 0; font:10px/1 var(--mono); }
.variable-preview-control input { min-height:auto; padding:0; border:0; box-shadow:none; }
.variable-preview-stage { height:135px; margin:8px 0; overflow:hidden; border:1px solid var(--line); background:#fff; }
#variablePreviewSvg { width:100%; height:100%; }
.section-copy { color:var(--muted); font-size:10px; line-height:1.45; }
.select-label { font-size:10px; color:var(--muted); display:flex; flex-direction:column; gap:5px; }

.guide-list { display:grid; gap:5px; }
.guide-item { display:grid; grid-template-columns:1fr 72px 28px; gap:5px; align-items:center; }
.guide-item span { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-item input { min-height:31px; padding:4px 6px; }
.guide-item button { min-height:30px; padding:0; }
.inline-form { display:grid; grid-template-columns:1fr 70px auto; gap:5px; margin-bottom:8px; }
.inline-form input { min-width:0; }
.kern-pair-row { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; }
.kern-list { display:grid; gap:5px; margin-top:12px; }
.kern-item { display:grid; grid-template-columns:50px 1fr 28px; align-items:center; gap:6px; padding:7px; border:1px solid var(--line); border-radius:8px; background:white; }
.kern-item strong { font-family:Georgia,serif; font-size:18px; }
.kern-item span { font-size:11px; color:var(--muted); }
.kern-item button { min-height:26px; padding:0; }

.modal { position:fixed; inset:0; background:rgba(20,19,17,.54); display:none; place-items:center; z-index:30; }
.modal.open { display:grid; }
.modal-card { width:min(460px,calc(100vw - 32px)); padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); position:relative; }
.small-modal { width:min(360px,calc(100vw - 32px)); }
.modal-card h2 { margin-bottom:5px; }
.modal-card > p { color:var(--muted); font-size:12px; }
.modal-close { position:absolute; right:10px; top:10px; width:32px; min-height:32px; padding:0; font-size:20px; background:transparent; }
.export-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:16px 0; }
.format-card { display:grid!important; grid-template-columns:auto 1fr; column-gap:8px; padding:12px; border:1px solid var(--line); border-radius:10px; background:white; cursor:pointer; }
.format-card.selected { border-color:var(--blue); box-shadow:0 0 0 2px rgba(63,109,246,.1); }
.format-card input { grid-row:1/3; min-height:auto; }
.format-card strong { color:var(--ink); font-size:12px; }
.format-card span { color:var(--muted); font-size:10px; }
.export-extra-fields { margin:12px 0; }
.export-extra-fields textarea { width:100%; resize:vertical; }
.deliverable-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:8px; }
.deliverable-actions button { min-width:0; padding-inline:7px; font-size:10px; }
.export-summary { padding:10px; background:#eeece6; border-radius:9px; font-size:11px; margin-bottom:12px; line-height:1.6; }
.error-box { display:none; color:#a92f20; background:#ffe8e3; border:1px solid #ffc6bb; padding:8px; border-radius:8px; font-size:11px; margin-top:9px; }
.error-box.visible { display:block; }

.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px); background:#22211f; color:white; border-radius:9px; padding:10px 14px; font-size:11px; opacity:0; pointer-events:none; transition:.2s; z-index:50; }
.toast.show { opacity:1; transform:translate(-50%,0); }
#measureSandbox { position:fixed; left:-10000px; top:-10000px; width:2000px; height:2000px; visibility:hidden; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: var(--left-panel-width) 8px minmax(430px,1fr) 8px var(--right-panel-width); }
  .top-actions .ghost:nth-child(-n+2) { display:none; }
}

/* v1.2 Illustrator-style application chrome */
.menu-strip {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #343330;
  color: #d8d5ce;
  border-bottom: 1px solid #191816;
  user-select: none;
}
.menu-items { display: flex; align-items: center; gap: 1px; height: 100%; }
.menu-strip button {
  min-height: 22px;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 500;
}
.menu-strip button:hover { background: #4a4945; color: #fff; }
.document-status { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #bdb9b1; }
.project-style-switcher {
  width: min(280px, 30vw);
  min-height: 24px;
  padding: 2px 24px 2px 7px;
  border: 1px solid #5d5a54;
  border-radius: 4px;
  background: #262522;
  color: #f5f3ed;
  font-size: 10px;
  box-shadow: none;
}
.project-style-switcher[hidden] { display: none; }
.document-status.has-project-switcher #documentName { display: none; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6acb82; }
.status-dot.is-connecting { background: #c6a33d; }
.status-dot.is-saving { background: var(--accent); }
.status-dot.is-error { background: #ec6958; }
.cloud-save-status { color: #8f8b83; }
.version-badge { padding: 2px 5px; border: 1px solid #5d5a54; border-radius: 4px; color: #e5e2db; }
.workspace { height: calc(100vh - 76px); }

.mapping-mode {
  width: 100%;
  display: grid;
  gap: 4px;
  margin-top: 6px;
  text-align: left;
  font-size: 9px;
  color: var(--muted);
}
.mapping-mode select { width: 100%; min-height: 31px; font-size: 10px; padding: 4px 7px; }

.tool { gap: 5px; }
.tool-symbol { font-size: 15px; line-height: 1; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid #c9c5bd;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f5f3ef;
  color: #5e5a53;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tool.active kbd { background: #44423e; color: #fff; border-color: #67645e; }

.canvas-shell {
  background-color: #c7c6c2;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 8px;
}
#glyphCanvas { cursor: default; }
body[data-tool="select"] #glyphCanvas { cursor: default; }
body[data-tool="pan"] #glyphCanvas, body.space-pan #glyphCanvas { cursor: grab; }
body.is-panning #glyphCanvas { cursor: grabbing; }
body[data-tool="zoom"] #glyphCanvas { cursor: zoom-in; }
body[data-tool="zoom"] #glyphCanvas:active { cursor: zoom-in; }
body[data-tool="pen"] #glyphCanvas,
body[data-tool="pencil"] #glyphCanvas,
body[data-tool="brush"] #glyphCanvas,
body[data-tool="polygon"] #glyphCanvas { cursor: crosshair; }
body[data-tool="knife"] #glyphCanvas,
body[data-tool="scissors"] #glyphCanvas,
body[data-tool="eraser"] #glyphCanvas { cursor: cell; }
body[data-tool="measure"] #glyphCanvas,
body[data-tool="guide"] #glyphCanvas { cursor: crosshair; }

.snap-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 9px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f6f5f1;
}
.snap-target-grid label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
}
.snap-target-grid input { width: auto; }

.drawing-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.drawing-action-grid button { min-width: 0; padding-inline: 6px; font-size: 10px; }
.boolean-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boolean-batch-tools {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}
.boolean-batch-tools .select-label { margin: 0; }
.alignment-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.alignment-controls button { min-height: 30px; padding: 4px; font-size: 15px; }
.transform-grid { margin-bottom: 7px; }

.structure-list {
  display: grid;
  gap: 4px;
  margin: 7px 0;
}
.structure-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.structure-row.is-active { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.structure-row.is-hidden { opacity: .5; }
.structure-row button {
  width: 28px;
  min-height: 27px;
  padding: 2px;
  border-radius: 5px;
}
.structure-row-main {
  min-width: 0;
  display: grid;
  gap: 1px;
  cursor: pointer;
}
.structure-row-main strong,
.structure-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.structure-row-main strong { font-size: 10px; }
.structure-row-main span { color: var(--muted); font-size: 9px; }
.layer-create-row,
.component-add-row,
.anchor-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  margin: 7px 0;
}
.component-add-row { grid-template-columns: minmax(0, 1fr) auto; }
.structure-controls {
  display: grid;
  gap: 7px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--line);
}
.structure-controls[hidden] { display: none; }
.structure-controls > label { display: grid; gap: 4px; font-size: 10px; }
.structure-controls input[type="range"] { width: 100%; }
.accent-recipe-panel { display: grid; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }

.component-outline {
  fill: #202124;
  fill-opacity: 1;
  stroke: none;
  vector-effect: non-scaling-stroke;
}
.component-outline.is-selected { fill: #17181a; stroke: #2d7ff9; stroke-width: 1.3; }
.glyph-anchor-line {
  fill: none;
  stroke: #ea3f73;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.glyph-anchor {
  fill: #fff;
  stroke: #ea3f73;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: move;
}
.glyph-anchor.is-selected { fill: #ea3f73; }
.glyph-anchor-label {
  fill: #a71247;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  pointer-events: none;
}
.measurement-overlay {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.measurement-overlay-label {
  fill: var(--accent);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  pointer-events: none;
}
.snap-feedback-line {
  stroke: #2a65ff;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.selection-marquee {
  fill: rgba(42, 101, 255, .08);
  stroke: #2a65ff;
  stroke-width: 1;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.glyph-outline { cursor: move; }
body.space-pan .glyph-outline, body[data-tool="pan"] .glyph-outline { cursor: grab; }

.ruler {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-color: #eeeDE9;
  opacity: .94;
}
.ruler-horizontal {
  left: 22px;
  right: 0;
  top: 0;
  height: 22px;
  border-bottom: 1px solid #aaa7a0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 9px, #8b8881 9px 10px, transparent 10px 49px, #5f5c56 49px 50px);
}
.ruler-vertical {
  top: 22px;
  bottom: 26px;
  left: 0;
  width: 22px;
  border-right: 1px solid #aaa7a0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 9px, #8b8881 9px 10px, transparent 10px 49px, #5f5c56 49px 50px);
}
.ruler-corner { position:absolute; left:0; top:0; width:22px; height:22px; z-index:4; background:#d8d6d0; border-right:1px solid #aaa7a0; border-bottom:1px solid #aaa7a0; }
.canvas-statusbar {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 9px;
  border-top: 1px solid #aaa7a0;
  background: rgba(239,237,232,.96);
  color: #5d5952;
  font-size: 9px;
  pointer-events: none;
}
.canvas-statusbar span:first-child { min-width: 88px; color: #242321; font-weight: 700; }
.canvas-statusbar kbd { height: 16px; min-width: 16px; font-size: 8px; background: #fff; }
.em-box { fill: rgba(255,255,255,.96); stroke: #8f8b83; }
.slant-guide { stroke: #9a5db4; stroke-width: 1; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; opacity: .65; }

.profile-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #eeece6;
}
.profile-extra label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; color: var(--muted); }
.profile-extra label:last-child { grid-column: 1 / -1; }
.profile-extra.script-active { border-color: #dcb88d; background: #fff7ec; }

.assignment-modal { width: min(560px, calc(100vw - 32px)); }
.assignment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.assignment-heading h2 { margin: 2px 0 3px; }
.assignment-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.file-badge { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: #fff; color: var(--muted); font-size: 10px; }
.assignment-preview-wrap {
  height: 220px;
  margin: 15px 0 13px;
  display: grid;
  place-items: center;
  border: 1px solid #c8c4bb;
  border-radius: 9px;
  background-color: #fff;
  background-image: linear-gradient(#f0eee9 1px, transparent 1px), linear-gradient(90deg, #f0eee9 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
}
#assignPreview { width: 86%; height: 86%; color: #20201e; overflow: visible; }
.assignment-details { min-height: 34px; margin-top: 7px; padding: 8px; border-radius: 7px; background: #eeece6; color: var(--muted); font-size: 10px; }
.assignment-details strong { color: var(--ink); font-size: 14px; }
.assignment-details.collision { background: #fff0dc; color: #8a4a00; }
.assignment-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.assignment-tip { margin: 10px 0 0!important; text-align: center; font-size: 9px!important; }
.assignment-tip kbd { height: 16px; }

@media (max-width: 1100px) {
  .canvas-statusbar span:nth-child(n+4) { display:none; }
}

.export-warning { display:inline-block; margin-top:8px; color:#a14b2c; font-weight:600; }


/* v1.3 Live Preview Editor and measurement system */
.unit-explainer { display:flex; flex-direction:column; gap:2px; margin-top:10px; padding:8px 9px; border:1px solid var(--line); border-radius:8px; background:#eeece6; font-size:9px; color:var(--muted); }
.unit-explainer strong { color:var(--ink); font-size:10px; }
#canvasCoordinateStatus { min-width:126px; }
#canvasBoundsStatus { min-width:110px; }
.preview-editor { position:fixed; inset:0; z-index:80; display:none; background:#272624; color:#22211f; }
.preview-editor.open { display:flex; flex-direction:column; }
body.preview-editor-open { overflow:hidden; }
.preview-editor-header { height:64px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:8px 12px; background:#343330; color:#f3f1ec; border-bottom:1px solid #151513; }
.preview-editor-title { display:flex; align-items:center; gap:9px; }
.preview-editor-title strong,.preview-editor-title span { display:block; }
.preview-editor-title strong { font-size:13px; }
.preview-editor-title span { margin-top:2px; color:#bdb9b1; font-size:9px; }
.small-mark { width:31px; height:31px; font-size:14px; border-radius:7px; }
.preview-editor-toolbar { display:flex; align-items:center; gap:7px; }
.preview-editor-toolbar label { display:grid; grid-template-columns:auto 64px auto; gap:5px; align-items:center; color:#d2cec6; font-size:9px; }
.preview-editor-toolbar input { min-height:31px; padding:5px 6px; background:#22211f; color:#fff; border-color:#5b5851; }
.preview-editor-toolbar .ghost { color:#f0eee8; border-color:#68645d; background:#45433f; }
.pe-zoom-controls { display:flex; align-items:center; gap:3px; }
.pe-zoom-controls button { min-width:32px; padding:5px 8px; }
.pe-zoom-controls .pe-zoom-readout { min-width:58px; font-variant-numeric:tabular-nums; }
.preview-editor-layout { min-height:0; flex:1; display:grid; grid-template-columns:270px minmax(520px,1fr) 278px; gap:1px; background:#171715; }
.preview-editor-sidebar { min-height:0; overflow:auto; padding:14px; background:#f6f4ef; }
.preview-editor-sidebar h3 { margin:0 0 5px; font-size:13px; }
#peText { width:100%; min-height:210px; resize:vertical; padding:10px; border:1px solid #bcb7ad; border-radius:8px; background:#fff; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.preview-selection-card { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.preview-selection-card strong,.preview-selection-card span { display:block; }
.preview-selection-card span { margin-top:2px; color:var(--muted); font-size:9px; }
.measurement-card { display:flex; flex-direction:column; gap:3px; margin-top:11px; padding:10px; border:1px solid #c8c4bb; border-radius:8px; background:#fff; }
.measurement-card strong { font-size:12px; }
.measurement-card span,.unit-note { color:var(--muted); font-size:9px; line-height:1.45; }
.unit-note { margin-top:9px; }
.unit-note strong { color:var(--ink); }
.preview-editor-canvas-shell { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; background:#777671; }
.preview-editor-ruler { height:27px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 10px; color:#57534d; background:#e4e1da; border-bottom:1px solid #aaa69d; font-size:9px; }
.preview-editor-scroll-area { min-height:0; flex:1; overflow:auto; padding:24px; background-color:#9b9993; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:24px 24px; }
#previewEditorSvg { display:block; overflow:visible; box-shadow:0 5px 24px rgba(0,0,0,.25); touch-action:none; transform-origin:0 0; }
.preview-editor-canvas-shell.preview-space-pan #previewEditorSvg { cursor:grab; }
.preview-editor-canvas-shell.preview-is-panning #previewEditorSvg { cursor:grabbing; }
.pe-paper { fill:#fff; pointer-events:none; }
.preview-glyph-occurrence { fill:#22211f; cursor:move; }
.pe-space-occurrence { fill:transparent; stroke:transparent; cursor:pointer; }
.pe-space-occurrence:hover { fill:rgba(70,110,246,.06); stroke:#8ca5ee; stroke-dasharray:8 5; }
.pe-missing-glyph { cursor:pointer; }
.pe-missing-glyph rect { fill:none; stroke:#c8c3b9; stroke-width:7; }
.pe-missing-glyph path { fill:none; stroke:#ddd8cf; stroke-width:7; }
.pe-selection rect:not(.preview-width-handle) { fill:none; stroke:#3f6df6; stroke-width:1; stroke-dasharray:7 5; vector-effect:non-scaling-stroke; pointer-events:none; }
.preview-advance-line { stroke:#3f6df6; stroke-width:.65; vector-effect:non-scaling-stroke; pointer-events:none; }
.preview-width-handle { fill:transparent; stroke:transparent; stroke-width:0; cursor:ew-resize; }
.preview-width-handle:hover { fill:rgba(63,109,246,.055); }
.preview-width-knob { fill:#3f6df6; stroke:#fff; stroke-width:.75; vector-effect:non-scaling-stroke; pointer-events:none; }
.pe-metric-guide { stroke-width:1; stroke-dasharray:8 6; opacity:.24; vector-effect:non-scaling-stroke; pointer-events:none; }
.pe-custom-guide line { stroke:#b04dce; stroke-width:1.5; stroke-dasharray:10 5; vector-effect:non-scaling-stroke; }
.pe-custom-guide .pe-guide-hit { fill:transparent; cursor:ns-resize; }
.pe-custom-guide.locked { pointer-events:none; opacity:.62; }
.pe-guide-label { font-size:15px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none; }
.preview-editor-canvas-shell.placing-guide #previewEditorSvg { cursor:crosshair; }
.pe-snap-line { stroke:#15a36d; stroke-width:.8; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; pointer-events:none; }
.pe-snap-label { fill:#08784f; font-size:14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none; paint-order:stroke; stroke:#fff; stroke-width:3px; }
.preview-editor-statusbar { height:25px; flex:none; display:flex; align-items:center; gap:18px; padding:0 9px; border-top:1px solid #aaa69d; background:#e8e5de; color:#5b5750; font-size:8px; }
.preview-editor-statusbar span:first-child { color:#22211f; font-weight:700; flex:1; }
.guide-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.guide-panel-heading p { margin:0; color:var(--muted); font-size:9px; }
.check-row { display:flex; flex-direction:row!important; align-items:center; gap:7px; margin:10px 0; color:var(--ink)!important; font-size:10px!important; }
.check-row input { min-height:auto; width:auto; }
.preview-guide-form { grid-template-columns:1fr 64px auto; margin-top:8px; }
.preview-guide-list { margin-top:10px; }
.preview-guide-item { grid-template-columns:minmax(70px,1fr) 66px 30px 28px; }
.preview-guide-item .guide-name-input { min-width:0; }
.snap-badge { align-self:flex-start; padding:3px 6px; border-radius:999px; background:#dff4e9; color:#08784f; font-size:8px; font-weight:800; letter-spacing:.06em; }
.snap-badge.off { background:#e8e5df; color:#767169; }
.snap-distance-row { display:grid!important; grid-template-columns:1fr 58px auto!important; gap:6px!important; align-items:center; margin-top:8px; color:var(--muted)!important; font-size:9px!important; }
.snap-distance-row input { min-height:30px; padding:5px 6px; }
.measurement-list { display:grid; gap:1px; margin-top:8px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.measurement-list div { display:grid; grid-template-columns:86px 1fr; gap:7px; padding:7px 8px; background:#fff; font-size:9px; }
.measurement-list span { color:var(--muted); }
.measurement-list strong { overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 1180px) {
  .preview-editor-layout { grid-template-columns:235px minmax(440px,1fr) 240px; }
}

.preview-editor-toolbar { flex-wrap:wrap; justify-content:flex-end; }


/* 1.3.2 visual pair kerning editor */
.pe-pane-hidden { display:none !important; }
.pe-tool-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:10px 0 6px; }
.pe-tool-switch button { display:flex; align-items:center; justify-content:center; gap:8px; background:#e9e6df; border-color:#c8c3ba; color:#4e4a44; }
.pe-tool-switch button.active { background:#22211f; border-color:#22211f; color:#fff; }
.pe-tool-switch kbd { min-width:20px; padding:2px 5px; border:1px solid currentColor; border-radius:4px; font-size:8px; opacity:.7; }
.pe-tool-help { min-height:26px; margin-bottom:8px; }
.pe-kern-selection-card { display:flex; align-items:center; gap:10px; margin:8px 0 12px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.pe-kern-selection-card strong,.pe-kern-selection-card span { display:block; }
.pe-kern-selection-card span { margin-top:3px; color:var(--muted); font-size:9px; }
.pe-kern-pair-chars { min-width:68px; font-size:34px; line-height:1; font-weight:700; letter-spacing:-.08em; color:#c65a16; }
.pe-kern-value-label { display:block; font-size:9px; color:var(--muted); }
.pe-kern-value-label input { margin-top:5px; width:100%; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.pe-kern-step-row { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:end; gap:7px; margin:9px 0 7px; }
.pe-kern-step-label { display:block; min-width:0; font-size:9px; color:var(--muted); }
.pe-kern-step-label input { width:100%; margin-top:5px; text-align:center; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.pe-kern-step-button { min-width:42px; height:40px; padding:0; font-size:22px; font-weight:700; line-height:1; }
.pe-kern-expression-note { margin:0 0 9px; color:var(--muted); font-size:9px; line-height:1.45; }
.pe-kern-expression-note code { padding:1px 4px; border:1px solid var(--line); border-radius:4px; background:var(--soft); color:var(--text); font-size:9px; }
.preview-editor-canvas-shell.kerning-tool .preview-glyph-occurrence { cursor:default; }
.pe-kern-handle { cursor:ew-resize; }
.pe-kern-hit { fill:transparent; stroke:none; }
.pe-kern-handle:hover .pe-kern-hit { fill:rgba(226,111,32,.07); }
.pe-kern-line { stroke:#e26f20; stroke-width:.8; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; opacity:.58; pointer-events:none; }
.pe-kern-chevron { fill:none; stroke:#e26f20; stroke-width:1.1; vector-effect:non-scaling-stroke; pointer-events:none; }
.pe-kern-handle:hover .pe-kern-line,.pe-kern-handle:hover .pe-kern-chevron,.pe-kern-handle.selected .pe-kern-line,.pe-kern-handle.selected .pe-kern-chevron { opacity:1; stroke-width:1.35; }
.pe-kern-handle.selected .pe-kern-hit { fill:rgba(226,111,32,.10); }
.pe-kern-tag { pointer-events:none; }
.pe-kern-tag rect { fill:#e26f20; stroke:#fff; stroke-width:.7; vector-effect:non-scaling-stroke; }
.pe-kern-tag text { fill:#fff; font-size:14px; font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Pranav Glyph Studio 2.0.0 - release workflow and precision drawing foundation */
.new-font-modal-card{width:min(780px,calc(100vw - 32px));max-height:90vh;overflow:auto}
.cloud-project-modal-card {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
  border-radius: 8px;
}
.cloud-project-modal-head,
.current-project-settings-head,
.cloud-project-row,
.cloud-backup-row,
.cloud-backup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cloud-project-modal-head > div { min-width: 0; }
.cloud-project-modal-head p { max-width: 680px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.current-project-settings {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.current-project-settings h3 { margin: 3px 0 0; font-size: 14px; }
.completion-badge,
.cloud-project-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}
.cloud-project-status.status-complete,
.cloud-project-status.status-published { border-color: #65a476; color: #28713d; }
.cloud-project-status.status-needs_review { border-color: #c6a33d; color: #7b641b; }
.project-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.project-settings-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.project-settings-grid input,
.project-settings-grid textarea { width: 100%; }
.project-notes-field { grid-column: span 2; }
.project-settings-actions,
.project-variant-actions,
.project-save-actions { display: flex; align-items: center; gap: 7px; }
.project-settings-actions { justify-content: space-between; margin-top: 10px; }
.preflight-workspace {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.preflight-head,
.preflight-head-actions,
.preflight-issue-heading,
.preflight-glyphs {
  display: flex;
  align-items: center;
}
.preflight-head { justify-content: space-between; gap: 16px; }
.preflight-head h3 { margin: 3px 0 0; font-size: 14px; }
.preflight-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.preflight-head-actions { flex: none; gap: 7px; }
.preflight-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}
.preflight-status.is-running { border-color: var(--blue); color: var(--blue); }
.preflight-status.is-blocked { border-color: #cf6659; color: #a73529; }
.preflight-status.is-passed { border-color: #65a476; color: #28713d; }
.preflight-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.preflight-summary-item { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); }
.preflight-summary-item:last-child { border-right: 0; }
.preflight-summary-item span,
.preflight-summary-item strong { display: block; }
.preflight-summary-item span { color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.preflight-summary-item strong { margin-top: 3px; font-size: 13px; }
.preflight-issue-list { max-height: 230px; overflow: auto; }
.preflight-issue,
.preflight-empty { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.preflight-issue:last-child,
.preflight-empty:last-child { border-bottom: 0; }
.preflight-issue-heading { justify-content: space-between; gap: 12px; }
.preflight-issue-title { min-width: 0; }
.preflight-issue-title strong { display: block; font-size: 10px; }
.preflight-issue-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.preflight-severity {
  flex: none;
  min-width: 52px;
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.preflight-severity.error { border-color: #cf6659; color: #a73529; }
.preflight-severity.warning { border-color: #c6a33d; color: #7b641b; }
.preflight-glyphs { gap: 5px; margin-top: 8px; overflow: hidden; }
.preflight-glyph-button {
  min-width: 30px;
  min-height: 27px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #fff;
  font-size: 10px;
}
.preflight-glyph-overflow { color: var(--muted); font-size: 9px; }
.preflight-empty { color: var(--muted); font-size: 10px; line-height: 1.45; }
.contour-diagnostic-bar {
  position: absolute;
  z-index: 18;
  top: 18px;
  right: 18px;
  left: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 9px 10px 9px 12px;
  border: 1px solid #d35a50;
  border-left-width: 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 24px rgba(28, 24, 22, .12);
}
.contour-diagnostic-bar[hidden] { display: none; }
.contour-diagnostic-copy { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; min-width: 0; }
.contour-diagnostic-copy > span { color: #a73529; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.contour-diagnostic-copy > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.contour-diagnostic-copy > small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.contour-diagnostic-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.contour-diagnostic-actions button { min-width: 30px; min-height: 30px; padding: 4px 8px; }
.contour-diagnostic-markers { position: absolute; z-index: 17; inset: 0; overflow: hidden; pointer-events: none; }
.open-contour-html-marker {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #d83f34;
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
.open-contour-html-marker.is-end { background: #17181a; }
.open-contour-source-highlight { fill: rgba(216, 63, 52, .13) !important; stroke: #d83f34 !important; stroke-width: 2.4 !important; vector-effect: non-scaling-stroke; }
.open-contour-gap { fill: none; stroke: #d83f34; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.open-contour-endpoint { fill: #fff; stroke: #d83f34; stroke-width: 3; vector-effect: non-scaling-stroke; }
.open-contour-endpoint.is-end { fill: #17181a; }
.open-contour-label { fill: #a73529; font-family: Arial, sans-serif; font-weight: 800; }
.duplicate-node-ring,
.self-intersection-ring,
.self-intersection-segment,
.self-intersection-cross {
  vector-effect: non-scaling-stroke;
}
.duplicate-node-ring { fill: #fff; stroke: #d83f34; stroke-width: 3; }
.duplicate-node-ring.is-inner { fill: #17181a; stroke: #fff; stroke-width: 2; }
.self-intersection-ring { fill: rgba(255, 255, 255, .88); stroke: #d83f34; stroke-width: 3; }
.self-intersection-segment { fill: none; stroke-width: 5; }
.self-intersection-segment.is-first { stroke: #d83f34; }
.self-intersection-segment.is-second { stroke: #1766dd; }
.self-intersection-cross { stroke: #17181a; stroke-width: 2; }
.contour-diagnostic-label { fill: #a73529; font-family: Arial, sans-serif; font-weight: 800; }
.release-workspace {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.release-workspace-head,
.release-builder-controls,
.release-history-head,
.release-history-row,
.release-history-actions {
  display: flex;
  align-items: center;
}
.release-workspace-head { justify-content: space-between; gap: 16px; }
.release-workspace-head h3 { margin: 3px 0 0; font-size: 14px; }
.release-workspace-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.release-builder-controls { gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.release-builder-controls > label { display: grid; flex: 1 1 300px; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.release-builder-controls select { width: 100%; }
.release-delivery-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  flex: 1 1 330px;
  align-items: center;
  gap: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.release-delivery-options > div {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 10px;
  border-right: 1px solid var(--line);
}
.release-delivery-options > div:last-child { border-right: 0; }
.release-delivery-options strong { color: var(--ink); font-size: 9px; }
.release-delivery-options span { color: var(--muted); font-size: 8px; }
.release-builder-controls > button { flex: none; min-height: 42px; }
.release-builder-summary { min-height: 38px; margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.release-builder-summary strong { color: var(--ink); }
.release-builder-blockers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.release-builder-blocker { padding: 4px 6px; border: 1px solid #cf6659; border-radius: 3px; color: #a73529; font-size: 8px; }
.release-progress { height: 3px; overflow: hidden; background: #e5e2dc; }
.release-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 180ms ease; }
.release-history-head { justify-content: space-between; margin-top: 16px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.release-history-head strong { font-size: 10px; }
.release-history-list { max-height: 220px; overflow: auto; }
.release-history-row { justify-content: space-between; gap: 12px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.release-history-row:last-child { border-bottom: 0; }
.release-history-info { min-width: 0; }
.release-history-info strong,
.release-history-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-history-info strong { font-size: 10px; }
.release-history-info span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.release-history-actions { flex: none; gap: 6px; }
.release-history-actions button { min-height: 29px; padding: 4px 7px; font-size: 9px; }
.release-history-list > .section-copy { margin: 0; padding: 12px 0; }
.release-comparison { margin-top: 12px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #faf9f6; }
.release-comparison-head,
.release-comparison-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.release-comparison-head h3 { margin: 3px 0 0; font-size: 12px; }
.release-comparison .preflight-summary { margin-top: 10px; background: #fff; }
.release-comparison-changes { margin-top: 10px; }
.release-change-group + .release-change-group { margin-top: 8px; }
.release-change-group strong { display: block; margin-bottom: 5px; font-size: 9px; text-transform: uppercase; }
.release-change-items { display: flex; flex-wrap: wrap; gap: 4px; }
.release-change-item { min-width: 30px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 9px; text-align: center; }
.release-change-item.is-added { border-color: #65a476; color: #28713d; }
.release-change-item.is-removed { border-color: #cf6659; color: #a73529; }
.release-change-item.is-modified { border-color: #c6a33d; color: #7b641b; }
.release-comparison-actions { justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.release-comparison-actions button { background: #fff; }
.cloud-project-browser-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px; }
.cloud-project-browser-toolbar p { max-width:560px; margin:0; color:var(--muted); font-size:10px; line-height:1.4; text-align:right; }
.cloud-project-tabs { display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.cloud-project-tab { display:inline-flex; align-items:center; gap:7px; min-height:31px; padding:5px 9px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:10px; font-weight:750; }
.cloud-project-tab:hover { background:#fff; color:var(--ink); }
.cloud-project-tab.is-active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(19,24,35,.10); }
.cloud-project-tab span { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--line); color:inherit; font-size:9px; font-variant-numeric:tabular-nums; }
.cloud-project-browser { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr); gap: 14px; margin-top: 10px; }
.cloud-project-browser.is-bin { grid-template-columns:1fr; }
.cloud-project-browser.is-bin .cloud-backup-browser { display:none; }
.cloud-project-list,
.cloud-backup-browser { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cloud-project-list { max-height: 420px; overflow: auto; }
.cloud-project-collection + .cloud-project-collection { border-top: 2px solid var(--line-strong); }
.cloud-collection-head,
.cloud-family-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cloud-collection-head { min-height: 42px; padding: 9px 12px; background: #eeece6; border-bottom: 1px solid var(--line); }
.cloud-collection-head strong { font-size: 11px; }
.cloud-collection-head span,
.cloud-family-head span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.cloud-family-head { min-height: 34px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.cloud-family-head strong { font-size: 10px; }
.cloud-project-row { min-height: 72px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cloud-project-family .cloud-project-row:last-child,
.cloud-backup-row:last-child { border-bottom: 0; }
.cloud-project-row.is-current { box-shadow: inset 3px 0 0 var(--accent); }
.cloud-project-row.is-deleted { background:#fffaf6; }
.cloud-project-row.is-deleted .cloud-project-info strong { color:#733d21; }
.cloud-project-info { min-width: 0; }
.cloud-project-info strong,
.cloud-project-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-project-info strong { font-size: 12px; }
.cloud-project-info span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.cloud-project-row-actions { display: flex; align-items: center; gap: 6px; }
.cloud-project-row-actions select { min-height: 30px; padding: 4px 22px 4px 7px; font-size: 10px; }
.cloud-project-row-actions button { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.cloud-backup-browser { overflow: hidden; }
.cloud-backup-head { min-height: 48px; padding: 10px; border-bottom: 1px solid var(--line); }
.cloud-backup-head strong { font-size: 11px; }
.cloud-backup-head span { max-width: 160px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cloud-backup-list { max-height: 310px; overflow: auto; }
.cloud-backup-row { min-height: 54px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cloud-backup-row span { display: block; color: var(--muted); font-size: 9px; }
.cloud-backup-row strong { font-size: 10px; }
.cloud-backup-row button { min-height: 28px; padding: 4px 7px; font-size: 9px; }
.cloud-project-list > .section-copy,
.cloud-backup-list > .section-copy { margin: 0; padding: 16px; }

.variant-modal-card { width: min(680px, calc(100vw - 32px)); }
.variant-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.variant-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.variant-fields input[readonly] { background: var(--panel); color: var(--muted); }
.variant-source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.variant-source-options legend { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.variant-source-options label { display: flex; align-items: flex-start; gap: 8px; min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.variant-source-options input { width: 14px; min-height: 14px; margin: 2px 0 0; }
.variant-source-options span,
.variant-source-options strong,
.variant-source-options small { display: block; }
.variant-source-options strong { color: var(--ink); font-size: 10px; }
.variant-source-options small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }

@media (max-width: 1320px) {
  .workflow-select > span { display: none; }
  .workflow-select { padding-left: 6px; }
  .brand span { display: none; }
}

@media (max-width: 860px) {
  .project-settings-grid,
  .cloud-project-browser { grid-template-columns: 1fr; }
  .project-notes-field { grid-column: auto; }
  .project-settings-actions { align-items: stretch; flex-direction: column; }
  .project-variant-actions,
  .project-save-actions { width: 100%; }
  .project-save-actions { justify-content: flex-end; }
  .variant-fields,
  .variant-source-options { grid-template-columns: 1fr; }
  .preflight-head { align-items: flex-start; flex-direction: column; }
  .preflight-head-actions { width: 100%; justify-content: space-between; }
  .preflight-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preflight-summary-item:nth-child(2) { border-right: 0; }
  .preflight-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cloud-project-browser-toolbar { align-items:stretch; flex-direction:column; }
  .cloud-project-browser-toolbar p { max-width:none; text-align:left; }
  .cloud-project-tabs { align-self:flex-start; }
  .cloud-project-row { align-items: flex-start; flex-direction: column; }
  .cloud-project-row-actions { width: 100%; flex-wrap: wrap; }
}
.new-font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.starter-font-library{margin-top:18px}
.starter-font-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:9px}
.starter-font-library-head h3{margin:3px 0 0;font-size:15px}
.starter-font-library-head a{color:var(--muted);font-size:10px;font-weight:700;text-decoration:none}
.starter-font-library-head a:hover,.starter-font-library-head a:focus-visible{color:var(--ink);text-decoration:underline}
.starter-font-tools{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:10px;align-items:end;margin-bottom:9px;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fff}
.starter-font-search{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:9px;font-weight:700}
.starter-font-search input{width:100%;min-height:32px;border-radius:4px}
.starter-font-filters{display:flex;gap:4px;align-items:center;overflow-x:auto}
.starter-font-filters button{min-height:32px;padding:0 9px;white-space:nowrap;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:700}
.starter-font-filters button:hover,.starter-font-filters button:focus-visible{border-color:var(--line-strong);color:var(--ink)}
.starter-font-filters button.is-active{border-color:var(--ink);background:var(--ink);color:#fff}
.starter-font-count{align-self:center;white-space:nowrap;color:var(--muted);font-size:9px;font-weight:700;font-variant-numeric:tabular-nums}
.starter-font-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.starter-font-list>.section-copy{grid-column:1/-1}
.starter-font-card{display:grid;grid-template-rows:minmax(68px,auto) auto;min-width:0;min-height:126px;padding:0;overflow:hidden;text-align:left;background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink);transition:border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease}
.starter-font-card:hover,.starter-font-card:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px rgba(63,109,246,.1);transform:translateY(-1px);outline:none}
.starter-font-card:disabled{cursor:wait;opacity:.62;transform:none}
.starter-font-sample{display:flex;align-items:center;min-width:0;min-height:68px;padding:12px 13px 8px;overflow:hidden;white-space:nowrap;font-size:36px;line-height:1;letter-spacing:0}
.starter-font-card[data-starter-id="humanist-sans"] .starter-font-sample{font-family:"PGS Starter Vize",sans-serif}
.starter-font-card[data-starter-id="didone-serif"] .starter-font-sample{font-family:"PGS Starter Medi",serif}
.starter-font-card[data-starter-id="modular-display"] .starter-font-sample{font-family:"PGS Starter Baar",sans-serif}
.starter-font-card[data-starter-id="retro-scifi"] .starter-font-sample{font-family:"PGS Starter Star",sans-serif}
.starter-font-card[data-starter-id="neo-grotesque"] .starter-font-sample{font-family:"PGS Starter Cosm",sans-serif}
.starter-font-card[data-starter-id="neo-grotesque-italic"] .starter-font-sample{font-family:"PGS Starter Cosm Italic",sans-serif}
.starter-font-card[data-starter-id="art-deco"] .starter-font-sample{font-family:"PGS Starter Deco",sans-serif}
.starter-font-card[data-starter-id="ocr-mono"] .starter-font-sample{font-family:"PGS Starter Ocra",monospace}
.starter-font-card[data-starter-id="pixel-multiscript"] .starter-font-sample{font-family:"PGS Starter Pixa",sans-serif;font-size:28px}
.starter-font-card[data-starter-id="humanist-variable"] .starter-font-sample{font-family:"PGS Starter Plum",sans-serif}
.starter-font-card[data-starter-id="renaissance-serif"] .starter-font-sample{font-family:"PGS Starter Veni",serif}
.starter-font-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:9px 12px;border-top:1px solid var(--line);background:var(--panel)}
.starter-font-card-copy{min-width:0}
.starter-font-card-copy strong,.starter-font-card-copy small{display:block}
.starter-font-card-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.starter-font-card-copy small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.3}
.starter-font-use{align-self:center;color:var(--blue);font-size:9px;font-weight:800;text-transform:uppercase}
.starter-font-divider{display:flex;align-items:center;gap:10px;margin:17px 0 0;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}
.starter-font-divider::before,.starter-font-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.new-font-grid label,.custom-glyph-set-label{display:grid;gap:6px;font-size:11px;color:var(--muted)}
.custom-glyph-set-label textarea{min-height:92px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.glyph-template-save-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;align-items:end;margin:12px 0}.glyph-template-save-row label{display:grid;gap:6px;font-size:11px;color:var(--muted)}.glyph-template-save-row button{min-height:38px;white-space:nowrap}
.modal-actions.split-actions{display:flex;align-items:center;gap:8px;margin-top:16px}.modal-actions.split-actions .primary{margin-left:auto}
.construction-grid{pointer-events:none}.grid-pattern-fill{pointer-events:none}.grid-line{fill:none;stroke:#4f79a7;stroke-width:.55;opacity:.32;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}.grid-line.major{stroke:#355f8d;stroke-width:.9;opacity:.62}
.native-object{fill:#202124;stroke:none;cursor:move}.native-object.selected{fill:#17181a;stroke:#2d7ff9;stroke-width:1.3;vector-effect:non-scaling-stroke}.native-object.draft{fill:none;stroke:#2d7ff9;stroke-width:1.25;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.native-node{fill:#fff;stroke:#2d7ff9;stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:move}.native-node.selected{fill:#2d7ff9;stroke:#fff;stroke-width:1.8}.native-node.smooth{fill:#fff}.native-node.smooth.selected{fill:#2d7ff9}
.native-handle-line{stroke:#2d7ff9;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.native-handle{fill:#fff;stroke:#2d7ff9;stroke-width:1.25;vector-effect:non-scaling-stroke;cursor:crosshair}
.pen-draft-line{fill:none;stroke:#2d7ff9;stroke-width:1.2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke;pointer-events:none}
body[data-tool="pen"] #glyphCanvas,body[data-tool="rect"] #glyphCanvas,body[data-tool="ellipse"] #glyphCanvas{cursor:crosshair}
body[data-tool="node"] #glyphCanvas{cursor:default}.selected-row{outline:1px solid #2d7ff9;background:rgba(45,127,249,.08)}
#drawingInspector .selection-card{margin-bottom:10px}.danger-text{color:#b3453f!important}
.path-point-controls{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.path-point-controls[hidden]{display:none}.point-inspector-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.point-inspector-heading h3{margin:0}.point-inspector-heading span{font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}.point-type-control{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:9px}.point-type-control button{background:#ebe8e1}.point-type-control button.active{background:#22211f;border-color:#22211f;color:#fff}.point-actions{grid-template-columns:1fr 1fr;margin-top:8px}
#nativeObjectList .kern-item{grid-template-columns:78px 1fr 28px}
#finishPathBtn:disabled,#deleteObjectBtn:disabled{opacity:.42}
@media(max-width:900px){.new-font-grid,.glyph-template-save-row,.starter-font-list,.starter-font-tools{grid-template-columns:1fr}.starter-font-filters{padding-bottom:2px}.starter-font-count{justify-self:start}.modal-actions.split-actions{flex-wrap:wrap}.modal-actions.split-actions .primary{margin-left:0;width:100%}}
/* The editor is mounted only after Firebase confirms the configured admin UID. */
body.is-auth-pending,
body.is-auth-denied {
  overflow: hidden;
}

body.is-auth-pending > :not(.studio-auth-gate),
body.is-auth-denied > :not(.studio-auth-gate) {
  visibility: hidden;
}

.studio-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  background: #f4f4f1;
  color: #171817;
  text-align: center;
}

.studio-auth-gate[hidden] {
  display: none;
}

.studio-auth-mark {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  place-items: center;
  border-radius: 10px;
  background: #171817;
  color: #fff;
  font-weight: 800;
}

.studio-auth-gate strong {
  font-size: 18px;
}

.studio-auth-gate > span:last-child {
  max-width: 360px;
  color: #666b67;
  font-size: 13px;
  line-height: 1.5;
}

/* 2026-07 layout correction: responsive application chrome */
.topbar,
.menu-strip,
.workspace,
.center-panel,
.left-panel,
.right-panel,
.canvas-toolbar,
.preview-panel,
.preview-header,
.preview-controls,
.preview-editor-layout,
.preview-editor-canvas-shell {
  min-width: 0;
}

.top-actions {
  min-width: 0;
}

.top-actions > *,
.tool,
.tool-group.right > *,
.preview-controls > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.canvas-toolbar > .tool-group:first-child,
.tool-group.right {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.tool-group.right {
  justify-content: flex-start;
}

.preview-controls {
  flex: 1 1 auto;
  justify-content: flex-end;
}

#previewText {
  flex: 1 1 210px;
  min-width: 130px;
  max-width: 320px;
}

@media (max-width: 1020px) {
  .workspace {
    grid-template-columns: 218px minmax(0, 1fr) 230px;
    gap: 8px;
    padding: 8px;
  }

  .glyph-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .canvas-toolbar {
    gap: 6px;
    padding: 6px;
  }

  .tool {
    padding-inline: 8px;
  }

  .preview-header > div:first-child p {
    display: none;
  }

  .preview-header > div:first-child h3 {
    margin: 0;
    white-space: nowrap;
  }

  .preview-editor-layout {
    grid-template-columns: 210px minmax(0, 1fr) 220px;
  }
}

@media (max-width: 860px) {
  .topbar {
    padding-inline: 10px;
  }

  .top-actions {
    gap: 5px;
  }

  #redoBtn,
  #saveProjectBtn {
    display: none;
  }

  .topbar button,
  .topbar .button {
    padding-inline: 9px;
  }

  .workflow-select select {
    width: 102px;
  }

  .workspace {
    grid-template-columns: 190px minmax(0, 1fr) 210px;
    gap: 7px;
    padding: 7px;
  }

  .glyph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-drop {
    margin-inline: 9px;
    padding-inline: 8px;
  }

  .segmented,
  .search-row {
    padding-inline: 9px;
  }

  .right-panel .field-grid {
    grid-template-columns: 1fr;
  }

  .canvas-statusbar span:nth-child(n+3) {
    display: none;
  }

  .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .preview-controls {
    width: 100%;
    justify-content: stretch;
  }

  #previewText {
    max-width: none;
  }

  .preview-controls input[type=range] {
    flex: 0 1 95px;
  }

  .preview-editor-layout {
    grid-template-columns: 188px minmax(0, 1fr) 200px;
  }
}

@media (max-width: 720px) {
  html,
  body {
    height: auto;
    min-height: 100%;
  }

  body,
  body.is-auth-pending,
  body.is-auth-denied {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    height: auto;
    min-height: 64px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    padding-block: 9px;
  }

  .brand {
    width: 100%;
  }

  .top-actions {
    width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .menu-strip {
    height: auto;
    min-height: 34px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
  }

  .menu-items,
  .document-status {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .document-status {
    width: 100%;
    padding: 2px 4px 4px;
  }

  .workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .center-panel {
    order: 1;
    grid-template-rows: auto minmax(430px, 62vh) 220px;
  }

  .left-panel {
    order: 2;
    max-height: 620px;
  }

  .right-panel {
    order: 3;
    min-height: 520px;
  }

  .glyph-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .preview-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 0.42fr);
  }

  .preview-controls button {
    grid-column: 1 / -1;
    width: 100%;
  }

  #previewSvg {
    min-width: 640px;
  }

  .preview-editor-header {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .preview-editor-toolbar {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }

  .preview-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .preview-editor-canvas-shell {
    order: -1;
    min-height: 65vh;
  }

  .preview-editor-sidebar {
    min-height: 420px;
    overflow: visible;
  }
}

@media (max-width: 460px) {
  .top-actions #projectsBtn,
  .top-actions #openPreviewEditorBtn {
    display: none;
  }

  .glyph-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .canvas-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .canvas-toolbar > .tool-group:nth-child(2) {
    grid-row: 2;
    justify-content: center;
  }

  .tool-group.right {
    grid-row: 3;
  }
}


/* Keep the Preview Editor controls and exit action visible on phone-sized screens. */
@media (max-width: 720px) {
  .preview-editor-title span {
    display: none;
  }

  .preview-editor-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    flex-wrap: initial;
  }

  .preview-editor-toolbar label {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .preview-editor-toolbar label input {
    width: 100%;
    min-width: 0;
  }

  .pe-zoom-controls {
    justify-content: center;
  }

  #peFitBtn {
    width: 100%;
  }

  #closePreviewEditorBtn {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .preview-editor-statusbar {
    height: auto;
    min-height: 28px;
    padding: 6px 8px;
  }

  .preview-editor-statusbar span:not(:first-child) {
    display: none;
  }

  .preview-editor-statusbar span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 2026-07 layout-only patch: keep every Studio control reachable and place
   the project browser beside the current-project workspace on wide screens. */

/* Do not remove commands merely because the top bar becomes narrow. The
   existing horizontal scrolling keeps them reachable without changing logic. */
@media (max-width: 1100px) {
  .brand {
    flex: 0 0 auto;
  }

  .top-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .top-actions #newFontBtn,
  .top-actions #undoBtn,
  .top-actions #redoBtn,
  .top-actions #saveProjectBtn,
  .top-actions #projectsBtn,
  .top-actions #openPreviewEditorBtn {
    display: inline-flex !important;
  }
}

/* The toolbar has two deliberate rows. Give both rows real space instead of
   allowing the canvas to cover the second row. */
.canvas-toolbar {
  flex: 0 0 max(var(--top-panel-height, 54px), 102px);
  min-height: 102px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "primary zoom"
    "actions actions";
  grid-template-rows: minmax(34px, auto) minmax(39px, auto);
  align-items: center;
  gap: 6px 8px;
  overflow: hidden;
}

.canvas-toolbar > .tool-group:first-child {
  grid-area: primary;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
}

.canvas-toolbar > .tool-group:nth-child(2) {
  grid-area: zoom;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.canvas-toolbar > .tool-group.right {
  grid-area: actions;
  width: auto;
  min-width: 0;
  margin: 0;
  padding-top: 6px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Keep the five actual workspace children aligned with five grid columns.
   Earlier narrow layouts declared only three columns, which displaced the
   canvas and inspector because both resize handles still occupied cells. */
@media (max-width: 1100px) and (min-width: 721px) {
  .workspace {
    grid-template-columns: 218px 8px minmax(0, 1fr) 8px 230px;
    gap: 0;
    padding: 8px;
  }
}

@media (max-width: 860px) and (min-width: 721px) {
  .workspace {
    grid-template-columns: 190px 8px minmax(0, 1fr) 8px 210px;
    gap: 0;
    padding: 7px;
  }
}

@media (max-width: 720px) {
  .workspace > .panel-resize-handle {
    display: none;
  }

  .workspace > .center-panel,
  .workspace > .left-panel,
  .workspace > .right-panel {
    grid-column: 1;
  }

  .center-panel {
    min-height: 0;
  }

  .center-panel > .canvas-shell {
    flex: 0 0 clamp(430px, 56vh, 560px);
    min-height: 430px;
  }

  .center-panel > .preview-panel {
    flex: 0 0 220px;
  }

  .canvas-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "primary zoom"
      "actions actions";
  }
}

@media (max-width: 460px) {
  .top-actions #projectsBtn,
  .top-actions #openPreviewEditorBtn {
    display: inline-flex !important;
  }

  .canvas-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "primary zoom"
      "actions actions";
  }

  .canvas-toolbar > .tool-group:nth-child(2),
  .canvas-toolbar > .tool-group.right {
    grid-row: auto;
  }
}

/* Projects modal: project selection remains visible at the left while current
   project settings, preflight and release tools scroll independently at right. */
.cloud-project-modal-card {
  width: min(1280px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(520px, 1.45fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: 16px;
}

.cloud-project-modal-head {
  grid-column: 1 / -1;
  grid-row: 1;
}

.cloud-project-modal-card > .current-project-settings {
  grid-column: 2;
  grid-row: 2 / 4;
  min-height: 0;
  margin-top: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.cloud-project-modal-card > .cloud-project-browser-toolbar {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin-top: 14px;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.cloud-project-modal-card > .cloud-project-browser-toolbar p {
  max-width: none;
  text-align: left;
}

.cloud-project-modal-card > .cloud-project-browser {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
  height: 100%;
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(220px, 1fr) minmax(135px, .55fr);
}

.cloud-project-modal-card .cloud-project-list {
  min-height: 0;
  max-height: none;
}

.cloud-project-modal-card .cloud-backup-browser {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cloud-project-modal-card .cloud-backup-list {
  min-height: 0;
  overflow: auto;
}

.cloud-project-modal-card > .cloud-project-browser.is-bin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.cloud-project-modal-card > #cloudProjectError {
  grid-column: 1 / -1;
  grid-row: 4;
}

/* On compact screens keep the project list first, then the current project.
   Both areas remain independently scrollable instead of one burying the other. */
@media (max-width: 920px) {
  .cloud-project-modal-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(250px, 40vh) minmax(300px, 1fr) auto;
  }

  .cloud-project-modal-card > .cloud-project-modal-head {
    grid-column: 1;
    grid-row: 1;
  }

  .cloud-project-modal-card > .cloud-project-browser-toolbar {
    grid-column: 1;
    grid-row: 2;
  }

  .cloud-project-modal-card > .cloud-project-browser {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .cloud-project-modal-card > .current-project-settings {
    grid-column: 1;
    grid-row: 4;
    margin-top: 12px;
  }

  .cloud-project-modal-card > #cloudProjectError {
    grid-column: 1;
    grid-row: 5;
  }
}

@media (max-width: 620px) {
  .cloud-project-modal-card > .cloud-project-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) minmax(130px, .55fr);
  }
}


/* Project history and copy-comparison indicators. */
.cloud-project-browser-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cloud-project-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.cloud-project-sort[hidden] { display: none !important; }
.cloud-project-sort select {
  min-height: 31px;
  max-width: 150px;
  padding: 4px 24px 4px 7px;
  font-size: 9px;
}
.cloud-project-row:not(.is-deleted) {
  min-height: 132px;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}
.cloud-project-row.is-recommended { background: #f8fbf5; }
.cloud-project-row.is-recommended:not(.is-current) { box-shadow: inset 3px 0 0 #6f8d59; }
.cloud-project-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cloud-project-title-line > strong { min-width: 0; }
.cloud-project-activity-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  flex: none;
}
.cloud-project-activity-badge {
  display: inline-flex !important;
  align-items: center;
  min-height: 18px;
  margin: 0 !important;
  padding: 2px 6px;
  overflow: visible !important;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-overflow: clip !important;
  text-transform: uppercase;
  white-space: nowrap !important;
}
.cloud-project-activity-badge.is-current {
  border-color: #a9c8ef;
  background: #f1f7ff;
  color: #245d9d !important;
}
.cloud-project-activity-badge.is-recommended {
  border-color: #a9c496;
  background: #eff7e9;
  color: #41612e !important;
}
.cloud-project-activity-badge.is-newest {
  border-color: #d2c18d;
  background: #fffaf0;
  color: #735f24 !important;
}
.cloud-project-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.cloud-project-date-grid span {
  min-width: 0;
  margin: 0 !important;
  padding: 6px 7px;
  overflow: visible !important;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #faf9f6;
  color: var(--ink) !important;
  font-size: 8px !important;
  line-height: 1.35;
  text-overflow: clip !important;
  white-space: normal !important;
}
.cloud-project-date-grid b {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cloud-project-work-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.cloud-project-work-stats span {
  display: inline-flex !important;
  align-items: baseline;
  gap: 3px;
  margin: 0 !important;
  padding: 3px 6px;
  overflow: visible !important;
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted) !important;
  font-size: 8px !important;
  line-height: 1.2;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.cloud-project-work-stats b { color: var(--ink); font-size: 9px; }
.cloud-project-row:not(.is-deleted) .cloud-project-row-actions {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cloud-project-row:not(.is-deleted) .cloud-project-status { margin-right: auto; }

@media (max-width: 460px) {
  .cloud-project-date-grid { grid-template-columns: 1fr; }
  .cloud-project-title-line { align-items: flex-start; flex-direction: column; }
  .cloud-project-activity-badges { justify-content: flex-start; }
  .cloud-project-sort { width: 100%; justify-content: space-between; }
  .cloud-project-sort select { max-width: none; flex: 1; }
}

/* Reference tracing layers and Illustrator-style selection transforms */
.glyph-reference-artwork { cursor: move; }
.glyph-reference-artwork image { pointer-events: none; }

.reference-hit-area {
  fill: rgba(0,0,0,.001);
  pointer-events: all;
}
.glyph-reference-artwork.is-selected { filter: drop-shadow(0 0 3px rgba(45,127,249,.55)); }
.selection-transform-box { pointer-events: none; }
.selection-transform-outline,
.selection-transform-rotation-line {
  fill: none;
  stroke: #2d7ff9;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.selection-transform-rotation-line { stroke-dasharray: 3 3; }
.transform-handle,
.transform-rotate-handle {
  fill: #fff;
  stroke: #2d7ff9;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}
.transform-handle-nw,.transform-handle-se { cursor: nwse-resize; }
.transform-handle-ne,.transform-handle-sw { cursor: nesw-resize; }
.transform-handle-n,.transform-handle-s { cursor: ns-resize; }
.transform-handle-e,.transform-handle-w { cursor: ew-resize; }
.transform-rotate-handle { cursor: grab; }
.transform-rotate-handle:active { cursor: grabbing; }
.reference-artwork-panel {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.reference-artwork-list { max-height: 210px; overflow: auto; }
.reference-artwork-row { grid-template-columns: 28px minmax(0,1fr) 28px; }
.reference-artwork-row.is-active { outline: 1px solid #2d7ff9; background: rgba(45,127,249,.08); }
.reference-artwork-controls {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}
.reference-artwork-controls[hidden] { display: none; }
.transform-hint { margin: 0; line-height: 1.45; }
body[data-tool="select"] .glyph-reference-artwork { cursor: move; }


/* Explicit Transform tool and mixed contour/reference selections */
.tool.transform-tool .tool-symbol { font-size: 16px; }
body[data-tool="transform"] #glyphCanvas { cursor: default; }
body[data-tool="transform"] .native-object,
body[data-tool="transform"] .glyph-reference-artwork,
body[data-tool="select"] .native-object,
body[data-tool="select"] .glyph-reference-artwork { cursor: move; }
.reference-artwork-row.is-locked { opacity: .72; }
.reference-artwork-row.is-locked .structure-row-main span { font-weight: 650; }


/* Saved Preview Editor text and proof library */
.pe-proof-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 7px 0 8px;
}
.preview-proof-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.left-preview-sidebar { position: relative; }
.preview-proof-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #eeece6;
  box-shadow: 0 8px 24px rgba(27, 25, 21, .14);
  max-height: 340px;
  overflow: auto;
}
.pe-proof-library { margin: 0 0 10px; }
.preview-proof-library[hidden] { display: none; }
.preview-proof-section { min-width: 0; }
.preview-proof-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.preview-proof-section-heading strong { font-size: 10px; }
.preview-proof-section-heading span { color: var(--muted); font-size: 9px; }
.preview-proof-section-heading select {
  min-height: 27px;
  padding: 3px 24px 3px 7px;
  font-size: 9px;
}
.preview-proof-card-row {
  display: flex;
  gap: 7px;
  min-height: 57px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding-bottom: 3px;
}
.preview-proof-card {
  flex: 0 0 174px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.preview-proof-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}
.preview-proof-card.built-in { flex-basis: 190px; }
.preview-proof-apply {
  display: block;
  width: 100%;
  min-height: 53px;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.preview-proof-apply:hover { background: #f3f5fb; }
.preview-proof-apply strong,
.preview-proof-apply span { display: block; }
.preview-proof-apply strong {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 10px;
  white-space: nowrap;
}
.preview-proof-apply span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.preview-proof-card-actions {
  display: flex;
  border-top: 1px solid var(--line);
}
.preview-proof-card-actions button {
  flex: 1;
  min-height: 24px;
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: #faf9f6;
  font-size: 8px;
}
.preview-proof-card-actions button + button { border-left: 1px solid var(--line); }
.preview-proof-empty {
  display: grid;
  flex: 1 0 210px;
  min-height: 57px;
  place-items: center;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

@media (max-width: 1020px) {
  .preview-proof-library { grid-template-columns: 1fr; }
  .preview-proof-card { flex-basis: 158px; }
}

/* Procedural effects */
.effect-library-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 12px; }
.effect-stack-list { display:grid; gap:9px; }
.effect-stack-empty { padding:18px 12px; border:1px dashed var(--line); border-radius:10px; text-align:center; background:#fff; }
.effect-stack-empty strong,.effect-stack-empty span { display:block; }
.effect-stack-empty strong { font-size:12px; }
.effect-stack-empty span { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.effect-card { border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; }
.effect-card.is-disabled { opacity:.58; }
.effect-card-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px; border-bottom:1px solid var(--line); background:#f7f5f0; }
.effect-card-head input[type=checkbox] { min-height:auto; }
.effect-card-title { min-width:0; }
.effect-card-title strong,.effect-card-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.effect-card-title strong { font-size:11px; }
.effect-card-title span { margin-top:2px; color:var(--muted); font-size:9px; }
.effect-card-actions { display:flex; gap:3px; }
.effect-card-actions button { min-height:25px; min-width:25px; padding:0 5px; font-size:10px; }
.effect-card-body { display:grid; gap:8px; padding:9px; }
.effect-scope-row { display:grid; grid-template-columns:1fr; gap:6px; }
.effect-scope-row label { font-size:9px; color:var(--muted); }
.effect-scope-row select,.effect-scope-row input { width:100%; margin-top:3px; }
.effect-glyph-scope[hidden] { display:none; }
.effect-control { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:6px; align-items:center; }
.effect-control > span { font-size:9px; color:var(--muted); }
.effect-control input[type=range] { min-height:auto; padding:0; border:0; box-shadow:none; }
.effect-control input[type=number] { min-height:29px; padding:5px 7px; }
.effect-control-select { grid-template-columns:1fr; }
.effect-control-select select { width:100%; }
.effect-control-check { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.effect-control-check input { min-height:auto; }
.effect-vector-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; border:1px dashed var(--line); background:#faf9f6; }
.effect-vector-meta { min-width:0; }
.effect-vector-meta span,.effect-vector-meta small { display:block; }
.effect-vector-meta span { font-size:9px; font-weight:700; }
.effect-vector-meta small { margin-top:2px; color:var(--muted); font-size:8px; line-height:1.35; overflow-wrap:anywhere; }
.effect-vector-actions { display:flex; gap:4px; }
.effect-vector-actions button { min-height:28px; padding:5px 8px; font-size:9px; }
.effect-missing { color:#9a3a2f; background:#fff1ee; padding:8px; border-radius:7px; font-size:10px; }
.effect-stack-footer { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.effect-stack-footer p { margin:7px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.effect-library-modal-card { width:min(1180px,calc(100vw - 32px)); height:min(860px,calc(100vh - 32px)); display:grid; grid-template-rows:auto auto auto auto auto minmax(0,1fr); overflow:hidden; }
.effect-library-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:8px; margin-top:14px; }
.effect-library-toolbar input,.effect-library-toolbar select { width:100%; }
.effect-library-summary { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; padding:9px 0; }
.effect-library-results { min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:8px; padding-right:4px; }
.effect-library-card { display:grid; grid-template-rows:auto 1fr auto; gap:7px; min-height:132px; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.effect-library-card strong { font-size:12px; }
.effect-library-card .effect-category { color:var(--blue); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.effect-library-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.effect-library-card footer { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.effect-library-card footer span { color:var(--muted); font-size:9px; }
.effect-library-card button { min-height:29px; }
.effect-library-no-results { grid-column:1/-1; padding:30px; text-align:center; color:var(--muted); }
.glyph-effect-preview { pointer-events:none; }
.glyph-effect-source { opacity:.13; }

@media (max-width: 920px) {
  .effect-library-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .effect-library-toolbar { grid-template-columns:1fr; }
}


/* Compound paths preserve counters while each contour remains individually editable. */
.native-compound-shape { fill:#202124; stroke:none; pointer-events:none; }
.native-compound-shape.compound-selected { stroke:rgba(45,127,249,.42); stroke-width:1; vector-effect:non-scaling-stroke; }
.native-object.native-compound-hit { fill:transparent !important; stroke:transparent; pointer-events:all; }
.native-object.native-compound-hit:hover { stroke:rgba(45,127,249,.45); stroke-width:1; vector-effect:non-scaling-stroke; }
.native-object.native-compound-hit.selected { fill:transparent !important; stroke:#2d7ff9; stroke-width:1.3; vector-effect:non-scaling-stroke; }

/* Live effect thumbnails: original plus three deterministic parameter variations. */
.effect-library-results {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:max-content;
  gap:10px;
  min-height:0;
  padding:2px 5px 8px 1px;
}
.effect-library-card {
  display:grid;
  grid-template-rows:auto auto minmax(34px,auto) auto auto;
  gap:9px;
  min-width:0;
  min-height:0;
  padding:12px;
}
.effect-preview-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; min-width:0; }
.effect-preview-cell { position:relative; min-width:0; height:112px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#fff,#f5f4f1); overflow:hidden; color:#22211f; }
.effect-preview-cell > span { position:absolute; z-index:2; left:5px; top:4px; max-width:calc(100% - 10px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 4px; border-radius:4px; background:rgba(255,255,255,.82); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.02em; }
.effect-preview-cell svg,
.effect-preview-cell img { display:block; width:100%; height:100%; padding:18px 7px 6px; overflow:visible; object-fit:contain; }
.effect-preview-placeholder { display:grid; place-items:center; width:100%; height:100%; padding-top:12px; font-size:58px; font-weight:900; color:#d2d0cb; }
.effect-preview-cell.is-loading::after { content:''; position:absolute; inset:auto 10px 8px; height:3px; border-radius:4px; background:linear-gradient(90deg,transparent,#b8b5af,transparent); animation:effect-preview-loading 1.1s linear infinite; }
.effect-preview-cell.is-error .effect-preview-placeholder { color:#b0ada7; font-size:34px; }

.effect-preset-row,.effect-library-preset { display:grid; gap:4px; color:var(--muted); font-size:9px; }
.effect-preset-row select,.effect-library-preset select { width:100%; min-height:31px; }
.effect-library-preset { padding:8px; border:1px solid var(--line); border-radius:8px; background:#faf9f6; }

.effect-library-card footer { margin-top:0; }
@keyframes effect-preview-loading { from{transform:translateX(-70%)} to{transform:translateX(70%)} }
@media (max-width:980px) {
  .effect-library-results { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .effect-library-modal-card { width:calc(100vw - 16px); height:calc(100vh - 16px); }
  .effect-preview-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .effect-preview-cell { height:105px; }
}

/* Review-first bitmap glyph sheet importer. */
.glyph-sheet-import-button { margin-top:2px; }
.glyph-sheet-modal { z-index:80; }
.glyph-sheet-modal-card {
  width:calc(100vw - 24px);
  height:calc(100vh - 24px);
  max-width:1680px;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.glyph-sheet-heading {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.glyph-sheet-heading h2 { margin:2px 0 3px; font-size:18px; }
.glyph-sheet-heading p { margin:0; color:var(--muted); font-size:10px; }
.glyph-sheet-heading > div:first-child { min-width:0; }
.glyph-sheet-heading p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glyph-sheet-heading-actions { display:flex; flex:none; align-items:center; gap:10px; }
.glyph-sheet-heading-actions .icon-button { min-height:34px; font-size:21px; }
.glyph-sheet-summary {
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}
.glyph-sheet-workspace {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
}
.glyph-sheet-stage-column {
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:#d8d7d2;
}
.glyph-sheet-stage-toolbar {
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-bottom:1px solid var(--line-strong);
  background:#f5f4f0;
}
.glyph-sheet-stage-message strong,
.glyph-sheet-stage-message span { display:block; }
.glyph-sheet-stage-message { min-width:0; }
.glyph-sheet-stage-message strong { font-size:11px; }
.glyph-sheet-stage-message span { margin-top:2px; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.glyph-sheet-stage-actions,
.glyph-sheet-inline-actions,
.glyph-sheet-box-actions,
.glyph-sheet-footer-actions { display:flex; align-items:center; gap:6px; }
.glyph-sheet-stage-actions button[aria-pressed=true] {
  background:#22211f;
  border-color:#22211f;
  color:#fff;
}
.glyph-sheet-viewport {
  min-width:0;
  min-height:0;
  overflow:auto;
  display:grid;
  place-items:start center;
  padding:22px;
  overscroll-behavior:contain;
}
.glyph-sheet-stage {
  position:relative;
  flex:none;
  background:#fff;
  box-shadow:0 2px 12px rgba(20,19,17,.18);
  user-select:none;
  touch-action:none;
}
.glyph-sheet-stage.is-adding { cursor:crosshair; }
#glyphSheetCanvas {
  display:block;
  width:100%;
  height:100%;
  image-rendering:auto;
}
.glyph-sheet-overlay { position:absolute; inset:0; }
.glyph-sheet-candidate {
  position:absolute;
  min-width:8px;
  min-height:8px;
  border:1.5px dashed #2369e8;
  background:rgba(35,105,232,.025);
  color:#fff;
  cursor:move;
}
.glyph-sheet-candidate:hover { background:rgba(35,105,232,.08); }
.glyph-sheet-candidate.is-selected {
  z-index:3;
  border-style:solid;
  border-color:var(--accent);
  background:rgba(255,92,53,.09);
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
}
.glyph-sheet-candidate.is-excluded {
  border-color:#8f8b84;
  background:rgba(90,88,82,.08);
  opacity:.68;
}
.glyph-sheet-candidate.has-error { border-color:var(--danger); }
.glyph-sheet-candidate-label {
  position:absolute;
  left:-1px;
  top:-22px;
  min-width:22px;
  max-width:90px;
  height:20px;
  display:grid;
  place-items:center;
  padding:2px 5px;
  overflow:hidden;
  border:1px solid #2369e8;
  border-radius:4px 4px 0 0;
  background:#2369e8;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.glyph-sheet-candidate.is-selected .glyph-sheet-candidate-label {
  border-color:var(--accent);
  background:var(--accent);
}
.glyph-sheet-candidate.is-excluded .glyph-sheet-candidate-label {
  border-color:#77736c;
  background:#77736c;
}
.glyph-sheet-resize-handle {
  position:absolute;
  width:10px;
  height:10px;
  border:1px solid #fff;
  border-radius:50%;
  background:#2369e8;
}
.glyph-sheet-candidate.is-selected .glyph-sheet-resize-handle { background:var(--accent); }
.glyph-sheet-resize-handle[data-sheet-handle=nw] { left:-6px; top:-6px; cursor:nwse-resize; }
.glyph-sheet-resize-handle[data-sheet-handle=ne] { right:-6px; top:-6px; cursor:nesw-resize; }
.glyph-sheet-resize-handle[data-sheet-handle=sw] { left:-6px; bottom:-6px; cursor:nesw-resize; }
.glyph-sheet-resize-handle[data-sheet-handle=se] { right:-6px; bottom:-6px; cursor:nwse-resize; }
.glyph-sheet-stage-tip {
  margin:0;
  padding:7px 12px;
  border-top:1px solid var(--line-strong);
  background:#efeee9;
  color:var(--muted);
  font-size:9px;
}
.glyph-sheet-controls {
  min-width:0;
  min-height:0;
  overflow:auto;
  border-left:1px solid var(--line);
  background:#faf9f6;
}
.glyph-sheet-control-section {
  display:grid;
  gap:9px;
  padding:13px;
  border-bottom:1px solid var(--line);
}
.glyph-sheet-control-section h3 { margin:2px 0 0; font-size:13px; }
.glyph-sheet-section-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.glyph-sheet-control-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.glyph-sheet-control-section label {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  color:var(--muted);
  font-size:9px;
}
.glyph-sheet-control-section input,
.glyph-sheet-control-section select,
.glyph-sheet-control-section textarea { width:100%; min-width:0; }
.glyph-sheet-range-label > span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.glyph-sheet-range-label output { color:var(--ink); font-weight:700; }
.glyph-sheet-range-label input[type=range] {
  min-height:20px;
  padding:0;
  border:0;
  box-shadow:none;
}
.glyph-sheet-inline-actions { justify-content:space-between; }
.glyph-sheet-inline-actions span {
  max-width:175px;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
  text-align:right;
}
.glyph-sheet-include-toggle {
  flex-direction:row !important;
  align-items:center;
  color:var(--ink) !important;
  white-space:nowrap;
}
.glyph-sheet-include-toggle input { width:auto; min-height:auto; }
.glyph-sheet-selected-preview-wrap {
  height:110px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
#glyphSheetSelectedPreview {
  display:block;
  max-width:100%;
  max-height:100%;
  image-rendering:auto;
}
.glyph-sheet-label-assignment {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:7px;
}
.glyph-sheet-label-assignment > label { min-width:0; }
.glyph-sheet-label-assignment > button {
  min-height:34px;
  padding-inline:10px;
  white-space:nowrap;
}
.glyph-sheet-box-fields {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}
.glyph-sheet-box-fields input { min-width:0; padding-inline:5px; }
.glyph-sheet-box-actions { display:grid; grid-template-columns:repeat(3,1fr); }
.glyph-sheet-footer {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  background:#fff;
}
.glyph-sheet-footer strong,
.glyph-sheet-footer span { display:block; }
.glyph-sheet-footer strong { font-size:11px; }
.glyph-sheet-footer span { margin-top:3px; color:var(--muted); font-size:9px; }
.glyph-sheet-footer-actions button { min-width:120px; }

.glyph-sheet-glyph-picker-modal {
  z-index:90;
  padding:16px;
}
.glyph-sheet-glyph-picker-card {
  width:min(920px,calc(100vw - 32px));
  height:min(760px,calc(100dvh - 32px));
  display:grid;
  grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto;
  gap:0;
  overflow:hidden;
  padding:0;
  border-radius:8px;
  background:#fff;
}
.glyph-sheet-glyph-picker-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
  gap:16px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
}
.glyph-sheet-glyph-picker-heading h2 {
  margin:2px 0 0;
  font-size:17px;
}
.glyph-sheet-glyph-picker-heading .icon-button {
  flex:none;
  min-height:34px;
  font-size:21px;
}
.glyph-sheet-glyph-picker-context {
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:90px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#f6f5f1;
}
#glyphSheetGlyphPickerPreview {
  display:block;
  width:116px;
  height:68px;
  border:1px solid var(--line);
  background:#fff;
  object-fit:contain;
}
.glyph-sheet-glyph-picker-context span,
.glyph-sheet-glyph-picker-context strong { display:block; }
.glyph-sheet-glyph-picker-context span {
  color:var(--muted);
  font-size:9px;
}
.glyph-sheet-glyph-picker-context strong {
  margin-top:4px;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.glyph-sheet-glyph-picker-search {
  gap:5px !important;
  padding:12px 14px 8px;
  color:var(--ink) !important;
  font-weight:700;
}
.glyph-sheet-glyph-picker-search input {
  width:100%;
  min-height:42px;
  font-size:13px;
}
.glyph-sheet-glyph-picker-filters {
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:0 14px 10px;
  scrollbar-width:thin;
}
.glyph-sheet-glyph-picker-filters button {
  flex:none;
  min-height:30px;
  padding:4px 9px;
  border-radius:4px;
  background:#fff;
  font-size:9px;
}
.glyph-sheet-glyph-picker-filters button.active {
  border-color:#22211f;
  background:#22211f;
  color:#fff;
}
.glyph-sheet-glyph-picker-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:30px;
  gap:12px;
  padding:6px 14px;
  border-block:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
}
.glyph-sheet-glyph-picker-meta span:first-child {
  color:var(--ink);
  font-weight:700;
}
.glyph-sheet-glyph-results {
  min-height:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  grid-auto-rows:116px;
  gap:6px;
  align-content:start;
  overflow:auto;
  padding:10px 14px 14px;
  background:#f6f5f1;
}
.glyph-sheet-glyph-result {
  position:relative;
  min-width:0;
  height:116px;
  display:grid;
  grid-template-rows:minmax(46px,1fr) auto auto;
  align-items:center;
  padding:8px 7px 7px;
  overflow:hidden;
  border-radius:5px;
  background:#fff;
  text-align:left;
}
.glyph-sheet-glyph-result:hover:not(:disabled),
.glyph-sheet-glyph-result.is-keyboard-target:not(:disabled) {
  border-color:var(--accent);
}
.glyph-sheet-glyph-result.is-current {
  border-color:#22211f;
  box-shadow:inset 0 0 0 1px #22211f;
}
.glyph-sheet-glyph-result:disabled {
  background:#efeee9;
  opacity:.55;
  cursor:not-allowed;
}
.glyph-sheet-glyph-result-character {
  max-width:100%;
  overflow:hidden;
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:30px;
  line-height:1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.glyph-sheet-glyph-result-name,
.glyph-sheet-glyph-result-unicode {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.glyph-sheet-glyph-result-name {
  color:var(--ink);
  font-size:9px;
  font-weight:700;
}
.glyph-sheet-glyph-result-unicode {
  color:var(--muted);
  font-size:8px;
}
.glyph-sheet-glyph-result-status {
  position:absolute;
  right:5px;
  top:5px;
  max-width:58px;
  overflow:hidden;
  padding:2px 4px;
  border-radius:3px;
  background:#e8e6df;
  color:var(--muted);
  font-size:7px;
  font-weight:700;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.glyph-sheet-glyph-result-status:empty { display:none; }
.glyph-sheet-glyph-picker-empty {
  padding:18px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  text-align:center;
}

@media (max-width:960px) {
  .glyph-sheet-modal-card { width:calc(100vw - 10px); height:calc(100vh - 10px); }
  .glyph-sheet-workspace { grid-template-columns:minmax(0,1fr) 290px; }
  .glyph-sheet-control-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .glyph-sheet-modal-card { width:100vw; height:100dvh; border:0; border-radius:0; }
  .glyph-sheet-workspace { grid-template-columns:1fr; grid-template-rows:minmax(280px,46vh) minmax(0,1fr); }
  .glyph-sheet-controls { border-left:0; border-top:1px solid var(--line); }
  .glyph-sheet-heading { min-height:60px; display:grid; grid-template-columns:minmax(0,1fr) 34px; padding:9px 10px; }
  .glyph-sheet-heading h2 { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
  .glyph-sheet-summary { display:none; }
  .glyph-sheet-heading-actions { width:34px; gap:0; }
  .glyph-sheet-stage-toolbar { min-width:0; }
  .glyph-sheet-stage-actions { flex:none; }
  .glyph-sheet-viewport { padding:14px; }
  .glyph-sheet-stage-tip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .glyph-sheet-footer { padding:8px 10px; }
  .glyph-sheet-footer > div:first-child { display:none; }
  .glyph-sheet-footer-actions { display:grid; grid-template-columns:minmax(82px,.75fr) minmax(0,1.4fr); width:100%; }
  .glyph-sheet-footer-actions button { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .glyph-sheet-glyph-picker-modal { padding:0; }
  .glyph-sheet-glyph-picker-card {
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .glyph-sheet-glyph-picker-context { grid-template-columns:88px minmax(0,1fr); }
  #glyphSheetGlyphPickerPreview { width:88px; height:58px; }
  .glyph-sheet-glyph-picker-meta span:last-child { display:none; }
  .glyph-sheet-glyph-results {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:106px;
    padding-inline:9px;
  }
  .glyph-sheet-glyph-result { height:106px; }
}