/* Changshun / Deep-sea chapter. Presentation only; never override hidden or security states. */
:root {
  --bg:#f6f5f0;
  --surface:#fffefb;
  --text:#193f43;
  --text-2:#4f6663;
  --muted:#62716f;
  --primary:#286c64;
  --primary-dark:#123e43;
  --primary-soft:#e9efe8;
  --border:#dce1da;
  --line:#dce1da;
  --radius:9px;
  --radius-lg:16px;
  --shadow:0 4px 18px #14352c05;
  --shadow-lg:0 16px 45px #14352c0b;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:var(--font-brand);
}
body { background:var(--bg); font-family:var(--font); font-weight:400; }
button,input,select,textarea { font-family:var(--font); }
h1,h2,.brand,.mobile-brand { font-family:var(--font-brand); }
h1,h2 { letter-spacing:-.035em; }
.brand { font-size:18px; letter-spacing:.03em; }
.brand::before { background:#123e43; color:#f1f0df; border-radius:8px 8px 3px 8px; }
.nav,.topbar { background:var(--bg); border-color:transparent; }
/* The legacy admin header used white text on a dark background. */
.topbar,.topbar .brand { color:var(--text); }
.topbar .brand-sub { color:var(--text-2); opacity:1; }
.topbar .btn-ghost { color:var(--text); background:var(--surface); border-color:#78978a; }
.topbar .btn-ghost:hover { color:var(--text); background:var(--primary-soft); border-color:#507d67; }
.topbar .btn-ghost:focus-visible { outline:2px solid var(--primary-dark); outline-offset:3px; }
.nav-inner { min-height:92px; max-width:1280px; }
.nav-links { gap:6px; background:#eaece5; border:1px solid #dfe4dc; padding:4px; border-radius:30px; }
.nav-links a { padding:9px 18px; border-radius:24px; font-size:13px; min-height:42px; display:inline-flex; align-items:center; }
.nav-links .nav-current,.nav-links [aria-current=page] { background:var(--surface); color:var(--text); box-shadow:0 2px 8px #263c2910; }
.nav-account,.account-trigger { background:var(--surface); border-color:var(--border); }
.account-panel { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg); }
.account-avatar,.account-option:hover { background:var(--primary-soft); }
.btn { border-radius:8px; font-weight:550; }
.btn:not(.btn-ghost):hover { background:#215650; }
.btn-ghost:hover { background:var(--primary-soft); border-color:#a4b8ab; }
.card,.configuration,.order-summary { background:var(--surface); border-color:var(--border); border-radius:16px; box-shadow:0 2px 10px #14352c03; }
.field input,.field textarea,.field select,.amount-input { background:#f8f9f3; border-color:#b7c6bc; border-radius:8px; }
.field input:focus,.field textarea:focus,.field select:focus { background:#fffefb; border-color:#598474; box-shadow:0 0 0 3px #59847412; }
.field input[aria-invalid=true],.field textarea[aria-invalid=true] { border-color:var(--danger); }
.section-kicker { letter-spacing:.13em; font-size:11px; color:#506f5e; }
.section-heading h2,.page-heading h1 { font-family:var(--font-display); font-weight:700; }
.section-heading p,.section-sub { color:var(--muted); }
.mode-card,.term-card,.plan-card,.country-option { border-radius:10px; }
.mode-card.selected,.term-card.selected,.plan-card.selected,.country-option:has(input:checked) { background:#eaf0e7; border-color:#507d67; }
.checkout-terms { background:#f1f4ec; border-color:#d3dfd0; }
.checkout-terms-heading>span { background:#dce7d9; color:#315e49; }
.checkout-terms-summary,.terms-consent { color:#3d584c; }
.checkout-button { min-height:50px; }
.records-nav { border-color:var(--border); }
.records-nav a { background:#e9eee5; border-radius:8px; }
.orders-page-heading,.page-heading { margin-bottom:30px; }
.auth-layout { gap:72px; align-items:center; padding-top:64px; padding-bottom:80px; }
.auth-intro { padding:42px 0; }
.auth-intro h1 { font-size:clamp(36px,4vw,54px); line-height:1.4; }
.auth-intro .section-sub { line-height:1.95; }
.auth-card { padding:36px; box-shadow:0 20px 60px #25423706; }
.auth-card .tabs { background:#eaece5; border-radius:10px; padding:4px; border-bottom:0; }
.auth-card .tab { border:0; border-radius:7px; font-size:14px; }
.auth-card .tab.active { background:var(--surface); color:var(--text); box-shadow:0 2px 8px #263c2910; }
.auth-card .field input { background:#f8f9f3; border-color:#afc2b3; }
.auth-entry-note,.auth-key-hint { color:var(--text-2); }
.auth-form-footer { border-color:var(--border); }
.site-footer { background:var(--bg); border-top:1px solid var(--border); }
.site-footer .brand::before { background:#123e43; }
.site-footer .footer-inner { padding-block:38px; }
dialog { background:var(--surface); color:var(--text); border-color:var(--border); border-radius:18px; box-shadow:0 24px 80px #123e431a; }
dialog::backdrop { background:#102d3266; backdrop-filter:blur(5px); }
.payment-security-dialog { border-color:var(--border); }
.water-feedback-wash { opacity:.55; }
.mobile-header,.mobile-bottom-nav { background:#f6f5f0f5; border-color:var(--border); }
.mobile-metric,.mobile-record,.mobile-note { background:var(--surface); border-color:var(--border); }
.mobile-metric:first-child { background:#123e43; border-color:#123e43; }
.mobile-filters { background:#e9eee5; }
.mobile-filters button[aria-pressed=true] { background:#123e43; }
@media (max-width:760px) {
  .nav-inner { min-height:76px; gap:14px; padding-inline:22px; }
  .nav-links a { padding:9px 12px; font-size:12px; }
  .auth-layout { gap:24px; padding-top:32px; }
  .auth-intro { padding:0; }
  .auth-intro h1 { font-size:34px; }
}
@media (max-width:560px) {
  .nav-inner { padding:18px 20px; flex-wrap:wrap; }
  .nav .brand { font-size:16px; }
  .nav .brand::before { width:30px; height:32px; font-size:21px; }
  .nav-links { order:3; width:100%; justify-content:center; border-radius:8px; }
  .nav-links a { justify-content:center; flex:1; border-radius:5px; min-height:44px; }
  .nav-account,.account-trigger { min-height:44px; }
  .auth-card { padding:25px 20px; border-radius:14px; }
  .auth-intro h1 { font-size:31px; }
  input,textarea,select,.field input,.field textarea,.field select { font-size:16px; }
  .btn-sm,.text-button { min-height:44px; }
  .site-footer .footer-inner { padding-block:30px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}