/* Monet's amount-first app layout, scoped to the business stablecoin page. */
#page-stablecoins { --stable-ink:#17251d; --stable-green:#20834c; color:var(--stable-ink); }
#page-stablecoins [hidden] { display:none !important; }
#page-stablecoins .stable-page-head { margin-bottom:28px; }
#page-stablecoins .stable-eyebrow { display:block; margin-bottom:10px; font-size:9px; font-weight:700; letter-spacing:.16em; color:#5a7766; }
#page-stablecoins .page-head h1 { font:400 34px/1.1 'Archivo Black',sans-serif; letter-spacing:-1.3px; }
#page-stablecoins .page-head p { margin-top:10px; font-size:12px; color:#748176; }
#page-stablecoins .stable-refresh { border-radius:30px; font-size:11px; padding:12px 16px; }
#page-stablecoins .stable-layout { grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr); gap:28px; max-width:1080px; margin:auto; }
#page-stablecoins .stable-wallet { top:92px; padding:30px; border:1px solid #ffffffd9; border-radius:28px; color:var(--stable-ink); background:radial-gradient(ellipse at 100% 0,#d7eec8a6,transparent 65%),linear-gradient(145deg,#f7fbf0eb,#eaf2e8cc); box-shadow:0 16px 46px #1d453311,inset 0 1px 0 #fff; }
#page-stablecoins .stable-wallet::after { display:none; }
#page-stablecoins .stable-wallet-top { display:flex; align-items:center; gap:12px; }
#page-stablecoins .stable-wallet-top>.stable-token { width:42px; height:42px; }
#page-stablecoins .stable-wallet-label { color:#425448; font-size:12px; text-transform:none; letter-spacing:0; font-weight:600; }
#page-stablecoins .stable-wallet-label small { display:block; margin-top:5px; color:#7b897b; font-size:10px; font-weight:400; }
#page-stablecoins .stable-usdc-name { display:inline-flex; align-items:center; gap:4px; }
#page-stablecoins .usdc-country-image { display:inline-block; width:15px; height:15px; flex:0 0 15px; border-radius:50%; object-fit:contain; }
#page-stablecoins .stable-balance-dot { margin-left:auto; width:7px; height:7px; background:#61a565; border-radius:50%; box-shadow:0 0 0 5px #6f9e7010; }
#page-stablecoins .stable-wallet h2 { margin:35px 0 10px; font:600 clamp(32px,3.5vw,50px)/1.1 'DM Sans',sans-serif; letter-spacing:-2.5px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#page-stablecoins .stable-wallet p { color:#7c897c; font-size:11px; line-height:1.6; }
#page-stablecoins .stable-deposit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:26px 0 30px; padding:17px 18px; border:1px solid #ffffffa3; border-radius:30px; background:#dbedcd; box-shadow:0 4px 10px #2d63340a; color:#275933; font-size:12px; font-weight:600; }
#page-stablecoins .stable-deposit span:first-child { font-size:19px; }
#page-stablecoins .stable-deposit span:last-child { margin-left:auto; font-size:20px; }
#page-stablecoins .stable-wallet-list { margin:0; border:0; }
#page-stablecoins .stable-wallet-row { padding:17px 0; border-color:#31543a12; }
#page-stablecoins .stable-wallet-row span { display:flex; align-items:center; gap:10px; color:#647265; font-size:12px; }
#page-stablecoins .stable-wallet-row strong { color:#324b38; font:500 13px 'DM Sans',sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#page-stablecoins .stable-wallet-note { display:flex; gap:12px; margin-top:27px; }
#page-stablecoins .stable-wallet-note>span { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border:1px solid #fff9; border-radius:50%; color:#589367; background:#ffffff52; font-size:18px; }
#page-stablecoins .stable-wallet-note p { color:#506452; font-size:11px; }
#page-stablecoins .stable-wallet-note small { display:block; margin-top:5px; max-width:230px; font-size:10px; color:#839080; }
#page-stablecoins .stable-send-panel { overflow:hidden; border:1px solid #ffffffd9; border-radius:28px; background:#fafbf8f2; box-shadow:0 20px 60px #1d45330c,inset 0 1px 0 #fff; }
#page-stablecoins .stable-send-heading { padding:28px 32px 0; }
#page-stablecoins .stable-flow-tag { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #fff; border-radius:30px; background:linear-gradient(145deg,#ffffffc7,#eaf1e580); box-shadow:0 3px 12px #214e2c06; color:#788778; font-size:10px; }
#page-stablecoins .stable-flow-tag>span { color:var(--stable-green); font-size:17px; }
#page-stablecoins .stable-send-heading h2 { margin:25px 0 0; font:400 clamp(28px,2.8vw,36px)/1.08 'Archivo Black',sans-serif; letter-spacing:-1.4px; }
#page-stablecoins .stable-send-heading h2>span { color:var(--stable-green); }
#page-stablecoins .stable-form { padding:27px 32px 26px; }
#page-stablecoins .stable-gate:not(.error) { display:none; }
#page-stablecoins .stable-gate.error { box-shadow:none; font-size:12px; }
#page-stablecoins .stable-section { margin-bottom:23px; }
#page-stablecoins .stable-section-title { margin-bottom:13px; color:#3a483e; font-size:13px; font-weight:600; }
#page-stablecoins .stable-section-title small { color:#889285; font-size:10px; font-weight:400; }
#page-stablecoins .stable-source-pill { display:inline-flex; gap:6px; align-items:center; padding:5px 9px 5px 5px; border:1px solid #fff; border-radius:30px; background:#edf2e9; font-size:11px; font-weight:600; }
#page-stablecoins .stable-source-pill>.stable-token { width:22px; height:22px; }
#page-stablecoins .stable-source-pill small { margin-left:2px; font-size:9px; }
#page-stablecoins .stable-token { display:inline-grid; flex-shrink:0; place-items:center; width:29px; height:29px; border-radius:50%; color:#fff; font:500 22px 'DM Sans',sans-serif; }
#page-stablecoins .stable-token img,#page-stablecoins .stable-chain img { display:block; width:100%; height:100%; object-fit:contain; }
#page-stablecoins .stable-token.usdc { background:#2775ca; }
#page-stablecoins .stable-amount-line { display:flex; align-items:baseline; gap:9px; padding:10px 0 13px; border-bottom:2px solid #234d3113; transition:border-color .2s; }
#page-stablecoins .stable-amount-line:focus-within { border-color:#77af7b80; }
#page-stablecoins .stable-amount-line input { display:block; width:100%; min-width:0; padding:0; border:0; outline:none; background:none; box-shadow:none; color:#1c2921; text-align:right; font:600 var(--stable-amount-size,64px)/1.05 'DM Sans',sans-serif; letter-spacing:-3px; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; }
#page-stablecoins .stable-amount-line input::placeholder { color:#bac4b7; opacity:1; }
#page-stablecoins .stable-amount-line input::-webkit-inner-spin-button,#page-stablecoins .stable-amount-line input::-webkit-outer-spin-button { appearance:none; margin:0; }
#page-stablecoins .stable-amount-line>span { flex-shrink:0; color:#788477; font-size:11px; }
#page-stablecoins .stable-amount-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; }
#page-stablecoins #stableAvailable { color:#8a9485; font-size:10px; }
#page-stablecoins .stable-percentages { display:flex; gap:5px; margin-left:auto; }
#page-stablecoins .stable-percentages button { min-width:41px; padding:7px 8px; border:1px solid #dfe6dc; border-radius:24px; color:#405543; background:linear-gradient(#f2f5ef,#eaf0e6); font:500 10px 'DM Sans',sans-serif; cursor:pointer; }
#page-stablecoins .stable-flow-divider { position:relative; display:flex; justify-content:center; padding:15px 0; }
#page-stablecoins .stable-flow-divider span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #fff; border-radius:50%; background:#eff3eb; color:#98a393; font-size:17px; }
#page-stablecoins #stableAssetOptions { gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
#page-stablecoins .stable-option { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:58px; padding:11px 8px; border:1px solid #e0e6da; border-radius:16px; background:#f3f5ef; box-shadow:none; backdrop-filter:none; transition:background .2s,border-color .2s,transform .2s; }
#page-stablecoins .stable-option strong { font:600 11px 'DM Sans',sans-serif; }
#page-stablecoins .stable-option small { margin-top:4px; color:#8e9988; font-size:9px; }
#page-stablecoins .stable-option.active { border-color:#71a77b70; background:#e4f0db; box-shadow:inset 0 0 0 1px #649b6210; }
#page-stablecoins #stableNetworkOptions { display:flex; flex-wrap:wrap; gap:7px; }
#page-stablecoins #stableNetworkOptions .stable-option { justify-content:flex-start; min-height:38px; padding:8px 14px 8px 10px; gap:7px; border-radius:30px; }
#page-stablecoins .stable-chain { display:inline-grid; flex-shrink:0; place-items:center; width:20px; height:20px; border-radius:50%; font:600 20px/1 'DM Sans',sans-serif; }
#page-stablecoins .stable-chain.tron { color:#fff; background:#cf4b45; }
#page-stablecoins .stable-fields { display:block; }
#page-stablecoins .field label { margin-bottom:10px; font:600 12px 'DM Sans',sans-serif; text-transform:none; letter-spacing:0; color:#435143; }
#page-stablecoins #stableDestination { width:100%; height:51px; padding:14px; border:1px solid #dfe5d9; border-radius:15px; background:#f0f4eb; box-shadow:none; backdrop-filter:none; font:400 12px 'DM Sans',sans-serif; color:#314834; }
#page-stablecoins #stableDestination:focus { border-color:#76a27c; outline:2px solid #76a27c15; }
#page-stablecoins #stableNetworkHint { display:block; margin:9px 3px 0; color:#85927e; font-size:10px; line-height:1.5; }
#page-stablecoins .stable-actions { display:flex; flex-direction:column; margin-top:25px; gap:9px; }
#page-stablecoins .stable-actions .button { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:54px; border:0; border-radius:30px; background:#14251a; color:#fff; box-shadow:0 5px 15px #1c47260a; font:600 13px 'DM Sans',sans-serif; }
#page-stablecoins .stable-actions .button.lime { background:#d4eac5; color:#244d2c; }
#page-stablecoins .stable-actions .button:disabled { opacity:.45; cursor:default; }
#page-stablecoins .stable-warning { max-width:360px; margin:13px auto 0; text-align:center; color:#8b9487; font-size:9px; line-height:1.7; }
#page-stablecoins .stable-review { margin-top:24px; border:1px solid #dce6d6; border-radius:19px; box-shadow:none; background:#f0f6eb; backdrop-filter:none; }
#page-stablecoins .stable-review-head { padding:15px 17px; border-color:#dce6d6; color:#42613e; font:600 12px 'DM Sans',sans-serif; }
#page-stablecoins .stable-review-row { padding:12px 17px; gap:15px; font-size:11px; border-color:#dce6d6; }
#page-stablecoins .stable-review-row strong { font-weight:500; }
#page-stablecoins .stable-review-row:nth-child(3) strong { color:#237342; font-size:15px; }
#page-stablecoins .stable-success { border:0; border-radius:18px; background:#e3f2da; box-shadow:none; }
#page-stablecoins button:focus-visible { outline:2px solid #4b8b5f; outline-offset:3px; }
#page-stablecoins .stable-send-panel:focus-within .stable-flow-tag { border-color:#b8d9b480; }
#page-stablecoins .stable-page-head { flex-direction:row; }
#page-stablecoins.active .stable-wallet,#page-stablecoins.active .stable-send-panel { animation:stable-appear .4s ease-out both; }
#page-stablecoins.active .stable-send-panel { animation-delay:.05s; }
@keyframes stable-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1500px) { #page-stablecoins .stable-layout { max-width:1160px; gap:38px; } #page-stablecoins .stable-wallet { padding:38px; } }
@media(max-width:1100px) { #page-stablecoins .stable-layout { grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:18px; } #page-stablecoins .stable-wallet { padding:24px; } #page-stablecoins .stable-send-heading { padding:25px 24px 0; } #page-stablecoins .stable-form { padding:24px; } }
@media(max-width:850px) { #page-stablecoins .stable-layout { grid-template-columns:1fr; max-width:560px; gap:20px; } #page-stablecoins .stable-wallet { position:static; } #page-stablecoins .stable-wallet h2 { margin-top:25px; font-size:44px; } #page-stablecoins .stable-wallet-list { display:flex; gap:25px; } #page-stablecoins .stable-wallet-row { flex:1; } #page-stablecoins .stable-deposit { margin-bottom:8px; } #page-stablecoins .stable-wallet-note { display:none; } }
@media(max-width:480px) { #page-stablecoins .stable-page-head { align-items:center; gap:12px; margin-bottom:21px; } #page-stablecoins .page-head h1 { font-size:29px; } #page-stablecoins .page-head p { max-width:245px; font-size:11px; line-height:1.6; } #page-stablecoins .stable-refresh { min-width:37px; width:37px; height:37px; padding:0; font-size:17px; } #page-stablecoins .stable-refresh span { display:none; } #page-stablecoins .stable-wallet { padding:22px; border-radius:23px; } #page-stablecoins .stable-wallet-list { gap:16px; } #page-stablecoins .stable-wallet-row { gap:7px; } #page-stablecoins .stable-wallet-row span,#page-stablecoins .stable-wallet-row strong { font-size:10px; } #page-stablecoins .stable-send-panel { border-radius:23px; } #page-stablecoins .stable-send-heading { padding:24px 20px 0; } #page-stablecoins .stable-send-heading h2 { font-size:31px; } #page-stablecoins .stable-form { padding:24px 20px; } #page-stablecoins .stable-option { gap:6px; padding:10px 5px; } #page-stablecoins .stable-token { width:24px; height:24px; font-size:19px; } #page-stablecoins .stable-option strong { font-size:10px; } #page-stablecoins .stable-option small { font-size:8px; } #page-stablecoins .stable-source-pill small { display:none; } #page-stablecoins .stable-amount-line input { --stable-amount-size:56px; } }
@media(max-width:360px) { #page-stablecoins #stableAssetOptions .stable-option { flex-direction:column; gap:5px; text-align:center; } #page-stablecoins #stableAssetOptions .stable-option strong { font-size:11px; } #page-stablecoins #stableAssetOptions .stable-option small { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { #page-stablecoins *,#page-stablecoins *::before,#page-stablecoins *::after { animation:none !important; transition:none !important; } }
