/* Standalone application surfaces share the shell palette without adding business controls. */
/* Content pages grow with forms, validation messages and long task details.
   Full-screen question panels keep their own scroll containers below. */
html[data-glass-standalone="page"]:not([data-glass-page^="question-"]),
html[data-glass-standalone="mail"] { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
html[data-glass-standalone="page"]:not([data-glass-page^="question-"]) body,
html[data-glass-standalone="mail"] body { height:auto; max-height:none; overflow:visible; }
html[data-glass-page][data-glass-standalone] body {
  --theme-bg:var(--sg-page); --theme-page:var(--sg-page); --theme-surface:var(--sg-solid); --theme-surface-soft:var(--sg-panel);
  --theme-text:var(--sg-ink); --theme-muted:var(--sg-muted); --theme-line:var(--sg-line); --theme-accent:var(--sg-primary);
  margin:0; color:var(--sg-ink) !important; font-family:var(--sg-font) !important;
}
html[data-glass-page][data-glass-standalone="page"] body,
html[data-glass-page][data-glass-standalone="mail"] body { min-height:100svh; background:var(--sg-page) !important; position:relative; isolation:isolate; }
html[data-glass-page][data-glass-standalone="page"] body::before,
html[data-glass-page][data-glass-standalone="mail"] body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../img/login-pc-glass-background.png") center/cover no-repeat; filter:var(--sg-wallpaper-filter);
}
html[data-glass-page][data-glass-standalone] :is(.bf-account,.legal-page,.agreement-page) { background:transparent !important; color:var(--sg-ink) !important; }
html[data-glass-page][data-glass-standalone] :is(.bf-account-card,.bf-register-card,.legal-container,.policy-container,.tn-mail-card) { color:var(--sg-ink); background:var(--sg-panel); border:1px solid var(--sg-edge); border-radius:24px; box-shadow:inset 0 1px 0 var(--sg-edge),0 16px 40px rgba(20,20,18,.06); }
html[data-glass-page][data-glass-standalone] :is(.bf-glass-card,.legal-container,.policy-container,.tn-mail-card) { backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
html[data-glass-page][data-glass-standalone="mail"] .tn-mail-wrap { max-width:840px; padding:28px 20px; }
html[data-glass-page][data-glass-standalone="editor"] body { background:var(--sg-page) !important; }
html[data-glass-page][data-glass-standalone="share"] body { background:var(--sg-page) !important; }
html[data-glass-page][data-glass-standalone] :is(h1,h2,h3) { font-family:var(--sg-font); }

/* Decorative announcement backgrounds must not extend the document bounds. */
html[data-glass-page="migration-index"] .ambient-orb { position:fixed; }

html[data-glass-page][data-glass-standalone]:not([data-glass-page="document-editor"]) :is(.bf-account-card,.bf-register-card,.bf-glass-card,.legal-container,.policy-container,.tn-mail-card) {
  padding:var(--sg-space); border:1px solid var(--sg-edge); border-radius:var(--sg-radius);
  background:var(--sg-panel); box-shadow:var(--sg-shadow);
  -webkit-backdrop-filter:var(--sg-glass-filter); backdrop-filter:var(--sg-glass-filter);
}

/* Each full-screen question column scrolls independently. Safe centering keeps
   the beginning of a long question/instruction reachable instead of above 0. */
@media (min-width:768px) {
  html[data-glass-page^="question-"] .question-play-page > div:not([id]),
  html[data-glass-page^="question-"] :is(#intro-screen,#quiz-main,#completion-screen) > div {
    min-height:0; overflow-y:auto; overscroll-behavior-y:contain;
  }
}
html[data-glass-page^="question-"] .question-play-page > div:not([id]).justify-center,
html[data-glass-page^="question-"] :is(#intro-screen,#quiz-main,#completion-screen) > .justify-center {
  justify-content:flex-start; justify-content:safe center;
}
@media (max-width:600px) {
  html[data-glass-page][data-glass-standalone] :is(.bf-account,.bf-page-inner,.tn-mail-wrap) { max-width:100%; box-sizing:border-box; }
  html[data-glass-page][data-glass-standalone="mail"] .tn-mail-wrap { padding:12px; }
  html[data-glass-page][data-glass-standalone] .tn-mail-card { padding:20px; }
}

/* PC-002 / PC-003: shared account composition; long forms keep document scrolling. */
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-account { min-height:100svh; padding:28px; color:var(--sg-ink); font:var(--sg-body); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-page-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,520px); align-items:center; gap:48px 80px; position:relative; width:100%; max-width:1440px; min-height:calc(100svh - 56px); margin:auto; padding:108px 48px 48px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-account-topbar { position:absolute; top:0; right:0; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .language-switch { min-height:40px; border:1px solid var(--sg-control-line); border-radius:12px; padding:8px 12px; color:var(--sg-ink); background:var(--sg-panel); font:var(--sg-help); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-brand { position:absolute; top:0; left:0; display:grid; grid-template-columns:40px auto; gap:0 12px; align-items:center; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-brand img { grid-row:1/3; width:36px !important; height:36px !important; margin:0 !important; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"])[data-shell-mode="night"] .bf-brand img { filter:invert(1); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-brand-zh { font:600 20px/28px var(--sg-font); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-brand-en { color:var(--sg-muted); font:var(--sg-meta); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro { min-width:0; max-width:580px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro h2 { margin:0 0 24px; font:600 56px/68px var(--sg-font); letter-spacing:normal; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro p { margin:0; color:var(--sg-muted); font:var(--sg-body); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art { position:relative; height:260px; max-width:420px; margin-top:40px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card { position:absolute; width:260px; padding:24px; border:1px solid var(--sg-edge); border-radius:var(--sg-radius); background:var(--sg-panel); box-shadow:var(--sg-shadow); -webkit-backdrop-filter:var(--sg-glass-filter); backdrop-filter:var(--sg-glass-filter); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card :is(span,strong,small) { display:block; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card span { color:var(--sg-muted); font:var(--sg-help); margin-bottom:12px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card strong { font:var(--sg-section); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card i { display:block; height:4px; margin:20px 0; background:var(--sg-control-line); opacity:.6; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-card small { font:var(--sg-meta); color:var(--sg-muted); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-back { top:0; left:120px; transform:rotate(12deg); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art-front { top:60px; left:0; transform:rotate(-8deg); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-glass-card { min-width:0; padding:var(--sg-space); border:1px solid var(--sg-edge); border-radius:24px; background:var(--sg-panel); box-shadow:var(--sg-shadow); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-welcome { margin-bottom:28px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-welcome h1 { margin:0 0 8px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-welcome p { margin:0; color:var(--sg-muted); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-welcome a { color:var(--sg-ink); text-decoration:underline; text-underline-offset:3px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-field { min-width:0; margin-bottom:20px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-field label { display:block; margin-bottom:8px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-field input { width:100%; min-width:0; height:44px; padding:10px 12px; border:1px solid var(--sg-control-line); border-radius:12px; background:var(--sg-solid); color:var(--sg-ink); font:var(--sg-body); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-row { display:flex; align-items:flex-start; gap:12px; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-row input { flex:1; width:0; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-btn { flex-shrink:0; min-height:44px; padding:10px 12px; border:1px solid var(--sg-control-line); border-radius:12px; color:var(--sg-ink); background:var(--sg-panel); cursor:pointer; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-btn:disabled { opacity:.6; cursor:not-allowed; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) :is(.reg-sms-hint,.reg-sms-msg) { margin-top:8px; color:var(--sg-muted); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) :is(.reg-sms-msg.is-error,.field-validation-error) { color:var(--glass-danger); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-msg.is-success { color:var(--glass-success); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-submit { width:100%; min-height:44px; padding:8px 16px; border:1px solid var(--sg-primary); border-radius:12px; color:var(--sg-on-primary); background:var(--sg-primary); cursor:pointer; }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-submit:hover { filter:brightness(.95); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-error { padding:12px 16px; margin-bottom:24px; border:1px solid var(--glass-danger); border-radius:12px; background:var(--glass-danger-soft); color:var(--glass-danger); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-legal-links { margin-top:24px; padding-top:20px; border-top:1px solid var(--sg-line); color:var(--sg-muted); font:var(--sg-help); }
html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-legal-links a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1279px) { html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-page-inner { padding:96px 16px 32px; gap:40px; grid-template-columns:minmax(0,1fr) minmax(380px,480px); } }
@media(max-width:1023px) { html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-page-inner { display:block; max-width:600px; padding:88px 0 24px; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro { margin-bottom:32px; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro h2 { font:600 36px/46px var(--sg-font); } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-intro h2 br { display:none; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .account-art { display:none; } }
@media(max-width:600px) { html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-account { padding:20px 16px; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .bf-glass-card { padding:var(--sg-space); } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-field input { font-size:16px; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-row { flex-wrap:wrap; } html:is([data-glass-page="account-register"],[data-glass-page="account-forgotpassword"]) .reg-sms-row input { flex-basis:150px; } }