.legal-consent-fields { border:1px solid var(--ink3); border-radius:10px; padding:12px; margin:16px 0; color:var(--ink); font-size:12px; line-height:1.7; }
.legal-consent-fields p { margin:0 0 8px; }
.customer-service-qr-card { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 0; color:var(--ink); text-align:center; }
.customer-service-qr-card p,.customer-service-qr-card small { margin:0; max-width:340px; line-height:1.7; font-size:12px; }
/* Pixel-preserving viewport crop: original 876x1294, square region x115 y371 w646 h646.
   Keep the original bitmap unmodified and retain a white quiet zone for scanning. */
.customer-service-qr { position:relative; width:min(260px,100%); aspect-ratio:1; overflow:hidden; background:#fff; flex-shrink:0; border:0; }
.customer-service-qr img { position:absolute; width:135.603715%!important; max-width:none!important; height:auto!important; left:-17.801858%; top:-57.430341%; display:block; border:0!important; border-radius:0!important; }
#site-service-modal { --contact-paper:#f4f7f0; --contact-ink:#163b2a; }
html[data-theme="dark"] #site-service-modal { --contact-paper:#102f20; --contact-ink:#e3eee6; }
#site-service-modal .modal,#site-service-modal .modal-head,#site-service-modal .modal-body,#site-service-modal .service-contact-card { background:var(--contact-paper)!important; color:var(--contact-ink)!important; }
#site-service-modal .service-intro,#site-service-modal .service-note,#site-service-modal .modal-title,#site-service-modal .modal-close,#site-service-modal .customer-service-qr-card,#site-service-modal .service-contact-card strong { color:var(--contact-ink)!important; }
.legal-consent-fields label { display:flex; align-items:flex-start; gap:8px; margin:10px 0; cursor:pointer; }
.legal-consent-fields input[type="checkbox"] { width:18px; height:18px; flex:0 0 18px; margin-top:2px; accent-color:#27805b; }
.legal-read-link { background:transparent; border:0; color:var(--ink); text-decoration:underline; padding:4px 0; cursor:pointer; font:inherit; }
#legal-read-status { display:block; font-size:11px; }
.legal-dialog { background:var(--panel, #f3f7f2); color:var(--ink, #143b2c); width:min(680px, calc(100vw - 32px)); max-height:90dvh; margin:auto; border:1px solid #6d9a80; border-radius:14px; padding:18px; box-sizing:border-box; }
.legal-dialog::backdrop { background:rgba(8,26,19,.34); }
html[data-theme="dark"] .legal-dialog::backdrop { background:rgba(0,8,6,.38); }
html[data-theme="dark"] .legal-dialog { background:#102f20; color:#e3eee6; }
html[data-theme="dark"] .legal-dialog button { background:#1e4b35; color:#e3eee6; }
.legal-dialog h2 { font-size:20px; margin:0 0 12px; }
.legal-document-body { max-height:55dvh; overflow:auto; overscroll-behavior:contain; border:1px solid #809b89; border-radius:8px; padding:14px; line-height:1.8; font-size:14px; }
.legal-document-body p { white-space:pre-wrap; overflow-wrap:anywhere; }
.legal-dialog > p { font-size:12px; line-height:1.6; }
.legal-dialog button { padding:10px 12px; margin:4px; border-radius:8px; border:1px solid #809b89; cursor:pointer; }
.legal-dialog button:disabled { opacity:.5; cursor:not-allowed; }

/* Registration uses the available desktop width: account fields stay on the
   left and the legally required reading/confirmation block stays visible on
   the right. Narrow screens return to a natural single-column flow. */
body.auth-register-mode #auth-view { overflow-x:hidden; overflow-y:auto; }
body.auth-register-mode .auth-shell { width:min(1120px,100%); display:flex; justify-content:flex-start; grid-template-columns:none; }
body.auth-register-mode .auth-panel { width:min(980px,100%); flex:0 1 980px; }
body.auth-register-mode .auth-card { width:100%; }
#register-form .registration-layout {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(310px,.9fr);
  gap:24px;
  align-items:stretch;
}
.registration-account-fields,
.registration-consent-column { min-width:0; }
.registration-section-title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(200,146,42,.24);
}
.registration-section-title strong { font-size:14px; letter-spacing:.5px; }
.registration-section-title span { font-size:11px; }
.registration-fields-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
}
#register-form .registration-fields-grid .form-group { min-width:0; margin-bottom:14px; }
#register-form .registration-fields-grid :is(input,select) { width:100%; min-width:0; }
#register-form .registration-fields-grid .captcha-row { min-width:0; gap:7px; }
#register-form .registration-fields-grid .captcha-img { width:108px; max-width:44%; }
#register-form .registration-fields-grid .captcha-img svg { width:100%; height:auto; }
#register-form .legal-consent-fields {
  height:calc(100% - 38px);
  margin:0;
  padding:14px 16px;
}
.legal-link-row { display:flex; flex-wrap:wrap; gap:3px 14px; margin:7px 0; }
#register-form > .form-err { margin-top:10px; }
#register-form > .form-btn { max-width:360px; display:block; margin:10px auto 0; }

/* Auth mode does not inherit the application-wide dark variables, so the
   consent surface needs explicit dark-theme colors for readable signing. */
html[data-theme="dark"] body.auth-mode .registration-section-title strong,
html[data-theme="dark"] body.auth-mode .legal-consent-fields legend { color:#f7edcf; }
html[data-theme="dark"] body.auth-mode .registration-section-title span { color:#a9c0b5; }
html[data-theme="dark"] body.auth-mode .legal-consent-fields {
  color:#e3eee6;
  background:rgba(9,29,21,.78);
  border-color:rgba(214,184,121,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] body.auth-mode .legal-consent-fields p { color:#c7d9cf; }
html[data-theme="dark"] body.auth-mode .legal-read-link { color:#f0c765; text-underline-offset:3px; }
html[data-theme="dark"] body.auth-mode .legal-read-link:hover { color:#ffe39a; }
html[data-theme="dark"] body.auth-mode #legal-read-status {
  color:#b6d8c8;
  background:rgba(111,240,191,.08);
  border-left:2px solid #70b99a;
  padding:6px 9px;
  margin:7px 0 9px;
}
html[data-theme="dark"] body.auth-mode .legal-consent-fields label { color:#e3eee6; }
html[data-theme="dark"] body.auth-mode .legal-consent-fields label:has(input:disabled) { color:#a9b9b0; }
html[data-theme="dark"] body.auth-mode .legal-consent-fields input[type="checkbox"] { accent-color:#d4a13b; }
html[data-theme="dark"] .legal-document-body {
  color:#e3eee6;
  background:#092016;
  border-color:#557866;
}
html[data-theme="dark"] .legal-document-body h3 { color:#f3d98e; }
html[data-theme="dark"] .legal-document-body p,
html[data-theme="dark"] .legal-dialog > p { color:#cbdcd2; }
html[data-theme="dark"] .legal-dialog button:disabled { color:#a9b9b0; background:#173426; opacity:1; }

@media (max-width:899px) {
  body.auth-register-mode .auth-panel { width:min(560px,100%); }
  #register-form .registration-layout { grid-template-columns:1fr; gap:18px; }
  #register-form .legal-consent-fields { height:auto; }
}
@media (max-width:560px) {
  body.auth-register-mode #auth-view { align-items:flex-start; }
  .registration-fields-grid { grid-template-columns:1fr; }
  .registration-section-title { align-items:flex-start; flex-direction:column; gap:3px; }
  #register-form .registration-fields-grid .form-group { margin-bottom:14px; }
  #register-form > .form-btn { max-width:none; }
}
.recharge-payment-options { color:var(--ink); border:1px solid #729380; border-radius:12px; padding:14px; margin:12px 0; }
.recharge-payment-options h4 { margin:0 0 10px; }
.recharge-payment-options p { font-size:12px; line-height:1.8; margin:10px 0 0; }
.recharge-channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.recharge-channel-grid button { background:var(--panel); color:var(--ink); padding:12px 6px; border:1px solid #819988; border-radius:10px; cursor:not-allowed; }
.recharge-channel-grid small { display:block; margin-top:6px; }

/* 套餐订阅中心：宽屏横向比较，窄屏自然纵排。 */
#aiqi-center-modal {
  --sub-paper:#0d2419;
  --sub-panel:#133021;
  --sub-ink:#e7efe9;
  --sub-muted:#aec1b5;
  --sub-line:#476653;
  --sub-gold:#d8b967;
  --sub-green:#2f7857;
}
html[data-theme="light"] #aiqi-center-modal {
  --sub-paper:#fffdf8;
  --sub-panel:#f2f6ee;
  --sub-ink:#294a39;
  --sub-muted:#617468;
  --sub-line:#bdcbbb;
  --sub-gold:#80601e;
  --sub-green:#357154;
}
#aiqi-center-modal .aiqi-center-modal {
  max-height:92dvh;
  overflow:hidden;
  background:var(--sub-paper);
  color:var(--sub-ink);
  border:1px solid var(--sub-line);
}
#aiqi-center-modal .modal-head {
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0!important;
  box-sizing:border-box;
  background:var(--sub-paper);
  border-bottom:1px solid var(--sub-line);
}
#aiqi-center-modal .modal-head .modal-title { min-width:0; overflow-wrap:anywhere; }
#aiqi-center-modal :is(.modal-title,.modal-close,.aiqi-balance-label,.aiqi-packages-title) { color:var(--sub-ink); }
#aiqi-center-modal .aiqi-center-body { max-height:calc(92dvh - 70px); overflow:auto; padding:18px 22px 24px; }
#aiqi-center-modal .aiqi-tabs { display:flex; gap:8px; margin:16px 0; }
#aiqi-center-modal .aiqi-tab { min-width:112px; color:var(--sub-muted); border:1px solid var(--sub-line); background:transparent; border-radius:9px; }
#aiqi-center-modal .aiqi-tab.active { color:#fff; background:var(--sub-green); border-color:var(--sub-green); }
.subscription-value-rule,.recharge-landscape-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:13px 15px;
  border:1px solid var(--sub-line);
  border-radius:12px;
  background:var(--sub-panel);
  color:var(--sub-ink);
}
.subscription-value-rule span,.recharge-landscape-head :is(p,small),.recharge-landscape-head>span { color:var(--sub-muted); font-size:12px; line-height:1.65; }
.subscription-value-rule > * { min-width:0; overflow-wrap:anywhere; }
.subscription-value-rule strong { flex:1 1 280px; line-height:1.5; }
.subscription-value-rule span { flex:1 1 300px; text-align:right; }
.subscription-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0; }
.subscription-plan-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px;
  border:1px solid var(--sub-line);
  border-radius:14px;
  background:var(--sub-panel);
  color:var(--sub-ink);
}
.subscription-plan-card.recommended { border-color:var(--sub-gold); box-shadow:inset 0 3px 0 var(--sub-gold); }
.subscription-plan-card>em { position:absolute; top:10px; right:12px; color:var(--sub-gold); font-size:11px; font-style:normal; }
.subscription-plan-card small { color:var(--sub-muted); }
.subscription-plan-card :is(small,h4,strong,p,li,button) { overflow-wrap:anywhere; }
.subscription-plan-card h4 { margin:8px 0 6px; font-size:18px; }
.subscription-plan-card strong { color:var(--sub-gold); font-size:20px; }
.subscription-plan-card p { color:var(--sub-ink); margin:8px 0; }
.subscription-plan-card ul { flex:1; margin:8px 0 16px; padding-left:18px; color:var(--sub-muted); font-size:12px; line-height:1.9; }
.subscription-plan-card button { border:1px solid var(--sub-line); border-radius:9px; padding:10px; color:var(--sub-muted); background:transparent; opacity:1; }
.subscription-policy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.subscription-policy span { padding:11px 12px; border-left:3px solid var(--sub-green); background:var(--sub-panel); color:var(--sub-muted); font-size:12px; line-height:1.6; }
.subscription-policy b { display:block; color:var(--sub-ink); font-size:13px; }
.recharge-landscape-head h4 { margin:3px 0; color:var(--sub-ink); font-size:18px; }
.recharge-landscape-head p { margin:0; }
.recharge-landscape-head>span { flex:0 0 auto; padding:7px 10px; border:1px solid var(--sub-line); border-radius:999px; }
#aiqi-center-modal .aiqi-packages-title { margin:16px 0 9px; }
#aiqi-center-modal .aiqi-packages-landscape { display:grid; grid-template-columns:repeat(5,minmax(105px,1fr)); gap:10px; }
#aiqi-center-modal .aiqi-pkg-card { min-width:0; padding:14px 10px; border-color:var(--sub-line); background:var(--sub-panel); color:var(--sub-ink); }
#aiqi-center-modal .aiqi-pkg-yuan { color:var(--sub-gold); }
#aiqi-center-modal .aiqi-pkg-coins { color:var(--sub-ink); }
#aiqi-center-modal .aiqi-pkg-gift { margin-top:5px; color:var(--sub-green); font-size:12px; font-weight:700; }
#aiqi-center-modal .aiqi-pkg-label { color:var(--sub-muted); }
.recharge-payment-landscape { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:18px; align-items:center; border-color:var(--sub-line); }
.recharge-payment-landscape p { color:var(--sub-muted); }
#aiqi-center-modal .recharge-channel-grid button { color:var(--sub-muted); background:var(--sub-panel); border-color:var(--sub-line); opacity:1; }
#aiqi-center-modal .aiqi-tips { color:var(--sub-muted); }

@media (max-width:720px) {
  #aiqi-center-modal .aiqi-center-modal { width:94vw!important; max-height:94dvh; }
  #aiqi-center-modal .aiqi-center-body { max-height:calc(94dvh - 62px); padding:14px; }
  #aiqi-center-modal .aiqi-tabs { display:grid; grid-template-columns:repeat(3,1fr); }
  #aiqi-center-modal .aiqi-tab { min-width:0; padding-inline:4px; }
  .subscription-value-rule,.recharge-landscape-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .subscription-value-rule strong,.subscription-value-rule span { flex-basis:auto; text-align:left; }
  .subscription-plan-grid,.subscription-policy,.recharge-payment-landscape { grid-template-columns:1fr; }
  #aiqi-center-modal .aiqi-packages-landscape { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Long legal documents scroll independently; close remains reachable. */
dialog.legal-reader[open] { display:flex; flex-direction:column; overflow:hidden; max-height:90dvh; }
.legal-reader > h2, .legal-reader > .legal-reader-meta, .legal-reader > button { flex-shrink:0; }
.legal-reader > .legal-document-body { min-height:0; flex:1 1 auto; overflow:auto; overflow-wrap:anywhere; }
.legal-reader > .legal-reader-meta { margin:0 0 10px; }