/* 3.5 / Motion system. Feedback is quick; page changes are soft and contained. */
:root{--motion-ease:cubic-bezier(.22,.8,.25,1);--motion-quick:160ms;--motion-base:260ms;--skeleton-base:color-mix(in srgb,var(--line) 66%,var(--paper));--skeleton-light:color-mix(in srgb,var(--surface) 70%,transparent)}
.btn,.icon-btn,.pref-btn,.filter-chip,.amount-presets button,.network-option,.studio-tab,.tier-card-select,.tier-stepper button,.headline-dot,.headline-pause,.notification-row,.user-menu button,.preference-options button{transition:background-color var(--motion-quick),border-color var(--motion-quick),color var(--motion-quick),box-shadow var(--motion-base),transform var(--motion-quick) var(--motion-ease)}
.btn{position:relative}.btn>.icon{transition:transform .22s var(--motion-ease)}
.btn:not(:disabled):hover>.icon:last-child{transform:translateX(2px)}
.btn:not(:disabled):active,.icon-btn:not(:disabled):active,.pref-btn:not(:disabled):active,.filter-chip:active,.amount-presets button:active,.network-option:active{transform:scale(.975)}
.icon-btn:hover,.pref-btn:hover{background:var(--brand-soft);border-radius:8px}
input,textarea,select{transition:border-color .18s,background-color .18s,box-shadow .18s}
input[type=checkbox]{transition:filter .18s,transform .14s;accent-color:var(--brand-strong)}
input[type=checkbox]:active{transform:scale(.88)}
.network-option .radio-indicator,.tier-card-check{transition:border-color .22s,background-color .22s,box-shadow .22s,transform .22s var(--motion-ease)}
.network-option.selected .radio-indicator{animation:choice-check .28s var(--motion-ease)}
.is-selected .tier-card-check>.icon{animation:choice-check .26s var(--motion-ease)}
.tap-host{position:relative;overflow:hidden;isolation:isolate}
.tap-wave{position:absolute;z-index:0;background:currentColor;opacity:0;border-radius:50%;pointer-events:none;user-select:none}
.is-operating{cursor:progress!important}.is-operating .spinner{flex-shrink:0}
.spinner{animation:spin .75s linear infinite}
.motion-tabs{position:relative}
.motion-tabs::after{content:"";height:2px;position:absolute;bottom:0;left:0;width:var(--tab-width,0);transform:translateX(var(--tab-x,0));background:var(--brand-strong);border-radius:2px;transition:transform .30s var(--motion-ease),width .30s var(--motion-ease);pointer-events:none}
.motion-tabs button.active,.motion-tabs a.active{border-bottom-color:transparent!important}
.motion-tabs button.active::after,.motion-tabs a.active::after{display:none!important}
.identity-checklist button:hover{color:var(--brand-strong);background:var(--brand-soft);padding-inline:7px}
.identity-checklist button{transition:padding .2s var(--motion-ease),background-color .2s,color .2s}
.account-setting-row,.connection-card,.notification-row,.work-table tbody tr,.op-table tbody tr{transition:background-color .2s,border-color .2s}
.account-setting-row:hover{background:color-mix(in srgb,var(--brand-soft) 23%,var(--surface))}
.identity-progress>i,.deposit-progress>span,.progress-fill,.seat-track-fill{transition:width .5s var(--motion-ease)}
.funding-receipt .receipt-total strong{transform-origin:bottom left}
.modal{border-radius:17px;border:1px solid var(--line);box-shadow:0 34px 100px -30px color-mix(in srgb,var(--lh-shadow) 29.020%,transparent),0 5px 18px -10px color-mix(in srgb,var(--lh-shadow) 20.000%,transparent);overflow-x:hidden}
.modal::backdrop,.drawer::backdrop{background:rgba(var(--lh-shadow-rgb),.25);backdrop-filter:blur(5px);animation:layer-veil-in .22s ease-out both}
.modal.motion-exit::backdrop,.drawer.motion-exit::backdrop{animation:layer-veil-out .17s ease-in both}
html[data-theme=dark] .modal::backdrop,html[data-theme=dark] .drawer::backdrop{background:rgba(var(--lh-shadow-rgb),.57)}
.dialog-top h2{letter-spacing:-.035em;font-size:21px}
.modal>.actions .btn{min-height:41px}
.toast{animation:toast-arrive .32s var(--motion-ease) both;box-shadow:0 9px 30px -16px color-mix(in srgb,var(--lh-shadow) 25.098%,transparent);border-radius:10px}
.receipt-status-symbol .icon{animation:choice-check .45s var(--motion-ease)}
.deposit-steps .done .circle .icon{animation:choice-check .3s var(--motion-ease)}
.deposit-steps .active .circle{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 8%,transparent)}
@keyframes choice-check{from{transform:scale(.65);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes layer-veil-in{from{background-color:transparent;backdrop-filter:blur(0)}to{backdrop-filter:blur(5px)}}
@keyframes layer-veil-out{to{background-color:transparent;backdrop-filter:blur(0)}}
@keyframes toast-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* Page-shaped placeholders. Text is not part of the decorative skeleton tree. */
.main[aria-busy=true]{cursor:progress}
.page-skeleton{min-height:calc(100svh - 145px);padding-bottom:26px;position:relative}
.sk{background:var(--skeleton-base);display:block;position:relative;overflow:hidden;border-radius:6px;flex-shrink:0}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--skeleton-light),transparent);animation:skeleton-shimmer 1.65s ease-in-out infinite}
.sk-line{height:10px;width:65%;margin:12px 0}.sk-short{width:32%}.sk-kicker{height:7px;width:177px;margin-bottom:22px}
.sk-title{height:54px;width:65%;margin-bottom:19px;border-radius:8px}.sk-copy{height:11px;width:47%;margin:14px 0}
.sk-button{width:119px;height:37px;border-radius:8px}.sk-avatar{width:85px;height:85px;border-radius:22px}
.sk-hero{padding:34px 0 29px;position:relative}.sk-hero .sk-copy+.sk-copy{width:38%}
.sk-hero::before{content:"";position:absolute;inset:-30px -36px -50px;background:radial-gradient(ellipse at 75% 0,var(--wash-mint),transparent 68%);z-index:-1;pointer-events:none}
.sk-home-hero{height:348px;padding-top:38px}.sk-home-hero .sk-title{height:61px;width:63%;margin-bottom:7px}.sk-home-hero .sk-title:nth-child(3){width:73%}.sk-home-hero .sk-copy{margin-top:27px}.sk-home-hero .sk-button{margin-top:24px}
.sk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:9px 0 35px}.sk-tile{height:171px;border-radius:12px}
.sk-section-label{height:17px;width:210px;margin:27px 0 20px}
.sk-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sk-card{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);padding:24px;border-radius:13px;min-height:283px}
.sk-card-top{display:flex;gap:13px;align-items:center;margin-bottom:25px}.sk-card-top>.sk{width:33px;height:33px;border-radius:9px}.sk-card-top>div{flex:1}.sk-card .sk-card-title{height:16px;width:88%;margin-bottom:16px}.sk-card .sk-card-meta{height:20px;width:40%;margin-top:28px;margin-bottom:23px}.sk-card .sk-card-bar{height:5px;width:100%;margin-top:18px}
.sk-market-hero{padding:36px 0 32px;min-height:210px}.sk-market-hero .sk-title{width:62%;margin-bottom:19px}.sk-market-hero .sk-copy{width:58%}
.sk-toolbar{display:flex;gap:10px;align-items:center;margin:5px 0 22px}.sk-toolbar .sk{height:32px;width:82px}.sk-toolbar .sk:last-child{margin-left:auto}
.sk-meta{width:142px;height:10px;margin:6px 0 24px}
.sk-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:12px;padding:22px 0;margin:1px 0 27px}
.sk-metric{padding:0 24px;border-right:1px solid var(--line)}.sk-metric:last-child{border:0}.sk-metric .sk-line{height:9px;width:85px;margin:0}.sk-metric .sk-number{height:32px;width:65px;margin-top:19px}.sk-metric .sk-caption{height:6px;width:100px;margin-top:12px}
.sk-profile-hero{height:254px;padding-top:32px}.sk-person{display:flex;align-items:center;gap:25px;margin-top:31px}.sk-person .sk-title{width:220px;height:40px}.sk-person .sk-copy{width:160px}.sk-person .sk-copy:last-child{width:270px}
.sk-columns{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;align-items:start}
.sk-panel{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 70%,transparent);padding:24px;min-height:245px}
.sk-panel-title{height:15px;width:135px;margin-bottom:27px}.sk-row{display:flex;gap:14px;align-items:center;min-height:77px;padding:16px 0;border-top:1px solid var(--line)}.sk-row>.sk{height:28px;width:28px;border-radius:7px}.sk-row>div{flex:1}.sk-row .sk-line{width:74%;height:9px}.sk-row .sk-line:last-child{width:45%;height:7px}
.sk-tabs{height:40px;display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:21px}.sk-tabs .sk{height:10px;width:51px}
.sk-side-wallet{padding:25px;height:222px;border-radius:13px;background:color-mix(in srgb,var(--brand-line) 54%,var(--paper));margin-bottom:20px}.sk-side-wallet .sk-title{height:34px;width:73%;margin-top:27px}.sk-side-wallet .sk-button{margin-top:22px;width:100%}
.sk-funding-hero{height:199px;padding-top:20px}.sk-funding-hero .sk-kicker{margin-bottom:40px}.sk-funding-hero .sk-title{height:43px;width:65%}
.sk-funding-columns{grid-template-columns:minmax(0,1fr) 326px}.sk-form{padding:26px;min-height:664px}.sk-form .sk-panel-title{margin-bottom:36px}.sk-form-section{padding:0 0 23px;margin-bottom:23px;border-bottom:1px solid var(--line)}.sk-networks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.sk-network{height:75px;border-radius:9px}.sk-amount{height:66px;width:100%;margin-top:24px}.sk-presets{display:flex;gap:10px;margin-top:17px}.sk-presets .sk{height:33px;flex:1}.sk-funding-note{min-height:468px;background:color-mix(in srgb,var(--brand-line) 54%,var(--paper))}.sk-funding-note .sk-title{height:55px;width:65%;margin-top:36px;margin-bottom:35px}.sk-funding-note .sk-line{margin-block:24px;width:90%}.sk-funding-note .sk-button{width:100%;margin-top:32px}
.sk-table{border:1px solid var(--line);background:var(--surface);border-radius:12px;overflow:hidden}.sk-table-head,.sk-table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:22px;border-bottom:1px solid var(--line)}.sk-table-head{background:var(--soft)}.sk-table-row{min-height:87px;align-items:center}.sk-table-row .sk{height:13px}.sk-table-row .sk:first-child{width:80%}
.sk-studio{display:grid;grid-template-columns:125px minmax(0,1fr) 230px;gap:20px}.sk-studio .sk-panel{min-height:435px}.sk-studio-nav .sk-line{width:75%;margin-bottom:24px}.sk-auth{padding:38px;max-width:440px;margin:45px auto}.sk-auth .sk{margin-bottom:28px}.sk-auth .sk-title{width:90%}.sk-auth .sk-button{width:100%;height:44px}
.route-loading-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.route-progress{position:fixed;z-index:85;top:62px;left:var(--side);right:0;height:2px;background:transparent;overflow:hidden;pointer-events:none}.route-progress:after{content:"";display:block;width:35%;height:100%;background:linear-gradient(90deg,transparent,var(--brand),var(--brand-cyan));animation:route-progress 1.3s ease-in-out infinite}
.route-error{padding:75px 25px;min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.route-error>.icon{width:30px;height:30px;color:var(--brand-strong);margin-bottom:22px}.route-error h1{font-size:30px}.route-error p{color:var(--muted);font-size:13px;max-width:400px}.route-error .button-row{margin-top:17px}
@keyframes skeleton-shimmer{0%{transform:translateX(-100%)}65%,100%{transform:translateX(100%)}}
@keyframes route-progress{0%{transform:translateX(-105%)}100%{transform:translateX(390%)}}
@media(max-width:1180px){.sk-columns{grid-template-columns:minmax(0,1fr) 260px;gap:20px}.sk-funding-columns{grid-template-columns:minmax(0,1fr) 290px}.sk-studio{grid-template-columns:minmax(0,1fr) 230px}.sk-studio-nav{display:none}.sk-market-hero .sk-title{width:69%}.sk-metric{padding-inline:19px}}
@media(max-width:900px){.sk-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-columns{grid-template-columns:1fr}.sk-funding-columns{grid-template-columns:minmax(0,1fr) 270px}.sk-studio{grid-template-columns:1fr}.sk-studio>aside{display:none}.sk-profile-hero{height:285px}.sk-networks{grid-template-columns:1fr}}
@media(max-width:720px){.page-skeleton{min-height:calc(100svh - 130px)}.sk-hero::before{inset:-20px -16px -40px}.sk-home-hero{height:315px;padding-top:28px}.sk-kicker{height:6px;width:160px;margin-bottom:25px}.sk-home-hero .sk-title{height:34px;width:74%;margin-bottom:10px}.sk-home-hero .sk-title:nth-child(3){width:95%}.sk-home-hero .sk-copy{width:86%;height:9px;margin-top:24px}.sk-home-hero .sk-button{margin-top:26px}.sk-tiles{gap:9px;margin-top:0;margin-bottom:27px}.sk-tile{height:116px;border-radius:10px}.sk-card-grid{grid-template-columns:1fr;gap:14px}.sk-card{min-height:268px;padding:22px}.sk-market-hero{min-height:0;height:192px;padding:28px 0 24px}.sk-market-hero .sk-title{height:34px;width:97%;margin-bottom:18px}.sk-market-hero .sk-copy{width:60%;height:8px}.sk-toolbar{gap:8px;margin-bottom:20px}.sk-toolbar .sk{width:55px;height:30px}.sk-toolbar .sk:nth-last-child(2){display:none}.sk-meta{height:8px}.sk-profile-hero{height:280px;padding-top:26px}.sk-person{gap:18px;align-items:flex-start}.sk-avatar{width:65px;height:65px;border-radius:18px}.sk-person .sk-title{height:30px;width:172px}.sk-person .sk-copy{width:130px;height:8px}.sk-person .sk-copy:last-child{width:194px}.sk-metrics{padding:17px 0;margin-bottom:24px}.sk-metric{padding-inline:12px}.sk-metric .sk-line{height:8px;width:90%}.sk-metric .sk-number{height:25px;width:68%;margin-top:14px}.sk-metric .sk-caption{display:none}.sk-columns,.sk-funding-columns{grid-template-columns:1fr}.sk-tabs{gap:24px;height:35px;margin-bottom:18px}.sk-tabs .sk{width:36px;height:8px}.sk-panel{padding:19px}.sk-row{min-height:77px}.sk-funding-hero{height:211px;padding-top:18px}.sk-funding-hero .sk-title{width:95%;height:33px}.sk-funding-hero .sk-copy{width:71%;height:9px}.sk-form{padding:20px;min-height:650px}.sk-networks{grid-template-columns:1fr 1fr}.sk-network{height:66px}.sk-funding-note{min-height:465px}.sk-table-head{display:none}.sk-table-row{grid-template-columns:2fr 1fr;gap:17px;padding:22px;min-height:112px}.sk-auth{padding:20px;margin:30px auto}.route-progress{top:60px;left:0}.route-error{padding:40px 12px}.route-error h1{font-size:25px}}
/* Match the real list density at every breakpoint; changing pages never swaps
   a two-column mobile list for a single giant placeholder. */
[data-skeleton="home"] .sk-card-grid,[data-skeleton="marketplace"] .sk-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sk-market-hero{min-height:0;height:203px}
@media(max-width:1360px){[data-skeleton="marketplace"] .sk-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:880px){[data-skeleton="home"] .sk-card-grid,[data-skeleton="marketplace"] .sk-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.sk-card-grid{gap:10px}.sk-card{padding:16px 13px;min-height:275px}.sk-card-top{gap:8px;margin-bottom:23px}.sk-card-top>.sk{width:24px;height:24px;flex:none}.sk-card .sk-card-meta{width:65%}.sk-market-hero{height:192px}}
@media(max-width:370px){.sk-card{min-height:249px;padding:13px 11px}.sk-card-grid{gap:8px}}
/* Respect both system and in-app reduced motion, including skeletons and JS. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.sk::after,.route-progress::after,.tap-wave{animation:none!important;display:none}.spinner{animation:spin 1.5s linear infinite!important}.motion-tabs::after{transition:none!important}}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.reduce-motion .sk::after,html.reduce-motion .route-progress::after,html.reduce-motion .tap-wave{display:none;animation:none!important}
html.reduce-motion .spinner{animation:spin 1.5s linear infinite!important}