/* AI 工作台 browser viewport adaptation — fluid desktop/browser layout layer. */
:root{--sd-browser-gutter:clamp(14px,2.4vw,48px);--sd-browser-gap:clamp(10px,1.4vw,20px)}
html{width:100%;max-width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;min-width:0;margin-inline:0;overflow-x:clip}
:where(main,header,footer,nav,section,article,aside,form,fieldset,.page,.main,.content,.page-content,.panel,.card,.grid,.toolbar,.topbar,.header-actions,.actions){min-width:0;max-width:100%;box-sizing:border-box}
:where(img,video,picture,svg){max-width:100%}
:where(img,video){height:auto}
:where(input,textarea,select,button){max-width:100%;box-sizing:border-box}
:where(pre,code){max-width:100%}
:where(.modal-card,.site-dialog,.dialog,.generate-modal-card,.market-drawer-card){max-width:calc(100vw - 24px)}
:where(.modal,.site-modal,.dialog-backdrop){box-sizing:border-box}

/* Fluid page containers instead of resolution-specific fixed widths. */
:where(.dashboard-main,.home-main,.admin-main,.guide-main,.profile-main,.recharge-main,.market-main,.skills-main,.story-projects-main,.story-workbench-main,.api-main){width:100%;max-width:100%;margin-inline:auto}

/* Computer browser widths: keep controls readable, then wrap before clipping. */
@media (min-width:761px) and (max-width:1280px){
  :where(.app-topbar,.home-header,.topbar,.toolbar,.admin-section-head,.dialog-head,.modal-actions,.header-actions,.actions){min-width:0}
  :where(.header-actions,.actions,.admin-actions,.modal-actions){flex-wrap:wrap}
  :where(.project-grid,.mode-grid,.admin-grid,.form-grid,.settings-grid,.groups,.market-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
  :where(.dashboard-main,.home-main,.admin-main,.guide-main,.profile-main,.recharge-main,.market-main,.skills-main,.story-projects-main){padding-left:var(--sd-browser-gutter)!important;padding-right:var(--sd-browser-gutter)!important}
}

/* Narrow desktop windows / split-screen browser: reflow without switching device assumptions. */
@media (min-width:761px) and (max-width:1024px){
  :where(.two-column,.split-layout,.content-grid,.dashboard-lower-grid,.market-compose-grid){grid-template-columns:1fr!important}
  :where(.side-panel,.sidebar,.right-panel,.property-panel){max-width:min(100%,420px)}
  :where(.toolbar,.topbar,.app-topbar){gap:clamp(6px,1vw,10px)}
}

/* Very wide desktop monitors: use breathing room while preserving full-canvas pages. */
@media (min-width:1800px){
  :root{--sd-browser-gutter:clamp(36px,3.4vw,84px)}
  body:not(.canvas-page):not(.workspace-v664) :where(p,li,.muted,.small-text){line-height:1.6}
}

/* Low-height laptop windows and browser chrome: dialogs remain reachable. */
@media (min-width:761px) and (max-height:760px){
  :where(.modal-card,.site-dialog,.dialog,.generate-modal-card,.market-drawer-card){max-height:calc(100svh - 24px)!important;overflow:auto!important;overscroll-behavior:contain}
  body.auth-page-v630{overflow:auto!important}
  .auth-page-v630 .auth-experience{min-height:100svh!important;align-items:start!important;padding-top:max(72px,env(safe-area-inset-top))!important;padding-bottom:clamp(18px,3vh,30px)!important}
  .auth-page-v630 .auth-visual-panel{min-height:520px!important}
  .auth-page-v630 .auth-holo-core{width:180px!important;height:180px!important;top:8%!important}
  .auth-page-v630 .auth-visual-copy{margin-top:160px!important}
  .auth-page-v630 .auth-visual-copy h1{font-size:clamp(36px,4.4vw,54px)!important}
  .auth-page-v630 .auth-card-v630{padding:24px!important}
  .auth-page-v630 .auth-card-v630 .auth-form{gap:11px!important}
  .auth-page-v630 .auth-card-v630 .auth-sub{margin-bottom:14px!important}
}

@media (min-width:761px) and (max-height:620px){
  .auth-page-v630 .auth-experience{grid-template-columns:minmax(280px,.75fr) minmax(390px,1fr)!important;gap:20px!important}
  .auth-page-v630 .auth-visual-panel{min-height:450px!important}
  .auth-page-v630 .auth-status-row{display:none!important}
  .auth-page-v630 .auth-holo-core{width:140px!important;height:140px!important;opacity:.65!important}
  .auth-page-v630 .auth-visual-copy{margin-top:125px!important}
  .auth-page-v630 .auth-visual-copy p{display:none!important}
}

/* Protect long translated text and user content from forcing horizontal page overflow. */
:where(.card,.panel,.dialog,.site-dialog,.admin-card,.mode-card,.project-card,.market-card,.story-card,.guide-card){overflow-wrap:anywhere}
:where(table){max-width:100%}