:root { --ink:#12261f; --muted:#68756f; --paper:#f3f0e8; --card:#fffdf8; --line:#d9d5ca; --green:#1c6b50; --red:#a73d32; --amber:#a76b1d; --blue:#315d77; --shadow:0 24px 70px rgba(18,38,31,.12); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif; }
.topbar { height:72px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(18,38,31,.12); background:rgba(243,240,232,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand span { display:grid; place-items:center; width:38px; height:38px; background:var(--ink); color:#fff; border-radius:50%; font:700 13px Georgia; }
.account { display:flex; align-items:center; gap:12px; font-size:13px; }
main { max-width:1180px; margin:auto; padding:54px 24px 90px; }
.workspace { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; min-height:390px; }
.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:800; color:var(--green); margin:0 0 14px; }
.workspace h1 { font:500 clamp(48px,6vw,76px)/1 Georgia,"Noto Serif TC",serif; letter-spacing:-.04em; margin:0 0 20px; }
.hero-copy > p { max-width:560px; color:var(--muted); line-height:1.8; }
.rules { display:flex; gap:30px; margin:30px 0 0; }
.rules div { border-left:1px solid var(--line); padding-left:14px; }
.rules dt { font:600 19px Georgia; }
.rules dd { margin:5px 0 0; color:var(--muted); font-size:11px; }
.upload-card { background:var(--card); border:1px solid var(--line); padding:26px; box-shadow:var(--shadow); border-radius:22px; animation:rise .45s ease-out both; }
.dropzone { min-height:220px; border:1.5px dashed #a8b3ac; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; cursor:pointer; text-align:center; transition:.2s; }
.dropzone:hover,.dropzone.drag { background:#e7f0eb; border-color:var(--green); transform:translateY(-2px); }
.dropzone input { display:none; }
.drop-icon { font-size:42px; font-weight:200; color:var(--green); }
.dropzone small,.file-list { color:var(--muted); font-size:12px; }
.file-list { margin:16px 0; line-height:1.7; max-height:85px; overflow:auto; }
.primary,.ghost { border:0; border-radius:999px; padding:12px 18px; font-weight:750; cursor:pointer; transition:transform .15s,background .15s; }
.primary:hover,.ghost:hover { transform:translateY(-1px); }
.primary { width:100%; background:var(--ink); color:white; font-size:15px; }
.primary:disabled { opacity:.45; }
.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }
.pilot { display:flex; gap:16px; align-items:center; background:#fff7df; border:1px solid #e7d397; border-radius:14px; padding:14px 18px; margin:20px 0 48px; font-size:13px; }
.pilot strong { color:var(--amber); white-space:nowrap; }
.section { margin-top:46px; animation:rise .35s ease-out both; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.section h2 { font:500 34px Georgia,"Noto Serif TC",serif; margin:0; }
.summary-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); padding:16px; border-radius:12px; }
.stat span { display:block; color:var(--muted); font-size:11px; }
.stat strong { font:600 28px Georgia; margin-top:8px; display:block; }
.table-wrap { overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th,td { text-align:left; padding:14px; border-bottom:1px solid #ebe7de; font-size:13px; }
th { font-size:11px; color:var(--muted); letter-spacing:.05em; background:#f9f7f1; }
.status { display:inline-block; padding:5px 9px; border-radius:999px; background:#e9ece9; font-size:11px; font-weight:800; }
.status.RETAKE { background:#f8dfdb; color:var(--red); }
.status.REVIEW,.status.PARTIAL { background:#f8ead3; color:var(--amber); }
.status.PASS,.status.PASS_WITH_WARNINGS { background:#dfeee7; color:var(--green); }
.link-button { border:0; background:none; color:var(--blue); font-weight:800; cursor:pointer; }
.detail { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; }
.point-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.point { border:1px solid var(--line); border-radius:10px; padding:13px; }
.point p { color:var(--muted); font-size:12px; line-height:1.5; }
.history-row { display:grid; grid-template-columns:1.5fr 1fr 1fr .7fr .7fr; gap:14px; align-items:center; background:var(--card); border-bottom:1px solid var(--line); padding:15px 4px; font-size:13px; }
.empty { padding:36px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }
.toast { position:fixed; right:24px; bottom:24px; background:var(--ink); color:white; padding:14px 18px; border-radius:10px; box-shadow:var(--shadow); z-index:10; }
.hidden { display:none!important; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }
@media (max-width:820px) {
  .workspace { grid-template-columns:1fr; gap:28px; }
  .workspace h1 { font-size:48px; }
  .rules { gap:14px; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .history-row { grid-template-columns:1fr 1fr; }
  .history-row > *:nth-child(3) { display:none; }
  .account #userName { display:none; }
  .pilot { align-items:flex-start; flex-direction:column; gap:5px; }
}