:root{
  --pine:#1f4337; --pine-soft:#2c5a49; --paper:#f7f4ee; --card:#ffffff;
  --ink:#23211c; --ink-soft:#6c675c; --line:#e7e1d6; --amber:#b5710f; --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.6; font-size:16px; padding:0 16px 56px;}
.wrap{max-width:440px; margin:0 auto}
header{padding:32px 4px 20px; text-align:center}
header img.logo{max-width:180px; height:auto; margin:0 auto 16px; display:none}
.eyebrow{font-size:12px; letter-spacing:.18em; color:var(--pine); font-weight:700}
h1{font-size:24px; font-weight:800; margin:8px 0 6px; letter-spacing:-.02em}
.tagline{font-style:italic; color:var(--pine); font-weight:700; font-size:14px; margin:0 0 8px}
header p.lead{margin:0; color:var(--ink-soft); font-size:14px; line-height:1.6}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; margin-bottom:16px}
label{display:block; font-size:13px; font-weight:700; margin:0 0 7px; color:var(--ink)}
.field{margin-bottom:16px}
input,select,textarea{width:100%; padding:13px 14px; font-size:16px; font-family:inherit; border:1px solid var(--line); border-radius:11px; background:#fdfcfa; color:var(--ink); appearance:none; -webkit-appearance:none}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(31,67,55,.12)}
.selwrap{position:relative}
.selwrap::after{content:''; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.btn{display:flex; align-items:center; justify-content:center; width:100%; padding:16px; font-size:16.5px; font-weight:800; font-family:inherit; border-radius:13px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--pine); text-decoration:none}
.btn-primary{background:var(--pine); color:#fff; border-color:var(--pine)}
.btn-primary:active{background:var(--pine-soft)}
.btn-danger{color:#9b2c2c; border-color:#e6c9c9}
.btn:disabled{opacity:.5}
.guide{background:#f1f5f3; border:1px solid #dce6e1; border-radius:12px; padding:14px 16px; margin-bottom:16px}
.guide p{display:flex; gap:9px; margin:0 0 9px; font-size:13px; color:var(--ink); line-height:1.5; word-break:keep-all}
.guide p:last-child{margin-bottom:0}
.guide .gi{flex:none}
.guide b{color:var(--pine)}
.warn{background:#fdf3e2; border:1px solid #f0dcba; color:#7a5410; border-radius:12px; padding:13px 15px; font-size:12.5px; line-height:1.55; margin-top:14px; word-break:keep-all}
.nowbox{display:flex; gap:10px; margin-bottom:18px}
.nowbox .cell{flex:1; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center}
.nowbox .lbl{font-size:11px; color:var(--ink-soft); font-weight:700; margin-bottom:4px}
.nowbox .val{font-size:16px; font-weight:800; color:var(--pine)}
.photos img{width:100%; border-radius:12px; border:1px solid var(--line); display:block; margin-bottom:12px}
.done{text-align:center; padding:14px 8px}
.done .check{width:68px; height:68px; border-radius:50%; background:var(--pine); color:#fff; font-size:36px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px}
.done h2{font-size:20px; font-weight:800; margin:0 0 8px}
.done p{color:var(--ink-soft); font-size:14px; margin:0; line-height:1.6}
.code{font-size:38px; font-weight:800; color:var(--pine); letter-spacing:.08em; background:var(--paper); border:2px dashed #c9d3ce; border-radius:14px; padding:18px; text-align:center; margin-bottom:16px}
.clbl{font-size:13px; color:var(--ink-soft); font-weight:700; text-align:center; margin-bottom:8px}
.spinner{width:42px; height:42px; border:4px solid var(--line); border-top-color:var(--pine); border-radius:50%; margin:0 auto 18px; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#9b2c2c; color:#fff; padding:13px 20px; border-radius:30px; font-size:14px; font-weight:600; opacity:0; transition:.25s; pointer-events:none; z-index:60; max-width:88%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--pine)}
.modal-bg{position:fixed; inset:0; background:rgba(20,18,14,.5); display:none; align-items:flex-end; justify-content:center; z-index:50}
.modal-bg.show{display:flex}
.modal{background:var(--card); width:100%; max-width:440px; border-radius:20px 20px 0 0; padding:24px 22px 26px}
.modal h3{margin:0 0 12px; font-size:18px; font-weight:800}
.modal p{margin:0 0 20px; font-size:14.5px; line-height:1.6}
.modal-btns{display:flex; gap:10px}
.modal-btns .btn{flex:1; padding:15px; font-size:16px}
.row{display:flex; gap:10px}
.grow{flex:1; min-width:0}
.homelink{display:flex; align-items:center; justify-content:center; padding:14px; margin-top:6px; border:1px dashed #c9d3ce; border-radius:13px; text-decoration:none; color:var(--pine); font-weight:700; font-size:15px}
footer{text-align:center; margin-top:22px; font-size:12px; color:var(--ink-soft)}