:root{--bg:#fff;--fg:#16191c;--mut:#5f6673;--line:#e3e6ea;--accent:#1565c0;--danger:#c0392b;--radius:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font-family:-apple-system,Hiragino Sans,sans-serif;font-size:16px;line-height:1.6}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:0 16px;display:flex}header a{align-items:center;display:inline-flex}.brand{font-weight:700;text-decoration:none}main{padding:24px 16px 32px}h1{margin:0 0 24px;font-size:16px;font-weight:700}p{overflow-wrap:anywhere;margin:0 0 16px}a{color:var(--accent);align-items:center;min-width:48px;min-height:48px;display:inline-flex}button,input{font:inherit}button,summary,.photo-select{cursor:pointer;min-width:48px;min-height:48px}button{border:1px solid var(--line);border-radius:var(--radius);color:var(--accent);background:var(--bg);padding:10px 16px}button:disabled{color:var(--mut);background:var(--line);cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.photo-select:focus-within{outline:2px solid var(--fg);outline-offset:3px}input:not([type=file]){border:1px solid var(--mut);border-radius:var(--radius);width:100%;min-height:48px;color:var(--fg);background:var(--bg);margin-top:8px;padding:10px 12px;display:block}.customer-label{margin-bottom:24px;display:block}fieldset{border:0;min-width:0;margin:0 0 24px;padding:0}legend{margin-bottom:8px;padding:0}.mode-switch{margin-bottom:24px}.mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.mode-tabs button{min-width:0;color:var(--fg)}.mode-tabs button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}#selection-panel{min-width:0}.product-list{gap:8px;margin:-4px;padding:4px;display:flex;overflow-x:auto}.product-list button{white-space:nowrap;flex-shrink:0}.product-list button[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}.color-picker{margin-bottom:24px}.color-code-label{font-weight:700;display:block}input.color-code-input{letter-spacing:.04em;min-height:60px;font-size:22px}.color-suggestions{border-top:1px solid var(--line);margin-top:8px}.color-suggestions p{margin:12px 0 0}.color-suggestions ul{margin:0;padding:0;list-style:none}.color-suggestions li{border-bottom:1px solid var(--line)}.color-suggestions button{width:100%;min-width:0;color:var(--fg);text-align:left;border:0;border-radius:0;align-items:center;gap:12px;padding:8px 0;display:flex}.color-swatch-small{border:1px solid var(--line);flex:0 0 40px;width:40px;height:40px}.selected-color{grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;min-height:96px;margin:24px 0;display:grid}.selected-color>p{grid-column:1/-1;margin:0}.selected-color strong{overflow-wrap:anywhere;margin-top:2px;font-size:20px;display:block}.selected-swatch{border:1px solid var(--line);width:88px;height:72px;display:block}.color-load-error{margin:16px 0}.color-load-error p{color:var(--danger);margin-bottom:8px}.color-group-label{margin-bottom:8px;display:block}.hue-tabs{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px;margin-bottom:16px;display:grid}.hue-tabs button{min-width:0;color:var(--fg);padding:8px 4px}.hue-tabs button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}.color-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;min-width:0;display:grid}.color-choice{min-width:0;min-height:76px;color:var(--fg);gap:6px;padding:6px;font-size:14px;display:grid}.color-choice[aria-pressed=true]{border:2px solid var(--accent);padding:5px}.color-choice-swatch{border:1px solid var(--line);width:100%;height:38px;display:block}.photo-input{gap:8px;display:grid}.photo-preview img,.diff-photo{width:100%;height:auto;display:block}.photo-preview{border-radius:var(--radius);overflow:hidden}.photo-select{border:1px solid var(--line);border-radius:var(--radius);color:var(--accent);justify-content:center;align-items:center;padding:12px;display:flex;position:relative}.photo-select input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.submit-area{margin-top:24px}.muted{color:var(--mut);font-size:14px}.disabled-reason{margin-bottom:8px}.primary{background:var(--accent);border-color:var(--accent);width:100%;height:56px;color:var(--bg)}.primary:disabled{border-color:var(--line)}.progress{place-items:center;min-height:65vh;display:grid;position:relative;overflow:hidden}.progress-photo{object-fit:contain;opacity:.4;width:100%;height:100%;position:absolute}.progress-content{text-align:center;padding:24px 16px;position:relative}.progress-content p{background:var(--bg);padding:4px 8px}.elapsed{font-variant-numeric:tabular-nums}.result-photo{border:0;border-radius:0;width:100%;padding:0;display:block;position:relative}.result-photo img{width:100%;height:auto;min-height:48px;display:block}.image-label{background:var(--bg);color:var(--fg);padding:4px 8px;font-size:14px;position:absolute;top:8px;left:8px}.image-hint{margin:8px 0 16px}.result-caption{margin-bottom:24px}.result-caption p{margin:0}.wall-color-code{font-size:20px;font-weight:700}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{padding:12px 0}.details-content{padding:8px 0 16px}dl{margin:16px 0}dl div{grid-template-columns:80px minmax(0,1fr);gap:16px;padding:4px 0;display:grid}dd{overflow-wrap:anywhere;margin:0}.new-photo{margin-top:24px}.error-note p{color:var(--danger)}.error-note{margin:16px 0}.history-list{margin:0 0 16px;padding:0;list-style:none}.history-list li{border-bottom:1px solid var(--line)}.history-row{text-align:left;width:100%;color:var(--fg);border:0;border-radius:0;align-items:center;gap:16px;padding:16px 0;display:flex}.history-row img{object-fit:cover;flex-shrink:0;width:96px;height:80px}.history-text{overflow-wrap:anywhere;gap:4px;min-width:0;display:grid}