/* 90% visual density via explicit dimensions. Viewport, breakpoints, percentages, colors and native wallet portals are unchanged. Small fonts and touch targets have readability floors. */
.page{font-size:12.6px}
.page button:not(#thirdweb-connect *):focus-visible,.page a:not(#thirdweb-connect *):focus-visible,.page input:not(#thirdweb-connect *):focus-visible{outline-offset:3.6px}
.page h1{font-size:27px;letter-spacing:-0.9px}
.page h2{font-size:20.7px;letter-spacing:-0.45px}
.page h3{font-size:15.3px;letter-spacing:-0.27px}
.page .label{font-size:11px}
.page .row{gap:10.8px}
.page .stack{gap:14.4px}
.page .dot{width:5.4px;height:5.4px;margin-right:6.3px}
.page .badge{gap:5.4px;padding:4.5px 8.1px;border-radius:7.2px}
.page .divider{height:0.9px;margin:18px 0}
.page{max-width:936px;padding:28.8px 25.2px 64.8px}
.page .brand{font-size:27px;letter-spacing:-1.26px}
.page .brand small{letter-spacing:2.16px;margin-top:6.3px}
.page .header{padding-bottom:27px}
.page .wallet{padding:9.9px 12.6px;border-radius:10.8px;font-size:11px}
.page .chain{letter-spacing:1.62px}
.page .nav{gap:5.4px;padding:0 0 10.8px;margin-bottom:27px}
.page .nav button{border-radius:7.2px;padding:8.1px 13.5px;font-size:11px}
.page .prototype{letter-spacing:0.9px;margin-bottom:18px}
.page .section{margin-bottom:27px}
.page .section-title{margin:0 0 16.2px}
.page .hero{border-radius:21.6px;padding:24.3px 27px}
.page .hero:after{background-size:5.4px 5.4px}
.page .hero-label{font-size:13.5px}
.page .hero-value{font-size:40.5px;letter-spacing:-1.71px;margin:18px 0 2.7px}
.page .hero-value small{font-size:16.2px}
.page .hero .divider{margin:18px 0 12.6px}
.page .hero-bottom{font-size:11px}
.page .card{border-radius:17.1px;padding:20.7px}
.page .flat-card{border-radius:14.4px;padding:18.9px}
.page .metrics{margin-top:18px;gap:21.6px}
.page .metric+ .metric{padding-left:21.6px}
.page .metric .value{font-size:22.5px;letter-spacing:-0.72px;margin:7.2px 0 3.6px}
.page .metric .value small{font-size:11px}
.page .btn{border-radius:10.8px;font-size:11px;padding:9px 13.5px;gap:9px}
.page .metric .btn{margin-top:14.4px}
.page .input{border-radius:10.8px;padding:10.8px 12.6px;gap:10.8px;margin:10.8px 0}
.page .input input{font-size:23.4px}
.page .input span{font-size:11px}
.page .input button{border-radius:5.4px;padding:4.5px}
.page .values-row{gap:10.8px;margin:18px 0}
.page .values-row .value{font-size:16.2px;margin-top:4.5px}
.page .package{border-radius:15.3px;padding:19.8px}
.page .package .amount{font-size:22.5px;letter-spacing:-0.72px}
.page .package-grid{gap:7.2px;margin:19.8px 0 14.4px}
.page .package-grid strong{font-size:12.6px;margin-top:5.4px}
.page .bar{height:4.5px;border-radius:9px;margin:9.9px 0}
.page .bar span{border-radius:9px}
.page .contract-list{gap:14.4px}
.page .layout{gap:21.6px}
.page .balance-grid{gap:12.6px}
.page .balance-grid .balance{padding:14.4px;border-radius:10.8px}
.page .balance strong{font-size:19.8px;margin:7.2px 0 4.5px}
.page .reserve{border-radius:17.1px;padding:20.7px}
.page .reserve-number{font-size:24.3px;letter-spacing:-0.72px}
.page .reserve-grid{gap:14.4px;margin:19.8px 0 16.2px}
.page .reserve-grid>div+div{padding-left:14.4px}
.page .notice{padding:10.8px;border-radius:9px}
.page .market-grid{gap:16.2px}
.page .market-total{font-size:23.4px;margin:10.8px 0 1.8px;letter-spacing:-0.63px}
.page .market-total small{font-size:11px}
.page .order-row{gap:9px;padding:10.8px;margin-top:7.2px;border-radius:9px;font-size:11px}
.page .order-row small{margin-top:3.6px}
.page .order-list{margin:14.4px 0}
.page .order-note{margin-top:7.2px}
.page .action-row{gap:9px;margin-top:12.6px}
.page .team-stats{gap:12.6px;padding:17.1px 0}
.page .team-stats strong{font-size:22.5px;margin:4.5px 0}
.page .levels{height:279px;padding-right:7.2px;margin-top:16.2px}
.page .level{height:55.8px;font-size:11px}
.page .level .rate{font-size:11px;margin-left:9px}
.page .level small{margin-top:3.6px}
.page .bonus-row{padding:11.7px 0;font-size:11px}
.page .bonus-row strong{font-size:16.2px;margin-top:4.5px}
.page .hint{padding:10.8px 12.6px;border-radius:10.8px;margin-top:14.4px}
.page .board{width:990px;padding:31.5px 25.2px 25.2px}
.page .board-head{margin-bottom:22.5px}
.page .board-head h1{font-size:26.1px}
.page .board-head p{font-size:11px;margin-top:6.3px}
.page .board-columns{gap:18px}
.page .phone{border-radius:27px;padding:15.3px}
.page .phone .header{padding-bottom:19.8px}
.page .phone .brand{font-size:21.6px}
.page .phone .brand small{letter-spacing:1.44px}
.page .phone .wallet{padding:7.2px}
.page .phone .section{margin-bottom:21.6px}
.page .phone h2{font-size:18px}
.page .phone h3{font-size:13.5px}
.page .phone .section-title{margin-bottom:12.6px}
.page .phone .hero{padding:18px;border-radius:17.1px}
.page .phone .hero-value{font-size:33.3px;margin-top:14.4px}
.page .phone .hero-value small{font-size:11.7px}
.page .phone .hero-label{font-size:11px}
.page .phone .metrics{gap:12.6px;margin-top:14.4px}
.page .phone .metric+.metric{padding-left:12.6px}
.page .phone .metric .value{font-size:19.8px}
.page .phone .metric .btn{margin-top:10.8px}
.page .phone .card,.page .phone .reserve,.page .phone .package,.page .phone .flat-card{padding:15.3px}
.page .phone .values-row{gap:7.2px;margin:14.4px 0}
.page .phone .values-row .value{font-size:14.4px}
.page .phone .contract-list,.page .phone .market-grid{gap:11.7px}
.page .phone .package .amount{font-size:20.7px}
.page .phone .package-grid{margin:15.3px 0 10.8px;gap:4.5px}
.page .phone .package-grid strong{font-size:11px}
.page .phone .reserve-grid{gap:10.8px;margin-top:16.2px}
.page .phone .reserve-grid>div+div{padding-left:10.8px}
.page .phone .reserve-number{font-size:21.6px}
.page .phone .reserve-number small{margin-top:2.7px}
.page .phone .notice{padding:9px}
.page .phone .market-total{font-size:20.7px;margin-top:9px}
.page .phone .order-row{padding:9px}
.page .phone .input{padding:9px 10.8px}
.page .phone .input input{font-size:20.7px}
.page .phone .team-stats{gap:7.2px}
.page .phone .team-stats strong{font-size:20.7px}
.page .phone .balance-grid{gap:9px}
.page .phone .balance-grid .balance{padding:10.8px}
.page .phone .balance strong{font-size:18px}
.page .phone .levels{height:270px}
.page .phone .level{height:54px}
.page .phone .nav{margin-bottom:19.8px;padding-bottom:9px}
.page .phone .nav button{padding:6.3px 9px}
.page .screen-label{letter-spacing:1.62px;margin-bottom:10.8px}
.page .board-foot{margin-top:22.5px;padding-top:16.2px}
.page .toast{bottom:22.5px;border-radius:11.7px;padding:13.5px 18px;max-width:450px;font-size:11.7px}
.page .app-footer{padding-top:21.6px}
.page .modal-sim{margin-top:13.5px;padding:10.8px;border-radius:9px}
@media(max-width:700px){.page{padding:19.8px 17.1px 54px}
.page .header{padding-bottom:21.6px}
.page .hero{padding:20.7px}
.page .hero-value{font-size:36px}
.page .card,.page .reserve{padding:18px}
.page .nav button{padding:8.1px 10.8px}
.page .metrics{gap:13.5px}
.page .metric+.metric{padding-left:13.5px}
.page .metric .value{font-size:21.6px}
.page .balance-grid .balance{padding:12.6px}
.page .values-row{gap:7.2px}
.page .values-row .value{font-size:15.3px}}
.page .status-row{margin-bottom:18px;gap:10.8px}
.page .status-row button{padding:8.1px 10.8px;border-radius:8.1px}
.page .empty{padding:19.8px;font-size:11.7px;border-radius:16.2px}
.page #thirdweb-connect{min-height:39.6px}
.page .header{gap:12.6px}
.page .field-caption{margin-top:13.5px}
.page .team-section{max-width:684px;margin:0 auto 27px;padding-bottom:36px;font-size:14.4px}
.page .team-section h2{font-size:16.2px}
.page .team-section .section-heading{gap:14.4px}
.page .team-section .section-heading>span{font-size:11px}
.page .team-card{margin:21.6px 0;border-radius:18px;padding:21.6px}
.page .team-card:before{background-size:9.9px 9.9px}
.page .team-total-row{gap:18px}
.page .team-total-row #team-network-bonus{font-size:58.5px}
.page .team-symbol{width:61.2px;height:61.2px;min-height:61.2px;padding:3.6px}
.page .team-symbol svg{width:54px;height:54px}
.page .team-volume{gap:14.4px;padding-top:14.4px;margin-top:14.4px}
.page .team-volume>div{gap:7.2px}
.page .team-volume>div>span{font-size:11px}
.page .team-volume strong{font-size:21.6px;min-height:25.92px}
.page .team-card>.team-metadata{gap:10.8px;padding-top:13.5px;font-size:11px}
.page .team-section .micro{font-size:11px;margin:10.8px 0}
.page #team-levels{height:301.5px}
.page .team-level{gap:12.6px;padding:13.5px 0;height:60.3px}
.page .team-level>span{font-size:11.7px}
.page .team-level>div{font-size:11.7px}
.page .team-level strong{font-size:20.7px}
.page .team-level .bar{height:2.7px;margin:6.3px 0 0;border-radius:9px}
.page .team-level>.level-lock{width:32.4px;height:32.4px;border-radius:9px}
.page .level-lock svg{width:20.7px;height:20.7px}
.page #team-levels .level-heading{gap:7.2px}
.page .read-note{margin:12.6px 0}
.page .footer-status{margin-top:7.2px}
@media(max-width:560px){.page .team-section .section-heading h2{font-size:15.3px}
.page .team-volume{gap:10.8px}
.page .team-volume strong{font-size:18px;min-height:21.6px}}
.page .btn{font-size:14.4px;min-height:44px;padding:9px 18px;border-radius:11.7px}
.page .btn:not(#thirdweb-connect *):focus-visible{outline-offset:2.7px}
.page .metrics .btn{gap:25.2px;margin-top:9px}
.page #thirdweb-connect .thirdweb-connect-button{min-height:46.8px!important;min-width:153px!important;padding:12.6px 21.6px!important;font-size:14.4px!important;border-radius:11.7px!important}
@media(max-width:560px){.page #thirdweb-connect .thirdweb-connect-button{padding:9px 11.7px!important;font-size:11.7px!important}}
.page #thirdweb-connect .thirdweb-connect-button:focus-visible{outline-offset:3.6px}
html[data-input-modality="keyboard"] .page .input input:not(#thirdweb-connect *):focus-visible{outline-offset:2.7px}
.page .btn:not(#thirdweb-connect *):not(.green):not(.secondary):not(.ghost):focus-visible{outline-offset:3.6px}
.page .btn:not(#thirdweb-connect *){font-size:14.4px}
.page .reserve-number>small{margin-top:2.7px}
.page .sr-only{width:0.9px;height:0.9px;margin:-0.9px}
.page>.header .brand{width:223.2px}
@media(max-width:560px){.page>.header{gap:10.8px}
.page>.header .brand{max-width:198px}}
.page .team-symbol{flex:0 0 61.2px}
.page .team-level>.level-lock{flex:0 0 32.4px}
/* Compact header: logo and connection control no longer fill their entire mobile columns. */
.page>.header .brand{width:200px;max-width:45%;flex:0 1 200px}
.page>.header #thirdweb-connect{width:auto;min-width:0;max-width:48%}
.page>.header #thirdweb-connect .thirdweb-connect-button{min-width:148px!important;min-height:46.8px!important;padding:10px 16px!important;font-size:14.4px!important;line-height:1.25!important;max-width:100%!important}
@media(max-width:560px){.page>.header{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.page>.header .brand{width:148px;max-width:100%;min-width:0}.page>.header #thirdweb-connect{width:auto;max-width:min(144px,100%);min-width:0;justify-self:end}.page>.header #thirdweb-connect .thirdweb-connect-button{width:auto!important;min-width:0!important;max-width:100%!important;min-height:44px!important;padding:8px 12px!important;font-size:12px!important;line-height:1.25!important;white-space:normal!important}}

/* One shared mobile-width column at every viewport, including desktop.
   Keep the existing horizontal padding outside the 480px content column. */
.page{width:100%;max-width:530.4px}
@media(max-width:700px){.page{max-width:514.2px}}
.page>.layout{grid-template-columns:minmax(0,1fr)}
.page>.layout>div{min-width:0;width:100%;grid-column:1}
.page .layout .contract-list{grid-template-columns:minmax(0,1fr);min-width:0}
.page .team-section,.page #market{width:100%;max-width:none}

/* Keep the accessible heading and its exact box/gap; hide only its ink. */
.page #overview>.section-title>h2{opacity:0}

/* Thirdweb 5.122.1 Details.js: the first wrapper contains AccountAvatar or
   AccountBlobbie. Pin that flex item, not wallet/provider/token icons. */
.page>.header #thirdweb-connect .tw-connected-wallet>div:has(>.tw-connected-wallet__account_avatar){width:35px!important;height:35px!important;min-width:35px;aspect-ratio:1;flex:0 0 35px;border-radius:50%;overflow:hidden}
.page>.header #thirdweb-connect .tw-connected-wallet__account_avatar{width:100%!important;height:100%!important;aspect-ratio:1;flex-shrink:0;border-radius:50%;object-fit:cover}
.page>.header #thirdweb-connect .tw-connected-wallet>div:has(>.tw-connected-wallet__address){min-width:0;overflow:hidden}
.page>.header #thirdweb-connect .tw-connected-wallet__address,.page>.header #thirdweb-connect .tw-connected-wallet__balance{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Only the large network bonus separates its smaller currency symbol.
   Amount fitting keeps a readable floor, then permits exact horizontal reading. */
.page .team-total-row #team-network-bonus{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;white-space:nowrap;overflow-wrap:normal}
.page .team-bonus-number{display:block;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overflow-wrap:normal;scrollbar-width:thin;font-variant-numeric:tabular-nums}
.page .team-bonus-unit{flex:none;font-size:12.6px;font-weight:500;letter-spacing:0}

/* The new-contract maximum action is a stable, compact label in every locale. */
.page #package-max{flex:0 0 auto;min-width:44px;white-space:nowrap;word-break:normal;overflow-wrap:normal;padding-inline:9px;font-size:12px;line-height:1}