/* QuoteToFit Global — shared styles (site, installer app, customer link). No external fonts or scripts. */
:root {
  color-scheme: light;
  --paper: #f3f4f1; --card: #ffffff; --ink: #1c2025; --muted: #59616b; --line: #d8dcd5; --soft: #e9ebe6;
  --tape: #f0b400; --on-tape: #1c2025; --brand: #1857c4; --on-brand: #ffffff;
  --ok: #15803d; --warn: #a16207; --bad: #b91c1c; --ok-bg: #e8f5ec; --warn-bg: #fdf3dc; --bad-bg: #fde8e8;
  --radius: 8px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121417; --card: #1b1f24; --ink: #e8ebe5; --muted: #a2a9b2; --line: #2e343b; --soft: #23282e;
    --tape: #f5bd14; --on-tape: #14171b; --brand: #7fb0ff; --on-brand: #0d1117;
    --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --ok-bg: #12301d; --warn-bg: #3a2c0b; --bad-bg: #3b1515;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); }
.hidden, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 10px 18px; border-radius: 6px; border: 1px solid transparent; font: 600 1rem/1.2 var(--font); cursor: pointer; text-decoration: none; color: inherit; background: var(--soft); }
.btn:focus-visible, .inp:focus-visible, select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn-tape { background: var(--tape); color: var(--on-tape); }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-line { background: transparent; border-color: var(--line); }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; color: var(--bad); border-color: var(--line); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 auto; }
.stack > * + * { margin-top: 12px; }

/* forms */
.field { display: block; margin-bottom: 14px; }
.field > span, .lab { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.inp, select.inp, textarea.inp { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: 400 1rem/1.3 var(--font); }
textarea.inp { min-height: 96px; resize: vertical; }
.inp.need { border-color: var(--warn); background: var(--warn-bg); }
.hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* cards and lists */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--soft); color: var(--muted); }
.tag-new { background: #e0ecff; color: #1d4ed8; }
.tag-quoted { background: var(--warn-bg); color: var(--warn); }
.tag-won { background: var(--ok-bg); color: var(--ok); }
.tag-lost { background: var(--bad-bg); color: var(--bad); }
.note { border-left: 4px solid var(--tape); background: var(--card); padding: 10px 12px; border-radius: 4px; }
.note-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.note-bad { border-left-color: var(--bad); background: var(--bad-bg); }
.note-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.estimate { font-size: .8rem; color: var(--muted); }

/* measuring view */
.mv { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mv > svg { display: block; width: 100%; height: auto; }
.mv .h { cursor: grab; }
.mv-loupe { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; overflow: hidden; background: #000; }
.size-out { font: 700 clamp(1.5rem, 6vw, 2.2rem)/1.1 var(--font); }
.legend { display: flex; gap: 14px; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.logo { font-weight: 800; letter-spacing: -.01em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.logo b { background: var(--tape); color: var(--on-tape); padding: 1px 6px; border-radius: 4px; }
.spacer { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; z-index: 50; max-width: calc(100% - 32px); }
.progress { height: 6px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--tape); }
table.t { width: 100%; border-collapse: collapse; }
table.t th, table.t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { font-size: .8rem; color: var(--muted); font-weight: 600; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media print { .no-print { display: none !important; } body { background: #fff; } .card { box-shadow: none; border: 0; } }

.navrow { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 6px 16px; }
.navrow::-webkit-scrollbar { display: none; }