/* Web-only layout around the approved mini-program styles (generated/mp.css): the desktop shell (side navigation,
   wider content with a side column on the home page), native <select> pickers that keep the picker's look, the login
   code, dialogs and toasts. Colours, type and spacing come only from the mini-program tokens (--yxy-*). */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F6F7FB;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
.portal-root[hidden]{display:none}
.portal-root button{font:inherit;cursor:pointer}
.portal-root button:disabled{cursor:default}
.portal-root :focus-visible{outline:none;box-shadow:var(--yxy-focus-ring)}

/* Pickers: the visible text is the mini-program's picker label; a transparent native select on top takes input. */
/* The mini-program sizes .ws-filter at width:100% plus padding; a <label> here is content-box, so it would overhang by its padding. */
.portal-select{position:relative;display:block;box-sizing:border-box}
.portal-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.portal-select select:disabled{cursor:default}
.portal-select:focus-within{box-shadow:var(--yxy-focus-ring);border-radius:var(--yxy-radius-md)}

.portal-actions{display:flex;flex-direction:column;gap:var(--yxy-space-3)}
.portal-mini-only{margin-top:var(--yxy-space-4)}
.ws-textarea{width:100%;box-sizing:border-box;min-height:160px;resize:vertical;font:inherit}

/* Desktop: navigation becomes a left rail, content widens; the home page gains a side column. */
@media (min-width:1024px){
  .workspace-page.portal-page{max-width:none;margin:0;padding-left:calc(220px + 48px);padding-right:48px;padding-bottom:48px}
  .workspace-page.portal-page>*:not(.ws-nav){max-width:1080px}
  .workspace-page.portal-page .ws-nav{top:0;bottom:0;left:0;right:auto;width:220px;flex-direction:column;justify-content:flex-start;gap:4px;padding:120px 16px 24px;border-top:0;border-right:var(--yxy-bw) solid var(--yxy-line);box-shadow:none}
  .workspace-page.portal-page .ws-nav-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 16px;border-radius:var(--yxy-radius-md);font-size:var(--yxy-fs-label)}
  .workspace-page.portal-page .ws-nav-item.is-current{background:var(--yxy-brand-50)}
  .workspace-page.portal-page .ws-brand{position:fixed;top:32px;left:16px;width:200px;flex-wrap:wrap;gap:6px 10px;z-index:calc(var(--yxy-z-nav) + 1)}
  .workspace-page.portal-page .ws-brand-name{white-space:nowrap}
  .workspace-page.portal-page .ws-demo{margin-left:69px}
  .workspace-page.portal-page .ws-context{margin-top:32px}
  .workspace-page.portal-page .ws-nav{padding-top:140px}
  .portal-columns{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
  .portal-actions{flex-direction:row-reverse;justify-content:flex-start}
  .portal-actions .ws-primary,.portal-actions .ws-secondary{width:auto;min-width:220px;padding-left:24px;padding-right:24px}
}

/* Login: brand panel and entry side by side on wide screens. */
.portal-qr{display:flex;flex-direction:column;align-items:center;gap:var(--yxy-space-3);margin:var(--yxy-space-5) 0 var(--yxy-space-3);color:var(--yxy-text-2);font-size:var(--yxy-fs-body-sm)}
.portal-qr img{width:220px;height:220px;padding:12px;border:var(--yxy-bw) solid var(--yxy-line);border-radius:var(--yxy-radius-lg);background:#fff}
.portal-qr.is-placeholder{justify-content:center;min-height:244px;padding:0 24px;border:var(--yxy-bw) dashed var(--yxy-line-strong);border-radius:var(--yxy-radius-lg);text-align:center}
.portal-qr.is-placeholder .ui-primary{margin-top:var(--yxy-space-3)}
.portal-match{text-align:center;color:var(--yxy-text-2);font-size:var(--yxy-fs-body-sm)}
.portal-match strong{color:var(--yxy-brand);font-size:var(--yxy-fs-title);letter-spacing:.2em}
.portal-home-link{display:block;margin-top:var(--yxy-space-4);text-align:center;color:var(--yxy-brand)}
@media (min-width:1024px){
  .mp-page-login .welcome-page.portal-login{max-width:none;flex-direction:row;min-height:100vh}
  .mp-page-login .portal-login .welcome-upper{flex:1.2;display:flex;flex-direction:column;justify-content:center;padding:64px 80px}
  .mp-page-login .portal-login .welcome-entry{flex:0 0 440px;display:flex;flex-direction:column;justify-content:center;padding:48px;border-radius:0}
}

.portal-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:420px;border:0;border-radius:var(--yxy-radius-lg,16px);padding:24px;background:var(--yxy-surface,#fff);color:var(--yxy-text-1,#1E2445);font-family:inherit}
.portal-dialog::backdrop{background:rgba(30,36,69,.4)}
.portal-dialog .ws-title{font-size:var(--yxy-fs-title);font-weight:var(--yxy-fw-semibold);line-height:var(--yxy-lh-heading)}
.portal-dialog-body{margin:12px 0 20px;color:var(--yxy-text-2,#474E6A);font-size:var(--yxy-fs-body);line-height:1.6}
/* The page's button look is scoped to .workspace-page, which the dialog is not inside: its own copy, two equal halves. */
.portal-dialog .portal-actions{display:flex;flex-direction:row-reverse;gap:12px}
.portal-dialog .ws-primary,.portal-dialog .ws-secondary{flex:1 1 0;min-width:0;min-height:var(--yxy-control-md);margin:0;padding:10px 16px;border-radius:var(--yxy-radius-md);font:inherit;font-size:var(--yxy-fs-body);font-weight:var(--yxy-fw-semibold);line-height:var(--yxy-lh-heading);cursor:pointer}
.portal-dialog .ws-primary{background:var(--yxy-brand);color:var(--yxy-on-brand);border:var(--yxy-bw) solid var(--yxy-brand)}
.portal-dialog .ws-primary.is-danger{background:var(--yxy-danger-solid);border-color:var(--yxy-danger-solid)}
.portal-dialog .ws-secondary{background:var(--yxy-surface);color:var(--yxy-brand);border:var(--yxy-bw) solid var(--yxy-brand-300);font-weight:var(--yxy-fw-medium)}
.portal-dialog .ws-primary:focus-visible,.portal-dialog .ws-secondary:focus-visible{outline:2px solid var(--yxy-brand);outline-offset:2px}
.portal-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:1000;max-width:80vw;padding:12px 20px;border-radius:12px;background:rgba(30,36,69,.92);color:#fff;font-size:14px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
