/* Opening page (OPEN_ACCOUNT_REBUILD.md). Sizes from UI_SPEC: card padding 24 (phone 16), radius 20, primary 48, inputs 48, block gap 24. */
/* public-wide.css widens every .website-opening with !important; this page is a form and stays 720 wide. */
html[data-arena-site] body [data-public-route-content]>.website-opening.opening-flow[data-opening-flow],html[data-arena-site] .website-opening.opening-flow[data-opening-flow]{max-width:720px!important;width:min(720px,calc(100% - 48px))!important}
@media(max-width:680px){html[data-arena-site] body [data-public-route-content]>.website-opening.opening-flow[data-opening-flow],html[data-arena-site] .website-opening.opening-flow[data-opening-flow]{width:calc(100% - 32px)!important}}
html[data-arena-site] .opening-flow .site-opening-steps{margin:24px 0}
html[data-arena-site] .opening-flow .site-opening-steps li[hidden]{display:none}
html[data-arena-site] .opening-flow .opening-cheer{margin:0 0 24px;font-size:18px;font-weight:600;line-height:1.5;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-panel{margin:0 0 24px;padding:24px;border-radius:20px}
html[data-arena-site] .opening-flow .opening-panel h2{margin:0 0 16px;font-size:24px;line-height:32px}
html[data-arena-site] .opening-flow .opening-field{display:block;margin:0 0 16px}
html[data-arena-site] .opening-flow .opening-field>span{display:block;margin:0 0 8px;font-size:14px;font-weight:500;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-field input,html[data-arena-site] .opening-flow .opening-field select{width:100%;height:48px;box-sizing:border-box;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:12px;background:var(--bb-theme-surface, var(--site-white));color:var(--bb-theme-ink, var(--site-ink));font:inherit;font-size:16px}
html[data-arena-site] .opening-flow .opening-check{display:flex;gap:12px;align-items:center;margin:0 0 16px;font-size:14px;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-check input{width:20px;height:20px;margin:0;accent-color:#111}
html[data-arena-site] .opening-flow .opening-choices{display:flex;flex-wrap:wrap;gap:8px}
html[data-arena-site] .opening-flow .opening-choices label{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
html[data-arena-site] .opening-flow .opening-choices label:has(input:checked){background:var(--ui-primary,#111);color:var(--ui-on-primary,#fff);border-color:var(--ui-primary,#111)}
html[data-arena-site] .opening-flow .opening-choices input{position:absolute;opacity:0;width:0;height:0}
html[data-arena-site] .opening-flow .opening-summary{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-documents{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
html[data-arena-site] .opening-flow .opening-documents a{display:flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:12px;font-size:14px;font-weight:500;color:var(--bb-theme-ink, var(--site-ink));text-decoration:none}
/* ui-open-entries-v1: documents open in a reader inside the sheet (no new tab) */
html[data-arena-site] .opening-flow .opening-documents button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:12px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--bb-theme-ink, var(--site-ink));text-align:left;cursor:pointer}
html[data-arena-site] .opening-flow .opening-documents button small{flex:none;font-size:13px;font-weight:500;color:var(--bb-theme-muted, var(--site-muted))}
html[data-arena-site] .opening-sheet[data-reading]{height:92dvh;overflow:hidden}
html[data-arena-site] .opening-sheet[data-reading] .opening-sheet-body{display:none}
html[data-arena-site] .opening-reader{display:flex;flex-direction:column;height:100%;padding:16px 20px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;animation:opening-reader-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes opening-reader-in{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
html[data-arena-site] .opening-reader-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
html[data-arena-site] .opening-reader-head h3{margin:0;font-size:20px;line-height:28px;font-weight:600;min-width:0;overflow-wrap:anywhere}
html[data-arena-site] .opening-sheet .opening-reader-close{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:999px;background:var(--bb-theme-inset, rgba(0,0,0,.06));color:inherit;cursor:pointer}
html[data-arena-site] .opening-sheet .opening-reader-close svg{flex:none;width:20px;height:20px}
html[data-arena-site] .opening-reader-sub{margin:4px 0 12px;font-size:13px;color:var(--bb-theme-muted, var(--site-muted))}
html[data-arena-site] .opening-reader-pages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;margin:0 -4px;padding:0 4px 4px}
html[data-arena-site] .opening-reader-pages img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--bb-theme-line, var(--site-border));background:#fff}
html[data-arena-site] .opening-reader-skel{display:block;flex:none;aspect-ratio:1100/1554;border-radius:12px;background:var(--bb-theme-inset, rgba(0,0,0,.06));animation:opening-reader-breathe 1.4s ease-in-out infinite}
@keyframes opening-reader-breathe{50%{opacity:.5}}
html[data-arena-site] .opening-reader-done{width:100%;margin-top:12px}
html[data-arena-site] .opening-flow .opening-error{margin:0 0 12px;font-size:14px;color:var(--bb-theme-down, #c0392b)}
html[data-arena-site] .opening-flow .opening-state{margin:0;font-size:14px;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-primary{display:inline-flex;align-items:center;justify-content:center;min-width:160px;text-decoration:none}
html[data-arena-site] .opening-flow .opening-primary[disabled]{opacity:.4;pointer-events:none}
html[data-arena-site] .opening-flow .opening-skeleton{min-height:160px;background:var(--bb-theme-inset, var(--site-inset))}
html[data-arena-site] .opening-flow .opening-experience{margin:8px 0 0}
html[data-arena-site] .opening-flow .opening-choice{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:12px}
html[data-arena-site] .opening-flow .opening-choice button{width:100%;min-width:0;padding:0 12px}
html[data-arena-site] .opening-flow form[hidden]{display:none}
@media(max-width:680px){html[data-arena-site] .opening-flow .opening-choice{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-arena-site] .opening-flow .opening-panel{padding:16px}html[data-arena-site] .opening-flow .opening-panel h2{font-size:20px;line-height:28px}}
/* Terms sheet: slides up from the bottom (phone) / centred (desktop); the agree button unlocks after the read countdown. */
html[data-arena-site] .opening-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--bb-theme-surface, var(--site-white));color:var(--bb-theme-ink, var(--site-ink));box-shadow:0 -12px 40px rgba(0,0,0,.18);max-height:92dvh;overflow:auto}
html[data-arena-site] .opening-sheet[open]{animation:opening-sheet-in .25s ease-out}
html[data-arena-site] .opening-sheet::backdrop{background:rgba(0,0,0,.36)}
@keyframes opening-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html[data-arena-site] .opening-sheet-body{padding:12px 20px calc(24px + env(safe-area-inset-bottom))}
html[data-arena-site] .opening-sheet-grip{width:40px;height:4px;margin:0 auto 16px;border-radius:2px;background:var(--bb-theme-line, var(--site-border))}
html[data-arena-site] .opening-sheet h2{margin:0 0 16px;font-size:24px;line-height:32px}
html[data-arena-site] .opening-sheet-points{margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6}
html[data-arena-site] .opening-sheet-points li{margin:0 0 8px}
html[data-arena-site] .opening-sheet .opening-documents{margin:0 0 16px}
html[data-arena-site] .opening-sheet-agree{width:100%;gap:8px}
html[data-arena-site] .opening-sheet-count{font-variant-numeric:tabular-nums;opacity:.8}
html[data-arena-site] .opening-sheet-later{display:flex;width:100%;justify-content:center;margin:8px 0 0;height:40px}
@media(min-width:681px){html[data-arena-site] .opening-sheet[data-reading]{height:80vh;width:560px}html[data-arena-site] .opening-reader{padding:24px}html[data-arena-site] .opening-sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:480px;border-radius:20px;max-height:80vh}html[data-arena-site] .opening-sheet[open]{animation:none}html[data-arena-site] .opening-sheet-grip{display:none}html[data-arena-site] .opening-sheet-body{padding:24px}}
@media(prefers-reduced-motion:reduce){html[data-arena-site] .opening-sheet[open],html[data-arena-site] .opening-reader,html[data-arena-site] .opening-reader-skel{animation:none}}

/* mt4-open-password-v1: the rule line under the optional trading password */
html[data-arena-site] .opening-flow .opening-field>small{display:block;margin:6px 0 0;font-size:12px;line-height:18px;color:var(--bb-theme-muted, var(--site-muted))}

/* account-tidy-v1 (owner 2026-10-31 「开户须知搞这么大干嘛…在一个框里面就行…不能上下移…手指头一样点一下」):
   the sheet is one fixed screen: small summary in one box (scrolls inside itself only on very short screens),
   documents, then 我已阅读并同意 and 稍后 always in reach. The first unread document carries a tapping finger; no hint line, no green ring. */
html[data-arena-site] .opening-sheet:not([data-reading]){max-height:calc(100dvh - 24px);overflow:hidden;overscroll-behavior:contain}
html[data-arena-site] .opening-sheet:not([data-reading]) .opening-sheet-body{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);box-sizing:border-box}
html[data-arena-site] .opening-sheet .opening-sheet-body>*{flex:none}
html[data-arena-site] .opening-sheet h2{margin:0 0 12px;font-size:18px;line-height:26px}
html[data-arena-site] .opening-sheet .opening-sheet-points{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 0 12px;padding:12px 14px 12px 32px;border-radius:12px;background:var(--bb-theme-inset, rgba(0,0,0,.05));font-size:13px;line-height:1.55;color:var(--bb-theme-muted, var(--site-muted))}
html[data-arena-site] .opening-sheet .opening-sheet-points li{margin:0 0 4px}
html[data-arena-site] .opening-sheet .opening-sheet-points li:last-child{margin:0}
html[data-arena-site] .opening-sheet .opening-documents{margin:0 0 12px}
html[data-arena-site] .opening-flow .opening-documents button{position:relative}
html[data-arena-site] .opening-flow .opening-documents button[data-read="1"] small{color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-tap{display:none;position:absolute;right:56px;top:50%;width:22px;height:22px;margin-top:-6px;pointer-events:none;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-documents button[data-guide="1"] .opening-tap{display:block}
html[data-arena-site] .opening-tap svg{position:relative;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));animation:opening-tap-press 1.4s ease-in-out infinite;transform-origin:40% 10%}
html[data-arena-site] .opening-tap i{position:absolute;left:3px;top:-3px;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:0;animation:opening-tap-ring 1.4s ease-out infinite}
@keyframes opening-tap-press{0%,100%{transform:translate(4px,4px) scale(1)}35%{transform:translate(0,0) scale(1)}45%{transform:translate(0,0) scale(.86)}60%{transform:translate(0,0) scale(1)}}
@keyframes opening-tap-ring{0%,40%{opacity:0;transform:scale(.4)}45%{opacity:.35;transform:scale(.6)}80%,100%{opacity:0;transform:scale(2.2)}}
html[data-arena-site] .opening-docs-hint{display:none}
@media(prefers-reduced-motion:reduce){html[data-arena-site] .opening-tap svg,html[data-arena-site] .opening-tap i{animation:none}}
@media(min-width:681px){html[data-arena-site] .opening-sheet:not([data-reading]),html[data-arena-site] .opening-sheet:not([data-reading]) .opening-sheet-body{max-height:80vh}}
/* opening-fields-v1: name parts share a row on wide screens */
html[data-arena-site] .opening-flow .opening-name-row{display:grid;grid-template-columns:repeat(var(--name-count,3),minmax(0,1fr));gap:12px}
html[data-arena-site] .opening-flow .opening-name-row[data-count="1"]{--name-count:1}
html[data-arena-site] .opening-flow .opening-name-row[data-count="2"]{--name-count:2}
@media(max-width:560px){html[data-arena-site] .opening-flow .opening-name-row{grid-template-columns:minmax(0,1fr);gap:0}}