:root{color-scheme:light;--bg:#f7f6f3;--surface:#fff;--surface2:#fbfaf8;--line:#e9e7e2;--ink:#242b30;--muted:#838c91;--accent:#f26033;--accent-ink:#fff;--amber:#ffbd70;--soft:#fff1e9;--shadow:0 18px 54px rgba(32,42,48,.055);--sidebar:#fff;--gradient:linear-gradient(132deg,#fe7442,#f65025 58%,#df3b22);--radius:23px;--blue:#6b82d8;--green:#3e9c75}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#14191d;--surface:#1e2428;--surface2:#222a2e;--line:#343b40;--ink:#f1f0ee;--muted:#9aa4ab;--soft:#352820;--shadow:0 16px 48px #070a0b30;--sidebar:#1b2125}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#14191d;--surface:#1e2428;--surface2:#222a2e;--line:#343b40;--ink:#f1f0ee;--muted:#9aa4ab;--soft:#352820;--shadow:0 16px 48px #070a0b30;--sidebar:#1b2125}
:root[data-theme="light"]{color-scheme:light;--bg:#f7f6f3;--surface:#fff;--surface2:#fbfaf8;--line:#e9e7e2;--ink:#242b30;--muted:#838c91;--soft:#fff1e9;--shadow:0 18px 54px rgba(32,42,48,.055);--sidebar:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{text-decoration:none;color:inherit}.hidden{display:none!important}img{width:20px;height:20px;object-fit:contain;filter:var(--iconfilter,none)}:root[data-theme="dark"]{--iconfilter:invert(1)}@media(prefers-color-scheme:dark){:root:not([data-theme]){--iconfilter:invert(1)}}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 54% 12%,#ff925015,transparent 32%);z-index:-1}
.app-shell{display:flex;min-height:100svh}.sidebar{width:250px;position:sticky;align-self:flex-start;top:0;height:100svh;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:34px 20px 26px;flex-shrink:0}.side-brand,.auth-brand{display:flex;gap:11px;align-items:center;font-size:26px;font-weight:840;letter-spacing:-1.4px}.side-brand{padding-left:11px}.brand-icon{display:grid;place-items:center;background:var(--accent);width:40px;height:40px;border-radius:12px}.brand-icon img{width:24px;height:24px;filter:brightness(0) invert(1)}.brand-period{color:var(--accent)}.nav-caption{font-size:10px;letter-spacing:2px;color:var(--muted);margin:62px 16px 18px;font-weight:800}.side-nav{display:grid;gap:7px}.nav-link,.quiet-button{display:flex;gap:15px;align-items:center;width:100%;border:0;background:transparent;border-radius:13px;padding:13px 14px;text-align:left;font-weight:650;color:var(--muted)}.nav-link img,.quiet-button img{width:21px;height:21px;opacity:.8}.nav-link:hover,.quiet-button:hover{background:var(--surface2);color:var(--ink)}.nav-link.active{background:var(--soft);color:var(--accent)}.nav-link.active img{filter:invert(48%) sepia(59%) saturate(2006%) hue-rotate(337deg) brightness(98%) contrast(92%)}.side-bottom{margin-top:auto}.side-note{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface2);display:grid;gap:7px;margin-bottom:15px}.side-note .star{color:var(--accent);font-size:28px}.side-note strong{line-height:1.3}.side-note small{font-size:12px;color:var(--muted)}
.content-wrap{flex:1;min-width:0}.topbar{min-height:122px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:32px clamp(24px,4vw,68px) 20px}.breadcrumbs,.section-eyebrow,.section-eyebrow,.hero-kicker,.kicker{font-size:10px;letter-spacing:1.8px;font-weight:800;color:var(--muted)}.breadcrumbs span{margin:0 7px;color:#c9c9c9}.breadcrumbs b{color:var(--accent)}.topbar h1{font-size:30px;margin:5px 0 0;letter-spacing:-1.25px;font-weight:820}.top-right{display:flex;align-items:center;gap:13px}.live-dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}.live-dot i,.online-dot{height:7px;width:7px;background:#42b684;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #47c88b20}.circle-btn{border:1px solid var(--line);background:var(--surface);border-radius:50%;width:44px;height:44px;display:grid;place-items:center}.circle-btn img{width:20px;height:20px}.avatar{width:44px;height:44px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:17px;font-weight:800;display:grid;place-items:center}main{max-width:1630px;margin:auto;padding:5px clamp(24px,4vw,68px) 35px}.view{display:none;animation:fadeup .38s both}.view.active{display:block}.notice{border:1px solid #f7b4a3;background:#fff0e7;color:#aa412a;padding:13px 18px;border-radius:12px;margin-bottom:16px;font-size:13px}.welcome-line{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;margin-bottom:20px}.home-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:28px}.stack{min-width:0;display:flex;flex-direction:column;gap:20px}.balance-hero{border-radius:var(--radius);background:var(--gradient);min-height:240px;padding:30px 36px;color:white;position:relative;overflow:hidden;box-shadow:0 18px 36px rgba(241,90,45,.17)}.hero-glow{position:absolute;right:-80px;top:-170px;width:410px;height:410px;border:1px solid #ffffff45;border-radius:50%;box-shadow:0 0 0 46px #ffffff12,0 0 0 93px #ffffff10,0 0 0 155px #ffffff08;pointer-events:none}.hero-kicker{color:#fffacb;position:relative}.hero-total{display:flex;align-items:baseline;gap:12px;position:relative;margin:12px 0 2px}.hero-total strong{font-weight:800;font-size:clamp(43px,4.5vw,70px);letter-spacing:-3px;line-height:1.06}.hero-total span{font-size:15px;font-weight:700}.hero-equivalent{font-size:13px;opacity:.83}.hero-actions{display:flex;gap:10px;position:relative;margin-top:26px;flex-wrap:wrap}.hero-action{display:flex;align-items:center;gap:9px;color:white;border:1px solid #ffffff65;background:#ffffff29;border-radius:12px;padding:11px 15px;font-weight:740;font-size:12px;transition:background .2s,transform .2s}.hero-action:hover{background:#ffffff40;transform:translateY(-2px)}.hero-action img{filter:brightness(0) invert(1);height:17px;width:17px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:9px}.section-title h2{font-size:22px;letter-spacing:-.65px;margin:4px 0 0}.card-counter,.little-muted{font-size:12px;color:var(--muted)}.card-switcher{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.card-switcher::-webkit-scrollbar{display:none}.switch-card{border:1px solid var(--line);color:var(--muted);background:var(--surface);white-space:nowrap;border-radius:100px;padding:9px 15px;font-size:12px;font-weight:680}.switch-card.selected{border-color:var(--accent);color:var(--accent);background:var(--soft)}.card-stage{height:245px;perspective:1200px}.card-flipper{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);height:100%;width:100%;cursor:pointer;outline-offset:4px}.card-flipper.flipped{transform:rotateY(180deg)}.wallet-card{position:absolute;inset:0;border-radius:23px;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:white;overflow:hidden;padding:26px 29px;display:flex;flex-direction:column;justify-content:space-between}.wallet-card.front{background:linear-gradient(115deg,#26323d,#131e28 74%);box-shadow:0 23px 44px #11202922}.wallet-card.front::before{content:"";position:absolute;width:300px;height:300px;border:1px solid #ffffff20;border-radius:50%;right:-99px;top:-130px;box-shadow:0 0 0 42px #ffffff08,0 0 0 85px #ffffff06}.wallet-card.back{transform:rotateY(180deg);background:linear-gradient(135deg,#ec572d,#f7914a);box-shadow:0 20px 42px #ea633a35}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.card-top span{font-size:14px;letter-spacing:2px;font-weight:780}.card-top small{font-size:9px;color:#ffc682;letter-spacing:1px}.card-top img{filter:brightness(0) invert(1);opacity:.75}.wallet-card-label{font-size:10px;letter-spacing:1.6px;color:#b5c2c8;margin-top:18px}.wallet-card-value{display:flex;align-items:baseline;gap:9px;font-size:38px;line-height:1.05;letter-spacing:-2px;font-weight:830}.wallet-card-value small{font-size:14px;letter-spacing:0;color:#bfc9cb}.card-bottom{margin-top:auto}.card-bottom small,.card-bottom span{display:block;color:#d6dfe3}.card-bottom small{font-size:11px}.card-bottom span{font-size:12px;letter-spacing:1px;margin-top:5px}.card-emblem{font-size:51px;opacity:.8}.wallet-card.back .magstripe{height:46px;background:#ffffff30;margin:18px -29px}.wallet-card.back small,.wallet-card.back b,.wallet-card.back span{display:block}.wallet-card.back b{font-size:18px;letter-spacing:.3px;overflow-wrap:anywhere}.flip-foot{font-size:12px;opacity:.85}.card-actions{display:flex;gap:10px}.btn{border:0;border-radius:13px;padding:13px 18px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:740;font-size:13px;transition:transform .18s,filter .18s,box-shadow .18s;min-height:46px}.btn:hover{transform:translateY(-2px)}.btn img{width:18px;height:18px}.btn-primary{color:#fff;background:var(--accent);box-shadow:0 8px 20px #fa65201e}.btn-primary img{filter:brightness(0) invert(1)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn-white{background:#fff;color:#dc552e;box-shadow:0 10px 18px #bd47152e}.full{width:100%}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:23px;box-shadow:var(--shadow)}.panel-heading,.panel-heading h3{margin:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.panel-heading h3{font-size:16px;letter-spacing:-.4px}.pill{font-size:10px;color:var(--accent);background:var(--soft);border-radius:100px;padding:6px 10px}.small-widget .panel-heading{margin-bottom:10px}.action-row{display:flex;align-items:center;gap:13px;padding:13px 0;border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;background:transparent;color:var(--ink)}.action-row:last-child{border-bottom:0;padding-bottom:0}.action-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1}.action-row b{font-size:13px}.action-row small{font-size:11px;color:var(--muted)}.action-row>img{width:16px;height:16px;opacity:.5}.action-icon{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;border-radius:13px}.action-icon img{width:21px;height:21px;filter:none}.apricot{background:#ffebe0}.lavender{background:#eeeeff}.mint{background:#e4f6ed}.text-link{background:none;border:0;color:var(--accent);font-weight:760;display:inline-flex;align-items:center;gap:6px;font-size:12px}.text-link img{width:15px;height:15px}.history-list{display:grid;gap:2px}.history-item{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}.history-item:last-child{border-bottom:0;padding-bottom:0}.history-icon{height:40px;width:40px;border-radius:13px;background:var(--soft);display:grid;place-items:center;flex-shrink:0}.history-icon img{width:19px;height:19px;filter:none}.history-icon.negative{background:#f3f2f5}.history-meta{min-width:0;flex:1}.history-meta b,.history-meta small{display:block}.history-meta b{font-size:12px}.history-meta small{font-size:11px;color:var(--muted);margin-top:3px}.history-number{font-size:13px;font-weight:760;white-space:nowrap}.history-number.positive{color:var(--green)}.history-number.negative{color:var(--ink)}.empty{font-size:12px;color:var(--muted);padding:30px 12px;text-align:center}.market-teaser{background:linear-gradient(126deg,#fef0c6,#f5bc77);border:0;position:relative;overflow:hidden;color:#643c20}.teaser-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:1.4px}.teaser-top span:last-child{font-size:42px;color:#d8893f}.market-teaser h3{font-size:25px;letter-spacing:-.75px;line-height:1.22;margin:8px 0}.market-teaser p{font-size:12px;max-width:230px;opacity:.8}.market-teaser .btn{margin-top:10px}
.section-heading{margin-bottom:22px}.section-heading h2{font-size:29px;letter-spacing:-.9px;margin:6px 0}.section-heading p{font-size:13px;color:var(--muted);margin:4px 0}.transfer-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.75fr);gap:20px;max-width:1020px}.transfer-form{padding:30px}.transfer-form label{display:block;font-size:12px;color:var(--muted);font-weight:730;margin-bottom:19px}.transfer-form select,.transfer-form input,.modal-card select,.modal-card input{display:block;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 15px;width:100%;outline:0;color:var(--ink);font-size:15px;margin-top:8px}.transfer-form select:focus,.transfer-form input:focus,.modal-card input:focus,.modal-card select:focus{border-color:var(--accent);box-shadow:0 0 0 4px #ef6c3223}.amount-input{position:relative}.amount-input input{padding-right:58px}.amount-input span{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px}.transfer-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:12px;margin:-3px 0 24px}.info-panel{background:linear-gradient(157deg,var(--surface),var(--surface2));display:flex;flex-direction:column;align-items:flex-start;padding:30px}.illustration-icon{width:66px;height:66px;border-radius:20px;background:var(--soft);display:grid;place-items:center;margin-bottom:27px}.illustration-icon img{width:30px;height:30px;filter:none}.info-panel h3{font-size:20px;margin:0 0 9px;letter-spacing:-.5px}.info-panel p{font-size:13px;color:var(--muted);max-width:285px}.info-divider{height:1px;width:100%;background:var(--line);margin:24px 0}.info-note{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:12px;margin-bottom:14px}.info-note img{height:16px;width:16px;filter:none}
.market-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}.market-stat{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:21px}.market-stat small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:9px}.market-stat strong{font-size:25px;letter-spacing:-.6px}.market-stat strong span{font-size:12px;color:var(--muted)}.assets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:19px 0 28px}.asset-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:22px;display:grid;gap:14px;transition:transform .18s,box-shadow .18s}.asset-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.asset-card-top{display:flex;align-items:center;gap:12px}.asset-logo{width:46px;height:46px;flex-shrink:0;border-radius:15px;background:var(--asset-color,#f26033);display:grid;place-items:center;font-size:19px;font-weight:800;color:white}.asset-name{flex:1;min-width:0}.asset-name b,.asset-name small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.asset-name b{font-size:14px}.asset-name small{font-size:11px;color:var(--muted)}.asset-description{font-size:11px;color:var(--muted);min-height:35px}.asset-price{display:flex;align-items:baseline;gap:5px}.asset-price b{font-size:27px;letter-spacing:-.8px}.asset-price small{font-size:11px;color:var(--muted)}.asset-track{height:5px;background:var(--surface2);border-radius:20px;overflow:hidden}.asset-track span{display:block;height:100%;background:var(--asset-color,var(--accent));border-radius:20px;transition:width .5s}.asset-available{font-size:11px;color:var(--muted)}.asset-actions{display:flex;gap:8px}.asset-actions .btn{min-height:37px;padding:8px 9px;font-size:12px;flex:1}.holdings-grid{display:grid;gap:10px}.holding-row{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:18px;display:flex;align-items:center;gap:13px}.holding-info{flex:1}.holding-info b,.holding-info small{display:block}.holding-info small{font-size:11px;color:var(--muted)}.holding-amount{text-align:right}.holding-amount b,.holding-amount small{display:block}.holding-amount small{font-size:11px;color:var(--muted)}.portfolio-title{margin-top:15px}.history-page{max-width:940px}.main-footer{border-top:1px solid var(--line);color:var(--muted);margin-top:50px;padding-top:21px;font-size:10px;display:flex;justify-content:space-between;gap:18px}.mobile-nav{display:none}
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px}.modal-scrim{position:absolute;inset:0;background:#12171cb6;backdrop-filter:blur(5px)}.modal-card{position:relative;z-index:1;width:min(480px,100%);max-height:calc(100svh - 35px);overflow-y:auto;border-radius:25px;padding:26px;background:var(--surface);box-shadow:0 30px 80px #0003;animation:modalin .25s}.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.modal-top h2{margin:5px 0 0;font-size:22px;letter-spacing:-.6px}.modal-top .circle-btn{width:38px;height:38px}.modal-details{display:grid;gap:10px;background:var(--surface2);padding:17px;border-radius:14px;border:1px solid var(--line);font-size:13px}.modal-details div{display:flex;justify-content:space-between;gap:16px}.modal-details span:first-child{color:var(--muted)}.modal-card label{font-size:12px;color:var(--muted);font-weight:690;display:block;margin-bottom:15px}.modal-buttons{display:flex;gap:10px;margin-top:20px}.modal-buttons .btn{flex:1}.qr-canvas{display:grid;place-items:center;background:#fff;padding:24px;margin:14px auto;width:fit-content;border-radius:15px}.qr-canvas svg{max-width:230px}.qr-caption{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 18px}.toasts{position:fixed;bottom:26px;right:25px;z-index:80;display:grid;gap:8px}.toast{padding:14px 20px;background:#233037;color:#fff;border-radius:13px;box-shadow:0 8px 36px #0002;font-size:13px;max-width:360px;animation:fadeup .22s}.toast.error{background:#b84132}
.auth-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:30px 16px}.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:29px;width:min(480px,100%);padding:45px 38px;box-shadow:var(--shadow);text-align:center}.auth-symbol{margin:0 auto 19px;width:65px;height:65px;border-radius:20px;background:var(--soft);display:grid;place-items:center}.auth-symbol img{width:31px;height:31px;filter:none}.auth-card h1{font-size:36px;line-height:1.13;letter-spacing:-1.5px;margin:12px 0}.auth-card h1 em{font-style:normal;color:var(--accent)}.auth-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 28px}.auth-note{display:block;color:var(--muted);font-size:12px;margin-top:20px}.auth-bottom{font-size:11px;color:var(--muted)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes modalin{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1240px){.sidebar{width:216px;padding-inline:12px}.topbar{padding-inline:30px}main{padding-inline:30px}.home-layout{gap:16px}.assets-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:18px}}
@media(max-width:900px){.sidebar{display:none}.topbar{padding:23px 24px}.content-wrap{width:100%}main{padding:2px 24px 100px}.home-layout{grid-template-columns:1fr}.right-stack{display:grid;grid-template-columns:1fr 1fr;align-content:start}.market-teaser{grid-column:1/-1}.mobile-nav{position:fixed;display:flex;z-index:15;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);justify-content:space-around}.mobile-item{flex:1;display:grid;align-content:center;justify-items:center;gap:3px;border:0;background:none;color:var(--muted);font-size:10px}.mobile-item img{width:19px;height:19px;opacity:.7}.mobile-item.active{color:var(--accent);font-weight:800}.mobile-item.active img{filter:invert(48%) sepia(59%) saturate(2006%) hue-rotate(337deg) brightness(98%) contrast(92%)}.main-footer{margin-bottom:30px}}
@media(max-width:610px){body{font-size:14px}.topbar{min-height:90px;padding:21px 18px 10px}.topbar h1{font-size:24px}.breadcrumbs{font-size:9px}.live-dot{display:none}.top-right{gap:8px}.circle-btn,.avatar{height:39px;width:39px}main{padding:8px 16px 95px}.welcome-line{margin-bottom:16px}.home-layout{gap:18px}.stack{gap:16px}.balance-hero{min-height:209px;padding:27px 23px}.hero-total strong{font-size:47px}.hero-total span{font-size:13px}.hero-actions{margin-top:21px}.hero-action{padding:10px 12px}.section-title h2{font-size:20px}.card-stage{height:221px}.wallet-card{border-radius:20px;padding:23px}.wallet-card-value{font-size:33px}.card-actions .btn{padding:11px 12px;flex:1;white-space:nowrap}.card-actions .btn img{width:17px;height:17px}.right-stack{display:flex}.market-teaser{grid-column:auto}.assets-grid{grid-template-columns:1fr}.market-stat-grid{gap:8px}.market-stat{padding:14px}.market-stat small{font-size:8px;min-height:26px}.market-stat strong{font-size:19px}.section-heading h2{font-size:26px}.transfer-layout{grid-template-columns:1fr}.info-panel{padding:20px}.main-footer{display:block}.main-footer span{display:block;margin-bottom:6px}.modal{padding:11px;align-items:end}.modal-card{border-radius:24px 24px 15px 15px;padding:23px;width:100%;max-height:90svh}.auth-card{padding:34px 22px}.auth-card h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* 5.1: tiered card skins and local appearance preferences */
.card-flipper[data-skin="standard"]{--skin-front:linear-gradient(122deg,#f77a4e,#ec4825 70%,#bd3822);--skin-back:linear-gradient(135deg,#c94b30,#f38e60);--skin-light:#fff3ed}
.card-flipper[data-skin="bronze"]{--skin-front:linear-gradient(120deg,#9a593c,#643c31 58%,#b67f52);--skin-back:linear-gradient(120deg,#673d2b,#b7764e);--skin-light:#ffdfb9}
.card-flipper[data-skin="gold"]{--skin-front:linear-gradient(120deg,#6d491d,#a67a30 55%,#e3bd62);--skin-back:linear-gradient(130deg,#b88b31,#664718);--skin-light:#fff3bd}
.card-flipper[data-skin="platinum"]{--skin-front:linear-gradient(124deg,#47535d,#8b9ca5 60%,#d8dce0);--skin-back:linear-gradient(130deg,#62707a,#b0bac2);--skin-light:#f2fbff}
.card-flipper[data-skin="premium"]{--skin-front:linear-gradient(120deg,#142b48,#1c4a72 60%,#347bac);--skin-back:linear-gradient(125deg,#1a456f,#1e2738);--skin-light:#c5edff}
.card-flipper[data-skin="pro"]{--skin-front:linear-gradient(125deg,#1e1834,#39265e 64%,#7f4a9b);--skin-back:linear-gradient(125deg,#31234a,#74489c);--skin-light:#efd8ff}
.card-flipper[data-skin="kaif"]{--skin-front:linear-gradient(122deg,#b72e7e,#674ac7 58%,#1c9ecc);--skin-back:linear-gradient(135deg,#704ed2,#e13d86);--skin-light:#ffe4ff}
.card-flipper[data-skin="custom"]{--skin-front:linear-gradient(130deg,#10202d,#293443);--skin-back:linear-gradient(125deg,#192a36,#41505a);--skin-light:#fff}
.card-flipper[data-skin] .wallet-card.front{background:var(--skin-front)}
.card-flipper[data-skin] .wallet-card.back{background:var(--skin-back)}
.card-flipper[data-skin] .card-top small,.card-flipper[data-skin] .wallet-card-label,.card-flipper[data-skin] .wallet-card-value small{color:var(--skin-light)}
.card-flipper[data-skin="custom"] .wallet-card.front::after,
.card-flipper[data-skin="custom"] .wallet-card.back::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101018b2,#10101845),var(--card-cover);background-position:center;background-size:cover;pointer-events:none;z-index:0}
.card-flipper[data-skin="custom"] .wallet-card.front::before{z-index:1}
.card-flipper[data-skin="custom"] .wallet-card>*{z-index:2;position:relative}
.card-actions{flex-wrap:wrap}
.card-actions .btn{flex:1 1 145px;white-space:nowrap}
.card-top small{display:inline-block;max-width:125px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.history-comment{display:block;font-size:12px;max-width:100%;overflow-wrap:anywhere;color:var(--ink);opacity:.75;margin-top:5px;border-left:2px solid var(--accent);padding-left:9px}
.optional{font-size:11px;color:var(--muted);font-weight:450}
.transfer-form textarea{display:block;width:100%;resize:vertical;min-height:85px;max-height:180px;font:inherit;font-size:14px;line-height:1.5;padding:13px 15px;margin-top:8px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;color:var(--ink);outline:none}
.transfer-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px #ef6c3223}
.counter{display:block;text-align:right;margin-top:6px;color:var(--muted);font-size:11px}
.modal-description{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.modal-details strong{max-width:65%;text-align:right;overflow-wrap:anywhere}
/* Keyboard-like PIN unlock screen. Deliberately no auto keyboard on phones. */
.pin-screen{position:fixed;inset:0;z-index:120;background:linear-gradient(155deg,var(--bg),var(--surface2));overflow-y:auto;display:grid;place-items:center;padding:20px 14px 28px}
.pin-box{width:min(365px,100%);text-align:center;margin:auto;display:grid;justify-items:center;gap:0}
.pin-mark{width:65px;height:65px;display:grid;place-items:center;background:var(--soft);border-radius:21px;margin-bottom:22px;box-shadow:0 6px 22px #f4692e15}
.pin-mark img{width:28px;height:28px}
.pin-overline{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:800}
.pin-box h2{font-weight:800;font-size:clamp(23px,5vw,28px);letter-spacing:-.9px;margin:12px 0 8px;color:var(--ink)}
.pin-box>p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:19px;height:73px;margin:14px auto 0}
.pin-dots i{width:13px;height:13px;border:1.8px solid var(--muted);border-radius:50%;transition:background .13s,transform .13s}
.pin-dots i.filled{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.pin-status{min-height:31px;padding:2px 8px;color:var(--accent)!important;font-size:12px!important}
.pin-keyboard{width:min(316px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;align-items:center;justify-items:center;margin-top:12px}
.pin-keyboard button{width:78px;height:70px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 15px #232f3809;touch-action:manipulation;user-select:none;transition:transform .13s,background .13s}
.pin-keyboard button:active{background:var(--soft);transform:scale(.92)}
.pin-keyboard button strong{font-size:28px;font-weight:480;line-height:1}
.pin-keyboard button small{font-size:8px;letter-spacing:2px;margin-top:4px}
.pin-keyboard button.pin-back{font-size:29px;border:0;background:transparent;box-shadow:none}
.pin-recover{background:transparent;border:0;color:var(--accent);font-weight:680;font-size:13px;margin-top:26px;padding:10px 20px}
@media(min-width:1000px){.pin-box{padding:30px 0}.pin-keyboard button{width:81px;height:75px}}
@media(max-width:610px){.pin-keyboard{gap:10px 14px}.pin-keyboard button{width:min(76px,22vw);height:min(72px,21vw)}.card-actions .btn{flex:1 1 40%;font-size:12px}}
@media(prefers-reduced-motion:reduce){.pin-dots i,.pin-keyboard button{transition:none}}



/* Cross-browser layout: iOS/WebKit, Firefox, Chromium, desktop and tablets */
html{min-width:0;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
body{min-width:0;max-width:100%;overflow-x:clip;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit;max-width:100%;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation;-webkit-appearance:none;appearance:none}
input,textarea{-webkit-appearance:none;appearance:none;border-radius:12px}
select{-webkit-appearance:menulist;appearance:auto;border-radius:12px}
input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto}
input[type=file]{-webkit-appearance:none;appearance:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
:where(.stack,.panel,.balance-hero,.right-stack,.info-panel,.history-page,.history-item,.history-meta,.holding-row,.holding-info,.asset-card,.market-stat,.hero-total,.modal-card,.modal-details,.transfer-form,.transfer-layout,.action-row,.card-actions,.section-heading,.wallet-card,.card-bottom,.card-bottom>div,.topbar-title,.topbar){min-width:0}
:where(.hero-total strong,.wallet-card-value,.history-number,.holding-amount,.market-stat strong){font-variant-numeric:tabular-nums}
.hero-total strong,.wallet-card-value,.wallet-card-value span{min-width:0;max-width:100%;overflow-wrap:anywhere}
.history-meta,.history-meta b,.history-meta small,.history-number,.holding-info,.holding-amount{min-width:0;overflow-wrap:anywhere}
.history-number{max-width:42%;text-align:right;flex-shrink:0}
.card-stage{-webkit-perspective:1200px;perspective:1200px;isolation:isolate}
.card-flipper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .68s cubic-bezier(.2,.8,.2,1);transition:transform .68s cubic-bezier(.2,.8,.2,1);-webkit-transform:rotateY(0deg);transform:rotateY(0deg);touch-action:pan-y}
.card-flipper.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.wallet-card{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:flat;transform-style:flat}
.wallet-card.front{-webkit-transform:translateZ(.3px);transform:translateZ(.3px)}
.wallet-card.back{-webkit-transform:rotateY(180deg) translateZ(.3px);transform:rotateY(180deg) translateZ(.3px)}
.card-flipper[data-skin=custom] .wallet-card{isolation:isolate}
.card-flipper[data-skin=custom] .wallet-card::after{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.app-shell{min-height:100vh;min-height:100svh}
.sidebar{height:100vh;height:100svh;max-height:100vh;max-height:100svh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal,.pin-screen{top:var(--app-visual-top,0px);bottom:auto;height:var(--app-visual-height,100vh);height:var(--app-visual-height,100svh);max-height:var(--app-visual-height,100svh)}
.modal-card{max-height:calc(var(--app-visual-height,100svh) - 32px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.qr-canvas{max-width:100%;overflow:hidden}
.qr-canvas svg{width:min(230px,100%);height:auto}
.pin-screen{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px))}
.pin-box{margin:auto;max-width:100%;flex:none}
.pin-keyboard button{padding:0;line-height:1.1;-webkit-user-select:none;user-select:none}
.pin-keyboard button:focus-visible{outline-offset:2px}
.toasts{max-width:calc(100vw - 24px)}
.auth-screen{min-height:100vh;min-height:100svh;padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.card-switcher,.mobile-nav{-webkit-overflow-scrolling:touch}
@supports not (overflow:clip){body{overflow-x:hidden}}
@media(hover:none){.btn:hover,.hero-action:hover,.asset-card:hover{transform:none}}
@media(max-width:900px){
  .mobile-nav{height:auto;min-height:calc(66px + env(safe-area-inset-bottom,0px));padding-top:5px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .mobile-item{min-width:0;min-height:51px;flex:1 1 0;padding:5px 1px;white-space:nowrap}
  main{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:12px;right:12px}
  .toast{width:100%;max-width:none}
}
@media(max-width:610px){
  /* Safari iOS zooms the whole page if an editable field uses <16px text. */
  input:not([type=checkbox]):not([type=radio]),select,textarea,.transfer-form textarea,.modal-card input,.modal-card select{font-size:16px!important;line-height:1.35}
  .topbar{padding-top:calc(18px + env(safe-area-inset-top,0px));gap:7px}
  .card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card-actions .btn{width:100%;min-width:0;white-space:normal;line-height:1.25;text-align:center;overflow-wrap:normal}
  .card-actions .btn:first-child{grid-column:1 / -1}
  .hero-total{align-items:flex-start;flex-wrap:wrap;gap:5px 10px}
  .hero-total strong{font-size:clamp(34px,10vw,47px);line-height:1.15}
  .card-stage{height:clamp(190px,56vw,230px)}
  .wallet-card{padding:clamp(16px,5vw,23px)}
  .card-top span{font-size:clamp(10px,3vw,14px);letter-spacing:1px}
  .card-top small{max-width:102px;letter-spacing:0}
  .wallet-card-label{margin-top:8px}
  .wallet-card-value{font-size:clamp(25px,8vw,36px)}
  .card-bottom span,.card-bottom small{font-size:clamp(10px,2.9vw,12px);letter-spacing:0;overflow-wrap:anywhere}
  .card-emblem{font-size:35px}
  .modal{align-items:end;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .modal-card{width:100%;max-height:calc(var(--app-visual-height,100svh) - 16px - env(safe-area-inset-bottom,0px));padding:20px 19px calc(20px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 15px 15px}
  .modal-buttons{flex-wrap:wrap}.modal-buttons .btn{flex:1 1 115px}
  .transfer-foot,.section-title,.panel-heading{flex-wrap:wrap}
  .market-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .market-stat:last-child{grid-column:1/-1}
  .holding-row{flex-wrap:wrap}.holding-amount{margin-left:auto}
}
@media(max-width:370px){
  .topbar h1{font-size:21px}
  .top-right .avatar{display:none}
  main{padding-left:12px;padding-right:12px}
  .balance-hero{padding:22px 20px}
  .wallet-card.back .magstripe{margin-left:-18px;margin-right:-18px}
  .market-stat strong{font-size:17px}
  .mobile-item{font-size:9px}
  .card-actions .btn{font-size:11px;padding:10px 7px}
  .pin-keyboard{max-width:280px;gap:8px}
}
@media(max-height:660px){
  .pin-screen{justify-content:flex-start}
  .pin-box{padding:4px 0}
  .pin-mark{height:46px;width:46px;border-radius:15px;margin-bottom:7px}.pin-mark img{width:23px;height:23px}
  .pin-box h2{font-size:23px;margin:6px 0 4px}
  .pin-dots{height:46px;margin:3px auto 0}
  .pin-keyboard{margin-top:4px;row-gap:6px}
  .pin-keyboard button{height:58px;width:65px}
  .pin-keyboard button strong{font-size:24px}
  .pin-recover{margin-top:9px}
}
@media(max-height:510px) and (orientation:landscape){
  .pin-screen{overflow-y:auto}
  .pin-box{width:min(320px,100%);padding:4px 0}
  .pin-keyboard button{height:47px;width:62px}
  .pin-status{min-height:22px}
  .pin-keyboard{row-gap:4px}
  .pin-mark{display:none}
  .mobile-nav{min-height:50px}
}
@media(prefers-reduced-motion:reduce){.card-flipper{-webkit-transition:none!important;transition:none!important}.view{animation:none!important}.modal-card{animation:none!important}}
