/* Member area additions only (signin, auth/verify, dashboard/*). Reuses site.css tokens. */

#signin-email:focus-visible,
body.member .member-nav-link:focus-visible,
#logout-btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
}

#signin-email { width: 100%; }
#signin-email:focus { border-color: #065F46; }
#signin-email[disabled] { opacity: .6; }

body.member .member-nav-link { color: #5B6472; transition: color .2s var(--ease), background-color .2s var(--ease); }
body.member .member-nav-link:hover { color: #0E1116; background-color: rgba(14,17,22,0.035); }
body.member .member-nav-link[data-active="true"] { color: #0E1116; background-color: #F2F4F6; font-weight: 600; }


.age-row { display: flex; align-items: flex-start; gap: .75rem; }
.age-row input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; accent-color: #065F46; cursor: pointer; }
.age-row label { font-size: .875rem; line-height: 1.5; cursor: pointer; }
.age-row label a { text-decoration: underline; }
#signin-age:focus-visible, .age-row a:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
#signin-age[aria-invalid="true"] { outline: 2px solid #B91C1C; outline-offset: 2px; }
.age-help { margin-top: .5rem; }
.age-help[hidden] { display: none; }
.age-help.age-error { color: #B91C1C; }
#signin-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Member redesign: same tokens as the public pages (page #F2F4F6, card #E8EBEF, hairlines, 8px radii, accent #065F46).
   Everything is scoped to body.member so admin (btn-primary/btn-ghost) and the public pages are untouched. ===== */
body.member { background: #F2F4F6; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
html[lang="ko"] body.member { line-height: 1.5; }
body.member :focus-visible { outline: 2px solid #065F46; outline-offset: 2px; }
body.member .hairline { border-color: rgba(14,17,22,.1); }
body.member .rounded-sm { border-radius: 8px; }

/* shell: compact version of the public header (no burger, no site.js needed) */
body.member .member-header .site-header-in { max-width: 1280px; margin: 0 auto; gap: 16px; }
body.member .member-header .lang-switch { position: relative; }
body.member .member-header .lang-switch details[open] summary { color: #065F46; }
body.member .member-logout { height: 40px; border: 1px solid rgba(14,17,22,.5); border-radius: 8px; color: #0E1116; background: transparent; white-space: nowrap; transition: background-color .25s ease-out; }
body.member .member-logout:hover { background: rgba(14,17,22,.05); border-color: rgba(14,17,22,.5); color: #0E1116; }
body.member .member-logout:disabled { opacity: .5; cursor: not-allowed; }
body.member .member-header > .site-header-in > div { display: flex; align-items: center; gap: 16px; }
body.member .member-header [dir] { text-align: start; }

/* dashboard layout: tabs above content, one centred column */
body.member .member-shell { min-height: 100dvh; padding-top: 56px; }
@media (min-width: 1024px) { body.member .member-shell { padding-top: 84px; } }
body.member .member-tabs-nav, body.member .member-main { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1024px) { body.member .member-tabs-nav, body.member .member-main { padding-left: 40px; padding-right: 40px; } }
body.member .member-tabs-nav { padding-top: 24px; overflow-x: auto; scrollbar-width: none; }
body.member .member-tabs-nav::-webkit-scrollbar { display: none; }
body.member .member-main { padding-top: 32px; padding-bottom: 96px; }
body.member .member-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 8px; background: #E8EBEF; border: 1px solid rgba(14,17,22,.1); font-size: 14px; }
body.member .member-nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 6px; color: #5B6472; font-weight: 500; }
body.member .member-nav-link:hover { color: #0E1116; background-color: transparent; }
body.member .member-nav-link[data-active="true"] { color: #0E1116; background-color: #fff; font-weight: 500; box-shadow: 0 0 0 1px rgba(14,17,22,.1); }
@media (max-width: 480px) { body.member .member-tabs { display: flex; width: 100%; } body.member .member-nav-link { flex: 1 1 0; justify-content: center; padding: 0 4px; font-size: 13px; } }

/* auth pages (signin, verify): one card on the page background */
body.member .member-auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 96px 20px 64px; }
@media (min-width: 1024px) { body.member .member-auth { padding-top: 124px; } }
body.member .member-auth-card { width: 100%; max-width: 440px; border-radius: 8px; border: 1px solid rgba(14,17,22,.1); background: #E8EBEF; padding: 28px 24px; }
@media (min-width: 768px) { body.member .member-auth-card { padding: 36px; } }

/* eyebrow: sentence case, no mono / uppercase / tracking */
body.member .member-eyebrow { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #065F46; }
body.member .member-eyebrow::first-letter { text-transform: uppercase; }
body.member h1 { text-wrap: balance; }

/* buttons: match .btn-cta / .btn-line on the public pages (also styles the JS-built verify buttons) */
html body.member .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background: #065F46; color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; box-shadow: none; transition: background-color .25s ease-out; }
html body.member .btn-primary:hover { transform: none; background: #054C39; box-shadow: none; }
html body.member .btn-primary:active { transform: none; }
html body.member .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid rgba(14,17,22,.5); border-radius: 8px; color: #0E1116; background: transparent; font-family: inherit; font-weight: 500; transition: background-color .25s ease-out; }
html body.member .btn-ghost:hover { background: rgba(14,17,22,.05); border-color: rgba(14,17,22,.5); color: #0E1116; }
body.member #signin-submit { width: 100%; }
body.member #signin-form .age-row label a, body.member .age-row a { color: #065F46; }
body.member #uid-submit { min-height: 48px; }

/* fields */
body.member input[type="email"], body.member input[type="text"], body.member select { background: #F2F4F6; border: 1px solid rgba(14,17,22,.25); border-radius: 8px; font-family: inherit; min-height: 48px; }
body.member select { min-height: 40px; }
body.member #uid-exchange, body.member #uid-value { min-height: 48px; }
body.member input:focus, body.member select:focus { border-color: #065F46; }
body.member #signin-email:focus { border-color: #065F46; }

/* cards, steps, status */
body.member .uid-step { border: 1px solid rgba(14,17,22,.1); background: #E8EBEF; border-radius: 8px; }
body.member .uid-step[data-lit="true"] { border-color: #065F46; background: #E8EBEF; }
body.member #payback-cards > div { background: #E8EBEF; border-radius: 8px; border-color: rgba(14,17,22,.1); }
body.member #payback-table { border-collapse: collapse; }
body.member #payback-table thead th { font-weight: 500; }
body.member #payback-table tbody tr:last-child { border-bottom: 0; }
body.member #payback-table th, body.member #payback-table td { padding-top: 12px; padding-bottom: 12px; }
body.member #payback-table { background: #E8EBEF; border-radius: 8px; overflow: hidden; }
body.member #payback-table th:first-child, body.member #payback-table td:first-child { padding-left: 16px; }
body.member #payback-table th:last-child, body.member #payback-table td:last-child { padding-right: 16px; }
body.member #payback-table thead tr { border-color: rgba(14,17,22,.1); }
body.member #uid-linked-list > div { padding: 8px 12px; border-radius: 8px; background: #F2F4F6; border: 1px solid rgba(14,17,22,.1); flex-wrap: wrap; }
body.member p, body.member li { text-wrap: pretty; }
body.member p > .ph-ic { display: inline; }

/* Overview "Your exchange accounts" card: rows reuse card #E8EBEF, hairline, 8px radius, mint #065F46, red #B91C1C. Amber is the pending/hold state only. */
body.member .ov-accounts { animation: ov-rise .55s var(--ease) both; }
body.member .ov-accounts-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; }
body.member .ov-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px; border-radius: 8px; background: #E8EBEF; border: 1px solid rgba(14,17,22,.1); border-left-width: 4px; }
body.member .ov-acct-verified { border-left-color: #065F46; }
body.member .ov-acct-pending, body.member .ov-acct-hold { border-left-color: #B45309; }
body.member .ov-acct-rejected { border-left-color: #B91C1C; }
body.member .ov-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #7D8390; border-radius: 4px; font-size: 11px; color: #5B6472; background: #F2F4F6; }
body.member .ov-name { font-weight: 600; font-size: 16px; }
body.member .ov-uid { font-size: 15px; color: #0E1116; letter-spacing: .02em; word-break: break-all; }
body.member .ov-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; }
@media (min-width: 640px) { body.member .ov-badge { margin-left: auto; } }
body.member .ov-badge-verified { color: #065F46; background: rgba(16,185,129,.12); border-color: rgba(6,95,70,.4); }
body.member .ov-badge-pending { color: #92400E; background: rgba(245,158,11,.14); border-color: rgba(180,83,9,.4); }
body.member .ov-badge-hold { color: #92400E; background: rgba(245,158,11,.28); border-color: #B45309; }
body.member .ov-badge-rejected { color: #B91C1C; background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.4); }
body.member .ov-pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B45309; animation: ov-pulse 2.4s ease-in-out infinite; }
body.member .ov-note { flex-basis: 100%; font-size: 14px; color: #5B6472; margin: 0; }
body.member .ov-setup-line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid #065F46; background: rgba(16,185,129,.08); color: #065F46; font-weight: 600; font-size: 15px; cursor: pointer; }
body.member .ov-setup-line::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
body.member .ov-setup-line[aria-expanded="true"]::after { transform: rotate(-135deg); }
body.member .ov-setup-line:focus-visible, body.member #ov-link-another:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
@keyframes ov-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ov-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(180,83,9,.35); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(180,83,9,0); } }
@media (prefers-reduced-motion: reduce) { body.member .ov-accounts, body.member .ov-pulse::before { animation: none; } body.member .ov-setup-line::after { transition: none; } }

/* Stats tab: same tokens as the rest of the member area (card #E8EBEF, hairline, 8px radius, mint #065F46; amber = pending only). Charts are inline SVG built in member.js. */
body.member #stats-data { display: grid; gap: 20px; }
body.member .stats-card { min-width: 0; animation: ov-rise .55s var(--ease) both; }
body.member .stats-card:nth-child(2) { animation-delay: .06s; }
body.member .stats-card:nth-child(3) { animation-delay: .12s; }
body.member .stats-card:nth-child(4) { animation-delay: .18s; }
body.member .stats-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
body.member .stats-card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
body.member .stats-card-sub, body.member .stats-label, body.member .stats-note { font-size: 13px; color: #5B6472; }
body.member .stats-big { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 18px; overflow-wrap: anywhere; }
body.member .stats-big small { font-size: 15px; font-weight: 500; color: #5B6472; letter-spacing: 0; }
body.member .stats-big-sm { font-size: 30px; margin: 0 0 12px; }
@media (min-width: 768px) { body.member .stats-big { font-size: 56px; } body.member .stats-big-sm { font-size: 34px; } }
body.member .stats-split { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; background: #D5DAE0; }
body.member .stats-seg { display: block; height: 100%; width: 0; transition: width 1s var(--ease); }
body.member .stats-seg-paid { background: #065F46; }
body.member .stats-seg-pend { background: #D99A1F; }
body.member .stats-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 12px; font-size: 14px; }
body.member .stats-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: #7D8390; }
body.member .stats-dot-paid { background: #065F46; }
body.member .stats-dot-pend { background: #D99A1F; }
body.member .stats-chart { width: 100%; min-width: 0; }
body.member .stats-svg { display: block; max-width: 100%; height: auto; overflow: hidden; }
body.member .stats-grid { stroke: rgba(14,17,22,.1); stroke-width: 1; }
body.member .stats-axis { fill: #5B6472; font-size: 11px; font-family: inherit; }
body.member .stats-line { stroke: #065F46; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
body.member .stats-line[data-draw] { transition: stroke-dashoffset 1.2s var(--ease); }
body.member .stats-end { fill: #065F46; }
body.member .stats-ex, body.member .stats-vol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body.member .stats-vol { gap: 8px; font-size: 14px; }
body.member .stats-vol li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(14,17,22,.08); }
body.member .stats-note { margin-top: 12px; }
body.member .stats-ex-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
body.member .stats-ex-name { display: inline-flex; align-items: center; min-width: 0; }
body.member .stats-ex-track { height: 8px; border-radius: 999px; background: #D5DAE0; overflow: hidden; }
body.member .stats-ex-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #7D8390; transition: width .9s var(--ease); }
body.member [data-ex="binance"] .stats-ex-fill, body.member [data-ex="binance"] .stats-dot { background: #065F46; }
body.member [data-ex="bitget"] .stats-ex-fill, body.member [data-ex="bitget"] .stats-dot { background: #2DB67D; }
body.member [data-ex="okx"] .stats-ex-fill, body.member [data-ex="okx"] .stats-dot { background: #0E1116; }
body.member [data-ex="mexc"] .stats-ex-fill, body.member [data-ex="mexc"] .stats-dot { background: #7D8390; }
body.member .stats-more { border: 1px dashed rgba(14,17,22,.25); border-radius: 8px; }
body.member .stats-more-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; font-size: 14px; font-weight: 600; color: #3A424F; background: transparent; cursor: pointer; text-align: start; }
body.member .stats-plus { font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
body.member .stats-more-btn[aria-expanded="true"] .stats-plus { transform: rotate(45deg); }
body.member .stats-months { padding: 0 20px 16px; }
body.member .stats-months:not([hidden]) { animation: ov-rise .35s var(--ease) both; }
body.member .stats-table-wrap { overflow-x: auto; }
body.member .stats-table { width: 100%; font-size: 14px; border-collapse: collapse; }
body.member .stats-table th { text-align: start; font-weight: 500; color: #5B6472; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(14,17,22,.1); white-space: nowrap; }
body.member .stats-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(14,17,22,.06); white-space: nowrap; }
body.member .stats-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #065F46; background: rgba(16,185,129,.12); }
body.member .stats-chip-pend { color: #92400E; background: rgba(245,158,11,.16); }
@media (max-width: 480px) { body.member .stats-big { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { body.member .stats-card, body.member .stats-months:not([hidden]) { animation: none; } body.member .stats-seg, body.member .stats-ex-fill, body.member .stats-line[data-draw], body.member .stats-plus { transition: none; } }
@media (min-width: 768px) { body.member .stats-card { padding: 24px; } body.member .stats-hero { padding: 28px; } }