/* CollaPlay 黃 × 深藍 neo-brutalist，色票與 ~/Projects/event-survey 的 collaplay 主題同源，
   同一場活動的問卷、打卡牆、這頁看起來才是同一件事。 */
:root{
  --paper:#fff; --bg:#faf4ec; --ink:#241c4f; --gray:#8a7663; --faint:#f0e3d2;
  --accent:#ec8a2d; --accent-soft:#f5bd83; --accent-pale:#fdf1e2; --red:#c0432b;
  --green:#3f8f5b;
  --bw:2.5px; --radius:18px;
  --ff:'Chiron GoRound TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ff);
  font-size:17px; line-height:1.75; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px; margin:0 auto; padding:20px 16px 64px}

.head{
  background:var(--ink); color:#fff; border:var(--bw) solid var(--ink);
  border-radius:var(--radius); padding:20px 20px 18px; box-shadow:5px 5px 0 var(--accent);
}
.kicker{display:inline-block; background:var(--accent); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:2px; padding:3px 12px; border-radius:20px}
.head h1{font-size:23px; line-height:1.4; margin:12px 0 6px; font-weight:800}
.head .meta{font-size:14px; line-height:1.8; color:#d9d2ea; margin:0}

.card{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--radius);
  padding:18px 18px 20px; margin-top:18px; box-shadow:4px 4px 0 var(--faint);
}
.lead{font-size:15.5px; line-height:1.85; color:#413a63; margin:0 0 4px}
.lead strong{color:var(--ink)}
.label{font-size:13px; font-weight:700; letter-spacing:1.5px; color:var(--gray); margin:0 0 8px}
.req{color:var(--red); margin-left:4px}

input[type=text], textarea{
  width:100%; font-family:var(--ff); font-size:17px; color:var(--ink);
  background:#fffdf9; border:2px solid var(--ink); border-radius:12px; padding:11px 13px;
}
input[type=text]:focus, textarea:focus{outline:3px solid var(--accent-soft); outline-offset:1px}
textarea{resize:vertical; min-height:76px; line-height:1.7}

.group-title{font-size:13px; font-weight:700; letter-spacing:2px; color:var(--gray);
  margin:20px 0 10px; padding-bottom:6px; border-bottom:2px dashed var(--faint)}
.group-title:first-of-type{margin-top:8px}

.item{
  display:block; width:100%; text-align:left; font-family:var(--ff); cursor:pointer;
  background:#fffdf9; border:2px solid var(--ink); border-radius:14px;
  padding:12px 14px; margin-bottom:10px; transition:transform .12s, box-shadow .12s;
}
.item:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--faint)}
.item.on{background:var(--accent-pale); border-color:var(--accent); box-shadow:3px 3px 0 var(--accent-soft)}
.item-row{display:flex; align-items:baseline; gap:10px}
.item-name{font-size:17px; font-weight:700; color:var(--ink); flex:1}
.item-en{font-size:12.5px; color:var(--gray); font-weight:400}
.item-price{font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:2px; vertical-align:middle}
.dot.high{background:#c0432b}
.dot.low{background:#3f8f5b}
.dot.none{background:#fff; border:1.5px solid var(--gray)}
.item-sub{font-size:13px; color:var(--gray); margin-top:2px}
.tag-extra{display:inline-block; background:var(--red); color:#fff; font-size:12px; font-weight:700;
  padding:1px 8px; border-radius:10px; margin-left:6px}

.opts{margin-top:12px; padding-top:12px; border-top:2px dashed var(--faint)}
.opts .label{margin-bottom:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-family:var(--ff); font-size:15px; font-weight:700; cursor:pointer;
  background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:20px; padding:6px 16px;
}
.chip.on{background:var(--ink); color:#fff}

.submit{
  width:100%; margin-top:22px; font-family:var(--ff); font-size:18px; font-weight:800; letter-spacing:2px;
  color:#fff; background:var(--accent); border:var(--bw) solid var(--ink); border-radius:14px;
  padding:14px; cursor:pointer; box-shadow:4px 4px 0 var(--ink);
}
.submit:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.submit[disabled]{opacity:.55; cursor:not-allowed}

.msg{margin-top:12px; font-size:15px; font-weight:700; color:var(--red); min-height:22px}
.hintline{font-size:13.5px; color:var(--gray); line-height:1.75; margin-top:10px}

.done{text-align:center; padding:28px 20px}
.done .big{font-size:22px; font-weight:800; margin:10px 0 4px}
.done .pick{
  display:inline-block; background:var(--accent-pale); border:2px solid var(--accent);
  border-radius:14px; padding:12px 20px; margin:12px 0 6px; font-size:19px; font-weight:800;
}
.linkbtn{
  display:inline-block; margin-top:14px; font-size:15px; font-weight:700; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:12px; padding:9px 20px; cursor:pointer;
  font-family:var(--ff);
}
.foot{text-align:center; font-size:13px; color:var(--gray); margin-top:26px; line-height:1.8}