:root {
  --paper: #edfaff;
  --paper-deep: #e1f4ff;
  --card: rgba(255, 255, 255, 0.94);
  --ink: #21314b;
  --muted: #8b9aaf;
  --line: #d9ebf5;
  --accent: #61d2e7;
  --accent-dark: #309eb9;
  --sage: #7bd5bf;
  --danger: #f184a3;
  --shadow: 0 22px 60px rgba(87, 185, 218, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 12% 8%, rgba(255, 190, 218, .24), transparent 28%), linear-gradient(180deg, #e8f9ff 0%, #f9fdff 38%, #fff 100%); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1360px, calc(100% - 64px)); margin: 0 auto; position: relative; z-index: 1; }
.ambient { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 0; }
.ambient-one { width: 420px; height: 420px; top: -170px; right: -80px; background: rgba(216, 171, 136, .16); }
.ambient-two { width: 310px; height: 310px; bottom: 8%; left: -160px; background: rgba(143, 166, 150, .12); }

.site-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 0 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 12px 12px 12px 3px; display: grid; place-items: center; font: 700 17px Georgia, serif; transform: rotate(-7deg); }
.brand strong { display: block; font: 700 18px Georgia, serif; letter-spacing: .08em; }
.brand small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .2em; margin-top: 3px; }
.header-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(102, 131, 116, .12); }
.text-button, .mini-button, .icon-button { border: 1px solid var(--line); background: rgba(255,255,255,.45); color: var(--accent-dark); border-radius: 9px; padding: 8px 11px; font-size: 11px; transition: .2s ease; }
.text-button { margin-left: 12px; background: transparent; }
.text-button:hover, .mini-button:hover, .icon-button:hover { border-color: var(--accent); background: #fffaf4; transform: translateY(-1px); }

.hero { display: flex; justify-content: space-between; gap: 40px; padding: 70px 0 56px; align-items: flex-end; }
.hero-copy { max-width: 750px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 19px; font: 500 clamp(44px, 6vw, 82px)/.98 Georgia, serif; letter-spacing: -.04em; }
h1 em { color: var(--accent); font-style: normal; }
.hero-text { max-width: 620px; color: #756658; font-size: 15px; line-height: 1.8; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-chips span { border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px; color: #826f60; font-size: 11px; background: rgba(255,255,255,.36); }
.hero-note { width: 240px; padding: 20px 0 2px 24px; border-left: 1px solid #d7c6b6; color: var(--muted); font-size: 12px; line-height: 1.65; }
.note-number { display: block; color: var(--accent); font: 700 24px Georgia, serif; margin-bottom: 12px; }

.workspace-grid { display: grid; grid-template-columns: minmax(390px, .86fr) minmax(530px, 1.14fr); gap: 22px; align-items: start; }
.card { border: 1px solid rgba(225, 214, 202, .9); background: var(--card); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.input-card { padding: 29px; }
.result-card { padding: 29px; position: sticky; top: 18px; min-height: 660px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font: 500 28px Georgia, serif; letter-spacing: -.02em; }
.step-badge { border-radius: 20px; background: #f3e7dc; color: var(--accent-dark); padding: 7px 11px; font-size: 10px; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin: -8px 0 24px; border: 1px solid var(--line); border-radius: 11px; background: #f1ebe4; }
.mode-tab { border: 0; border-radius: 8px; padding: 10px; background: transparent; color: var(--muted); font-size: 11px; }
.mode-tab.active { background: #fffaf5; color: var(--accent-dark); box-shadow: 0 3px 9px rgba(86,63,45,.08); font-weight: 700; }
.mode-panel[hidden] { display: none; }
.reference-note { margin: 13px 0; padding: 11px 12px; border: 1px solid #ded1c3; border-left: 2px solid var(--accent); border-radius: 9px; background: #fff8f1; color: #8b7765; font-size: 10px; line-height: 1.55; }
.reference-note strong { color: var(--accent-dark); }
.quick-grid { margin-top: 10px; }
.form-block { padding: 3px 0; }
.block-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 21px; }
.block-heading > div { display: flex; gap: 12px; }
.block-index { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #dce6df; color: #50715f; font: 700 13px Georgia, serif; }
.block-index-warm { background: #f0ddd1; color: var(--accent-dark); }
.block-heading h3 { margin: 1px 0 5px; font: 600 17px Georgia, serif; }
.block-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.field-label { display: block; color: #756658; font-size: 11px; margin: 0 0 7px; }
.control { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fffdf9; color: var(--ink); padding: 11px 12px; outline: none; transition: .2s ease; }
.control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(185,111,80,.1); }
.measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.measure-grid label > span { display: block; color: #887565; font-size: 10px; margin: 0 0 5px; }
.measure-grid i { color: var(--accent); font-style: normal; }
.measure-grid .control { padding: 9px 10px; font-size: 12px; }
.helper-text { margin: 10px 0 0; color: #a08d7b; font-size: 10px; line-height: 1.5; }
.form-divider { height: 1px; background: var(--line); margin: 27px 0 24px; }
.action-row { display: flex; align-items: center; gap: 12px; margin-top: 27px; }
.primary-button { flex: 1; border: 0; border-radius: 11px; background: var(--ink); color: #fffaf4; padding: 14px 16px; font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px rgba(51,44,40,.12); transition: .2s ease; }
.primary-button span { float: right; color: #e8b99e; font-size: 17px; line-height: 11px; }
.primary-button:hover { background: var(--accent-dark); transform: translateY(-2px); }
.privacy-note { max-width: 90px; color: #a28f7e; font-size: 9px; line-height: 1.4; }
.form-error { min-height: 14px; margin: 8px 0 0; color: var(--danger); font-size: 11px; }

.icon-button { width: 33px; height: 33px; padding: 0; font-size: 17px; }
.icon-button:disabled { cursor: not-allowed; opacity: .35; }
.result-heading { margin-bottom: 23px; }
.empty-result { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 45px; }
.empty-orbit { width: 130px; height: 130px; border: 1px dashed #cbb9a7; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--accent); font: 600 18px Georgia, serif; margin-bottom: 24px; }
.empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; border: 1px solid #e2d5c8; border-radius: 50%; }
.empty-orbit::before { inset: 16px -16px; transform: rotate(32deg); }
.empty-orbit::after { inset: -12px 19px; transform: rotate(-42deg); }
.empty-result h3 { margin-bottom: 9px; font: 500 21px Georgia, serif; }
.empty-result p { max-width: 300px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.result-content[hidden] { display: none; }
.score-strip { display: flex; align-items: center; gap: 15px; padding: 15px 16px; border: 1px solid var(--line); background: #fffaf5; border-radius: 13px; }
.score-main { min-width: 75px; color: var(--accent-dark); font-family: Georgia, serif; }
.score-number { font-size: 39px; line-height: 1; }
.score-unit { color: var(--muted); font-size: 11px; }
.score-strip strong { display: block; margin-bottom: 4px; font-size: 13px; }
.score-strip p { margin: 0; color: var(--muted); font-size: 10px; }
.score-pill { margin-left: auto; border-radius: 20px; padding: 7px 10px; background: #dce7df; color: #4f705d; font-size: 10px; white-space: nowrap; }
.fit-board-wrap { margin-top: 17px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #fcfaf7; }
#fitCanvas { display: block; width: 100%; height: auto; }
.canvas-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.canvas-legend span { display: inline-flex; align-items: center; gap: 5px; }
.canvas-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-doll { background: #b8a294; } .legend-garment { background: #b96f50; } .legend-alert { background: #c45f59; }
.result-section { margin-top: 23px; }
.result-section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.result-section-title h3 { margin: 0; font: 600 15px Georgia, serif; }
.result-section-title span { color: var(--muted); font-size: 10px; }
.dimension-list { border-top: 1px solid var(--line); }
.dimension-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dimension-name { display: grid; grid-template-columns: 10px auto; column-gap: 6px; align-items: center; }
.dimension-name strong { font-size: 11px; }
.dimension-name small { grid-column: 2; color: var(--muted); font-size: 9px; margin-top: 3px; }
.dimension-dot { width: 8px; height: 8px; border-radius: 50%; }
.dimension-detail { color: #8b7969; font-size: 10px; line-height: 1.4; }
.dimension-status { border-radius: 20px; padding: 5px 8px; font-size: 9px; white-space: nowrap; }
.status-good { background: #deebe1; color: #4e735c; }
.status-tight { background: #f6dfda; color: #a64f47; }
.status-loose { background: #f0e3c9; color: #9b7334; }
.status-unknown { background: #ebe5df; color: #8a7d71; }
.recommendation-box { padding: 5px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,250,244,.55); }
.recommendation-box p { display: flex; gap: 11px; margin: 11px 0; color: #776657; font-size: 11px; line-height: 1.5; }
.recommendation-box p span { color: var(--accent); font: 700 11px Georgia, serif; }
.disclaimer { display: flex; gap: 10px; padding: 12px 13px; margin-top: 18px; border-left: 2px solid #d7b39e; background: #f8eee6; color: #907c6b; font-size: 10px; line-height: 1.55; }
.disclaimer strong { flex: none; color: var(--accent-dark); }
.feedback-box { margin-top: 22px; padding: 17px; border: 1px solid #ded2c5; border-radius: 13px; background: #f4efe8; }
.feedback-box h3 { margin: 0 0 5px; font: 600 16px Georgia, serif; }
.feedback-box > div:first-child p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.feedback-actions, .price-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.feedback-actions button, .price-options button { border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; background: #fffaf5; color: #766454; font-size: 10px; }
.feedback-actions button:hover, .feedback-actions button.selected, .price-options button:hover, .price-options button.selected { border-color: var(--accent); color: var(--accent-dark); background: #f8e6db; }
.feedback-followup { margin-top: 15px; padding-top: 14px; border-top: 1px solid #dfd2c4; }
.feedback-followup label { color: #786658; font-size: 10px; }
.feedback-followup textarea { width: 100%; margin-top: 11px; padding: 9px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fffdf9; outline: none; font-size: 11px; }
.save-feedback { margin-top: 10px; }
.feedback-saved { margin: 13px 0 0; color: var(--sage); font-size: 10px; }
.feedback-complete { border-color: #b8cdbd; }

.method-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 43px 20px 35px; }
.method-strip > div { display: grid; grid-template-columns: 39px 1fr; column-gap: 11px; align-items: center; }
.method-number { grid-row: span 2; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #e5e0d7; color: var(--accent); font: 700 12px Georgia, serif; }
.method-strip strong { font: 600 14px Georgia, serif; }
.method-strip p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 27px; border-top: 1px solid var(--line); color: #a18e7d; font-size: 10px; }

@media (max-width: 980px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .result-card { position: static; }
  .hero { padding-top: 48px; }
  .hero-note { width: 220px; }
}
@media (max-width: 650px) {
  .shell { width: min(100% - 30px, 540px); }
  .site-header { padding-top: 18px; }
  .header-meta > span:not(.status-dot), .text-button { display: none; }
  .hero { display: block; padding: 47px 0 35px; }
  h1 { font-size: 47px; }
  .hero-note { width: auto; margin-top: 30px; }
  .input-card, .result-card { padding: 19px; border-radius: 16px; }
  .section-heading h2 { font-size: 24px; }
  .dimension-row { grid-template-columns: 95px minmax(0, 1fr); }
  .dimension-status { grid-column: 2; justify-self: start; margin-top: -4px; }
  .method-strip { grid-template-columns: 1fr; gap: 17px; padding: 32px 0; }
  .site-footer { display: block; line-height: 1.6; }
  .site-footer span { display: block; }
  .site-footer span + span { margin-top: 6px; }
}
.quick-reference-card { margin: 0 0 18px; padding: 14px; border: 1px solid #dccfc1; border-radius: 12px; background: #fbf7f1; display: grid; gap: 7px; }
.quick-reference-card strong { color: var(--accent-dark); font-size: 13px; }
.quick-reference-card span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.quick-reference-card .field-label { margin-top: 4px; }
.feedback-select { margin: 9px 0 13px; }
.status-reference { background: #eee5d9; color: #846b55; }
.dimension-dot.status-reference { background: #a88f79; }
.score-main .score-number { font-size: 34px; letter-spacing: -1px; }
.fit-visual-stage { position: relative; overflow: hidden; }
.fit-hotspots { position: absolute; inset: 0; pointer-events: none; }
.fit-hotspot { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 4px; color: #fffdf8; text-shadow: 0 1px 2px rgba(65,45,31,.55); font: 600 10px/1.1 system-ui, sans-serif; cursor: help; pointer-events: auto; opacity: .82; transition: opacity .16s, transform .16s, box-shadow .16s; }
.fit-hotspot:hover, .fit-hotspot:focus-visible { z-index: 10; opacity: 1; transform: scale(1.04); box-shadow: 0 5px 15px rgba(83,61,45,.22); outline: 2px solid rgba(255,255,255,.85); }
.fit-hotspot > span:first-child { pointer-events: none; }
.fit-hotspot .hotspot-popover { position: absolute; left: 50%; top: calc(100% + 8px); width: 190px; padding: 10px 11px; display: none; transform: translateX(-50%); border: 1px solid #d9cabc; border-radius: 9px; background: #fffdf9; color: var(--ink); text-align: left; text-shadow: none; box-shadow: 0 10px 24px rgba(74,52,38,.2); pointer-events: none; }
.fit-hotspot:hover .hotspot-popover, .fit-hotspot:focus-visible .hotspot-popover { display: grid; gap: 5px; }
.fit-hotspot .hotspot-popover strong { color: var(--accent-dark); font-size: 11px; }
.fit-hotspot .hotspot-popover small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.fit-hotspot.status-good { background: rgba(88, 139, 94, .72); }
.fit-hotspot.status-tight { background: rgba(180, 76, 69, .76); }
.fit-hotspot.status-loose { background: rgba(190, 135, 48, .78); }
.fit-hotspot.status-reference { background: rgba(126, 101, 76, .76); }
.fit-hotspot.status-unknown { background: rgba(113, 108, 102, .72); }
.fit-hotspot[data-module^="body-"] { background: transparent !important; border-color: transparent; color: transparent; text-shadow: none; opacity: .65; }
.fit-hotspot[data-module^="body-"] > span:first-child { display: none !important; }
.fit-hotspot[data-module^="body-"]:hover, .fit-hotspot[data-module^="body-"]:focus-visible { background: rgba(126, 101, 76, .08) !important; border-color: rgba(126, 101, 76, .35); }
.fit-hotspot[data-module^="body-"] .hotspot-popover { left: 100%; top: 50%; transform: translate(8px, -50%); width: 220px; }

/* Interaction and reading-order polish */
.workspace-grid { align-items: stretch; }
.input-card, .result-card { overflow: hidden; }
.input-card .mode-tabs { position: sticky; top: 8px; z-index: 20; box-shadow: 0 5px 14px rgba(86, 63, 45, .06); }
.mode-panel { scroll-margin-top: 20px; }
.form-block + .form-block { margin-top: 7px; }
.fit-board-wrap { background: #f8f3ed; }
.fit-visual-stage { min-width: 0; }
.canvas-legend { background: rgba(255, 253, 249, .72); }
.dimension-row:hover { background: rgba(248, 239, 229, .5); }
.dimension-detail { overflow-wrap: anywhere; }
.recommendation-box { background: #fcf8f3; }
.template-parameter-card, .saved-records-card, .data-source-card { box-shadow: 0 4px 14px rgba(86, 63, 45, .04); }
.primary-button:focus-visible, .mini-button:focus-visible, .mode-tab:focus-visible, .fit-hotspot:focus-visible, .control:focus-visible { outline: 3px solid rgba(185,111,80,.22); outline-offset: 2px; }

@media (max-width: 980px) {
  .input-card .mode-tabs { position: static; }
  .result-card { overflow: visible; }
}
.fit-board-wrap:has(.fit-hotspots) .canvas-legend { position: relative; }

.saved-records-card { margin: 0 0 18px; padding: 14px; border: 1px solid #dccfc1; border-radius: 12px; background: #fbf7f1; }
.saved-records-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.saved-records-card > div:first-child strong { color: var(--accent-dark); font-size: 13px; }
.saved-records-card > div:first-child span { color: var(--muted); font-size: 10px; text-align: right; }
.saved-record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; margin-top: 8px; }
.saved-record-row .control { padding: 9px 10px; font-size: 11px; }
.saved-records-card small { display: block; margin-top: 9px; color: #a08d7b; font-size: 10px; line-height: 1.5; }
.data-source-card { margin: 0 0 14px; padding: 13px 14px; border: 1px solid #d8e2da; border-radius: 12px; background: #f4f8f3; }
.data-source-card strong { display: block; margin-bottom: 10px; color: #547260; font-size: 12px; }
.data-source-card .helper-text { color: #718878; }
.precise-range-fields { margin: 0 0 18px; padding: 12px; border: 1px dashed #d8c9ba; border-radius: 11px; background: #fffaf5; }
.precise-range-fields[hidden] { display: none; }
.auto-filled { border-color: #b9cdbb; background: #f3f8f1; color: #667b6a; }
.template-parameter-card { margin-top: 15px; padding: 15px; border: 1px solid #d8cfc3; border-radius: 13px; background: #fbf8f3; }
.template-parameter-card[hidden] { display: none; }
.template-parameter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.template-parameter-head strong { display: block; color: var(--accent-dark); font-size: 13px; }
.template-parameter-head span:not(.template-badge) { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.template-badge { flex: none; padding: 5px 8px; border-radius: 16px; background: #e2ece3; color: #52715c; font-size: 9px; white-space: nowrap; }
.template-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.template-meta span { padding: 5px 7px; border: 1px solid #e4d9cc; border-radius: 7px; color: #806e5e; background: #fffdf9; font-size: 10px; }
.template-parameter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.template-parameter-grid div { padding: 8px 9px; border: 1px solid #e6dbcf; border-radius: 8px; background: #fffdf9; }
.template-parameter-grid small { display: block; color: var(--muted); font-size: 9px; }
.template-parameter-grid strong { display: block; margin-top: 4px; color: var(--ink); font-size: 12px; }
.template-rule, .template-disclaimer { margin-top: 11px; color: #8b7969; font-size: 10px; line-height: 1.55; }
.template-rule { padding-top: 10px; border-top: 1px solid #e6dbcf; }
.template-rule strong { color: var(--accent-dark); }
.template-disclaimer { color: #9a806d; }

.standard-size-card { margin: 16px 0 3px; padding: 14px; border: 1px solid #ded1c3; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 250, 244, .92), rgba(246, 238, 230, .72)); }
.standard-size-card .block-heading { margin-bottom: 11px; }
.standard-size-controls { margin-bottom: 10px; }
.standard-size-apply { margin-top: 10px; background: #fffaf5; }
.standard-size-preview { display: grid; gap: 3px; padding: 10px 11px; border-radius: 9px; background: rgba(255, 255, 255, .55); color: #8b7969; font-size: 10px; line-height: 1.5; }
.standard-size-preview strong { color: var(--accent-dark); font-size: 11px; }
.standard-size-preview small { color: #a08d7b; }
.standard-size-preview.is-applied { border: 1px solid #c8d8ca; background: #f3f8f3; }
.template-standard-callout { display: grid; gap: 3px; margin: 12px 0; padding: 10px 11px; border-left: 2px solid var(--sage); background: #f3f8f3; color: #6d806f; font-size: 10px; line-height: 1.5; }
.template-standard-callout strong { color: #547260; font-size: 11px; }
.template-standard-callout small { color: #839387; }
.read-only-preview { border-color: #c8d8ca !important; background: #f3f8f3 !important; color: #667b6a !important; cursor: not-allowed; }
.read-only-preview:disabled { opacity: .84; }
.object-mode-hint { margin: -12px 0 18px; padding: 10px 12px; border: 1px solid #d8e2da; border-radius: 10px; background: #f4f8f3; color: #68806d; font-size: 10px; line-height: 1.5; }
.object-mode-hint strong { color: #52715c; }
#quickPanel, #precisePanel { display: block; }
#quickPanel[hidden], #precisePanel[hidden] { display: none; }
.mode-panel + .mode-panel { margin-top: 4px; }

@media (max-width: 650px) {
  .saved-records-card > div:first-child { display: block; }
  .saved-records-card > div:first-child span { display: block; margin-top: 4px; text-align: left; }
  .saved-record-row { grid-template-columns: 1fr 1fr; }
  .saved-record-row .control { grid-column: 1 / -1; }
  .template-parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Candy-sky visual refresh */
.ambient-one { background: rgba(91, 211, 235, .24); }
.ambient-two { background: rgba(255, 174, 211, .19); }
.site-header { padding-top: 29px; }
.brand-mark { border-color: #61cfe5; background: linear-gradient(145deg, #fff, #dff8ff); color: #309eb9; box-shadow: 0 8px 20px rgba(97, 210, 231, .2); }
.brand strong { color: #21314b; }
.brand small, .header-meta { color: #8294ab; }
.status-dot { background: #61d2e7; box-shadow: 0 0 0 4px rgba(97, 210, 231, .16); }
.hero { padding-top: 65px; }
.hero h1 { color: #21314b; }
.hero h1 em, .eyebrow, .note-number { color: #f080a4; }
.hero-text, .hero-note { color: #7e8fa6; }
.hero-note { border-left-color: #bceaf3; }
.hero-chips span { border-color: #ccecf5; background: rgba(255, 255, 255, .72); color: #559bb1; box-shadow: 0 6px 16px rgba(93, 197, 222, .08); }
.card { border-color: rgba(203, 233, 243, .95); box-shadow: 0 22px 60px rgba(86, 187, 218, .13); }
.input-card, .result-card { background: rgba(255, 255, 255, .92); }
.step-badge { background: #e0f7fb; color: #419db2; }
.section-heading h2, .block-heading h3, .empty-result h3, .feedback-box h3 { color: #21314b; }
.text-button, .mini-button, .icon-button { border-color: #caeaf2; background: rgba(255, 255, 255, .78); color: #369ab5; }
.text-button:hover, .mini-button:hover, .icon-button:hover { border-color: #61d2e7; background: #e9fbff; box-shadow: 0 7px 16px rgba(97, 210, 231, .16); }
.control { border-color: #d4eaf3; background: #fbfeff; color: #21314b; }
.control:focus { border-color: #61d2e7; box-shadow: 0 0 0 3px rgba(97, 210, 231, .16); }
.quick-reference-card, .saved-records-card { border-color: #cdebf3; background: linear-gradient(145deg, #f5fdff, #fff); }
.quick-reference-card strong, .saved-records-card > div:first-child strong { color: #329bb4; }
.data-source-card { border-color: #c9eee5; background: #f1fffb; }
.data-source-card strong { color: #4eaf9c; }
.standard-size-card { border-color: #cbeaf2; background: linear-gradient(145deg, #f2fdff, #fff7fb); }
.standard-size-preview.is-applied, .read-only-preview { border-color: #bce8dc !important; background: #f0fffa !important; }
.standard-size-preview strong { color: #329bb4; }
.standard-size-apply { background: #f7feff; }
.block-index { background: #dcf8f3; color: #46a995; }
.block-index-warm { background: #ffe5ee; color: #dd7595; }
.form-divider, .dimension-list, .dimension-row { border-color: #e1f0f5; }
.reference-note { border-color: #cdeaf2; border-left-color: #61d2e7; background: #f4fdff; color: #718ca0; }
.reference-note strong { color: #329bb4; }
.primary-button { position: relative; overflow: hidden; background: linear-gradient(135deg, #57cce3, #77b8ee); color: #fff; box-shadow: 0 10px 22px rgba(83, 193, 226, .28); }
.primary-button:hover { background: linear-gradient(135deg, #45bed9, #6ca9e8); box-shadow: 0 13px 26px rgba(83, 193, 226, .34); }
.primary-button::before { content: ""; position: absolute; inset: 0 auto 0 -35%; width: 24%; transform: skewX(-18deg); background: rgba(255,255,255,.42); transition: left .55s ease; }
.primary-button:hover::before { left: 112%; }
.score-strip, .feedback-box { border-color: #d7edf4; background: linear-gradient(145deg, #f6fdff, #fff8fc); }
.score-main, .score-strip strong { color: #329bb4; }
.score-pill { background: #dcf8f1; color: #469d8b; }
.fit-board-wrap { border-color: #d5edf4; background: #f6fdff; }
.canvas-legend { border-color: #d9edf3; background: rgba(255, 255, 255, .82); color: #7892a5; }
.legend-doll { background: #74b9e5; }
.legend-garment { background: #ee8eae; }
.legend-alert { background: #f3c36d; }
.status-good { background: #dcf8ef; color: #429c87; }
.status-tight { background: #ffe1eb; color: #c66382; }
.status-loose { background: #fff0cf; color: #b7893a; }
.status-unknown, .status-reference { background: #eaf4fa; color: #6e8da4; }
.recommendation-box { border-color: #d9edf3; background: #fbfeff; }
.disclaimer { border-left-color: #f6b4ca; background: #fff3f7; color: #8c8495; }
.disclaimer strong { color: #ce7291; }
.template-parameter-card { border-color: #d5edf3; background: linear-gradient(145deg, #f5fdff, #fffafe); }
.template-badge { background: #def8f1; color: #4b9b8a; }
.template-meta span, .template-parameter-grid div { border-color: #dfedf3; background: #fff; }
.method-strip { border-color: #dbeef4; }
.method-number { background: #e0f7fb; color: #49a9bf; }
.feedback-actions button, .price-options button { border-color: #d4eaf2; background: #fff; color: #66869b; }
.feedback-actions button:hover, .feedback-actions button.selected, .price-options button:hover, .price-options button.selected { border-color: #f2a1bd; color: #c86888; background: #fff0f5; }
.form-error { color: #e07899; }
.privacy-note, .helper-text { color: #94a8b8; }
#sparkleLayer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: visible; }
.sparkle-particle { position: fixed; display: block; color: #f18faf; font-size: 14px; line-height: 1; text-shadow: 0 0 8px rgba(255, 255, 255, .95); transform: translate(-50%, -50%) scale(.45); animation: sparkle-burst .68s cubic-bezier(.2,.8,.3,1) var(--delay) both; }
.sparkle-particle:nth-child(3n) { color: #64cfe3; }
.sparkle-particle:nth-child(4n) { color: #f4c867; font-size: 11px; }
.is-sparkling { animation: button-pop .34s ease; }
@keyframes sparkle-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(145deg); }
}
@keyframes button-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-1px) scale(1.018); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Fit hotspots follow the candy-sky palette; status is communicated by hue, not muddy yellow-green blocks. */
.fit-hotspot.status-good { background: rgba(104, 207, 192, .72) !important; border-color: rgba(73, 171, 157, .55) !important; color: #246f70 !important; }
.fit-hotspot.status-tight { background: rgba(239, 142, 174, .76) !important; border-color: rgba(210, 94, 132, .55) !important; color: #8c3f63 !important; }
.fit-hotspot.status-loose { background: rgba(246, 190, 112, .78) !important; border-color: rgba(220, 154, 65, .56) !important; color: #855d24 !important; }
.fit-hotspot.status-reference, .fit-hotspot.status-unknown { background: rgba(105, 185, 225, .72) !important; border-color: rgba(66, 145, 190, .5) !important; color: #285d7a !important; }
.panel-heading { margin-bottom: 14px; }
.panel-heading h2 { margin-bottom: 6px; }
.panel-lede { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.workflow-summary { position: sticky; top: 12px; z-index: 18; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 11px 12px; border: 1px solid #ccecf4; border-radius: 13px; background: rgba(247, 254, 255, .94); box-shadow: 0 8px 22px rgba(84, 185, 216, .12); backdrop-filter: blur(12px); }
.workspace-grid > *, .object-card, .workflow-summary, .standard-size-card, .utility-details { min-width: 0; }
.workflow-summary-main { min-width: 0; }
.workflow-kicker { display: block; margin-bottom: 3px; color: #4caabd; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workflow-summary-main strong { display: block; overflow: hidden; color: #2d506a; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.workflow-summary-chips { display: flex; flex: none; gap: 5px; }
.workflow-chip { padding: 5px 7px; border-radius: 99px; background: #e5f8fb; color: #4599ad; font-size: 9px; white-space: nowrap; }
.object-card { margin: 12px 0; padding: 15px; border: 1px solid #d8edf4; border-radius: 16px; background: rgba(255, 255, 255, .78); }
.object-card-garment { border-color: #f1dce8; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,248,252,.88)); }
.object-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.object-title { display: flex; min-width: 0; align-items: flex-start; gap: 10px; }
.object-step { display: grid; flex: none; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #dff7fb; color: #319bb4; font: 700 13px Georgia, serif; }
.object-card-garment .object-step { background: #ffe7f0; color: #d27393; }
.object-kicker { margin: 1px 0 3px; color: #70a2b3; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.object-card-garment .object-kicker { color: #cb8aa1; }
.object-title h3 { margin: 0; color: #21314b; font: 600 18px Georgia, serif; }
.object-title p:last-child { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.object-status { flex: none; padding: 5px 8px; border-radius: 99px; background: #eaf9fa; color: #4c9cae; font-size: 9px; white-space: nowrap; }
.object-card-garment .object-status { background: #fff0f5; color: #c97491; }
.object-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 14px; padding: 4px; border: 1px solid #d8edf4; border-radius: 12px; background: #f3fcfe; }
.object-card-garment .object-mode-picker { border-color: #f2dbe7; background: #fff7fa; }
.object-mode-button { min-width: 0; padding: 8px 7px; border: 0; border-radius: 9px; background: transparent; color: #8b9aaf; text-align: left; transition: .2s ease; }
.object-mode-button strong, .object-mode-button span { display: block; }
.object-mode-button strong { color: inherit; font-size: 11px; }
.object-mode-button span { margin-top: 2px; color: #a5b2c1; font-size: 9px; }
.object-mode-button.active { background: #fff; color: #329bb4; box-shadow: 0 4px 12px rgba(88, 189, 215, .16); }
.object-mode-button.active span { color: #71afbe; }
.object-card-garment .object-mode-button.active { color: #ca7091; box-shadow: 0 4px 12px rgba(226, 139, 171, .15); }
.doll-quick-actions { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(0, 1.35fr) auto auto; align-items: center; gap: 7px; margin: -4px 0 13px; padding: 9px 10px; border: 1px solid #d6eef4; border-radius: 11px; background: linear-gradient(110deg, #f2fcff, #fffafd); }
.doll-quick-actions strong, .doll-quick-actions span { display: block; }
.doll-quick-actions strong { color: #3e7990; font-size: 10px; }
.doll-quick-actions span { margin-top: 2px; color: #91a8b7; font-size: 9px; }
.doll-quick-actions .control { min-width: 0; padding: 8px 9px; font-size: 10px; }
.doll-quick-actions .mini-button { white-space: nowrap; }
.object-mode-content[hidden] { display: none; }
.compact-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compact-fields-wide { grid-template-columns: 1.25fr 1fr 1fr; }
.compact-fields label > span { display: block; margin: 0 0 5px; color: #8194a8; font-size: 10px; }
.compact-fields .control { padding: 9px 10px; font-size: 11px; }
.field-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 8px; }
.field-group-title strong { color: #31556e; font-size: 11px; }
.field-group-title span { color: #93a5b5; font-size: 9px; text-align: right; }
.advanced-fields { margin-top: 12px; border-top: 1px solid #e1f0f5; }
.advanced-fields summary, .utility-details summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0 2px; color: #4d7890; cursor: pointer; list-style: none; }
.advanced-fields summary::-webkit-details-marker, .utility-details summary::-webkit-details-marker { display: none; }
.advanced-fields summary::after, .utility-details summary::after { content: "+"; flex: none; color: #64c8da; font-size: 16px; font-weight: 300; }
.advanced-fields[open] summary::after, .utility-details[open] summary::after { content: "−"; }
.advanced-fields summary strong, .utility-details summary strong { font-size: 11px; }
.advanced-fields summary span, .utility-details summary span { margin-left: auto; color: #9babb9; font-size: 9px; }
.standard-size-card { margin: 0 0 13px; padding: 13px; border-color: #ccecf4; background: linear-gradient(145deg, #f1fcff, #fff8fc); }
.standard-size-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.standard-size-head .field-group-title { display: block; margin: 0 0 4px; }
.standard-size-head .field-group-title span { display: block; margin-top: 3px; color: #78a6b6; text-align: left; }
.standard-size-head p { margin: 0; color: #94a6b5; font-size: 9px; line-height: 1.45; }
.standard-size-card .template-badge { background: #def8f1; color: #4b9b8a; }
.standard-size-card .measure-grid { margin-top: 10px; }
.standard-size-card .standard-size-preview { margin-top: 9px; }
.standard-size-card .standard-size-apply { width: 100%; margin-top: 9px; }
.utility-details { margin: 13px 0 0; padding: 0 12px; border: 1px solid #dbeef4; border-radius: 13px; background: rgba(250, 254, 255, .76); }
.utility-details summary { padding: 10px 0; }
.utility-details summary span { margin-left: auto; }
.utility-details .saved-records-card { margin: 0 0 10px; padding: 0 0 2px; border: 0; background: transparent; box-shadow: none; }
.utility-details .saved-record-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.saved-record-row .control, .object-mode-button, .compact-fields .control { min-width: 0; }
.panel-action-row { position: sticky; bottom: 12px; z-index: 16; margin: 14px -4px 0; padding: 9px; border: 1px solid #ccecf4; border-radius: 14px; background: rgba(247, 254, 255, .94); box-shadow: 0 8px 22px rgba(84, 185, 216, .12); backdrop-filter: blur(12px); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 650px) {
  .shell { width: calc(100% - 30px); max-width: 540px; }
  .workspace-grid { width: 100%; grid-template-columns: minmax(0, 1fr) !important; }
  .input-card, .result-card { width: 100%; }
  .workflow-summary { align-items: flex-start; }
  .workflow-summary-chips { flex-direction: column; align-items: flex-end; }
  .compact-fields, .compact-fields-wide { grid-template-columns: 1fr 1fr; }
  .compact-fields label:first-child { grid-column: 1 / -1; }
  .doll-quick-actions { grid-template-columns: 1fr 1fr; }
  .doll-quick-actions > div { grid-column: 1 / -1; }
  .doll-quick-actions .control { grid-column: 1 / -1; }
  .saved-record-row, .utility-details .saved-record-row { grid-template-columns: 1fr 1fr; }
  .saved-record-row .control, .utility-details .saved-record-row .control { grid-column: 1 / -1; }
}

/* High-contrast interaction layer: controls, choices, and actions should not melt into the pastel cards. */
.object-mode-picker { border-color: #9fcddd; background: #e8f6fa; }
.object-card-garment .object-mode-picker { border-color: #e4b6c9; background: #fff0f5; }
.object-mode-button { color: #557188; }
.object-mode-button span { color: #7893a6; }
.object-mode-button.active { background: #168eab; color: #fff; box-shadow: 0 5px 14px rgba(22, 142, 171, .27); }
.object-mode-button.active strong, .object-mode-button.active span { color: #fff; }
.object-card-garment .object-mode-button.active { background: #d35683; color: #fff; box-shadow: 0 5px 14px rgba(211, 86, 131, .25); }
.object-status { background: #d7f1f6; color: #176d86; font-weight: 700; }
.object-card-garment .object-status { background: #ffe0eb; color: #a83f68; }
.doll-quick-actions { border-color: #9fcddd; background: #edf9fc; }
.doll-quick-actions strong { color: #195d75; }
.doll-quick-actions span { color: #63879c; }
.doll-quick-actions .control { border-color: #9dcbd9; background: #fff; color: #243d58; }
.doll-quick-actions #loadDollProfile { border-color: #168eab; background: #168eab; color: #fff; }
.doll-quick-actions #loadDollProfile:hover { border-color: #0d718a; background: #0d718a; }
.doll-quick-actions #saveDollProfile { border-color: #d35683; color: #ad3f69; background: #fff; }
.doll-quick-actions #saveDollProfile:hover { border-color: #b63d6b; background: #fff0f5; }
.control { border-color: #b7d7e3; background: #fff; color: #203a56; }
.control::placeholder { color: #8aa0b0; }
.control:hover { border-color: #72b8ca; }
.control:focus { border-color: #168eab; box-shadow: 0 0 0 3px rgba(22, 142, 171, .18); }
.compact-fields label > span, .measure-grid label > span { color: #557188; font-weight: 600; }
.measure-grid i { color: #d35683; }
.reference-note { border-color: #9fcddd; border-left-color: #168eab; background: #eefafd; color: #557188; }
.reference-note strong { color: #126e89; }
.mini-button { border-color: #9fcddd; background: #fff; color: #176d86; font-weight: 600; }
.mini-button:hover { border-color: #168eab; background: #e9f8fb; color: #0d718a; }
.standard-size-card .standard-size-apply { border-color: #168eab; background: #168eab; color: #fff; font-weight: 700; }
.standard-size-card .standard-size-apply:hover { border-color: #0d718a; background: #0d718a; }
.utility-details { border-color: #b7dce6; }
.utility-details summary { color: #28647b; }
.panel-action-row { border-color: #9fcddd; }

/* Result hierarchy: remove the oversized empty stage and make every comparison carry its own visual evidence. */
.result-card { min-height: 0; }
.result-card.has-result .empty-result { display: none !important; }
.result-card.has-result .result-content { display: block; }
.result-heading { margin-bottom: 14px; }
.empty-result { min-height: 250px; padding: 28px 30px; }
.empty-orbit { width: 92px; height: 92px; margin-bottom: 16px; font-size: 15px; }
.empty-result h3 { font-size: 19px; }
.score-strip { border-color: #9fcddd; background: linear-gradient(110deg, #eefafd, #fff5fa); box-shadow: 0 8px 18px rgba(54, 151, 179, .08); }
.score-main { color: #147e99; }
.score-number { font-weight: 700; }
.score-strip strong { color: #274863; }
.score-strip p { color: #638199; }
.score-pill { background: #d9f5ec; color: #258572; font-weight: 700; }
.dimension-list { border-top: 0; display: grid; gap: 9px; }
.dimension-row { border: 1px solid #dcecf2; border-radius: 12px; padding: 12px 13px; background: #fff; }
.dimension-row-simple { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-radius: 10px; }
.dimension-row-visual { display: block; }
.dimension-row-visual.status-tight, .dimension-row-visual.status-short { border-color: #f1c2d2; background: linear-gradient(110deg, #fffafd, #fff); }
.dimension-row-visual.status-loose, .dimension-row-visual.status-long { border-color: #f1d7a1; background: linear-gradient(110deg, #fffdf8, #fff); }
.dimension-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dimension-name { min-width: 0; }
.dimension-name strong { color: #263f5a; font-size: 12px; }
.dimension-name small { color: #7892a7; }
.dimension-detail { color: #637c90; font-size: 10px; line-height: 1.45; }
.dimension-compare { display: grid; gap: 7px; margin: 11px 0 9px 16px; }
.compare-line { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 9px; }
.compare-label { display: flex; justify-content: space-between; gap: 6px; color: #5d7890; font-size: 10px; }
.compare-label b { color: #263f5a; font-size: 11px; white-space: nowrap; }
.compare-track { display: block; height: 9px; overflow: hidden; border-radius: 99px; background: #edf3f6; }
.compare-fill { display: block; height: 100%; border-radius: inherit; min-width: 4px; }
.compare-fill-body { background: #68b8df; }
.compare-fill-garment { background: #df7196; }
.dimension-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px dashed #dbeaf0; }
.dimension-delta { flex: none; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.dimension-delta.status-good { background: #d9f5ec; color: #258572; }
.dimension-delta.status-tight, .dimension-delta.status-short { background: #ffe2ec; color: #bd5278; }
.dimension-delta.status-loose, .dimension-delta.status-long { background: #fff0cc; color: #a87723; }
.dimension-delta.status-unknown { background: #eaf3f8; color: #63839a; }
.dimension-delta.status-reference { background: #eaf4fa; color: #4c7894; }
.dimension-status { font-weight: 700; }
.result-section { margin-top: 19px; }
.result-section-title { margin-bottom: 9px; }
.result-section-title h3 { color: #274863; }
.recommendation-box { background: #f7fcfe; }

@media (max-width: 650px) {
  .dimension-row-simple { grid-template-columns: 1fr auto; }
  .dimension-row-simple .dimension-detail { grid-column: 1 / -1; grid-row: 2; }
  .dimension-compare { margin-left: 0; }
  .compare-line { grid-template-columns: 74px minmax(0, 1fr); }
  .dimension-row-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* Mobile-first interaction layer: keep the frequent path in view and move low-frequency detail out of the way. */
.mobile-step-nav { display: none; }
.install-button { display: inline-flex; align-items: center; justify-content: center; }
.install-button[hidden] { display: none; }

@media (max-width: 720px) {
  :root { --mobile-gutter: 12px; }
  html { scroll-padding-top: 112px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .shell { width: calc(100% - 24px); max-width: none; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: max(10px, env(safe-area-inset-top)) 0 9px;
    background: rgba(242, 251, 253, .9);
    border-bottom: 1px solid rgba(159, 205, 221, .72);
    backdrop-filter: blur(16px);
  }
  .brand { gap: 8px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px 10px 10px 3px; font-size: 15px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 7px; }
  .header-meta { gap: 6px; }
  .header-meta > span:not(.status-dot), .header-meta .text-button { display: none; }
  .header-meta .install-button { display: inline-flex; padding: 8px 9px; font-size: 10px; }
  .header-meta .install-button[hidden] { display: none; }
  .hero { display: block; padding: 23px 0 14px; }
  .hero-copy { max-width: none; }
  .hero .eyebrow { margin-bottom: 7px; }
  h1 { margin-bottom: 11px; font-size: clamp(33px, 10vw, 44px); line-height: 1.02; }
  .hero-text { display: -webkit-box; overflow: hidden; margin-bottom: 0; color: #58738b; font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hero-chips { gap: 5px; margin-top: 12px; }
  .hero-chips span { padding: 6px 8px; color: #397a94; font-size: 9px; background: rgba(255,255,255,.6); }
  .hero-note { display: none; }
  .mobile-step-nav {
    position: sticky;
    top: calc(52px + env(safe-area-inset-top));
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid #b7dce6;
    border-radius: 14px;
    background: rgba(247, 254, 255, .94);
    box-shadow: 0 8px 20px rgba(84, 185, 216, .1);
    backdrop-filter: blur(14px);
  }
  .mobile-step-nav a { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; border-radius: 10px; color: #557188; font-size: 11px; font-weight: 700; text-decoration: none; }
  .mobile-step-nav a.is-active { background: #168eab; color: #fff; }
  .mobile-step-nav span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.68); color: #176d86; font-size: 10px; }
  .mobile-step-nav a.is-active span { color: #168eab; }
  .workspace-grid { display: block; width: 100%; }
  .input-card, .result-card { width: 100%; padding: 14px; border-radius: 18px; }
  .input-card { min-width: 0; overflow-x: clip; }
  .result-card { min-width: 0; margin-top: 14px; overflow-x: clip; }
  .panel-heading { margin-bottom: 13px; }
  .panel-heading h2, .result-heading h2 { font-size: 22px; }
  .panel-lede { font-size: 10px; }
  .step-badge { padding: 6px 8px; font-size: 9px; }
  .workflow-summary { position: static; top: auto; z-index: auto; margin-bottom: 10px; padding: 9px 10px; border-radius: 13px; box-shadow: none; backdrop-filter: none; }
  .workflow-summary-main strong { font-size: 10px; }
  .workflow-summary-chips { min-width: 0; flex: 0 1 auto; flex-direction: row; align-items: center; gap: 4px; }
  .workflow-chip { max-width: 76px; overflow: hidden; padding: 4px 5px; font-size: 8px; text-overflow: ellipsis; }
  .object-card { width: 100%; max-width: 100%; min-width: 0; margin: 10px 0; padding: 12px; border-radius: 15px; overflow-x: clip; }
  .object-card-head { gap: 7px; margin-bottom: 10px; }
  .object-title { gap: 8px; }
  .object-step { width: 25px; height: 25px; border-radius: 8px; font-size: 12px; }
  .object-title h3 { font-size: 17px; }
  .object-title p:last-child { font-size: 9px; }
  .object-status { padding: 5px 6px; font-size: 8px; }
  .object-mode-picker { gap: 4px; margin-bottom: 11px; padding: 4px; }
  .object-mode-button { min-height: 52px; padding: 7px 6px; }
  .object-mode-button strong { font-size: 10px; }
  .object-mode-button span { font-size: 8px; }
  .doll-quick-actions { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: -2px 0 11px; padding: 9px; }
  .doll-quick-actions > div { grid-column: 1 / -1; }
  .doll-quick-actions .control { grid-column: 1 / -1; min-height: 42px; }
  .doll-quick-actions .mini-button { min-width: 0; min-height: 40px; padding: 8px 7px; }
  .compact-fields, .compact-fields-wide { grid-template-columns: 1fr 1fr; gap: 7px; }
  .compact-fields label:first-child { grid-column: 1 / -1; }
  .compact-fields .control, .measure-grid .control { min-height: 42px; padding: 9px 9px; font-size: 12px; }
  .compact-fields label > span, .measure-grid label > span { margin-bottom: 4px; font-size: 9px; }
  .field-group-title { margin: 11px 0 7px; }
  .field-group-title strong { font-size: 10px; }
  .field-group-title span { font-size: 8px; }
  .measure-grid { gap: 7px; }
  .advanced-fields summary, .utility-details summary { min-height: 42px; padding: 10px 0 2px; }
  .advanced-fields summary span, .utility-details summary span { max-width: 62%; font-size: 8px; }
  .standard-size-card { width: 100%; max-width: 100%; min-width: 0; margin-bottom: 10px; padding: 10px; }
  .standard-size-head .field-group-title span { display: none; }
  .standard-size-head p { font-size: 8px; }
  .standard-size-card .measure-grid { margin-top: 8px; }
  .standard-size-preview { font-size: 10px; line-height: 1.45; }
  .standard-size-card .standard-size-apply { min-height: 42px; margin-top: 8px; }
  .utility-details { margin-top: 10px; padding: 0 10px; }
  .saved-record-row, .utility-details .saved-record-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .saved-record-row .control, .utility-details .saved-record-row .control { grid-column: 1 / -1; min-height: 42px; }
  .saved-record-row .mini-button { min-height: 40px; }
  .panel-action-row { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 12px -2px 0; padding: 7px; border-radius: 14px; }
  .panel-action-row .primary-button { min-height: 48px; font-size: 13px; }
  .panel-action-row .privacy-note { display: none; }
  .form-error { margin-bottom: 0; }
  .result-heading { margin-bottom: 11px; }
  .result-heading .eyebrow { margin-bottom: 6px; }
  .result-heading .icon-button { width: 40px; height: 40px; }
  .score-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 14px; }
  .score-main { min-width: 68px; }
  .score-number { font-size: 34px; }
  .score-strip strong { font-size: 12px; }
  .score-strip p { font-size: 9px; line-height: 1.4; }
  .score-pill { grid-column: 1 / -1; justify-self: start; margin-left: 0; padding: 6px 9px; font-size: 9px; }
  .fit-board-wrap { margin-top: 11px; border-radius: 14px; }
  .canvas-legend { gap: 8px; padding: 8px 9px; font-size: 8px; }
  .result-section { margin-top: 15px; }
  .result-section-title { align-items: flex-start; gap: 6px; }
  .result-section-title h3 { font-size: 14px; }
  .result-section-title span { font-size: 8px; text-align: right; }
  .dimension-row { padding: 11px; }
  .dimension-name strong { font-size: 11px; }
  .dimension-name small { font-size: 8px; }
  .dimension-detail { font-size: 9px; }
  .compare-line { grid-template-columns: 69px minmax(0, 1fr); gap: 7px; }
  .compare-label { font-size: 9px; }
  .compare-label b { font-size: 10px; }
  .compare-track { height: 8px; }
  .dimension-row-bottom { gap: 6px; }
  .recommendation-box p { gap: 8px; margin: 9px 0; font-size: 10px; }
  .disclaimer { margin-top: 13px; padding: 10px; font-size: 9px; }
  .feedback-box { margin-top: 15px; padding: 12px; }
  .feedback-box h3 { font-size: 14px; }
  .feedback-actions button, .price-options button { min-height: 36px; padding: 7px 8px; font-size: 9px; }
  .method-strip, .site-footer { margin-top: 12px; }
  .method-strip { gap: 12px; padding: 22px 0 18px; }
  .method-strip p { font-size: 9px; }
}

@media (max-width: 359px) {
  .shell { width: calc(100% - 20px); }
  .brand small { display: none; }
  .workflow-summary-chips { display: none; }
  .object-card { padding: 10px; }
  .compact-fields, .compact-fields-wide { grid-template-columns: 1fr; }
  .compact-fields label:first-child { grid-column: auto; }
  .doll-quick-actions { grid-template-columns: 1fr; }
  .doll-quick-actions .mini-button { width: 100%; }
  .score-strip { grid-template-columns: 1fr; }
  .score-pill { grid-column: auto; }
}

/* Scoring is a decision aid: show the reference bands next to the number instead of presenting an unexplained total. */
.score-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; padding: 8px; border: 1px solid #dbeaf0; border-radius: 11px; background: #fbfeff; }
.score-guide span { display: grid; gap: 3px; padding: 6px 5px; border-radius: 8px; text-align: center; }
.score-guide b { font-size: 10px; }
.score-guide small { font-size: 8px; }
.score-guide-fit { background: #e5f8f1; color: #2d8b79; }
.score-guide-adjust { background: #fff4d8; color: #9a7623; }
.score-guide-risk { background: #ffe8d2; color: #a6632e; }
.score-guide-unlikely { background: #ffe3ed; color: #b34e73; }

/* The mobile app shell is intentionally a separate navigation layer. Desktop keeps the full workspace; iOS gets one task per screen. */
.mobile-home, .mobile-archive, .mobile-bottom-nav, .mobile-toast { display: none; }

@media (max-width: 720px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .hero { padding-bottom: 10px; }
  .mobile-home, .mobile-archive { display: none; }
  .mobile-home, .mobile-archive { width: 100%; margin: 0 0 12px; padding: 16px; border-radius: 20px; border-color: rgba(174, 222, 233, .9); box-shadow: 0 14px 35px rgba(84, 185, 216, .13); }
  .mobile-home-head, .mobile-screen-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mobile-home h2, .mobile-screen-heading h2 { margin: 0 0 6px; color: #243a57; font-size: 22px; line-height: 1.15; }
  .mobile-home p:not(.eyebrow), .mobile-screen-heading p:not(.eyebrow) { margin: 0; color: #7890a3; font-size: 10px; line-height: 1.55; }
  .offline-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; color: #2d927d; background: #e8faf5; font-size: 9px; font-weight: 800; white-space: nowrap; }
  .offline-badge i { width: 6px; height: 6px; border-radius: 50%; background: #63cdb1; box-shadow: 0 0 0 3px rgba(99, 205, 177, .16); }
  .mobile-home-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; }
  .mobile-action-primary, .mobile-action-secondary, .mobile-inline-button { min-height: 44px; border-radius: 13px; font-size: 11px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .mobile-action-primary { border: 0; color: #fff; background: linear-gradient(135deg, #56cfe6, #6fabe9); box-shadow: 0 9px 18px rgba(85, 194, 222, .24); }
  .mobile-action-primary span { margin-left: 10px; font-size: 16px; }
  .mobile-action-secondary { padding: 0 12px; border: 1px solid #cfe7ef; color: #398da7; background: #f8fdff; }
  .mobile-action-primary:active, .mobile-action-secondary:active, .mobile-inline-button:active { transform: scale(.98); }
  .mobile-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
  .mobile-quick-card { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-items: center; gap: 1px 7px; min-height: 64px; padding: 10px; border: 1px solid #e2eef4; border-radius: 15px; text-align: left; color: #264463; background: rgba(255, 255, 255, .78); }
  .mobile-quick-card strong { font-size: 11px; }
  .mobile-quick-card small { color: #91a3b2; font-size: 9px; }
  .mobile-quick-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: #fff; background: #74d4e5; font-size: 19px; font-weight: 300; }
  .mobile-quick-card:nth-child(2) .mobile-quick-icon { color: #dd7297; background: #fff0f5; }
  .mobile-recent-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid #edf1f5; border-radius: 14px; background: #fbfdff; }
  .section-tag { display: block; margin-bottom: 3px; color: #8cb6c4; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
  .mobile-recent-card strong { display: block; color: #334b65; font-size: 11px; }
  .mobile-recent-card p { margin: 4px 0 0 !important; color: #98a7b5 !important; font-size: 9px !important; }
  .mobile-inline-button { min-height: 34px; padding: 0 10px; border: 1px solid #cfe8f0; color: #3a93aa; background: #f3fcff; white-space: nowrap; }
  .mobile-screen-heading { margin-bottom: 14px; }
  .mobile-record-block { margin-top: 10px; padding: 12px; border: 1px solid #e2eef4; border-radius: 15px; background: #fff; }
  .mobile-record-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .mobile-record-heading strong, .mobile-record-heading small { display: block; }
  .mobile-record-heading strong { color: #2d4865; font-size: 12px; }
  .mobile-record-heading small { margin-top: 2px; color: #91a4b3; font-size: 9px; }
  .mobile-record-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: #fff; background: #66cfe4; font-size: 12px; font-weight: 800; }
  .mobile-record-icon.warm { color: #ca6e8d; background: #fff0f5; }
  .mobile-record-block .control { width: 100%; min-height: 42px; }
  .mobile-record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
  .mobile-record-actions .mobile-inline-button { width: 100%; }
  .mobile-edit-button { width: 100%; margin-top: 12px; }
  .mobile-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(201, 229, 237, .9); background: rgba(255, 255, 255, .94); box-shadow: 0 -8px 24px rgba(83, 146, 173, .1); backdrop-filter: blur(18px); }
  .mobile-bottom-nav button { display: grid; place-items: center; gap: 2px; min-height: 50px; border: 0; border-radius: 13px; color: #9eabb9; background: transparent; }
  .mobile-bottom-nav button.is-active { color: #2e9ab4; background: #edfbff; }
  .mobile-nav-icon { display: grid; place-items: center; width: 24px; height: 24px; font-size: 22px; line-height: 1; }
  .mobile-bottom-nav small { font-size: 9px; font-weight: 800; }
  .mobile-toast { display: block; position: fixed; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 18px; z-index: 90; padding: 12px 14px; border: 1px solid #bde5ef; border-radius: 14px; color: #315870; background: rgba(247, 254, 255, .96); box-shadow: 0 12px 28px rgba(41, 104, 129, .18); font-size: 11px; line-height: 1.5; text-align: center; }
  .mobile-toast[hidden] { display: none; }
  .mobile-step-nav { margin-top: 0; }
  body[data-mobile-tab="home"] .mobile-home,
  body[data-mobile-tab="archive"] .mobile-archive { display: block; }
  body[data-mobile-tab="home"] .workspace-grid,
  body[data-mobile-tab="home"] .mobile-step-nav,
  body[data-mobile-tab="archive"] .workspace-grid,
  body[data-mobile-tab="archive"] .mobile-step-nav,
  body[data-mobile-tab="result"] .input-card,
  body[data-mobile-tab="result"] .mobile-step-nav,
  body[data-mobile-tab="measure"] .mobile-home,
  body[data-mobile-tab="measure"] .mobile-archive,
  body[data-mobile-tab="measure"] .result-card { display: none; }
  body[data-mobile-tab="result"] .workspace-grid { display: block; }
  body[data-mobile-tab="result"] .result-card { display: block; margin-top: 0; }
  body[data-mobile-tab="measure"] .workspace-grid { display: block; }
  body[data-mobile-tab="measure"] .mobile-step-nav { display: grid; }
  body[data-mobile-tab="measure"][data-mobile-step="1"] .object-card-garment,
  body[data-mobile-tab="measure"][data-mobile-step="1"] .utility-details { display: none; }
  body[data-mobile-tab="measure"][data-mobile-step="2"] .object-card-doll,
  body[data-mobile-tab="measure"][data-mobile-step="2"] .utility-details { display: none; }
  body[data-mobile-tab="measure"] .input-card { margin-top: 0; }
  body[data-mobile-tab="measure"] .panel-action-row { margin-top: 14px; }
  body[data-mobile-tab="measure"] .input-card > .panel-heading { margin-top: 2px; }
  body[data-mobile-tab="measure"] .input-card > .workflow-summary { margin-bottom: 12px; }
  .mobile-bottom-nav { display: grid; }
  .method-strip, .site-footer { display: none; }
  .fit-visual-stage canvas { display: block; width: 100%; height: auto; }
}

.fit-assessment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.fit-assessment[hidden] { display: none !important; }
.fit-assessment-card { display: grid; gap: 4px; min-width: 0; padding: 10px 11px; border: 1px solid; border-radius: 11px; }
.fit-assessment-card strong { font-size: 11px; }
.fit-assessment-card span { color: #294763; font-size: 10px; font-weight: 700; line-height: 1.45; }
.fit-assessment-card small, .fit-assessment-card em { color: #6d8498; font-size: 9px; line-height: 1.45; }
.fit-assessment-card em { overflow-wrap: anywhere; font-style: normal; }
.fit-assessment-tight { border-color: #f1b7cb; background: linear-gradient(135deg, #fff0f5, #fffafd); }
.fit-assessment-tight strong { color: #bd5278; }
.fit-assessment-loose { border-color: #efd39b; background: linear-gradient(135deg, #fff8e7, #fffdf8); }
.fit-assessment-loose strong { color: #a87723; }

.batch-compare-panel { margin-top: 12px; padding: 0 12px; border: 1px solid #b7dce6; border-radius: 13px; background: rgba(247, 254, 255, .76); }
.batch-compare-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; color: #28647b; cursor: pointer; list-style: none; }
.batch-compare-panel summary::-webkit-details-marker { display: none; }
.batch-compare-panel summary::after { content: "+"; flex: none; color: #64c8da; font-size: 17px; font-weight: 300; }
.batch-compare-panel[open] summary::after { content: "−"; }
.batch-compare-panel summary strong { font-size: 11px; }
.batch-compare-panel summary span { margin-left: auto; color: #8ea7b5; font-size: 9px; }
.batch-help { margin: 0 0 8px; color: #7893a6; font-size: 9px; line-height: 1.5; }
.batch-input { display: block; width: 100%; min-height: 110px; padding: 9px; resize: vertical; border: 1px solid #b7d7e3; border-radius: 9px; background: #fff; color: #203a56; outline: none; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.batch-input:focus { border-color: #168eab; box-shadow: 0 0 0 3px rgba(22, 142, 171, .14); }
.batch-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.batch-actions .mini-button { flex: none; }
.batch-actions span { color: #8ea7b5; font-size: 8px; }
.batch-results { display: grid; gap: 7px; margin: 10px 0 12px; }
.batch-empty { margin: 0; padding: 9px; border-radius: 8px; background: #fff; color: #8ea7b5; font-size: 9px; }
.batch-result-card { display: grid; gap: 7px; padding: 10px; border: 1px solid #dbeaf0; border-radius: 10px; background: #fff; }
.batch-result-top, .batch-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.batch-result-top strong { min-width: 0; overflow: hidden; color: #263f5a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.batch-result-top > span { flex: none; color: #147e99; font-size: 11px; font-weight: 700; }
.batch-result-meta { justify-content: flex-start; color: #7892a7; font-size: 9px; }
.batch-result-meta b { flex: none; padding: 4px 6px; border-radius: 99px; background: #eaf4fa; color: #4c7894; font-size: 8px; }
.batch-band-fit { border-color: #bce8dc; }
.batch-band-fit .batch-result-meta b { background: #d9f5ec; color: #258572; }
.batch-band-adjust { border-color: #f0dca5; }
.batch-band-adjust .batch-result-meta b { background: #fff0cc; color: #a87723; }
.batch-band-risk { border-color: #f2c59d; }
.batch-band-risk .batch-result-meta b { background: #ffe5cf; color: #a6632e; }
.batch-band-unlikely { border-color: #f1c2d2; }
.batch-band-unlikely .batch-result-meta b { background: #ffe2ec; color: #bd5278; }
.batch-result-card .mini-button { justify-self: start; padding: 6px 8px; font-size: 9px; }

@media (max-width: 720px) {
  .score-guide { gap: 3px; padding: 6px; }
  .score-guide span { padding: 5px 2px; }
  .score-guide b { font-size: 8px; }
  .score-guide small { font-size: 7px; }
  .fit-assessment { grid-template-columns: 1fr; gap: 6px; }
  .fit-assessment-card { padding: 9px 10px; }
  .fit-assessment-card strong { font-size: 10px; }
  .fit-assessment-card span, .fit-assessment-card small, .fit-assessment-card em { font-size: 8px; }
  .fit-hotspot .hotspot-popover { width: 166px; max-width: calc(100vw - 34px); padding: 8px 9px; }
  .batch-compare-panel { padding: 0 10px; }
  .batch-compare-panel summary span { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .batch-actions { align-items: stretch; flex-direction: column; }
  .batch-actions .mini-button { width: 100%; min-height: 40px; }
  .batch-actions span { text-align: center; }
}

.image-ocr-panel { margin-top: 12px; padding: 0 12px; overflow: hidden; border: 1px solid #efbdd4; border-radius: 13px; background: linear-gradient(135deg, rgba(255, 248, 252, .96), rgba(244, 252, 255, .96)); }
.image-ocr-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; color: #a64b75; cursor: pointer; list-style: none; }
.image-ocr-panel summary::-webkit-details-marker { display: none; }
.image-ocr-panel summary::after { content: "−"; flex: none; color: #e27aa8; font-size: 17px; font-weight: 300; }
.image-ocr-panel:not([open]) summary::after { content: "+"; }
.image-ocr-panel summary strong { font-size: 11px; }
.image-ocr-panel summary span { margin-left: auto; color: #9a9eae; font-size: 9px; }
.ocr-dropzone { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 74px; padding: 10px; border: 1px dashed #e18eb2; border-radius: 11px; background: rgba(255, 255, 255, .86); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.ocr-dropzone:hover, .ocr-dropzone.is-dragging { border-color: #1597b3; background: #f2fcff; transform: translateY(-1px); }
.ocr-dropzone-icon { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #ffe4ef; color: #db6796; font-size: 21px; font-weight: 300; }
.ocr-dropzone strong { display: block; color: #28445f; font-size: 10px; }
.ocr-dropzone p { margin: 3px 0 0; color: #8196a6; font-size: 8px; line-height: 1.45; }
.ocr-dropzone .mini-button { margin-left: auto; flex: none; }
.ocr-workbench { display: grid; gap: 9px; margin-top: 10px; padding: 10px; border-radius: 11px; background: rgba(255, 255, 255, .72); }
.ocr-workbench[hidden], .ocr-raw[hidden], .score-guide[hidden] { display: none !important; }
.ocr-preview-wrap { position: relative; min-height: 80px; overflow: hidden; border: 1px solid #d7e8ee; border-radius: 9px; background: #eef8fb; }
.ocr-preview-wrap img { display: block; width: 100%; max-height: 190px; object-fit: contain; }
.ocr-preview-wrap span { position: absolute; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 99px; background: rgba(31, 54, 76, .76); color: #fff; font-size: 8px; }
.ocr-preview-wrap span[data-tone="success"] { background: #1c9c87; }
.ocr-preview-wrap span[data-tone="warning"] { background: #bd8127; }
.ocr-preview-wrap span[data-tone="error"] { background: #c45a7e; }
.ocr-fields { display: grid; gap: 8px; }
.ocr-form-head, .garment-candidate-summary, .ocr-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ocr-form-head strong, .garment-candidate-summary strong { color: #2f6881; font-size: 10px; }
.ocr-form-head span, .garment-candidate-summary span, .ocr-actions span { color: #8a9cac; font-size: 8px; }
.ocr-variant-picker { display: grid; gap: 4px; padding: 7px; border-radius: 8px; background: #fff5df; }
.ocr-variant-picker > span { color: #956d28 !important; font-size: 8px !important; }
.ocr-variant-picker .control { min-height: 30px; }
.ocr-meta-fields, .ocr-measure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ocr-fields label { display: grid; gap: 3px; }
.ocr-fields label > span { color: #66849a; font-size: 8px; }
.ocr-fields .control { min-height: 31px; padding: 5px 7px; font-size: 10px; }
.ocr-measure-input.is-recognized { border-color: #63c9dc; background: #f1fcff; }
.ocr-confidence { margin: 0; padding: 6px 8px; border-radius: 7px; background: #eef8fb; color: #4b7891; font-size: 8px; line-height: 1.45; }
.ocr-confidence-高 { background: #e0f7f0; color: #287e70; }
.ocr-confidence-中 { background: #fff2d8; color: #956d28; }
.ocr-confidence-低 { background: #ffe8ef; color: #a84e72; }
.ocr-header-map { margin: 0; padding: 6px 8px; border: 1px dashed #9fd6df; border-radius: 7px; background: #f5fdff; color: #4e8091; font-size: 8px; line-height: 1.5; }
.ocr-inference-warning { margin: 0; padding: 7px 8px; border-radius: 7px; background: #fff1d6; color: #946c28; font-size: 8px; line-height: 1.5; }
.ocr-column-map { display: grid; gap: 4px; padding: 7px 8px; border: 1px dashed #e3c680; border-radius: 7px; background: #fffaf0; color: #816f4b; font-size: 8px; line-height: 1.45; }
.ocr-column-map strong { color: #976a1d; font-size: 9px; }
.ocr-column-map span { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ocr-column-map b { color: #5c7181; font-weight: 500; }
.ocr-column-map i { color: #a6792c; font-style: normal; }
.ocr-raw { max-height: 72px; overflow: auto; padding: 7px; border-radius: 7px; background: #f5f7fa; color: #748596; white-space: pre-wrap; font: 8px/1.45 ui-monospace, Consolas, monospace; }
.ocr-actions { padding-top: 2px; }
.ocr-actions .mini-button { flex: none; }
.garment-candidate-summary { margin-top: 11px; padding-top: 10px; border-top: 1px dashed #e7c7d7; }
.garment-candidate-list { display: grid; gap: 7px; margin-top: 8px; }
.garment-candidate-card { position: relative; display: grid; gap: 3px; padding: 8px 30px 8px 9px; border: 1px solid #d9e8ee; border-radius: 9px; background: #fff; }
.garment-candidate-card > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.garment-candidate-card strong { overflow: hidden; color: #304964; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.garment-candidate-card span, .garment-candidate-card p { color: #8096a6; font-size: 8px; }
.garment-candidate-card p { margin: 0; }
.candidate-remove { position: absolute; top: 6px; right: 7px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #f4f7f9; color: #91a3af; cursor: pointer; }
.candidate-compare-button { width: 100%; min-height: 38px; margin-top: 9px; }
.candidate-compare-button:disabled { opacity: .45; cursor: not-allowed; }
.candidate-results { display: grid; gap: 7px; margin: 9px 0 11px; }

/* Details are rendered in the document layer so a hotspot near the canvas edge
   can never be cut off by the result card or the visual stage. */
.fit-tooltip {
  position: fixed;
  z-index: 100;
  display: grid;
  gap: 5px;
  width: min(236px, calc(100vw - 24px));
  padding: 10px 11px;
  border: 1px solid #9fcddd;
  border-radius: 11px;
  background: rgba(255, 255, 255, .98);
  color: #294763;
  box-shadow: 0 12px 28px rgba(41, 104, 129, .2);
  font-size: 10px;
  line-height: 1.45;
  pointer-events: none;
  transform: translateX(-50%);
}
.fit-tooltip[hidden] { display: none; }
.fit-tooltip strong { color: #176d86; font-size: 11px; }
.fit-tooltip small { color: #637c90; font-size: 9px; }
.fit-hotspot { touch-action: manipulation; }

@media (max-width: 720px) {
  .ocr-meta-fields, .ocr-measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocr-dropzone { align-items: flex-start; flex-wrap: wrap; }
  .ocr-dropzone .mini-button { width: 100%; max-width: 100%; margin-left: 0; flex-basis: 100%; box-sizing: border-box; }
  .ocr-actions { align-items: stretch; flex-direction: column; }
  .ocr-actions .mini-button { width: 100%; min-height: 38px; }
  .ocr-actions span { text-align: center; }
}