:root {
  color-scheme: light;
  --ink: #13231f;
  --muted: #71817c;
  --line: #dfe8e4;
  --paper: #fff;
  --soft: #f3f7f5;
  --forest: #113c32;
  --forest-2: #17604f;
  --mint: #ddf4eb;
  --lime: #c9f45f;
  --danger: #c64b4b;
  --warning: #9b671c;
  --shadow: 0 24px 70px rgb(17 60 50 / 12%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--soft); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(145deg, #f7faf8, #eef5f2); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.glow { position: fixed; z-index: 0; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.glow-a { width: 420px; height: 420px; left: -230px; top: -220px; background: var(--lime); }
.glow-b { width: 500px; height: 500px; right: -300px; bottom: -290px; background: #58a58f; }
#app { position: relative; z-index: 1; min-height: 100vh; }
.boot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 100vh; }
.boot span { width: 8px; height: 8px; border-radius: 50%; background: var(--forest-2); animation: pulse 1s infinite; }
.boot span:nth-child(2) { animation-delay: .12s; }.boot span:nth-child(3) { animation-delay: .24s; }
@keyframes pulse { 50% { opacity: .2; transform: translateY(-5px); } }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; font-size: 20px; font-weight: 500; letter-spacing: -.04em; text-decoration: none; }
.brand b { font-weight: 850; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 2px; width: 29px; height: 29px; padding: 6px; border-radius: 9px; background: var(--lime); transform: rotate(-3deg); }
.brand-mark i { width: 4px; border-radius: 3px; background: var(--forest); }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:11px}
.brand-logo { display: inline-grid; place-items: center; width: 36px; height: 36px; overflow: hidden; }
.brand-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.muted { color: var(--muted); }.eyebrow { margin: 0 0 10px; color: var(--forest-2); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.auth-shell { display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); min-height: 100vh; }
.auth-story { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 32px); margin: 16px 0 16px 16px; padding: 40px 48px; overflow: hidden; border-radius: 27px; color: white; background: linear-gradient(140deg, #0a2b24, #17604f); box-shadow: var(--shadow); }
.auth-story::before { content:""; position:absolute; width:500px; height:500px; right:-280px; top:-250px; border:1px solid rgb(255 255 255 / 12%); border-radius:50%; box-shadow:0 0 0 65px rgb(255 255 255 / 4%),0 0 0 130px rgb(255 255 255 / 3%); }
.auth-copy { position: relative; max-width: 600px; margin: auto 0; }
.auth-copy h1 { margin: 0 0 22px; font-size: clamp(43px, 5vw, 72px); line-height: .98; letter-spacing: -.06em; }
.auth-copy p { max-width: 530px; margin: 0; color: rgb(255 255 255 / 67%); font-size: 16px; line-height: 1.65; }
.trust { position: relative; display: flex; gap: 26px; color: rgb(255 255 255 / 60%); font-size: 11px; }
.trust span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#8be16c; }
.auth-panel { display: grid; place-items: center; padding: 55px; }
.auth-card { width: min(100%, 430px); }
.mobile-brand { display: none; margin-bottom: 58px; }
.auth-card h2, .onboarding-card h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: -.045em; }
.auth-card > p { margin: 0 0 30px; line-height: 1.55; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 27px; padding: 4px; border-radius: 12px; background: #e8efec; }
.mode-switch button { height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; }
.mode-switch button.active { color: var(--ink); background: white; box-shadow: 0 3px 10px rgb(17 60 50 / 8%); }
.field { display: grid; gap: 8px; margin-bottom: 17px; color: #384943; font-size: 12px; font-weight: 720; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d8e2de; border-radius: 12px; outline: 0; color: var(--ink); background: white; transition: .2s; }
.field input, .field select { height: 50px; padding: 0 14px; }.field textarea { min-height: 100px; padding: 13px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgb(23 96 79 / 10%); }
.file-field input { height: auto; padding: 12px; color: var(--muted); font-size: 11px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); background: white; font-size: 12px; font-weight: 800; transition: .16s; }
.button:hover { transform: translateY(-1px); }.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button-primary { color: white; background: var(--forest-2); box-shadow: 0 9px 24px rgb(23 96 79 / 18%); }.button-primary:hover { background: var(--forest); }
.button-secondary { border-color: var(--line); }.button-wide { width: 100%; min-height: 52px; }
.text-button { padding: 0; border: 0; color: var(--forest-2); background: transparent; font-size: 12px; font-weight: 750; }
.dev-code { margin: 12px 0 18px; padding: 12px 14px; border: 1px dashed #a8cabd; border-radius: 11px; color: var(--forest-2); background: var(--mint); font-size: 12px; }
.error { min-height: 18px; margin: -4px 0 12px; color: var(--danger); font-size: 11px; line-height: 1.4; }
.onboarding-shell { min-height: 100vh; padding: 24px; }
.simple-header { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1120px); height: 58px; margin: 0 auto 24px; }
.header-action { border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.onboarding-layout { display: grid; grid-template-columns: 270px minmax(0, 700px); gap: 28px; justify-content: center; }
.step-panel { align-self: start; padding: 27px; border-radius: 18px; color: white; background: var(--forest); box-shadow: var(--shadow); }
.step-panel h3 { margin: 0 0 23px; font-size: 13px; }.steps { display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 29px 1fr; gap: 11px; align-items: center; color: rgb(255 255 255 / 45%); font-size: 11px; }
.step i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; font-style: normal; font-weight: 800; }.step.active { color:white}.step.active i,.step.done i { border-color:var(--lime); color:var(--forest); background:var(--lime); }
.step-panel p { margin: 27px 0 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 10%); color: rgb(255 255 255 / 48%); font-size: 10px; line-height: 1.55; }
.onboarding-card, .status-card { padding: 36px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 8px 30px rgb(17 60 50 / 5%); }
.onboarding-card > .muted { margin: 0 0 27px; font-size: 13px; line-height: 1.55; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.consent { display:flex; align-items:flex-start; gap:9px; margin:18px 0; color:var(--muted); font-size:11px; line-height:1.5}.consent input{margin-top:2px}
.status-wrap { display: grid; place-items: center; min-height: calc(100vh - 110px); }.status-card { width: min(100%, 610px); text-align:center; }
.status-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 22px; border-radius:20px; color:var(--forest-2); background:var(--mint); font-size:28px; font-weight:850; }
.status-card h1 { margin:0 0 12px; font-size:30px; letter-spacing:-.04em}.status-card p { margin:0 auto 25px; max-width:470px; color:var(--muted); font-size:13px; line-height:1.65}.status-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0;text-align:left}.status-meta div{padding:14px;border-radius:11px;background:var(--soft)}.status-meta small,.status-meta b{display:block}.status-meta small{margin-bottom:5px;color:var(--muted);font-size:9px}.status-meta b{font-size:11px}
.agreement-card { width:min(100%,850px); }.document-frame { width:100%; height:380px; margin:20px 0; border:1px solid var(--line); border-radius:12px; background:white}.document-tabs{display:flex;gap:7px;overflow:auto}.document-tabs button{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:white;font-size:10px}.document-tabs button.active{border-color:var(--forest-2);color:white;background:var(--forest-2)}
.notice-card,.form-error-persistent{margin:22px 0;padding:16px 18px;border-radius:12px}.notice-card{background:#f4f7f3;border:1px solid var(--line)}.notice-card p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.form-error-persistent{background:#fff1f0;border:1px solid #f2c7c3;color:#a8322a;font-size:13px}
.signature-panel{margin:22px 0 16px}.signature-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}.signature-head b,.signature-head span{display:block}.signature-head b{font-size:14px}.signature-head span{margin-top:4px;color:var(--muted);font-size:10px}.signature-panel canvas{display:block;width:100%;height:190px;border:1px solid var(--line);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.portal { min-height: 100vh; }.portal-header { position:sticky; z-index:5; top:0; border-bottom:1px solid var(--line); background:rgb(255 255 255 / 88%); backdrop-filter:blur(16px)}.portal-header-inner{display:flex;align-items:center;justify-content:space-between;width:min(100% - 40px,1160px);height:72px;margin:auto}.portal-user{display:flex;align-items:center;gap:12px}.avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;color:white;background:var(--forest-2);font-size:11px;font-weight:850}.portal-user b,.portal-user small{display:block}.portal-user b{font-size:11px}.portal-user small{margin-top:3px;color:var(--muted);font-size:9px}
.portal-body{display:grid;grid-template-columns:205px minmax(0,1fr);gap:28px;width:min(100% - 40px,1160px);margin:0 auto;padding:31px 0 50px}.portal-nav{display:grid;align-content:start;gap:6px}.portal-nav button{display:flex;align-items:center;gap:10px;height:43px;padding:0 13px;border:0;border-radius:10px;color:var(--muted);background:transparent;font-size:11px;font-weight:750;text-align:left}.portal-nav button.active{color:var(--forest);background:var(--mint)}.portal-nav i{width:20px;font-size:15px;font-style:normal;text-align:center}.portal-content{min-width:0}.page-title{margin-bottom:24px}.page-title h1{margin:0 0 7px;font-size:30px;letter-spacing:-.045em}.page-title p{margin:0;color:var(--muted);font-size:12px}
.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:17px}.balance-card{position:relative;overflow:hidden;min-height:160px;padding:24px;border-radius:16px;color:white;background:linear-gradient(135deg,#103b31,#1a6a56)}.balance-card.alt{color:var(--ink);background:linear-gradient(135deg,#e7fac1,#c9f45f)}.balance-card::after{content:"";position:absolute;width:170px;height:170px;right:-80px;bottom:-110px;border:1px solid rgb(255 255 255 / 20%);border-radius:50%;box-shadow:0 0 0 32px rgb(255 255 255 / 5%)}.balance-card small,.balance-card strong,.balance-card span{position:relative;z-index:1;display:block}.balance-card small{opacity:.65;font-size:10px;font-weight:800;text-transform:uppercase}.balance-card strong{margin:21px 0 8px;font-size:31px;letter-spacing:-.045em}.balance-card span{opacity:.65;font-size:10px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick-card{padding:20px;border:1px solid var(--line);border-radius:14px;background:white}.quick-card i{display:grid;place-items:center;width:35px;height:35px;margin-bottom:17px;border-radius:10px;background:var(--mint);font-size:17px;font-style:normal}.quick-card b{display:block;margin-bottom:6px;font-size:12px}.quick-card p{margin:0 0 16px;color:var(--muted);font-size:10px;line-height:1.5}
.surface{padding:25px;border:1px solid var(--line);border-radius:16px;background:white}.surface h2{margin:0 0 7px;font-size:18px;letter-spacing:-.025em}.surface > p{margin:0 0 23px;color:var(--muted);font-size:11px;line-height:1.5}.requisite{padding:18px;border:1px solid var(--line);border-radius:13px}.requisite+.requisite{margin-top:10px}.requisite-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.requisite-head b{font-size:12px}.tag{padding:5px 8px;border-radius:20px;color:var(--forest-2);background:var(--mint);font-size:8px;font-weight:800}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.detail-grid small,.detail-grid b{display:block}.detail-grid small{margin-bottom:4px;color:var(--muted);font-size:9px}.detail-grid b{font-size:11px;word-break:break-word}.purpose{grid-column:1/-1;padding:12px;border-radius:9px;background:var(--soft)}
.requisite-options{display:grid;gap:10px}.requisite-option{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:13px;cursor:pointer;transition:.18s}.requisite-option:hover{border-color:#abc6bc}.requisite-option.selected{border-color:var(--forest-2);background:#f3fbf8;box-shadow:0 0 0 2px rgb(23 96 79 / 7%)}.requisite-option input{position:absolute;opacity:0}.requisite-radio{display:grid;place-items:center;width:20px;height:20px;border:1px solid #aec0b9;border-radius:50%;background:white}.requisite-option.selected .requisite-radio{border:6px solid var(--forest-2)}.requisite-option b,.requisite-option small{display:block}.requisite-option b{margin-bottom:5px;font-size:12px}.requisite-option small{margin-top:3px;color:var(--muted);font-size:9px}.deposit-step-title{margin-top:27px!important;padding-top:24px;border-top:1px solid var(--line)}.form-hint{margin:-7px 0 17px!important;color:var(--muted);font-size:9px!important}.deposit-order{display:grid;gap:18px}.deposit-amount{display:grid;grid-template-columns:1fr auto;align-items:center;padding:20px;border-radius:13px;color:white;background:linear-gradient(135deg,var(--forest),var(--forest-2))}.deposit-amount small,.deposit-amount strong{display:block}.deposit-amount small{grid-column:1;font-size:9px;opacity:.65;text-transform:uppercase}.deposit-amount strong{grid-column:1;margin-top:6px;font-size:28px;letter-spacing:-.04em}.deposit-status{grid-column:2;grid-row:1/3;padding:7px 10px;border-radius:20px;background:rgb(255 255 255 / 12%);font-size:9px;font-weight:800}.deposit-status.status-Completed{color:var(--forest);background:var(--lime)}.requisite.selected{border-color:#bdd9cf}.copy-purpose{display:block;margin-top:9px}.deposit-actions{display:flex;gap:10px}.payment-wait{display:flex;align-items:center;gap:13px;padding:16px;border-radius:12px;background:var(--mint)}.payment-wait i{width:12px;height:12px;border:2px solid var(--forest-2);border-top-color:transparent;border-radius:50%;animation:spin .9s linear infinite}.payment-wait b,.payment-wait span{display:block}.payment-wait b{font-size:11px}.payment-wait span{margin-top:4px;color:var(--muted);font-size:9px}.deposit-back{justify-self:start}.deposit-history{margin-top:14px}.deposit-history>h2{margin-bottom:14px}.deposit-row{display:grid;grid-template-columns:1fr 130px 120px 18px;gap:12px;align-items:center;width:100%;padding:14px 0;border:0;border-top:1px solid var(--line);background:transparent;text-align:left}.deposit-row b,.deposit-row small{display:block}.deposit-row b{font-size:10px}.deposit-row small{margin-top:4px;color:var(--muted);font-size:8px}.deposit-row>strong{font-size:11px;text-align:right}.deposit-row em{font-size:9px;font-style:normal;text-align:right}.deposit-row .status-Completed{color:var(--forest-2)}.deposit-row .status-Cancelled,.deposit-row .status-Expired{color:var(--muted)}.deposit-row>i{color:var(--muted);font-style:normal}@keyframes spin{to{transform:rotate(360deg)}}
.trade-box{display:grid;grid-template-columns:1fr 38px 1fr;align-items:end;gap:12px;margin:24px 0}.trade-arrow{display:grid;place-items:center;height:50px;color:var(--forest-2);font-size:21px}.quote-result{margin:17px 0;padding:16px;border-radius:12px;background:var(--soft)}.quote-row{display:flex;justify-content:space-between;gap:20px;padding:5px 0;font-size:10px}.quote-row b{font-size:11px}.success-box{margin-top:17px;padding:14px;border:1px solid #b5dfcf;border-radius:11px;color:var(--forest-2);background:var(--mint);font-size:11px;line-height:1.5}
.profile-loading{color:var(--muted);font-size:12px}.profile-hero{display:flex;align-items:center;gap:16px;margin-bottom:14px;padding:23px;border-radius:16px;color:white;background:linear-gradient(135deg,var(--forest),var(--forest-2))}.profile-avatar{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;color:var(--forest);background:var(--lime);font-size:16px;font-weight:850}.profile-hero h2,.profile-hero p{margin:0}.profile-hero h2{font-size:18px}.profile-hero p{margin-top:5px;color:rgb(255 255 255 / 60%);font-size:10px}.profile-badges{display:flex;gap:7px;margin-left:auto}.profile-badges span{padding:7px 10px;border-radius:20px;color:var(--forest);background:var(--lime);font-size:9px;font-weight:800}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-section{padding:22px}.profile-section-wide{grid-column:1/-1}.profile-section h2{margin-bottom:18px}.profile-details{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}.profile-row.wide{grid-column:1/-1}.profile-row small,.profile-row b{display:block}.profile-row small{margin-bottom:5px;color:var(--muted);font-size:9px}.profile-row b{font-size:11px;line-height:1.45;word-break:break-word}
.toast{position:fixed;z-index:50;right:22px;bottom:22px;max-width:360px;padding:13px 16px;border-radius:11px;color:white;background:var(--forest);box-shadow:var(--shadow);font-size:11px;line-height:1.45}
.balance-grid{grid-template-columns:repeat(3,1fr)}
.rail-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}.rail-tabs button{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72);padding:15px 17px;text-align:left;color:var(--ink);cursor:pointer;transition:.2s ease}.rail-tabs button:hover{border-color:var(--forest);transform:translateY(-1px)}.rail-tabs button.active{color:white;border-color:var(--forest);background:var(--forest);box-shadow:0 12px 30px rgba(16,62,51,.16)}.rail-tabs b,.rail-tabs span{display:block}.rail-tabs b{font-size:16px}.rail-tabs span{margin-top:4px;font-size:10px;opacity:.72}.sandbox-note{display:flex;gap:10px;align-items:center;margin:14px 0;padding:12px 14px;border:1px solid #f0cf79;border-radius:11px;color:#674b09;background:#fff7d9}.sandbox-note b{font-size:11px;white-space:nowrap}.sandbox-note span{font-size:10px;line-height:1.45}
@media (max-width:850px){.auth-shell{display:block}.auth-story{display:none}.auth-panel{min-height:100vh;padding:30px}.mobile-brand{display:inline-flex}.onboarding-layout{display:block}.step-panel{margin-bottom:16px}.steps{grid-template-columns:repeat(3,1fr)}.step{display:flex}.step span{display:none}.portal-body{display:block}.portal-nav{grid-template-columns:repeat(5,minmax(52px,1fr));margin-bottom:20px;overflow:auto}.portal-nav button{justify-content:center;padding:0 8px}.portal-nav button span{display:none}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid-2,.grid-3,.balance-grid,.quick-grid,.status-meta,.detail-grid,.profile-grid{grid-template-columns:1fr}.onboarding-shell{padding:15px}.onboarding-card,.status-card{padding:25px}.step-panel{padding:18px}.portal-header-inner,.portal-body{width:min(100% - 24px,1160px)}.portal-user div:not(.avatar){display:none}.trade-box{grid-template-columns:1fr}.trade-arrow{height:18px;transform:rotate(90deg)}.purpose{grid-column:auto}.page-title h1{font-size:27px}.deposit-actions{display:grid}.deposit-row{grid-template-columns:1fr auto 18px}.deposit-row>strong{grid-column:2}.deposit-row>em{grid-column:1;text-align:left}.deposit-row>i{grid-column:3;grid-row:1/3}.deposit-amount{display:block}.deposit-status{display:inline-block;margin-top:12px}.profile-section-wide{grid-column:auto}.profile-hero{align-items:flex-start;flex-wrap:wrap}.profile-badges{width:100%;margin-left:0}.profile-details{grid-template-columns:1fr}.profile-row.wide{grid-column:auto}}
.qr-payment{display:flex;align-items:center;gap:24px;margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:16px}
.qr-payment img{width:230px;height:230px;max-width:45%;background:white;border-radius:10px}
.qr-payment b{font-size:18px}.qr-payment p{font-size:12px;line-height:1.55;color:var(--muted)}
.qr-payment a{display:inline-block;text-decoration:none}
@media (max-width:600px){.qr-payment{display:block;text-align:center}.qr-payment img{max-width:100%;width:220px;height:220px}.qr-payment div{text-align:left;margin-top:14px}}