:root{
    --navy:#0E1B5C; --indigo:#4C3BCF; --indigo-tint:#EFEDFC; --gold:#FBB034; --gold-tint:#FFF6E4;
    --amber:#D97706; --amber-tint:#FEF3E2; --emerald:#0E9F6E; --emerald-tint:#E6F8F1;
    --teal:#0E9C94; --teal-tint:#E4F7F5; --purple:#7B5FE0; --purple-tint:#F1ECFC; --coral:#E8635B; --coral-tint:#FDEEED;
    --border:#E2E6F2; --card:#FFFFFF; --muted:#5B6E8C; --red:#D64550; --red-tint:#FDECEE;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      radial-gradient(circle at 92% 0%, #EFEDFC 0%, transparent 45%),
      radial-gradient(circle at 4% 100%, #FEF3E2 0%, transparent 45%),
      #F8F8FC;
    color:var(--navy);
    font-family:'Rubik', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .app{max-width:920px;margin:0 auto;padding:24px 20px 70px;}

  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
  .meta{font-family:'JetBrains Mono', monospace;font-size:10.5px;color:var(--muted);}
  .gate-badge{
    display:flex;align-items:center;gap:6px;background:var(--gold-tint);border:1px solid #F4D48C;color:#8A5B00;
    font-family:'JetBrains Mono', monospace;font-size:9.5px;font-weight:700;border-radius:20px;padding:4px 10px 4px 6px;
  }
  .gate-badge svg{width:13px;height:13px;}
  select.jump-select{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--indigo);
    background:var(--indigo-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234C3BCF' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
    border:1px solid #DAD3F7;border-radius:20px;padding:6px 26px 6px 12px;cursor:pointer;appearance:none;
  }

  .page{display:none;animation:pop .3s ease;}
  .page.active{display:block;}
  @keyframes pop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  h2{font-size:21px;font-weight:800;margin:0 0 8px;font-family:'Sora',sans-serif;color:var(--navy);}
  .kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 6px;}
  p{margin:0 0 10px;font-size:14px;color:#2B3466;}
  .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px 24px;margin-bottom:14px;box-shadow:0 4px 20px rgba(14,27,92,.05);position:relative;overflow:hidden;}
  .card::before{content:'';position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(76,59,207,.06),transparent 70%);pointer-events:none;}

  .page-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .page-head .phicon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .page-head .phicon svg{width:19px;height:19px;color:#fff;}
  .page-head .phtext .kicker{margin-bottom:2px;}
  .page-head .phtext h2{margin-bottom:0;}

  .caution-line{
    display:flex;gap:10px;align-items:flex-start;background:var(--gold-tint);border:1px solid #F4D48C;
    border-radius:12px;padding:12px 16px;font-size:12.5px;color:#6B4A00;margin-top:10px;
  }
  .caution-line svg{width:17px;height:17px;flex-shrink:0;color:#B8790A;margin-top:1px;}

  .info-grid{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
  .info-row{display:flex;gap:14px;align-items:flex-start;}
  .info-num{width:28px;height:28px;border-radius:50%;background:var(--indigo);color:#fff;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12.5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .info-row b{display:block;font-size:14px;color:var(--navy);margin-bottom:2px;}
  .info-row span{font-size:12.5px;color:var(--muted);}

  /* progress gauge */
  .gauge-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .gauge{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .gauge-inner{width:82px;height:82px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .gauge-pct{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;color:var(--navy);}
  .gauge-label{font-size:9px;color:var(--muted);font-weight:700;}
  .gauge-text b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:3px;}
  .gauge-text span{font-size:12.5px;color:var(--muted);}

  /* artifact rows */
  .artifact-row{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:#FBFCFE;}
  .artifact-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .artifact-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .artifact-icon svg{width:18px;height:18px;color:#fff;}
  .artifact-title{font-size:14px;font-weight:700;color:var(--navy);font-family:'Sora',sans-serif;}
  .artifact-req{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;color:var(--amber);background:var(--amber-tint);border-radius:5px;padding:2px 7px;margin-left:8px;}
  .artifact-help{font-size:12px;color:var(--muted);margin:4px 0 10px;}
  .attach-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .attach-input{
    flex:1;min-width:180px;font-family:'Rubik',sans-serif;font-size:13px;color:var(--navy);
    border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;background:#fff;
  }
  .attach-input:focus{outline:none;border-color:var(--indigo);}
  .attach-btn{
    font-family:'Rubik',sans-serif;font-weight:700;font-size:12.5px;border-radius:9px;padding:9px 16px;
    cursor:pointer;border:1.5px solid var(--indigo);background:#fff;color:var(--indigo);display:flex;align-items:center;gap:6px;
  }
  .attach-btn svg{width:14px;height:14px;}
  .file-chip{display:flex;align-items:center;gap:8px;background:var(--emerald-tint);border:1px solid #BEE8D8;border-radius:10px;padding:8px 12px;margin-top:8px;font-size:12.5px;color:var(--emerald);font-weight:600;}
  .file-chip svg{width:15px;height:15px;flex-shrink:0;}
  .file-chip .fname{flex:1;color:var(--navy);font-weight:500;}
  .file-chip .fremove{cursor:pointer;color:var(--red);font-weight:700;padding:0 4px;}
  .file-error{font-size:12px;color:var(--red);margin-top:8px;display:flex;align-items:center;gap:6px;}
  .file-error svg{width:14px;height:14px;flex-shrink:0;}
  .file-types{font-family:'JetBrains Mono',monospace;font-size:10px;color:#A9A2CC;margin-top:6px;}

  /* connectivity simulator */
  .connect-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--indigo-tint);border-radius:12px;padding:12px 16px;margin-top:14px;flex-wrap:wrap;}
  .connect-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--indigo);}
  .connect-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);}
  .connect-dot.offline{background:var(--red);}
  .connect-btn{font-family:'Rubik',sans-serif;font-weight:700;font-size:12px;border-radius:8px;padding:7px 13px;cursor:pointer;border:1px solid var(--indigo);background:#fff;color:var(--indigo);}
  .offline-note{display:none;margin-top:10px;font-size:12px;color:#6B4A00;background:var(--amber-tint);border:1px solid #F0C98A;border-radius:10px;padding:10px 14px;}
  .offline-note.show{display:block;}

  .declaration-box{
    background:var(--gold-tint);border:1.5px solid var(--gold);border-radius:14px;padding:16px 18px;margin-top:14px;
    display:flex;gap:12px;align-items:flex-start;
  }
  .declaration-box input{width:20px;height:20px;accent-color:var(--gold);flex-shrink:0;margin-top:2px;}
  .declaration-box b{display:block;font-size:13.5px;color:#7A4A00;margin-bottom:2px;}
  .declaration-box span{font-size:12px;color:#7A4A00;}

  /* review table */
  .review-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .review-row:last-child{border-bottom:none;}
  .review-row .rleft{display:flex;align-items:center;gap:10px;}
  .status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .status-dot.done{background:var(--emerald);}
  .status-dot.pending{background:var(--amber);}
  .review-row .rk{color:var(--muted);}
  .review-row .rv{color:var(--navy);font-weight:700;text-align:right;}
  .review-row .redit{font-size:11px;color:var(--indigo);font-weight:700;cursor:pointer;margin-left:10px;}

  .submit-btn{
    font-family:'Rubik',sans-serif;font-weight:800;font-size:15px;border-radius:14px;padding:14px 26px;
    cursor:pointer;border:none;background:var(--indigo);color:#fff;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .submit-btn:disabled{opacity:.4;cursor:default;}
  .submit-btn svg{width:18px;height:18px;}

  /* receipt */
  .receipt{background:linear-gradient(160deg,#fff,#F8F8FF);border:1.5px dashed #C9C1F0;border-radius:20px;padding:0;overflow:hidden;box-shadow:0 14px 34px rgba(76,59,207,.12);}
  .receipt-head{background:linear-gradient(120deg,var(--indigo),#6B5CE0);color:#fff;padding:22px 24px;text-align:center;}
  .receipt-head svg{width:34px;height:34px;margin-bottom:8px;}
  .receipt-head b{display:block;font-size:17px;font-family:'Sora',sans-serif;}
  .receipt-head span{font-size:11px;color:#E3DEFC;font-family:'JetBrains Mono',monospace;}
  .receipt-body{padding:20px 24px;}
  .receipt-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #E2DDF5;font-size:12.5px;}
  .receipt-row:last-child{border-bottom:none;}
  .receipt-row .rk{color:var(--muted);}
  .receipt-row .rv{color:var(--navy);font-weight:700;}
  .qr-deco{display:flex;justify-content:center;margin:14px 0;}
  .qr-deco svg{width:64px;height:64px;color:#D6D0F2;}

  .recap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;}
  .recap-chip{background:var(--indigo-tint);border-radius:12px;padding:12px 8px;text-align:center;}
  .recap-chip svg{width:19px;height:19px;color:var(--indigo);margin-bottom:6px;}
  .recap-chip span{font-size:10px;font-weight:700;display:block;}

  .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px;}
  .nav-btn{
    font-family:'Rubik',sans-serif;font-weight:700;font-size:13.5px;border-radius:10px;
    padding:10px 18px;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--navy);
    display:flex;align-items:center;gap:6px;
  }
  .nav-btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff;}
  .nav-btn:disabled{opacity:.35;cursor:default;}
  .nav-btn svg{width:15px;height:15px;}

  footer{margin-top:22px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;color:#AAB4E0;}

  @media (max-width:700px){
    .recap-grid{grid-template-columns:repeat(2,1fr);}
    .gauge-wrap{flex-direction:column;align-items:flex-start;}
  }