:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --text: #152238;
  --muted: #667085;
  --line: #d9e2ef;
  --brand: #315efb;
  --brand-dark: #2447c6;
  --brand-soft: #eef3ff;
  --success: #067647;
  --success-bg: #ecfdf3;
  --warning: #b54708;
  --warning-bg: #fffaeb;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --shadow: 0 18px 48px rgba(35, 58, 98, .10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(49,94,251,.10), transparent 27rem),
    radial-gradient(circle at 92% 8%, rgba(18,183,106,.09), transparent 25rem),
    var(--bg);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 54px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:46px; height:46px; display:grid; place-items:center; border-radius:15px;
  background:linear-gradient(145deg, var(--brand), #6d8bff); color:#fff; font-weight:900; font-size:21px;
  box-shadow:0 10px 28px rgba(49,94,251,.26);
}
.brand h1 { margin:0 0 3px; font-size:20px; }
.brand p { margin:0; color:var(--muted); font-size:13px; }
.privacy-pill {
  display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px;
  border:1px solid #a6f4c5; background:var(--success-bg); color:var(--success); font-size:13px; font-weight:800;
}

.hero {
  display:grid; grid-template-columns:1.35fr .65fr; gap:28px; align-items:center;
  padding:30px; border:1px solid rgba(255,255,255,.9); border-radius:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,249,255,.92)); box-shadow:var(--shadow);
}
.eyebrow, .stage-kicker { color:var(--brand); font-size:13px; font-weight:850; letter-spacing:.02em; }
.hero h2 { margin:10px 0 14px; font-size:clamp(31px,5vw,52px); line-height:1.08; letter-spacing:-.035em; }
.hero h2 span { color:var(--brand); white-space:nowrap; }
.hero p { margin:0; max-width:720px; color:var(--muted); line-height:1.75; font-size:16px; }
.hero-trust { display:grid; gap:10px; padding:20px; border:1px solid #dce6ff; border-radius:20px; background:#fff; }
.hero-trust strong { margin-bottom:2px; font-size:15px; }
.hero-trust span { padding:10px 12px; border-radius:12px; background:var(--surface-soft); color:#344054; font-size:14px; }

.stepper {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center;
  margin:22px 0; padding:18px 22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 10px 32px rgba(35,58,98,.06);
}
.step { display:flex; align-items:center; gap:11px; color:#98a2b3; min-width:0; }
.step-number { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; border:1px solid #cfd8e6; background:#fff; font-weight:900; }
.step strong, .step small { display:block; }
.step strong { font-size:14px; margin-bottom:3px; }
.step small { font-size:11px; }
.step.current { color:var(--brand); }
.step.current .step-number { border-color:var(--brand); background:var(--brand); color:#fff; box-shadow:0 7px 18px rgba(49,94,251,.22); }
.step.done { color:var(--success); }
.step.done .step-number { border-color:#75e0a7; background:var(--success-bg); color:var(--success); }
.step-line { width:54px; height:2px; margin:0 12px; background:#e4e9f2; }

.stage { border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.94); box-shadow:var(--shadow); }
.upload-stage { padding:34px; }
.stage-heading { text-align:center; max-width:690px; margin:0 auto 24px; }
.stage-heading h3 { margin:8px 0 9px; font-size:27px; }
.stage-heading p { margin:0; color:var(--muted); line-height:1.65; }
.dropzone {
  min-height:250px; display:grid; place-items:center; text-align:center; padding:28px;
  border:2px dashed #aabbd3; border-radius:20px; background:linear-gradient(180deg,#fbfcff,#f4f7fd); transition:.18s ease;
}
.dropzone:hover, .dropzone.drag { border-color:var(--brand); background:var(--brand-soft); transform:translateY(-1px); }
.dropzone input { display:none; }
.upload-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 14px; border-radius:20px; background:#e8efff; color:var(--brand); font-size:30px; font-weight:600; }
.dropzone strong { display:block; font-size:19px; margin-bottom:7px; }
.dropzone span { display:block; color:#475467; font-size:14px; margin-bottom:10px; }
.dropzone small { display:block; color:var(--muted); }
.upload-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.upload-actions span { color:var(--muted); font-size:12px; }

.btn { border:0; border-radius:12px; padding:11px 16px; font-weight:850; display:inline-flex; justify-content:center; align-items:center; gap:8px; transition:.16s ease; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(49,94,251,.22); }
.btn-primary:hover:not(:disabled) { background:var(--brand-dark); }
.btn-secondary { background:#fff; color:#344054; border:1px solid var(--line); }
.btn-ghost { background:#f8fafc; color:#475467; border:1px solid #e4e7ec; }
.btn-success { background:var(--success); color:#fff; box-shadow:0 8px 20px rgba(6,118,71,.20); }
.btn-large { width:100%; min-height:48px; font-size:15px; }
.btn-small { padding:8px 11px; border-radius:10px; font-size:13px; }
.text-button { width:100%; margin-top:11px; border:0; background:transparent; color:var(--brand); font-weight:800; padding:8px; }

.workspace-stage { overflow:hidden; }
.selected-file-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 20px; border-bottom:1px solid #e8edf4; background:#fbfcfe; }
.selected-file-bar > div { display:flex; align-items:center; gap:10px; min-width:0; }
.selected-file-bar strong, .selected-file-bar small { display:block; }
.selected-file-bar strong { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.selected-file-bar small { color:var(--muted); margin-top:2px; font-size:12px; }
.success-dot { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:50%; background:var(--success-bg); color:var(--success); font-weight:900; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:0; }
.image-panel { padding:24px; border-right:1px solid #e8edf4; }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.panel-title h3 { margin:6px 0 0; font-size:20px; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.tool-toggle { display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fff; }
.tool-toggle button { border:0; padding:8px 11px; background:transparent; color:var(--muted); font-weight:750; }
.tool-toggle button.active { background:#eaf0ff; color:var(--brand); }
.canvas-shell { position:relative; width:100%; min-height:340px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#e9eef5; }
canvas { display:block; max-width:100%; height:auto; touch-action:none; }
.canvas-hint { margin:10px 2px 0; color:var(--muted); font-size:12px; line-height:1.65; }
.action-panel { padding:24px; background:#fbfcfe; }
.guidance-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.guidance-card h3 { margin:7px 0 10px; font-size:21px; }
.guidance-card > p { color:var(--muted); line-height:1.65; font-size:14px; }
.plain-note { margin-top:14px; padding:11px 12px; border-radius:12px; background:#f7f9fc; color:var(--muted); font-size:12px; line-height:1.55; }
.status-box { min-height:0; margin-top:12px; padding:0; border-radius:12px; font-size:13px; line-height:1.55; }
.status-box.show { padding:11px 12px; border:1px solid; }
.status-box.info { background:#eff4ff; border-color:#c7d7fe; color:#1849a9; }
.status-box.success { background:var(--success-bg); border-color:#a6f4c5; color:var(--success); }
.status-box.error { background:var(--danger-bg); border-color:#fecdca; color:var(--danger); }

.progress-track { height:10px; margin:17px 0 10px; overflow:hidden; border-radius:999px; background:#e7ecf4; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#7d98ff); transition:width .25s ease; }
.progress-list { display:grid; gap:9px; margin-top:18px; }
.progress-item { display:flex; gap:9px; align-items:center; color:#98a2b3; font-size:13px; }
.progress-item span { width:20px; font-weight:900; }
.progress-item em { font-style:normal; }
.progress-item.active { color:var(--brand); font-weight:750; }
.progress-item.done { color:var(--success); }
.progress-item.error { color:var(--danger); }

.result-banner { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:13px; border-radius:14px; background:var(--danger-bg); }
.result-banner.medium { background:var(--warning-bg); }
.result-banner.low { background:var(--success-bg); }
.result-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#fff; color:var(--danger); font-weight:900; }
.result-banner.medium .result-icon { color:var(--warning); }
.result-banner.low .result-icon { color:var(--success); }
.result-banner span, .result-banner strong { display:block; }
.result-banner span { color:var(--muted); font-size:11px; }
.result-banner strong { margin-top:2px; font-size:14px; }
.score-number { font-size:26px; font-weight:950; }
.result-summary { margin:14px 0 !important; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.result-stats div { padding:11px 8px; border-radius:12px; background:#f7f9fc; text-align:center; }
.result-stats strong, .result-stats span { display:block; }
.result-stats strong { font-size:20px; }
.result-stats span { color:var(--muted); font-size:10px; margin-top:2px; }
.microcopy { margin:8px 0 14px !important; font-size:11px !important; }
.manual-instruction { display:grid; gap:5px; margin:14px 0; padding:12px; border:1px solid #e4e7ec; border-radius:12px; }
.manual-instruction strong { font-size:13px; }
.manual-instruction span { color:var(--muted); font-size:12px; line-height:1.5; }
.result-card .btn + .btn { margin-top:9px; }

.report-section { padding:24px; border-top:1px solid #e8edf4; }
.report-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
.report-heading h3 { margin:6px 0 0; font-size:21px; }
.risk-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.risk-item { padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.risk-top { display:flex; gap:10px; align-items:flex-start; }
.risk-icon { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:10px; font-weight:900; }
.risk-icon.high { color:var(--danger); background:var(--danger-bg); }
.risk-icon.medium { color:var(--warning); background:var(--warning-bg); }
.risk-icon.low { color:var(--success); background:var(--success-bg); }
.risk-content { min-width:0; flex:1; }
.risk-content strong { font-size:14px; }
.risk-content p { margin:4px 0 0; color:var(--muted); line-height:1.55; font-size:12px; overflow-wrap:anywhere; }
.risk-badge { padding:4px 7px; border-radius:999px; font-size:10px; font-weight:850; }
.risk-badge.high { color:var(--danger); background:var(--danger-bg); }
.risk-badge.medium { color:var(--warning); background:var(--warning-bg); }
.risk-badge.low { color:var(--success); background:var(--success-bg); }
.ocr-panel { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#f8fafc; }
.ocr-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:13px; }
.ocr-heading span { color:var(--muted); }
.ocr-panel pre { max-height:220px; overflow:auto; margin:0; white-space:pre-wrap; color:#475467; font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.download-success { display:flex; align-items:center; gap:14px; padding:18px 24px; border-top:1px solid #b7ebcd; background:var(--success-bg); }
.download-success .success-check { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--success); font-size:20px; font-weight:900; }
.download-success strong { display:block; }
.download-success p { margin:4px 0 0; color:#475467; font-size:12px; line-height:1.5; }
.download-success .btn { margin-left:auto; }

.privacy-details { margin-top:20px; border:1px solid var(--line); border-radius:16px; background:#fff; color:#475467; }
.privacy-details summary { cursor:pointer; padding:15px 18px; font-weight:800; color:#344054; }
.privacy-details div { padding:0 18px 14px; font-size:13px; line-height:1.65; }
.privacy-details p { margin:8px 0; }
.footer { margin-top:22px; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; }

@media (max-width: 900px) {
  .hero, .workspace-grid { grid-template-columns:1fr; }
  .hero-trust { display:none; }
  .image-panel { border-right:0; border-bottom:1px solid #e8edf4; }
  .risk-list { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .shell { width:min(100% - 20px,1180px); padding-top:14px; }
  .privacy-pill { display:none; }
  .hero { padding:23px; border-radius:22px; }
  .hero h2 { font-size:35px; }
  .stepper { grid-template-columns:1fr 1fr 1fr; padding:13px 10px; }
  .step-line { display:none; }
  .step { flex-direction:column; text-align:center; gap:6px; }
  .step small { display:none; }
  .step-number { width:30px; height:30px; flex-basis:30px; }
  .upload-stage { padding:22px 16px; }
  .dropzone { min-height:220px; }
  .selected-file-bar { align-items:flex-start; }
  .selected-file-bar strong { max-width:210px; }
  .image-panel, .action-panel, .report-section { padding:16px; }
  .panel-title { display:block; }
  .editor-toolbar { justify-content:flex-start; margin-top:12px; }
  .canvas-shell { min-height:230px; }
  .result-stats { gap:5px; }
  .download-success { align-items:flex-start; flex-wrap:wrap; padding:16px; }
  .download-success .btn { width:100%; margin-left:0; }
}


/* v0.3 public beta */
.top-actions{display:flex;align-items:center;gap:12px}.privacy-link{font-weight:700;color:#344054;text-decoration:none}.privacy-link:hover{text-decoration:underline}
.beta-notice{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:18px 0 24px;padding:15px 18px;border:1px solid #f7c96b;background:#fffaf0;border-radius:16px}.beta-notice div{display:flex;align-items:center;gap:12px}.beta-notice strong{color:#8a4b00}.beta-notice span{color:#694d28}.beta-notice a{white-space:nowrap;color:#315efb;font-weight:700;text-decoration:none}
.scenario-section{margin:0 0 28px}.scenario-heading h3{margin:6px 0 16px;font-size:24px}.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.scenario-grid article{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:20px;box-shadow:0 8px 28px rgba(16,24,40,.04)}.scenario-grid article>span{font-size:28px}.scenario-grid strong{display:block;margin:12px 0 6px;font-size:17px}.scenario-grid p{margin:0;color:#667085;line-height:1.65}
.feedback-section{margin-top:22px;padding:24px;border:1px solid #d0d5dd;border-radius:20px;background:#fff}.feedback-copy h3{margin:6px 0 8px}.feedback-copy p{margin:0;color:#667085}.feedback-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.feedback-buttons button{border:1px solid #d0d5dd;background:#fff;border-radius:999px;padding:11px 16px;font-weight:700;cursor:pointer}.feedback-buttons button:hover,.feedback-buttons button.selected{border-color:#315efb;background:#eef4ff;color:#2149cf}.feedback-draft{border-top:1px solid #eaecf0;padding-top:18px}.feedback-draft label{display:block;font-weight:700;margin-bottom:8px}.feedback-draft textarea{width:100%;box-sizing:border-box;border:1px solid #d0d5dd;border-radius:12px;padding:12px;font:inherit;resize:vertical}.feedback-actions{display:flex;gap:10px;margin-top:12px}.feedback-draft small{display:block;margin-top:10px;color:#667085}
.public-privacy-card{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:24px;padding:20px 22px;border-radius:18px;background:#f8fafc;border:1px solid #e4e7ec}.public-privacy-card p{margin:6px 0 0;color:#667085;line-height:1.6}.public-privacy-card a{white-space:nowrap;color:#315efb;font-weight:700;text-decoration:none}.footer a{color:inherit}
@media(max-width:760px){.top-actions{align-items:flex-end;flex-direction:column;gap:6px}.privacy-link{font-size:13px}.beta-notice,.beta-notice div,.public-privacy-card{align-items:flex-start;flex-direction:column}.scenario-grid{grid-template-columns:1fr}.feedback-actions{flex-direction:column}.feedback-actions .btn{width:100%;justify-content:center}}

.privacy-copy{max-width:820px}.privacy-copy h3{margin:28px 0 8px}.privacy-copy p,.privacy-copy li{color:#475467;line-height:1.8}.privacy-copy ol,.privacy-copy ul{padding-left:24px}