html,body{min-height:100%;overflow:hidden}html.dashboard-active{overflow-x:clip;overflow-y:auto;scrollbar-gutter:stable}.public-home{height:calc(100vh - 76px);min-height:520px;display:flex!important;flex-direction:column}.public-home .hero{width:100%;max-width:1240px;flex:1;min-height:0;height:auto;padding-top:35px;padding-bottom:25px}.public-home .hero-proof{margin-top:38px}.public-home .trust-strip{width:100%;flex:none}.public-home .features,.public-home .workflow,.public-home .api-banner{display:none}.site-footer{height:38px;flex:none;max-width:1240px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid #ffffff12;color:#707691;font-size:9px}.site-footer a{color:#858bd0;text-decoration:none}.site-footer a:hover{text-decoration:underline}@media(max-height:680px) and (min-width:561px){.public-home .hero{padding-top:20px}.public-home .hero h1{font-size:48px;margin:15px 0}.public-home .hero-proof{margin-top:24px}.public-home .hero-visual{height:360px}.public-home .signal-card{transform:scale(.82) rotate(-7deg)}.public-home .float-a{bottom:20px}.public-home .float-b{top:22px}}@media(max-width:560px){html{min-height:100%;overflow-x:clip;overflow-y:auto}body{min-height:100%;overflow:visible}.public-home{height:auto;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}.public-home .hero{flex:none;min-height:0;padding-top:32px;padding-bottom:30px}.public-home .trust-strip{display:none}.site-footer{height:54px;padding:0 20px;display:block;text-align:center;line-height:54px}.site-footer span{display:none}}
body.day-mode .site-footer{border-top-color:#e1e3eb;color:#9298a8}body.day-mode .site-footer a{color:#5c63ce}

/* Desktop workspace: the tool navigation is a floating card beside the content column. */
@media(min-width:761px){
  /* Keep compact desktop layouts clear of the navigation. */
  .dashboard{width:100%;display:grid;grid-template-columns:228px minmax(0,1fr);column-gap:16px;min-height:calc(100vh - 76px);padding:30px max(18px,calc((100vw - 1760px)/2));box-sizing:border-box}
  /* Fixed instead of sticky: the card stays vertically centered in the area under the header
     on every desktop size, including short/small displays. Height follows the content so the
     sidebar never grows an inner scrollbar; the track is hidden as a last-resort fallback. */
  .dash-sidebar{position:fixed;top:calc((100vh + 76px)/2);left:max(18px,calc((100vw - 1760px)/2));z-index:var(--z-sidebar);width:228px;height:auto;max-height:calc(100vh - 92px);padding:22px 16px 16px;border:1px solid #dedee3;border-radius:16px;background:#ffffffeb;box-shadow:0 14px 36px #1d254014;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;transform:translateY(-50%)}
  .dash-sidebar::-webkit-scrollbar{width:0;height:0;display:none}
  .dash-content{grid-column:2;width:100%;min-width:0;max-width:none;margin:0;padding:0 16px 30px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Microsoft YaHei",sans-serif;box-sizing:border-box}.dash-content>.workspace-page{display:block;width:100%;max-width:none;margin:0;box-sizing:border-box}
  .public-header{padding-inline:max(34px,calc((100vw - 1280px)/2 + 16px))}
  .public-home .hero{max-width:none;padding-inline:max(34px,calc((100vw - 1280px)/2 + 16px))}
  body:not(.day-mode) .dash-sidebar{border-color:#292c38;box-shadow:0 14px 36px #0005}
}
/* On wide displays, center the workspace against the viewport instead of the sidebar. */
@media(min-width:1800px){
  .dashboard{display:block;padding:30px max(18px,calc((100vw - 1760px)/2))}
  .dash-content{display:block;max-width:1280px;margin:0 auto;padding:0 16px 30px}
}
#confirm-label[hidden] { display:none !important; }
.auth-note[data-kind="error"]{display:block;color:#b42318!important;background:#fff0ed;border:1px solid #ffc9c1;border-radius:10px;padding:12px 14px;line-height:1.6;text-align:left}.auth-submit:disabled{opacity:.65;cursor:wait}
.sidebar-nav a { text-decoration:none; }
.sidebar-nav [hidden] { display:none !important; }
.sidebar-group{display:grid;gap:5px}.sidebar-group-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px 0 0;border-radius:10px;color:#3a3a3c;font:500 16px -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}.sidebar-group-title{display:flex;align-items:center;gap:12px;min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.sidebar-group-title>span{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#fff;color:#6469dd;box-shadow:0 1px 4px #00000010;font-size:14px}.sidebar-group-title b{font-size:16px;font-weight:600}.sidebar-nav .sidebar-collapse-toggle{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;padding:0;border:1px solid #e2e7f0;border-radius:7px;background:linear-gradient(#fff,#f7f9fc);color:#3565df;box-shadow:0 2px 5px #1d3b7510;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.sidebar-collapse-toggle i{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(2px) rotate(225deg);transition:transform .2s ease}.sidebar-collapse-toggle:hover{border-color:#b8c9f5!important;background:#f1f5ff!important;box-shadow:0 3px 8px #1d3b7518}.sidebar-collapse-toggle[aria-expanded="false"] i{transform:translateY(-2px) rotate(45deg)}.sidebar-subnav{display:grid;gap:5px;padding-left:18px}.sidebar-subnav>button{position:relative}.sidebar-subnav>button::before{content:"";position:absolute;left:-7px;width:3px;height:18px;border-radius:3px;background:#d9dce6}.sidebar-subnav>button.active::before{background:#6469dd}body:not(.day-mode) .sidebar-group-head{color:#c9ccd8}body:not(.day-mode) .sidebar-group-title>span{background:#202330;color:#8fa5ff;box-shadow:none}body:not(.day-mode) .sidebar-nav .sidebar-collapse-toggle{border-color:#343746;background:linear-gradient(#202330,#191c26);color:#8fa5ff;box-shadow:none}body:not(.day-mode) .sidebar-collapse-toggle:hover{border-color:#4a5680!important;background:#252938!important}body:not(.day-mode) .sidebar-subnav>button::before{background:#343746}body:not(.day-mode) .sidebar-subnav>button.active::before{background:#8fa5ff}@media(max-width:760px){.sidebar-group-head{justify-content:center;padding:0}.sidebar-group-head b{display:none}.sidebar-group-title{gap:0}.sidebar-subnav{padding-left:0}.sidebar-subnav>button::before{display:none}}
.wallet-sidebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding:14px 12px;border-radius:10px;background:#686de20c;color:#6469dd;font-size:13px}.wallet-sidebar>div{display:grid;gap:5px}.wallet-sidebar>div>span{display:block}.wallet-sidebar strong{font-size:18px}.wallet-sidebar button{padding:6px 10px;border:1px solid #e43b16;border-radius:6px;background:#fff;color:#d93412;font:600 12px inherit;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}.wallet-sidebar button:hover{background:#e43b16;color:#fff;transform:translateY(-1px)}body:not(.day-mode) .wallet-sidebar button{border-color:#ff8063;background:#251b1c;color:#ff9a84}body:not(.day-mode) .wallet-sidebar button:hover{background:#e43b16;color:#fff}.wallet-page{color:var(--mirror-ink,#20232b)}.wallet-page>p{color:var(--mirror-muted,#818692)}.wallet-cards{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px;margin:24px 0}.wallet-cards article,.wallet-details{background:var(--mirror-card,#fff);border:1px solid var(--mirror-line,#e6e8ef);border-radius:16px;padding:24px}.wallet-cards article>span{color:var(--mirror-muted,#818692);font-size:14px}.wallet-cards article>strong{display:block;font-size:30px;margin-top:14px}.wallet-cards small{font-size:14px;font-weight:400}.wallet-cards p{line-height:1.9;font-size:14px;margin:10px 0 0}.wallet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.wallet-toolbar h2{font-size:20px}.wallet-details p{font-size:13px;color:var(--mirror-muted,#818692);line-height:1.8}.wallet-details button{font:inherit;padding:9px 14px;border:1px solid var(--mirror-line,#e6e8ef);border-radius:9px;background:var(--mirror-inset,#f5f6fa);color:inherit;cursor:pointer}.wallet-details button[hidden]{display:none}.wallet-table-wrap{overflow:auto}.wallet-details table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:13px}.wallet-details th,.wallet-details td{padding:14px 12px;border-bottom:1px solid var(--mirror-line,#e6e8ef);text-align:left}.wallet-details th{color:var(--mirror-muted,#818692);font-weight:500}#wallet-more{margin-top:16px}body:not(.day-mode) .wallet-page{color:#f5f5f7}body:not(.day-mode) .wallet-cards article,body:not(.day-mode) .wallet-details{background:#151821;border-color:#292c38}body:not(.day-mode) .wallet-details button{background:#202330;border-color:#343746}body:not(.day-mode) .wallet-details th,body:not(.day-mode) .wallet-details td{border-color:#292c38}@media(max-width:760px){.wallet-cards{grid-template-columns:1fr}.wallet-cards article,.wallet-details{padding:18px}.wallet-sidebar{padding:10px 4px;font-size:11px}.wallet-sidebar strong{font-size:14px}}
.wallet-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:var(--mirror-muted,#818692);font-size:13px}.wallet-pagination div{display:flex;gap:9px}.profile-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 18px;padding:22px 24px;border:1px solid var(--mirror-line,#e6e8ef);border-radius:16px;background:var(--mirror-card,#fff)}.profile-summary small{color:var(--mirror-muted,#818692);letter-spacing:.13em}.profile-summary h2{margin:8px 0 4px;font-size:23px}.profile-summary p{margin:0;color:var(--mirror-muted,#818692);font-size:14px}.profile-summary-actions{display:flex;gap:10px}.profile-summary-actions button{font:inherit;padding:10px 14px;border:1px solid var(--mirror-line,#e6e8ef);border-radius:9px;background:var(--mirror-inset,#f5f6fa);color:inherit;cursor:pointer}.wallet-page dialog{width:min(440px,92vw);padding:30px;border:1px solid #e6e8ef;border-radius:18px;background:#fff;color:#20232b;box-shadow:0 24px 80px #16233b30}.wallet-page dialog::backdrop{background:#17264060}.recharge-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;background:#17264066;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.recharge-backdrop[hidden]{display:flex}.recharge-backdrop.show{opacity:1;visibility:visible}.recharge-modal{position:relative;width:min(360px,100%);padding:28px 26px 24px;border:1px solid #e2e5ee;border-radius:20px;background:#fff;color:#20232b;text-align:center;box-shadow:0 24px 80px #16233b35;transform:translateY(8px) scale(.98);transition:transform .2s ease}.recharge-backdrop.show .recharge-modal{transform:none}.recharge-close{position:absolute;top:10px;right:14px;border:0;background:transparent;color:#8a91a0;font-size:24px;line-height:1;cursor:pointer}.recharge-icon{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 12px;border-radius:12px;background:#fff1ed;color:#e43b16;font-size:22px;font-weight:700}.recharge-modal h2{margin:0 0 8px;font-size:20px}.recharge-modal p{margin:0;color:#737b89;font-size:14px;line-height:1.7}.recharge-modal img{display:block;width:220px;height:220px;object-fit:cover;margin:18px auto 12px;border-radius:10px}.recharge-modal small{color:#9299a7;font-size:14px}.recharge-confirm-actions{display:flex;gap:12px;margin-top:24px}.recharge-confirm-actions button{flex:1;padding:11px 12px;border:1px solid #e2e5ee;border-radius:10px;background:#f5f6fa;color:#555a67;font:inherit;font-size:14px;cursor:pointer}.recharge-confirm-actions button[data-enter]{border-color:#6870ee;background:#6870ee;color:#fff}.recharge-confirm-actions button:hover{filter:brightness(.95)}.recharge-confirm-actions button:focus-visible{outline:2px solid #6870ee;outline-offset:3px}body:not(.day-mode) .recharge-confirm-actions button[data-stay]{border-color:#343746;background:#202330;color:#e1e4eb}body:not(.day-mode) .recharge-backdrop{background:#070912b8}body:not(.day-mode) .recharge-modal{border-color:#343746;background:#151821;color:#f5f5f7}body:not(.day-mode) .recharge-modal p,body:not(.day-mode) .recharge-modal small{color:#9296a7}.wallet-page dialog h2{margin:0 0 8px}.wallet-page dialog p{color:#727a88;line-height:1.7}.wallet-page dialog label{display:grid;gap:8px;margin:18px 0;color:#5f6777;font-size:14px}.wallet-page dialog input{width:100%;border:1px solid #dce0e8;border-radius:9px;padding:11px 13px;background:#fff;color:#20232b;font:inherit}.wallet-page dialog .actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}.wallet-page dialog button{font:inherit;border:1px solid #dce0e8;border-radius:9px;padding:10px 14px;background:#fff;cursor:pointer}.wallet-page dialog .primary{background:#0773e8;border-color:#0773e8;color:#fff}.wallet-page dialog [role="alert"]{color:#bd4e32;min-height:1.4em}body:not(.day-mode) .profile-summary{background:#151821;border-color:#292c38}body:not(.day-mode) .profile-summary-actions button{background:#202330;border-color:#343746}@media(max-width:760px){.profile-summary{align-items:flex-start;flex-direction:column}.wallet-pagination{align-items:flex-start;gap:12px;flex-direction:column}}

/* Move navigation above the workspace only when its floating layout would overlap the content. */
/* The base `html,body{overflow:hidden}` makes <body> a scroll container, so the sticky nav would
   resolve its `top` against body's padded box (adding the 76px header padding again) and overlap
   the content. Restore the document scroller so `top` is measured from the viewport. */
body.workspace-nav-top{overflow:visible}
body.workspace-nav-top .dashboard{display:block;min-height:calc(100vh - 76px);padding:0 14px;box-sizing:border-box}
body.workspace-nav-top .dash-sidebar{position:sticky;inset:auto;top:76px;z-index:var(--z-sidebar);width:auto;height:auto;max-height:none;padding:8px 0;border:0;border-bottom:1px solid #292c38;border-radius:0;background:transparent!important;box-shadow:none;overflow:hidden;transform:none}
body.workspace-nav-top .sidebar-title,body.workspace-nav-top .sidebar-group-head,body.workspace-nav-top .wallet-sidebar,body.workspace-nav-top .sidebar-foot{display:none}
body.workspace-nav-top .sidebar-nav{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
body.workspace-nav-top .sidebar-nav::-webkit-scrollbar{display:none}
body.workspace-nav-top .sidebar-group,body.workspace-nav-top .sidebar-subnav,body.workspace-nav-top .sidebar-subnav[hidden]{display:contents!important}
body.workspace-nav-top .sidebar-nav :is(button,a){width:auto;min-height:38px;flex:0 0 auto;gap:7px;padding:8px 10px;border:1px solid #343746;border-radius:9px;background:#1b1e29;color:#cbd0df;font-size:13px;white-space:nowrap}
body.workspace-nav-top .sidebar-nav :is(button,a).active{background:#303652;color:#fff;border-color:#555f9d}
body.workspace-nav-top .sidebar-nav :is(button,a) span{width:18px;height:18px;border-radius:6px;font-size:12px}
body.workspace-nav-top .dash-content{max-width:none;padding:18px 0 30px}
/* Match the compact header (64px) so the tab bar hugs it and keeps equal spacing above/below. */
@media(max-width:560px){body.workspace-nav-top .dash-sidebar{top:64px}}
/* Align the storefront header with the top navigation and the workspace cards. */
body.workspace-nav-top .public-header{padding-inline:14px}
body.workspace-nav-top .public-header .brand{margin-left:0}
body.workspace-nav-top .public-header .header-actions{margin-right:0}
body.workspace-nav-top .mirror-page{width:100%;max-width:none;transform:none}

/* Day mode must override the compact navigation's dark defaults. */
body.workspace-nav-top.day-mode .dash-sidebar{background:#fff;border-bottom-color:#e2e5ee}
body.workspace-nav-top.day-mode .sidebar-nav :is(button,a){border-color:#dfe3ed;background:#fff;color:#3a3d4a;box-shadow:0 1px 2px #30375b0d}
body.workspace-nav-top.day-mode .sidebar-nav :is(button,a).active{background:#eef0ff;color:#4f57c8;border-color:#c7cdf5}
body.workspace-nav-top.day-mode .sidebar-nav :is(button,a) span{background:#f1f3ff;color:#6269d8;box-shadow:none}
body.workspace-nav-top.day-mode .sidebar-nav :is(button,a).active span{background:#6269d8;color:#fff}

/* Keep the storefront header visible without covering the workspace. */
.public-header{position:fixed;inset:0 0 auto;z-index:var(--z-header)}
body{padding-top:76px}
@media(max-width:560px){body{padding-top:64px}}

/* Perf: backdrop-filter on the fixed header and the sticky sidebar forces the browser to re-blur
   the whole area on every scroll frame. Their backgrounds are already 85%~92% opaque, so the blur
   is barely visible — dropping it removes continuous compositing work on desktop with almost no
   visual difference. The dark header gets a slightly more solid base to stay readable over content. */
.public-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#080a13f2}
.dash-sidebar{-webkit-backdrop-filter:none;backdrop-filter:none}
.auth-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Personal account dialogs share the workspace night palette. */
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog){color-scheme:dark;background:#151821;border-color:#343746;color:#f5f5f7;box-shadow:0 24px 80px #0006}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog)::backdrop{background:#070912b8;backdrop-filter:blur(3px)}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) h2{color:#f5f5f7}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) p{color:#9296a7}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) label{color:#c4c7d2}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) input{background:#202330;border-color:#343746;color:#f5f5f7}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) input::placeholder{color:#9296a7}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) button:not(.primary){background:#202330;border-color:#343746;color:#e1e4eb}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) button:not(.primary):hover{background:#2a2e3c}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) .primary:hover{background:#0965c9;border-color:#0965c9}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) button:focus-visible{outline:3px solid #89baff;outline-offset:3px}
body:not(.day-mode) .wallet-page :is(#profile-dialog,#password-dialog) [role="alert"]{color:#ff9b87}

/* Mobile: drop repaint-heavy effects on the fixed header and hero, they make touch scrolling stutter on low-end phones. */
@media(max-width:560px){
  .public-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#080a13f2}
  body.day-mode .public-header{background:#fffffff5}
  .hero-visual .float-card{animation:none}
  .public-home .visual-glow{filter:blur(30px);opacity:.7}
}

/* Short desktop displays (small monitors / scaled laptops): the navigation card is taller than the
   area under the header, so tighten its spacing to keep every item visible instead of letting the
   content overflow behind the hidden scrollbar. */
@media(min-width:761px) and (max-height:740px){
  .dash-sidebar{padding:14px 14px 12px}
  .sidebar-title{padding:0 12px 10px}
  .sidebar-group{gap:3px}
  .sidebar-group-head{min-height:36px}
  .sidebar-nav,.sidebar-subnav{gap:3px}
  .sidebar-nav :is(button,a){padding:8px 12px}
  .wallet-sidebar{margin-top:12px;padding:10px 12px}
  .sidebar-foot{padding:10px 12px 0}
}
