/* Metriplex workspace — presentation layer, shared by all wallet modes. */
:root{--bg:#0b1013;--bg2:#11191d;--bg3:#172126;--border:#243136;--border2:#304148;--text:#edf3f1;--muted:#a0b1b4;--muted2:#7e9297;--green:#81ddbb;--blue:#8bbaf6;--accent:#c1aff5;--red:#f58b8b;--action:#a0edce;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--ui-font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html{color-scheme:dark;scroll-behavior:smooth}
body{font-family:var(--ui-font);font-size:15px;line-height:1.6;background:var(--bg);-webkit-font-smoothing:antialiased}
body[data-mode="native"],body[data-mode="bridge"],body[data-mode="verify"]{--action:#c7b9f6}
button,input,textarea{font-family:inherit}
button,a,input,summary{touch-action:manipulation}
button{font-weight:600}
a{color:inherit}
:focus-visible{outline:2px solid var(--action)!important;outline-offset:4px}
.skip-link{position:fixed;top:-80px;left:16px;z-index:1000;padding:12px 18px;background:var(--action);color:#0b1013;border-radius:8px}
.skip-link:focus{top:12px}
nav{height:80px;padding:0 max(24px,calc((100vw - 1160px)/2));background:rgba(11,16,19,.96);border-color:#202d32}
.nav-logo{gap:12px;flex-shrink:0}.nav-logo img{width:32px;height:32px;object-fit:contain}
.nav-logo-text{font-family:var(--ui-font);font-size:13px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.brand-divider{padding:0 9px;color:#52686e;font-weight:400}.brand-app{color:#a2b6b8;font-size:11px;letter-spacing:.09em;font-weight:500}
.nav-right{gap:26px}.nav-link{font-family:var(--ui-font);font-size:13px;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.wallet-nav-button{min-height:42px;padding:9px 17px;color:var(--text);background:#172126;border:1px solid #3b5156;border-radius:9px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:20px;max-width:260px}
.wallet-nav-button:hover{background:#223239;border-color:#77ac9b}.wallet-nav-button.connected{gap:8px;color:var(--green)}
.wallet-nav-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.wrap{max-width:1208px;padding:48px 24px 28px;margin:auto}
.app-hero{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;gap:24px}
.hero-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#a6bcb9;display:flex;align-items:center;gap:10px;margin-bottom:17px}
.eyebrow-line{width:22px;height:1px;background:#93d7bf}.beta-pill{font-family:var(--ui-font);font-size:9px;letter-spacing:.04em;border:1px solid #3a4848;color:#a7b9b4;border-radius:4px;padding:1px 5px;margin-left:2px}
h1{font-size:clamp(38px,4.4vw,56px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin-bottom:16px}
h1 em{color:#a5d9c8;font-weight:400}.sub{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:0}
.hero-art{width:290px;margin-right:35px;color:#699e8e;opacity:.8;text-align:center;flex-shrink:0}
.hero-art svg{width:230px;height:168px;display:block;margin:auto}.hero-art span{display:block;font-family:var(--mono);letter-spacing:.24em;font-size:8px;margin-top:6px;color:#8ca8a2}
.app-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;align-items:start}.workspace{min-width:0;scroll-margin-top:100px;outline:none}
.tabs{gap:4px;padding:5px;background:#121b20;border:1px solid #293a40;border-radius:12px;margin-bottom:18px}
.tab{font-family:var(--ui-font);font-size:13px;letter-spacing:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:8px;white-space:nowrap;padding:10px 12px;color:#a5b6bb}
.tab:hover{color:#fff;background:#1b292f}.tab.active,.tab.native-tab.active{background:#263b36;border-color:#4d7164;color:#d5f6e8;box-shadow:0 1px 4px #0003}
body:not([data-mode="base"]) .tab.native-tab.active{background:#302d40;border-color:#6a6086;color:#e1d6ff}
.tab-icon{font-size:19px;font-weight:400;line-height:1}.tab-network{font-family:var(--mono);font-size:8px;color:#adc5ba;background:#172923;padding:2px 5px;border-radius:4px}
.card{background:var(--bg2);border:1px solid #2a3a40;border-radius:17px;padding:28px;margin-bottom:16px;box-shadow:0 10px 35px #0000000a}
.clabel{font-family:var(--mono);font-size:10px;letter-spacing:.13em;line-height:1.5;margin-bottom:15px;color:#a1b9b6}
.panel-title{font-size:26px;line-height:1.2;letter-spacing:-.035em;font-weight:500;margin:0 0 12px}.panel-description,.bridge-explainer{color:#a9babd;font-size:14px;line-height:1.8;margin-bottom:24px}
.connect-card-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.connect-card-top .clabel{margin:0}
.network-pill{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#b2c2ce;padding:5px 9px;background:#19242e;border:1px solid #2c3e4f;border-radius:6px;white-space:nowrap}
.base-mark{width:9px;height:9px;border-radius:50%;background:#81aeff;display:inline-block}
#card-connect{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:418px;padding-bottom:26px}
.wallet-illustration{position:relative;width:86px;height:86px;margin:27px auto 17px;border:1px solid #35594e;border-radius:25px;background:#1c302a;display:grid;place-items:center;color:#acdec8;transform:rotate(-7deg)}
.wallet-illustration svg{width:53px;height:53px;transform:rotate(7deg)}.wallet-spark{position:absolute;right:-12px;top:-9px;color:#b7e2d1;font-size:30px;transform:rotate(7deg)}
.connect-title{font-weight:500;font-size:27px;letter-spacing:-.035em;line-height:1.3;margin-bottom:10px}.connect-description{font-size:13px;line-height:1.8;color:#adbec0;margin-bottom:23px}
.btn-connect,.btn-send,.btn-native,.btn-unlock{min-height:49px;padding:13px 18px;border-radius:9px;font-size:13px;letter-spacing:.01em;font-family:var(--ui-font);transition:background .15s,box-shadow .15s;line-height:1.5}
.btn-connect:not(:disabled),.btn-send:not(:disabled),.btn-native:not(:disabled){background:var(--action)!important;color:#0e2420;border:1px solid transparent;font-weight:650}
.btn-connect:not(:disabled):hover,.btn-send:not(:disabled):hover,.btn-native:not(:disabled):hover{filter:brightness(1.06);transform:none;box-shadow:0 0 0 3px #a0edce15}
.btn-connect:disabled,.btn-send:disabled,.btn-native:disabled{background:#253138;color:#a0b0b6;opacity:.8;box-shadow:none}
#connect-btn{max-width:370px;display:flex;justify-content:center;align-items:center;gap:70px}
.wallet-options{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:15px;font-size:10px;color:#b8c5c8}.wallet-options span+span:before{content:'·';margin-right:16px;color:#587069}
.connect-note{font-size:10px;color:#8ca29f;margin-top:11px}.btn-unlock{color:#dbcdf9;border-color:#6c5b90;background:#2b2639}.btn-unlock:hover{background:#382e4e}
.fgroup{margin-bottom:19px}.flabel,.field-label{font-family:var(--ui-font);font-size:11px;font-weight:550;letter-spacing:.035em;color:#bdc9cd;margin-bottom:8px;display:block}
.finput{font-family:var(--ui-font);font-size:15px;min-height:49px;line-height:1.5;padding:12px 14px;background:#0c1419;border-color:#33464f;border-radius:9px;min-width:0;color:#f0f4f3;transition:box-shadow .15s,border-color .15s}
.finput::placeholder{color:#80969f}.finput:focus{border-color:#93bea9;box-shadow:0 0 0 3px #a0edce10}.finput[type=file]{padding:11px!important;font-size:12px;cursor:pointer;min-height:66px;border-style:dashed}
.finput::file-selector-button{font-family:inherit;background:#273942;color:#d1e8e0;border:1px solid #44615e;border-radius:6px;padding:9px 12px;margin-right:12px;cursor:pointer}
.arow{gap:8px}.maxbtn{font-size:11px;min-width:64px;border-color:#426859;color:#bde7d6;background:#1c3029;padding:11px 12px}.step-label{font-size:9px;color:#92aaa8;letter-spacing:.1em;margin:20px 0 10px}
.metric{background:#182329;border:1px solid #263a41;padding:13px 15px;border-radius:10px;min-width:0}.metric-val{font-family:var(--ui-font);font-size:18px;overflow-wrap:anywhere}.metric-label{font-size:9px;color:#a9bec1}.id-box{border-color:#30454e;background:#0d161c}.id-box-label,.id-box-addr{padding:10px 12px;font-size:10px}.id-box-addr{padding-top:6px}.id-tech-key{color:#8aa0a7}
.contract-details{background:#10191e;border:1px solid #283b43;border-radius:11px;margin-bottom:16px;overflow:hidden}.contract-details summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none;padding:17px 20px;font-size:12px;color:#cedad9;min-height:54px}
.contract-details summary::-webkit-details-marker{display:none}.contract-details summary>span{font-family:var(--mono);font-size:9px;color:#90a5ad;display:flex;gap:16px}.contract-details[open] summary{border-bottom:1px solid #263a42}.contract-details .card{border:none;border-radius:0;margin:0;box-shadow:none;padding:12px 20px 20px}.cv{font-size:11px;overflow-wrap:anywhere}.crow{gap:16px}
.workspace-guide{padding:24px 0 0 5px}.guide-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.guide-eyebrow,.guide-number{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#90a6a7}.guide-number{color:#79928c}
.workspace-guide h2{font-size:23px;line-height:1.3;font-weight:450;letter-spacing:-.025em;margin-bottom:8px}.workspace-guide>p{font-size:12px;color:#9eb1b4;line-height:1.8}
.guide-steps{list-style:none;padding:0;margin:27px 0 25px}.guide-steps li{display:flex;gap:15px;position:relative;padding-bottom:25px}.guide-steps li:last-child{padding-bottom:0}.guide-steps li:not(:last-child):before{content:'';position:absolute;left:14px;top:32px;bottom:5px;width:1px;background:#2e4145}
.step-number{font-family:var(--mono);font-size:9px;flex-shrink:0;width:29px;height:29px;display:grid;place-items:center;border:1px solid #3f555a;border-radius:50%;color:#b6ceca;background:#162327}.guide-steps h3{font-size:12px;font-weight:600;color:#dae5e3;line-height:1.4;margin:4px 0 6px}.guide-steps p{font-size:12px;color:#96adb1;line-height:1.75;max-width:225px}
.guide-note{display:flex;gap:12px;align-items:flex-start;padding:15px;background:#15221f;border:1px solid #2b453b;border-radius:9px;color:#a2c7b7}.guide-note>span{font-size:20px;line-height:1.4}.guide-note p{font-size:11px;line-height:1.8}
.guide-link{display:flex;justify-content:space-between;text-decoration:none;font-size:11px;color:#c4d5d1;padding:18px 0 22px;border-bottom:1px solid #2a3c41}.guide-link:hover{color:var(--green)}
.native-health{display:flex;align-items:center;gap:8px;color:#91a7aa;font-size:10px;margin-top:18px;min-height:20px}.native-health>a{margin-left:auto;text-decoration:none;padding:5px}.health-dot{width:5px;height:5px;border-radius:50%;background:#8b989e;flex-shrink:0}.health-dot.ok{background:#88d9b7}.health-dot.error{background:#dfba79}
.workspace-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid #223238;font-size:10px;color:#8ba0a4}.workspace-bottom span span{padding:0 6px}
footer{font-family:var(--ui-font);font-size:10px;color:#80999f;border-top:0;padding:12px 24px 24px}footer a{color:#a5b7b9;font-size:11px;display:inline-block;padding:8px 0;margin:0 10px}
.sbox,.unlock-status{font-family:var(--ui-font);font-size:12px;overflow-wrap:anywhere}.sbox.error,.unlock-status.err{color:#ffb6b6;background:#2b1e24;border-color:#73444d}.sbox.success{color:#a0e2c7}.wallet-feedback{border:1px solid #656145;background:#29271e;color:#e7dba9;padding:14px 18px;border-radius:9px;margin:0 0 18px;font-size:13px;overflow-wrap:anywhere}
#btab-identity,#btab-burn{min-height:45px;font-family:var(--ui-font)!important;font-size:11px!important;letter-spacing:.03em!important}
.verify-layout{gap:14px}.verify-3d,.verify-qr{border-color:#3a495a;border-radius:10px}.verify-qr{padding:12px}.verify-3d{background:#101923}
#bridge-burn-amount{font-size:15px!important;min-width:0}#bridge-burn-btn{margin-top:0;min-height:49px;padding:12px 17px!important;white-space:nowrap}
@media(min-width:1400px){.wrap{padding-top:58px}.app-hero{margin-bottom:42px}}
@media(max-width:980px){.app-layout{grid-template-columns:minmax(0,1fr) 260px;gap:24px}.hero-art{margin-right:0;width:240px}.tab{padding:10px 7px;gap:6px}.tab-network{display:none}.card{padding:23px}.connect-title{font-size:25px}.workspace-guide{padding-left:0}}
@media(max-width:760px){nav{height:68px;padding:0 20px}.nav-right{gap:16px}.nav-right .nav-link{display:none}.nav-logo-text{font-size:11px}.wallet-nav-button{font-size:11px;padding:9px 12px;gap:10px;max-width:180px}.brand-app,.brand-divider{display:none}.wrap{padding:30px 20px 20px}.app-hero{margin-bottom:28px}.hero-art{width:145px;opacity:.65}.hero-art svg{width:150px;height:145px}.hero-art span{font-size:6px;letter-spacing:.15em}.hero-eyebrow{font-size:8px;gap:7px}.eyebrow-line{width:14px}.app-layout{grid-template-columns:1fr;gap:15px}.workspace-guide{padding:17px 0 0;max-width:none;border-top:1px solid #2a3c41}.guide-topline{margin-bottom:15px}.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:22px 0}.guide-steps li{display:block;padding:0}.guide-steps li:before{display:none}.step-number{margin-bottom:12px}.guide-steps h3{font-size:11px}.guide-steps p{font-size:11px}.guide-note{padding:12px}.guide-link{padding:15px 0}.workspace-bottom{margin-top:12px;font-size:9px}.native-health{margin-top:12px}.finput{font-size:16px}.desktop-break{display:none}}
@media(max-width:480px){.hero-art{display:none}.app-hero{display:block}h1{font-size:44px}.sub{font-size:12px;max-width:315px}.hero-eyebrow{font-size:8px;letter-spacing:.08em}.tabs{padding:4px;margin-bottom:14px;gap:2px}.tab{font-size:12px;gap:6px;min-height:45px;padding:10px 5px}.tab-icon{font-size:17px}.card{padding:20px;border-radius:13px}#card-connect{min-height:390px}.connect-card-top .clabel{font-size:9px}.network-pill{font-size:9px}.wallet-illustration{margin:28px auto 17px}.connect-title{font-size:25px}.connect-description{font-size:12px}.wallet-options{gap:9px;font-size:9px}.wallet-options span+span:before{margin-right:9px}.connect-note{font-size:9px}.contract-details summary{padding:15px}.contract-details summary>span{font-size:8px;gap:8px}.panel-title{font-size:24px}.workspace-bottom{flex-direction:column;gap:4px}.id-pair{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:4px}.id-box-label{font-size:8px;padding:8px}.id-box-addr{font-size:8px;padding:6px}.id-tech{padding:6px}.id-tech-row{flex-wrap:wrap}.guide-steps{grid-template-columns:1fr;gap:17px}.guide-steps li{display:flex;gap:12px}.guide-steps h3{font-size:12px;margin-top:3px}.guide-steps p{font-size:12px;max-width:100%}.step-number{margin-bottom:0}.panel-description,.bridge-explainer{font-size:13px}#bridge-burn-amount{font-size:14px!important}}
@media(max-width:355px){nav{padding:0 14px}.wrap{padding-left:14px;padding-right:14px}.nav-logo{gap:8px}.nav-logo img{width:27px;height:27px}.wallet-nav-button{padding:8px;gap:4px;font-size:10px}.tab-icon{display:none}.network-pill{padding:4px 6px}#bridge-burn-btn{padding:12px 9px!important;font-size:10px}.wallet-options{gap:7px;font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}