:root { --ink:#10282d; --ink-2:#173940; --muted:#6d8287; --paper:#f5f7f6; --card:#ffffff; --aqua:#18b7a4; --aqua-light:#d9f5f0; --line:#dce7e5; --danger:#b54c4c; --shadow:0 18px 40px rgba(17,48,53,.12); }
* { box-sizing:border-box; } html { background:#0f272d; } body { min-width:320px; margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; font-size:15px; line-height:1.5; }
body::before { position:fixed; z-index:0; inset:0; pointer-events:none; content:""; background-image:linear-gradient(rgba(24,183,164,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(24,183,164,.045) 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
button,input { font:inherit; } button { cursor:pointer; }.shell { position:relative; z-index:1; width:min(100%,480px); min-height:100vh; margin:0 auto; padding:max(22px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:25px; animation:fade-up .55s ease both; }.brand p,.eyebrow { margin:0; color:var(--aqua); font-family:Georgia,"Songti SC",serif; font-size:10px; letter-spacing:1.35px; }.brand h1 { margin:1px 0 0; color:var(--ink); font-size:17px; font-weight:700; }.brand-mark { display:flex; align-items:center; justify-content:center; gap:3px; width:36px; height:38px; border-radius:6px; background:var(--ink); box-shadow:0 7px 15px rgba(16,40,45,.17); }.brand-mark span { display:block; width:4px; height:18px; border-radius:1px; background:#e6fbf8; }.brand-mark span:nth-child(2) { height:25px; background:var(--aqua); }.brand-mark span:nth-child(3) { height:14px; }.brand-state { display:flex; align-items:center; gap:5px; margin-left:auto; color:var(--muted); font-size:11px; }.brand-state i { width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(24,183,164,.14); animation:pulse 1.7s ease-in-out infinite; }
.view { display:none; animation:fade-up .48s .05s ease both; }.view.is-active { display:block; }.intro { position:relative; min-height:172px; overflow:hidden; padding:26px 23px; border-radius:8px; background:var(--ink); box-shadow:var(--shadow); }.intro::before { position:absolute; inset:0; content:""; opacity:.35; background:linear-gradient(115deg,transparent 42%,rgba(24,183,164,.13) 42.3%,transparent 42.7%); background-size:100% 62px; animation:scan 5s linear infinite; }.intro::after { position:absolute; top:0; right:30px; width:1px; height:100%; content:""; background:linear-gradient(transparent,rgba(24,183,164,.65),transparent); }.intro h2,.success-view h2 { position:relative; z-index:1; margin:8px 0 8px; color:white; font-family:Georgia,"Songti SC",serif; font-size:29px; font-weight:600; }.intro h2 em { color:#78e7d9; font-style:normal; }.intro > p:last-of-type { position:relative; z-index:1; max-width:255px; margin:0; color:#c5dad8; font-size:14px; }.intro-signal { position:absolute; right:31px; bottom:26px; display:flex; align-items:end; gap:4px; height:30px; }.intro-signal span { width:4px; border-radius:4px; background:var(--aqua); opacity:.9; animation:signal 1.2s ease-in-out infinite alternate; }.intro-signal span:nth-child(1) { height:10px; }.intro-signal span:nth-child(2) { height:20px; animation-delay:.2s; }.intro-signal span:nth-child(3) { height:30px; animation-delay:.4s; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0; margin:20px 0 17px; list-style:none; }.steps li { position:relative; padding:8px 4px; border-radius:5px; color:#87999c; }.steps li.is-current { background:var(--aqua-light); color:var(--ink); }.steps b { display:inline-block; margin-right:4px; color:var(--aqua); font-family:Georgia,serif; font-size:11px; font-weight:normal; }.steps span { font-size:12px; }
.form-card { padding:19px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.92); box-shadow:var(--shadow); }.form-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-bottom:15px; border-bottom:1px solid var(--line); }.form-heading small { display:block; margin-bottom:1px; color:var(--aqua); font-size:11px; }.form-heading strong { font-size:16px; }.form-heading svg { width:18px; height:18px; fill:none; stroke:var(--aqua); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
label { display:block; margin-bottom:18px; color:#3b555a; font-size:13px; } label i,legend i { color:var(--aqua); font-style:normal; } input { width:100%; height:49px; margin-top:7px; padding:0 13px; border:1px solid #d8e3e1; border-radius:6px; outline:none; background:#fbfdfd; color:var(--ink); font-size:16px; transition:border-color .2s,box-shadow .2s,background .2s; }input:focus { border-color:var(--aqua); background:white; box-shadow:0 0 0 3px rgba(24,183,164,.13); }input::placeholder { color:#a3afb0; }
fieldset { margin:0 0 23px; padding:0; border:0; }legend { margin-bottom:9px; color:#3b555a; font-size:13px; }.time-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.time-slots label { margin:0; }.time-slots input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }.time-slots span { display:flex; align-items:center; justify-content:center; min-height:45px; padding:5px 3px; border:1px solid #d8e3e1; border-radius:6px; background:#fbfdfd; color:var(--muted); font-size:12px; text-align:center; transition:all .2s; }.time-slots input:checked + span { border-color:var(--aqua); background:var(--aqua-light); color:var(--ink); box-shadow:inset 0 0 0 1px var(--aqua); }
.choice-row { display:flex; flex-wrap:wrap; gap:7px; }.choice-row input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }.choice-row label { margin:0; }.choice-row span { display:block; padding:8px 12px; border:1px solid #d8e3e1; border-radius:6px; color:var(--muted); font-size:13px; transition:all .18s; }.choice-row input:checked + span { border-color:var(--aqua); background:var(--aqua-light); color:var(--ink); }
.primary-button,.outline-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:53px; border-radius:6px; font-weight:700; transition:transform .18s,background .18s,opacity .18s; }.primary-button { position:relative; overflow:hidden; border:1px solid var(--ink); background:var(--ink); color:white; }.primary-button::before { position:absolute; top:0; left:-35%; width:22%; height:100%; content:""; background:rgba(120,231,217,.25); transform:skewX(-22deg); animation:button-shine 3.8s ease-in-out infinite; }.primary-button svg,.outline-button svg,.privacy-note svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.primary-button:active,.outline-button:active { transform:scale(.985); }button:disabled { cursor:wait; opacity:.7; }.privacy-note,.protect-note { display:flex; align-items:center; justify-content:center; gap:5px; margin:16px 2px 0; color:#819194; text-align:center; font-size:12px; }.privacy-note svg { width:13px; height:13px; }
.success-view { padding-top:5px; text-align:center; }.success-seal { display:grid; place-items:center; width:61px; height:61px; margin:0 auto 16px; border:1px solid #a7e4da; border-radius:50%; color:var(--aqua); background:#f8fffe; box-shadow:0 0 0 7px rgba(24,183,164,.08),0 11px 21px rgba(16,40,45,.12); animation:pulse 1.9s ease-in-out infinite; }.success-seal svg { width:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.success-view h2 { margin-top:7px; color:var(--ink); }.success-subtitle { margin:0; color:var(--muted); font-size:14px; }.appointment-summary { margin:27px 0 18px; padding:7px 18px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.7); text-align:left; }.appointment-summary div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #edf1f0; }.appointment-summary div:last-child { border:0; }.appointment-summary span { color:#748589; font-size:13px; }.appointment-summary strong { max-width:62%; color:var(--ink); font-size:14px; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.code-section { position:relative; overflow:hidden; padding:20px 19px; border-radius:8px; background:var(--ink); color:white; box-shadow:var(--shadow); }.code-section::before { position:absolute; top:-60px; right:-45px; width:150px; height:150px; border:1px solid rgba(120,231,217,.22); border-radius:50%; content:""; animation:rotate 12s linear infinite; }.code-heading { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; font-size:14px; }.code-heading b { padding:2px 8px; border:1px solid rgba(120,231,217,.48); border-radius:99px; color:#78e7d9; font-size:11px; font-weight:normal; }.qr-card { position:relative; z-index:1; display:grid; place-items:center; width:min(100%,267px); aspect-ratio:1; margin:0 auto 14px; padding:16px; background:white; box-shadow:0 9px 22px rgba(0,0,0,.2); }.qr-card img { width:100%; height:100%; display:block; }.qr-corner { position:absolute; z-index:2; width:13px; height:13px; border-color:var(--aqua); border-style:solid; }.corner-a { top:7px; left:7px; border-width:2px 0 0 2px; }.corner-b { top:7px; right:7px; border-width:2px 2px 0 0; }.corner-c { bottom:7px; left:7px; border-width:0 0 2px 2px; }.corner-d { right:7px; bottom:7px; border-width:0 2px 2px 0; }.code-section p { position:relative; z-index:1; margin:0 0 3px; font-size:14px; }.code-section small { position:relative; z-index:1; color:#b9d2d1; font-size:12px; }.action-group { margin-top:18px; }.outline-button { border:1px solid #c7d8d6; background:transparent; color:var(--ink); text-decoration:none; }.download-button { border-color:var(--ink); background:var(--ink); color:white; }.secondary-button { min-height:48px; margin-top:10px; }.text-button { margin-top:14px; border:0; background:transparent; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.toast { position:fixed; z-index:3; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; width:max-content; max-width:calc(100vw - 40px); padding:11px 15px; border-radius:6px; background:var(--ink); color:white; font-size:14px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:all .24s; box-shadow:0 10px 24px rgba(16,40,45,.22); }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.toast.is-error { background:var(--danger); }
@keyframes fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }@keyframes scan { to { background-position:0 62px; } }@keyframes pulse { 50% { box-shadow:0 0 0 10px rgba(24,183,164,.03),0 11px 21px rgba(16,40,45,.12); } }@keyframes signal { to { transform:scaleY(.55); opacity:.4; } }@keyframes button-shine { 0%,60% { left:-35%; } 83%,100% { left:118%; } }@keyframes rotate { to { transform:rotate(360deg); } }

/* Chinese labels are intentionally compact and avoid decorative Latin-style tracking. */
.brand p,.eyebrow { font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:11px; font-weight:600; letter-spacing:.65px; }

.lookup-toggle { display:block; margin:10px auto 0; padding:7px 10px; border:0; background:transparent; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.lookup-panel { margin-top:14px; padding:18px; border:1px solid #cde8e3; border-radius:8px; background:#f5fffd; box-shadow:0 12px 28px rgba(16,40,45,.08); animation:fade-up .25s ease both; }.lookup-panel[hidden] { display:none; }.lookup-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }.lookup-heading small { display:block; color:var(--aqua); font-size:11px; }.lookup-heading strong { font-size:16px; }.lookup-heading button { width:28px; height:28px; border:0; border-radius:50%; background:#e2f4f1; color:var(--ink); font-size:21px; line-height:1; }.lookup-panel > p { margin:0 0 16px; color:var(--muted); font-size:13px; }.lookup-panel form { margin:0; }.lookup-panel label { margin-bottom:13px; }.lookup-panel input { background:#fff; }.lookup-submit { width:100%; min-height:47px; border:1px solid var(--aqua); border-radius:6px; background:var(--aqua); color:#062c2b; font-weight:700; }.lookup-submit:disabled { opacity:.7; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }@media (min-width:650px) { body { background:#10282d; }.shell { background:var(--paper); box-shadow:0 0 58px rgba(0,0,0,.26); } }@media (max-width:360px) { .shell { padding-right:16px; padding-left:16px; }.form-card { padding-right:15px; padding-left:15px; }.time-slots { gap:5px; }.time-slots span { font-size:11px; } }