/* Shanshui: quiet surfaces, clear actions and compact reading. */
:root {
  --background:#f4f4ee; --text:#213f37; --heading:#17352f; --secondary:#63776e; --tertiary:#6b7e75;
  --surface:#fffef9; --surface-hover:#e9f0e9; --input:#f5f6ef; --primary:#257567; --primary-hover:#1d5b51;
  --outline:#dae3d8; --dialog:#fffef9; --error:#b13748; --radius:12px; --art-bg:#e7eee5;
  --m-bg:var(--background); --m-panel:var(--surface); --m-border:var(--outline); --m-text:var(--text); --m-muted:var(--secondary); --m-faint:var(--tertiary);
  --m-active:#e4eee6; --m-primary:var(--primary); --m-hover:#eef2e9; --m-radius:12px;
  --ss-ink:#17352f; --ss-leaf:#257567; --ss-soft:#e8f0e8; --ss-violet:#76509e; --ss-blue:#3269ac;
  --ss-space:clamp(16px,2.4vw,32px);
}
:root[data-theme="dark"] {
  --background:#112821; --text:#e8eee6; --heading:#f3f4eb; --secondary:#b2c4b8; --tertiary:#a1b6a9;
  --surface:#19352b; --surface-hover:#254b3b; --input:#173128; --primary:#9aceb6; --primary-hover:#b3dec8;
  --outline:#365143; --dialog:#19352b; --error:#ff9caa; --art-bg:#203e31;
  --m-bg:var(--background); --m-panel:var(--surface); --m-border:var(--outline); --m-text:var(--text); --m-muted:var(--secondary); --m-faint:var(--tertiary);
  --m-active:#294b39; --m-primary:var(--primary); --m-hover:#254535; --ss-soft:#254535; --ss-violet:#c9a9e7; --ss-blue:#9bbfe8;
}
body { min-width:320px; background:var(--background); }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.member-app { font-size:13px; color:var(--text); background:var(--background); }
.member-app :is(h1,h2,h3,strong,p,small,dd,code) { overflow-wrap:anywhere; }
.member-app h2 { font-size:16px; font-weight:600; letter-spacing:-.02em; }
.member-app .m-panel { padding:24px; border-radius:12px; background:var(--surface); border:1px solid var(--outline); box-shadow:none; }
.member-app .m-button { min-height:44px; padding:10px 16px; border:1px solid var(--outline); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; justify-content:center; transition:background .18s,transform .18s; }
.member-app .m-button:hover { background:var(--surface-hover); transform:translateY(-1px); }
.member-app .m-button:active,.button:active { transform:scale(.98); }
.member-app .m-button-primary,.member-app .m-plan-purchase { border-color:var(--primary); background:var(--primary); color:var(--surface); }
.member-app .m-plan-purchase { color:var(--surface)!important; }
.member-app .m-button-primary:hover,.member-app .m-plan-purchase:hover { background:var(--primary-hover); }
.member-app .m-text-button { color:var(--primary); min-height:44px; font-size:12px; }
.m-form-field :is(input,select,textarea),.member-app select { background:var(--input); border-color:var(--outline); border-radius:8px; }
.m-dialog { border:1px solid var(--outline); background:var(--surface); color:var(--text); border-radius:16px; box-shadow:0 32px 80px #061c2540; }
.m-dialog::backdrop { background:#061c2555; backdrop-filter:blur(3px); }
.m-dialog-heading { border-color:var(--outline); }
.m-dialog-heading h2 { color:var(--heading); }
.m-dialog-content,.m-dialog-footer { min-width:0; overflow-wrap:anywhere; }
.m-avatar { background:var(--ss-soft); color:var(--primary); border-color:var(--outline); border-radius:12px; }
.m-sub-status { background:var(--ss-soft); color:var(--primary); }
.m-pagination button,.m-page-tools .m-button { min-height:44px; }
.m-rich-html :is(pre,code,table) { max-width:100%; }
.m-rich-html pre { overflow-x:auto; white-space:pre; }
.toast { border-radius:10px; box-shadow:0 10px 40px #17352f22; }

/* A single centered account entrance on a full mountain canvas. */
.ss-access-page { display:flex; flex-direction:column; min-height:100svh; background:var(--background); }
.ss-access-page::before { display:none; }
.ss-landscape { position:absolute; inset:0; color:var(--primary); pointer-events:none; overflow:hidden; }
.ss-landscape svg { width:100%; height:100%; display:block; }
.ss-access-page .page-navigation { width:100%; height:96px; max-width:none; padding:0 clamp(20px,5vw,72px); }
.ss-access-page .brand { gap:10px; }
.ss-access-page .brand-wordmark strong { color:var(--heading); font-size:21px; letter-spacing:2px; }
.ss-access-page .brand-wordmark small { letter-spacing:1.8px; }
.ss-access { width:min(440px,100%); padding:22px 20px; margin:auto; z-index:1; position:relative; }
.ss-access .auth-container { width:100%; }
.ss-access .form-shell { margin:0; max-width:none; padding:32px; border-radius:16px; border:1px solid var(--outline); box-shadow:0 20px 60px #17352f0b; background:var(--surface); }
.ss-access .form-kicker { font-size:10px; color:var(--primary); margin:0 0 14px; letter-spacing:2px; }
.ss-access .form-shell h2 { font-size:26px; margin:0 0 24px; color:var(--heading); letter-spacing:.01em; }
.ss-access .auth-tabs { padding:0; background:none; border-radius:0; border-bottom:1px solid var(--outline); margin-bottom:22px; gap:16px; }
.ss-access .auth-tabs a { border-radius:0; width:auto; padding:0 14px; border-bottom:2px solid transparent; min-height:44px; }
.ss-access .auth-tabs a[aria-current] { color:var(--primary); border-bottom-color:var(--primary); box-shadow:none; background:none; }
.ss-access .field-group { margin-bottom:16px; }
.ss-access .auth-preview { border:1px solid var(--outline); margin-top:16px; font-size:12px; }
.ss-access-page .auth-footer { margin:0; width:100%; max-width:none; position:relative; padding:24px clamp(20px,5vw,72px); font-size:11px; }

/* Plan sheets: allowance first, billing and action at the foot. */
.m-plan-center-heading { margin-bottom:20px; }
.m-plan-filters { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--outline); border-radius:9px; background:var(--surface); width:fit-content; }
.m-plan-filters button { min-height:44px; padding:8px 17px; border-radius:6px; background:none; color:var(--secondary); font-size:12px; }
.m-plan-filters button.is-active { background:var(--ss-soft); color:var(--primary); }
.m-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.member-app .ss-plan { display:flex; flex-direction:column; gap:0; min-width:0; padding:20px; border:1px solid var(--outline); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:none; }
.member-app .ss-plan-selected { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.ss-plan-name { display:grid; grid-template-columns:auto 1fr; align-content:start; align-items:start; gap:8px; min-width:0; min-height:52px; }
.ss-plan-name h2 { font-size:16px; line-height:1.45; overflow-wrap:anywhere; margin:0; min-height:0; }
.ss-plan-index { color:var(--tertiary); font-size:10px; line-height:24px; font-variant-numeric:tabular-nums; }
.ss-plan-popular { grid-column:2; color:var(--primary); font-size:10px; margin-top:-2px; }
.ss-plan-allowance { display:flex; flex-direction:column; padding:24px 0 18px; gap:7px; border-bottom:1px solid var(--outline); margin-bottom:18px; }
.ss-plan-allowance>span { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--secondary); }
.ss-plan-allowance .m-icon { width:14px; height:14px; }
.ss-plan-allowance strong { font-size:30px; font-weight:550; line-height:1.2; letter-spacing:-1px; color:var(--heading); }
.ss-plan-allowance small { color:var(--secondary); font-size:10px; }
.ss-plan .m-plan-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px; margin:0 0 18px; min-width:0; padding:0; color:var(--heading); }
.ss-plan .m-plan-price strong { font-size:26px; letter-spacing:-.03em; }
.ss-plan .m-plan-price small { font-size:13px; }
.ss-plan .m-plan-price>span { font-size:11px; color:var(--secondary); }
.ss-plan-facts { display:none; }
.ss-plan .m-plan-details { display:block; margin:0 0 20px; padding:0; border:0; background:none; }
.ss-plan .m-plan-details summary { display:none; }
.ss-plan .m-plan-card-features { display:grid; gap:4px; list-style:none; margin:0; padding:0; border-top:0; font-size:11px; color:var(--secondary); }
.ss-plan .m-plan-feature-row { display:flex; gap:8px; align-items:flex-start; padding:4px 0; margin:0; }
.ss-plan .m-plan-feature-icon { display:inline-flex; align-items:center; color:var(--primary); }
.ss-plan .m-plan-feature-icon .m-icon { width:15px; height:15px; margin-top:2px; }
.ss-plan .m-plan-card-footer { display:grid; grid-template-columns:1fr; margin-top:auto; gap:8px; border:0; padding:0; }
.ss-plan .m-plan-cycle { min-width:0; display:block; }
.ss-plan .m-plan-cycle select { width:100%; min-width:0; height:44px; padding:8px; border:1px solid var(--outline); font-size:11px; color:var(--text); }
.ss-plan .m-plan-purchase { width:100%; min-height:44px; }
.m-plan-details-close { display:none; }
.m-plan-details[open] .m-plan-details-open { display:none; }
.m-plan-details[open] .m-plan-details-close { display:inline; }

@media(min-width:768px) and (max-width:1100px) { .m-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
  .member-app { font-size:12px; }
  .member-app .m-panel { padding:16px; }
  .toast { bottom:calc(78px + env(safe-area-inset-bottom)); }
  .ss-access-page .page-navigation { height:76px; padding:0 16px; }
  .ss-access-page .brand img { width:34px; height:34px; }
  .ss-access-page .brand-wordmark strong { font-size:17px; }
  .ss-access-page .brand-wordmark small { font-size:7px; }
  .ss-access { padding:12px 16px 20px; }
  .ss-access .form-shell { padding:24px; border-radius:14px; }
  .ss-access-page .auth-footer { padding:20px 16px; font-size:9px; gap:12px; }
  .ss-access .form-shell h2 { font-size:24px; margin-bottom:16px; }
  .ss-access .get-code { height:44px; top:2px; }
  .m-plan-center-heading { margin-bottom:10px; }
  .m-plan-filters { width:100%; padding:2px; }
  .m-plan-filters button { flex:1; padding:6px 8px; font-size:11px; }
  .m-plan-grid { grid-template-columns:1fr; gap:10px; }
  .member-app .ss-plan { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:10px 14px; column-gap:8px; border-radius:10px; }
  .ss-plan-name { gap:5px; align-items:center; min-height:0; }
  .ss-plan-name h2 { font-size:14px; line-height:20px; }
  .ss-plan-index { line-height:20px; }
  .ss-plan-popular { display:none; }
  .ss-plan-allowance { display:none; }
  .ss-plan .m-plan-price { grid-column:2; grid-row:1; margin:0; max-width:145px; justify-content:flex-end; gap:2px; align-items:baseline; }
  .ss-plan .m-plan-price strong { font-size:21px; line-height:25px; }
  .ss-plan .m-plan-price small { font-size:11px; }
  .ss-plan .m-plan-price>span { font-size:10px; }
  .ss-plan-facts { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--secondary); padding:7px 0 2px; font-size:11px; }
  .ss-plan-facts>span { display:flex; align-items:center; gap:4px; }
  .ss-plan-facts .m-icon { width:14px; height:14px; }
  .ss-plan .m-plan-details { grid-column:1/-1; margin:0; }
  .ss-plan .m-plan-details summary { display:flex; align-items:center; min-height:44px; color:var(--primary); font-size:11px; cursor:pointer; list-style:none; }
  .ss-plan .m-plan-details summary::-webkit-details-marker { display:none; }
  .ss-plan .m-plan-details:not([open])>.m-plan-card-features { display:none; }
  .ss-plan .m-plan-details[open]>.m-plan-card-features { padding:0 0 12px; }
  .ss-plan .m-plan-card-footer { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .ss-plan .m-plan-cycle select { height:44px; font-size:12px; }
  .ss-plan .m-plan-purchase { font-size:12px; padding:8px; }
}
@media(max-width:767px) and (max-height:600px) {
  .shanshui-shell .m-content:has(.m-plan-center) { padding-top:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }