:root{
  --bg-0:#ffffff;
  --bg-1:#f8fafc;
  --bg-2:#f1f5f9;
  --ink:#0f172a;
  --muted:#475569;
  --muted-2:#94a3b8;
  --gold:#0052ff;
  --gold-bright:#3b82f6;
  --gold-deep:#0021a5;
  --cyan:#0284c7;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --glass:rgba(15,23,42,0.02);
  --glass-2:rgba(15,23,42,0.04);
  --glass-border:rgba(15,23,42,0.08);
  --shadow:0 4px 20px -4px rgba(15,23,42,0.05),0 12px 32px -12px rgba(0,82,255,0.12);
  --serif:"Cormorant Garamond","Noto Serif SC",serif;
  --sans:"Manrope","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bg-0);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(0,82,255,0.25);color:var(--ink);}
.bg-layer{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
    radial-gradient(120% 90% at 80% -10%, rgba(0,82,255,0.06) 0%, rgba(0,82,255,0) 55%),
    radial-gradient(100% 80% at 10% 10%, rgba(2,132,199,0.04) 0%, rgba(2,132,199,0) 50%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-2) 100%);}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(253,253,251,0.85);border-bottom:1px solid rgba(0,0,0,0.06);}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:20px;letter-spacing:.18em;
  color:var(--gold-deep);text-decoration:none;}
.brand .mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;overflow:hidden;}
.brand .mark img{width:100%;height:100%;object-fit:cover;}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-title{font-size:13px;letter-spacing:.14em;color:var(--muted);}
.nav-title b{color:var(--gold-deep);font-weight:600;}
.lang-btn{padding:7px 16px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass);
  font-size:12px;letter-spacing:.1em;color:var(--ink);cursor:pointer;transition:all .3s;font-family:var(--sans);}
.lang-btn:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(0,82,255,0.05);}
@media(max-width:640px){.nav-title{display:none;}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(120px,18vh,170px) clamp(20px,6vw,80px) 40px;max-width:1080px;margin:0 auto;text-align:center;}
.hero .tag{font-size:12px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;margin-bottom:22px;
  padding:7px 20px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);display:inline-block;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,64px);letter-spacing:.02em;line-height:1.1;}
.hero h1 .cn{display:block;font-family:var(--sans);font-weight:300;font-size:clamp(18px,2.4vw,26px);margin-top:12px;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold),var(--gold-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lede{color:var(--muted);max-width:640px;margin:22px auto 0;font-weight:300;font-size:15.5px;}
.hero .badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.badge{font-size:11px;padding:5px 14px;border:1px solid var(--glass-border);border-radius:999px;color:var(--muted);background:var(--glass);}

/* ---------- steps ---------- */
.steps{max-width:1080px;margin:0 auto;padding:0 clamp(20px,6vw,80px) 30px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.step{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.7);font-size:13px;color:var(--muted);cursor:pointer;transition:.3s;user-select:none;}
.step .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;
  background:var(--glass-2);color:var(--muted);transition:.3s;}
.step.active{border-color:var(--gold);color:var(--ink);background:rgba(0,82,255,0.05);}
.step.active .n{background:var(--gold);color:#fff;}
.step.done{border-color:var(--green);color:var(--green);}
.step.done .n{background:var(--green);color:#fff;}
.step:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- panels ---------- */
main{max-width:1080px;margin:0 auto;padding:10px clamp(20px,6vw,80px) 80px;}
.panel{display:none;animation:fadeIn .5s ease;}
.panel.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.glass{background:rgba(255,255,255,0.85);border:1px solid var(--glass-border);border-radius:22px;backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);position:relative;overflow:hidden;padding:clamp(24px,4vw,40px);}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(0,82,255,0.25),rgba(0,82,255,0) 40%,rgba(2,132,199,0.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.sec-head{margin-bottom:26px;}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,34px);letter-spacing:.02em;}
.sec-head p{color:var(--muted);font-weight:300;font-size:14.5px;margin-top:8px;}

/* ---------- buttons ---------- */
.btn{padding:12px 26px;border-radius:12px;font-size:14px;font-weight:500;letter-spacing:.03em;transition:all .3s;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;font-family:var(--sans);}
.btn-gold{background:linear-gradient(120deg,var(--gold-deep),var(--gold));color:#fff;
  box-shadow:0 6px 24px rgba(0,82,255,0.3);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,82,255,0.4);}
.btn-ghost{background:transparent;border:1px solid var(--glass-border);color:var(--ink);}
.btn-ghost:hover{background:var(--glass);border-color:var(--gold);transform:translateY(-2px);}
.btn-green{background:linear-gradient(120deg,#15803d,var(--green));color:#fff;box-shadow:0 6px 24px rgba(22,163,74,0.3);}
.btn-green:hover{transform:translateY(-2px);}
.btn-red{background:linear-gradient(120deg,#b91c1c,var(--red));color:#fff;box-shadow:0 6px 24px rgba(220,38,38,0.3);}
.btn-red:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}

/* ---------- step 1: data ---------- */
textarea{width:100%;min-height:220px;border:1px solid var(--glass-border);border-radius:14px;padding:16px;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink);background:var(--bg-1);resize:vertical;transition:border-color .3s;}
textarea:focus{outline:none;border-color:var(--gold);}
.upload-zone{border:2px dashed var(--glass-border);border-radius:18px;padding:44px 20px;text-align:center;cursor:pointer;
  transition:.3s;background:var(--bg-1);}
.upload-zone:hover,.upload-zone.drag{border-color:var(--gold);background:rgba(0,82,255,0.04);}
.upload-zone svg{width:40px;height:40px;stroke:var(--gold);fill:none;stroke-width:1.5;margin-bottom:12px;}
.upload-hint{font-size:14px;color:var(--muted);}
.upload-formats{font-size:12px;color:var(--muted-2);margin-top:6px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.hint{font-size:12.5px;color:var(--muted-2);margin-top:10px;}
.table-wrap{overflow-x:auto;margin-top:22px;border:1px solid var(--glass-border);border-radius:14px;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px;}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--glass-border);white-space:nowrap;}
th{background:var(--glass-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(0,82,255,0.03);}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;letter-spacing:.04em;}
.tag.ok{background:rgba(22,163,74,0.1);color:var(--green);}
.tag.warn{background:rgba(217,119,6,0.1);color:var(--amber);}
.tag.bad{background:rgba(220,38,38,0.1);color:var(--red);}
.tag.blue{background:rgba(0,82,255,0.08);color:var(--gold-deep);}

/* ---------- step 2: scenario ---------- */
.scenario{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--glass-border);border-radius:18px;
  padding:24px;background:var(--bg-1);transition:.3s;cursor:pointer;}
.scenario:hover{border-color:var(--gold);box-shadow:var(--shadow);}
.scenario .icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  display:grid;place-items:center;flex:0 0 52px;}
.scenario .icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.5;}
.scenario h3{font-family:var(--serif);font-weight:500;font-size:20px;}
.scenario h3 .en{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-top:4px;}
.scenario p{color:var(--muted);font-size:13.5px;font-weight:300;margin-top:8px;max-width:640px;}
.rule-list{margin-top:22px;display:grid;gap:10px;}
.rule{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border:1px solid var(--glass-border);border-radius:14px;background:var(--bg-1);}
.rule .rid{font-family:var(--mono);font-size:12px;color:var(--gold-deep);background:rgba(0,82,255,0.08);
  padding:3px 10px;border-radius:8px;flex:0 0 auto;margin-top:2px;}
.rule .rname{font-weight:500;font-size:14px;}
.rule .rdesc{color:var(--muted);font-size:12.5px;font-weight:300;}

/* ---------- step 3: report ---------- */
.score-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:26px;}
.score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 120px;}
.score-ring .val{font-family:var(--serif);font-size:34px;font-weight:600;}
.score-ring .lbl{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;text-align:center;}
.score-meta{flex:1;min-width:220px;}
.score-meta .big{font-family:var(--serif);font-size:26px;font-weight:500;}
.score-meta p{color:var(--muted);font-size:13.5px;font-weight:300;margin-top:6px;}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
@media(max-width:640px){.stat-cards{grid-template-columns:1fr;}}
.stat{padding:18px;border-radius:16px;border:1px solid var(--glass-border);background:var(--bg-1);text-align:center;}
.stat .num{font-family:var(--serif);font-size:30px;font-weight:600;}
.stat .lbl{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:4px;}
.stat.g .num{color:var(--green);} .stat.a .num{color:var(--amber);} .stat.r .num{color:var(--red);}
.findings{display:grid;gap:14px;}
.finding{border:1px solid var(--glass-border);border-radius:16px;padding:20px;background:var(--bg-1);}
.finding .f-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.finding .f-title{font-weight:600;font-size:14.5px;}
.finding .f-inv{font-family:var(--mono);font-size:12px;color:var(--muted-2);}
.finding .f-body{margin-top:12px;display:grid;gap:8px;}
.finding .f-line{display:flex;gap:10px;font-size:13px;color:var(--muted);}
.finding .f-line b{color:var(--ink);font-weight:500;flex:0 0 auto;}
.finding .f-line .basis{font-family:var(--mono);font-size:11.5px;color:var(--gold-deep);}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:5px;}
.dot.pass{background:var(--green);} .dot.warn{background:var(--amber);} .dot.fail{background:var(--red);}
.plan{margin-top:26px;border:1px solid rgba(0,82,255,0.2);border-radius:16px;padding:20px;background:rgba(0,82,255,0.04);}
.plan h4{font-family:var(--serif);font-size:18px;font-weight:500;margin-bottom:12px;color:var(--gold-deep);}
.plan ul{list-style:none;display:grid;gap:8px;}
.plan li{font-size:13.5px;color:var(--muted);display:flex;gap:10px;}
.plan li::before{content:"→";color:var(--gold);flex:0 0 auto;}

/* ---------- step 4: approval ---------- */
.approval-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;}
@media(max-width:760px){.approval-grid{grid-template-columns:1fr;}}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
.form-field input{width:100%;padding:12px 14px;border:1px solid var(--glass-border);border-radius:12px;font-size:14px;
  background:var(--bg-1);color:var(--ink);transition:border-color .3s;font-family:var(--sans);}
.form-field input:focus{outline:none;border-color:var(--gold);}
.ledger{border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;}
.ledger .l-head{padding:14px 18px;background:var(--glass-2);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.ledger .l-item{padding:14px 18px;border-top:1px solid var(--glass-border);font-size:13px;}
.ledger .l-item .l-time{color:var(--muted-2);font-size:12px;font-family:var(--mono);}
.ledger .l-item .l-hash{color:var(--gold-deep);font-size:11px;font-family:var(--mono);word-break:break-all;margin-top:4px;}
.ledger .l-item .l-name{font-weight:600;}
.empty{color:var(--muted-2);font-size:13px;padding:18px;text-align:center;}
.counterfactual{display:none;margin-top:20px;border:1px solid rgba(124,58,237,0.3);border-radius:16px;padding:20px;
  background:rgba(124,58,237,0.05);}
.counterfactual.show{display:block;animation:fadeIn .5s ease;}
.counterfactual h4{font-family:var(--serif);font-size:18px;font-weight:500;color:#5b21b6;margin-bottom:10px;}
.counterfactual p{font-size:13.5px;color:var(--muted);}
.counterfactual .cf-list{margin-top:12px;display:grid;gap:8px;}
.counterfactual .cf-list div{font-size:13px;color:var(--muted);display:flex;gap:10px;}
.counterfactual .cf-list div::before{content:"◆";color:#7c3aed;flex:0 0 auto;font-size:10px;margin-top:4px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--glass-border);padding:40px clamp(20px,6vw,80px) 40px;max-width:1080px;margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;color:var(--muted-2);font-size:12.5px;}
footer .f-brand{font-family:var(--serif);letter-spacing:.18em;color:var(--gold-deep);font-size:18px;}
footer a{color:var(--muted);text-decoration:none;transition:color .3s;}
footer a:hover{color:var(--gold);}