:root {
  --night: #091127;
  --night-2: #111a36;
  --paper: #f4eedf;
  --paper-soft: #fbf7ed;
  --gold: #d3a954;
  --gold-light: #f0d69a;
  --ink: #19213b;
  --muted: #858897;
  --wine: #743e55;
  --error: #ffb5a9;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 77% 22%, rgba(99, 72, 126, .28), transparent 24%),
    radial-gradient(circle at 22% 88%, rgba(175, 123, 63, .13), transparent 30%),
    linear-gradient(145deg, var(--night-2), var(--night) 62%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 57px 57px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
  opacity: .22;
}
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .18; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); mix-blend-mode: soft-light; }
.star { position: fixed; color: var(--gold-light); opacity: .4; pointer-events: none; }.star-a{font-size:34px;left:7vw;top:38vh}.star-b{font-size:19px;right:8vw;bottom:23vh}
.skip-link { position: fixed; top: -60px; left: 18px; z-index: 99; padding: 10px 16px; background: var(--paper); color: var(--night); transition: top .2s; }.skip-link:focus{top:18px}
.masthead { width: min(1180px, calc(100% - 48px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(240,214,154,.2); position: relative; z-index: 2; }
.brand { color: var(--paper); text-decoration: none; font: 700 18px var(--serif); letter-spacing: .1em; }.brand span{color:var(--gold-light);margin-right:9px}.masthead p{font-size:11px;letter-spacing:.12em;color:#9498a7}
main { position: relative; z-index: 1; }
.audit-hero { width: min(1040px, calc(100% - 48px)); margin: auto; min-height: calc(100vh - 152px); padding: 68px 0 92px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .24em; }
h1 { margin: 0; font: 900 clamp(44px, 5.3vw, 64px)/1.25 var(--serif); letter-spacing: -.055em; }
h1 em { color: var(--gold-light); font-style: normal; }
.upload-form { min-width: 0; }
.drop-zone { min-height: 380px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(250,246,236,.97); color: var(--ink); border: 1px solid rgba(240,214,154,.65); box-shadow: 0 34px 90px rgba(0,0,0,.38); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; outline: none; }
.drop-zone::before { content:""; position:absolute; inset:12px; border:1px dashed rgba(116,62,85,.26); pointer-events:none; }
.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.dragover { transform: translateY(-5px); box-shadow: 0 42px 100px rgba(0,0,0,.46); background:#fffdf7; }
.drop-zone.dragover { outline: 3px solid rgba(211,169,84,.35); outline-offset: 5px; }
.corner { position:absolute;width:24px;height:24px;border-color:var(--wine);border-style:solid;opacity:.55}.corner-tl{left:22px;top:22px;border-width:1px 0 0 1px}.corner-tr{right:22px;top:22px;border-width:1px 1px 0 0}.corner-bl{left:22px;bottom:22px;border-width:0 0 1px 1px}.corner-br{right:22px;bottom:22px;border-width:0 1px 1px 0}
.upload-symbol { width:82px;height:82px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:#faf3e1;box-shadow:0 0 0 10px rgba(211,169,84,.08)}
.upload-symbol svg{width:38px;fill:none;stroke:var(--wine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop-zone strong{font:700 24px var(--serif);margin-bottom:6px}.drop-zone>span:not(.corner):not(.upload-symbol){font-size:13px;color:#676b77}.drop-zone small{font-size:11px;color:#a09b91;margin-top:18px;letter-spacing:.04em}
.selection-bar { display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:12px 15px;border:1px solid rgba(240,214,154,.25);background:rgba(255,255,255,.045);font-size:12px}.selection-bar p{margin:0}.selection-bar p strong{font:700 22px var(--serif);color:var(--gold-light);margin-right:4px}.selection-bar>div{display:flex;gap:12px;align-items:center}.selection-bar button,.add-more{border:0;background:transparent;color:#bec0c8;font:600 11px var(--sans);padding:8px;cursor:pointer}.selection-bar button:hover,.selection-bar button:focus-visible,.add-more:hover,.add-more:focus-visible{color:var(--gold-light)}
.preview-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px; }
.preview-card { aspect-ratio:1;position:relative;overflow:hidden;background:#222b44;border:1px solid rgba(255,255,255,.14);animation:appear .35s var(--ease) both}.preview-card img{width:100%;height:100%;object-fit:cover;display:block}.preview-card::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.68));pointer-events:none}.preview-card .file-index{position:absolute;left:8px;bottom:7px;z-index:1;font-size:10px;color:white}.remove-photo{position:absolute;right:6px;top:6px;z-index:2;width:29px;height:29px;border:0;border-radius:50%;background:rgba(9,17,39,.82);color:white;display:grid;place-items:center;font-size:16px;line-height:1}.remove-photo:hover,.remove-photo:focus-visible{background:var(--wine)}
.upload-error{color:var(--error);font-size:12px;margin:12px 0 0}.audit-button{width:100%;min-height:64px;margin-top:18px;padding:10px 24px;border:1px solid var(--gold);background:var(--gold);color:var(--night);display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:16px;letter-spacing:.08em;box-shadow:7px 7px 0 rgba(240,214,154,.18);transition:.25s var(--ease)}.audit-button b{font-size:25px}.audit-button:hover:not(:disabled),.audit-button:focus-visible:not(:disabled){transform:translate(-3px,-3px);box-shadow:11px 11px 0 rgba(240,214,154,.22);background:var(--gold-light)}.audit-button:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.35;box-shadow:none}
.handoff { width:min(780px,calc(100% - 48px)); margin:0 auto 100px;padding:52px;background:var(--paper-soft);color:var(--ink);text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.3);animation:rise .55s var(--ease) both}.handoff-mark{width:54px;height:54px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:var(--wine);font-size:24px}.handoff h2{font:900 38px var(--serif);margin:0 0 14px}.handoff>p:not(.eyebrow){max-width:620px;margin:0 auto;color:#656977;font-size:14px}.audit-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8ccb4;margin:30px 0}.audit-scope span{background:#f8f2e5;padding:18px 10px;font-size:12px}.audit-scope b{display:block;color:var(--wine);font:700 22px var(--serif);margin-bottom:4px}.handoff .report-note{font-size:12px!important;color:var(--wine)!important;font-weight:600}
.loading-orbit{width:66px;height:66px;margin:0 auto 22px;border:1px solid #d7c5a1;border-top-color:var(--wine);border-radius:50%;animation:spin 1s linear infinite}.loading-orbit::after{content:"✦";display:grid;place-items:center;width:100%;height:100%;color:var(--gold)}
.summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8ccb4;margin:28px 0}.summary-row div{background:#f8f2e5;padding:18px}.summary-row b{display:block;font:900 30px var(--serif);color:var(--wine)}.summary-row span{font-size:11px;color:#767467}
.result-banner{display:flex;gap:14px;align-items:center;text-align:left;border-left:3px solid var(--gold);background:#eee4cf;padding:15px 18px;margin:20px 0}.result-banner p{margin:0!important;font-size:12px!important}.result-banner strong{color:var(--wine);flex:none}
.error-list{text-align:left;display:grid;gap:12px;margin-top:24px}.error-card{border:1px solid #d7cbb4;padding:18px;background:#fffdf8}.error-card header{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.error-card header span{font-size:10px;letter-spacing:.1em;color:var(--wine);font-weight:700}.error-card header b{font:700 16px var(--serif)}.answer-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-compare p{margin:0!important;padding:10px;background:#f1ebdf;font-size:12px!important}.answer-compare p:last-child{background:#e8eee3;color:#365a39!important}.error-card code{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed #d7cbb4;color:#665047;font-size:11px;white-space:normal}.warning-list{text-align:left;margin:18px 0 0;padding:0;list-style:none}.warning-list li{font-size:12px;color:#716e64;padding:8px 0;border-bottom:1px solid #ded4bf}.all-correct{padding:24px;background:#e8eee3;color:#365a39;font:700 18px var(--serif)}
footer { min-height:64px;width:min(1180px,calc(100% - 48px));margin:auto;border-top:1px solid rgba(240,214,154,.18);display:flex;align-items:center;justify-content:space-between;color:#7f8494;font-size:10px;letter-spacing:.08em}footer span{color:var(--gold)}footer p{margin:0}
@keyframes appear{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.audit-hero{grid-template-columns:1fr;gap:34px;padding-top:48px}.intro{text-align:center}.intro h1 br{display:none}.drop-zone{min-height:340px}.star{display:none}}
@media(max-width:560px){.masthead{width:calc(100% - 32px);height:72px}.masthead p{display:none}.brand{font-size:15px}.audit-hero{width:calc(100% - 32px);padding:38px 0 70px}.intro h1{font-size:39px}.drop-zone{min-height:300px}.upload-symbol{width:68px;height:68px}.drop-zone strong{font-size:21px}.preview-grid{grid-template-columns:repeat(3,1fr)}.selection-bar{align-items:flex-start}.selection-bar>div{display:grid;gap:0;text-align:right}.audit-button{min-height:58px}.handoff{width:calc(100% - 32px);padding:38px 20px}.handoff h2{font-size:31px}.audit-scope{grid-template-columns:1fr}.audit-scope span{padding:12px}.audit-scope b{display:inline;margin-right:8px;font-size:16px}.answer-compare,.summary-row{grid-template-columns:1fr}.result-banner{display:block}.result-banner p{margin-top:5px!important}footer{width:calc(100% - 32px);display:block;padding:18px 0}footer p{margin-top:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}