/* Dialogs (DESIGN.md 6.12: surface, 28 px radius, 24 px padding, scrim behind) for every modal the JS
 * builds: indicator picker + config, indicator sets, canvases, cross pair, colour picker, drawing
 * configs and the remove-all confirmation. Each keeps its own root id/class (JS hooks). */

/* ===================== Shared scrim + panel ===================== */
.indicator-config-dialog, .indicator-dialog,
#indicator-set-manager-modal, #canvas-manager-modal, #cross-pair-builder-modal,
.cp-dialog, .fib-config-overlay, .symbol-config-overlay, .drawings-remove-confirm-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); background: var(--scrim);
}
.indicator-config-dialog, .indicator-dialog { z-index: var(--z-dialog); }
.indicator-dialog { display: none; }
#indicator-set-manager-modal, #canvas-manager-modal, #cross-pair-builder-modal { z-index: var(--z-modal); }
.cp-dialog { z-index: var(--z-color-picker); }
.fib-config-overlay, .symbol-config-overlay, .drawings-remove-confirm-overlay { z-index: var(--z-dialog); }

.indicator-config-content, .indicator-dialog-content,
#indicator-set-manager-modal .indicator-set-manager, #canvas-manager-modal .canvas-manager,
#cross-pair-builder-modal .cross-pair-builder,
.cp-panel, .fib-config-panel, .symbol-config-panel, .drawings-remove-confirm-dialog {
  width: 100%; max-height: calc(100dvh - var(--space-xl)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border-radius: var(--radius-overlay);
}
.indicator-config-content, .indicator-dialog-content, #indicator-set-manager-modal .indicator-set-manager { max-width: 560px; }
#canvas-manager-modal .canvas-manager { max-width: 480px; padding: var(--space-lg); }
#cross-pair-builder-modal .cross-pair-builder { max-width: 400px; padding: var(--space-lg); }
#indicator-set-manager-modal .indicator-set-manager { padding: var(--space-lg); }

/* Headers: title-lg left, round close button right. */
.indicator-config-header, .indicator-dialog-header, .fib-config-header, .symbol-config-header, .cp-header,
#indicator-set-manager-modal .modal-header, #canvas-manager-modal .modal-header, #cross-pair-builder-modal .modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.indicator-config-header, .indicator-dialog-header, .fib-config-header, .symbol-config-header, .cp-header {
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}
#indicator-set-manager-modal .modal-header, #canvas-manager-modal .modal-header, #cross-pair-builder-modal .modal-header { margin-bottom: var(--space-md); }
.indicator-config-header h3, .indicator-dialog-header h3, .fib-config-title, .symbol-config-title, .cp-header,
#indicator-set-manager-modal .modal-header h2, #canvas-manager-modal .modal-header h2, #cross-pair-builder-modal .modal-header h2 {
  font-size: var(--fs-title-lg); font-weight: var(--fw-title-lg); color: var(--text);
}
.close-btn, .fib-config-close, .symbol-config-close, .cp-close-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--control-height); height: var(--control-height); padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text);
  font-size: var(--fs-headline-sm); line-height: 1; cursor: pointer;
}
.close-btn:hover, .fib-config-close:hover, .symbol-config-close:hover, .cp-close-btn:hover { background: var(--hover-wash); }

.indicator-config-body, .indicator-dialog-body { padding: var(--space-sm) var(--space-lg) var(--space-lg); }
.indicator-description { margin-bottom: var(--space-md); color: var(--text-secondary); font-size: var(--fs-body-md); }

/* ===================== Forms inside dialogs ===================== */
.indicator-config-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-field label { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.form-field input, .form-field select,
#indicator-set-manager-modal input[type="text"], #indicator-set-manager-modal select,
#cross-pair-builder-modal .cross-pair-row input, #canvas-manager-modal .canvas-row-name-input,
.symbol-config-num-field input, .text-config-textarea, .text-config-select, .text-config-size-input {
  width: 100%; min-height: var(--control-height); padding: var(--space-sm) var(--space-md);
  background: transparent; color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--radius-field); font-size: var(--fs-body-md);
}
.form-field input:focus, .form-field select:focus,
#indicator-set-manager-modal input:focus, #indicator-set-manager-modal select:focus,
#cross-pair-builder-modal input:focus, #canvas-manager-modal input:focus,
.symbol-config-num-field input:focus, .text-config-textarea:focus, .text-config-select:focus, .text-config-size-input:focus {
  border-color: var(--primary); outline: none;
}
.form-field select option, #indicator-set-manager-modal select option, .text-config-select option { background: var(--surface); }
.form-field input[type="range"] { padding: 0; border: 0; min-height: 24px; accent-color: var(--primary); }
.field-hint { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.opacity-value { color: var(--text-secondary); font-size: var(--fs-body-sm); margin-left: var(--space-sm); font-variant-numeric: tabular-nums; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }

/* Dialog actions are text buttons (DESIGN.md 6.12: "no filled buttons inside dialogs"): lime for
   confirm/cancel, red for destructive, dimmed when disabled. */
.cancel-btn, .add-btn, .save-btn, .delete-btn,
#indicator-set-manager-modal .btn, #canvas-manager-modal .btn, #cross-pair-builder-modal .btn {
  min-height: var(--control-height); min-width: 0; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer; filter: none;
}
.cancel-btn:hover, .add-btn:hover, .save-btn:hover, .delete-btn:hover,
#indicator-set-manager-modal .btn:hover, #canvas-manager-modal .btn:hover, #cross-pair-builder-modal .btn:hover { background: var(--hover-wash); filter: none; }
.delete-btn, #indicator-set-manager-modal .btn-danger { color: var(--error); }
/* Hierarchy without filled buttons (UX review 2026-10-14): the confirming action is lime, Cancel is
   neutral, and Delete sits apart on the left so it is never next to Save. */
.cancel-btn { color: var(--text-secondary); }
.cancel-btn:hover { color: var(--text); }
.form-actions .delete-btn { margin-right: auto; }
#indicator-set-manager-modal .btn:disabled, #canvas-manager-modal .btn:disabled, #cross-pair-builder-modal .btn:disabled,
.save-btn:disabled, .add-btn:disabled, .delete-btn:disabled { color: var(--disabled-text); background: transparent; cursor: default; }
#indicator-set-manager-modal .btn-sm { min-height: 32px; padding: var(--space-xs) var(--space-sm); }

.parameters-section, .appearance-section {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-md); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
}
.appearance-group, .multi-series-appearance { display: flex; flex-direction: column; gap: var(--space-md); }
.parameters-section h5, .appearance-section h5 { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); color: var(--text); }
.series-appearance { padding: var(--space-sm) var(--space-md); border: 1px solid var(--outline-variant); border-radius: var(--radius-field); }
.series-appearance h6 { margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: var(--fs-label-md); font-weight: var(--fw-label-md); }

/* ===================== Indicator picker ===================== */
.indicator-category { margin-bottom: var(--space-md); }
.indicator-category h4, .category-header h4 {
  margin: 0 0 var(--space-sm); color: var(--text); font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm);
}
.category-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.indicator-option { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.add-indicator-btn, .add-custom-indicator-btn {
  min-height: 32px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.add-indicator-btn:hover, .add-custom-indicator-btn:hover { background: var(--hover-wash); }
.new-indicator-btn {
  min-height: 32px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.new-indicator-btn:hover { background: var(--hover-wash); }
.category-list { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-sm); min-height: 32px; }
.no-indicators { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.active-indicator-item, .available-indicator-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: var(--touch-target); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); font-size: var(--fs-body-md);
}
.active-indicator-item .indicator-name, .available-indicator-item .indicator-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);
}
.available-indicator-item.active { border-color: var(--primary); }
/* Not-yet-added indicators read as normal text (they used to look disabled); the added ones carry the
   lime outline and an × instead of +. */
.available-indicator-item.inactive .indicator-name { color: var(--text); }
.indicator-actions { display: flex; gap: var(--space-xxs); flex-shrink: 0; }
.available-indicator-item .indicator-actions button, .active-indicator-item .indicator-actions button {
  display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height);
  padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary);
  font-size: var(--fs-body-md); cursor: pointer;
}
.available-indicator-item .indicator-actions button:hover, .active-indicator-item .indicator-actions button:hover { background: var(--hover-wash); color: var(--text); }
.available-indicator-item .remove-indicator-btn:hover, .active-indicator-item .remove-indicator-btn:hover { color: var(--error); }
.available-indicator-item .add-indicator-btn { color: var(--primary); }
.edit-indicator-btn { color: var(--text-secondary); }

/* ===================== Indicator sets (indicator-set-manager.js) ===================== */
#indicator-set-manager-modal .modal-content { display: flex; flex-direction: column; gap: var(--space-md); }
#indicator-set-manager-modal .section { display: flex; flex-direction: column; gap: var(--space-sm); }
#indicator-set-manager-modal .section h3 { font-size: var(--fs-title-md); font-weight: var(--fw-title-md); }
#indicator-set-manager-modal .section h4 { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); margin-top: var(--space-sm); }
#indicator-set-manager-modal .set-selector-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
#indicator-set-manager-modal .set-selector-row select { flex: 1 1 180px; width: auto; }
/* New Set / Delete Set sit at the right edge, also when they wrap below the selector on a phone. */
#indicator-set-manager-modal .set-selector-row #new-set-btn { margin-left: auto; }
#indicator-set-manager-modal .indicator-list {
  display: flex; flex-direction: column; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
}
#indicator-set-manager-modal .indicator-item {
  display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-target); max-width: none;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
  border: 0; border-bottom: 1px solid var(--outline-variant); border-radius: 0;
}
#indicator-set-manager-modal .indicator-item:last-child { border-bottom: 0; }
/* The name + type wrapper takes the free space so Add/Remove sit at the right edge on every row; long names truncate (full text in title). */
#indicator-set-manager-modal .indicator-item > .indicator-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#indicator-set-manager-modal .indicator-item > .btn { flex: 0 0 auto; margin-left: auto; }
#indicator-set-manager-modal .indicator-type { color: var(--text-secondary); font-size: var(--fs-body-sm); }
#indicator-set-manager-modal .empty-state { padding: var(--space-md); color: var(--text-secondary); font-size: var(--fs-body-sm); text-align: center; }
/* Save stays in view while the lists scroll, and says when there is something to save. */
#indicator-set-manager-modal .modal-footer {
  position: sticky; bottom: calc(-1 * var(--space-lg)); z-index: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm);
  margin: var(--space-sm) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg));
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  background: var(--surface); border-top: 1px solid var(--outline-variant);
}
#indicator-set-manager-modal .set-unsaved { color: var(--warning); font-size: var(--fs-body-sm); margin-right: auto; }
/* Taking an indicator out of a set is not destructive (nothing is deleted): neutral, not red. */
#indicator-set-manager-modal .indicator-item .remove-indicator-btn { color: var(--text-secondary); }
#indicator-set-manager-modal .indicator-item .remove-indicator-btn:hover { color: var(--text); }
#indicator-set-manager-modal .remove-indicator-btn, #indicator-set-manager-modal .add-indicator-btn { width: auto; height: auto; }

/* ===================== Canvases (canvas-manager.js) ===================== */
#canvas-manager-modal .canvas-list { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
#canvas-manager-modal .canvas-row {
  display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); cursor: pointer;
}
#canvas-manager-modal .canvas-row:hover { background: var(--surface-hover); }
/* Active canvas: lime outline, like the active profile card (DESIGN.md 6.19). */
#canvas-manager-modal .canvas-row.is-active { border-color: var(--primary); }
#canvas-manager-modal .canvas-row-name { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; font-weight: var(--fw-title-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#canvas-manager-modal .canvas-row-name-input { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: var(--space-xs) var(--space-sm); }
#canvas-manager-modal .canvas-row-count { flex-shrink: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
#canvas-manager-modal .canvas-row-actions { display: flex; gap: var(--space-xxs); flex-shrink: 0; }
#canvas-manager-modal .canvas-row-icon-btn {
  display: flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer;
}
#canvas-manager-modal .canvas-row-icon-btn:hover { background: var(--hover-wash); color: var(--text); }
#canvas-manager-modal .canvas-row-icon-btn:disabled { color: var(--disabled-text); background: transparent; cursor: default; }
#canvas-manager-modal .canvas-new-row { display: flex; justify-content: flex-end; }

/* ===================== Cross pair builder ===================== */
#cross-pair-builder-modal .modal-content { display: flex; flex-direction: column; gap: var(--space-sm); }
#cross-pair-builder-modal .cross-pair-hint { color: var(--text-secondary); font-size: var(--fs-body-md); margin-bottom: var(--space-sm); }
#cross-pair-builder-modal .cross-pair-row label { display: block; margin-bottom: var(--space-xs); color: var(--text-secondary); font-size: var(--fs-body-sm); }
#cross-pair-builder-modal .cross-pair-row input { text-transform: uppercase; }
#cross-pair-builder-modal .cross-pair-divider { text-align: center; color: var(--text-secondary); }
#cross-pair-builder-modal .cross-pair-preview { text-align: center; font-size: var(--fs-title-md); font-weight: var(--fw-title-md); padding: var(--space-sm) 0; }
#cross-pair-builder-modal .cross-pair-error { color: var(--error); font-size: var(--fs-body-sm); text-align: center; }
#cross-pair-builder-modal .cross-pair-actions { display: flex; justify-content: flex-end; }

/* ===================== Colour picker (color-picker.js) ===================== */
.cp-trigger {
  --cp-trigger-color: var(--text);
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--outline); cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(var(--cp-trigger-color), var(--cp-trigger-color)), repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%);
  background-size: 100% 100%, 8px 8px;
  -webkit-tap-highlight-color: transparent;
}
.cp-trigger--sm { width: 100%; height: 100%; background-image: none; border-color: transparent; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.cp-trigger--sm::before {
  content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--outline);
  background-image: linear-gradient(var(--cp-trigger-color), var(--cp-trigger-color)), repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%);
  background-size: 100% 100%, 6px 6px;
}
.cp-trigger:focus-visible { outline: var(--focus-ring-width) solid var(--primary); outline-offset: var(--focus-ring-gap); }
.cp-trigger--sm:focus-visible { outline-offset: -4px; }
.cp-panel { max-width: 340px; }
.cp-header { font-size: var(--fs-title-md); }
.cp-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg) var(--space-md); }
.cp-wheel-wrap { position: relative; width: 220px; height: 220px; }
.cp-wheel-canvas { display: block; border-radius: 50%; }
.cp-wheel-thumb {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border: 3px solid var(--text); outline: 1px solid var(--bg);
}
.cp-value-slider, .cp-alpha-slider { position: relative; width: 100%; height: 24px; border-radius: var(--radius-pill); }
.cp-alpha-slider { background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 12px 12px; }
.cp-alpha-slider-fill { position: absolute; inset: 0; border-radius: var(--radius-pill); pointer-events: none; }
.cp-slider-thumb {
  position: absolute; top: -2px; width: 28px; height: 28px; border-radius: 50%; transform: translateX(-50%); pointer-events: none;
  background: var(--text); border: 2px solid var(--bg);
}
.cp-presets { display: grid; grid-template-columns: repeat(5, 32px); gap: var(--space-sm); }
.cp-preset-swatch { width: 32px; height: 32px; padding: 0; appearance: none; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.cp-preset-swatch:focus-visible, .cp-wheel-wrap:focus-visible, .cp-value-slider:focus-visible, .cp-alpha-slider:focus-visible {
  outline: var(--focus-ring-width) solid var(--primary); outline-offset: var(--focus-ring-gap);
}
.cp-hex { width: 8em; text-align: center; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.cp-preset-swatch:hover { border-color: var(--text); }
.cp-preset-swatch--inherit { border-style: dashed; border-color: var(--text-secondary); background: transparent; }
.cp-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg) var(--space-lg); }
/* Dialog actions are lime text buttons (DESIGN.md 6.12). */
.cp-footer-btn {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.cp-footer-btn:hover { background: var(--hover-wash); }

/* ===================== Drawing configs (fib / symbol / text) ===================== */
.fib-config-panel { max-width: 480px; display: flex; flex-direction: column; }
.symbol-config-panel { max-width: 400px; display: flex; flex-direction: column; }
.fib-config-body, .symbol-config-body { flex: 1; overflow-y: auto; min-height: 0; }
.symbol-config-body { padding: var(--space-sm) var(--space-lg); }
.fib-level-row { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-target); padding: var(--space-xs) var(--space-lg); border-bottom: 1px solid var(--outline-variant); }
.fib-level-visible { background: none; border: 0; color: var(--text-secondary); padding: var(--space-xs); cursor: pointer; font-size: var(--fs-label-sm); line-height: 1; flex-shrink: 0; }
.fib-level-visible.is-on { color: var(--primary); }
.fib-level-label { flex: 1; font-size: var(--fs-body-md); color: var(--text); font-variant-numeric: tabular-nums; }
.fib-level-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--outline); cursor: pointer; flex-shrink: 0; padding: 0; }
.fib-style-btns, .fib-width-btns { display: flex; gap: var(--space-xxs); }
.fib-style-btn, .symbol-shape-btn, .fib-extended-chip {
  border: 1px solid var(--outline); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.fib-style-btn { border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); font-size: var(--fs-label-sm); line-height: 1; }
/* Selected option: neutral white pill (DESIGN.md 6.8 / 6.13). */
.fib-style-btn.is-active, .symbol-shape-btn.is-selected { background: var(--neutral-pill); color: var(--on-neutral-pill); border-color: transparent; }
.fib-level-delete { background: none; border: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); cursor: pointer; padding: var(--space-xxs) var(--space-xs); flex-shrink: 0; }
.fib-level-delete:hover { color: var(--error); }
.fib-level-palette { z-index: calc(var(--z-dialog) + 2); }
.fib-extended-section { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--outline-variant); }
.fib-extended-label, .symbol-config-label { margin-bottom: var(--space-sm); color: var(--text-secondary); font-size: var(--fs-body-sm); }
.fib-extended-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fib-extended-chip { border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); color: var(--text); font-size: var(--fs-label-md); }
.fib-extended-chip:hover { background: var(--hover-wash); }
.symbol-shape-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.symbol-shape-btn { width: 40px; height: 40px; padding: var(--space-sm); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.symbol-shape-btn svg { width: 100%; height: 100%; }
.symbol-shape-btn:hover { background: var(--hover-wash); }
.symbol-config-nums { display: flex; gap: var(--space-sm); }
.symbol-config-num-field { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.text-config-textarea { resize: vertical; margin-bottom: var(--space-md); font-family: inherit; }
.text-config-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.text-config-select { flex: 1; width: auto; }
.text-config-size-input { flex: 0 0 72px; width: 72px; }
.fib-config-footer, .symbol-config-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); flex-shrink: 0; }
.fib-footer-btn, .symbol-footer-btn {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.fib-footer-btn:hover, .symbol-footer-btn:hover { background: var(--hover-wash); }

/* ===================== Remove-all confirmation ===================== */
.drawings-remove-confirm-dialog { max-width: 360px; padding: var(--space-lg); }
.drawings-remove-confirm-dialog p { margin-bottom: var(--space-lg); color: var(--text); font-size: var(--fs-body-md); }
.drawings-remove-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); }
.drm-btn {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: transparent; font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.drm-btn:hover { background: var(--hover-wash); }
.drm-btn-cancel, .drm-btn-secondary { color: var(--primary); }
.drm-btn-danger { color: var(--error); }

@media (max-width: 559px) {
  .indicator-config-content, .indicator-dialog-content, .cp-panel, .fib-config-panel, .symbol-config-panel,
  #indicator-set-manager-modal .indicator-set-manager, #canvas-manager-modal .canvas-manager, #cross-pair-builder-modal .cross-pair-builder {
    border-radius: var(--radius-overlay);
  }
  #indicator-set-manager-modal .indicator-set-manager, #canvas-manager-modal .canvas-manager, #cross-pair-builder-modal .cross-pair-builder { padding: var(--space-md); }
  /* The footer bleeds to the panel edge by exactly the panel's padding, which is smaller here: with the
     desktop 24px it stuck out 8px and the panel scrolled sideways (Eva, P1-L7). */
  #indicator-set-manager-modal .modal-footer {
    bottom: calc(-1 * var(--space-md));
    margin: var(--space-sm) calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
}