/* V06 presentation, implemented from the approved specification.
   No application state, event handlers, schema or upload behavior lives here.
   Language seam: existing .lang-toggle, #lb-en/#lb-cn and setLang(en|cn). */
:root {
  --navy:#182331; --blue:#2563eb; --blue-lt:#eff5ff;
  --bg:#f7f9fc; --card:#fff; --text:#182331; --muted:#596777; --border:#e1e7ef;
  --ex:#2563eb; --ex-lt:#eff5ff; --ex-dk:#182331; --focus:#075fcb;
}
body {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5;}
button,input,select,textarea {font:inherit;}
button,a,input,select,textarea,label {touch-action:manipulation;}
button:disabled {cursor:wait; opacity:.65;}
button,a,input,select,textarea {scroll-margin-block:24px;}
:focus-visible {outline:3px solid var(--focus)!important; outline-offset:3px;}
.shell {max-width:1240px; margin:auto; padding:24px 40px 20px; gap:0;}
.topbar,.botnav {
  background:#edf3fc; border:1px solid #cfdbed; border-radius:22px;
  box-shadow:0 8px 28px #18233108;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topbar,.botnav {
    background:linear-gradient(155deg,#ffffffed 0%,#eff5ffbd 48%,#ffffffd6 100%);
    border-color:#fff; -webkit-backdrop-filter:blur(22px) saturate(1.35);
    backdrop-filter:blur(22px) saturate(1.35);
  }
}
.topbar {min-height:78px; padding:16px 24px; gap:22px; margin-bottom:24px;}
.logo {font-size:29px; color:#182331; letter-spacing:-1.1px; line-height:1;}
.logo em {color:inherit;}
.logo::after {content:""; display:inline-block; width:7px; height:7px; margin-left:4px; border-radius:50%; background:#2563eb;}
.xbadge {background:#eff5ff; color:#596777; border:1px solid var(--border); font-size:11px; letter-spacing:.3px;}
.prog-wrap {min-width:64px; margin-inline:12px;}
.prog-bar {height:6px; background:#dfe7f3;}
.prog-fill {background:#2563eb;}
.prog-txt {font-size:12px; color:#596777; margin-top:6px;}
/* Keep the current language controls until the separately pinned component is supplied. */
.lang-toggle {background:#e7eef8; border:1px solid #d7e1ee; padding:3px; gap:3px; border-radius:99px;}
.lang-toggle .lang-btn {min-width:47px; min-height:38px; padding:6px 11px; color:#596777; font-size:13px;}
.lang-toggle .lang-btn.active {background:#fff; color:#182331; box-shadow:0 2px 6px #1823310d;}
#save-chip {min-height:44px; padding:9px 15px; background:#fff; color:#596777; border:1px solid #d7e1ee; border-radius:99px; font-size:13px;}
.sec-label {display:flex; flex-direction:column; background:#fff; padding:30px 44px 16px; border:1px solid var(--border); border-bottom:0; border-radius:24px 24px 0 0;}
.sec-chip {align-self:flex-start; color:#596777; background:#f7f9fc; padding:5px 10px; font-size:12px; margin-bottom:10px; letter-spacing:.35px;}
.sec-title {color:#182331; font-size:44px; font-weight:650; line-height:1.12; letter-spacing:-1.4px; overflow-wrap:anywhere;}
.sec-sub {font-size:16px; line-height:1.55; margin-top:12px; max-width:820px;}
.sec-sub:empty {display:none;}
.scroll {min-height:0; background:#fff; padding:16px 44px 36px; border:1px solid var(--border); border-top:0; border-radius:0 0 24px 24px; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#c8d2df transparent;}
#content>* {min-width:0; max-width:100%;}
.card {border:0; border-radius:0; padding:26px 0; margin:0; border-bottom:1px solid var(--border); background:#fff;}
.card:first-child {padding-top:6px;}
.card:last-child {border-bottom:0; padding-bottom:0;}
.card-title {font-size:17px; text-transform:none; letter-spacing:0; margin-bottom:20px; line-height:1.5; flex-wrap:wrap; gap:8px;}
.welcome-card {background:#fff; color:#182331; border-radius:0; padding:4px 0 24px; margin:0; border-bottom:1px solid var(--border);}
.welcome-card h2 {font-size:20px; line-height:1.5; margin-bottom:12px;}
.welcome-card p {font-size:15px; line-height:1.65; color:#596777;}
.welcome-tag {background:#f7f9fc; color:#596777; border:1px solid var(--border);}
.bonfi-express #content>div[style*="background:linear-gradient"] {background:#fff!important; color:#182331!important; border-radius:0!important; padding:4px 0 24px!important; margin:0!important; border-bottom:1px solid var(--border);}
.bonfi-express #content>div[style*="background:linear-gradient"]>div {color:#596777!important;}
.bonfi-express #content>div[style*="background:linear-gradient"]>div[style*="font-weight:700"] {color:#182331!important;}
.bonfi-express #content>div[style*="background:linear-gradient"]>div>div {background:#f7f9fc!important; color:#596777!important; border:1px solid var(--border);}
.f {gap:8px; margin-bottom:22px; min-width:0;}
.f label,.own-lbl {font-size:14px; color:#596777; line-height:1.5; flex-wrap:wrap;}
.f input,.f select,.f textarea {min-height:54px; padding:14px 16px; border-width:1px; border-radius:12px; background-color:#fff; min-width:0;}
.f select {padding-right:42px;}
.f input:focus,.f select:focus,.f textarea:focus {border-color:#075fcb; box-shadow:0 0 0 3px #075fcb14;}
.hint {font-size:13px; font-style:normal; line-height:1.55;}
.opt-tag {color:#596777; background:#f0f3f8; font-size:11px;}
.g2 {gap:22px; min-width:0;}
.frow {gap:12px; min-width:0;}
.frow>.f,.abn-row>.f {min-width:0;}
.flag-btn {width:44px; height:54px; margin-top:29px;}
.rc,.card>label:has(input[type="radio"]) {min-height:86px; padding:20px!important; border-radius:15px!important; margin-bottom:12px!important;}
.rc-title {font-size:17px;}
.rc-sub {font-size:14px;}
.rc.active,.card>label:has(input[type="radio"]:checked) {border-color:#2563eb!important; background:#eff5ff!important;}
input[type="radio"],input[type="checkbox"] {accent-color:#2563eb!important;}
.epills {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; background:#fff; border:0; border-radius:0;}
.ep {min-height:86px; padding:18px 12px; font-size:16px; line-height:1.5; border:1px solid var(--border); border-radius:15px; background:#fff; color:#596777;}
.ep.active {border-color:#2563eb; background:#eff5ff; color:#182331; box-shadow:inset 0 0 0 1px #2563eb;}
.atabs {gap:12px; margin-bottom:20px;}
.atab {min-height:50px; display:flex; align-items:center; justify-content:center;}
.atab.active {background:#eff5ff; border-color:#2563eb; color:#182331;}
.drow {background:#f7f9fc; padding:22px; margin-bottom:16px; border-radius:16px;}
.addrow {min-height:54px; background:#eff5ff; border-color:#cfdbed; color:#182331;}
.own-box {min-width:145px;}
.own-box input {width:60px; min-width:0;}
.partner-banner {flex-wrap:wrap;}
.pb-text {min-width:140px;}
.doc-item,.docitem,.ufile,.iditem {background:#f7f9fc; border-color:var(--border); padding:16px; border-radius:12px;}
.doc-item .di-text,.docitem>div,.doc-item-hd>div {min-width:0; overflow-wrap:anywhere;}
.doc-item .di-title,.doc-item-title {font-size:15px; line-height:1.5;}
.doc-item .di-sub,.doc-item-sub {font-size:13px; line-height:1.5;}
.doc-item .di-tag {display:inline-block;}
.dccat {white-space:normal; max-width:30%;}
.upzone {background:#fff; border:1.5px dashed #cfdbed; padding:26px 20px;}
.upzone:focus-within,.rc:focus-within,.card>label:focus-within {outline:3px solid #075fcb; outline-offset:3px;}
.comp,.cgcard {background:#f7f9fc; border:1px solid var(--border); padding:22px; color:#182331;}
.comp h4,.cgcard p {color:#596777;}
.comp h4 {font-size:12px; letter-spacing:.5px;}
.comp-row {background:#fff; border-color:var(--border);}
.ctext,.cval {color:#596777;}
.comp-row.ok .cval {color:#15803d;}
.cdot {background:#9aa8b9;}
.cgbtn {background:#fff; border-color:#cfdbed; color:#182331;}
.cgbtn.done {background:#dcfce7; color:#166534; border-color:#86efac;}
.consent-box,.consent-check {background:#fff; line-height:1.65;}
.consent-check {padding:20px;}
.sig {background:#fff; min-height:100px;}
.alert {padding:16px; line-height:1.65;}
.alert.info {background:#eff5ff; border-color:#e1e7ef; color:#596777;}
.botnav {padding:14px 20px; gap:12px; margin-top:20px; align-items:center;}
.btn-next,.modal-btn.navy {
  background:#245ed9; background:linear-gradient(135deg,#2869df,#2363e6 60%,#1e55ca);
  color:#fff; box-shadow:0 4px 12px #2363e61a;
}
.btn-next {height:auto; min-height:56px; padding:14px 24px; font-size:17px; border-radius:14px;}
.btn-back,.btn-skip,.btn-submit-now {background:#fff; border:1px solid #cfdbed; color:#596777; height:auto; min-height:52px; padding:12px 18px; border-radius:14px; line-height:1.4;}
.btn-submit-now {font-size:14px;}
.btn-next:hover,.modal-btn.navy:hover {filter:brightness(.97);}
.btn-next:active {background:#245ed9;}
.modal {max-width:760px; max-height:88dvh; padding:30px; padding-bottom:max(30px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0;}
.modal h3 {font-size:26px;}
.modal-btn,.modal-close {min-height:44px;}
#bonfi-workspace-controls {order:4; margin:18px 0 0!important; padding-top:14px; border-top:1px solid var(--border); font-family:inherit!important; font-size:12px!important; line-height:1.5!important; gap:8px!important;}
#bonfi-workspace-controls button,#bonfi-workspace-controls select {min-height:36px; min-width:0; border-color:var(--border)!important; border-radius:9px!important; color:#596777!important; font-family:inherit;}
#bonfi-draft-status {color:#596777!important; overflow-wrap:anywhere;}
#bonfi-receipt-trigger {right:max(16px,calc((100vw - 1220px)/2)); bottom:calc(116px + env(safe-area-inset-bottom,0px))!important; min-height:44px; border-color:#cfdbed!important; color:#596777!important;}
#bonfi-receipt-dialog button {min-height:44px;}
@media (max-width:700px) {
  .shell {padding:12px 12px max(10px,env(safe-area-inset-bottom)); padding-top:max(10px,env(safe-area-inset-top));}
  .topbar {min-height:0; padding:11px 14px; gap:9px; margin-bottom:14px; flex-wrap:wrap; border-radius:19px;}
  .logo {font-size:25px; margin-right:auto;}
  .xbadge {order:5; font-size:10px; padding:3px 6px;}
  .prog-wrap {order:5; flex:1 0 100%; margin:2px 0 0;}
  .bonfi-express .prog-wrap {flex:1 1 150px;}
  .prog-bar {height:4px;}
  .prog-txt {font-size:11px; margin-top:3px;}
  .lang-toggle .lang-btn {min-height:36px; min-width:40px; padding:5px 8px; font-size:12px;}
  #save-chip {min-height:42px; padding:7px 10px; font-size:12px;}
  .sec-label {padding:22px 22px 10px; border-radius:20px 20px 0 0;}
  .sec-title {font-size:35px; letter-spacing:-1px;}
  .sec-chip {font-size:11px; margin-bottom:8px;}
  .sec-sub {font-size:14px; margin-top:10px; line-height:1.5;}
  .scroll {padding:14px 22px 30px; border-radius:0 0 20px 20px;}
  .card {padding:24px 0;}
  .card-title {font-size:16px; margin-bottom:16px;}
  .g2 {grid-template-columns:minmax(0,1fr); gap:0;}
  .epills {grid-template-columns:minmax(0,1fr); gap:10px;}
  .ep {min-height:76px; text-align:left; padding:18px;}
  .rc,.card>label:has(input[type="radio"]) {min-height:80px; padding:17px!important;}
  .drow {padding:16px;}
  .abn-row {flex-wrap:wrap;}
  .abn-row>.f {flex-basis:180px;}
  .own-box {flex-basis:100%;}
  .docitem {flex-wrap:wrap;}
  .dccat {max-width:100%;}
  .botnav {margin-top:12px; padding:10px; gap:8px; flex-wrap:wrap; border-radius:18px;}
  .btn-back,.btn-skip,.btn-submit-now {min-height:44px; padding:10px 12px; flex:1 1 auto; font-size:13px;}
  .btn-next {flex:1 1 100%; min-height:52px; padding:13px 15px; font-size:16px;}
  .bonfi-express .btn-back {flex:0 1 auto;}
  .bonfi-express .btn-next {flex:1 1 140px;}
  #bonfi-workspace-controls {margin-top:12px!important; padding-top:10px;}
  #bonfi-workspace-controls button,#bonfi-workspace-controls select {max-width:100%!important; font-size:11px;}
  #bonfi-receipt-trigger {bottom:calc(148px + env(safe-area-inset-bottom,0px))!important; right:18px!important;}
  .modal {padding:22px;}
}
/* A short visual viewport (including an on-screen keyboard) keeps the form and
   actions usable; the section heading can scroll without covering the inputs. */
@media (max-height:680px) {
  .shell {padding-top:8px; padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .topbar {margin-bottom:8px; padding-block:7px; min-height:0;}
  .sec-label {max-height:28dvh; overflow:auto; padding-top:14px; padding-bottom:8px;}
  .sec-title {font-size:30px;}
  .sec-sub {margin-top:7px;}
  #bonfi-workspace-controls {margin-top:8px!important; padding-top:8px;}
  .botnav {margin-top:8px; padding:8px;}
  .btn-next {min-height:46px; padding-block:10px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important;}
}
@media (prefers-reduced-transparency:reduce) {
  .topbar,.botnav {background:#edf3fc; border-color:#cfdbed; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .btn-next,.modal-btn.navy {background:#245ed9;}
}
@media (forced-colors:active) {
  .topbar,.botnav,.ep.active,.rc.active {border:1px solid CanvasText;}
  .btn-next,.modal-btn.navy {border:1px solid ButtonText;}
}
