:root {
  --navy: #15182b;
  --navy-2: #20243d;
  --paper: #ffffff;
  --canvas: #f5f3ef;
  --ink: #202235;
  --muted: #7e8191;
  --line: #e9e6df;
  --accent: #ff6b4a;
  --accent-dark: #e65235;
  --lime: #c8ef7f;
  --violet: #7367f0;
  --green: #218b61;
  --red: #c34b49;
  --amber: #b87816;
  --shadow: 0 14px 40px rgba(31, 34, 53, .07);
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
html { font-size: 16px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
code { padding: 2px 6px; border-radius: 5px; background: #efede8; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px; display: flex; flex-direction: column; color: #fff; background: var(--navy); overflow: hidden; }
.sidebar::after { content: ""; position: absolute; width: 210px; height: 210px; right: -110px; bottom: 45px; border: 35px solid rgba(200,239,127,.07); border-radius: 50%; pointer-events: none; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 750; }
.brand small { display: block; margin-bottom: 3px; color: #8d91a8; font-size: 9px; letter-spacing: .18em; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--lime); color: var(--navy); font-size: 20px; font-weight: 900; transform: rotate(-4deg); }
.brand.large { color: var(--ink); font-size: 20px; }
.brand.large .brand-mark { width: 46px; height: 46px; }
.sidebar nav { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 42px; }
.nav-caption { margin: 0 12px 8px; color: #73778f; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 11px; color: #aeb1c2; font-size: 14px; transition: .18s; }
.sidebar nav a i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.05); color: #c9ccda; font-style: normal; }
.sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar nav a.active { background: var(--paper); color: var(--navy); font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.sidebar nav a.active i { background: var(--accent); color: #fff; }
.sidebar-foot { position: relative; z-index: 1; margin-top: auto; padding: 16px 10px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.mini-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--violet); font-weight: 800; }
.sidebar-foot div { min-width: 0; display: grid; gap: 3px; font-size: 12px; }
.sidebar-foot strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot a { color: #85899f; font-size: 11px; }
.main { min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; padding: 24px 38px 20px; display: flex; align-items: center; border-bottom: 1px solid rgba(229,225,216,.8); background: rgba(245,243,239,.9); backdrop-filter: blur(14px); }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .17em; }
.topbar h1 { margin: 4px 0 0; font-size: 25px; letter-spacing: -.035em; }
.env-pill { margin-left: auto; padding: 8px 12px; display: flex; align-items: center; gap: 7px; border: 1px solid #dfdcd5; border-radius: 999px; background: #fff; color: #686b79; font-size: 11px; font-weight: 700; }
.env-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(33,139,97,.12); }
.topbar-logout { min-height:34px; margin-left:10px; padding:7px 12px; border:1px solid #dfdcd5; border-radius:9px; background:#fff; color:#686b79; cursor:pointer; font-size:11px; font-weight:750; }
.menu-button { display: none; border: 0; background: none; font-size: 22px; }
.content { width: min(1440px, 100%); padding: 30px 38px 60px; }
.alert { margin: 0 0 18px; padding: 13px 16px; border: 1px solid; border-radius: 11px; font-size: 13px; line-height: 1.6; }
.alert.success { color: #176546; border-color: #b8dfce; background: #eaf8f1; }
.alert.danger { color: #9a3938; border-color: #efc4c2; background: #fff0ef; }
.alert.warning { color: #86550e; border-color: #ead09c; background: #fff8e8; }
.alert.info { color: #49408e; border-color: #cbc7ef; background: #f1efff; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat, .panel { border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow); }
.stat { position: relative; min-height: 138px; padding: 21px; overflow: hidden; }
.stat::after { content: ""; position: absolute; width: 66px; height: 66px; right: -23px; bottom: -23px; border-radius: 50%; background: var(--accent); opacity: .09; }
.stat:nth-child(2)::after { background: var(--violet); }.stat:nth-child(3)::after { background: var(--green); }.stat:nth-child(4)::after { background: #d3972c; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { margin-top: 13px; font-size: 28px; font-weight: 820; letter-spacing: -.045em; }
.stat-note { margin-top: 8px; color: #a1a3ad; font-size: 11px; }
.panel { margin-bottom: 20px; overflow: hidden; }
.panel-head { min-height: 62px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.panel-body { padding: 21px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 14px 18px; border-bottom: 1px solid #efede8; text-align: left; white-space: nowrap; font-size: 13px; }
th { color: #9698a5; background: #fcfbf9; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:hover { background: #fdfcf9; }
tbody tr:last-child td { border-bottom: 0; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.badge.success { color: #1c7652; background: #e6f6ee; }.badge.warning { color: #9d6511; background: #fff1d2; }.badge.danger { color: #a63e3d; background: #ffebea; }.badge.info { color: #5549a8; background: #eeebff; }.badge.neutral { color: #6d707b; background: #efefed; }
.button { min-height: 40px; padding: 9px 15px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd9d1; border-radius: 10px; background: #fff; color: #4b4d5a; cursor: pointer; font-size: 13px; font-weight: 750; transition: .16s; }
.button:hover { transform: translateY(-1px); border-color: #bbb7af; box-shadow: 0 5px 15px rgba(34,36,52,.07); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }.button.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button.dark { border-color: var(--navy); background: var(--navy); color: #fff; }.button.danger { color: var(--red); border-color: #e7bebc; }.button.small { min-height: 32px; padding: 6px 10px; font-size: 11px; }.button.full { width: 100%; grid-column: 1/-1; }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.filter-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.filter-form label { min-width: 150px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid label, .filter-form label, .field { display: grid; gap: 7px; color: #626572; font-size: 12px; }
.form-grid input, .form-grid select, .form-grid textarea, .filter-form input, .filter-form select, .field input { width: 100%; padding: 11px 12px; border: 1px solid #dad7d0; border-radius: 10px; outline: none; background: #fff; color: var(--ink); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .field input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(115,103,240,.1); }
.form-grid textarea { min-height: 90px; resize: vertical; }.form-grid .span-2 { grid-column: 1/-1; }.help { color: #a0a2ab; font-size: 11px; line-height: 1.55; }
.auth-page { min-height: 100vh; padding: 30px; display: grid; place-items: center; background: radial-gradient(circle at 15% 20%,rgba(200,239,127,.34),transparent 27%),radial-gradient(circle at 85% 80%,rgba(115,103,240,.2),transparent 31%),var(--navy); }
.auth-card { width: min(430px,100%); padding: 34px; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.28); }.auth-card.wide { width: min(720px,100%); }.auth-card h1 { margin: 28px 0 7px; font-size: 27px; }.auth-card form:not(.form-grid) { margin-top: 22px; display: grid; gap: 15px; }.auth-card label { display: grid; gap: 7px; color: #646673; font-size: 12px; }.auth-card input { width: 100%; padding: 12px; border: 1px solid #dad7d0; border-radius: 10px; }.auth-links { margin-top: 18px; display: flex; justify-content: space-between; color: var(--violet); font-size: 12px; }
.muted { color: var(--muted); }.form-note, .notice { color: var(--muted); font-size: 12px; line-height: 1.7; }.notice { padding: 13px 15px; border-radius: 11px; background: #f7f5f1; }.empty { padding: 52px 20px; text-align: center; color: var(--muted); }.text-link { color: var(--violet); font-weight: 750; }.danger-text { color: var(--red); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }.detail-item { padding: 16px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.detail-item:nth-child(3n) { border-right: 0; }.detail-label { margin-bottom: 7px; color: #9a9ca6; font-size: 10px; font-weight: 750; text-transform: uppercase; }.detail-value { font-size: 14px; word-break: break-word; }.amount-large { color: var(--ink); font-size: 38px; font-weight: 850; letter-spacing: -.05em; }
.timeline { margin: 0; padding: 0; list-style: none; }.timeline li { position: relative; padding: 0 0 22px 24px; border-left: 1px dashed #d4d0c8; }.timeline li:last-child { border-left-color: transparent; }.timeline li::before { content: ""; position: absolute; top: 3px; left: -5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 1px var(--violet); }.timeline time { display: block; margin-top: 4px; color: #9a9ca6; font-size: 11px; }
.receive-card { max-width: 620px; margin-right: auto; margin-left: auto; }.receive-hero { padding: 32px 20px 16px; text-align: center; }.receive-icon { width: 66px; height: 66px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; background: var(--lime); color: var(--navy); font-size: 28px; font-weight: 900; transform: rotate(-3deg); }.receive-hero h2 { margin: 0 0 7px; }.receive-hero .amount-large { margin: 17px 0 4px; }
.balance-hero { position: relative; padding: 27px; overflow: hidden; border: 0; background: var(--navy); color: #fff; }.balance-hero::after { content:""; position:absolute; width:190px; height:190px; right:-80px; top:-80px; border:32px solid rgba(200,239,127,.14); border-radius:50%; }.balance-hero .stat-label { color:#a9acc0; }.balance-hero .stat-value { font-size:38px; }.balance-hero .stat-note { color:#8f93aa; }.balance-hero .button { position:relative; z-index:1; margin-top:17px; border-color:var(--lime); background:var(--lime); color:var(--navy); }
.amount-input { position: relative; }.amount-input::before { content:"¥"; position:absolute; z-index:1; left:16px; bottom:14px; font-size:22px; font-weight:800; }.amount-input input { padding-left:42px; font-size:24px; font-weight:800; }
.account-card { padding:16px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:13px; background:#fcfbf9; }.account-logo { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#20b56c; color:#fff; font-weight:900; }.account-card strong,.account-card span { display:block; }.account-card span { margin-top:3px; color:var(--muted); font-size:11px; }
.spa-loading { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:12px; background:var(--canvas); color:var(--muted); font-size:12px; }.spa-loading span { width:34px; height:34px; border:3px solid #e3dfd8; border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }.route-loading { min-height:260px; display:grid; place-content:center; color:var(--muted); font-size:12px; }.route-loading::before { content:""; width:26px; height:26px; margin:0 auto 12px; border:3px solid #e4e1da; border-top-color:var(--violet); border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.bind-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px; border:1px solid var(--line); border-radius:13px; background:#fcfbf9; }.bind-card strong,.bind-card span { display:block; }.bind-card span { margin-top:4px; color:var(--muted); font-size:11px; }.spa-fade { animation:spaFade .18s ease-out; }@keyframes spaFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bind-card .bind-note { color:var(--amber); font-weight:700; }.identity-warning { margin-bottom:20px; padding:14px 16px; display:grid; gap:4px; border:1px solid #ead09c; border-radius:11px; background:#fff8e8; color:#86550e; font-size:12px; line-height:1.65; }.identity-warning.compact { margin:16px 0 0; }.identity-warning a { margin:0 3px; }.withdraw-details { margin-top:15px; }.withdraw-form { margin-top:20px; }
.settlement-list { padding:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.settlement-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:#fcfbf9; }.settlement-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.settlement-method,.settlement-amount { display:block; }.settlement-method { color:var(--muted); font-size:11px; }.settlement-amount { margin-top:7px; font-size:23px; }.settlement-fields { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }.settlement-fields div { min-width:0; }.settlement-fields span,.settlement-fields strong { display:block; }.settlement-fields span { color:#9a9ca6; font-size:10px; }.settlement-fields strong { margin-top:5px; overflow-wrap:anywhere; font-size:12px; font-weight:650; }.settlement-error { margin-top:14px; padding:10px 11px; border-radius:9px; background:#ffebea; color:var(--red); font-size:11px; line-height:1.55; }.settlement-action { min-height:33px; margin-top:15px; display:flex; align-items:center; justify-content:flex-end; }.settlement-number { max-width:100%; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2,1fr); }.detail-grid { grid-template-columns: repeat(2,1fr); }.detail-item:nth-child(3n) { border-right:1px solid var(--line); }.detail-item:nth-child(2n) { border-right:0; } }
@media (max-width: 760px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:40; width:256px; transform:translateX(-100%); transition:.2s; }.sidebar.open { transform:translateX(0); }.menu-button { display:block; margin-right:10px; }.topbar { padding:17px 15px; }.topbar h1 { font-size:20px; }.env-pill { display:none; }.content { padding:20px 14px 45px; }.stats { gap:10px; }.stat { min-height:120px; padding:16px; }.stat-value { font-size:24px; }.form-grid { grid-template-columns:1fr; }.form-grid .span-2,.button.full { grid-column:1; }.detail-grid { grid-template-columns:1fr; }.detail-item,.detail-item:nth-child(2n),.detail-item:nth-child(3n) { border-right:0; }.toolbar { align-items:stretch; flex-direction:column; }.filter-form { display:grid; grid-template-columns:1fr 1fr; }.auth-card { padding:25px 20px; } th,td { padding:12px; }.balance-hero .stat-value { font-size:32px; } }
body.user-spa { max-width:100%; min-height:100vh; min-height:100dvh; overflow-x:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%; }.user-spa button,.user-spa a,.user-spa input,.user-spa select,.user-spa textarea { touch-action:manipulation; }
@media (max-width: 760px) {
  body.user-spa .app-shell { min-height:100dvh; }
  body.user-spa .sidebar { position:fixed; z-index:50; top:0; bottom:auto; left:0; width:256px; height:100vh; height:100dvh; padding:calc(28px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom)); display:flex; overflow:hidden; transform:translateX(-100%); transition:transform .2s ease; box-shadow:12px 0 34px rgba(21,24,43,.18); }
  body.user-spa .sidebar.open { transform:translateX(0); }
  body.user-spa .menu-button { display:block; margin-right:10px; }
  body.user-spa .topbar { min-height:73px; padding:calc(13px + env(safe-area-inset-top)) 15px 13px; }
  body.user-spa .topbar-logout { margin-left:auto; }
  body.user-spa .content { padding:15px 12px 24px; }
  body.user-spa .panel { margin-bottom:14px; border-radius:14px; }
  body.user-spa .panel-head { min-height:55px; padding:13px 15px; }
  body.user-spa .panel-body { padding:15px; }
  body.user-spa .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
  body.user-spa .balance-hero { grid-column:1/-1; min-height:164px; }
  body.user-spa .stat { min-height:111px; padding:14px; }
  body.user-spa .stat-value { font-size:21px; }
  body.user-spa .balance-hero .stat-value { font-size:34px; }
  body.user-spa .form-grid input,body.user-spa .form-grid select,body.user-spa .form-grid textarea,body.user-spa .auth-card input { min-height:45px; font-size:16px; }
  body.user-spa .amount-input input { font-size:24px; }
  body.user-spa .auth-page { min-height:100dvh; padding:calc(20px + env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom)); }
  body.user-spa .auth-card { padding:25px 20px; border-radius:17px; }
  body.user-spa .bind-card { align-items:stretch; flex-direction:column; }
  body.user-spa .bind-card .button { width:100%; }
  body.user-spa .receive-card { width:100%; max-width:none; }
  body.user-spa .detail-grid { grid-template-columns:1fr 1fr; }
  body.user-spa .detail-item,body.user-spa .detail-item:nth-child(2n),body.user-spa .detail-item:nth-child(3n) { padding:14px 12px; border-right:1px solid var(--line); }
  body.user-spa .detail-item:nth-child(2n) { border-right:0; }
  body.user-spa .receive-card .detail-item:last-child:nth-child(odd) { grid-column:1/-1; border-right:0; }
  body.user-spa .settlement-list { padding:12px; grid-template-columns:1fr; gap:10px; }
  body.user-spa .settlement-card { padding:15px; }
  body.user-spa .settlement-fields { grid-template-columns:1fr; gap:11px; }
  body.user-spa .table-wrap { -webkit-overflow-scrolling:touch; }
}
@media (max-width: 380px) { body.user-spa .stats { grid-template-columns:1fr; } body.user-spa .balance-hero { grid-column:auto; } }