:root {
        /* 主题色 */
        --brand: #f5a623;
        --brand-2: #ffc24b;
        --brand-deep: #e08a00;
        --ink: #2e2a26;
        --ink-2: #6b6660;
        --ink-3: #9a948c;
        --line: #e9e3d8;
        --line-soft: #f1ebe0;
        --panel: #ffffff;
        --panel-2: #fbf9f5;
        --bg: #f4f1ea;
        --danger: #d9534f;
        --ok: #3fa46a;
        --shadow-lg: 0 24px 60px -18px rgba(90, 70, 30, 0.28);
        --shadow-sm: 0 2px 10px rgba(120, 95, 45, 0.08);
        --radius: 18px;
      }

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      /* 全局兜底：代码里用 el.hidden = true 收起的元素，必须真的收起来。
         浏览器默认的 `[hidden]{display:none}` 来自 UA 样式表，**优先级低于任何
         作者样式** —— 只要元素的类里写了 display（.top-nav{display:flex} 这种），
         hidden 就彻底失效：属性是 true、元素照样占位置。本项目「按开关/状态收起」
         的元素全部走 hidden，统一在这儿兜住，省得每加一个都要记得补一条。
         （.api-note[hidden] / .cap-field[hidden] 那两条是历史补丁，留着无害） */
      [hidden] {
        display: none !important;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Segoe UI", Helvetica, Arial, sans-serif;
        color: var(--ink);
        background: var(--bg);
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        line-height: 1.55;
      }
      img {
        max-width: 100%;
        display: block;
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      /* ============ 顶部品牌栏 ============ */
      .topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line-soft);
      }
      .topbar-in {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 22px;
        height: 64px;
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        letter-spacing: 0.5px;
      }
      .logo .mark {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: conic-gradient(
          from 210deg,
          var(--brand) 0turn,
          var(--brand-2) 0.45turn,
          var(--brand-deep) 0.8turn,
          var(--brand) 1turn
        );
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        box-shadow: 0 6px 16px -6px rgba(224, 138, 0, 0.7);
      }
      .logo .mark svg {
        width: 22px;
        height: 22px;
      }
      .logo .txt {
        display: flex;
        flex-direction: column;
        line-height: 1;
      }
      .logo .txt b {
        font-size: 17px;
        color: var(--brand-deep);
        letter-spacing: 2px;
      }
      .logo .txt span {
        font-size: 9px;
        letter-spacing: 1.6px;
        color: var(--ink-3);
        margin-top: 3px;
      }

      .top-nav {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 22px;
      }
      .top-nav .ni {
        font-size: 14px;
        color: var(--ink-2);
        position: relative;
        padding: 6px 0;
        transition: 0.2s;
      }
      .top-nav .ni:hover {
        color: var(--brand-deep);
      }
      .top-nav .ni.active {
        color: var(--brand-deep);
        font-weight: 600;
      }
      .top-nav .ni.active::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -2px;
        width: 22px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
      }
      .lang {
        display: flex;
        align-items: center;
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 3px;
        background: #fff;
        font-size: 12px;
      }
      .lang button {
        border: 0;
        background: transparent;
        padding: 4px 9px;
        border-radius: 999px;
        color: var(--ink-3);
        font-size: 12px;
        transition: 0.2s;
        white-space: nowrap;
      }
      .lang button.on {
        background: var(--brand);
        color: #fff;
        font-weight: 600;
      }
      .btn-login {
        border: 1px solid var(--brand);
        color: var(--brand-deep);
        background: #fff;
        padding: 7px 18px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 600;
        transition: 0.2s;
      }
      .btn-login:hover {
        background: #fff7e8;
      }
      .btn-reg {
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        padding: 8px 20px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 700;
        box-shadow: 0 10px 20px -10px rgba(224, 138, 0, 0.9);
        transition: 0.2s;
      }
      .btn-reg:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px -10px rgba(224, 138, 0, 0.95);
      }
      .burger {
        display: none;
        margin-left: auto;
        border: 0;
        background: transparent;
        padding: 8px;
      }
      .burger svg {
        width: 24px;
        height: 24px;
        stroke: var(--ink);
      }

      /* ============ 顶部入口的显隐开关 ============
         三组入口由 assets/app.js 顶部的 FEATURES 控制，开关状态写到 <html> 的
         属性上，这里按属性收起 —— UI 与开关是同一份真相：

           data-topnav="off"      → .top-nav（首頁/交易產品/平台與帳戶/…/開戶）
           data-auth="off"        → 顶部的「登入」「註冊」两个按钮
           data-done-login="off"  → 提交成功页（第 4 步）的「登入帳號」

         kaihu.html 的 <html> 标签里就直接写死了 off，所以即使 app.js 挂了、
         被缓存成旧版、或者根本没跑，这几个入口也不会冒出来；
         要恢复显示，把 app.js 里对应的开关改成 true 即可（属性随之改成 on）。 */
      html[data-topnav="off"] .top-nav {
        display: none;
      }
      html[data-auth="off"] .btn-login,
      html[data-auth="off"] .btn-reg {
        display: none;
      }
      html[data-done-login="off"] [data-done-login-btn] {
        display: none;
      }
      /* 导航收起后语言切换要自己贴到右边：原来的 margin-left:auto 挂在 .top-nav 上
         （见上面 .top-nav 那条），它一 display:none，整行就缩到左边去了。 */
      html[data-topnav="off"] .topbar-in > .lang {
        margin-left: auto;
      }

      /* ============ Hero 标语 + 步骤条 ============ */
      .hero {
        position: relative;
        overflow: hidden;
        color: #fff;
        background: radial-gradient(
            900px 460px at 78% 12%,
            rgba(245, 166, 35, 0.2),
            transparent 60%
          ),
          radial-gradient(
            700px 400px at 12% 88%,
            rgba(245, 166, 35, 0.12),
            transparent 65%
          ),
          linear-gradient(160deg, #131a22 0%, #1d2833 46%, #0e141a 100%);
      }
      /* 科技点阵地球 */
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.5;
        background-image: radial-gradient(
            rgba(245, 166, 35, 0.55) 1px,
            transparent 1.4px
          ),
          radial-gradient(rgba(120, 190, 255, 0.3) 1px, transparent 1.4px);
        background-size: 34px 34px, 58px 58px;
        background-position: 0 0, 17px 17px;
        -webkit-mask-image: radial-gradient(
          120% 90% at 50% 40%,
          #000 30%,
          transparent 78%
        );
        mask-image: radial-gradient(
          120% 90% at 50% 40%,
          #000 30%,
          transparent 78%
        );
        animation: drift 26s linear infinite;
      }
      @keyframes drift {
        to {
          background-position: 340px 340px, 357px 357px;
        }
      }

      .hero-in {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        padding: 46px 22px 54px;
      }
      .hero h1 {
        margin: 0 0 6px;
        font-size: clamp(22px, 3.4vw, 32px);
        font-weight: 800;
        letter-spacing: 1px;
      }
      .hero h1 em {
        font-style: normal;
        background: linear-gradient(90deg, var(--brand-2), var(--brand));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero p.sub {
        margin: 0;
        color: #b9c4cf;
        font-size: 14px;
        letter-spacing: 0.4px;
      }

      /* ============ 首屏視頻教程（hero 右側兩支：中文 / 英文） ============
         地址統一配置在 assets/app.js 頂部的 FEATURES.tutorialVideos；
         preload="none" 進頁不拉流，點播放才加載。深色 hero 上用半透明玻璃卡片。 */
      .tut-row {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 14px;
      }
      .tut-card {
        margin: 0;
        width: min(252px, 100%);
        padding: 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(245, 166, 35, 0.28);
        backdrop-filter: blur(4px);
      }
      .tut-card figcaption {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px 2px 8px;
      }
      .tut-badge {
        flex: 0 0 auto;
        font-size: 10px;
        letter-spacing: 1px;
        color: #ffd48a;
        border: 1px solid rgba(245, 166, 35, 0.55);
        background: rgba(245, 166, 35, 0.16);
        border-radius: 999px;
        padding: 1px 8px;
        white-space: nowrap;
      }
      .tut-card b {
        color: #fff;
        font-size: 13px;
        letter-spacing: 0.5px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tut-card video {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: 8px;
      }
      .tut-card video:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
      }

      /* 步骤条 */
      .steps {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 22px 4px;
        display: flex;
        gap: 8px;
      }
      .step {
        flex: 1;
        padding: 16px 10px 14px;
        text-align: center;
        position: relative;
        color: #93a0ac;
        font-size: 13px;
        transition: 0.28s;
      }
      .step .dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 auto 9px;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 700;
        border: 2px solid #3a4652;
        background: transparent;
        color: #8c99a5;
        transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .step .nm {
        display: block;
        line-height: 1.35;
      }
      .step .nm small {
        display: block;
        font-size: 10px;
        opacity: 0.65;
        letter-spacing: 0.5px;
      }
      .step::after {
        content: "";
        position: absolute;
        top: 31px;
        left: calc(50% + 24px);
        right: calc(-50% + 24px);
        height: 2px;
        background: #2c3742;
        z-index: 0;
      }
      .step:last-child::after {
        display: none;
      }

      .step.done {
        color: #d5dee6;
      }
      .step.done .dot {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
      }
      .step.done::after {
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
      }
      .step.on {
        color: #fff;
        font-weight: 600;
      }
      .step.on .dot {
        border-color: var(--brand);
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #fff;
        transform: scale(1.16);
        box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.18),
          0 8px 20px -6px rgba(245, 166, 35, 0.85);
        animation: pulse 2.1s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.16),
            0 8px 20px -6px rgba(245, 166, 35, 0.8);
        }
        50% {
          box-shadow: 0 0 0 11px rgba(245, 166, 35, 0.07),
            0 8px 22px -6px rgba(245, 166, 35, 0.9);
        }
      }

      /* ============ 卡片主体 ============ */
      .wrap {
        max-width: 1180px;
        margin: 0px auto 60px;
        padding: 0 22px;
        position: relative;
        z-index: 5;
        margin-top: 25px;
      }
      .card {
        background: var(--panel);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        border: 1px solid #efe9dd;
        display: grid;
        grid-template-columns: 230px 1fr;
        overflow: hidden;
      }

      /* 左侧侧栏 */
      .aside {
        background: linear-gradient(180deg, #fdfbf7, #f6f2ea);
        border-right: 1px solid var(--line-soft);
        padding: 34px 0;
      }
      .aside-title {
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--ink-3);
        padding: 0 26px 18px;
        text-transform: uppercase;
      }
      .side {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        padding: 15px 26px;
        position: relative;
        cursor: default;
      }
      .side .n {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        flex: 0 0 auto;
        border: 2px solid #d8d1c5;
        color: #b4aca0;
        background: #fff;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 700;
        transition: 0.3s;
      }
      .side .lb {
        padding-top: 4px;
        font-size: 13.5px;
        color: #a79f93;
        transition: 0.25s;
      }
      .side .lb b {
        display: block;
        font-weight: 600;
        margin-bottom: 2px;
      }
      .side .lb i {
        font-style: normal;
        font-size: 11px;
        color: #bcb4a8;
      }
      .side.on .n {
        border-color: var(--brand);
        color: var(--brand-deep);
        background: #fff8ea;
        box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.12);
      }
      .side.on .lb {
        color: var(--brand-deep);
        font-weight: 600;
      }
      .side.on .lb b {
        color: var(--brand-deep);
      }
      .side.done .n {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
      }
      .side.done .n svg {
        width: 14px;
        height: 14px;
      }
      .side.done .lb {
        color: var(--ink-2);
      }

      /* 右侧内容 */
      .main {
        padding: 36px 44px 44px;
        min-height: 520px;
      }
      .pane {
        display: none;
        animation: fadeIn 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
      }
      .pane.show {
        display: block;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .pane h2 {
        margin: 0 0 4px;
        font-size: 22px;
        font-weight: 800;
        color: var(--brand-deep);
        letter-spacing: 0.5px;
      }
      .pane .hint {
        margin: 0 0 26px;
        font-size: 12.5px;
        color: var(--ink-3);
      }

      /* 表单 */
      .field {
        margin-bottom: 22px;
      }
      /* 验证码整块字段的显隐完全跟着 assets/app.js 顶部的 FEATURES.captcha 走。
         开关状态由 JS 写到 <html data-captcha="on|off"> 上，这里按属性收起 ——
         UI 与开关是同一份真相，不再依赖任何一处 JS 调用的执行时机。
         （`hidden` 属性那条是第二道保险：以后谁给 .field 加 display 也不会失效） */
      html[data-captcha="off"] .cap-field {
        display: none;
      }
      .cap-field[hidden] {
        display: none;
      }
      .field > label {
        display: block;
        font-size: 13.5px;
        color: var(--brand-deep);
        font-weight: 600;
        margin-bottom: 8px;
      }
      .field .ctrl {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .field input[type="text"],
      .field input[type="email"],
      .field input[type="tel"],
      .field input[type="password"] {
        flex: 1;
        border: 0;
        border-bottom: 1.6px solid var(--line);
        background: transparent;
        padding: 9px 2px;
        font-size: 15px;
        color: var(--ink);
        outline: none;
        transition: 0.25s;
        width: 100%;
      }
      .field input:focus {
        border-bottom-color: var(--brand);
      }
      .field input::placeholder {
        color: #c6bfb4;
        font-size: 14px;
      }
      .field .note {
        font-size: 11.5px;
        color: var(--ink-3);
        margin-top: 7px;
        line-height: 1.5;
      }
      .field .note.warn {
        color: #b98a4a;
      }

      /* 验证码（服务端签发的 PNG，Base64 内联） */
      .captcha-box {
        width: 132px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: linear-gradient(135deg, #f0f4f8, #e4eaf1);
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        flex: 0 0 auto;
        padding: 0;
        cursor: pointer;
        transition: 0.2s;
      }
      .captcha-box:hover {
        border-color: var(--brand);
      }
      .captcha-box:active {
        transform: scale(0.97);
      }
      .captcha-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      .captcha-box .cap-ph {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 11.5px;
        color: #7d8894;
        padding: 0 6px;
        text-align: center;
        pointer-events: none;
      }

      /* ============ 材料槽位（规格由 requirements 接口下发） ============ */
      .slots {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-bottom: 26px;
      }
      .slots-loading {
        grid-column: 1 / -1;
        padding: 26px;
        text-align: center;
        color: var(--ink-3);
        font-size: 13px;
        border: 2px dashed #e2dacb;
        border-radius: 14px;
        background: var(--panel-2);
      }
      .slot {
        border: 1.6px solid var(--line);
        border-radius: 14px;
        background: #fff;
        padding: 14px;
        transition: 0.22s;
        display: flex;
        flex-direction: column;
      }
      .slot:hover {
        border-color: #dcd2c2;
      }
      .slot.done {
        border-color: var(--brand);
        background: #fffdf8;
      }
      .slot.uploading {
        border-color: var(--brand);
      }
      .slot.error {
        border-color: var(--danger);
      }

      .slot-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }
      .slot-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        flex: 1;
        line-height: 1.4;
      }
      .slot-tag {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 999px;
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .slot-tag.req {
        background: #fff3e0;
        color: var(--brand-deep);
      }
      .slot-tag.opt {
        background: #f2f0ec;
        color: var(--ink-3);
      }

      .slot-drop {
        display: block;
        cursor: pointer;
      }
      .slot-box {
        height: 140px;
        border-radius: 10px;
        border: 1.6px dashed #e2dacb;
        background: var(--panel-2);
        display: grid;
        place-items: center;
        overflow: hidden;
        transition: 0.22s;
      }
      .slot-drop:hover .slot-box {
        border-color: var(--brand);
        background: #fffcf4;
      }
      .slot-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .slot-ph {
        text-align: center;
        color: #bdb5a8;
        font-size: 12px;
        line-height: 1.7;
        padding: 0 10px;
      }
      .slot-ph svg {
        width: 30px;
        height: 30px;
        stroke: #cfc7b9;
        margin: 0 auto 6px;
        display: block;
      }
      .slot-doc {
        font-family: "Courier New", monospace;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: 1px;
        color: var(--brand-deep);
        background: #fff4e2;
        border-radius: 8px;
        padding: 18px 22px;
      }

      .slot-hint {
        font-size: 11px;
        color: var(--ink-3);
        margin-top: 9px;
        line-height: 1.6;
      }
      .slot-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        min-height: 20px;
      }
      .slot-state {
        font-size: 11.5px;
        color: var(--ink-3);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1.5;
        word-break: break-word;
      }
      .slot.error .slot-state {
        color: var(--danger);
      }
      .dot-ok,
      .dot-run {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: 0 0 auto;
        display: inline-block;
      }
      .dot-ok {
        background: var(--ok);
      }
      .dot-run {
        background: var(--brand);
        animation: blink 1s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .slot-rm {
        border: 0;
        background: transparent;
        color: var(--ink-3);
        font-size: 11.5px;
        padding: 2px 6px;
        border-radius: 6px;
        transition: 0.2s;
        flex: 0 0 auto;
      }
      .slot-rm:hover {
        color: var(--danger);
        background: #fdf1f0;
      }

      /* ============ 接口提示条 ============ */
      .api-note {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f2f7f3;
        border: 1px solid #d8e8dc;
        color: #3d6b4c;
        border-radius: 12px;
        padding: 11px 14px;
        margin-bottom: 22px;
        font-size: 12.5px;
        line-height: 1.55;
      }
      /* 作者样式的 display 会盖掉浏览器默认的 [hidden]{display:none}，
         而 JS 是靠 el.hidden = true 收起这条提示的 —— 不显式补这一条，
         「隐藏」就失效，页面上会常驻一条空提示条 + 一个孤零零的「重試」按钮。 */
      .api-note[hidden] {
        display: none;
      }
      .api-note.err {
        background: #fdf4f3;
        border-color: #f0d5d2;
        color: #a83c36;
      }
      .api-note .an-ic {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
      }
      .api-note .an-ic svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
      }
      .api-note .an-tx {
        flex: 1;
        word-break: break-word;
      }
      .api-note .an-btn {
        flex: 0 0 auto;
        border: 1px solid currentColor;
        background: transparent;
        color: inherit;
        border-radius: 999px;
        padding: 4px 14px;
        font-size: 12px;
        font-weight: 600;
        transition: 0.2s;
      }
      .api-note .an-btn:hover {
        background: rgba(0, 0, 0, 0.04);
      }

      /* ============ 资料摘要 ============ */
      .summary {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--panel-2);
        padding: 18px 20px;
        margin-bottom: 22px;
      }
      .sum-head {
        font-size: 12px;
        letter-spacing: 1.4px;
        color: var(--ink-3);
        text-transform: uppercase;
        margin-bottom: 14px;
      }
      .sum-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 24px;
      }
      .sum-row {
        display: flex;
        gap: 10px;
        font-size: 13px;
        min-width: 0;
      }
      .sum-k {
        color: var(--ink-3);
        flex: 0 0 auto;
        min-width: 76px;
      }
      .sum-v {
        color: var(--ink);
        font-weight: 600;
        word-break: break-all;
      }
      .sum-files {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed var(--line);
        font-size: 13px;
      }
      .sum-file-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .sum-file {
        font-size: 11.5px;
        padding: 3px 10px;
        border-radius: 999px;
        background: #f2f0ec;
        color: var(--ink-3);
      }
      .sum-file.ok {
        background: #fff3e0;
        color: var(--brand-deep);
      }
      .sum-file.miss {
        background: #fdf1f0;
        color: var(--danger);
      }

      /* ============ 免责申明 ============ */
      /* 显隐开关：FEATURES.disclaimer（app.js）→ <html data-disc="on|off">
         关闭时整块收起；JS（updateDisclaimerChrome）还会再写一次 hidden + inline，
         这里是「旧 HTML + 新 JS / 脚本没跑」时的第一层保险 */
      html[data-disc="off"] .disc {
        display: none;
      }
      .disc {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 4px;
      }
      .disc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 18px;
        background: linear-gradient(180deg, #fdfbf7, #f7f3ec);
        border-bottom: 1px solid var(--line-soft);
        font-size: 13.5px;
      }
      .disc-head b {
        color: var(--brand-deep);
      }
      .disc-head .ver {
        font-size: 11px;
        color: var(--ink-3);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 2px 10px;
      }
      .disc-body {
        max-height: 240px;
        overflow-y: auto;
        padding: 16px 18px;
        font-size: 13px;
        line-height: 1.85;
        color: var(--ink-2);
        white-space: pre-wrap;
        word-break: break-word;
        background: #fff;
      }
      .disc-body.muted {
        color: var(--ink-3);
        font-style: italic;
      }

      /* 单选组 */
      .radio-row {
        display: flex;
        gap: 26px;
        flex-wrap: wrap;
        padding: 4px 2px;
      }
      .radio {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        font-size: 14px;
        color: var(--ink-2);
      }
      .radio input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .radio .mk {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #cfc7b9;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        transition: 0.22s;
        background: #fff;
      }
      .radio .mk::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
        transform: scale(0);
        transition: 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .radio input:checked + .mk {
        border-color: var(--brand);
      }
      .radio input:checked + .mk::after {
        transform: scale(1);
      }
      .radio input:checked ~ span {
        color: var(--brand-deep);
        font-weight: 600;
      }

      /* 勾选协议 */
      .agrees {
        margin: 26px 0 6px;
        display: flex;
        flex-direction: column;
        gap: 13px;
      }
      .agree {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 13.5px;
        color: var(--ink-2);
      }
      .agree input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .agree .cb {
        width: 19px;
        height: 19px;
        border-radius: 6px;
        border: 2px solid #cfc7b9;
        background: #fff;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        transition: 0.22s;
      }
      .agree .cb svg {
        width: 12px;
        height: 12px;
        stroke: #fff;
        stroke-width: 3.4;
        opacity: 0;
        transform: scale(0.5);
        transition: 0.22s;
      }
      .agree input:checked + .cb {
        background: var(--brand);
        border-color: var(--brand);
      }
      .agree input:checked + .cb svg {
        opacity: 1;
        transform: scale(1);
      }
      .agree a {
        color: var(--brand-deep);
        font-weight: 600;
        border-bottom: 1px dashed rgba(224, 138, 0, 0.5);
      }
      .agree a:hover {
        border-bottom-style: solid;
      }

      /* 页脚操作按钮 */
      .actions {
        display: flex;
        gap: 16px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 34px;
        padding-top: 26px;
        border-top: 1px solid var(--line-soft);
      }
      .actions.center {
        justify-content: center;
        border-top: 0;
        flex-direction: column;
        gap: 14px;
      }
      .btn {
        border: 0;
        border-radius: 999px;
        padding: 13px 46px;
        font-size: 15px;
        font-weight: 700;
        transition: 0.22s;
        letter-spacing: 0.5px;
        min-width: 150px;
      }
      .btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        box-shadow: 0 12px 26px -12px rgba(224, 138, 0, 0.95);
      }
      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 32px -14px rgba(224, 138, 0, 1);
      }
      .btn-primary:active {
        transform: translateY(0);
      }
      .btn-ghost {
        color: var(--ink-2);
        background: #fff;
        border: 1px solid var(--line);
      }
      .btn-ghost:hover {
        border-color: #d6cdbe;
        background: #fcfaf6;
      }
      .btn-wide {
        width: 100%;
        max-width: 340px;
        display: block;
      }
      .btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
      }

      /* 完成页 */
      .done-hero {
        text-align: center;
        padding: 14px 0 6px;
      }
      .tick {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        margin: 0 auto 22px;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        display: grid;
        place-items: center;
        box-shadow: 0 18px 40px -14px rgba(224, 138, 0, 0.95);
        animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      @keyframes pop {
        from {
          transform: scale(0.3);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
      .tick svg {
        width: 42px;
        height: 42px;
        stroke: #fff;
        stroke-width: 4;
        fill: none;
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        animation: draw 0.6s 0.3s ease forwards;
      }
      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }
      .done-hero h2 {
        color: var(--brand-deep);
        font-size: 24px;
        margin: 0 0 14px;
      }
      .done-hero p {
        color: var(--ink-2);
        font-size: 14.5px;
        margin: 0 auto;
        max-width: 440px;
        line-height: 1.9;
      }
      .done-hero p b {
        color: var(--brand-deep);
      }

      /* Toast 提示 */
      .toast {
        position: fixed;
        left: 50%;
        bottom: 38px;
        transform: translate(-50%, 120%);
        background: #2e2a26;
        color: #fff;
        padding: 13px 26px;
        border-radius: 14px;
        font-size: 13.5px;
        box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
        z-index: 200;
        opacity: 0;
        transition: 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
        pointer-events: none;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 90vw;
      }
      .toast.show {
        transform: translate(-50%, 0);
        opacity: 1;
      }
      .toast.err {
        background: #b03a36;
      }
      .toast .ic {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .toast .ic svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        stroke-width: 2.6;
        fill: none;
      }

      /* 浮动客服 */
      .fab {
        position: fixed;
        right: 26px;
        bottom: 26px;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 0;
        background: #fff;
        box-shadow: 0 14px 32px -10px rgba(90, 70, 30, 0.4);
        display: grid;
        place-items: center;
        z-index: 100;
        transition: 0.25s;
      }
      .fab:hover {
        transform: translateY(-3px) scale(1.05);
      }
      .fab svg {
        width: 26px;
        height: 26px;
        stroke: var(--brand-deep);
        fill: none;
        stroke-width: 2;
      }
      .fab::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(245, 166, 35, 0.5);
        animation: ring 2.4s ease-out infinite;
      }
      @keyframes ring {
        0% {
          transform: scale(0.9);
          opacity: 0.9;
        }
        100% {
          transform: scale(1.35);
          opacity: 0;
        }
      }

      /* ============ 响应式 ============ */
      @media (max-width: 900px) {
        /* 窄屏下顶部导航不再隐藏 —— 整行折到第二行、装不下就换行，
           七个入口在任何宽度都能看到、能点到。
           （汉堡按钮没有接任何菜单，留着一个点了没反应的按钮比不显示更糟，先收掉） */
        .topbar-in {
          flex-wrap: wrap;
          height: auto;
          min-height: 58px;
          padding: 10px 16px 0;
          gap: 10px;
        }
        .top-nav {
          order: 9; /* 排到 logo / 语言 / 按钮之后，独占一行 */
          flex: 1 0 100%;
          flex-wrap: wrap;
          width: 100%;
          margin-left: 0;
          gap: 8px 18px;
          padding: 2px 0 10px;
        }
        .top-nav .ni {
          flex: 0 0 auto;
          white-space: nowrap;
        }
        .burger {
          display: none;
        }
        .steps {
          padding-bottom: 0;
        }
        .step .nm {
          font-size: 10.5px;
        }
        .step .nm small {
          display: none;
        }
        .card {
          grid-template-columns: 1fr;
        }
        .aside {
          display: flex;
          gap: 0;
          overflow-x: auto;
          padding: 16px 8px;
          border-right: 0;
          border-bottom: 1px solid var(--line-soft);
        }
        .aside-title {
          display: none;
        }
        .side {
          flex-direction: column;
          align-items: center;
          gap: 7px;
          padding: 6px 14px;
          min-width: 82px;
          text-align: center;
        }
        .side .lb {
          padding-top: 0;
          font-size: 11px;
        }
        .side .lb i {
          display: none;
        }
        .main {
          padding: 26px 20px 34px;
          min-height: auto;
        }
        .pane h2 {
          font-size: 19px;
        }
      }
      @media (max-width: 640px) {
        /* 第一行：logo + 语言 + 註冊；第二行留给导航（见 900px 那段）。
           height 必须跟着 900px 那段保持 auto，否则导航那一行会被裁掉。 */
        .topbar-in {
          height: auto;
          padding: 10px 14px 0;
          gap: 8px;
        }
        .logo {
          flex: 0 0 auto;
        }
        .logo .mark {
          width: 32px;
          height: 32px;
        }
        .logo .mark svg {
          width: 19px;
          height: 19px;
        }
        .logo .txt b {
          font-size: 15px;
        }
        .logo .txt span {
          font-size: 8px;
          letter-spacing: 1.1px;
          white-space: nowrap;
        }
        .lang {
          padding: 2px;
          gap: 2px;
        }
        .lang button {
          padding: 4px 7px;
        }
        .btn-login {
          display: none;
        }
        /* 顶栏第一行收紧：logo + 语言（查询 / 登入 已折到第二行，
           见文件末尾的「顶栏右侧动作区」一节） */
        .topbar-in {
          align-items: center;
        }
        /* 防止 iOS 聚焦输入框时自动放大页面：
           Safari 会对 font-size < 16px 的表单控件触发自动缩放，
           手机断点下一律提到 16px（配合 viewport 的 maximum-scale=1 双保险） */
        .field input[type="text"],
        .field input[type="email"],
        .field input[type="tel"],
        .field input[type="password"],
        .field select,
        .field textarea {
          font-size: 16px;
        }
        .field input::placeholder {
          font-size: 14.5px;
        }
        .top-nav {
          gap: 6px 14px;
        }
        .top-nav .ni {
          font-size: 13px;
        }
        .hero-in {
          padding: 30px 16px 40px;
        }
        /* 手机端两支视频并排（太窄时靠 flex-wrap 自动叠放） */
        .tut-row {
          justify-content: flex-start;
          margin-top: 12px;
        }
        .tut-card {
          width: calc(50% - 7px);
          min-width: 136px;
          padding: 6px;
        }
        .tut-card figcaption {
          padding: 0 2px 6px;
        }
        .steps {
          padding: 0 6px 48px; /* 底部留空，避免被上浮的白卡盖住步骤文字 */
        }
        .step {
          padding: 12px 2px;
        }
        .step .dot {
          width: 26px;
          height: 26px;
          font-size: 12px;
        }
        .step::after {
          top: 27px;
          left: calc(50% + 20px);
          right: calc(-50% + 20px);
        }
        .wrap {
          padding: 0 12px;
          margin-top: -36px;
        }
        .slots {
          grid-template-columns: 1fr;
          gap: 14px;
        }
        .slot-box {
          height: 160px;
        }
        .sum-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .sum-row {
          flex-direction: column;
          gap: 2px;
        }
        .sum-k {
          min-width: 0;
        }
        .sum-files {
          flex-direction: column;
          gap: 8px;
        }
        .actions {
          flex-direction: column-reverse;
          gap: 12px;
        }
        .actions .btn {
          width: 100%;
        }
        .btn {
          min-width: 0;
          padding: 14px 20px;
        }
        .fab {
          right: 16px;
          bottom: 16px;
          width: 48px;
          height: 48px;
        }
      }

      /* ============ 協議文件（第 3 步必讀 PDF） ============ */
      .docs {
        margin-bottom: 22px;
      }
      .docs-head {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      .docs-head b {
        font-size: 13.5px;
        color: var(--brand-deep);
      }
      .docs-head span {
        font-size: 11.5px;
        color: var(--ink-3);
      }
      .doc-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .doc-card {
        border: 1.6px solid var(--line);
        border-radius: 14px;
        background: #fff;
        padding: 14px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: 0.22s;
      }
      .doc-card:hover {
        border-color: #dcd2c2;
      }
      .doc-card.done {
        border-color: var(--brand);
        background: #fffdf8;
      }
      .doc-ic {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #fff4e2;
        color: var(--brand-deep);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.5px;
      }
      .doc-card.done .doc-ic {
        background: var(--brand);
        color: #fff;
      }
      .doc-meta {
        flex: 1;
        min-width: 0;
      }
      .doc-name {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.45;
        word-break: break-word;
      }
      .doc-sub {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      .doc-req {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #fff3e0;
        color: var(--brand-deep);
        white-space: nowrap;
      }
      .doc-pages {
        font-size: 11px;
        color: var(--ink-3);
        background: #f2f0ec;
        border-radius: 999px;
        padding: 2px 8px;
        white-space: nowrap;
      }
      .doc-state {
        font-size: 11.5px;
        color: var(--ink-3);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
      }
      .doc-state.ok {
        color: var(--ok);
        font-weight: 600;
      }
      .dot-idle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d8d1c5;
        display: inline-block;
        flex: 0 0 auto;
      }
      .doc-btn {
        border: 1px solid var(--brand);
        background: #fff;
        color: var(--brand-deep);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 12.5px;
        font-weight: 600;
        flex: 0 0 auto;
        min-height: 36px;
        transition: 0.2s;
      }
      .doc-btn:hover {
        background: #fff7e8;
      }

      /* ============ PDF 閱讀器彈窗 ============ */
      .modal-doc {
        max-width: 880px;
      }
      .doc-tabs {
        display: flex;
        gap: 6px;
        padding: 12px 22px 0;
        background: var(--panel-2);
        border-bottom: 1px solid var(--line-soft);
        overflow-x: auto;
      }
      .doc-tab {
        border: 0;
        background: transparent;
        padding: 9px 15px;
        border-radius: 10px 10px 0 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-3);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        transition: 0.2s;
        min-height: 40px;
      }
      .doc-tab:hover {
        color: var(--brand-deep);
      }
      .doc-tab.on {
        background: #fff;
        color: var(--brand-deep);
        box-shadow: inset 0 0 0 1px var(--line-soft);
      }
      .doc-tab .tick-s {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--ok);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 9.5px;
        line-height: 1;
        flex: 0 0 auto;
      }
      .modal-doc .modal-body {
        display: flex;
        flex-direction: column;
        padding: 16px 22px 6px;
      }
      .doc-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .doc-bar .doc-name {
        font-weight: 700;
        font-size: 13.5px;
        color: var(--ink);
      }
      .doc-open {
        font-size: 12.5px;
        color: var(--brand-deep);
        font-weight: 600;
        border-bottom: 1px dashed rgba(224, 138, 0, 0.55);
        white-space: nowrap;
      }
      .doc-open:hover {
        border-bottom-style: solid;
      }
      .doc-view {
        display: flex;
        flex-direction: column;
        height: min(66vh, 640px);
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: #f7f6f3;
      }
      .doc-frame {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        border: 0;
        display: block;
        background: #fff;
      }
      /* 提示条做成预览区的底栏（不用绝对定位），避免压住 PDF 最后几行 */
      .doc-tip {
        flex: 0 0 auto;
        padding: 7px 12px;
        text-align: center;
        font-size: 11.5px;
        color: var(--ink-3);
        background: var(--panel-2);
        border-top: 1px solid var(--line-soft);
      }
      .doc-need {
        margin: 10px 0 0;
        font-size: 11.5px;
        color: #b98a4a;
        line-height: 1.6;
      }
      .modal-doc .modal-foot {
        align-items: center;
      }

      @media (max-width: 900px) {
        .doc-list {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 640px) {
        .doc-card {
          flex-wrap: wrap;
        }
        .doc-meta {
          flex: 1 1 120px;
        }
        .doc-btn {
          width: 100%;
          min-height: 44px;
        }
        .doc-view {
          height: min(48vh, 380px);
        }
        .modal-doc .modal-body {
          padding: 14px 16px 4px;
        }
        .doc-tabs {
          padding: 10px 16px 0;
        }
      }

      /* ============ 工具类 ============ */
      /* 必填项星号 */
      .req-star {
        color: var(--brand-deep);
      }

      /* ============ 顶栏「查詢開戶進度」按钮 ============
         独立于 FEATURES.authButtons（那组关掉的是登入/註冊），
         查询入口始终可见。放在 .lang 之后，跟随其 margin-left:auto 贴右侧。 */
      .btn-query {
        border: 1px solid var(--brand);
        color: var(--brand-deep);
        background: #fff;
        padding: 7px 16px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        transition: 0.2s;
        white-space: nowrap;
      }
      .btn-query:hover {
        background: #fff7e8;
      }

      /* ============ 顶栏「登入」按钮 ============
         与 FEATURES.authButtons 无关（那组关掉的是主站框架自带的登入/註冊），
         这个是开户页自己的登录入口，点击打开登录弹窗，始终可见。 */
      .btn-nav-login {
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        padding: 8px 20px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 10px 20px -10px rgba(224, 138, 0, 0.9);
        transition: 0.2s;
      }
      .btn-nav-login:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px -10px rgba(224, 138, 0, 0.95);
      }
      .btn-nav-login:active {
        transform: translateY(0);
      }

      /* ============ 顶栏「主頁」按钮（已登入时替换「登入」） ============
         显隐由 <html data-login="on|off"> 驱动（不是 FEATURES 开关）：
           已登入且 token 未过期 → 显示「主頁」、收起「登入」；
           未登入 / 已过期       → 显示「登入」、收起「主頁」。
         首屏由 index.html head 的 inline 脚本先判定，app.js 的 syncHeaderAuth()
         负责后续校准（登录、登出、过期 401、跨标签页 storage）。 */
      .btn-nav-home {
        display: inline-block;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        padding: 8px 20px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 10px 20px -10px rgba(224, 138, 0, 0.9);
        transition: 0.2s;
      }
      .btn-nav-home:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px -10px rgba(224, 138, 0, 0.95);
      }
      .btn-nav-home:active {
        transform: translateY(0);
      }
      html[data-login="off"] .btn-nav-home {
        display: none;
      }
      html[data-login="on"] .btn-nav-login {
        display: none;
      }

      /* ============ 顶栏右侧动作区（「查詢開戶進度」+「登入 / 主頁」） ============
         三者放在同一个 .topbar-actions 容器里：
           · 桌面端内联在「语言」之后，跟随 .lang 的 margin-left:auto 贴右侧；
           · 窄屏（≤640px）时整组 basis:100% 独占第二行、右对齐 —— 手机端
             不再隐藏「登入」，与桌面是同一套判定：
               未登入 / token 已过期 → 显示「登入」；
               已登入且未过期       → 显示「主頁」（上一条规则收起「登入」）。
         触摸目标在手机端提到 44px 高。 */
      .topbar-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
      }

      @media (max-width: 640px) {
        .topbar-actions {
          flex: 1 0 100%;
          justify-content: flex-end;
          gap: 8px;
        }
        .btn-query,
        .btn-nav-login,
        .btn-nav-home {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 44px;
          padding: 0 16px;
          font-size: 13px;
        }
        /* 缩短的 `.btn-query` 旧规则（padding 6px 12px / 12px）已被上面
           这条覆盖，避免两处尺寸打架 */
      }

      /* ============ 模态框（协议弹窗 / 进度查询弹窗） ============ */
      .modal-mask {
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(26, 21, 12, 0.55);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.25s ease;
      }
      .modal {
        width: 100%;
        max-width: 520px;
        max-height: 86vh;
        background: var(--panel);
        border-radius: var(--radius);
        border: 1px solid #efe9dd;
        box-shadow: var(--shadow-lg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: modalIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
      }
      @keyframes modalIn {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 22px;
        border-bottom: 1px solid var(--line-soft);
        background: linear-gradient(180deg, #fdfbf7, #f7f3ec);
      }
      .modal-head b {
        color: var(--brand-deep);
        font-size: 15.5px;
        letter-spacing: 0.5px;
      }
      .modal-x {
        border: 0;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        color: var(--ink-3);
        padding: 2px 8px;
        border-radius: 8px;
        transition: 0.2s;
      }
      .modal-x:hover {
        color: var(--ink);
        background: #f2ede3;
      }
      .modal-body {
        padding: 20px 22px;
        overflow-y: auto;
        font-size: 13.5px;
        color: var(--ink-2);
        line-height: 1.85;
      }
      .modal-body p {
        margin: 0 0 12px;
      }
      .modal-body p:last-child {
        margin-bottom: 0;
      }
      .modal-foot {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        padding: 14px 22px 18px;
        border-top: 1px solid var(--line-soft);
        background: var(--panel-2);
      }
      .modal-foot .btn {
        padding: 11px 26px;
        min-width: 0;
        font-size: 14px;
      }

      /* ============ 登入弹窗 ============ */
      .modal-login {
        max-width: 460px;
      }
      .modal-login .modal-head {
        /* 头部给一点品牌感 */
        background: linear-gradient(135deg, #fff8ea, #fdf3e0);
      }
      .lg-sub {
        margin: -4px 0 16px;
        font-size: 12.5px;
        color: var(--ink-3);
        line-height: 1.6;
      }
      .modal-login .field {
        margin-bottom: 14px;
      }
      .modal-login .ctrl {
        position: relative;
      }
      /* 密码可见性按钮 */
      .pwd-eye {
        border: 0;
        background: transparent;
        padding: 0 12px;
        display: grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        color: var(--ink-3);
        transition: 0.2s;
      }
      .pwd-eye svg {
        width: 19px;
        height: 19px;
        stroke: currentColor;
        stroke-width: 1.7;
      }
      .pwd-eye:hover,
      .pwd-eye.on {
        color: var(--brand-deep);
      }
      .lg-err {
        background: #fdf1f0;
        border: 1px solid #f5d9d7;
        color: var(--danger);
        border-radius: 10px;
        padding: 9px 13px;
        font-size: 12.5px;
        margin: 2px 0 14px;
        line-height: 1.6;
      }
      .lg-remember {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        color: var(--ink-2);
        cursor: pointer;
        /* 触摸目标 ≥44px */
        min-height: 44px;
        user-select: none;
      }
      .lg-remember input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .lg-remember .cb {
        width: 19px;
        height: 19px;
        border: 1.5px solid var(--line);
        border-radius: 6px;
        background: #fff;
        display: grid;
        place-items: center;
        transition: 0.2s;
        flex: 0 0 auto;
      }
      .lg-remember .cb svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        stroke-width: 3.2;
        opacity: 0;
        transition: 0.2s;
      }
      .lg-remember input:checked + .cb {
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        border-color: var(--brand);
      }
      .lg-remember input:checked + .cb svg {
        opacity: 1;
      }
      /* 键盘焦点必须看得见 */
      .lg-remember input:focus-visible + .cb {
        box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.35);
      }
      .modal-login .modal-foot {
        align-items: center;
      }
      .modal-login .modal-foot .btn-ghost {
        margin-right: auto;
        padding: 8px 12px;
        font-size: 12.5px;
      }

      /* ============ 开户进度查询结果 ============ */
      .q-found {
        background: #eef4fb;
        border: 1px solid #d6e4f5;
        color: #2f5c8f;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 13px;
        margin-bottom: 14px;
        line-height: 1.6;
      }
      .q-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 6px;
      }
      .q-card-head {
        padding: 10px 16px;
        background: linear-gradient(180deg, #fdfbf7, #f7f3ec);
        border-bottom: 1px solid var(--line-soft);
        font-size: 13px;
        color: var(--brand-deep);
        font-weight: 700;
      }
      .q-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 16px;
        border-bottom: 1px solid var(--line-soft);
        font-size: 13px;
      }
      .q-row:last-child {
        border-bottom: 0;
      }
      .q-row .k {
        color: var(--ink-3);
        min-width: 76px;
        flex: 0 0 auto;
      }
      .q-row .vv {
        color: var(--ink);
        font-weight: 700;
        word-break: break-all;
      }
      .q-row.remark {
        background: #fdf4f3;
      }
      .q-row.remark .k,
      .q-row.remark .vv {
        color: var(--danger);
      }
      .badge {
        display: inline-block;
        padding: 3px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.6;
      }
      .badge.ok {
        background: #e6f5ec;
        color: #2f7d4f;
      }
      .badge.bad {
        background: #fdeceb;
        color: #b03a36;
      }
      .badge.wait {
        background: #fff3e0;
        color: var(--brand-deep);
      }
      .q-empty {
        text-align: center;
        color: var(--ink-3);
        padding: 18px 0;
        font-size: 13px;
      }

      @media (max-width: 640px) {
        /* 「查詢開戶進度」的窄屏尺寸统一在「顶栏右侧动作区」那一节里定义，
           这里不再重复，避免两处 padding / font-size 打架 */
        .modal-mask {
          padding: 14px;
        }
        .modal-foot {
          flex-direction: column-reverse;
        }
        .modal-foot .btn {
          width: 100%;
          padding: 13px 20px;
        }
        .q-row .k {
          min-width: 66px;
        }
      }