/* The desktop base.css and home.css own the workspace palette, navigation and icons. */
[hidden]{display:none!important}
#workbench .workspace-retention{margin:0;color:var(--home-muted);font-size:10px;line-height:1.6;overflow-wrap:anywhere}
button,input{font:inherit}
.loading{height:100dvh;display:grid;align-content:center;justify-items:center;gap:20px;color:var(--home-muted)}
.brand-mark{display:flex;align-items:center;gap:12px;color:var(--home-heading);font-size:24px;font-weight:650}
.brand-mark img{width:43px;height:43px;object-fit:contain;border-radius:12px}
.eyebrow{font-size:9px;letter-spacing:2px;color:var(--home-muted);font-weight:600}
/* Login follows the same daytime/nighttime palette as the workspace. */
body:has(.login-view:not([hidden])){overflow:auto}
.login-view{min-height:100dvh;display:grid;grid-template-columns:1fr 430px;gap:8vw;align-items:center;max-width:1250px;padding:100px 55px 90px;margin:auto;position:relative}
.back-home{position:absolute;top:35px;left:55px;font-size:12px;color:var(--home-muted)}
.login-theme{position:absolute;top:27px;right:55px}
.login-copy .eyebrow{margin-top:50px}
.login-copy h1{font-size:clamp(43px,4.5vw,64px);letter-spacing:-3px;line-height:1.28;margin:20px 0;color:var(--home-heading)}
.login-copy>p:not(.eyebrow){font-size:14px;line-height:2;color:var(--home-muted)}
.login-tags{display:flex;gap:10px;margin-top:36px}
.login-tags span{border:1px solid var(--home-line);border-radius:30px;padding:8px 14px;font-size:11px;color:var(--home-muted)}
.login-card{padding:34px;background:var(--home-panel-solid);border:1px solid var(--home-line);border-radius:20px;box-shadow:var(--home-shadow)}
.login-tabs{display:flex;gap:28px;border-bottom:1px solid var(--home-line);margin-bottom:28px}
.login-tabs button{border:0;background:none;color:var(--home-muted);padding:0 2px 13px}
.login-tabs .active{color:var(--home-heading);border-bottom:2px solid var(--home-accent)}
.login-card h2{font-size:23px;letter-spacing:-.5px;margin:0 0 10px}
.login-card>p{font-size:12px;color:var(--home-muted);margin:0 0 28px}
.login-card label{display:block;font-size:12px;color:var(--home-text);margin:18px 0}
.login-card input:not([type=checkbox]){width:100%;height:43px;margin-top:8px;border:1px solid var(--home-line);border-radius:8px;padding:0 12px;background:var(--home-background);outline:none}
.login-card input:focus{border-color:var(--home-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--home-accent) 12%,transparent)}
.primary{width:100%;height:45px;border:0;border-radius:8px;background:var(--home-primary);color:var(--home-primary-text);font-size:13px;font-weight:600;margin-top:12px}
.primary:hover{filter:brightness(.95)}
.primary span{float:right}
.forgot{display:block;margin:0 0 0 auto;border:0;background:none;color:var(--home-muted);font-size:11px}
.code-row{display:flex;align-items:end;gap:8px}
.code-row input{min-width:0}
.code-row button{white-space:nowrap;height:43px;border:1px solid var(--home-line);border-radius:8px;background:var(--home-soft);padding:0 10px;color:var(--home-accent);font-size:11px}
.login-card label.agreement{display:flex;align-items:center;gap:4px;font-size:10px}
.agreement a{color:var(--home-accent)}
.login-card small{font-size:10px;color:var(--home-muted)}
.login-card p.status{font-size:12px;min-height:18px;margin:14px 0;color:var(--home-danger)}
.login-footer{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:center;gap:20px;font-size:10px;color:var(--home-muted)}
/* Desktop workspace markup and styling are reused, with browser-only layout helpers. */
#workbench .workspace-sidebar{gap:34px}
#workbench .workspace-main{position:relative}
#balance{display:block;overflow:hidden;color:var(--workspace-sidebar-heading);font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.04em;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.workspace-wallet.has-long-balance #balance{font-size:15px;white-space:normal;overflow-wrap:anywhere}
.workspace-account .workspace-tool{display:flex;text-align:center}
#toolNav .workspace-nav-item{cursor:pointer}
.frames{position:relative}
.frames iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--home-background)}
#shellNotice{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid var(--home-line);background:var(--home-panel-solid);box-shadow:var(--home-shadow);border-radius:8px;color:var(--home-text);font-size:12px;max-width:90%;z-index:40}
#mobileMenu{display:none}
.sidebar-backdrop{position:fixed;inset:54px 0 0;z-index:29;border:0;background:#10131b66}
@media(max-width:850px){.login-view{grid-template-columns:1fr 380px;gap:30px;padding-inline:30px}.login-copy h1{font-size:43px}}
@media(max-width:680px){
 .login-view{display:flex;flex-direction:column;padding:75px 22px 100px;gap:30px}
 .back-home{left:25px;top:25px}.login-theme{top:17px;right:25px}
 .login-copy{width:100%}.login-copy .eyebrow,.login-copy>p:not(.eyebrow),.login-tags{display:none}
 .login-copy h1{font-size:32px;letter-spacing:-1px;margin:12px 0 0}.login-copy h1 br{display:none}
 .login-copy .brand-mark{font-size:21px}.login-copy .brand-mark img{width:33px;height:33px}
 .login-card{width:100%;max-width:430px;padding:25px}.login-footer{flex-direction:column;text-align:center;gap:8px}
 #workbench.home-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 #workbench .workspace-sidebar{position:fixed;inset:54px auto 0 0;z-index:30;width:220px;padding:24px 12px 18px;gap:26px;border-right:1px solid var(--workspace-sidebar-edge);border-bottom:0;transform:translateX(-100%);transition:transform .2s,visibility .2s;visibility:hidden;box-shadow:var(--home-shadow)}
 #workbench.menu-open .workspace-sidebar{transform:translateX(0);visibility:visible}
 #workbench .workspace-brand{width:100%;padding:0 9px}
 #workbench .workspace-brand-copy{display:grid;gap:2px}
 #workbench .home-brand-dot{width:34px;height:34px;flex-basis:34px}
 #workbench .workspace-nav{display:grid;gap:8px}
 #workbench .workspace-nav-item{width:100%;min-height:42px;padding:10px 12px;font-size:13px}
 #workbench .workspace-account{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:auto;padding:18px 2px 0}
 #workbench .workspace-account-profile{padding:4px;gap:10px}
 #workbench .workspace-account-avatar{width:34px;height:36px;flex-basis:34px}
 #workbench .workspace-account-copy strong{font-size:12px}
 #workbench .workspace-account-arrow{display:block}
 #workbench .workspace-wallet{grid-column:auto;grid-row:auto;padding:12px}
 #workbench .workspace-account .workspace-recharge{top:10px;right:9px}
 #workbench .workspace-account-ledger{width:100%;grid-column:auto;grid-row:auto;padding:4px 6px}
 #workbench .workspace-account-ledger svg:last-child{display:block}
 #workbench .workspace-tools{grid-column:auto;padding-top:10px}
 #workbench .workspace-account .workspace-tool{flex-direction:column;gap:7px;min-height:54px;padding:8px 2px}
 #mobileMenu{display:inline-grid}
 .workspace-toolbar{gap:12px}.workspace-breadcrumb{margin-right:auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Browser layout: the shell owns the viewport; each tool owns its own scroll. */
html,body{height:var(--web-viewport-height,100dvh);overscroll-behavior:none}
#workbench.home-shell{height:var(--web-viewport-height,100dvh);min-height:0}
#workbench .workspace-main{min-height:0;min-width:0;padding-bottom:0}
#workbench .workspace-conversation{min-height:0}
.web-sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
#sidebarClose,.web-mobile-account{display:none}
.web-sidebar-brand .workspace-brand{min-width:0}
#webSidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.login-view{min-height:var(--web-viewport-height,100dvh)}
#fyAccountCenter .fy-dialog,.membership-dialog{max-height:calc(var(--web-viewport-height,100dvh) - 24px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

@media(max-width:1100px),(pointer:coarse) and (max-width:1366px){
 #workbench.home-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 #workbench .workspace-main{padding:0;display:flex;flex-direction:column}
 #workbench .workspace-conversation{margin:0;flex:1;width:100%;min-height:0}
 #workbench .workspace-toolbar{height:calc(56px + env(safe-area-inset-top,0px));min-height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:10px;flex:none}
 #mobileMenu,#sidebarClose{display:inline-grid;place-items:center;width:42px;height:42px;flex:none}
 #workbench .workspace-toolbar .home-icon-button{width:42px;height:42px}
 #workbench .workspace-breadcrumb{margin-right:auto;gap:7px;min-width:0;font-size:13px}
 #workbench .workspace-breadcrumb span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #workbench .workspace-sidebar{position:fixed;inset:calc(56px + env(safe-area-inset-top,0px)) auto 0 0;height:calc(var(--web-viewport-height,100dvh) - 56px - env(safe-area-inset-top,0px));z-index:50;display:flex;flex-direction:column;width:min(320px,87vw);padding:20px 16px max(18px,env(safe-area-inset-bottom,0px));gap:22px;border:0;border-right:1px solid var(--workspace-sidebar-edge);transform:translateX(-101%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:var(--home-shadow);overflow:auto}
 #workbench.menu-open .workspace-sidebar{transform:translateX(0);visibility:visible}
 .sidebar-backdrop{inset:calc(56px + env(safe-area-inset-top,0px)) 0 0;z-index:49}
 #workbench .workspace-brand{width:auto;padding:0;gap:10px}
 #workbench .home-brand-dot{width:34px;height:34px;flex-basis:34px}
 #workbench .workspace-brand-copy{display:grid;gap:2px}
 #workbench .workspace-brand-copy strong{font-size:15px}
 #workbench .workspace-brand-copy small{font-size:11px}
 #workbench .workspace-nav{display:grid;gap:5px;flex:none}
 #workbench .workspace-nav-item{width:100%;min-height:46px;padding:11px 12px;font-size:14px;border-radius:10px}
 #workbench .workspace-account{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;margin-top:auto;padding:17px 0 0;flex:none}
 #workbench .membership-entry{min-height:44px;font-size:13px}
 #workbench .workspace-account-profile{padding:4px;min-height:44px;gap:10px}
 #workbench .workspace-account-avatar{width:35px;height:36px;flex-basis:35px}
 #workbench .workspace-account-copy strong{font-size:13px}
 #workbench .workspace-account-arrow{display:block}
 #workbench .workspace-wallet{grid-column:auto;grid-row:auto;padding:13px}
 #workbench .workspace-account .workspace-recharge{min-width:64px;min-height:40px;top:9px;right:9px}
 #workbench .workspace-account-ledger{width:100%;grid-column:auto;grid-row:auto;padding:10px 6px;min-height:42px;font-size:13px}
 #workbench .workspace-account-ledger svg:last-child{display:block}
 #workbench .workspace-tools{grid-column:auto;padding-top:9px}
 #workbench .workspace-account .workspace-tool{flex-direction:row;justify-content:center;gap:6px;min-height:44px;padding:8px 3px}
 .web-mobile-account{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;max-width:140px;padding:7px 10px;border:1px solid var(--home-line);border-radius:10px;background:var(--home-panel-solid);color:var(--home-text);font-size:11px;cursor:pointer}
 .web-mobile-account svg{width:16px;height:16px;flex:none}
 .web-mobile-account span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .login-view{grid-template-columns:minmax(0,1fr) minmax(0,390px);padding-inline:28px;gap:30px}
}
@media(max-width:680px){
 #workbench .workspace-breadcrumb>span:not(:last-child){display:none}
 #workbench .workspace-toolbar{gap:7px}
 .web-mobile-account{max-width:108px;font-size:10px;padding:7px 8px}
 .login-view{display:flex;flex-direction:column;padding:80px 20px 100px;gap:24px}
 .login-card{padding:23px;width:100%;min-width:0}
 .login-card input:not([type=checkbox]),#fyAccountCenter input:not([type=checkbox]):not([type=radio]),#fyAccountCenter select,#fyAccountCenter textarea{font-size:16px;min-height:44px}
 .login-card .primary,.code-row button,.login-tabs button{min-height:44px}
 .login-card label.agreement{flex-wrap:wrap;font-size:11px;line-height:1.8}
 .login-card label.agreement input{width:18px;height:18px}
 #fyAccountCenter .fy-dialog{width:calc(100vw - 20px);padding:20px 17px;border-radius:17px}
 #fyAccountCenter button{min-height:42px}
 #fyAccountCenter .fy-dialog-head{position:sticky;top:-20px;z-index:3;padding-block:12px;background:var(--fy-surface)}
 #fyAccountCenter .fy-payment-view{align-items:center}
 .membership-dialog .membership-close{width:40px!important;height:40px!important}
 .membership-plan .primary,.membership-licenses-heading button,.membership-license button{min-height:42px}
 .membership-rules summary{min-height:44px}
 #shellNotice{bottom:max(12px,env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);width:max-content;font-size:12px}
}
@media(max-width:360px){.web-mobile-account svg{display:none}.web-mobile-account{max-width:85px}#workbench .workspace-breadcrumb{font-size:12px}}
@media(hover:none) and (pointer:coarse){#workbench .workspace-tool,#workbench .home-icon-button{touch-action:manipulation}.membership-plan:hover{transform:none}}
