:root{--ink:#17332f;--muted:#71807a;--teal:#187d68;--mint:#e8f3ed;--line:#e1e7df;--paper:#f6f7f2;--orange:#c27842}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--paper);font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dda34a;outline-offset:3px}a{color:inherit;text-decoration:none}.topbar{height:84px;border-bottom:1px solid var(--line);background:#fbfcf8;display:flex;align-items:center;justify-content:space-between;padding:0 4.8%;gap:20px}.brand{display:flex;align-items:center;font-size:28px;font-weight:750;letter-spacing:-1px;gap:10px}.brandmark{height:34px;width:34px;border-radius:10px;background:var(--ink);color:white;font-size:26px;display:flex;align-items:center;justify-content:center;position:relative}.brandmark span{font-size:15px;position:absolute;top:0;right:1px;color:#a6cf87}.brandtag{font-size:14px;font-weight:500;letter-spacing:1px;border-left:1px solid #d4dbd1;padding-left:14px;margin-left:5px}.topbar nav{display:flex;gap:7px}.topbar nav button{padding:10px 18px;background:transparent;color:#65766e;border-radius:8px;font-size:14px}.topbar nav button.active{background:var(--ink);color:#fff}.prototype{display:flex;align-items:center;gap:7px;font-size:14px;color:#737e70;white-space:nowrap}.prototype i{width:6px;height:6px;background:#bba969;border-radius:50%}main{max-width:1536px;margin:auto;padding:0 4.8%}.intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:43px 0 30px}.eyebrow{color:var(--teal);font-size:14px;letter-spacing:2.3px;font-weight:700;margin-bottom:10px}h1{font-size:34px;line-height:1.4;letter-spacing:-1px;margin:0 0 10px;font-weight:650}p{margin:0}.intro p{color:var(--muted);font-size:14px}.outline{background:transparent;border:1px solid #cbd6cb;border-radius:7px;padding:10px 16px;font-size:14px;white-space:nowrap}.outline span{margin-left:20px}.journey{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:31px}.journey>div{display:flex;align-items:center;gap:13px}.journey b{color:#829a80;font-size:14px;font-weight:500}.journey span{font-size:14px;font-weight:650}.journey small{display:block;color:var(--muted);font-size:14px;font-weight:400;margin-top:2px}.journey i{color:#a0afa1;font-style:normal}.demo-grid{display:grid;grid-template-columns:356px 1fr;gap:40px;align-items:start}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:14px;font-weight:600}.dot{height:6px;width:6px;display:inline-block;border-radius:50%;margin-right:7px}.teal{background:var(--teal)}.muted{color:var(--muted);font-weight:400}.sync-label{color:var(--teal);font-weight:400;font-size:14px}.phone{max-width:356px;margin:auto;background:#fff;border:6px solid #203c34;border-radius:34px;min-height:614px;box-shadow:0 12px 30px #1c3d2b0b;overflow:hidden}.phone-bar{height:30px;display:flex;align-items:center;justify-content:space-between;padding:3px 18px;font-size:14px;font-weight:650}.phone-bar span:last-child{letter-spacing:2px;font-size:14px}.phone-content{padding:20px 24px 23px}.phone-brand{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.phone-brand strong{font-size:19px;letter-spacing:-.7px}.phone-brand span{color:var(--muted);font-size:14px;border:1px solid var(--line);padding:2px 7px;border-radius:20px}.phone-banner{height:102px;border-radius:13px;background:#eaf0e1;position:relative;overflow:hidden;padding:17px 19px;margin-bottom:24px}.phone-banner:before,.phone-banner:after{content:'';position:absolute;border:1px solid #afc396;border-radius:50%;height:140px;width:140px;right:-35px;top:15px;transform:rotate(25deg)}.phone-banner:after{right:-2px;top:39px;height:125px;width:125px;background:#ceddb6a0}.phone-banner small{font-size:14px;letter-spacing:1px;color:#58744c;position:relative;z-index:1}.phone-banner b{display:block;font-size:19px;line-height:1.5;margin-top:5px;position:relative;z-index:1}.step-tag{font-size:14px;letter-spacing:1px;color:var(--teal);font-weight:650;display:block;margin:10px 0}.phone h2{font-size:23px;letter-spacing:-.8px;line-height:1.45;margin:6px 0 8px;font-weight:650}.phone p{font-size:14px;color:var(--muted);line-height:1.8}.phone label{font-size:14px;font-weight:600;display:block;margin:22px 0 8px}.phone input{border:1px solid #cfd9cd;border-radius:8px;background:#fcfdf9;padding:12px;width:100%;color:var(--ink);font-size:14px}.primary{color:white;background:var(--teal);padding:12px 14px;border-radius:8px;width:100%;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;margin-top:15px}.primary:disabled{background:#9eb3a6;cursor:default}.phone-help{border-top:1px solid var(--line);margin-top:22px;padding-top:15px;font-size:14px;color:var(--muted);text-align:center}.phone-help strong{color:#496753;font-weight:500}.error{color:#af4e39!important;background:#fff0e7;padding:9px;border-radius:7px;margin-top:12px!important}.back{background:transparent;padding:0;font-size:14px;color:var(--muted);margin:0 0 12px}.choice{border:1px solid #dce3d8;border-radius:8px;padding:13px 12px;display:flex!important;justify-content:space-between;align-items:center;margin:10px 0!important;font-size:14px!important;cursor:pointer}.choice:has(input:checked){border-color:var(--teal);background:#f0f7ee}.choice input{width:16px;accent-color:var(--teal)}.choices{margin-top:24px}.identity{padding:13px 14px;border:1px solid var(--line);border-radius:9px;margin-top:22px}.identity b{display:block}.identity span{color:var(--muted);font-size:14px}.privacy{font-size:14px!important;margin-top:14px!important}.check-circle{width:46px;height:46px;border-radius:50%;background:#e4f2df;color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:25px;margin:8px 0 16px}.ticket{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d3ddcb;background:#f8faf2;border-radius:12px;margin:23px 0 20px;padding:17px 12px}.ticket>div{padding:0 10px}.ticket>div+div{border-left:1px dashed #c9d6bc}.ticket small,.ticket span{display:block;font-size:14px;color:#74816b}.ticket b{display:block;font-size:30px;line-height:1.4;font-weight:550;letter-spacing:-1px;margin:7px 0}.ticket em{font-size:14px;font-weight:400;font-style:normal;letter-spacing:0}.notice h3{font-size:14px;margin:0 0 9px}.notice ul{padding-left:16px;margin:0;color:var(--muted);font-size:14px;line-height:2.1}.success-time{font-size:14px!important;margin-top:16px!important}.text-button{background:transparent;color:var(--muted);font-size:14px;padding:0;text-decoration:underline;margin-top:18px}.try-hint{font-size:14px;margin-top:17px;display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}.try-hint strong{color:var(--teal);font-weight:550}.try-hint button{border-bottom:1px solid #c6d2c2;background:transparent;color:#6a7c6b;padding:2px 0;font-size:14px}.dashboard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.dash-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:23px 25px;border-bottom:1px solid var(--line)}.dash-top h2{font-size:17px;letter-spacing:-.5px;margin:0 0 2px;font-weight:650}.dash-top p{font-size:14px;color:var(--muted)}.live-badge{font-size:14px;background:var(--mint);color:var(--teal);padding:5px 10px;border-radius:20px;white-space:nowrap}.dash-body{padding:23px 25px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{border-right:1px solid var(--line);padding:0 15px 0 0}.stat:last-child{border:0}.stat small{display:block;font-size:14px;color:var(--muted)}.stat strong{display:block;font-size:38px;line-height:1.2;letter-spacing:-1.5px;font-weight:550;margin:11px 0 6px}.stat strong em{font-size:14px;font-weight:400;letter-spacing:0;margin-left:5px;font-style:normal;color:var(--muted)}.stat span{font-size:14px;color:#82917e}.stat.arrived strong{color:var(--teal)}.stat.pending strong{color:var(--orange)}.progress-row{display:flex;justify-content:space-between;margin:25px 0 8px;font-size:14px}.progress-row b{color:var(--teal)}.progress{height:5px;background:#edf1e7;border-radius:6px;overflow:hidden}.progress div{height:100%;background:var(--teal);transition:width .3s}.table-tools{margin:27px 0 14px;display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}.table-tabs{display:flex;gap:18px}.table-tabs button{color:#899386;background:transparent;font-size:14px;padding:5px 0}.table-tabs button.active{color:var(--ink);border-bottom:2px solid var(--ink);font-weight:650}.table-tabs span{font-size:14px;margin-left:4px;color:var(--muted)}.table-tools input{border:1px solid var(--line);border-radius:5px;width:148px;font-size:14px;padding:7px 9px;background:#fcfdf9}.data-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}.data-table th{text-align:left;font-weight:500;font-size:14px;color:#85907f;padding:9px 10px;background:#f5f7f0}.data-table td{padding:13px 10px;border-bottom:1px solid #edf0e9;overflow-wrap:anywhere}.data-table th:nth-child(1){width:26%}.data-table th:nth-child(2){width:30%}.data-table th:nth-child(3){width:22%}.status-pill{font-size:14px;padding:4px 7px;background:#fbf0df;color:#a17d42;border-radius:4px;white-space:nowrap}.status-pill.done{background:#eaf3e5;color:#538252}.time-cell{font-size:14px;color:#8b9685}.empty{text-align:center;padding:35px!important;color:var(--muted)}.table-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:16px;color:var(--muted);font-size:14px}.table-bottom button{background:transparent;color:var(--teal);font-size:14px;padding:3px 0}.demo-note{margin:18px 0;color:#89937e;font-size:14px;line-height:1.9}.demo-note b{color:#637b5c;font-weight:600;margin-right:8px}.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:12px}.stage-title{display:flex;gap:14px;align-items:center;margin-bottom:20px}.stage-title>b{color:var(--teal);background:#e5eddd;border-radius:50%;width:33px;height:33px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}.stage-title h2{font-size:16px;margin:0 0 2px}.stage-title p{font-size:14px;color:var(--muted)}.mini-screen{background:#fff;border:1px solid #d9e1d5;border-radius:18px;padding:22px;min-height:424px}.mini-brand{display:block;font-size:18px;font-weight:700;letter-spacing:-.8px;margin-bottom:30px}.tag{font-size:14px;color:var(--teal);display:block;letter-spacing:.5px;margin-bottom:12px}.mini-screen h3{font-size:21px;line-height:1.55;margin:0 0 12px;letter-spacing:-.5px}.mini-screen p{font-size:14px;color:var(--muted);line-height:1.9}.mini-screen label{font-size:14px;display:block;margin:22px 0 7px}.mock-input{border:1px solid var(--line);padding:11px;border-radius:7px;font-size:14px}.mock-primary{background:var(--teal);color:white;text-align:center;font-size:14px;padding:11px 7px;border-radius:6px;margin-top:16px}.light-box{background:#f4f7ee;border-radius:8px;padding:13px;margin-top:20px;font-size:14px}.light-box b{font-size:14px}.light-box p{margin-top:5px}.mock-choice{display:flex;justify-content:space-between;padding:13px 11px;font-size:14px;border:1px solid var(--line);border-radius:7px;margin-top:13px}.mock-choice.selected{border-color:var(--teal);background:#f1f7ee}.small{font-size:14px!important;margin-top:14px!important}.qr-screen{background:#e8efdf}.qr{display:block;width:136px;height:136px;margin:20px auto 16px;background:#fff;padding:9px;border-radius:10px}.qr-screen>b{font-size:14px;display:block;text-align:center}.qr-screen>p{text-align:center;margin-top:5px;font-size:14px}.ticket-mini{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);padding:13px 7px;border-radius:8px;margin-top:18px;background:#fafbf5}.ticket-mini>div{padding:0 8px}.ticket-mini>div+div{border-left:1px dashed #c9d6bc}.ticket-mini small,.ticket-mini span{display:block;font-size:14px;color:var(--muted)}.ticket-mini b{font-size:25px;display:block;font-weight:500;margin:4px 0}.ticket-mini em{font-size:14px;font-style:normal}.stage-caption{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.8}.connection-strip{display:flex;gap:24px;justify-content:center;align-items:center;margin:30px 0;padding:20px;background:#e8efdf;border-radius:8px;font-size:14px}.connection-strip span{color:#72866a}.connection-strip b{font-weight:550}.scope-note{border-top:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:20px;padding:22px 0;font-size:14px}.scope-note p{color:var(--muted);line-height:1.9}.guest-standalone{display:flex;justify-content:center;gap:130px;align-items:center;padding:55px 0}.standalone-info h1{font-size:48px;line-height:1.5}.standalone-info p{color:var(--muted);font-size:14px;margin-top:25px}.qr-inline{margin-top:32px;display:flex;align-items:center;gap:16px;font-size:14px}.qr-inline img{width:86px;background:#fff;padding:7px;border-radius:9px}.qr-inline small{color:var(--muted);font-size:14px}.local-note{text-align:center;font-size:14px;color:var(--muted);margin-top:18px;line-height:1.8}.guest-standalone>div:last-child{width:356px}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:38px;padding:24px 0;color:#96a08d;font-size:14px}footer b{font-weight:400;margin-left:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;background:var(--ink);color:white;border-radius:8px;font-size:14px;box-shadow:0 4px 20px #183b3020;display:none;z-index:10}.toast.visible{display:block}.pager{display:flex;gap:10px;align-items:center}.pager button:disabled{opacity:.4;cursor:default}.admin-count-note{color:var(--muted);font-size:14px;margin:10px 0 0}
@media(min-width:1500px){main{padding:0 65px}.demo-grid{grid-template-columns:356px 1fr;gap:65px}}@media(max-width:1100px){.brandtag{display:none}.topbar{padding:0 3%}.topbar nav button{padding:9px 11px}main{padding:0 3%}.demo-grid{gap:24px;grid-template-columns:330px 1fr}.phone-content{padding:18px 20px}.dash-top,.dash-body{padding:20px}.flow-grid{grid-template-columns:repeat(2,1fr)}.mini-screen{min-height:410px}.guest-standalone{gap:65px}.journey small{font-size:14px}}@media(max-width:800px){.topbar{height:auto;flex-wrap:wrap;padding:14px 5%;gap:12px}.brand{font-size:24px}.brandmark{width:28px;height:28px;font-size:22px}.topbar nav{order:3;width:100%;justify-content:space-between;gap:3px}.topbar nav button{font-size:14px;padding:8px 9px}.prototype{font-size:14px}main{padding:0 5%}.intro{padding:28px 0 23px;align-items:flex-start}.intro h1{font-size:26px}.intro p{font-size:14px}.intro .outline{font-size:14px;padding:9px}.intro .outline span{margin-left:6px}.journey{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0}.journey>i{display:none}.journey span{font-size:14px}.journey small{font-size:14px}.demo-grid{display:block}.guest-column{max-width:356px;margin:auto auto 32px}.section-label{font-size:14px}.dash-body,.dash-top{padding:18px}.stat strong{font-size:31px}.stat small{font-size:14px}.table-tools{gap:8px}.table-tabs{gap:13px}.data-table td{padding:12px 7px}.data-table th{padding:9px 7px}.table-tools input{width:133px}.connection-strip{flex-wrap:wrap;gap:12px;font-size:14px}.flow-grid{gap:24px 16px}.mini-screen{padding:17px;min-height:425px}.mini-screen h3{font-size:20px}.flow-stage{min-width:0}.stage-title{gap:8px}.stage-title h2{font-size:14px}.stage-title p{font-size:14px}.stage-title>b{width:27px;height:27px;flex-shrink:0}.guest-standalone{display:block;padding:30px 0}.standalone-info{display:none}.guest-standalone>div:last-child{width:100%}.scope-note{display:block}.scope-note p{margin-top:10px}footer{font-size:14px}footer>span:last-child{display:none}}@media(max-width:440px){.intro .outline{display:none}.flow-grid{grid-template-columns:1fr}.mini-screen{max-width:330px;min-height:405px;margin:auto}.stage-caption,.stage-title{max-width:330px;margin-left:auto;margin-right:auto}.mini-screen .qr{height:145px;width:145px}.connection-strip{justify-content:flex-start}.stat strong{font-size:29px}.stats{gap:12px}.table-tools input{width:125px}.table-tabs{gap:10px}.table-tabs button{font-size:14px}.data-table{font-size:14px}.data-table th:nth-child(1){width:24%}.data-table th:nth-child(2){width:31%}.data-table th:nth-child(3){width:22%}.time-cell{font-size:14px}}@media print{.topbar,footer,.outline,.toast{display:none!important}body{background:white}main{max-width:none;padding:0}#flow-view{display:block!important}.view:not(#flow-view){display:none!important}.intro{padding:5px 0 20px}.flow-grid{grid-template-columns:repeat(4,1fr);gap:12px}.mini-screen{padding:15px;min-height:410px}.stage-title h2{font-size:14px}.stage-title p{font-size:14px}.mini-screen h3{font-size:18px}.mini-brand{font-size:16px}.qr{width:120px;height:120px}.connection-strip{gap:12px}*{print-color-adjust:exact;-webkit-print-color-adjust:exact}@page{size:A4 landscape;margin:12mm}}

/* Readable type and touch-friendly demo guidance. */
:root { --muted: #596c61; }
body { font-size: 16px; }
.demo-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 36px; }
.guest-column, .dashboard-column { min-width: 0; }
.phone { max-width: 400px; }
.guest-standalone > div:last-child { width: 400px; }
.topbar nav button, .intro p, .journey span, .section-label,
.phone p, .phone label, .phone input, .primary,
.identity span, .notice ul, .notice h3, .data-table,
.table-tabs button, .table-tools input { font-size: 16px; }
.phone h2 { font-size: 28px; }
.phone-brand strong { font-size: 23px; }
.phone-banner { min-height: 116px; height: auto; }
.phone-banner b { font-size: 22px; }
.phone-banner small { font-size: 12px; }
.phone-brand span, .step-tag { font-size: 13px; }
.phone-bar, .phone-bar span:last-child { font-size: 11px; }
.primary, .phone input { min-height: 52px; }
.choice { min-height: 56px; font-size: 16px !important; }
.choice input { width: 20px; min-height: 20px; }
.phone-help, .back, .text-button { font-size: 14px; }
.privacy, .success-time { font-size: 14px !important; }
.ticket small, .ticket span { font-size: 14px; }
.ticket b { font-size: 36px; }
.notice ul { line-height: 1.9; }
.dash-top h2 { font-size: 22px; }
.stat small { font-size: 16px; }
.stat span, .time-cell, .status-pill, .data-table th,
.table-tabs span, .table-bottom, .table-bottom button,
.progress-row, .demo-note, .live-badge { font-size: 14px; }
.stat strong { font-size: 42px; }
.table-tools input { width: 210px; min-height: 44px; }
.table-tabs button, .table-bottom button { min-height: 44px; }
.data-table td { padding: 15px 10px; }
.status-pill { white-space: normal; display: inline-block; }
.data-table th:nth-child(1) { width: 24%; }
.data-table th:nth-child(2) { width: 30%; }
.data-table th:nth-child(3) { width: 26%; }
.try-hint { display: grid; gap: 12px; margin-top: 24px; padding: 22px; background: #e7f0e0; border: 1px solid #c8dac1; border-radius: 16px; text-align: left; }
.try-hint h3 { font-size: 22px; margin: 0; line-height: 1.4; }
.try-hint p { font-size: 15px; color: #45613f; line-height: 1.7; }
.try-hint button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 13px 16px; background: #fff; border: 1px solid #adc6a6; border-radius: 10px; color: var(--ink); font-size: 16px; text-align: left; }
.try-hint button:hover { background: #f6fbf1; border-color: var(--teal); }
.try-hint button b { display: block; font-size: 18px; font-weight: 650; }
.try-hint button small { display: block; font-size: 14px; color: #526a4c; margin-top: 2px; }
.try-hint button > span:last-child { font-size: 22px; color: var(--teal); }
.mini-screen { min-height: 490px; }
.mini-screen p, .mock-input, .mock-primary, .mock-choice { font-size: 15px; }
.ticket-mini b { font-size: 28px; }
.stage-caption, .scope-note { font-size: 15px; }
@media (max-width: 1180px) {
  .demo-grid { grid-template-columns: 370px minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 1040px) {
  .demo-grid { display: block; }
  .guest-column { max-width: 400px; margin: 0 auto 36px; }
  .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .topbar nav { flex-wrap: wrap; }
  .topbar nav button { font-size: 15px; padding: 10px 9px; }
  .intro p, .journey span, .phone p, .section-label { font-size: 16px; }
  .intro h1 { font-size: 30px; }
  .intro { flex-wrap: wrap; }
  .dash-top { align-items: flex-start; flex-wrap: wrap; }
  .dash-top h2 { font-size: 20px; }
  .table-tabs { flex-wrap: wrap; gap: 14px; }
  .table-tools input { width: 100%; }
  .table-bottom { flex-wrap: wrap; gap: 12px; }
  .pager { gap: 12px; }
  .stat { padding-right: 9px; }
  .stat strong { font-size: 34px; }
  .stat small { font-size: 15px; }
  .stats { gap: 10px; }
  .data-table { font-size: 15px; }
  .data-table th, .time-cell, .status-pill { font-size: 14px; }
  .data-table td, .data-table th { padding-left: 5px; padding-right: 5px; }
  .guest-standalone > div:last-child { width: 100%; }
  .try-hint { padding: 20px; }
  .connection-strip { font-size: 15px; }
}
@media (max-width: 560px) {
  .flow-grid { grid-template-columns: 1fr; }
  .mini-screen { max-width: 400px; min-height: 0; }
  .stage-title, .stage-caption { max-width: 400px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .progress div { transition: none; } }
@media print {
  .flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mini-screen { min-height: 410px; padding: 12px; }
  .mini-screen p, .mock-input, .mock-primary, .mock-choice, .stage-caption,
  .ticket-mini small, .ticket-mini span, .stage-title p { font-size: 11px; }
  .mini-screen .small { font-size: 11px !important; }
}