:root{
  color-scheme: light;
  --paper:#f4ecdd; --card:#fffdf8; --ink:#3a2b22; --ink-2:#6d5c4d;
  --muted:#9c8c7a; --line:#e8ddca; --line-2:#dccdb4;
  --coral:#df9b73; --coral-d:#c67c50; --coral-l:#f7e6d7;
  --success:#5b8c6e; --success-l:#e4f0e8;
  --shadow:0 1px 2px rgba(58,43,34,.05), 0 18px 40px rgba(58,43,34,.10);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:18px;
}
*{box-sizing:border-box}
body{ margin:0; font-family:var(--sans); color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%, #faf4ea 0%, var(--paper) 55%, #efe4d0 100%);
  min-height:100vh; -webkit-font-smoothing:antialiased; }
a{ color:var(--coral-d); }
.wrap{ max-width:640px; margin:0 auto; padding:22px 20px 48px; }

/* header */
.top{ display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 0 2px; }
.top img{ width:52px; height:52px; object-fit:contain; }
.top .name{ font-weight:800; letter-spacing:-.02em; font-size:1.02rem; }
.top .name span{ display:block; font-weight:600; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

/* buttons */
.btn{ font:inherit; font-weight:700; cursor:pointer; border-radius:14px; border:1px solid transparent; text-align:center;
  padding:15px 22px; font-size:1.02rem; width:100%; transition:transform .06s ease, background .15s ease; text-decoration:none; display:inline-block; }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--ink); color:#fdf7ee; } .btn-primary:hover{ background:#2c2019; }
.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--line-2); } .btn-ghost:hover{ background:#faf3e7; }
.btn:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; }

/* start / hero */
.hero{ text-align:center; padding:38px 30px 34px; margin-top:14px; }
.hero .badge{ width:128px; height:128px; object-fit:contain; margin:0 auto 6px; display:block; }
.eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--coral-d); }
.hero h1{ font-size:1.9rem; line-height:1.12; letter-spacing:-.02em; margin:10px 0 8px; text-wrap:balance; }
.hero p{ color:var(--ink-2); font-size:1.02rem; line-height:1.5; margin:0 auto 24px; max-width:30ch; }
.hint-row{ margin-top:16px; font-size:.85rem; color:var(--muted); }

/* form */
.form-head{ padding:22px 24px 4px; } .form-head h2{ font-size:1.4rem; letter-spacing:-.01em; margin:0; }
.form-head p{ color:var(--ink-2); font-size:.92rem; margin:6px 0 0; }
.form-body{ padding:14px 24px 22px; display:flex; flex-direction:column; gap:18px; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:7px; }
.field .req{ color:var(--coral-d); } .field .sub{ font-weight:500; color:var(--muted); font-size:.78rem; }
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea,select{
  width:100%; font:inherit; color:var(--ink); background:#fffefb; border:1.5px solid var(--line-2);
  border-radius:12px; padding:14px 15px; transition:border-color .15s ease, box-shadow .15s ease; }
textarea{ min-height:120px; resize:vertical; line-height:1.5; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-l); }
.row2{ display:flex; gap:14px; } .row2>*{ flex:1; min-width:0; }
.seg{ display:flex; gap:8px; }
.seg label{ flex:1; }
.seg input{ position:absolute; opacity:0; width:0; }
.seg span{ display:block; text-align:center; font-weight:600; font-size:.9rem; padding:11px 8px; border-radius:11px; cursor:pointer;
  background:#fffefb; border:1.5px solid var(--line-2); color:var(--ink-2); }
.seg input:checked + span{ background:var(--ink); color:#fdf7ee; border-color:var(--ink); }
.stepper{ display:flex; width:150px; border:1.5px solid var(--line-2); border-radius:12px; overflow:hidden; background:#fffefb; }
.stepper button{ width:44px; font:inherit; font-size:1.3rem; font-weight:700; background:transparent; border:0; color:var(--ink); cursor:pointer; }
.stepper button:hover{ background:#f6ecdd; }
.stepper input{ border:0; text-align:center; border-radius:0; padding:12px 0; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.drop{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; cursor:pointer;
  border:2px dashed var(--line-2); border-radius:14px; padding:22px; background:#fffdf7; position:relative; }
.drop:hover{ border-color:var(--coral); background:#fdf5ea; }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop .big{ font-weight:700; font-size:.95rem; } .drop .small{ font-size:.8rem; color:var(--muted); }
.thumbs{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.thumbs figure{ margin:0; width:72px; height:72px; border-radius:11px; overflow:hidden; border:1px solid var(--line-2); }
.thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.kiosk-note{ display:flex; gap:12px; align-items:flex-start; background:#fdf5ea; border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; }
.kiosk-note b{ display:block; font-size:.92rem; } .kiosk-note span{ font-size:.83rem; color:var(--ink-2); line-height:1.45; }

.form-foot{ display:flex; gap:12px; padding:6px 24px 24px; }
.form-foot .btn{ width:auto; } .form-foot .grow{ flex:1; }
.err{ color:var(--coral-d); font-size:.85rem; margin:10px 24px 0; padding:10px 14px; background:#fbeee4; border:1px solid #eecfb8; border-radius:10px; }

/* confirmation */
.done{ text-align:center; padding:34px 28px 26px; }
.check{ width:60px; height:60px; border-radius:50%; background:var(--success); display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 8px 20px rgba(91,140,110,.35); }
.done h2{ font-size:1.55rem; letter-spacing:-.02em; margin:0 0 6px; }
.done .lead{ color:var(--ink-2); margin:0 auto 20px; max-width:34ch; line-height:1.5; }
.ticket{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:var(--coral-l); border:1px dashed var(--coral); border-radius:14px; padding:12px 26px; }
.ticket .lbl{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--coral-d); font-weight:700; }
.ticket .code{ font-size:1.7rem; font-weight:800; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.qr-card{ margin:22px 20px 4px; padding:20px; border:1px solid var(--line); border-radius:16px; background:#fffdf7; display:flex; gap:18px; align-items:center; text-align:left; }
.qr-card .qr{ width:120px; height:120px; flex:0 0 auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; }
.qr-card .qr svg, .qr-card .qr img{ width:100%; height:100%; display:block; }
.qr-card h3{ margin:0 0 4px; font-size:1rem; } .qr-card p{ margin:0; font-size:.85rem; color:var(--ink-2); line-height:1.45; }
.qr-card .u{ font-size:.76rem; color:var(--muted); margin-top:7px; word-break:break-all; }
.socials{ display:flex; justify-content:center; gap:22px; margin:22px 0 4px; font-size:.82rem; font-weight:600; }
.socials a{ text-decoration:none; }
.foot-note{ text-align:center; color:var(--muted); font-size:.78rem; margin-top:26px; }

/* portal */
.portal-head{ text-align:center; padding:26px 24px 8px; }
.portal-head .code{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--coral-d); font-weight:700; }
.portal-head h1{ font-size:1.5rem; margin:6px 0 2px; letter-spacing:-.01em; }
.portal-head .sub{ color:var(--muted); font-size:.88rem; }
.steps{ display:flex; gap:6px; padding:16px 22px; }
.steps .st{ flex:1; text-align:center; }
.steps .dot{ width:14px; height:14px; border-radius:50%; background:var(--line-2); margin:0 auto 6px; }
.steps .st.done .dot{ background:var(--success); } .steps .st.now .dot{ background:var(--coral); box-shadow:0 0 0 4px var(--coral-l); }
.steps .lb{ font-size:.66rem; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.steps .st.now .lb, .steps .st.done .lb{ color:var(--ink-2); }
.sec{ padding:18px 24px; border-top:1px solid var(--line); }
.sec h3{ margin:0 0 10px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.kv{ font-size:.95rem; line-height:1.5; } .kv b{ color:var(--ink); }
.quote-box{ background:var(--coral-l); border:1px solid #eecfb8; border-radius:12px; padding:14px 16px; }
.quote-box .amt{ font-size:1.6rem; font-weight:800; }
.gallery{ display:flex; flex-wrap:wrap; gap:9px; }
.gallery a{ width:84px; height:84px; border-radius:11px; overflow:hidden; border:1px solid var(--line-2); display:block; }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.thread{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.msg{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:.92rem; line-height:1.45; }
.msg.customer{ align-self:flex-end; background:var(--ink); color:#fdf7ee; border-bottom-right-radius:4px; }
.msg.shop{ align-self:flex-start; background:#fff; border:1px solid var(--line-2); border-bottom-left-radius:4px; }
.msg .when{ display:block; font-size:.66rem; opacity:.7; margin-top:4px; }
.msg-empty{ color:var(--muted); font-size:.88rem; }
.inline-form{ display:flex; gap:10px; align-items:flex-end; }
.inline-form textarea{ min-height:46px; }
.inline-form .btn{ width:auto; white-space:nowrap; }
.pill{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 11px; border-radius:20px; background:var(--coral-l); color:var(--coral-d); }