/* ==========================================================
   PHFX 2026 - tools.css (tool pages only: <body data-page="toolPage">)
   Generated by make_toolscss.py from the old phfx_2026_V01.css - edit the generator, not this file.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@300;400;500&family=DM+Sans:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Michroma&family=Montserrat:wght@400;700&family=Roboto:wght@400;700&family=Oswald:wght@200;300;400;600;700&family=Hanken+Grotesque:wght@400;700&family=Bebas+Neue&family=Orbitron:wght@400;700&family=Space+Grotesk:wght@400;700&family=Work+Sans:wght@400;700&family=Arimo:wght@400;700&family=Cutive+Mono&family=Inconsolata:wght@400;700&family=Source+Code+Pro:wght@400;700&family=Fragment+Mono&family=Share+Tech+Mono&family=Oxygen+Mono&display=swap');

/* ---- 2. the old variable names, defined from the 2026 tokens (the Site Editor and light mode follow) ---- */
:root {
  --border: var(--surfaceBorder);
  --surface-hover: var(--heroStone);
  --text-muted: var(--textDim);
  --frame-bg: var(--toolStageBg);
  --frame-border: var(--stageFrameOne);
  --gold: var(--heroSite);
  --gold-dim: color-mix(in srgb, var(--heroSite) 15%, transparent);
  --current: var(--heroFoil);
  --current-dim: color-mix(in srgb, var(--heroFoil) 55%, transparent);
  --danger: var(--dlDangerColor, #eb1313);
  --danger-dim: color-mix(in srgb, var(--dlDangerColor, #eb1313) 8%, transparent);
  --danger-soft: #eb6d6d;
  --warning: #e0836e;
  --hover-accent: var(--linkHover);
  --icon-accent: var(--textDim);
  --success: #4caf50;
  --header-sep2: var(--dotColor);
  --symbol-compass-size: 32px;
  --symbol-theme-toggle-size: 24px;
  --symbol-watermark-default-pct: 50%;
  --symbol-watermark-default-max: 90px;
  --symbol-watermark-gallery-pct: 12%;
  --symbol-watermark-gallery-max: 640px;
  --symbol-watermark-formatcompare-pct: 12%;
  --symbol-watermark-formatcompare-max: 240px;
  --symbol-watermark-panoviewer-pct: 12%;
  --symbol-watermark-panoviewer-max: 240px;
  --symbol-watermark-formatchart-pct: 12%;
  --symbol-watermark-formatchart-max: 240px;
  --symbol-watermark-download-pct: 12%;
  --symbol-watermark-download-max: 640px;
  --symbol-contact-globe-size: 128px;
  --symbol-login-lock-size: 128px;
  --btn-export-bg: var(--surface);
  --btn-export-border: var(--border);
  --btn-export-fg: var(--text-muted);
  --btn-export-pad-y: 0.5rem;
  --btn-export-pad-x: 0.9rem;
  --btn-export-size: 0.75rem;
  --btn-export-tracking: 0.05em;
  --btn-export-radius: 0;
  --btn-export-hover-bg: var(--surface);
  --btn-export-hover-border: var(--gold);
  --btn-export-hover-fg: var(--gold);
  --btn-subdiv-bg: var(--surface);
  --btn-subdiv-border: var(--border);
  --btn-subdiv-fg: var(--text-muted);
  --btn-subdiv-pad-y: 0.45rem;
  --btn-subdiv-pad-x: 0.45rem;
  --btn-subdiv-radius: 0;
  --btn-ratio-bg: var(--surface);
  --btn-ratio-border: var(--border);
  --btn-ratio-fg: var(--text-muted);
  --btn-ratio-pad-y: 0.6rem;
  --btn-ratio-pad-x: 1.1rem;
  --btn-ratio-size: 0.78rem;
  --btn-ratio-tracking: 0.05em;
  --btn-ratio-radius: 0;
  --btn-wysiwyg-bg: var(--bg);
  --btn-wysiwyg-border: var(--border);
  --btn-wysiwyg-fg: var(--text);
  --btn-wysiwyg-pad-y: 0.45rem;
  --btn-wysiwyg-pad-x: 0.7rem;
  --btn-wysiwyg-size: 0.78rem;
  --btn-wysiwyg-tracking: 0.03em;
  --btn-wysiwyg-radius: 0;
  --btn-ldrow-bg: transparent;
  --btn-ldrow-border: var(--border);
  --btn-ldrow-fg: var(--text-muted);
  --btn-ldrow-pad-y: 0.15rem;
  --btn-ldrow-pad-x: 0.55rem;
  --btn-ldrow-size: 0.68rem;
  --btn-ldrow-tracking: 0.06em;
  --btn-ldrow-radius: 0;
  --btn-affirm-bg: transparent;
  --btn-affirm-border: var(--gold);
  --btn-affirm-fg: var(--gold);
  --btn-affirm-pad-y: 0.45rem;
  --btn-affirm-pad-x: 0.6rem;
  --btn-affirm-size: 0.75rem;
  --btn-affirm-tracking: 0.05em;
  --btn-affirm-radius: 0;
  --btn-affirm-hover-bg: var(--gold-dim);
  --btn-admin-bg: transparent;
  --btn-admin-border: var(--danger);
  --btn-admin-fg: var(--danger);
  --btn-admin-size: 0.85rem;
  --btn-admin-radius: 0;
  --btn-admin-hover-bg: var(--danger);
  --btn-admin-hover-fg: var(--bg);
  --btn-overlay-bg: rgba(0, 0, 0, 0.45);
  --btn-overlay-border: var(--border);
  --btn-overlay-fg: var(--text);
  --btn-overlay-pad-y: 0.3rem;
  --btn-overlay-pad-x: 0.55rem;
  --btn-overlay-size: 0.72rem;
  --btn-overlay-tracking: 0.04em;
  --btn-overlay-radius: 0;
}
/* tool text takes Site Editor > Body Text (the old --text was the same light grey) */
body[data-page="toolPage"] { --text: var(--bodyTextColor); }

/* ---- 4a. the container that replaces the old <main> (it was the page's centred flex column) ---- */
.toolMain { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3rem;
  font-family: 'Roboto', sans-serif; font-weight: 300; color: var(--text); }

/* ---- 3. the tool rules from the old stylesheet ---- */

.subtitle .current { color: var(--current); text-transform: uppercase; font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; }

.subtitle .name { color: var(--current); font-family: 'Roboto', sans-serif; font-size: 1rem; }

.controls-row { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: row; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: 0; background: var(--surface); }

.display-section { flex: 0 0 33.333%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 1.1rem 1.25rem; }

.display-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; display: inline-flex; align-items: center; gap: 0.4rem; }

.display-selector { display: flex; gap: 0.75rem; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-width: 0; }

.display-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; min-width: 0; transition: color 0.18s ease; }

.display-btn:hover { color: var(--text); }

.display-btn.active { color: var(--gold); }

.display-icon-inner { border: 1.5px solid currentColor; border-radius: 0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.03em; text-align: center; box-sizing: border-box; }

.display-selector:not(.rotated) .display-btn { flex: 0 1 135px; }

.display-selector:not(.rotated) .display-icon-inner { width: 100%; height: auto; }

.display-selector.rotated .display-btn { flex: 0 1 auto; }

.display-selector.rotated .display-icon-inner { width: auto; height: 135px; max-width: 100%; }

.subdiv-section { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; width: 100%; }

.subdiv-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; }

.subdiv-selector { display: grid; grid-template-columns: repeat(3, auto); gap: 0.5rem; justify-content: center; justify-items: center; }

.control-deck { width: 100%; max-width: 960px; margin: 0 auto; border: 1px solid var(--border); border-radius: 0; background: var(--surface); }

.deck-cols { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: clamp(0.6rem, 2.1vw, 1.25rem); padding: 1.1rem clamp(0.6rem, 2.1vw, 1.25rem); }

.deck-col { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }

.deck-col .subdiv-label { align-self: center; }

.deck-col-guide { flex: 0 0 auto; align-items: center; }

.deck-col-guide .subdiv-label { align-self: center; }

.deck-col-titles { flex: 1 1 160px; min-width: 140px; }

.deck-col-settings { flex: 1 1 160px; min-width: 140px; }

.deck-col-output { flex: 1 1 160px; min-width: 150px; }

.deck-divider { flex: 0 0 auto; align-self: stretch; width: 1px; background: var(--border); }

.deck-divider-h { width: 100%; height: 1px; background: var(--border); margin: 1rem 0; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; width: 100%; }

.settings-grid > .field { min-width: 0; }

.deck-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); }

.deck-actions-left,
.deck-actions-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.export-buttons,
.export-guide { display: flex; align-items: center; gap: 0.5rem; }

.res-readout { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: 0; padding: 0.5rem 0.75rem; background: var(--surface); font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text); white-space: nowrap; }

.res-readout[hidden] { display: none; }

.res-readout-label { color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.4rem; }

.res-readout-lead { color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

.res-readout-dsq .res-readout-lead { color: var(--current); }

.field { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; width: 100%; }

.field .text-input,
.field .export-select { width: 100%; box-sizing: border-box; }

.field-inline { display: flex; align-items: center; gap: 0.5rem; width: 100%; }

.field-row .extraction-range { flex: 1 1 auto; min-width: 0; }

.field-inline .extraction-range { flex: 1 1 auto; min-width: 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .deck-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1rem; }
  .deck-col { min-width: 0; }
  .deck-divider { display: none; }
  .deck-col-guide { align-items: center; }
  .deck-col-settings .field .export-select { width: auto; max-width: 100%; }
  .deck-actions { justify-content: center; }
  .deck-actions-right { flex-direction: column; align-items: center; }
}

.subdiv-btn { background: var(--btn-subdiv-bg, var(--surface)); border: 1px solid var(--btn-subdiv-border, var(--border)); color: var(--btn-subdiv-fg, var(--text-muted)); padding: var(--btn-subdiv-pad-y, 0.45rem) var(--btn-subdiv-pad-x, 0.45rem); cursor: pointer; border-radius: var(--btn-subdiv-radius, 0); transition: all 0.18s ease; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

.subdiv-btn svg { width: 26px; height: 26px; display: block; }

.subdiv-btn:hover { border-color: var(--gold); color: var(--text); }

.subdiv-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.export-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; }

.negfill-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; cursor: pointer; user-select: none; }

.negfill-check { accent-color: var(--gold); cursor: pointer; margin: 0; }

.export-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.75rem; padding: 0.5rem 0.6rem; border-radius: 0; cursor: pointer; }

.export-btn { background: var(--btn-export-bg, var(--surface)); border: 1px solid var(--btn-export-border, var(--border)); color: var(--btn-export-fg, var(--text-muted)); font-family: 'Roboto', sans-serif; font-size: var(--btn-export-size, 0.75rem); letter-spacing: var(--btn-export-tracking, 0.05em); padding: var(--btn-export-pad-y, 0.5rem) var(--btn-export-pad-x, 0.9rem); cursor: pointer; border-radius: var(--btn-export-radius, 0); transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; }

.export-btn:hover { background: var(--btn-export-hover-bg, var(--surface)); border-color: var(--btn-export-hover-border, var(--gold)); color: var(--btn-export-hover-fg, var(--gold)); }

.extraction-range { accent-color: var(--gold); width: 110px; cursor: pointer; }

.extraction-value { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--gold); min-width: 2.8em; text-align: left; }

.text-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.03em; padding: 0.4rem 0.5rem; border-radius: 0; width: 9.5rem; max-width: 40vw; }

.text-input::placeholder { color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }

.text-input:focus { outline: none; border-color: var(--gold); }

.ta-input { width: 100%; max-width: none; resize: vertical; min-height: 4.2rem; line-height: 1.4; font-family: 'Roboto', sans-serif; }

.frame-text { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; line-height: 1.15; z-index: 3; display: none; }

.frame-title,
.frame-note { color: #ebebeb; }

.frame-note { margin-top: 0.2em; }

.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 1.1rem; }

.rotate-icon { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; line-height: 1; transition: color 0.18s ease, transform 0.18s ease; }

.rotate-icon:hover { color: var(--text); }

.rotate-icon.active { color: var(--gold); }

.ratio-section { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; flex: 0 0 33.333%; min-width: 0; padding: 1.1rem 1.25rem; border-left: 1px solid var(--border); }

.info-section-top { flex: 0 0 33.333%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: 1.1rem 1.25rem; border-left: 1px solid var(--border); }

.info-section-top .info-item { display: flex; flex-direction: column; gap: 0.3rem; }

.info-section-top .info-section-hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--border); }

.ratio-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; display: inline-flex; align-items: center; gap: 0.4rem; }

.ratio-dd { position: relative; min-width: 200px; max-width: 100%; }

.ratio-section .ff-custom-ratio { width: 200px; max-width: 100%; box-sizing: border-box; text-align: center; }

.ratio-dd-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; padding: 0.5rem 0.7rem; border-radius: 0; cursor: pointer; text-align: left; transition: border-color 0.18s ease; }

.ratio-dd-trigger:hover,
.ratio-dd.open .ratio-dd-trigger { border-color: var(--gold); }

.ratio-dd-caret { flex: none; color: var(--text-muted); transition: transform 0.18s ease; }

.ratio-dd.open .ratio-dd-caret { transform: rotate(180deg); }

.ratio-dd-list { position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 100; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: none; }

.ratio-dd.open .ratio-dd-list { display: block; }

.ratio-dd.up .ratio-dd-list { top: auto; bottom: calc(100% + 3px); }

.ratio-dd-list::-webkit-scrollbar { width: 8px; }

.ratio-dd-list::-webkit-scrollbar-track { background: transparent; }

.ratio-dd-list::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--surface); }

.ratio-dd-list::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.ratio-dd-option { padding: 0.45rem 0.7rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text); cursor: pointer; }

.ratio-dd-option.selected { color: var(--text); }

.ratio-dd-option:hover,
.ratio-dd-option.selected:hover { background: var(--gold); color: var(--surface); }

.custom-dd.is-disabled { opacity: 0.4; pointer-events: none; }

.custom-dd-option.is-disabled { opacity: 0.5; cursor: not-allowed; }

.ff-stage .deck-actions-left > .custom-dd { flex: 0 0 auto; }

.ff-stage .deck-actions-left > .export-select { width: 5rem; }

.ff-stage .export-guide .export-select { width: 10rem; }

.ff-theme-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; }

.ff-theme-field .custom-dd { flex: 0 0 auto; }

.ff-theme-field .export-select { width: 6.5rem; }

.custom-dd.open .custom-dd-trigger { border-color: var(--gold); }

.custom-dd.open .custom-dd-caret { transform: rotate(180deg); }

.custom-dd.open .custom-dd-list { display: block; }

.custom-dd.up .custom-dd-list { top: auto; bottom: calc(100% + 3px); }

.custom-dd-option.selected { color: var(--text); }

.custom-dd-option.selected:hover { background: var(--gold); color: var(--surface); }

.ratio-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.ratio-btn.active::before { opacity: 1; }

.stage { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: -1.5rem; }

.preview-summary .em { color: var(--gold); font-weight: 400; }

.frame-bounds { width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; display: flex; align-items: center; justify-content: center; }

.preview-row { width: 100%; max-width: 960px; display: flex; flex-direction: row; align-items: flex-start; gap: 1.5rem; }

.preview-row .info-section { flex: 0 0 33.333%; width: auto; align-items: stretch; }

.preview-row .frame-bounds { flex: 1 1 0; min-width: 0; width: auto; }

@media (max-width: 760px) and (min-width: 761px) {
  .controls-row { flex-direction: column; align-items: center; gap: 1rem; }
  .controls-row .display-section,
  .controls-row .ratio-section { flex: none; width: 100%; }
  .controls-row .display-selector { min-height: 135px; }
  .controls-row .ratio-section { border-left: none; border-top: 1px solid var(--border); }
  .preview-row { flex-direction: column; align-items: center; }
  .preview-row .info-section { flex: none; width: 100%; }
  .preview-row .frame-bounds { width: 100%; flex: none; }
}

.frame-wrapper { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background-color: var(--frame-bg); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(235, 208, 129, 0.5); border-radius: 0; }

.frame { border: 1.5px solid rgba(var(--guide-rgb, 235, 208, 129), var(--frame-border-alpha, 1)); background: transparent; box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--negfill-alpha, 0.5)); position: relative; transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.45s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }

.frame-guides { position: absolute; inset: 0; pointer-events: none; }

.frame-logo { position: absolute; right: 8px; bottom: 8px; width: var(--symbol-watermark-default-pct, 12%); max-width: var(--symbol-watermark-default-max, 640px); height: auto; pointer-events: none; }

.frame-logo-left { right: auto; left: 8px; }

.data-row { width: 100%; display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }

.data-row .info-section { flex: 1 1 260px; }

.data-row .res-section { flex: 2 1 380px; }

.info-panel { display: grid; grid-template-columns: 1fr; gap: 1px; width: 100%; background: var(--border); border: 1px solid var(--border); border-radius: 0; overflow: hidden; }

.info-panel-row { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }

@media (max-width: 600px) and (min-width: 761px) {
  .info-panel-row { grid-template-columns: 1fr; }
}

.info-cell { background: var(--surface); padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }

.info-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; }

.info-value { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text); font-weight: 700; transition: color 0.2s ease; }

.info-value.highlight { color: var(--gold); }

.res-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }

.data-row .info-section,
.data-row .res-section { flex: 1 1 0; width: auto; min-width: 0; }

@media (max-width: 600px) and (min-width: 761px) {
  .data-row { flex-direction: column; }
  .data-row .info-section,
  .data-row .res-section { flex: none; width: 100%; }
}

.res-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Roboto', sans-serif; }

.res-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 0; }

.res-table { width: 100%; border-collapse: collapse; font-family: 'Roboto', sans-serif; font-size: 0.75rem; background: var(--surface); }

.res-table th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding: 0.65rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--bg); white-space: nowrap; text-align: left; }

.res-table td { padding: 0.55rem 1.1rem; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; }

.res-table tr:last-child td { border-bottom: none; }

.res-table th:not(:first-child),
.res-table td:not(:first-child) { text-align: right; }

.res-table .tier { color: var(--gold); font-weight: 700; }

.res-table .res-container { color: var(--text-muted); }

.grain-filter { position: absolute; width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  .frame,
  .info-value,
  .fc-rect,
  .fc-stage { transition: none; }
}

.fc-page { justify-content: flex-start; gap: 1rem; }

.fc-controls { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }

.fc-format-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 1.25rem; }

.fc-format-divider { align-self: stretch; width: 1px; background: var(--border); }

.fc-format-col { display: flex; flex-direction: column; gap: 0.75rem; }

.fc-anamorphic { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.25rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }

.fc-col-head { display: flex; align-items: center; gap: 0.6rem; }

.fc-col-title { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.04em; }

.fc-col-title.fc-two,
.fc-spec-title.fc-two { color: var(--current); }

.fc-col-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }

.fc-col-head .rotate-icon { margin-left: auto; }

.fc-format-col .fc-col-head .rotate-icon { margin-left: 0; order: 1; }

.fc-format-col .fc-col-head .fc-col-sub { margin-left: auto; order: 2; }

.fc-fields { display: flex; flex-direction: row; gap: 0.5rem; }

.fc-fields .fc-field { flex: 1 1 0; min-width: 0; }

.fc-field { display: flex; flex-direction: column; gap: 0.25rem; }

.fc-field-label { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; }

.fc-field .export-select { width: 100%; }

.fc-focal-input { width: 100%; max-width: none; }

.fc-focal .fc-field { flex-direction: row; align-items: center; gap: 0.6rem; }

.fc-focal .fc-field-label { white-space: nowrap; }

.fc-focal .fc-focal-input { width: auto; flex: 1 1 auto; min-width: 0; }

.fc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.fc-focal-row { display: flex; gap: 1.25rem; align-items: flex-end; }

.fc-focal-row .fc-focal { flex: 1 1 50%; min-width: 0; }

.fc-focal-row .fc-actions { flex: 1 1 50%; justify-content: flex-end; }

.fc-preview-row { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 960px; margin: 0 auto; align-items: center; }

.fc-stage-wrap { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

.fc-stage { position: relative; width: 100%; max-width: 960px; overflow: hidden; transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.fc-rect { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.fc-rect-a { z-index: 1; border: 1.5px solid var(--frame-border); background-color: #0a0a0a; background-size: cover; background-position: center; background-repeat: no-repeat; }

.fc-rect-b { z-index: 2; border: 1.5px solid var(--current); background: transparent; }

.fc-rect-desq { background: transparent; border: 1.5px dotted; }

.fc-rect-ext { background: transparent; border: 1.5px dashed; transition: none; }

.fc-rect-ext[hidden] { display: none; }

.fc-rect-ext-a { border-color: var(--frame-border); z-index: 5; }

.fc-rect-ext-b { border-color: var(--current); z-index: 6; }

.fc-rect-ext-a .fc-rect-tag { color: #0a0a0a; background: var(--frame-border); top: 0; bottom: auto; left: auto; right: 0; }

.fc-rect-ext-b .fc-rect-tag { color: #0a0a0a; background: var(--current); top: auto; bottom: 0; left: 0; right: auto; }

.fc-rect-desq-a { border-color: var(--frame-border); z-index: 3; }

.fc-rect-desq-b { border-color: var(--current); z-index: 4; }

.fc-rect-tag { position: absolute; top: 0; left: 0; white-space: nowrap; font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; padding: 0.05rem 0.4rem; line-height: 1.3; }

.fc-rect-a .fc-rect-tag,
.fc-rect-desq-a .fc-rect-tag { color: #0a0a0a; background: var(--frame-border); }

.fc-rect-b .fc-rect-tag,
.fc-rect-desq-b .fc-rect-tag { color: #0a0a0a; background: var(--current); top: auto; bottom: 0; left: auto; right: 0; }

:root[data-theme="light"] .fc-rect-a { background-color: #0a0a0a; }

:root[data-theme="light"] .fc-stage-cap { color: var(--text-muted); }

:root[data-theme="light"] .fc-rect-b,
:root[data-theme="light"] .fc-rect-desq-b { border-color: #81ebeb; }

:root[data-theme="light"] .fc-rect-a .fc-rect-tag,
:root[data-theme="light"] .fc-rect-ext-a .fc-rect-tag,
:root[data-theme="light"] .fc-rect-desq-a .fc-rect-tag { background: #ebd081; }

:root[data-theme="light"] .fc-rect-b .fc-rect-tag,
:root[data-theme="light"] .fc-rect-ext-b .fc-rect-tag,
:root[data-theme="light"] .fc-rect-desq-b .fc-rect-tag { background: #81ebeb; }

.fc-extract-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; }

.fc-extract-slider { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }

.fc-extract-slider .extraction-range { flex: 1 1 auto; min-width: 0; }

.fc-extract-slider .extraction-value { flex: 0 0 2.6rem; text-align: right; }

.fc-extract-ratio { flex: 0 0 9rem; }

.fc-match-btn { flex: 0 0 auto; white-space: nowrap; order: 2; margin-left: auto; background: none; border: 1px solid currentColor; border-radius: 0; padding: 0 0.6rem; height: 1.6rem; font-family: 'Roboto', sans-serif; font-size: var(--btn-export-size, 0.75rem); letter-spacing: var(--btn-export-tracking, 0.05em); line-height: 1; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; }

#matchA { color: var(--current); }

#matchB { color: var(--gold); }

#matchA:hover { background: var(--current); color: var(--bg); }

#matchB:hover { background: var(--gold); color: var(--bg); }

.fc-match-btn.is-matched,
.fc-match-btn:disabled,
#matchA:disabled,
#matchB:disabled { color: var(--text-muted); border-color: var(--border); cursor: default; }

.fc-match-btn:disabled:hover,
#matchA:disabled:hover,
#matchB:disabled:hover { background: none; color: var(--text-muted); }

.fc-match-btn[hidden] { display: none; }

.fc-extract-custom { width: 100%; max-width: none; margin-top: 0.4rem; }

.fc-extract-custom[hidden] { display: none; }

.fc-logo { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: var(--symbol-watermark-formatcompare-pct, 10%); max-width: var(--symbol-watermark-formatcompare-max, 200px); height: auto; pointer-events: none; }

.fc-stage-cap { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); text-align: center; letter-spacing: 0.04em; line-height: 1.4; }

.fc-sheet { width: 100%; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: start; }

.fc-sheet .fc-span { grid-column: 1 / -1; }

.fc-stack { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.fc-spec { border: 1px solid var(--border); background: var(--surface); padding: 0.85rem 1rem; }

.fc-spec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }

.fc-spec-title { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.04em; }

.fc-spec-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

.fc-spec-name { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text); margin-bottom: 0.5rem; line-height: 1.4; }

.fc-spec-rows { display: flex; flex-direction: column; gap: 0.25rem; }

.fc-row { display: flex; justify-content: space-between; gap: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.75rem; }

.fc-row > span:first-child { color: var(--text-muted); }

.fc-row > span:last-child { color: var(--text); text-align: right; }

.fc-crop .fc-row > span:last-child { color: var(--current); }

.fc-spec-divider { border: 0; border-top: 1px solid var(--border); margin: 0.4rem 0; }

.fc-sp-links { display: flex; flex-direction: column; gap: 0.5rem; }

.fc-sp-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.04em; text-decoration: none; color: var(--gold); border: 1px solid var(--border); background: var(--surface); padding: 0.5rem 0.7rem; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; }

.fc-sp-link.fc-two { color: var(--current); }

.fc-sp-link:hover { border-color: var(--gold); background: var(--gold-dim); }

.fc-sp-link.fc-two:hover { border-color: var(--current); background: rgba(129, 235, 235, 0.12); }

.fc-sp-arrow { font-size: 0.95rem; line-height: 1; }

.fc-note { margin-top: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

.fc-focal-intro { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text); line-height: 1.5; margin-bottom: 0.6rem; }

.fc-focal-list { display: flex; flex-direction: column; gap: 0.45rem; }

.fc-focal-line { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

.fc-focal-src { font-family: 'Roboto', sans-serif; color: var(--gold); }

.fc-focal-eq { font-family: 'Roboto', sans-serif; color: var(--current); }

@media (max-width: 760px) and (min-width: 761px) {
  .fc-format-grid { grid-template-columns: 1fr; }
  .fc-format-divider { display: none; }
  .fc-sheet { grid-template-columns: 1fr; }
  .fc-focal-row { flex-direction: column; align-items: stretch; }
  .fc-focal-row .fc-focal,
  .fc-focal-row .fc-actions { flex: none; }
  .fc-focal-row .fc-actions { justify-content: flex-end; }
}

@media (max-width: 480px) and (min-width: 761px) {
  .fc-fields { flex-direction: column; }
  .sp-opts-row,
  .sp-lensfocal-row,
  .sp-lf-stack { flex-direction: column; }
  .sp-lensfocal-row .sp-deck-divider { display: none; }
  .sp-fov-item { flex-basis: calc((100% - 0.5rem) / 2); }
}

.sp-setup { display: grid; grid-template-columns: 1.6fr 1px 1fr; gap: 1.25rem; }

.sp-deck-divider { flex: 0 0 auto; align-self: stretch; width: 1px; background: var(--border); }

.sp-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.sp-opts-row { display: flex; gap: 0.5rem; }

.sp-opts-row .fc-field { flex: 1 1 0; min-width: 0; }

.sp-lensfocal-row { display: flex; gap: 1.25rem; align-items: flex-start; }

.sp-lf-stack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; gap: 0.75rem; }

.sp-lf-stack .fc-field { flex: 1 1 0; min-width: 0; }

.sp-col-format .fc-col-head .rotate-icon { margin-left: 0; }

.sp-ratio-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.sp-ratio-field .fc-field-label { display: inline-flex; align-items: center; gap: 0.4rem; }

.sp-ratio-field .sp-ratio-controls { width: 100%; }

.sp-ratio-field .sp-ratio-select { flex: 1 1 auto; min-width: 0; }

.sp-ratio-field .sp-ratio-controls > .custom-dd { flex: 1 1 auto; min-width: 6rem; }

.sp-ratio-field .sp-ratio-controls .sp-custom-ratio { flex: 0 0 6.5rem; width: 6.5rem; max-width: 6.5rem; text-align: center; }

.sp-opts-row .text-input,
.sp-lensfocal-row .text-input { width: 100%; max-width: none; }

.sp-sheet { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.75rem; }

.sp-sheet .fc-span { grid-column: 1 / -1; }

.sp-vis { margin-top: 0.85rem; display: flex; justify-content: center; }

.sp-vis svg { width: 100%; max-width: 340px; height: auto; display: block; }

.sp-visbox { display: flex; flex-direction: column; }

.sp-visbox .sp-vis { flex: 1 1 auto; align-items: center; margin-top: 0.5rem; }

.sp-legend-title { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--current); margin: 0.85rem 0 0.45rem; }

.sp-legend { display: flex; flex-direction: column; gap: 0.4rem; }

.sp-leg-item { display: flex; align-items: center; gap: 0.5rem; }

.sp-leg-swatch { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }

.sp-leg-label { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); }

.sp-fov-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sp-fov-item { flex: 0 0 calc((100% - 2.5rem) / 6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; padding: 0.85rem 0.65rem; border: 1px solid var(--border); background: var(--frame-bg); min-width: 0; }

.sp-fov-type { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.04em; }

.sp-fov-focal { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--current); }

.sp-fov-val { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); }

.sp-fov-val b { color: var(--text); font-weight: 600; }

.sp-fov-stage { margin-top: 0.4rem; padding-top: 0.4rem; width: 100%; border-top: 1px solid var(--border); font-family: 'Roboto Mono', monospace; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none; transition: color 0.18s ease; }

.sp-fov-stage:hover { color: var(--gold); }

.sp-fov-stage-next { margin-top: 0.15rem; padding-top: 0; border-top: 0; }

.sp-fov-head-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.sp-fov-toggle { line-height: 1; white-space: nowrap; }

.frame-fov-label { position: absolute; pointer-events: none; }

.sp-stage { margin-top: 0; gap: 1rem; }

.ff-stage { margin-top: 0; }

.ff-stage .frame-logo { filter: none; }

.ff-stage .frame-title,
.ff-stage .frame-note { text-shadow: none; }

.sp-page .frame-wrapper { transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.sp-page .frame-bounds { transition: aspect-ratio 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.sp-page .frame-logo { filter: none; }

.sp-page .frame-title,
.sp-page .frame-note { text-shadow: none; }

.sp-page .deck-actions-right { justify-content: flex-end; }

.sp-page .sp-export-group { display: flex; align-items: center; gap: 0.5rem; }

.sp-page .sp-export-group .export-select { width: 9rem; }

.sp-sheet-row { width: 100%; display: flex; justify-content: center; }

.sp-ratio-select { min-width: 180px; }

.sp-ratio-controls { display: flex; gap: 0.5rem; align-items: center; }

.export-select:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 760px) and (min-width: 761px) {
  .sp-setup { grid-template-columns: 1fr; }
  .sp-setup .sp-deck-divider { display: none; }
  .sp-sheet { grid-template-columns: 1fr; }
  .sp-fov-item { flex-basis: calc((100% - 1rem) / 3); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-page .frame-wrapper { transition: none; }
  .sp-page .frame-bounds { transition: none; }
}

.dr-page { justify-content: flex-start; gap: 1.5rem; }

.dr-col-source { flex: 1.3 1 220px; }

.dr-col-rate { flex: 1 1 150px; }

.dr-col-duration { flex: 1.5 1 250px; }

.dr-controls .text-input { width: 100%; max-width: none; }

.dr-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; }

.dr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }

.dr-hint { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; }

.dr-output { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

.dr-summary { margin: 0; }

.dr-output .res-section { align-items: stretch; border: 1px solid var(--border); background: var(--surface); border-radius: 0; padding: 1.1rem 1.25rem; }

.dr-output .res-section[hidden] { display: none; }

.dr-output .res-label { text-align: left; }

.dr-table-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; flex-wrap: wrap; }

.dr-head-stacked { flex-direction: column; align-items: stretch; gap: 0.6rem; }

.dr-delivery { display: inline-flex; align-items: center; gap: 0.5rem; }

.dr-delivery .fc-field-label { white-space: nowrap; }

.dr-delivery .export-select { width: auto; }

.dr-delivery-group { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

#drNote { margin-top: -1rem; }

.dr-storage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; align-items: end; }

.dr-storage-grid .text-input,
.dr-storage-grid .export-select { width: 100%; max-width: none; }

.dr-storage-note { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; line-height: 1.4; text-align: center; }

.dr-storage-toggle { width: 100%; margin-top: 0.2rem; }

.dr-storage-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.dr-storage-toggle.is-on { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

#costResult { display: flex; flex-direction: column; gap: 0.85rem; }

#costResult[hidden] { display: none; }

.dr-fill-field { gap: 0.5rem; }

.dr-fill-cap { color: var(--gold); }

.dr-fill-range { width: 100%; }

.dr-cost-panel { grid-template-columns: repeat(4, 1fr); }

.dr-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.dr-page input[type="number"]::-webkit-inner-spin-button,
.dr-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.dr-stepper { position: relative; display: block; width: 100%; }

.dr-stepper .text-input { width: 100%; max-width: none; padding-right: 1.9rem; }

.dr-stepper-btns { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 1.5rem; display: flex; flex-direction: column; border-left: 1px solid var(--border); overflow: hidden; }

.dr-step { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none; background: var(--surface); color: var(--text); font-size: 0.5rem; line-height: 1; cursor: pointer; transition: background 0.12s ease; }

.dr-step:hover { background: var(--border); }

.dr-step:active { background: var(--bg); }

.dr-step-up { border-bottom: 1px solid var(--border); }

@media (max-width: 760px) and (min-width: 761px) {
  .dr-storage-grid { grid-template-columns: 1fr 1fr; }
  .dr-cost-panel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 440px) and (min-width: 761px) {
  .dr-storage-grid { grid-template-columns: 1fr; }
  .dr-cost-panel { grid-template-columns: 1fr; }
}

.dof-page .deck-col { flex: 1 1 200px; }

.dof-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.dof-specs { display: flex; flex-direction: column; gap: 0.4rem; }

.dof-spec { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 0.75rem; align-items: baseline; }

.dof-spec-label { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text-muted); }

.dof-spec-value { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text); }

.dof-page .res-table-wrap { overflow-x: auto; }

.dof-table { width: 100%; }

.dof-diff-flag { color: var(--gold); }

.dof-table-note { margin-top: 0.6rem; }

.dof-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem 1rem; width: 100%; flex-wrap: wrap; }

.dof-units-note { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; }

.dof-lens-note { margin-top: 0.85rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

.dof-about-btn { width: 100%; }

.dof-samp-lock { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--gold); }

.dof-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.dof-modal[hidden] { display: none; }

.dof-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }

.dof-modal-box { position: relative; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--gold); padding: 1.5rem 1.75rem; }

.dof-modal-close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem; transition: color 0.18s ease; }

.dof-modal-close:hover { color: var(--gold); }

.dof-modal-title { font-family: 'Roboto', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--gold); margin: 0 1.5rem 0.9rem 0; }

.dof-modal-body { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 0.85rem; line-height: 1.55; color: var(--text); display: flex; flex-direction: column; gap: 0.7rem; }

.dof-modal-body strong { color: var(--gold); font-weight: 500; }

.dof-modal-body ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }

.dof-modal-body a { color: var(--gold); font-family: 'Roboto', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; transition: color 0.18s ease; }

.dof-modal-body a:hover,
.dof-modal-body a:focus-visible { text-decoration: underline; }

.dof-modal-sign { font-family: 'Roboto', sans-serif; color: var(--gold); text-align: right; letter-spacing: 0.05em; margin-top: 0.3rem; }

@media (max-width: 760px) and (min-width: 761px) {
  .dof-info-row { grid-template-columns: 1fr; }
}

.lp-page .deck-col { flex: 1 1 210px; }

.lp-info-row { display: flex; gap: 1.5rem; align-items: stretch; }

.lp-info-row > .res-section { flex: 1 1 0; min-width: 0; }

.lp-info-row > #lpFormatCard { flex-grow: 55; }

.lp-info-row > #lpLensCard { flex-grow: 45; }

.lp-setup .deck-col { gap: 0.4rem; }

.lp-inline-fields { display: flex; align-items: flex-start; gap: 0.75rem; }

.lp-inline-fields > .fc-field { flex: 1 1 0; min-width: 0; }

.lp-inline-fields > .fc-field > .export-select,
.lp-inline-fields > .fc-field > .text-input { width: 100%; min-width: 0; max-width: none; }

.lp-ratio-field { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }

.lp-ratio-field .fc-field-label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

.lp-ratio-controls { display: flex; align-items: center; gap: 0.5rem; width: 100%; }

.lp-ratio-controls .lp-ratio-select { flex: 1 1 auto; min-width: 0; }

.lp-ratio-controls .lp-custom-ratio { flex: 0 0 6.5rem; width: 6.5rem; max-width: 6.5rem; text-align: center; }

.lp-ratio-controls .lp-custom-ratio[hidden] { display: none; }

.lp-slider-field { display: flex; flex-direction: column; gap: 0.15rem; }

.lp-extraction-field { margin-top: 0.4rem; }

.lp-slider-field .field-inline { display: flex; align-items: center; gap: 0.5rem; }

.lp-slider-field .extraction-range { flex: 1 1 auto; min-width: 6rem; }

.lp-slider-field .extraction-value { min-width: 4.6rem; text-align: right; font-family: 'Roboto Mono', monospace; font-size: 0.78rem; color: var(--text-muted); }

.lp-ratio-field .rotate-icon.active,
.lp-page .fc-col-head .rotate-icon.active { color: var(--gold); }

.lp-page .fc-col-head .rotate-icon { margin-left: 0; }

.ss-page .fc-col-head .rotate-icon { margin-left: 0; }

.lp-ratio-field .rotate-icon:disabled { opacity: 0.35; cursor: not-allowed; }

.lp-handoff { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }

.lp-format-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: nowrap; width: 100%; }

.lp-format-row .dof-specs { flex: 1 1 auto; min-width: 0; }

.lp-format-row .dof-spec { grid-template-columns: minmax(100px, 32%) 1fr; gap: 0.6rem; }

.lp-frame { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }

.lp-frame-box { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }

.lp-frame-native { position: relative; border: 1px solid var(--border); background: var(--bg); }

.lp-frame-extract { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--gold-dim); border: 1px solid var(--gold); }

.lp-frame-punch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed var(--current); }

.lp-frame-punch[hidden] { display: none; }

@media (max-width: 760px) and (min-width: 761px) {
  .lp-info-row { flex-direction: column; }
}

.lp-page .res-table-wrap { overflow-x: auto; }

.lp-table { width: 100%; }

.lp-framing { color: var(--text-muted); }

.lp-fit-note { margin-top: 0.6rem; }

.lp-divider { border: 0; border-top: 1px solid var(--border); width: 100%; margin: 0; }

.lp-table tr.lp-sel td { background: var(--gold-dim); }

.lp-page .text-input:disabled { opacity: 0.45; cursor: not-allowed; }

.lp-page .dr-step:disabled { opacity: 0.4; cursor: not-allowed; }

.lp-focal-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; }

.lp-focal-slider { accent-color: var(--gold); cursor: pointer; flex: 1 1 auto; min-width: 0; }

.lp-focal-row .dr-stepper { flex: 0 0 auto; width: 5.6rem; }

.lp-focal-row .dr-stepper .text-input { text-align: right; }

.ps-page .deck-col { flex: 1 1 210px; }

.ps-page .res-table-wrap { overflow-x: auto; }

.ps-pan-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }

.ps-pan-head .res-label { flex: 1 1 auto; min-width: 0; }

.ps-about-btn { flex: 0 0 auto; }

.ps-shutter-row { display: flex; gap: 0.5rem; align-items: center; width: 100%; }

.ps-shutter-row .text-input { flex: 1 1 auto; min-width: 0; width: auto; }

.ps-shutter-row .negfill-label { flex: 0 0 auto; white-space: nowrap; }

.ps-page .text-input:disabled { opacity: 0.45; cursor: not-allowed; }

.ps-shutter-warn { margin: 0; font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--warning); line-height: 1.4; }

.ps-warn { color: var(--warning); }

.ps-info-row { display: flex; gap: 1.5rem; align-items: stretch; }

.ps-info-row > .res-section { flex: 1 1 0; min-width: 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .ps-info-row { flex-direction: column; }
}

.ps-page .deck-actions { display: grid; grid-template-columns: 1fr auto 1fr; }

.ps-page .deck-actions-left { justify-self: start; }

.ps-page .deck-actions-center { justify-self: center; display: flex; align-items: center; }

.ps-page .deck-actions-right { justify-self: end; }

@media (max-width: 760px) and (min-width: 761px) {
  .ps-page .deck-actions { grid-template-columns: 1fr; gap: 0.6rem; }
  .ps-page .deck-actions-left,
  .ps-page .deck-actions-center,
  .ps-page .deck-actions-right { justify-self: center; }
}

.ps-lens-row { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }

.ps-lens-row .dof-specs { flex: 1 1 240px; }

.ps-hfov { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }

.ps-hfov-dial { width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); position: relative; }

.ps-hfov-ticks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.ps-hfov-cap { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--gold); }

.ps-cap-fov { color: var(--gold); }

.ps-cap-dot { color: var(--header-sep2); margin: 0 0.45rem; }

.ps-cap-pan { color: var(--current); }

.fd-lens-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: nowrap; width: 100%; }

.fd-lens-row .dof-specs { flex: 1 1 auto; min-width: 0; gap: 0.3rem; }

.fd-lens-row .dof-spec { grid-template-columns: minmax(84px, 36%) 1fr; gap: 0.5rem; }

.fd-hfov { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 0.5rem; flex: 0 0 auto; }

.fd-hfov-dial { position: relative; width: 132px; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }

.fd-hfov-dial::before { content: ''; position: absolute; inset: 0; background: conic-gradient(
      from calc(0deg - var(--fd-hfov, 0deg) / 2) at 50% 100%,
      var(--gold-dim) 0 var(--fd-hfov, 0deg),
      transparent var(--fd-hfov, 0deg)
    ); }

.fd-hfov-axis { position: absolute; left: 50%; bottom: 0; width: 1px; height: 100%; transform: translateX(-50%); background: linear-gradient(to top, var(--gold), transparent); opacity: 0.45; }

.fd-hfov-cap { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--gold); text-align: center; line-height: 1.35; max-width: 132px; }

.ss-page .deck-col { flex: 1 1 210px; }

.ss-page .res-table-wrap { overflow-x: auto; }

.ss-table { width: 100%; }

.ss-table tr.ss-sel td { background: var(--gold-dim); }

.ss-info-row { display: flex; gap: 1.5rem; align-items: stretch; }

.ss-info-row > .res-section { flex: 1 1 0; min-width: 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .ss-info-row { flex-direction: column; }
}

.ss-page .text-input:disabled { opacity: 0.45; cursor: not-allowed; }

.ss-page .dr-step:disabled { opacity: 0.4; cursor: not-allowed; }

.ss-geo-warn { margin: 0; font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }

.dr-output .res-section.ss-hero { align-items: center; text-align: center; gap: 0.35rem; }

.dr-output .ss-hero .res-label { text-align: center; }

.ss-hero-value { font-family: 'Roboto Mono', monospace; font-size: 2.1rem; line-height: 1.15; color: var(--gold); letter-spacing: 0.02em; }

.ss-hero-cap { font-family: 'Roboto Mono', monospace; font-size: 0.8rem; color: var(--text); }

.ss-hero-sub { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; }

.et-page .deck-col { flex: 1 1 200px; }

.et-page .res-table-wrap { overflow-x: auto; }

.et-table { width: 100%; }

.et-heading { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); margin: 0 0 0.9rem; }

.et-table tr.et-ref td { background: var(--gold-dim); }

.et-error { color: var(--gold); }

.ff-page { justify-content: flex-start; gap: 1.5rem; }

.ff-fps-col { flex: 1 1 100%; }

.ff-page .res-table-wrap { overflow-x: auto; }

.ff-table { width: 100%; }

.ff-result-note { margin-top: 0.6rem; text-align: center; }

.ff-status-icon { display: block; text-align: center; font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }

.ff-status-icon.ff-status-yes { color: var(--success); }

.ff-status-icon.ff-status-no { color: var(--danger); }

.lb-page .deck-col { flex: 1 1 220px; }

.lb-match-note { margin-top: 0.6rem; }

.film-page { gap: 1rem; }

.film-page .dr-output { gap: 1rem; }

.film-page .deck-col { flex: 1 1 220px; }

.film-page .res-table-wrap { overflow-x: auto; }

.film-table { width: 100%; }

.film-summary-table { width: 100%; }

.fc-note-star { color: var(--gold); }

.film-summary-row { display: flex; gap: 1rem; align-items: stretch; width: 100%; }

.film-summary-row > .res-section { min-width: 0; }

.film-summary-row > .res-section:nth-child(1) { flex: 1 1 0; }

.film-summary-row > .res-section:nth-child(2) { flex: 2 1 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .film-summary-row { flex-direction: column; }
}

.fc-rolls-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex: 0 0 auto; }

.fc-rolls-controls .export-select { width: 9rem; min-width: 9rem; }

.fc-rolls-controls > .custom-dd { flex: 0 0 auto; width: 9rem; }

.fc-rolls-controls > .fc-field-label { white-space: nowrap; }

.film-decks-row { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: stretch; gap: 1rem; }

.film-format-deck,
.film-optional-deck { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }

.film-optional-deck { position: relative; }

.film-optional-reset-btn { position: absolute; top: 0.85rem; right: 1.25rem; }

@media (max-width: 700px) and (min-width: 761px) {
  .film-decks-row { flex-direction: column; }
}

.film-top-logo-row { display: flex; padding: 0.85rem 1.25rem 0; }

.film-top-logo-frame { position: relative; width: 100%; line-height: 0; }

.film-top-logo { width: 100%; height: auto; display: block; -webkit-user-drag: none; user-select: none; }

.pa-page .deck-col { flex: 1 1 220px; }

.pa-page .pa-col-conversion { flex: 1 1 320px; }

.pa-page .pa-col-inputs { flex: 1 1 360px; }

.pa-page .pa-input-group { display: flex; flex-direction: column; gap: 0.7rem; }

.pa-page .pa-dpi-field { flex: 0 0 6.5rem; }

.pa-page .pa-model-field { flex: 1.35 1 0; }

.pa-page .pa-format-field { flex: 0.9 1 0; }

.pa-page .pa-unit-field { flex: 0 0 7rem; }

.pa-subdiv-head { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; }

.pa-page .res-table-wrap { overflow-x: auto; }

.pa-table { width: 100%; }

.pa-heading { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); margin: 0 0 0.9rem; }

.pa-dpi-msg { margin: 0 0 0.75rem; }

.pa-row { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }

.pa-row .dof-specs { flex: 1 1 200px; }

.pa-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }

.pa-preview-box { border: 1px solid var(--gold); background: var(--gold-dim); min-width: 2px; min-height: 2px; max-width: 100%; }

.pa-preview-cap { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--gold); }

.ov-page .deck-col { flex: 1 1 210px; }

.ov-page .res-table-wrap { overflow-x: auto; }

.ov-table { width: 100%; }

.ov-table tr.ov-close td { background: var(--gold-dim); }

.ov-row { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }

.ov-row .dof-specs { flex: 1 1 280px; }

.ov-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }

.ov-preview-box { border: 1px solid var(--gold); background: var(--gold-dim); max-width: 100%; }

.ov-preview-cap { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--gold); }

.ov-range-notes { margin: 0 0 0.9rem; }

.ov-table-note { margin-top: 0.6rem; }

.ov-metrics-row { display: flex; gap: 1.5rem; align-items: stretch; }

.ov-metrics-row .res-section { width: auto; }

.ov-ppi-section { flex: 0 0 260px; }

.ov-geometry-section { flex: 1 1 0; min-width: 0; }

.ov-ppi-table th:not(:first-child),
.ov-ppi-table td:not(:first-child) { text-align: right; }

@media (max-width: 760px) and (min-width: 761px) {
  .ov-metrics-row { flex-direction: column; }
  .ov-ppi-section { flex: none; width: 100%; }
}

.ov-units-label { display: inline-flex; align-items: center; gap: 0.5rem; }

.ov-page .deck-actions { flex-wrap: nowrap; }

.ov-page .deck-actions-left { min-width: 0; flex: 1 1 auto; }

.ov-page #ovHint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ov-page .deck-actions-right { flex: 0 0 auto; flex-wrap: nowrap; }

.ov-page .dof-about-btn { width: auto; }

.ov-page .deck-actions-right .export-btn { white-space: nowrap; }

.pp-page { justify-content: flex-start; gap: 1.5rem; }

.pp-col-format { flex: 1.3 1 240px; }

.pp-col-pano { flex: 1 1 220px; }

.pp-col-lens { flex: 1 1 200px; }

.pp-controls .text-input { width: 100%; max-width: none; }

.pp-col-head { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }

.pp-override .text-input,
.pp-override .export-select { width: 100%; max-width: none; }

.pp-pair { display: flex; gap: 0.5rem; width: 100%; }

.pp-pair .fc-field { flex: 1 1 0; min-width: 0; }

.pp-overlap-field { gap: 0.5rem; }

.pp-overlap-range { width: 100%; }

.pp-overlap-val { color: var(--gold); }

.pp-overlap-controls { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }

.pp-gang { align-self: flex-start; margin-top: 0.1rem; }

.pp-overlap-controls[hidden],
.pp-overlap-field[hidden],
.pp-gang[hidden] { display: none; }

.pp-divider-hr { border: 0; border-top: 1px solid var(--border); width: 100%; margin: 0.3rem 0; }

.pp-seams { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }

.pp-seam { position: absolute; border-color: var(--frame-border); border-style: dashed; }

.pp-seam-v { top: 0; bottom: 0; width: 0; border-width: 0; border-left-width: 2px; transform: translateX(-1px); }

.pp-seam-h { left: 0; right: 0; height: 0; border-width: 0; border-top-width: 2px; transform: translateY(-1px); }

#cropOverlapBox { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }

.pp-output { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

.pp-ff { color: var(--text-muted); }

.pp-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.pp-page input[type="number"]::-webkit-inner-spin-button,
.pp-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ptf-page { justify-content: flex-start; gap: 1.5rem; }

.ptf-col-format { flex: 1.1 1 220px; }

.ptf-col-lens { flex: 1.2 1 240px; }

.ptf-col-result { flex: 1.1 1 230px; }

.ptf-controls .text-input { width: 100%; max-width: none; }

.ptf-col-head { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }

.ptf-divider-hr { border: 0; border-top: 1px solid var(--border); width: 100%; margin: 0.4rem 0; }

.ptf-hint { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; line-height: 1.4; }

.ptf-focal-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; }

.ptf-focal-row .ptf-focal-range { flex: 1 1 auto; width: auto; min-width: 0; }

.ptf-focal-num { flex: 0 0 4.6rem; width: 4.6rem; max-width: none; text-align: right; }

.ptf-focal-unit { flex: 0 0 auto; font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); }

.ptf-focal-read { color: var(--gold); }

.ptf-focal-range.ptf-range-pinned { opacity: 0.4; }

.ptf-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.ptf-page input[type="number"]::-webkit-inner-spin-button,
.ptf-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ptf-headline { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }

.ptf-headline-val { font-family: 'Roboto', sans-serif; font-size: 1.35rem; line-height: 1.15; color: var(--gold); letter-spacing: 0.02em; }

.ptf-headline-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; }

.ptf-headline .fc-row { font-size: 0.75rem; }

.ptf-output { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

.ptf-stage-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

.ptf-stage { position: relative; width: 100%; max-width: 960px; aspect-ratio: 2 / 1; border: 1.5px solid var(--frame-border); background: #0a0a0a; overflow: hidden; }

.ptf-pano-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.35s ease; }

.ptf-pano-img.is-loaded { opacity: 0.55; }

.ptf-svg-wrap { position: absolute; inset: 0; }

.ptf-svg { display: block; width: 100%; height: 100%; }

.ptf-grid line { stroke: #ebebeb; stroke-opacity: 0.14; stroke-width: 1; }

.ptf-grid line.ptf-grid-major { stroke-opacity: 0.3; stroke-dasharray: 4 4; }

.ptf-grid-label text { font-family: 'Roboto', sans-serif; font-size: 9px; fill: #ebebeb; fill-opacity: 0.4; letter-spacing: 0.06em; }

.ptf-bbox { fill: none; stroke: var(--current); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-opacity: 0.85; }

.ptf-fp { fill: var(--frame-border); fill-opacity: 0.16; stroke: var(--frame-border); stroke-width: 2; }

.ptf-axis line { stroke: var(--frame-border); stroke-width: 1.5; stroke-opacity: 0.7; }

:root[data-theme="light"] .ptf-stage { background: #0a0a0a; }

:root[data-theme="light"] .ptf-bbox { stroke: #81ebeb; }

.ptf-logo { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: var(--symbol-watermark-formatcompare-pct, 10%); max-width: var(--symbol-watermark-formatcompare-max, 200px); height: auto; pointer-events: none; opacity: 0.8; }

.res-table tr.ptf-target td { background: var(--gold-dim); }

.ptf-eq { font-family: 'Roboto', sans-serif; color: var(--gold); letter-spacing: 0.03em; text-align: center; }

@media (max-width: 760px) and (min-width: 761px) {
  .ptf-headline-val { font-size: 1.15rem; }
}

.fch-page { justify-content: flex-start; gap: 1.5rem; }

.fch-controls { width: 100%; }

.fch-control-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; }

.fch-set-field { flex: 1 1 320px; max-width: 460px; }

.fch-set-title { color: var(--gold); }

.fch-set-field .export-select { width: 100%; max-width: none; }

.fch-export-field { flex: 1 1 280px; }

.fch-actions { display: flex; gap: 0.6rem; flex-wrap: nowrap; align-items: center; }

.fch-actions .export-select { flex: 1 1 auto; min-width: 0; }

.fch-actions .export-btn { flex: 0 0 auto; white-space: nowrap; }

.fch-output { width: 100%; display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.fch-chart { width: 100%; max-width: 960px; margin: 0 auto; border: 1px solid var(--border); background: #0a0a0a; line-height: 0; cursor: pointer; transition: border-color 0.18s ease; }

.fch-chart:hover { border-color: var(--gold); }

.fch-chart svg { display: block; width: 100%; height: auto; }

.fch-error { padding: 2rem; color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.85rem; line-height: 1.5; }

.fch-output .fc-note { max-width: 960px; }

.fch-lb-chart { width: min(94vw, 1600px); line-height: 0; }

.fch-lb-chart svg { display: block; width: 100%; height: auto; }

.fch-set-admin-row { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0 1.25rem 1.1rem; }

.fch-item-admin { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }

.fch-item-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.fch-item-list { display: flex; flex-direction: column; gap: 0.4rem; }

.fch-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); background: var(--bg); }

.fch-item-row[draggable="true"] { cursor: grab; }

.fch-item-row.is-dragging { opacity: 0.4; }

.fch-item-row.drag-over { box-shadow: inset 0 0 0 2px var(--gold); }

.fch-item-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.fch-item-row-label { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text); }

.fch-item-row-meta { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--text-muted); }

.fch-item-row-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.fch-item-empty { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 1rem 0; }

.fch-item-row.is-hidden { opacity: 0.5; }

.fch-colors-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 50vh; overflow-y: auto; }

.fch-colors-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); background: var(--bg); }

.fch-colors-row-name { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text); flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }

.fch-colors-unset { color: var(--danger); font-size: 0.62rem; font-family: 'Roboto', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }

.fch-colors-row-fields { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }

.fch-colors-field { display: flex; align-items: center; gap: 0.35rem; }

.fch-colors-field label { font-family: 'Roboto', sans-serif; font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }

.fch-colors-swatch { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; flex: 0 0 auto; }

.fch-colors-hex { width: 5.5rem; max-width: 5.5rem; font-family: 'Roboto', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.3rem 0.4rem; }

.tc-page { justify-content: flex-start; gap: 1.5rem; }

.tc-controls { width: 100%; }

.tc-col-frame { flex: 1 1 220px; }

.tc-col-grid { flex: 1 1 260px; }

.tc-stage { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }

.tc-frame-wrap { width: 100%; display: flex; align-items: center; justify-content: center; }

.tc-frame { width: 100%; max-width: 960px; border: 1.5px solid var(--frame-border); background: #0a0a0a; line-height: 0; overflow: hidden; transition: aspect-ratio 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.tc-frame svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .tc-frame { transition: none; }
}

.eq-item-admin-row.is-hidden { opacity: 0.5; }

.eq-cat-row.is-hidden { opacity: 0.5; }

.eqm-bar-actions a.export-btn { text-decoration: none; }

.eqm-row.is-dragging { opacity: 0.75; }

.eqm-grip.is-off { visibility: hidden; cursor: default; }

.eqm-row.is-dragging .eqm-grip { cursor: grabbing; }

.eqm-dot.out { background: var(--danger-soft); }

.ec-page { justify-content: flex-start; gap: 1.5rem; }

.ec-col { flex: 1 1 300px; gap: 1rem; min-width: 0; }

.ec-col-head { font-family: 'Roboto', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-align: center; align-self: stretch; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); }

.ec-col.ec-target .ec-col-head { color: var(--current); }

.ec-control { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }

.ec-label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.ec-slider-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; }

.ec-slider { accent-color: var(--gold); cursor: pointer; flex: 1 1 auto; min-width: 0; }

.ec-col.ec-target .ec-slider { accent-color: var(--current); }

.ec-num { width: 5.5rem; max-width: 45%; text-align: right; flex: 0 0 auto; }

.ec-slider-row .ec-num { width: 5.5rem; max-width: 45%; }

.ec-slider-full { width: 100%; }

.ec-shutter-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; }

.ec-shutter-row .ec-num { width: 4.6rem; max-width: 32%; text-align: center; }

.ec-shutter-caps { display: flex; justify-content: space-between; }

.ec-shutter-caps span { font-family: 'Roboto', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.ec-nd-preview { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text); border: 1px solid var(--border); background: var(--surface); padding: 0.4rem 0.6rem; text-align: center; }

.dr-output .ec-result .res-label { text-align: center; }

.ec-diff { font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; text-align: center; }

.ec-diff-note { font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text); text-align: center; margin: 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .ec-page .deck-cols { grid-template-columns: 1fr; }
}

.cs-page { justify-content: flex-start; gap: 1.5rem; }

.cs-deck { padding: 0; }

.cs-deck-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }

.cs-mode-row { display: flex; align-items: center; gap: 0.75rem; }

.cs-grid { display: flex; flex-direction: column; }

.cs-row { display: grid; grid-template-columns: 2rem 1fr 1fr auto; align-items: center; gap: 0.75rem 1rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--border); }

.cs-row:last-child { border-bottom: none; }

.cs-row-preview { width: 2rem; height: 2rem; border: 1px solid var(--border); flex: 0 0 auto; }

.cs-row-label { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text); letter-spacing: 0.04em; }

.cs-row-var { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; }

.cs-row-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }

.cs-color-picker { width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; flex: 0 0 auto; }

.cs-hex-input { width: 12rem; max-width: 40vw; }

.cs-alpha-label { font-family: 'Roboto', sans-serif; font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

.cs-alpha-slider { accent-color: var(--gold); width: 80px; cursor: pointer; }

.cs-alpha-val { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); min-width: 2.5rem; }

.cs-note-row { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); }

.cs-note-row .fc-note { margin: 0; }

.cs-note-row strong { color: var(--gold); font-weight: 500; }

.cs-note-row code { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--current); background: none; }

.cs-copy-btn { color: var(--gold); border-color: var(--gold); }

.cs-copy-btn:hover { background: var(--gold-dim); }

.cs-save-btn { color: var(--current); border-color: var(--current); }

.cs-save-btn:hover { background: rgba(129, 235, 235, 0.12); }

.cs-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.cs-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; }

.cs-swatch { display: flex; flex-direction: column; justify-content: flex-end; min-height: 90px; padding: 0.6rem 0.75rem; border: 1px solid rgba(0,0,0,0.08); }

.cs-swatch-name { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }

.cs-swatch-val { font-family: 'Roboto', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.4; }

.cs-preview-section { gap: 0.75rem; }

.cs-css-section { gap: 0.75rem; }

.cs-css-out { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text); line-height: 1.6; white-space: pre; overflow-x: auto; background: var(--frame-bg); border: 1px solid var(--border); padding: 1rem 1.25rem; margin: 0; }

@media (max-width: 760px) and (min-width: 761px) {
  .cs-row { grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; }
  .cs-row-var { grid-column: 2; }
  .cs-row-controls { grid-column: 1 / -1; justify-content: flex-start; }
  .cs-hex-input { width: 100%; max-width: none; flex: 1 1 auto; }
  .cs-swatches { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.gallery-thumb-wrap.is-dragging { opacity: 0.4; }

.gallery-thumb-wrap.drag-over .gallery-thumb { box-shadow: inset 0 0 0 2px var(--gold); }

.strip-item .lb-img-frame { display: block; width: 100%; }

.strip-item .lb-img-frame img.lb-img,
.strip-item .lb-img-frame > img:not(.frame-logo) { width: 100%; height: auto; display: block; }

.lb-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.75); align-items: center; justify-content: center; }

.lb-overlay.active { display: flex; }

.lb-overlay.is-fs .lb-gallery-name,
.lb-overlay.is-fs .lb-index,
.lb-overlay.is-fs .lb-below,
.lb-overlay.is-fs .lb-controls { display: none; }

.lb-overlay.is-fs { cursor: none; }

.lb-image-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: calc(100vw - 2rem); max-height: calc(100vh - 4rem); }

.lb-img-frame { position: relative; display: inline-block; line-height: 0; }

.img-protect { position: absolute; inset: 0; z-index: 10; cursor: pointer; -webkit-user-select: none; user-select: none; }

.lb-img-frame img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; pointer-events: none; }

.lb-img-frame .frame-logo { pointer-events: none; width: var(--symbol-watermark-gallery-pct, 12%); max-width: var(--symbol-watermark-gallery-max, 640px); filter: none; }

.lb-controls { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 0.1rem; transform: translateY(-100%); padding-bottom: 0.2rem; }

.lb-btn { background: none; border: none; color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 1rem; cursor: pointer; padding: 0.3rem 0.45rem; line-height: 1; transition: color 0.15s ease; }

.lb-btn:hover { color: var(--text); }

.lb-btn-close { font-size: 1.1rem; }

.lb-below { display: flex; justify-content: flex-end; width: 100%; padding-top: 0.4rem; }

.lb-caption { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }

.lb-caption-title { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text); letter-spacing: 0.04em; text-align: right; }

.share-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.gallery-admin-line { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color 0.18s ease; }

.gallery-admin-line:hover { color: var(--danger); }

.intro-admin-controls .tool-card-admin-btn { flex: 0 0 auto; padding: 0 0.85rem; height: 1.9rem; }

.tool-card.is-dragging { opacity: 0.4; }

.tool-card.drag-over { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }

.gallery-admin-item.is-dragging { opacity: 0.4; }

.gallery-admin-item.drag-over .panorama-card,
.gallery-admin-item.drag-over .insights-entry-card { box-shadow: inset 0 0 0 2px var(--gold); }

.gallery-admin-item[draggable="true"].is-dragging { cursor: grabbing; }

.gallery-admin-item .tool-card-admin-btn { height: 1.6rem; background: rgba(0, 0, 0, 0.55); font-size: 0.72rem; }

.tool-card-admin-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; height: 1.7rem; background: var(--btn-admin-bg, transparent); border: 1px solid var(--btn-admin-border, var(--danger)); color: var(--btn-admin-fg, var(--danger)); font-family: 'Roboto', sans-serif; font-size: var(--btn-admin-size, 0.85rem); border-radius: var(--btn-admin-radius, 0); line-height: 1; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; }

.tool-card-admin-btn:hover { background: var(--btn-admin-hover-bg, var(--danger)); color: var(--btn-admin-hover-fg, var(--bg)); }

.tool-card-admin-btn.move-btn { flex: 0 0 2.2rem; }

.tool-card-admin-btn:disabled { opacity: 0.3; cursor: not-allowed; background: none; color: var(--danger); }

.gm-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.gm-modal[hidden] { display: none; }

.gm-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }

.gm-modal-box { position: relative; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--gold); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.9rem; }

.gm-modal-close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem; transition: color 0.18s ease; }

.gm-modal-close:hover { color: var(--gold); }

.gm-modal-title { font-family: 'Roboto', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--gold); margin: 0 1.5rem 0 0; }

.gm-field { display: flex; flex-direction: column; gap: 0.3rem; }

.gm-field label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.gm-field .text-input { width: 100%; max-width: none; }

.gm-field .text-input:disabled { opacity: 0.5; cursor: not-allowed; }

.gm-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; }

#gaModal .gm-modal-title { padding-bottom: 0.5rem; border-bottom: 1px solid var(--gold); }

.gm-error { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--danger); min-height: 1em; }

.motion-cat-link.active,
.motion-cat-link.active:hover { color: var(--current); }

.motion-lb.active { display: flex; }

.pano-viewer-frame .frame-logo { width: var(--symbol-watermark-panoviewer-pct, 12%); max-width: var(--symbol-watermark-panoviewer-max, 640px); z-index: 5; }

.pano-info-btn.active { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }

.pano-context-item.active { color: var(--gold); }

.insights-cat-link.active,
.insights-cat-link.active:hover { color: var(--current); }

.article-content .article-img-frame .img-protect { cursor: pointer; }

.article-compare .frame-logo { width: var(--symbol-watermark-gallery-pct, 12%); max-width: var(--symbol-watermark-gallery-max, 640px); z-index: 5; }

.article-chapters-toggle.active { color: var(--gold); border-color: var(--gold); }

.article-chapters-toggle.active .article-chapters-chevron { transform: rotate(180deg); }

.wysiwyg-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.wysiwyg-row .gm-field { flex: 1 1 200px; min-width: 0; }

.wysiwyg-sticky-bar .gm-error { padding: 0 1.1rem; }

.wysiwyg-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.catalog-cat-link.active { color: var(--gold); background: var(--gold-dim); }

.catalog-cat-link.active .catalog-cat-count { color: var(--gold); }

.catalog-quote-panel.open .catalog-quote-chevron { transform: rotate(180deg); }

.catalog-quote-fields .gm-field { flex: 1 1 200px; min-width: 0; }

.catalog-quote-summary-row.total { font-size: 1.05rem; color: var(--gold); font-weight: 700; }

.ab-section.is-section-hidden .res-label::after { content: 'hidden'; margin-left: 0.5rem; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: #eb1313; vertical-align: middle; }

.ab-split-4 .ab-links-row a.export-btn.ab-btn-tight { padding-left: 0.6rem; padding-right: 0.6rem; text-align: center; line-height: 1.25; white-space: normal; }

.ab-links-row a.export-btn { text-decoration: none; }

.lutb-page .export-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.lutb-page .export-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }

.lutb-mix .fc-field-label { flex: 0 0 auto; }

.lutb-mix .extraction-range { flex: 1 1 auto; width: auto; min-width: 0; }

.lutb-toggle .fc-field-label { cursor: pointer; }

.lutb-stage.is-off .export-select,
.lutb-stage.is-off .lutb-mix { opacity: 0.4; }

.lutb-stage.is-off .lutb-toggle .fc-field-label { opacity: 0.55; }

.lutb-size-row .export-select { flex: 1 1 auto; width: auto; }

.lutb-preview-head .res-label { flex: 1 1 auto; }

.ld-page .deck-col { flex: 1 1 220px; }

.ld-setup { align-items: stretch; }

.ld-col-select { flex: 3 1 420px; }

.ld-col-select .fc-fields { width: 100%; }

.ld-hint { width: 100%; max-width: 960px; margin: -0.75rem auto 0; text-align: center; }

.ld-hint:empty { display: none; }

.ld-page .dr-controls .export-select { width: 100%; }

.ld-lander-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem; align-items: start; }

.ld-lander-row > .res-section { min-width: 0; }

.ld-series-head { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }

.ld-series-title { font-family: 'Roboto', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold); line-height: 1.3; }

.ld-series-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.ld-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }

.ld-badge { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--current); border: 1px solid var(--border); background: var(--bg); padding: 0.15rem 0.5rem; line-height: 1.5; }

.ld-specs { width: 100%; }

.ld-specs .dof-spec { grid-template-columns: minmax(120px, 42%) 1fr; }

.ld-notes { font-family: 'Roboto', sans-serif; font-size: 0.8rem; line-height: 1.55; color: var(--text); width: 100%; }

.ld-notes:empty { display: none; }

.ld-sources { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.03em; line-height: 1.5; color: var(--text-muted); width: 100%; }

.ld-sources:empty { display: none; }

.ld-sources a { color: var(--gold); text-decoration: none; }

.ld-sources a:hover { text-decoration: underline; }

.ld-cov-stage { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--frame-bg); border: 1px solid var(--border); padding: 0.5rem; }

.ld-cov-svg { width: 100%; max-width: 340px; height: auto; display: block; }

.ld-cov-circle { fill: rgba(235, 208, 129, 0.07); stroke: var(--gold); stroke-width: 1.25; }

.ld-cov-illum { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }

.ld-cov-rect { fill: none; stroke-width: 1.1; }

.ld-cov-rect.is-covered { stroke: #81ebeb; }

.ld-cov-rect.is-short { stroke: #eb6d6d; stroke-dasharray: 4 3; }

.ld-cov-centre { fill: var(--gold); }

.ld-cov-legend { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }

.ld-leg-item { display: grid; grid-template-columns: 0.9rem 1fr auto auto; align-items: center; gap: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); }

.ld-leg-swatch { width: 0.7rem; height: 0.7rem; border: 1px solid var(--border); display: inline-block; }

.ld-leg-swatch.is-covered { border-color: #81ebeb; background: rgba(129, 235, 235, 0.18); }

.ld-leg-swatch.is-short { border-color: #eb6d6d; background: rgba(235, 109, 109, 0.15); }

.ld-leg-swatch.is-tight { border-style: dashed; }

.ld-leg-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ld-leg-diag { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.ld-leg-flag { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }

.ld-leg-flag.is-covered { color: var(--current); }

.ld-leg-flag.is-short { color: var(--danger-soft); }

.ld-cov-note { font-family: 'Roboto', sans-serif; font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); width: 100%; }

.ld-page .res-table-wrap { overflow-x: auto; }

.ld-table { width: 100%; }

.ld-table td { font-variant-numeric: tabular-nums; }

.ld-ap-icon { width: 0.72rem; height: 0.72rem; vertical-align: -0.11em; margin-left: 0.3rem; fill: none; stroke: currentColor; stroke-width: 1.2; overflow: visible; }

.ld-ap-icon .ld-ap-dot { fill: currentColor; stroke: none; }

.ld-row-announced td { color: var(--text-muted); }

.ld-row-announced .tier { color: var(--text-muted); }

.ld-tag { margin-left: 0.45rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); padding: 0.05rem 0.35rem; font-weight: 400; }

@media (max-width: 860px) {
  .ld-lander-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) and (min-width: 761px) {
  .ld-leg-item { grid-template-columns: 0.9rem 1fr auto; }
  .ld-leg-diag { display: none; }
}

.ld-admin-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%; }

.ld-admin-row[hidden] { display: none; }

.ld-admin-series { max-width: 960px; margin: -0.5rem auto 0; }

.ld-danger-btn { color: var(--danger-soft); border-color: var(--danger-dim); }

.ld-danger-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); }

.ld-admin-status { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--success); margin-left: 0.25rem; }

.ld-admin-status.is-error { color: var(--danger); }

.res-table th.ld-admin-col,
.res-table td.ld-admin-col { text-align: right; width: 1%; white-space: nowrap; }

.ld-row-btn { background: var(--btn-ldrow-bg, transparent); border: 1px solid var(--btn-ldrow-border, var(--border)); color: var(--btn-ldrow-fg, var(--text-muted)); font-family: 'Roboto', sans-serif; font-size: var(--btn-ldrow-size, 0.68rem); letter-spacing: var(--btn-ldrow-tracking, 0.06em); padding: var(--btn-ldrow-pad-y, 0.15rem) var(--btn-ldrow-pad-x, 0.55rem); border-radius: var(--btn-ldrow-radius, 0); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }

.ld-row-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.ld-cov-empty { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); padding: 2rem 1rem; text-align: center; }

.gm-modal-box.gm-wide { max-width: 640px; }

.ld-gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }

.ld-gm-sub { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--current); margin-top: -0.5rem; }

.ld-gm-grid .export-select { width: 100%; }

.ld-gm-grid .custom-dd { width: 100%; }

.ld-ta { min-height: 8rem; }

.gm-field code { font-family: 'Roboto Mono', monospace; font-size: 0.9em; color: var(--gold); text-transform: none; letter-spacing: 0; }

.ld-permount-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.ld-permount-toggle { text-transform: none; letter-spacing: 0.04em; font-size: 0.7rem; }

.ld-mount-rows { display: flex; flex-direction: column; gap: 0.4rem; }

.ld-mount-rows[hidden] { display: none; }

.ld-mount-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.6rem; }

.ld-mount-label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gold); }

.ld-mount-row .text-input { width: 100%; max-width: none; }

.ld-announce-toggle { text-transform: none; letter-spacing: 0.03em; font-size: 0.72rem; }

.gm-modal-actions .ld-danger-btn { margin-right: auto; }

@media (max-width: 560px) and (min-width: 761px) {
  .ld-gm-grid { grid-template-columns: 1fr; }
}

.shop-cat-link.active,
.shop-cat-link.active:hover { color: var(--current); }

.shop-ref-link .arr { flex: 0 0 auto; opacity: 0.6; }

.shop-ref-link:hover .arr { opacity: 1; }

.shop-buy-link .arr { transition: transform 0.18s ease; }

.shop-buy-link:hover .arr { transform: translateX(3px); }

.shop-admin-actions .export-btn { text-decoration: none; }

.shop-admin-list.is-dragging { cursor: grabbing; }

.shop-editor-grid .text-input,
.shop-editor-grid .export-select { width: 100%; max-width: none; }

.shop-editor-footer .export-btn { text-decoration: none; }

.shop-pair-row .text-input { width: 100%; max-width: none; }

.shop-img-row .text-input { width: 100%; max-width: none; }

.shop-drop-zone.over { border-color: var(--gold); color: var(--gold); }

@media (max-width: 900px) {
  .shop-editor-head-actions .export-btn { padding: 0.5rem 0.6rem; }
}

.pw-page { justify-content: flex-start; gap: 1.5rem; }

.pw-col-source { flex: 1 1 180px; min-width: 160px; }

.pw-col-count { flex: 1.2 1 220px; min-width: 200px; }

.pw-col-method { flex: 1.1 1 200px; min-width: 190px; }

.pw-col-method .fc-field .export-select { width: 100%; }

.pw-load-btn { width: 100%; }

.pw-hint { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; line-height: 1.4; }

.pw-count-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.25rem; width: 100%; }

.pw-count { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-family: 'Roboto Mono', monospace; font-size: 0.75rem; padding: 0.45rem 0; border-radius: 0; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; }

.pw-count:hover { border-color: var(--gold); color: var(--gold); }

.pw-count[aria-pressed="true"] { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }

.pw-group { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }

.pw-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.pw-group-head .fc-field-label { cursor: pointer; }

.pw-group.is-off .pw-count-row { opacity: 0.3; }

.pw-group.is-off .fc-field-label { color: var(--text-muted); opacity: 0.6; }

.pw-count:disabled { cursor: default; }

.pw-count:disabled:hover { border-color: var(--border); color: var(--text-muted); }

.pw-url-row { display: flex; align-items: stretch; gap: 0.35rem; width: 100%; }

.pw-url-input { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; }

.pw-url-input::placeholder { text-transform: none; letter-spacing: 0.03em; }

.pw-url-btn { flex: 0 0 auto; padding-left: 0.65rem; padding-right: 0.65rem; }

.pw-stage-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

.pw-stage { position: relative; width: 100%; max-width: 960px; min-height: 20rem; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border); background: var(--frame-bg); overflow: hidden; transition: border-color 0.18s ease; }

.pw-stage.pw-has-image { border-style: solid; border-color: var(--frame-border); }

.pw-stage.pw-hot { border-color: var(--gold); border-style: solid; }

.pw-img { display: block; max-width: 100%; max-height: 34rem; width: auto; height: auto; }

.pw-drop { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 3rem 1.5rem; text-align: center; }

.pw-drop-title { font-family: 'Roboto', sans-serif; font-size: 0.95rem; color: var(--text); letter-spacing: 0.04em; }

.pw-drop-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; }

.pw-logo { position: absolute; bottom: var(--pw-logo-inset, 8px); width: var(--symbol-watermark-formatcompare-pct, 10%); max-width: var(--symbol-watermark-formatcompare-max, 200px); height: auto; pointer-events: none; opacity: 1; }

.pw-logo[data-pos="left"] { left: var(--pw-logo-inset, 8px); }

.pw-logo[data-pos="right"] { right: var(--pw-logo-inset, 8px); }

.pw-logo[data-pos="center"] { left: 50%; transform: translateX(-50%); }

.pw-stage:not(.pw-has-image) .pw-logo { display: none; }

.pw-logo-row .export-select { min-width: 9rem; }

.pw-logo-opacity { display: inline-flex; align-items: center; gap: 0.5rem; }

.pw-logo-opacity .extraction-value { min-width: 3em; }

.pw-logo-opacity.is-off { opacity: 0.4; }

.pw-strip { display: flex; width: 100%; max-width: 960px; height: 3.5rem; border: 1px solid var(--border); border-top: 0; margin-top: -0.6rem; }

.pw-strip-cell { flex: 1 1 0; min-width: 0; }

.pw-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; width: 100%; }

.pw-sw { display: block; text-align: left; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0; cursor: pointer; overflow: hidden; transition: border-color 0.18s ease; }

.pw-sw:hover { border-color: var(--gold); }

.pw-chip { display: block; height: 4.5rem; width: 100%; }

.pw-meta { display: block; padding: 0.5rem 0.6rem 0.55rem; border-top: 1px solid var(--border); }

.pw-hex { font-family: 'Roboto Mono', monospace; font-size: 0.8rem; color: var(--text); letter-spacing: 0.03em; }

.pw-pct { float: right; font-family: 'Roboto Mono', monospace; font-size: 0.7rem; color: var(--gold); }

.pw-rgb { display: block; clear: both; font-family: 'Roboto Mono', monospace; font-size: 0.65rem; color: var(--text-muted); margin-top: 0.2rem; }

.pw-oog { color: var(--warning); }

.pw-zone-swatches { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

.pw-zone-tag { float: left; margin-right: 0.4rem; font-family: 'Roboto Mono', monospace; font-size: 0.8rem; color: var(--gold); min-width: 2.2em; }

.pw-zone-swatches .pw-hex { font-size: 0.7rem; color: var(--text-muted); }

.pw-sw-empty .pw-chip { opacity: 0.35; }

.pw-sw-empty .pw-zone-tag { color: var(--text-muted); }

.pw-zone-mode { width: 100%; }

@media (max-width: 760px) and (min-width: 761px) {
  .pw-count-row { grid-template-columns: repeat(5, 1fr); }
  .pw-swatches { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* ---- 4b. the 2026 skin: the tool controls drawn by the Site Editor's own settings ---- */

/* layout: the space between a tool's surfaces = Page tab > Surfaces > Surface Padding */
:where(body[data-page="toolPage"]) .toolMain { gap: var(--surfaceGap, 12px); }
:where(body[data-page="toolPage"]) :is(.dr-output, .fc-sheet, .fc-stack, .fc-preview-row) { gap: var(--surfaceGap, 12px); }
:where(body[data-page="toolPage"]) .stage { margin-top: 0; gap: var(--surfaceGap, 12px); }

/* surfaces: Site Editor > Surface (fill, border colour, edge / interior thickness, corner radius) */
:where(body[data-page="toolPage"]) :is(.control-deck, .controls-row, .fc-spec, .res-table-wrap, .res-readout, .ec-nd-preview) {
  border-width: var(--surfaceBorderW); border-color: var(--surfaceBorder); border-radius: var(--surfaceRadius); }
:where(body[data-page="toolPage"]) .dr-output .res-section { border-width: var(--surfaceBorderW); border-color: var(--surfaceBorder); border-radius: var(--surfaceRadius); }
:where(body[data-page="toolPage"]) .deck-divider { width: var(--surfaceInnerBorderW); background: var(--surfaceBorder); }
:where(body[data-page="toolPage"]) .deck-divider-h { height: var(--surfaceInnerBorderW); background: var(--surfaceBorder); }
:where(body[data-page="toolPage"]) .deck-actions { border-top-width: var(--surfaceInnerBorderW); }
:where(body[data-page="toolPage"]) .fc-format-divider { width: var(--surfaceInnerBorderW); background: var(--surfaceBorder); }
:where(body[data-page="toolPage"]) .fc-anamorphic { border-top-width: var(--surfaceInnerBorderW); border-top-color: var(--surfaceBorder); }
:where(body[data-page="toolPage"]) .fc-spec-divider { border-top-width: var(--surfaceInnerBorderW); }
:where(body[data-page="toolPage"]) :is(.res-table th, .res-table td) { border-bottom-width: var(--surfaceInnerBorderW); }

/* text sizes: Site Editor > Text Size - Additional > Frame & Focus ... */
:where(body[data-page="toolPage"]) :is(.fc-col-title, .fc-spec-title) { font-size: var(--fcTitleSize); letter-spacing: .04em; color: var(--heroSite); }
:where(body[data-page="toolPage"]) :is(.fc-col-title, .fc-spec-title).fc-two { color: var(--heroFoil); }
:where(body[data-page="toolPage"]) :is(.fc-field-label, .export-label, .subdiv-label, .res-label, .negfill-label, .info-label, .display-label, .ratio-label) { font-size: var(--fcLabelSize); }
:where(body[data-page="toolPage"]) .fc-field-label { color: var(--textDim); }      /* case as written: labels carry units (mm, micrometres) that capitals would change */
:where(body[data-page="toolPage"]) :is(.fc-col-sub, .fc-spec-sub) { font-size: var(--fcTextSize); letter-spacing: .06em; text-transform: uppercase; color: var(--textDim); }
:where(body[data-page="toolPage"]) :is(.fc-note, .dr-hint, .fc-spec-name, .fc-row, .fc-stage-cap, .fc-rect-tag, .dof-spec-label, .dof-spec-value, .info-value) { font-size: var(--fcTextSize); }
:where(body[data-page="toolPage"]) :is(.fc-focal-intro, .fc-focal-line) { font-size: var(--fcFocalSize); }
:where(body[data-page="toolPage"]) :is(.res-table, .res-table th) { font-size: var(--fcTextSize); }

/* drop down menus: Site Editor > Drop Down Menu */
:where(body[data-page="toolPage"]) :is(.export-select, .ratio-dd-trigger) {
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); color: var(--ddText);
  font-family: var(--font); font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); border-radius: var(--ddRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
:where(body[data-page="toolPage"]) :is(.export-select, .ratio-dd-trigger):hover:not(:disabled), :where(body[data-page="toolPage"]) .ratio-dd.open .ratio-dd-trigger {
  background: var(--ddHoverBg); border-color: var(--ddHoverBorder); color: var(--ddHoverText); }
:where(body[data-page="toolPage"]) .export-select option { background: var(--ddBg); color: var(--ddText); }
:where(body[data-page="toolPage"]) .export-select option:hover, :where(body[data-page="toolPage"]) .export-select option:focus-visible { background: var(--ddOptHoverBg) linear-gradient(0deg, var(--ddOptHoverBg), var(--ddOptHoverBg)); color: var(--ddOptHoverText); }
/* (the tools keep the browser's own select: their layouts were sized to it, and the 2026 base-select box sizes to the
   chosen option, which cut long ones short in narrow columns) */
:where(body[data-page="toolPage"]) .ratio-dd-list { background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); }
:where(body[data-page="toolPage"]) .ratio-dd-option { font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); color: var(--ddText); }
:where(body[data-page="toolPage"]) .ratio-dd-option:hover, :where(body[data-page="toolPage"]) .ratio-dd-option.selected:hover { background: var(--ddOptHoverBg); color: var(--ddOptHoverText); }

/* text boxes: drawn as the drop down menus */
:where(body[data-page="toolPage"]) .text-input {
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); color: var(--ddText);
  font-family: var(--font); font-size: var(--ddSize); border-radius: var(--ddRadius); transition: border-color .18s ease, background .18s ease; }
:where(body[data-page="toolPage"]) .text-input:hover:not(:disabled), :where(body[data-page="toolPage"]) .text-input:focus { background: var(--ddHoverBg); border-color: var(--ddHoverBorder); color: var(--ddHoverText); outline: none; }
:where(body[data-page="toolPage"]) .dr-stepper-btns { border-left: var(--ddBorderW) solid var(--ddBorder); }
:where(body[data-page="toolPage"]) .dr-step { background: var(--ddBg); color: var(--ddText); }
:where(body[data-page="toolPage"]) .dr-step:hover { background: var(--ddOptHoverBg); color: var(--ddOptHoverText); }
:where(body[data-page="toolPage"]) .dr-step-up { border-bottom: var(--ddBorderW) solid var(--ddBorder); }

/* buttons: Site Editor > Buttons */
:where(body[data-page="toolPage"]) :is(.export-btn, .film-optional-reset-btn) {
  background: color-mix(in srgb, var(--btnBg) calc(var(--btnFillOpacity) * 1%), transparent); border: var(--btnBorderW) solid var(--btnBorder); color: var(--btnText);
  font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em); padding: var(--btnPadY) var(--btnPadX); border-radius: var(--btnRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
:where(body[data-page="toolPage"]) :is(.export-btn, .film-optional-reset-btn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--btnHoverBg) calc(var(--btnHoverFillOpacity) * 1%), transparent); border-color: var(--btnHoverBorder); color: var(--btnHoverText); }
:where(body[data-page="toolPage"]) :is(.export-btn, .film-optional-reset-btn):active:not(:disabled), :where(body[data-page="toolPage"]) .export-btn.active {
  background: color-mix(in srgb, var(--btnActiveBg) calc(var(--btnActiveFillOpacity) * 1%), transparent); border-color: var(--btnActiveBorder); color: var(--btnActiveText); }
:where(body[data-page="toolPage"]) a.export-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* special buttons: Site Editor > Special Buttons (Format One / Two boxes, Match One / Two) */
:where(body[data-page="toolPage"]) .fc-sp-link {
  font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em); color: var(--fmt1Text);
  background: color-mix(in srgb, var(--btnBg) calc(var(--fmtFillOpacity) * 1%), transparent); border: var(--btnBorderW) solid var(--btnBorder); border-radius: var(--btnRadius); }
:where(body[data-page="toolPage"]) .fc-sp-link.fc-two { color: var(--fmt2Text); }
:where(body[data-page="toolPage"]) .fc-sp-link:hover { border-color: var(--fmt1HoverBorder); background: color-mix(in srgb, var(--fmt1HoverBg) calc(var(--fmtHoverFillOpacity) * 1%), transparent); }
:where(body[data-page="toolPage"]) .fc-sp-link.fc-two:hover { border-color: var(--fmt2HoverBorder); background: color-mix(in srgb, var(--fmt2HoverBg) calc(var(--fmtHoverFillOpacity) * 1%), transparent); }
:where(body[data-page="toolPage"]) .fc-match-btn { height: 26px; padding: 0 10px; background: color-mix(in srgb, var(--btnBg) calc(var(--matchFillOpacity) * 1%), transparent);
  border: var(--btnBorderW) solid currentColor; border-radius: var(--btnRadius); font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em); }
:where(body[data-page="toolPage"]) #matchA { color: var(--match1Text); }
:where(body[data-page="toolPage"]) #matchB { color: var(--match2Text); }
:where(body[data-page="toolPage"]) #matchA:hover:not(:disabled) { background: color-mix(in srgb, var(--match1HoverBg) calc(var(--matchHoverFillOpacity) * 1%), transparent); color: var(--match1HoverText); }
:where(body[data-page="toolPage"]) #matchB:hover:not(:disabled) { background: color-mix(in srgb, var(--match2HoverBg) calc(var(--matchHoverFillOpacity) * 1%), transparent); color: var(--match2HoverText); }
:where(body[data-page="toolPage"]) :is(#matchA, #matchB):disabled, :where(body[data-page="toolPage"]) .fc-match-btn.is-matched { color: var(--textDim); border-color: var(--btnBorder); background: none; }

/* symbol buttons (Rotate): Site Editor > Symbol Buttons */
:where(body[data-page="toolPage"]) .rotate-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer;
  background: var(--syBg); border: var(--syBorderW) solid var(--syBorder); color: var(--syIcon); padding: var(--syPad); border-radius: var(--syRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
:where(body[data-page="toolPage"]) .rotate-icon:hover { background: var(--syHoverBg); border-color: var(--syHoverBorder); color: var(--syHoverIcon); }
:where(body[data-page="toolPage"]) .rotate-icon.active { background: var(--syActiveBg); border-color: var(--syActiveBorder); color: var(--syActiveIcon); }
:where(body[data-page="toolPage"]) .rotate-icon .rotIcon { width: var(--syIconSize); height: var(--syIconSize); display: block; }
:where(body[data-page="toolPage"]) :is(.display-label, .ratio-label) .rotate-icon { margin-left: 8px; vertical-align: middle; }

/* graphic buttons (frame guide / display icons): Site Editor > Graphic Button */
:where(body[data-page="toolPage"]) .subdiv-btn {
  background: var(--gbBg); border: var(--gbBorderW) solid var(--gbBorder); color: var(--gbIcon); padding: var(--gbPad); border-radius: var(--gbRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
:where(body[data-page="toolPage"]) .subdiv-btn svg { width: var(--gbIconSize); height: var(--gbIconSize); }
:where(body[data-page="toolPage"]) .subdiv-btn:hover { background: var(--gbHoverBg); border-color: var(--gbHoverBorder); color: var(--gbHoverIcon); }
:where(body[data-page="toolPage"]) .subdiv-btn.active { background: var(--gbActiveBg); border-color: var(--gbActiveBorder); color: var(--gbActiveIcon); }
:where(body[data-page="toolPage"]) .display-btn:hover { color: var(--gbHoverIcon); }
:where(body[data-page="toolPage"]) .display-btn.active { color: var(--gbActiveIcon); }

/* control sliders: Site Editor > Control Slider (Format Two's sliders take the Secondary colours). --pct = pages/toolPage.js */
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *)) { --acc: var(--sliderAccent); --gBg: var(--sliderGuideBg); --gBd: var(--sliderGuideBorder);
  accent-color: var(--acc); cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; height: max(16px, calc(var(--sliderHandle) + 4px)); margin: 0; }
/* the second colour, where a tool gives a slider that meaning (Format Two, the bracket shape, the pan, the target exposure) */
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *)):is(#extractionB, .two, .bh-slider-shape, .ps-slider-pan), :where(body[data-page="toolPage"]) .ec-col.ec-target input[type=range] {
  --acc: var(--slider2Accent); --gBg: var(--slider2GuideBg); --gBd: var(--slider2GuideBorder); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *))::-webkit-slider-runnable-track { height: var(--sliderGuideH); box-sizing: border-box; border: var(--sliderGuideBorderW) solid var(--gBd);
  border-radius: var(--sliderGuideRadius); background: linear-gradient(var(--acc), var(--acc)) 0 0 / var(--pct, 0%) 100% no-repeat, var(--gBg); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *))::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--sliderHandle); height: var(--sliderHandle); border-radius: 50%; border: 0;
  background: var(--acc); margin-top: calc((var(--sliderGuideH) - 2 * var(--sliderGuideBorderW) - var(--sliderHandle)) / 2); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *))::-moz-range-track { height: var(--sliderGuideH); box-sizing: border-box; border: var(--sliderGuideBorderW) solid var(--gBd); border-radius: var(--sliderGuideRadius); background: var(--gBg); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *))::-moz-range-progress { height: calc(var(--sliderGuideH) - 2 * var(--sliderGuideBorderW)); border-radius: var(--sliderGuideRadius); background: var(--acc); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *))::-moz-range-thumb { width: var(--sliderHandle); height: var(--sliderHandle); border-radius: 50%; border: 0; background: var(--acc); }
:where(body[data-page="toolPage"]) input[type=range]:where(:not(#ed *)):disabled { opacity: .45; cursor: default; }
:where(body[data-page="toolPage"]) .extraction-value { font-family: var(--font); font-size: var(--sliderValSize); color: var(--sliderValue); }
:where(body[data-page="toolPage"]) #extractionValueB { color: var(--slider2Value); }
:where(body[data-page="toolPage"]) :is(.negfill-check, input[type=checkbox], input[type=radio]) { accent-color: var(--sliderAccent); }

/* the preview stage: Site Editor > Color Scheme (Stage ...) + Stage Overlay Frame */
:where(body[data-page="toolPage"]) .fc-stage { background: var(--toolStageBg); }
:where(body[data-page="toolPage"]) .fc-rect-a { background-color: var(--toolStageBg); }
:where(body[data-page="toolPage"]) :is(.fc-rect-a, .fc-rect-b, .fc-rect-desq, .fc-rect-ext) { border-width: var(--stageFrameW); }
:where(body[data-page="toolPage"]) :is(.fc-rect-a, .fc-rect-desq-a, .fc-rect-ext-a) { border-color: var(--stageFrameOne); }
:where(body[data-page="toolPage"]) :is(.fc-rect-b, .fc-rect-desq-b, .fc-rect-ext-b) { border-color: var(--stageFrameTwo); }
:where(body[data-page="toolPage"]) :is(.fc-rect-a, .fc-rect-desq-a, .fc-rect-ext-a) .fc-rect-tag { color: var(--stageText); background: var(--stageFrameOne); }
:where(body[data-page="toolPage"]) :is(.fc-rect-b, .fc-rect-desq-b, .fc-rect-ext-b) .fc-rect-tag { color: var(--stageText); background: var(--stageFrameTwo); }

/* watermark: Site Editor > Watermark (size comes from site.js; inset and opacity here) */
:where(body[data-page="toolPage"]) :is(.frame-logo, .fc-logo, .ptf-logo) { opacity: calc(var(--wmOpacity, 100) / 100); }
:where(body[data-page="toolPage"]) .frame-logo { right: var(--wmInset, 8px); bottom: var(--wmInset, 8px); }
:where(body[data-page="toolPage"]) :is(.fc-logo, .ptf-logo) { bottom: var(--wmInset, 8px); }

/* pop-ups: Site Editor > Info Popup (+ Focused Image backdrop and close button) */
:where(body[data-page="toolPage"]) :is(.dof-modal, .gm-modal) { z-index: 1100; }
:where(body[data-page="toolPage"]) :is(.dof-modal-backdrop, .gm-modal-backdrop) { background: color-mix(in srgb, var(--focusBg, #000000) calc(var(--focusOpacity, 85) * 1%), transparent); }
:where(body[data-page="toolPage"]) :is(.dof-modal-box, .gm-modal-box) {
  padding: calc(var(--ipPadY) + 10px) calc(var(--ipPadX) + 14px) calc(var(--ipPadY) + 10px + var(--ipBottomW)) calc(var(--ipPadX) + 14px + var(--ipRuleW));
  background: var(--ipBg); border: var(--ipBorderW) solid var(--ipBorder); border-radius: var(--ipRadius);
  box-shadow: inset var(--ipRuleW) 0 0 0 var(--ipRuleColor), inset 0 calc(var(--ipBottomW) * -1) 0 0 var(--ipBottomColor); }
:where(body[data-page="toolPage"]) :is(.dof-modal-title, .gm-modal-title) { font-size: var(--ipTitleSize); font-weight: 400; letter-spacing: .02em; color: var(--ipTitleColor); }
:where(body[data-page="toolPage"]) :is(.dof-modal-close, .gm-modal-close) { font-size: var(--focusCloseSize); line-height: .8; color: var(--focusBtnOff); }
:where(body[data-page="toolPage"]) :is(.dof-modal-close, .gm-modal-close):hover { color: var(--focusBtnHover); }
:where(body[data-page="toolPage"]) :is(.dof-modal-close, .gm-modal-close):active { color: var(--focusBtnActive); }
:where(body[data-page="toolPage"]) .dof-modal-body { font-size: var(--ipBodySize); color: var(--ipBodyColor); }
:where(body[data-page="toolPage"]) .dof-modal-body strong { color: var(--ipTitleColor); }
:where(body[data-page="toolPage"]) .dof-modal-body a { color: var(--ipLinkColor); }
:where(body[data-page="toolPage"]) .dof-modal-body a:hover, :where(body[data-page="toolPage"]) .dof-modal-body a:focus-visible { color: var(--ipLinkHover); }
:where(body[data-page="toolPage"]) .dof-modal-sign { color: var(--ipTitleColor); }
:where(body[data-page="toolPage"]) .gm-modal-box :is(label, .gm-field > span) { color: var(--ipDescColor); }

/* Format Chart's full-window chart: the Focused Image backdrop and buttons */
:where(body[data-page="toolPage"]) .lb-overlay { z-index: 1100; background: color-mix(in srgb, var(--focusBg, #000000) calc(var(--focusOpacity, 85) * 1%), transparent); }
:where(body[data-page="toolPage"]) .lb-btn { color: var(--focusBtnOff); }
:where(body[data-page="toolPage"]) .lb-btn:hover { color: var(--focusBtnHover); }
:where(body[data-page="toolPage"]) .lb-btn:active { color: var(--focusBtnActive); }
:where(body[data-page="toolPage"]) .lb-btn-close { font-size: var(--focusCloseSize); line-height: .8; }

/* the small "?" usage-notes pop-overs */
:where(body[data-page="toolPage"]) .fc-info-pop { background: var(--ipBg); border: var(--ipBorderW) solid var(--ipBorder); border-radius: var(--ipRadius); color: var(--ipBodyColor); font-size: var(--ipBodySize); }
:where(body[data-page="toolPage"]) .fc-info-title { color: var(--ipTitleColor); font-size: var(--ipTitleSize); }
:where(body[data-page="toolPage"]) .fc-info-close { color: var(--focusBtnOff); }
:where(body[data-page="toolPage"]) .fc-info-close:hover { color: var(--focusBtnHover); }
:where(body[data-page="toolPage"]) .fc-info-btn:hover, :where(body[data-page="toolPage"]) .fc-info-btn[aria-expanded="true"] { color: var(--syHoverIcon); border-color: var(--syHoverBorder); }

/* the round / half-round field-of-view dials keep their outline (it is part of the drawing) */
:where(body[data-page="toolPage"]) :is(.ps-hfov-dial, .fd-hfov-dial) { border-color: var(--ddBorder); }
/* the Palette Swatch drop zone: a dashed outline that stays visible whatever the surface colours */
:where(body[data-page="toolPage"]) .pw-stage:not(.pw-has-image):not(.pw-hot) { border-color: var(--ddBorder); }
/* Film Format Guide: the Extraction panel's Reset sits in the panel's corner (as Film Footage's Optional panel) */
:where(body[data-page="toolPage"]) .control-deck:has(> .film-optional-reset-btn) { position: relative; }

/* spacing the old page column fixed with negative margins (they undid its 1 - 1.5rem gap): now relative to Surface Padding */
body[data-page="toolPage"] .tc-panels { margin-top: calc(-1 * var(--surfaceGap, 12px)); }
body[data-page="toolPage"] :is(#drNote, .ld-hint, .ld-admin-series) { margin-top: 0; }
/* a label carrying its "?" usage-notes button keeps them on one line */
:where(body[data-page="toolPage"]) .fc-field-label:has(> .fc-info-btn) { white-space: nowrap; }

/* the footer "edit" links some tools add (Lens Data, Format Chart, Film Footage, Optimal Viewing): site.css styles them */