:root { --ink:#222; --muted:#666; --bg:#f6f3ee; --card:#fff; --accent:#1f6f8b; --wood:#cfa468; --err:#a33; --ok:#2a6d3a; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
.top { background:#fff; border-bottom:4px solid var(--wood); }
.brand { display:flex; gap:12px; align-items:center; padding:10px 16px; }
.brand .name { display:block; font-size:1.4rem; letter-spacing:.02em; }
.brand .tag { color:var(--muted); font-size:.9rem; }
.grid { display:grid; gap:16px; padding-top:16px; padding-bottom:16px;
  grid-template-columns: minmax(280px, 380px) 1fr; grid-template-areas: "cfg pv" "ord pv"; align-items:start; }
.config { grid-area:cfg; } .preview { grid-area:pv; } .order { grid-area:ord; }
.card { background:var(--card); border-radius:10px; padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
h1 { font-size:1.35rem; margin:0 0 4px; } h2 { font-size:1.15rem; margin:0 0 4px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muted { color:var(--muted); } .small { font-size:.85rem; }
label { display:block; font-weight:600; font-size:.9rem; margin:10px 0 0; }
input, textarea, button { font:inherit; }
input:not([type=checkbox]), textarea { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid #c9c2b8; border-radius:6px; background:#fff; }
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color:var(--err); }
.dims { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint { font-size:.82rem; color:var(--muted); margin:6px 0 0; }
.hint.warn { color:#8a5a00; }
.opts .check { font-weight:500; display:flex; gap:8px; align-items:flex-start; }
.opts .check input { margin-top:4px; width:18px; height:18px; }
.opts .qty input { max-width:110px; }
.pv { width:100%; aspect-ratio: 4 / 3; display:flex; align-items:center; justify-content:center; }
.pv svg { width:100%; height:100%; }
.price { border-top:1px solid #eee; margin-top:8px; padding-top:10px; text-align:center; }
.price .label { font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.dimtxt { text-align:center; font-size:.9rem; margin:2px 0 0; }
.dimtxt b { display:inline-block; min-width:4.2em; text-align:right; margin-right:.4em; }
.price .amount { font-size:1.9rem; font-weight:700; color:var(--accent); }
button[type=submit] { margin-top:14px; width:100%; padding:13px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; font-size:1.05rem; cursor:pointer; }
button[type=submit]:disabled { opacity:.6; cursor:wait; }
.hp { position:absolute; left:-9999px; }
.status { margin-top:12px; padding:12px 14px; border-radius:8px; background:#eef6f9; border-left:4px solid var(--accent); font-size:.92rem; }
.status.ok { background:#eef7f0; border-color:var(--ok); } .status.err { background:#fbeeee; border-color:var(--err); }
.status.demo { background:#fff7e6; border-color:#d89a1c; }
.status h3 { margin:0 0 4px; font-size:1rem; } .status pre { white-space:pre-wrap; font:inherit; font-size:.85rem; margin:8px 0 0; }
.foot { padding-bottom:28px; font-size:.85rem; color:var(--muted); }
.foot .qr { display:flex; align-items:center; gap:12px; } .foot .qr img { image-rendering:pixelated; }
a { color:var(--accent); }
@media (max-width: 820px) {
  .grid { grid-template-columns:1fr; grid-template-areas: "cfg" "pv" "ord"; }
  .pv { aspect-ratio: 1 / 1; }
}
@media (max-width: 420px) { .two { grid-template-columns:1fr; } .brand .tag { font-size:.8rem; } }
/* traveler printing */
body.traveler { background:#ddd; }
.traveler .bar { background:#fff; padding:10px 16px; display:flex; gap:12px; align-items:center; position:sticky; top:0; }
.traveler .page { background:#fff; width:8.5in; max-width:100%; margin:16px auto; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.traveler .page svg { display:block; width:100%; height:auto; }
@page { size: letter; margin: 0; }
@media print { body.traveler { background:#fff; } .noprint { display:none; }
  .traveler .page { margin:0; box-shadow:none; width:8.5in; height:11in; page-break-after:always; break-after:page; } }
/* order: mailto fallback + design code */
.fallback { background:#f3f7fa; border-color:var(--accent); }
.fallback textarea { font:13px/1.35 ui-monospace, Menlo, Consolas, monospace; }
code#code { font-weight:700; letter-spacing:.02em; word-break:break-all; }
.traveler #pages.msg { background:#fff; max-width:8.5in; margin:16px auto; padding:16px; }

.datebox{position:relative;display:flex;gap:6px;align-items:stretch}
.datebox #date{flex:1;min-width:0}
.calbtn{flex:0 0 auto;padding:0 12px;border:1px solid #c9bfae;border-radius:6px;background:#fff;font-size:18px;cursor:pointer;line-height:1}
.calbtn:hover,.calbtn:focus{border-color:#1f6f8b}
.datepick{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.notice { font-size:.85rem; background:#fff7e0; border:1px solid #e4c26a; color:#5c4300; border-radius:6px; padding:6px 10px; margin:8px 0 0; }
.oversize { font-size:.85rem; font-weight:700; background:#fdecea; border:1px solid #e3a59e; color:#b42318; border-radius:6px; padding:6px 10px; margin:6px 0; }

/* inside-size inputs: custom 1/4" spinner (native one hidden; typed values snap to 1/16") */
.spin { display:flex; align-items:stretch; }
.spin input { flex:1; min-width:0; -moz-appearance:textfield; appearance:textfield; }
.spin input::-webkit-inner-spin-button, .spin input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.spin-btns { display:flex; flex-direction:column; margin-left:2px; }
.spin-btns button { flex:1; padding:0 .45em; font-size:.6em; line-height:1; cursor:pointer; border:1px solid #bbb; background:#f4f4f4; touch-action:none; user-select:none; -webkit-user-select:none; }
.spin-btns button:hover { background:#e6e6e6; }