/* A / warm cream, olive and quiet typography. */
.account-page { padding: 8px 18px 20px; --account-muted:#6e6958; }
.account-page svg,.wallet-dialog svg { width:20px; height:20px; flex-shrink:0; }
.account-identity { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 24px; }
.account-person { display:flex; gap:12px; align-items:center; min-width:0; }
.account-person>span:last-child { min-width:0; }
.account-person strong { display:block; font-size:20px; font-weight:650; letter-spacing:-.025em; overflow-wrap:anywhere; line-height:1.3; }
.account-person small { display:block; color:var(--account-muted); font-size:11px; margin-top:5px; }
.account-avatar { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border:1px solid #d6cba5; border-radius:50%; background:#e9e2cf; color:#665626; font-size:17px; font-weight:600; }
.account-tier { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; font-size:11px; color:#73602a; background:#eee7d4; padding:6px 7px 6px 9px; border-radius:20px; }
.account-tier svg { width:12px; height:12px; }
.account-wallet { padding:20px; border-radius:18px; background:#2d3026; color:#fffdf5; box-shadow:0 8px 18px -12px #22281e99; }
.account-wallet-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#e8e6d8; }
.account-demo { border:1px solid #777b68; border-radius:4px; padding:2px 6px; font-size:10px; color:#e4ddbf; }
.account-balance-label { color:#d5d4c4; font-size:12px; margin-top:26px; display:flex; gap:8px; align-items:center; }
.account-balance-label span { color:#d0c69e; font-size:10px; letter-spacing:.06em; }
.account-balance { font:550 37px/1.3 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.035em; margin:4px 0 14px; overflow-wrap:anywhere; }
.account-wallet-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; color:#d5d4c4; font-size:11px; }
.account-wallet-meta b { font-weight:500; color:#f5f2e3; margin-left:4px; font-variant-numeric:tabular-nums; }
.account-wallet-meta button { border:0; background:none; padding:4px 0 4px 8px; color:#e8dba8; display:flex; gap:4px; align-items:center; font-size:11px; }
.account-wallet-meta button svg { width:14px; height:14px; }
.account-money-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.account-money-actions button { border-radius:9px; height:45px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; }
.account-deposit { border:1px solid #e8d6a4; background:#e8d6a4; color:#29291f; }
.account-withdraw { border:1px solid #747766; background:transparent; color:#fffdf5; }
.account-money-actions button:disabled { opacity:.45; cursor:not-allowed; }
.account-wallet-note { margin-top:12px; color:#cbcdbd; font-size:10px; line-height:1.6; }
.account-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:20px 0 0; padding:0 0 22px; border-bottom:1px solid var(--line); }
.account-shortcuts a { padding:5px 3px; text-align:center; color:#595545; font-size:11px; }
.account-shortcuts a+a { border-left:1px solid var(--line); }
.account-shortcut-top { display:flex; justify-content:center; gap:8px; align-items:center; margin-bottom:7px; color:var(--ink); }
.account-shortcut-top svg { width:19px; height:19px; color:#85723e; }
.account-shortcut-top b { font-size:20px; line-height:1; font-weight:550; font-variant-numeric:tabular-nums; }
.account-section { margin-top:24px; }
.account-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.account-section-head h2 { font:650 14px/1.4 var(--sans); margin:0; }
.account-section-head>a,.account-section-head>button { display:flex; align-items:center; gap:3px; border:0; background:none; padding:4px 0 4px 6px; color:#746126; font-size:11px; }
.account-section-head svg { width:13px; height:13px; }
.account-project { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.account-project .thumb { width:46px; height:64px; flex-shrink:0; border-radius:5px; object-fit:cover; }
.account-project-info { flex:1; min-width:0; }
.account-project-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.account-project-title strong { font-size:15px; font-weight:650; }
.account-project-title>span { color:#79602a; font-size:10px; white-space:nowrap; }
.account-project-info>small { display:block; font-size:11px; color:var(--account-muted); margin-top:3px; }
.account-project-progress { display:flex; align-items:center; gap:10px; margin-top:9px; }
.account-project-progress>span { flex:1; height:3px; background:#ece8dc; border-radius:2px; overflow:hidden; }
.account-project-progress i { display:block; height:100%; background:#9c8650; }
.account-project-progress>b { font-weight:550; color:#71613b; font-size:10px; }
.account-records { list-style:none; padding:0; margin:0; }
.account-records li { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }
.account-records li:first-child { padding-top:4px; }
.account-records li:last-child { border-bottom:0; }
.account-record-icon { width:34px; height:34px; border-radius:50%; background:#e9e5d8; color:#786a3f; display:grid; place-items:center; flex-shrink:0; }
.account-record-icon svg { width:17px; height:17px; }
.account-record-icon.pending { color:#826323; background:#efe7d2; }
.account-record-label { min-width:0; flex:1; }
.account-record-label b { display:block; font-size:12px; font-weight:550; }
.account-record-label small { display:block; font-size:10px; color:var(--account-muted,#6e6958); margin-top:3px; }
.account-record-amount { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.account-record-amount.positive { color:#286444; }
.account-settings { background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.account-settings a { display:flex; align-items:center; gap:12px; min-height:65px; }
.account-settings a+a { border-top:1px solid var(--line); }
.account-setting-icon { color:#77704f; }
.account-settings a>span:nth-child(2) { flex:1; }
.account-settings b { display:block; font-size:12px; font-weight:550; }
.account-settings small { display:block; font-size:10px; color:var(--account-muted); margin-top:3px; }
.account-settings a>svg { width:15px; height:15px; color:#87816d; }
.account-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:25px; color:var(--account-muted); font-size:9px; }
.account-footer i { font-style:normal; padding:0 3px; }
.account-footer button { background:none; border:0; padding:8px 0 8px 8px; font-size:11px; color:#6c6351; }
.account-inline-error { color:#a23122; font-size:12px; }
.wallet-dialog { position:fixed; inset:auto 0 0; width:100%; max-width:440px; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; margin:0 auto; padding:0 22px calc(16px + env(safe-area-inset-bottom,0px)); border:1px solid #e0dbcc; border-bottom:0; border-radius:22px 22px 0 0; background:#faf8f2; color:#1a1912; font-family:var(--sans); box-shadow:0 -8px 40px #16190e1f; }
.wallet-dialog::backdrop { background:#171b1670; backdrop-filter:blur(3px); }
.wallet-handle { width:30px; height:3px; border-radius:2px; background:#d1c9b4; margin:10px auto 0; }
.wallet-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0 20px; }
.wallet-header h2 { font:650 20px/1.3 var(--sans); margin:0; }
.wallet-header>button { width:36px; height:36px; border:1px solid #ded8c9; border-radius:50%; background:transparent; display:grid; place-items:center; color:#605c4b; }
.wallet-flow-note { display:flex; gap:8px; align-items:flex-start; color:#746027; font-size:11px; line-height:1.65; padding-bottom:24px; }
.wallet-flow-note svg { width:15px; height:15px; margin-top:2px; }
.wallet-amount-label { display:block; font-size:12px; font-weight:550; margin-bottom:12px; }
.wallet-amount-field { display:flex; align-items:center; gap:10px; border-bottom:1px solid #aaa18c; padding-bottom:10px; }
.wallet-amount-field>span { font-size:29px; color:#847447; }
.wallet-amount-field input { width:100%; min-width:0; outline:none; border:0; border-radius:0; background:transparent; color:#1a1912; font:550 38px/1.2 var(--sans); font-variant-numeric:tabular-nums; padding:0; box-shadow:none; }
.wallet-amount-field:focus-within { border-color:#8c7532; box-shadow:0 1px 0 #8c7532; }
.wallet-amount-field input::placeholder { color:#8b846f; }
.wallet-available { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#696351; font-size:11px; padding-top:12px; }
.wallet-available>button { background:none; border:0; padding:0; color:#80671f; font-weight:600; }
.wallet-amounts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:22px 0; }
.wallet-amounts button { border:1px solid #dcd5c2; background:#fff; color:#6a5b32; border-radius:7px; height:38px; padding:0 2px; font-size:12px; font-weight:550; }
.wallet-amounts button[aria-pressed=true] { border-color:#8c7532; background:#eee6ce; color:#53431b; }
.wallet-method { display:flex; align-items:center; gap:10px; padding:16px 0; border-top:1px solid #e1dbcd; border-bottom:1px solid #e1dbcd; margin-bottom:24px; }
.wallet-method>svg { color:#857449; }
.wallet-method>div { flex:1; min-width:0; }
.wallet-method b { display:block; font-size:12px; font-weight:550; }
.wallet-method small { display:block; font-size:10px; color:#716a56; margin-top:4px; }
.wallet-method>span { border:1px solid #d3c9a8; border-radius:4px; color:#776132; padding:2px 5px; font-size:10px; }
.wallet-primary { width:100%; min-height:46px; padding:11px 12px; border:1px solid #8c7532; border-radius:9px; background:#8c7532; color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.wallet-primary:disabled { opacity:.6; cursor:wait; }
.wallet-cancel { width:100%; min-height:42px; border:0; background:transparent; color:#6f654e; font-size:12px; padding:12px 8px; }
.wallet-cancel-secondary { min-height:32px; padding-top:4px; }
.wallet-error { color:#a32b20; background:#f7e9e2; border-radius:6px; padding:10px 12px; font-size:12px; line-height:1.65; margin-top:10px; }
.wallet-review { text-align:center; padding:6px 0 26px; }
.wallet-review>span { font-size:12px; color:#716952; }
.wallet-review>strong { display:block; font-size:35px; font-weight:550; letter-spacing:-.025em; margin:8px 0 4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wallet-review>small { font-size:10px; color:#716952; }
.wallet-details { margin:0; padding:6px 0; border-block:1px solid #e1dbcd; }
.wallet-details>div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:12px; }
.wallet-details dt { color:#716952; }
.wallet-details dd { margin:0; font-weight:550; text-align:right; }
.wallet-explanation,.wallet-history-note { font-size:11px; color:#6b634e; line-height:1.75; margin:16px 0; }
.wallet-result { text-align:center; padding:0 0 24px; }
.wallet-result-symbol { margin:2px auto 16px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#336947; background:#e3eddf; }
.wallet-result-symbol svg { width:27px; height:27px; }
.wallet-result-symbol.pending { background:#efe7d0; color:#8c7532; }
.wallet-result h3 { font-size:19px; margin:0; }
.wallet-result>strong { display:block; font-size:30px; font-weight:550; margin:12px 0; font-variant-numeric:tabular-nums; }
.wallet-result>p { font-size:12px; color:#6b634e; line-height:1.8; }
.wallet-result-record { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-block:1px solid #e1dbcd; font-size:12px; color:#6b634e; }
.wallet-result-record b { color:#28271e; font-weight:500; }
.wallet-dialog .account-records { padding-bottom:10px; }
.wallet-dialog .account-records li { padding:16px 0; }
.account-page button,.wallet-dialog button { -webkit-tap-highlight-color:transparent; transition:background-color .15s ease,opacity .15s ease; }
.account-page a:focus-visible,.account-page button:focus-visible,.wallet-dialog button:focus-visible { outline:2px solid #9e853d; outline-offset:3px; }
@media (hover:hover) { .account-page a:hover { opacity:.8; } .account-deposit:hover { background:#f0dfb5; } .account-withdraw:hover { background:#44483a; } .wallet-primary:hover { background:#786328; } }
@media (max-width:359px) { .account-page { padding-inline:14px; } .account-wallet { padding:18px; } .account-person strong { font-size:17px; } .account-avatar { width:42px; height:42px; } .account-identity { gap:6px; } .account-person { gap:8px; } .account-tier { font-size:10px; padding-inline:6px; } .account-balance { font-size:33px; } .account-record-amount { font-size:11px; } .account-record-label small { font-size:9px; } .wallet-dialog { padding-inline:18px; } .wallet-amounts { gap:6px; } .wallet-amount-field input { font-size:34px; } }
@media (min-width:700px) { .wallet-dialog { bottom:16px; max-height:calc(100dvh - 32px); border:1px solid #e0dbcc; border-radius:22px; } }
@media (prefers-reduced-motion:reduce) { .account-page button,.wallet-dialog button { transition:none; } }
