/* q-cx-design-errors：404/500、离线、权限、Cookie 浅色外观。不改 design-tokens。 */
:root{
  --p-bg:#FFFFFF;--p-card:#FFFFFF;--p-ink:#1F1E1D;--p-muted:#6B6B70;--p-faint:#9C9CA3;
  --p-line:#E5E5E7;--p-soft:#ECECEE;--p-solid:#1F1E1D;--p-danger:#C2410C;--p-ok:#1E7D45;
  --p-serif:"Songti SC","Noto Serif SC",Georgia,serif;
  --p-shadow:0 1px 2px rgb(0 0 0 / .06);
}
.err-page{margin:0;min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--p-bg);color:var(--p-ink);
  font:15px/1.5 system-ui,-apple-system,"PingFang SC","Segoe UI",sans-serif;}
.err-brand{display:inline-flex;margin:0 0 20px;}
.err-brand img{display:block;height:36px;width:auto;max-width:min(200px,70vw);}
.err-card{width:min(440px,100%);text-align:center;}
.err-code{margin:0;font:400 54px/1.1 var(--p-serif);letter-spacing:-.02em;color:var(--p-ink);}
.err-title{margin:16px 0 8px;font:400 20px/1.35 var(--p-serif);color:var(--p-ink);}
.err-desc{margin:0 0 28px;font-size:12.5px;line-height:1.5;color:var(--p-muted);}
.err-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.err-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;
  font:500 15px/1 system-ui,-apple-system,"PingFang SC",sans-serif;text-decoration:none;cursor:pointer;border:1px solid var(--p-line);
  background:var(--p-card);color:var(--p-ink);box-shadow:var(--p-shadow);}
.err-btn--primary{background:var(--p-solid);color:#fff;border-color:var(--p-solid);}
.err-btn--ghost{background:transparent;box-shadow:none;}
.err-lang{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:13px;}
.err-lang a{color:var(--p-muted);text-decoration:none;}
.err-lang a[aria-current="true"]{color:var(--p-ink);font-weight:600;}

/* Offline banner */
#ui-offline-banner{position:fixed;top:0;left:0;right:0;z-index:var(--layer-stack-96,9600);display:none;align-items:center;justify-content:center;gap:10px;
  min-height:40px;padding:8px 16px;background:#3A3428;color:#F5F0E6;font:13px/1.4 system-ui,-apple-system,"PingFang SC",sans-serif;
  box-shadow:var(--p-shadow);}
#ui-offline-banner.is-on{display:flex;}
#ui-offline-banner .dot{width:8px;height:8px;border-radius:50%;background:#E8B84A;flex:none;}

/* Permission card */
.ui-perm-overlay{position:fixed;inset:0;z-index:var(--layer-dialog,9800);display:grid;place-items:center;padding:20px;background:rgb(31 30 29 / .28);}
.ui-perm-card{width:min(400px,100%);padding:28px 24px;border-radius:24px;background:var(--p-card);color:var(--p-ink);
  border:1px solid var(--p-line);box-shadow:var(--p-shadow);font:15px/1.5 system-ui,-apple-system,"PingFang SC",sans-serif;}
.ui-perm-card h2{margin:0 0 10px;font:400 22px/1.3 var(--p-serif);}
.ui-perm-card p{margin:0 0 10px;color:var(--p-muted);font-size:14px;}
.ui-perm-card .privacy{font-size:13px;color:var(--p-faint);}
.ui-perm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.ui-perm-actions .err-btn{flex:1;min-width:120px;}
.ui-perm-steps{margin:14px 0 0;padding:14px 16px;border-radius:16px;background:var(--p-soft);font-size:13px;color:var(--p-muted);}
.ui-perm-steps ol{margin:8px 0 0;padding-left:18px;}
.ui-perm-steps li{margin:4px 0;}

/* Toast */
#ui-toast-host{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:var(--layer-stack-97,9700);width:min(360px,calc(100vw - 24px));pointer-events:none;}
.ui-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--p-card);color:var(--p-ink);
  border:1px solid var(--p-line);box-shadow:var(--p-shadow);font:14px/1.4 system-ui,-apple-system,"PingFang SC",sans-serif;pointer-events:auto;}
.ui-toast--success{border-color:rgb(30 125 69 / .35);}
.ui-toast--success .mark{color:var(--p-ok);}
.ui-toast--warn{border-color:rgb(194 65 12 / .35);}
.ui-toast--error{border-color:rgb(194 65 12 / .5);}
.ui-toast .mark{font-weight:700;}

/* Cookie banner restyle (light bottom card; TWO equal primary buttons + settings link)
   Beat legal.css / stage1 max-height:120 + overflow:hidden + nth-child order swaps. */
html body #cookieBanner.cookie-banner,
html.s1 body #cookieBanner.cookie-banner,
html body section#cookieBanner.cookie-banner{
  position:fixed!important;z-index:var(--layer-stack-96,9600)!important;
  left:50%!important;right:auto!important;bottom:16px!important;top:auto!important;
  transform:translateX(-50%)!important;
  width:min(520px,calc(100vw - 24px))!important;max-width:520px!important;
  min-height:0!important;max-height:none!important;height:auto!important;
  padding:16px 18px!important;display:flex!important;flex-direction:column!important;gap:12px!important;
  align-items:stretch!important;
  background:var(--p-card)!important;color:var(--p-ink)!important;border:1px solid var(--p-line)!important;
  border-radius:24px!important;box-shadow:var(--p-shadow)!important;pointer-events:auto!important;
  overflow:visible!important;box-sizing:border-box!important;
}
html body #cookieBanner.cookie-banner > div:first-child,
html.s1 body #cookieBanner.cookie-banner > div:first-child{
  min-width:0!important;overflow:visible!important;max-height:none!important;
}
html body #cookieBanner.cookie-banner p,
html.s1 body #cookieBanner.cookie-banner p{
  margin:0!important;font-size:13px!important;line-height:1.45!important;color:var(--p-muted)!important;
  max-width:none!important;overflow:visible!important;white-space:normal!important;
}
html body #cookieBanner.cookie-banner a.cookie-privacy{color:var(--p-ink)!important;text-decoration:underline;}
html body #cookieBanner.cookie-banner .privacy-actions,
html.s1 body #cookieBanner.cookie-banner .privacy-actions{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;
  margin:0!important;order:0!important;overflow:visible!important;max-height:none!important;
}
/* Reset legal.css nth-child order swaps so DOM order = 仅必要 / 接受全部 / 设置 */
html body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(1),
html body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(2),
html body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(3),
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(1),
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(2),
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button:nth-child(3){
  order:0!important;
}
html body #cookieBanner.cookie-banner .privacy-actions > button.cookie-equal,
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button.cookie-equal,
html body #cookieBanner.cookie-banner .privacy-actions > button.cookie-primary,
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button.cookie-primary{
  flex:1 1 140px!important;min-height:48px!important;height:auto!important;padding:0 18px!important;
  border-radius:999px!important;border:1px solid var(--p-solid)!important;
  background:var(--p-solid)!important;color:#fff!important;
  font:500 14px/1 system-ui,-apple-system,"PingFang SC",sans-serif!important;
  box-shadow:none!important;white-space:nowrap!important;
}
html body #cookieBanner.cookie-banner .privacy-actions > button.cookie-settings-link,
html.s1 body #cookieBanner.cookie-banner .privacy-actions > button.cookie-settings-link{
  flex:0 0 auto!important;flex-basis:auto!important;min-height:auto!important;height:auto!important;
  padding:4px 6px!important;background:transparent!important;border:0!important;border-color:transparent!important;
  border-radius:0!important;color:var(--p-muted)!important;text-decoration:underline!important;
  box-shadow:none!important;font:500 13px/1.4 system-ui,-apple-system,"PingFang SC",sans-serif!important;
}
html body #cookieBanner.cookie-banner.is-dot,
html.s1 body #cookieBanner.cookie-banner.is-dot{
  width:44px!important;height:44px!important;max-width:44px!important;min-height:44px!important;
  padding:0!important;border-radius:22px!important;transform:none!important;
  left:auto!important;right:16px!important;overflow:hidden!important;
}
@media(max-width:760px){
  html body #cookieBanner.cookie-banner,html.s1 body #cookieBanner.cookie-banner{
    left:12px!important;right:12px!important;width:auto!important;max-width:none!important;
    transform:none!important;bottom:12px!important;max-height:none!important;
  }
  html body #cookieBanner.cookie-banner .privacy-actions > button.cookie-equal,
  html.s1 body #cookieBanner.cookie-banner .privacy-actions > button.cookie-equal{
    flex:1 1 calc(50% - 10px)!important;min-height:44px!important;
  }
}