:root {
      --bg: #08795a;
      --bg-2: #076c50;
      --bg-3: #0a8a65;
      --panel: #066548;
      --line: rgba(255,255,255,.16);
      --text: #ffffff;
      --muted: #d3f3e6;
      --accent: #bbf7d0;
      --accent-2: #10b981;
      --ok: #bbf7d0;
      --bad: #ffe4e6;
      --shadow: 0 10px 30px rgba(3,52,38,.22);
      --radius: 16px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    .topbar {
      position: sticky; top: 0; z-index: 40;
      background: rgba(255,255,255,.96);
      color: #0b1f1c;
      border-bottom: 1px solid rgba(0,0,0,.06);
      backdrop-filter: blur(10px);
    }
    .topbar-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding: .75rem 1.25rem;
    }
    .brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .01em; }
    .brand > a { display: flex; align-items: center; gap: .6rem; }
    .logo {
      width: 34px; height: 34px; border-radius: 10px;
      background: url(/logo-mark.svg?v=20261002-duochat) center / cover no-repeat;
      display: grid; place-items: center; color: transparent; font-size: 0; overflow: hidden;
      box-shadow: 0 6px 16px rgba(20,184,166,.35);
    }
    .nav { display: flex; gap: .35rem; flex-wrap: wrap; }
    .nav a {
      padding: .45rem .8rem; border-radius: 999px; color: #345850; font-weight: 600; font-size: .92rem;
    }
    .nav a.active, .nav a:hover { background: #14b8a6; color: #fff; }
    .top-actions { display: flex; align-items: center; gap: .5rem; }
    .pill {
      border: none; border-radius: 999px; padding: .45rem .85rem;
      background: #ecfdf5; color: #047857; font-weight: 700; cursor: pointer;
    }
    .lang-switch {
      display: inline-flex;
      border: 1px solid rgba(15,118,110,.22);
      border-radius: 999px;
      overflow: hidden;
      background: #f0fdf9;
    }
    .lang-switch button {
      border: none;
      background: transparent;
      padding: .4rem .7rem;
      font-weight: 800;
      font-size: .8rem;
      color: #345850;
      cursor: pointer;
      letter-spacing: .02em;
    }
    .lang-switch button.active {
      background: #14b8a6;
      color: #fff;
    }
    .lang-switch button:hover:not(.active) { background: rgba(20,184,166,.12); }
    .notice {
      background: #076c50; color: #ecfdf5; font-size: .88rem;
      padding: .55rem 1.25rem; text-align: center; border-bottom: 1px solid var(--line);
    }
    .hero {
      background:
        radial-gradient(1000px 400px at 10% -10%, rgba(20,184,166,.25), transparent 60%),
        linear-gradient(180deg, #0f9d6e 0%, var(--bg) 100%);
      border-bottom: 1px solid var(--line);
    }
    .hero-inner {
      max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem 1.5rem;
      display: block;
    }
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; }
      .nav { display: none; }
    }
    .badge {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .25rem .65rem; border-radius: 999px; background: rgba(20,184,166,.15);
      color: #a7f3d0; font-size: .8rem; font-weight: 700; margin-bottom: .8rem;
    }
    .hero h1 { margin: 0 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    .hero h1 em { font-style: normal; color: #a7f3d0; }
    .hero p { margin: 0 0 1.1rem; color: var(--muted); max-width: 36rem; line-height: 1.6; }
    .cta {
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--accent); color: #042f2e; border: none; border-radius: 999px;
      padding: .75rem 1.15rem; font-weight: 800; cursor: pointer;
      box-shadow: 0 10px 24px rgba(20,184,166,.35);
    }
    .feature-grid {
      margin-top: 1.1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem;
    }
    .feature {
      display: flex; gap: .5rem; align-items: flex-start; color: #e2f7ee; font-size: .88rem;
    }
    .feature i {
      width: 18px; height: 18px; border-radius: 6px; background: rgba(20,184,166,.2);
      display: inline-block; margin-top: .15rem;
    }
    .layout {
      max-width: 1200px; margin: 0 auto; padding: 1.25rem;
      display: grid; grid-template-columns: 260px 1fr; gap: 1rem;
    }
    @media (max-width: 900px) {
      .layout { grid-template-columns: 1fr; }
    }
    .side, .main {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: var(--radius); box-shadow: var(--shadow);
    }
    .side { padding: 1rem; height: fit-content; position: sticky; top: 78px; }
    @media (max-width: 900px) { .side { position: static; } }
    .side h2, .main-head h2 {
      margin: 0 0 .75rem; font-size: 1.05rem;
    }
    .side-section { margin-bottom: 1.1rem; }
    .side-section .label {
      color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; margin-bottom: .45rem;
    }
    .chip-list { display: flex; flex-direction: column; gap: .4rem; max-height: 360px; overflow: auto; }
    .chip {
      text-align: left; border: 1px solid var(--line); background: transparent; color: var(--text);
      border-radius: 12px; padding: .65rem .75rem; cursor: pointer;
    }
    .chip:hover { border-color: rgba(20,184,166,.45); }
    .chip.active { background: rgba(20,184,166,.16); border-color: var(--accent); color: #d1fae5; font-weight: 700; }
    .tips {
      background: rgba(255,255,255,.03); border: 1px solid var(--line);
      border-radius: 12px; padding: .8rem; color: var(--muted); font-size: .82rem; line-height: 1.55;
    }
    .main { padding: 1rem; }
    .main-head { display: flex; justify-content: space-between; gap: .75rem; align-items: end; margin-bottom: .9rem; flex-wrap: wrap; }
    .toolbar { display: flex; gap: .55rem; flex-wrap: wrap; width: 100%; }
    .search {
      flex: 1; min-width: 200px; background: #055a40; border: 1px solid var(--line);
      color: var(--text); border-radius: 12px; padding: .75rem .9rem; outline: none;
    }
    .search:focus { border-color: rgba(20,184,166,.55); }
    .select, .btn {
      background: #055a40; border: 1px solid var(--line); color: var(--text);
      border-radius: 12px; padding: .75rem .9rem; cursor: pointer;
    }
    .btn.primary { background: var(--accent); color: #042f2e; border: none; font-weight: 800; }
    .count { color: var(--muted); font-size: .88rem; margin: .2rem 0 .8rem; }
    .supplier-note {
      display: none; color: var(--muted); font-size: .78rem; margin: -.4rem 0 .75rem; opacity: .85;
    }
    .list { display: flex; flex-direction: column; gap: .65rem; }
    .row {
      display: grid; grid-template-columns: 56px 1fr auto; gap: .85rem; align-items: center;
      background: rgba(255,255,255,.03); border: 1px solid var(--line);
      border-radius: 14px; padding: .85rem;
    }
    .thumb {
      width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #12352f;
    }
    .thumb.fallback {
      display: grid; place-items: center; color: #a7f3d0; font-weight: 800; font-size: .85rem;
    }
    .row h3 { margin: 0 0 .25rem; font-size: 1rem; }
    .meta { color: var(--muted); font-size: .82rem; display: flex; gap: .55rem; flex-wrap: wrap; }
    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .25rem; }
    .dot.ok { background: var(--ok); }
    .dot.bad { background: var(--bad); }
    .buy-box { text-align: right; min-width: 110px; }
    .price { font-size: 1.1rem; font-weight: 800; margin-bottom: .45rem; }
    .buy {
      background: var(--accent); color: #042f2e; border: none; border-radius: 999px;
      padding: .55rem .95rem; font-weight: 800; cursor: pointer;
    }
    .buy:disabled { opacity: .45; cursor: not-allowed; }
    .empty, .error, .loading {
      text-align: center; padding: 2.5rem 1rem; color: var(--muted);
    }
    .error { color: #ffe4e6; }
    footer {
      max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem;
      color: var(--muted); font-size: .85rem; text-align: center;
    }
  
    .subcats { display:flex; flex-wrap:wrap; gap:.45rem; margin:.75rem 0 1rem; }
    .subcats:empty { display:none; }
    .subcat {
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:#d7efe6;
      border-radius:999px;
      padding:.35rem .85rem;
      font-size:.86rem;
      cursor:pointer;
    }
    .subcat:hover { border-color:#2dd4a8; color:#fff; }
    .subcat.active {
      background:linear-gradient(135deg,#0f766e,#14b8a6);
      border-color:transparent;
      color:#fff;
      font-weight:600;
    }
    .subcat .n { opacity:.7; margin-left:.25rem; font-size:.78rem; }


    .auth-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
    .auth-bar .bal { font-weight:700; color:#047857; font-size:.9rem; }
    .auth-bar .email { font-size:.85rem; color:#345850; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pill.ghost { background:#fff; border:1px solid rgba(15,118,110,.25); color:#0f766e; }
    .pill.danger { background:#fff1f2; color:#be123c; }
    .modal-backdrop {
      position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
      display:none; align-items:center; justify-content:center; padding:1rem;
    }
    .modal-backdrop.open { display:flex; }
    .modal {
      width:min(400px,100%); background:#066548; border:1px solid rgba(255,255,255,.1);
      border-radius:16px; padding:1.25rem; box-shadow:var(--shadow); color:var(--text);
    }
    .modal h3 { margin:0 0 1rem; font-size:1.15rem; }
    .modal .tabs { display:flex; gap:.35rem; margin-bottom:1rem; }
    .modal .tabs button {
      flex:1; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--muted);
      border-radius:999px; padding:.45rem; cursor:pointer; font-weight:700;
    }
    .modal .tabs button.active { background:var(--accent); color:#042f2e; border-color:transparent; }
    .modal label { display:block; font-size:.82rem; color:var(--muted); margin:.55rem 0 .25rem; }
    .modal input, .modal .qty-input {
      width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.25); color:var(--text); padding:.65rem .75rem;
    }
    .modal .actions { display:flex; gap:.5rem; margin-top:1rem; }
    .modal .actions button { flex:1; border:none; border-radius:999px; padding:.65rem; font-weight:800; cursor:pointer; }
    .modal .actions .primary { background:var(--accent); color:#042f2e; }
    .modal .actions .secondary { background:rgba(255,255,255,.08); color:var(--text); }
    .modal .err { color:#ffe4e6; font-size:.85rem; min-height:1.2em; margin-top:.5rem; }
    .toast-wrap {
      position:fixed; top:1rem; right:1rem; z-index:120; display:flex; flex-direction:column; gap:.5rem;
      max-width:min(360px,92vw);
    }
    .toast {
      background:#076c50; border:1px solid rgba(255,255,255,.12); color:var(--text);
      padding:.75rem 1rem; border-radius:12px; box-shadow:var(--shadow); font-size:.9rem;
    }
    .toast.bad { border-color:rgba(251,113,133,.5); }
    .toast.ok { border-color:rgba(52,211,153,.5); }



/* Landing page — balanced centered hero */
.hero-inner.hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 2.75rem 1.25rem 2.25rem;
}
.hero-centered .badge { margin-bottom: .9rem; }
.hero-centered h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.hero-centered h1 em { font-style: normal; color: #a7f3d0; }
.hero-lead {
  margin: 0 auto 1.35rem;
  color: var(--muted);
  max-width: 38rem;
  line-height: 1.65;
  font-size: 1.02rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.cta.ghost {
  background: transparent;
  color: #d1fae5;
  box-shadow: none;
  border: 1px solid rgba(20,184,166,.45);
}
.cta.ghost:hover { background: rgba(20,184,166,.12); }
.platform-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.6rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.platform-strip-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a7f3d0;
  opacity: .9;
}
.platform-strip .promo-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
}
.platform-strip .promo-links a {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(20,184,166,.14);
  color: #d1fae5;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid rgba(20,184,166,.28);
  text-decoration: none;
}
.platform-strip .promo-links a:hover {
  background: var(--accent);
  color: #042f2e;
  border-color: transparent;
}
.feature-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
@media (max-width: 800px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .feature-row { grid-template-columns: 1fr; }
}
.feature-row .feature {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  text-align: left;
  color: #e2f7ee;
  font-size: .88rem;
  line-height: 1.4;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}
.feature-row .feature i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(20,184,166,.28);
  margin-top: .12rem;
}
.how {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.75rem;
}
.how-head { text-align: center; margin-bottom: 1.35rem; }
.how-head h2 { margin: 0 0 .4rem; font-size: 1.4rem; }
.how-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .how-grid { grid-template-columns: 1fr; }
}
.how-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.15rem;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.how-step:hover {
  border-color: rgba(20,184,166,.35);
  transform: translateY(-2px);
}
.how-step .num {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(20,184,166,.2); color: #a7f3d0;
  display: grid; place-items: center; font-weight: 800; font-size: .88rem;
  margin-bottom: .7rem;
}
.how-step h3 { margin: 0 0 .4rem; font-size: 1rem; }
.how-step p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.page-home footer {
  margin-top: 0;
  padding: 1.5rem 1.25rem 2rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  border-top: 1px solid var(--line);
}

.page-home .layout { display: none; }

/* Auth card — light SMS-Duo-like form on dim overlay */
    .modal-backdrop.auth-backdrop {
      background: rgba(5, 28, 25, .55);
      backdrop-filter: blur(6px);
    }
    .modal.auth-card {
      background: #fff;
      color: #0b1f1c;
      width: min(420px, 94vw);
      padding: 1.6rem 1.5rem 1.35rem;
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
      border: 1px solid rgba(15,118,110,.12);
      position: relative;
    }
    .modal.auth-card h3 {
      margin: 0 0 .25rem;
      font-size: 1.35rem;
      font-weight: 800;
      color: #0b1f1c;
    }
    .modal.auth-card .auth-sub {
      margin: 0 0 1rem;
      color: #5b736c;
      font-size: .92rem;
    }
    .modal.auth-card label {
      color: #345850;
      font-weight: 600;
    }
    .modal.auth-card label .opt { font-weight: 500; color: #8aa39b; }
    .modal.auth-card input[type="email"],
    .modal.auth-card input[type="password"],
    .modal.auth-card input[type="text"] {
      width: 100%;
      border: 1px solid rgba(15,118,110,.22);
      background: #f7fbfa;
      color: #0b1f1c;
      border-radius: 12px;
      padding: .7rem .85rem;
      outline: none;
    }
    .modal.auth-card input:focus {
      border-color: #14b8a6;
      box-shadow: 0 0 0 3px rgba(20,184,166,.2);
      background: #fff;
    }
    .auth-close {
      position: absolute; top: .7rem; right: .75rem;
      width: 32px; height: 32px; border: none; border-radius: 999px;
      background: #f0f5f3; color: #345850; font-size: 1.25rem; line-height: 1;
      cursor: pointer; font-weight: 700;
    }
    .auth-close:hover { background: #e2eeea; }
    .auth-check {
      display: flex !important; align-items: center; gap: .5rem;
      margin: .85rem 0 .35rem !important; cursor: pointer; user-select: none;
      font-size: .9rem !important; color: #345850 !important;
    }
    .auth-check input { width: auto !important; accent-color: #0d9488; }
    .auth-primary {
      width: 100%; margin-top: .75rem; border: none; border-radius: 999px;
      padding: .8rem 1rem; font-weight: 800; cursor: pointer;
      background: linear-gradient(145deg, #4ade80, #22c58b); color: #04382a;
      box-shadow: 0 8px 20px rgba(13,148,136,.35);
    }
    .auth-primary:hover { filter: brightness(1.05); }
    .auth-forgot {
      display: block; text-align: center; margin-top: .75rem;
      color: #0d9488; font-size: .9rem; font-weight: 600;
    }
    .auth-forgot:hover { text-decoration: underline; }
    .auth-switch {
      text-align: center; margin-top: 1rem; color: #5b736c; font-size: .9rem;
    }
    .auth-link-btn {
      border: none; background: none; color: #0d9488; font-weight: 800;
      cursor: pointer; padding: 0; font: inherit;
    }
    .auth-link-btn:hover { text-decoration: underline; }
    .modal.auth-card .err { color: #be123c; }
    .pill.admin-link {
      background: #042f2e; color: #a7f3d0; border: 1px solid rgba(94,234,212,.35);
      text-decoration: none; display: inline-flex; align-items: center;
    }
    .pill.admin-link:hover { background: #0f766e; color: #fff; }

/* ===== Tutorials (humkt blog sync) ===== */
.page-tutorials .nav a.active,
.page-tutorial-detail .nav a.active {
  color: #0d9488;
}
.tut-wrap, .tut-detail-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.tut-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.tut-head h1 {
  margin: 0 0 .25rem;
  font-size: 1.75rem;
  letter-spacing: -.02em;
}
.tut-sub { margin: 0; color: var(--muted); font-size: .95rem; }
.tut-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.tut-filter {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: .45rem .95rem;
  cursor: pointer;
  font-weight: 650;
  font-size: .9rem;
}
.tut-filter:hover { border-color: rgba(20,184,166,.45); }
.tut-filter.active {
  background: linear-gradient(145deg, #14b8a6, #0d9488);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,148,136,.3);
}
.tut-search {
  position: relative; display: flex; align-items: center;
  margin: 0 0 .85rem; max-width: 560px;
}
.tut-search-ico {
  position: absolute; left: .85rem; width: 18px; height: 18px;
  color: var(--muted); pointer-events: none;
}
.tut-search input {
  width: 100%; box-sizing: border-box;
  padding: .7rem 2.6rem .7rem 2.55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 16px;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.tut-search input::placeholder { color: var(--muted); opacity: .8; }
.tut-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tut-search input:focus { border-color: rgba(20,184,166,.6); box-shadow: 0 0 0 3px rgba(20,184,166,.18); }
.tut-search-clear {
  position: absolute; right: .4rem; width: 2rem; height: 2rem;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.tut-search-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
.tut-search-clear[hidden] { display: none; }
.tut-card mark { background: rgba(45,212,191,.28); color: inherit; border-radius: 3px; padding: 0 .1em; }
.tut-noresult b { display: block; font-size: 1.1rem; color: var(--text); margin-bottom: .35rem; }
.tut-noresult p { margin: 0 0 1rem; }
.tut-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem; color: var(--muted); font-size: .9rem;
}
.tut-reload { padding: .4rem .85rem; font-size: .85rem; }
.tut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}
.tut-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
.tut-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.35);
}
.tut-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #076c50, #0a8461);
  overflow: hidden;
}
.tut-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tut-cover-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: rgba(94,234,212,.55); font-weight: 800; font-size: 1.4rem;
  letter-spacing: .08em;
}
.tut-tag {
  position: absolute; left: .65rem; top: .65rem;
  font-size: .72rem; font-weight: 800;
  padding: .28rem .55rem; border-radius: 999px;
  background: rgba(5,90,64,.88); color: #d1fae5;
  border: 1px solid rgba(45,212,191,.35);
}
.tut-tag--official { background: rgba(13,148,136,.92); color: #fff; border-color: transparent; }
.tut-tag--seller { background: rgba(15,59,53,.92); color: #a7f3d0; }
.tut-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tut-meta { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--muted); font-size: .78rem; }
.tut-title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.tut-title a:hover { color: #a7f3d0; }
.tut-excerpt {
  margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.tut-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  margin-top: .35rem; padding-top: .55rem; border-top: 1px solid var(--line);
  font-size: .82rem;
}
.tut-more { color: #a7f3d0; font-weight: 700; white-space: nowrap; }
.tut-more:hover { text-decoration: underline; }
.tut-loading, .tut-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 2.5rem 1rem; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius);
}
.tut-attr {
  margin: 1.5rem 0 0; text-align: center; color: rgba(211,243,230,.8); font-size: .8rem;
}

/* Detail */
.tut-back {
  display: inline-block; margin-bottom: 1rem; color: #a7f3d0; font-weight: 700; font-size: .92rem;
}
.tut-back:hover { text-decoration: underline; }
.tut-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.75rem;
  box-shadow: var(--shadow);
}
.tut-art-head .tut-tag { position: static; display: inline-block; margin-bottom: .75rem; }
.tut-art-head h1 {
  margin: 0 0 .75rem; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.3;
}
.tut-art-meta {
  display: flex; flex-wrap: wrap; gap: .75rem 1.1rem;
  color: var(--muted); font-size: .88rem; margin-bottom: .25rem;
}
.tut-art-cover {
  margin: 1.1rem 0 1.25rem; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.tut-art-cover img { width: 100%; display: block; max-height: 420px; object-fit: cover; }
.tut-art-body {
  color: var(--text); font-size: 1rem; line-height: 1.75;
  overflow-wrap: anywhere;
}
.tut-art-body p { margin: 0 0 1rem; }
.tut-art-body img {
  max-width: 100%; height: auto; border-radius: 10px;
  margin: .5rem 0; border: 1px solid var(--line);
}
.tut-art-body a { color: #a7f3d0; text-decoration: underline; }
.tut-art-body h2, .tut-art-body h3 { margin: 1.4rem 0 .6rem; color: #d1fae5; }
.tut-art-body ul, .tut-art-body ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.tut-art-body code, .tut-art-body pre {
  background: #042f2e; border-radius: 8px; padding: .15rem .4rem; font-size: .9em;
}
.tut-art-body pre { padding: .85rem 1rem; overflow: auto; }

@media (max-width: 720px) {
  .tut-head { align-items: stretch; }
  .tut-search { max-width: none; }
  .tut-article { padding: 1rem; }
}

/* ===== Product detail page (/product/:id) ===== */
.pdp-wrap { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 1rem; }
.pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); margin: .25rem 0 1rem; }
.pdp-crumbs a { color: #a7f3d0; }
.pdp-crumbs a:hover { text-decoration: underline; }
.pdp-crumbs i { font-style: normal; opacity: .5; }
.pdp-crumbs span { color: var(--text); opacity: .85; }
.pdp-main {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 1.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.pdp-main[hidden], .pdp-tabs-card[hidden], .pdp-side-card[hidden], .pdp-related[hidden] { display: none; }
@media (max-width: 820px) { .pdp-main { grid-template-columns: 1fr; } }
.pdp-cover {
  border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, #076c50, #0a8461);
  aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line);
}
.pdp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-cover-fallback { color: rgba(94,234,212,.6); font-weight: 800; font-size: 2.4rem; letter-spacing: .08em; }
.pdp-title { margin: 0 0 .6rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; overflow-wrap: anywhere; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--muted); font-size: .82rem; margin-bottom: .9rem; align-items: center; }
.pdp-chip { background: rgba(20,184,166,.16); color: #a7f3d0; border-radius: 999px; padding: .15rem .6rem; font-weight: 700; }
.pdp-chip.ghost { background: rgba(255,255,255,.05); color: #cde7df; font-weight: 600; }
.pdp-price-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pdp-price { font-size: 1.9rem; font-weight: 800; color: #a7f3d0; }
.pdp-badge { font-size: .8rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; }
.pdp-badge.auto { background: rgba(52,211,153,.15); color: #bbf7d0; border: 1px solid rgba(52,211,153,.35); }
.pdp-badge.manual { background: rgba(251,191,36,.12); color: #fcd34d; border: 1px solid rgba(251,191,36,.3); }
.pdp-stats { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pdp-stat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .9rem; min-width: 96px; }
.pdp-stat[hidden] { display: none; }
.pdp-stat .k { font-size: .75rem; color: var(--muted); }
.pdp-stat .v { font-weight: 800; font-size: 1.02rem; margin-top: .1rem; }
.pdp-stat .v.ok { color: var(--ok); }
.pdp-stat .v.bad { color: var(--bad); }
.pdp-label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.pdp-variants-wrap { margin-bottom: 1rem; }
.pdp-variants-wrap[hidden] { display: none; }
.pdp-variants { display: flex; flex-direction: column; gap: .5rem; max-height: 340px; overflow: auto; padding-right: .2rem; }
.pdp-variant {
  text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: .6rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem;
}
.pdp-variant:hover { border-color: rgba(45,212,191,.5); }
.pdp-variant.active { border-color: var(--accent); background: rgba(20,184,166,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.pdp-variant.out { opacity: .45; cursor: not-allowed; }
.pdp-variant .vn { font-size: .88rem; line-height: 1.4; }
.pdp-variant .vm { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .78rem; color: var(--muted); align-items: center; }
.pdp-variant .vm b { color: #a7f3d0; font-size: .95rem; }
.pdp-buy { border-top: 1px solid var(--line); padding-top: 1rem; }
.pdp-qty { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.pdp-qty .pdp-label { margin: 0; }
.qty-stepper { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #055a40; }
.qty-stepper button { background: transparent; color: var(--text); border: none; width: 38px; font-size: 1.1rem; cursor: pointer; }
.qty-stepper button:hover { background: rgba(20,184,166,.18); }
.qty-stepper input { width: 64px; text-align: center; background: transparent; border: none; color: var(--text); padding: .5rem 0; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-total { color: var(--muted); font-size: .9rem; }
.pdp-buy-btn {
  width: 100%; max-width: 360px; background: linear-gradient(135deg, #4ade80, #22c58b); color: #04382a;
  border: none; border-radius: 999px; padding: .85rem 1.2rem; font-weight: 800; font-size: 1.02rem; cursor: pointer;
  box-shadow: 0 10px 24px rgba(20,184,166,.28);
}
.pdp-buy-btn:hover { filter: brightness(1.07); }
.pdp-buy-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pdp-hint { color: #fcd34d; font-size: .82rem; margin-top: .5rem; min-height: 1em; }
.pdp-tabs-card, .pdp-side-card, .pdp-related {
  margin-top: 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem; box-shadow: var(--shadow);
}
.pdp-tabs { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .65rem; margin-bottom: 1rem; }
.pdp-tab {
  background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 999px;
  padding: .45rem .95rem; font-weight: 700; cursor: pointer;
}
.pdp-tab:hover { color: var(--text); }
.pdp-tab.active { background: rgba(20,184,166,.16); color: #a7f3d0; border-color: rgba(45,212,191,.35); }
.pdp-rich { color: var(--text); font-size: .95rem; line-height: 1.75; overflow-wrap: anywhere; }
.pdp-rich p { margin: 0 0 .6rem; }
.pdp-rich a { color: #a7f3d0; text-decoration: underline; }
.pdp-rich img { max-width: 100%; height: auto; border-radius: 10px; margin: .4rem 0; }
.pdp-rich ul, .pdp-rich ol { padding-left: 1.25rem; }
.pdp-side-card h3, .pdp-related h3 { margin: 0 0 .85rem; font-size: 1.05rem; }
.pdp-res + .pdp-res { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.pdp-res-t { font-weight: 800; color: #d1fae5; margin-bottom: .35rem; }
.pdp-tut-list { margin: 0; padding-left: 1.1rem; line-height: 1.8; }
.pdp-tut-list a { color: #a7f3d0; }
.pdp-tut-list a:hover { text-decoration: underline; }
.pdp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.pdp-rel {
  display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: .7rem;
  transition: border-color .15s ease, transform .15s ease;
}
.pdp-rel:hover { border-color: rgba(45,212,191,.45); transform: translateY(-1px); }
.pdp-rel img, .pdp-rel-fb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #12352f; }
.pdp-rel-fb { display: grid; place-items: center; color: #a7f3d0; font-weight: 800; }
.pdp-rel-n { font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-rel-m { display: flex; flex-wrap: wrap; gap: .55rem; font-size: .76rem; color: var(--muted); margin-top: .3rem; align-items: center; }
.pdp-rel-m b { color: #a7f3d0; font-size: .9rem; }
.pdp-source { text-align: center; color: rgba(211,243,230,.8); font-size: .8rem; margin: 1.25rem 0 0; }
/* catalog rows → clickable, open detail page */
.list .row.row-link { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.list .row.row-link:hover, .list .row.row-link:focus-visible { border-color: rgba(45,212,191,.45); background: rgba(20,184,166,.06); outline: none; }
.list .row.row-link h3 a:hover { color: #a7f3d0; }
a.buy { display: inline-block; text-decoration: none; }
.pdp-after { margin: 0; padding-left: 1.3rem; line-height: 1.8; }
.pdp-after li + li { margin-top: .35rem; }
.pdp-after b { color: #d1fae5; }

/* conn status dot */
#connStatus.pill {
  font-size: 0; line-height: 0; color: transparent;
  width: 12px; height: 12px; min-width: 12px; padding: 0;
  border-radius: 50%; border: none; cursor: default;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22), 0 0 10px rgba(34,197,94,.55);
  align-self: center;
}
#connStatus.pill.is-pending { background: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,.22); }
#connStatus.pill.is-bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22), 0 0 10px rgba(239,68,68,.5); }

/* ===== Homepage hero — two-column (hero2, 2026-09-25) ===== */
.hero.hero2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 420px at 12% 0%, rgba(20,184,166,.22), transparent 62%),
    radial-gradient(620px 420px at 88% 45%, rgba(52,211,153,.14), transparent 65%),
    linear-gradient(180deg, #0f9d6e 0%, var(--bg) 100%);
}
.hero2-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.6rem 1.25rem 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 3rem;
  align-items: center;
}
.hero2-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .8rem; border-radius: 999px;
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(45,212,191,.3);
  color: #d1fae5; font-size: .8rem; font-weight: 700;
  margin-bottom: 1.15rem;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #bbf7d0; display: inline-block;
  box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 10px rgba(52,211,153,.9);
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 10px rgba(52,211,153,.9); }
  50% { box-shadow: 0 0 0 6px rgba(52,211,153,.06), 0 0 16px rgba(52,211,153,.6); }
}
.hero2-title {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
}
.hero2-title .grad {
  display: block;
  background: linear-gradient(90deg, #bbf7d0 0%, #a7f3d0 45%, #d9f99d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero2-title .h1b { display: block; color: #f3faf7; }
html[lang="en"] .hero2-title { font-size: clamp(2rem, 4vw, 3.1rem); }
html[lang="en"] .hero2-title .grad, html[lang="en"] .hero2-title .h1b { display: inline; }
.hero.hero2 p.hero2-lead {
  margin: 0 0 1.5rem;
  color: #e2f7ee;
  max-width: 34rem;
  line-height: 1.7;
  font-size: 1.02rem;
}
.hero2-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.8rem; }
.hero2-actions .cta { padding: .8rem 1.35rem; text-decoration: none; }
.hero2-actions .cta:not(.ghost) {
  background: linear-gradient(90deg, #10b981, #14b8a6);
  color: #03201c;
}
.hero2-actions .cta:not(.ghost):hover { filter: brightness(1.08); }
.hero2-stats {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2.1rem;
  margin-bottom: 1.5rem;
}
.hero2-stats .stat { display: flex; flex-direction: column; gap: .15rem; min-width: 70px; }
.hero2-stats .stat b {
  font-size: 1.65rem; font-weight: 800; line-height: 1.1; color: #f3faf7;
  letter-spacing: -.01em;
}
.hero2-stats .stat:first-child b,
.hero2-stats .stat:nth-child(2) b { color: #a7f3d0; }
.hero2-stats .stat span { font-size: .8rem; color: var(--muted); }
.hero2-chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 36rem; }
.hero2-chips a {
  display: inline-flex; align-items: center;
  padding: .38rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #e6f9f0; font-size: .82rem; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hero2-chips a:hover { background: rgba(20,184,166,.16); border-color: rgba(45,212,191,.5); color: #d1fae5; }
.hero2-chips a.more { color: #a7f3d0; border-style: dashed; }

/* right: glassy order card mock */
.hero2-visual { position: relative; display: flex; justify-content: center; }
.hero2-visual::before {
  content: ""; position: absolute; inset: 8% 6%;
  background: radial-gradient(closest-side, rgba(20,184,166,.35), rgba(52,211,153,.12) 55%, transparent 80%);
  filter: blur(30px); z-index: 0;
}
.order-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(10,138,101,.55), rgba(6,101,72,.9));
  border: 1px solid rgba(45,212,191,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px rgba(20,184,166,.15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.oc-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.oc-plat {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
}
.oc-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oc-title b { font-size: .98rem; }
.oc-title small { color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.oc-status {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.35);
  color: #bbf7d0; font-size: .74rem; font-weight: 700;
}
.oc-status i { width: 6px; height: 6px; border-radius: 50%; background: #bbf7d0; box-shadow: 0 0 8px #bbf7d0; }
.oc-line {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .8rem 0; font-size: .82rem; color: #e2f7ee;
}
.oc-paid { color: #a7f3d0; font-weight: 600; }
.oc-acct {
  padding: .85rem .9rem; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07);
}
.oc-acct-label { font-size: .72rem; color: var(--muted); margin-bottom: .45rem; letter-spacing: .03em; }
.oc-acct code {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; color: #e6fffa; letter-spacing: .02em; word-break: break-all;
  padding: .55rem .65rem; border-radius: 10px;
  background: rgba(20,184,166,.08); border: 1px dashed rgba(45,212,191,.3);
}
.oc-tags { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.oc-tags span {
  font-size: .7rem; font-weight: 700; color: #d1fae5;
  padding: .15rem .5rem; border-radius: 6px; background: rgba(20,184,166,.14);
}
.oc-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .95rem; }
.oc-copy {
  display: inline-flex; align-items: center; padding: .5rem .95rem; border-radius: 10px;
  background: rgba(20,184,166,.18); border: 1px solid rgba(45,212,191,.4);
  color: #d1fae5; font-weight: 700; font-size: .82rem;
}
.oc-time { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: #bbf7d0; }
.oc-time i { width: 6px; height: 6px; border-radius: 50%; background: #bbf7d0; }
.oc-example {
  margin-top: .85rem; text-align: right;
  font-size: .68rem; color: rgba(211,243,230,.8); letter-spacing: .04em;
}
.hero2-features { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem 2.2rem; }

@media (max-width: 900px) {
  .hero2-inner { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.4rem; }
  .hero2-visual { order: 2; }
  .order-card { max-width: 480px; }
}
@media (max-width: 480px) {
  .hero2-stats { gap: 1rem 1.4rem; }
  .hero2-stats .stat b { font-size: 1.35rem; }
}

/* ===== User dashboard (/dashboard, 2026-09-25) ===== */
.page-dash { background:
  radial-gradient(900px 380px at 15% -5%, rgba(20,184,166,.16), transparent 60%),
  var(--bg); }
.page-dash footer {
  padding: 1.5rem 1.25rem 2rem; text-align: center; color: var(--muted);
  font-size: .85rem; border-top: 1px solid var(--line); margin-top: 1rem;
}
.auth-bar a.email { text-decoration: none; }
.auth-bar a.email:hover { color: #0d9488; text-decoration: underline; }
.dash { max-width: 1120px; margin: 0 auto; padding: 1.8rem 1.25rem 2.5rem; min-height: 60vh; }
.dash-loading { text-align: center; color: var(--muted); padding: 4rem 1rem; }
.dash-kicker { color: #bbf7d0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .35rem; }
.dash-welcome { margin: 0 0 1.2rem; font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.dash-warn {
  display: flex; align-items: center; flex-wrap: wrap; gap: .15rem;
  padding: .75rem 1rem; margin-bottom: 1.1rem; border-radius: 12px;
  background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.35);
  color: #fde68a; font-size: .9rem;
}
.dash-warn .ico { color: #facc15; margin-right: .45rem; }
.dash-warn a { color: #facc15; font-weight: 700; text-decoration: underline; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.5rem; }
.dash-stat {
  background: linear-gradient(160deg, rgba(10,132,97,.55), rgba(6,95,68,.9));
  border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem 1.05rem;
  box-shadow: var(--shadow);
}
.dash-stat .lbl { color: var(--muted); font-size: .8rem; margin-bottom: .45rem; }
.dash-stat .val { font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: #f3faf7; word-break: break-all; }
.dash-stat .sub { color: rgba(155,181,174,.75); font-size: .74rem; margin-top: .3rem; }
.green { color: #bbf7d0 !important; }
.teal { color: #a7f3d0 !important; }
.amber { color: #fbbf24 !important; }
.dash-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: .5rem; position: sticky; top: 1rem; }
.dash-nav {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .72rem .9rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  color: #e6f9f0; font-size: .9rem; font-weight: 600; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.dash-nav i { font-style: normal; width: 22px; text-align: center; }
.dash-nav:hover { background: rgba(20,184,166,.08); border-color: rgba(45,212,191,.3); }
.dash-nav.active { background: rgba(20,184,166,.14); border-color: rgba(45,212,191,.6); color: #d1fae5; box-shadow: 0 0 0 1px rgba(45,212,191,.15) inset; }
.dash-nav.logout { margin-top: .4rem; color: #ffe4e6; }
.dash-nav.logout:hover { background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.35); }
.dash-panels { min-width: 0; }
.dash-panel {
  display: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.2rem 1.25rem 1.3rem; box-shadow: var(--shadow); min-height: 300px;
}
.dash-panel.active { display: block; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.dash-panel-head h2 { margin: 0; font-size: 1.08rem; }
.cta.sm { padding: .5rem .95rem; font-size: .84rem; text-decoration: none; }
a.cta { text-decoration: none; }
.dash-empty { text-align: center; padding: 2.6rem 1rem 2rem; }
.dash-empty .ico { font-size: 2rem; opacity: .75; margin-bottom: .6rem; }
.dash-empty h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.dash-empty p { margin: 0 0 1.1rem; color: var(--muted); font-size: .88rem; }
.dash-item { border: 1px solid var(--line); background: rgba(0,0,0,.18); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .75rem; }
.dash-item-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.dash-item-head b { display: block; font-size: .93rem; line-height: 1.4; }
.dash-item-head small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; }
.dash-cred {
  margin: .7rem 0 0; padding: .7rem .8rem; border-radius: 10px; white-space: pre-wrap; word-break: break-all;
  background: rgba(20,184,166,.07); border: 1px dashed rgba(45,212,191,.3); color: #e6fffa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; max-height: 240px; overflow: auto;
}
.dash-item-foot { display: flex; justify-content: flex-end; margin-top: .6rem; }
.dash-copy {
  padding: .45rem .9rem; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: rgba(20,184,166,.18); border: 1px solid rgba(45,212,191,.4); color: #d1fae5; font-weight: 700; font-size: .8rem;
}
.dash-copy:hover { background: var(--accent); color: #042f2e; }
.dash-status { display: inline-block; white-space: nowrap; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.dash-status.ok { background: rgba(52,211,153,.14); color: #bbf7d0; border: 1px solid rgba(52,211,153,.35); }
.dash-status.wait { background: rgba(250,204,21,.1); color: #fde68a; border: 1px solid rgba(250,204,21,.3); }
.dash-status.other { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--line); }
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dash-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .76rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash-table td { padding: .65rem .6rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.dash-table td.prod { min-width: 220px; }
.dash-table td small { display: block; color: var(--muted); font-size: .72rem; margin-top: .15rem; }
.dash-table .nowrap { white-space: nowrap; }
@media (max-width: 600px) {
  /* keep the amount column on screen on phones instead of behind a horizontal scroll */
  .dash-table { font-size: .8rem; }
  .dash-table th, .dash-table td { padding: .5rem .35rem; }
  .dash-table th { white-space: normal; }
  .dash-table td.prod { min-width: 7em; overflow-wrap: anywhere; }
  .dash-table td:nth-child(2):not(.prod) { white-space: nowrap; }
  .dash-table td.nowrap small { white-space: normal; }
  .dash-table td.nowrap:first-child { white-space: normal; min-width: 5.2em; }
}
.dash-table .neg { color: #ffe4e6; font-weight: 700; }
.dash-info { display: flex; flex-direction: column; gap: .7rem; }
.dash-info p { margin: 0; line-height: 1.65; color: #e6f9f0; font-size: .9rem; }
.dash-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .85rem; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.05); }
.dash-kv span { color: var(--muted); font-size: .86rem; }
.dash-kv b { font-size: .92rem; word-break: break-all; text-align: right; }
.dash-note { padding: .75rem .9rem; border-radius: 10px; background: rgba(20,184,166,.08); border: 1px solid rgba(45,212,191,.25); color: #d1fae5 !important; }
.dash-muted { color: var(--muted) !important; font-size: .84rem !important; margin: 0 0 .8rem; }
.dash-info .cta { align-self: flex-start; }
.dash-form { margin-top: 1.3rem; max-width: 380px; display: flex; flex-direction: column; }
.dash-form h3 { margin: 0 0 .5rem; font-size: .98rem; }
.dash-form label { font-size: .8rem; color: var(--muted); margin: .55rem 0 .25rem; }
.dash-form input {
  background: #055a40; border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: .62rem .75rem; outline: none; font-family: inherit;
}
.dash-form input:focus { border-color: rgba(45,212,191,.6); }
.dash-form .err { color: #ffe4e6; font-size: .8rem; min-height: 1.1rem; margin: .45rem 0; }
.dash-form .cta { align-self: flex-start; }
.dash-gate { display: flex; justify-content: center; padding: 3rem 0; }
.dash-gate-card {
  text-align: center; max-width: 440px; width: 100%; padding: 2rem 1.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.dash-gate-card h1 { margin: .2rem 0 .5rem; font-size: 1.5rem; }
.dash-gate-card p { color: var(--muted); margin: 0 0 1.3rem; }
.dash-gate-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .dash-nav { width: auto; flex: 1 1 calc(50% - .5rem); }
}
@media (max-width: 480px) {
  .dash-stat .val { font-size: 1.35rem; }
  .dash-nav { flex-basis: 100%; }
}

/* ===== Site polish (2026-09-25): mobile nav, footer, policy pages, 404, list tidy ===== */
[hidden] { display: none !important; }
html.mnav-lock, html.mnav-lock body { overflow: hidden; }

/* mobile nav */
.mnav-burger {
  display: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(15,118,110,.25); background: #fff; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mnav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0f766e; }
.mnav { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.mnav-backdrop { position: absolute; inset: 0; background: rgba(2,14,12,.55); opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(3px); }
.mnav-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: #055a40; border-left: 1px solid rgba(45,212,191,.2);
  box-shadow: -20px 0 50px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem 1.1rem 1.5rem; overflow-y: auto;
}
.mnav.open { pointer-events: auto; }
.mnav.open .mnav-backdrop { opacity: 1; }
.mnav.open .mnav-panel { transform: none; }
.mnav:not(.open) .mnav-panel { box-shadow: none; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; }
.mnav-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: #f3faf7; }
.mnav-brand .logo { width: 30px; height: 30px; border-radius: 9px; }
.mnav-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #cfe9e2; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mnav-links { display: flex; flex-direction: column; gap: .35rem; }
.mnav-link { display: block; padding: .8rem .9rem; border-radius: 12px; color: #d7efe6; font-weight: 700; border: 1px solid transparent; }
.mnav-link:hover { background: rgba(20,184,166,.08); }
.mnav-link.active { background: rgba(20,184,166,.16); border-color: rgba(45,212,191,.45); color: #99f6e4; }
.mnav-sec { border-top: 1px solid var(--line); padding-top: .9rem; }
.mnav-label { font-size: .74rem; color: var(--muted); letter-spacing: .05em; margin-bottom: .55rem; }
.mnav-lang { display: inline-flex; border: 1px solid rgba(45,212,191,.35); border-radius: 999px; overflow: hidden; }
.mnav-lang button { border: none; background: transparent; color: #cfe9e2; padding: .45rem 1rem; font-weight: 800; cursor: pointer; }
.mnav-lang button.active { background: #14b8a6; color: #fff; }
.mnav-account { display: flex; flex-direction: column; gap: .5rem; }
.mnav-user { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.mnav-user b { font-size: .88rem; word-break: break-all; }
.mnav-user span { font-size: .8rem; color: #6ee7b7; }
.mnav-btn { display: block; text-align: center; padding: .7rem .9rem; border-radius: 12px; font-weight: 800; cursor: pointer; border: none; background: #14b8a6; color: #042f2e; font-family: inherit; font-size: .92rem; }
.mnav-btn.ghost { background: transparent; color: #99f6e4; border: 1px solid rgba(45,212,191,.45); }
.mnav-btn.danger { background: rgba(251,113,133,.1); color: #fda4af; border: 1px solid rgba(251,113,133,.35); }
@media (max-width: 900px) {
  .mnav-burger { display: inline-flex; }
  .topbar .lang-switch, .topbar #authBar { display: none; }
  .topbar-inner { gap: .6rem; }
  .top-actions { margin-left: auto; }
}
@media (min-width: 901px) { .mnav { display: none; } }

/* footer */
footer.site-footer {
  max-width: none; margin: 2rem 0 0; padding: 0; text-align: left;
  border-top: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--muted); font-size: .88rem;
}
.page-home footer.site-footer, .page-dash footer.site-footer { margin-top: 0; padding: 0; text-align: left; }
.sf-inner { max-width: 1160px; margin: 0 auto; padding: 2.2rem 1.25rem 1.4rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.sf-logo { display: inline-flex; align-items: center; gap: .55rem; color: #f3faf7; margin-bottom: .7rem; }
.sf-logo .logo { width: 30px; height: 30px; border-radius: 9px; }
.sf-brand p { margin: 0 0 .5rem; line-height: 1.65; max-width: 30rem; }
.sf-contact { color: #a7f3d0; font-size: .82rem; }
.sf-col { display: flex; flex-direction: column; gap: .45rem; }
.sf-col h4 { margin: 0 0 .35rem; color: #e6fffa; font-size: .9rem; }
.sf-col a { color: #e2f7ee; width: fit-content; }
.sf-col a:hover { color: #a7f3d0; }
.sf-bottom {
  max-width: 1160px; margin: 0 auto; padding: 1rem 1.25rem 1.6rem; border-top: 1px solid rgba(255,255,255,.05);
  display: flex; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; font-size: .8rem; color: rgba(155,181,174,.8);
}
@media (max-width: 760px) {
  .sf-inner { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .sf-brand { grid-column: 1 / -1; }
}

/* product list tidy */
.row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.row-main { min-width: 0; }
.row .row-title {
  margin: 0 0 .4rem; font-size: .98rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.row-meta { gap: .4rem; align-items: center; }
.row-meta > span {
  display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: .75rem; line-height: 1.5;
}
.row-meta .m-stock.ok { color: #bbf7d0; border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.07); }
.row-meta .m-stock.bad { color: #ffe4e6; border-color: rgba(251,113,133,.25); background: rgba(251,113,133,.06); }
.row-meta .m-stock .dot { margin-right: 0; width: 6px; height: 6px; }
.row-meta .m-kind { color: #d1fae5; }
.row-meta .m-id { color: rgba(211,243,230,.9); font-variant-numeric: tabular-nums; }
.buy-box .price { white-space: nowrap; }
.buy-box .price.ask { color: #fbbf24; font-size: 1rem; }
@media (max-width: 560px) {
  .row { grid-template-columns: 48px minmax(0, 1fr); }
  .row .thumb { width: 48px; height: 48px; }
  .buy-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; min-width: 0; }
  .buy-box .price { margin: 0; }
}

/* auth: forgot password box */
.auth-forgot-box {
  margin-top: .7rem; padding: .8rem .9rem; border-radius: 12px; text-align: left;
  background: #f0fdf9; border: 1px solid rgba(15,118,110,.22); color: #0b1f1c; font-size: .86rem; line-height: 1.55;
}
.auth-forgot-box b { display: block; margin-bottom: .25rem; color: #0f766e; }
.auth-forgot-box p { margin: .2rem 0; }
.auth-forgot-box .muted { color: #4b6b64; font-size: .8rem; }
.auth-forgot-box .auth-primary.sm { padding: .5rem .9rem; font-size: .85rem; margin-top: .4rem; width: auto; }

/* policy / faq pages */
.legal { max-width: 860px; margin: 0 auto; padding: 2.2rem 1.25rem 1rem; }
.legal-head { margin-bottom: 1.4rem; }
.legal-kicker { color: #bbf7d0; font-size: .8rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .35rem; }
.legal-head h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.legal-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.legal-body { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.legal-body h2 { font-size: 1.05rem; margin: 1.3rem 0 .5rem; color: #e6fffa; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: #e6f9f0; line-height: 1.75; font-size: .93rem; margin: 0 0 .55rem; }
.legal-body ul { padding-left: 1.2rem; margin: 0 0 .5rem; }
.legal-body a { color: #a7f3d0; text-decoration: underline; }
html[lang="en"] [data-lang-block="zh"], html:not([lang="en"]) [data-lang-block="en"] { display: none !important; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.legal-nav a { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line); color: #e2f7ee; font-size: .84rem; background: rgba(255,255,255,.03); }
.legal-nav a:hover, .legal-nav a.active { border-color: rgba(45,212,191,.5); color: #d1fae5; }
.faq-list { display: flex; flex-direction: column; gap: .6rem; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; color: #f3faf7; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: #a7f3d0; font-size: 1.2rem; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] { border-color: rgba(45,212,191,.4); }
.faq-item .faq-a { padding: 0 1.1rem 1rem; color: #e6f9f0; line-height: 1.75; font-size: .93rem; }
.faq-item .faq-a a { color: #a7f3d0; text-decoration: underline; }

/* 404 */
.nf { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.25rem 3rem; text-align: center; }
.nf-code {
  font-size: clamp(4.5rem, 16vw, 7.5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(90deg, #bbf7d0, #a7f3d0 50%, #d9f99d); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(20,184,166,.25));
}
.nf h1 { margin: .6rem 0 .5rem; font-size: 1.5rem; }
.nf p { color: var(--muted); margin: 0 0 1.5rem; line-height: 1.6; }
.nf-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.nf-links { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.nf-links a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: #e2f7ee; font-size: .84rem; }
.nf-links a:hover { color: #d1fae5; border-color: rgba(45,212,191,.5); }

/* reset password page */
.reset-wrap { max-width: 440px; margin: 0 auto; padding: 3rem 1.25rem; }
.reset-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem 1.5rem; box-shadow: var(--shadow); }
.reset-card h1 { margin: 0 0 .4rem; font-size: 1.4rem; }
.reset-card p { color: var(--muted); margin: 0 0 1rem; line-height: 1.6; font-size: .9rem; }
.reset-card label { display: block; font-size: .8rem; color: var(--muted); margin: .6rem 0 .25rem; }
.reset-card input { width: 100%; box-sizing: border-box; background: #055a40; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: .65rem .75rem; outline: none; }
.reset-card input:focus { border-color: rgba(45,212,191,.6); }
.reset-card .err { color: #ffe4e6; font-size: .82rem; min-height: 1.1rem; margin: .5rem 0; }
.reset-card .ok { color: #bbf7d0; }
.reset-card .cta { margin-top: .4rem; }
a.cta, button.cta { text-decoration: none; font-family: inherit; }

/* polish2: compact category chips on mobile accounts page */
@media (max-width: 900px) {
  .accounts-layout > * { min-width: 0; max-width: 100%; }
  .accounts-layout .side { padding: .75rem .85rem; overflow: hidden; }
  .accounts-layout .side-section { margin-bottom: 0; }
  .accounts-layout #tips { display: none; }
  .accounts-layout .chip-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: .25rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .accounts-layout .chip-list .chip { flex: 0 0 auto; white-space: nowrap; width: auto; }
}

/* pin1: 热门推荐 block + taller sidebar */
.popular { margin: .2rem 0 1rem; padding: 1rem; border: 1px solid rgba(20,184,166,.35); border-radius: 16px; background: linear-gradient(180deg, rgba(20,184,166,.10), rgba(20,184,166,.03)); }
.popular[hidden] { display: none; }
.pop-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.pop-head h3 { margin: 0; font-size: 1.05rem; }
.pop-head span { color: var(--muted, #94a3b8); font-size: .82rem; }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; }
.pop-card { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,20,18,.55); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
.pop-card:hover { border-color: var(--accent, #14b8a6); transform: translateY(-1px); }
.pop-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pop-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 30px; background: #065f45; }
.pop-img.fallback { display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #a7f3d0; }
.pop-plat { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-title { font-size: .78rem; line-height: 1.35; color: var(--muted, #94a3b8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; overflow-wrap: anywhere; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.pop-price { font-weight: 800; color: #a7f3d0; font-size: .95rem; white-space: nowrap; }
.pop-stock { font-size: .72rem; color: #86efac; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pop-btn { text-align: center; font-size: .78rem; font-weight: 700; padding: .38rem .5rem; border-radius: 999px; background: rgba(20,184,166,.16); color: #d1fae5; }
.pop-card:hover .pop-btn { background: var(--accent, #14b8a6); color: #042f2e; }
.pop-strip-label { margin: .95rem 0 .5rem; font-size: .82rem; color: var(--muted, #94a3b8); }
.pop-strip { display: flex; flex-wrap: wrap; gap: .45rem; }
.pop-plat-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font-size: .8rem; cursor: pointer; }
.pop-plat-btn:hover { border-color: var(--accent, #14b8a6); color: #d1fae5; }
.pop-plat-btn img { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .popular { padding: .75rem; }
  .pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pop-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .pop-plat-btn { flex: 0 0 auto; }
}
@media (min-width: 901px) {
  .accounts-layout .side { position: static; }
  .accounts-layout .chip-list { max-height: none; overflow: visible; gap: .3rem; }
  .accounts-layout .chip-list .chip { padding: .5rem .75rem; }
}

/* perf1: skeleton rows while the catalog loads */
.sk-list .sk-row { pointer-events: none; }
.sk { background: linear-gradient(90deg, rgba(94,234,212,.06) 25%, rgba(94,234,212,.14) 50%, rgba(94,234,212,.06) 75%); background-size: 200% 100%; animation: skShimmer 1.2s ease-in-out infinite; border-radius: 8px; }
.sk-row .thumb.sk { border: 0; }
.sk-line { height: 14px; width: 78%; margin: .35rem 0 .6rem; }
.sk-line.short { width: 42%; height: 12px; }
.sk-price { width: 70px; height: 18px; margin-left: auto; margin-bottom: .5rem; }
.sk-btn { width: 88px; height: 32px; border-radius: 999px; margin-left: auto; }
@keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ===== In-page purchase modal (buy-modal.js) — dialog on desktop, bottom sheet on mobile ===== */
html.bm-lock, html.bm-lock body { overflow: hidden; }
.modal-backdrop.bm-backdrop { z-index: 110; background: rgba(2,14,12,.62); backdrop-filter: blur(4px); }
.modal.bm-card {
  position: relative; width: min(520px, 100%); max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 1.25rem 1.25rem; border-radius: 18px; outline: none; animation: bm-pop .16s ease-out;
}
@keyframes bm-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.bm-grab { display: none; }
.bm-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -1.25rem .75rem; padding: 1rem 1.25rem .65rem; background: #066548; border-bottom: 1px solid var(--line); }
.modal .bm-head h3 { margin: 0; font-size: 1.08rem; }
.bm-x { width: 32px; height: 32px; border: none; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.bm-x:hover { background: rgba(255,255,255,.16); }
.bm-x:disabled { opacity: .35; cursor: not-allowed; }
.bm-prod { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.18); }
.bm-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; object-fit: cover; background: #065f45; }
.bm-img.fallback { display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #a7f3d0; }
.bm-prod-main { min-width: 0; flex: 1; }
.bm-cat { display: inline-block; font-size: .7rem; color: #d1fae5; border: 1px solid rgba(20,184,166,.35); border-radius: 999px; padding: .05rem .45rem; margin-bottom: .25rem; }
.bm-name { font-weight: 700; font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bm-detail-link { display: inline-block; margin-top: .3rem; font-size: .78rem; color: #a7f3d0; }
.bm-detail-link:hover { text-decoration: underline; }
.bm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.bm-stat { padding: .6rem .7rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); min-width: 0; }
.bm-stat span { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .2rem; }
.bm-stat b { font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bm-stat b.bad { color: var(--bad); }
.bm-stat.due b { color: #a7f3d0; }
.bm-sec { margin-top: .9rem; }
.bm-label { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; font-weight: 600; }
.bm-label em { font-style: normal; font-weight: 500; opacity: .85; }
.bm-vars { display: grid; gap: .4rem; max-height: 210px; overflow-y: auto; }
.bm-var { text-align: left; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text); border-radius: 10px; padding: .5rem .65rem; cursor: pointer; }
.bm-var:hover { border-color: rgba(20,184,166,.6); }
.bm-var.active { border-color: var(--accent); background: rgba(20,184,166,.14); box-shadow: inset 0 0 0 1px var(--accent); }
.bm-var.out { opacity: .45; cursor: not-allowed; }
.bm-var-n { display: block; font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.bm-var-m { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.bm-var-m b { color: #a7f3d0; }
.bm-pays { display: grid; gap: .4rem; }
.bm-pay { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.bm-pay.active { border-color: var(--accent); background: rgba(20,184,166,.12); }
.bm-radio { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: inset 0 0 0 3px #066548; background: var(--accent); }
.bm-step { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25); }
.bm-step button { width: 48px; flex: 0 0 48px; border: none; background: rgba(255,255,255,.06); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.bm-step button:hover:not(:disabled) { background: rgba(20,184,166,.25); }
.bm-step button:disabled { opacity: .35; cursor: not-allowed; }
.modal .bm-step input { flex: 1; min-width: 0; width: auto; border: none; border-radius: 0; background: transparent; text-align: center; font-weight: 700; font-size: 1rem; -moz-appearance: textfield; }
.bm-step input::-webkit-outer-spin-button, .bm-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bm-err { color: #ffe4e6; font-size: .84rem; min-height: 1.25em; margin: .55rem 0 .15rem; }
.bm-primary, .bm-secondary { display: block; width: 100%; text-align: center; border: none; border-radius: 999px; padding: .78rem 1rem; font-weight: 800; font-size: .95rem; cursor: pointer; text-decoration: none; }
.bm-primary { background: linear-gradient(145deg, #4ade80, #22c58b); color: #04382a; box-shadow: 0 8px 20px rgba(13,148,136,.3); }
.bm-primary:hover:not(:disabled) { filter: brightness(1.06); }
.bm-primary:disabled { background: rgba(255,255,255,.1); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.bm-secondary { background: rgba(255,255,255,.08); color: var(--text); }
.bm-secondary:hover { background: rgba(255,255,255,.14); }
.bm-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.bm-actions > * { flex: 1; }
.bm-link { display: block; margin: .8rem auto 0; border: none; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; }
.bm-link:hover { color: var(--text); }
.bm-state { text-align: center; padding: 1.25rem .5rem .5rem; }
.bm-state h4 { margin: .6rem 0 .3rem; font-size: 1.1rem; }
.bm-state p { margin: .25rem 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.bm-state .bm-refund { color: #bbf7d0; }
.bm-ico { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; }
.bm-ico.ok { background: rgba(52,211,153,.16); color: #bbf7d0; }
.bm-ico.bad { background: rgba(251,113,133,.16); color: #fb7185; }
.bm-ico.warn { background: rgba(251,191,36,.16); color: #fbbf24; }
.bm-ico.info, .bm-ico.wait { background: rgba(20,184,166,.16); color: #a7f3d0; font-size: 1.3rem; }
.bm-spin { width: 36px; height: 36px; margin: .4rem auto; border-radius: 50%; border: 3px solid rgba(20,184,166,.25); border-top-color: var(--accent); animation: bm-spin .8s linear infinite; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
.bm-deliv { margin-top: .85rem; border: 1px solid rgba(52,211,153,.3); border-radius: 12px; overflow: hidden; }
.bm-deliv-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; background: rgba(52,211,153,.08); font-size: .82rem; font-weight: 700; }
.bm-copy { border: 1px solid rgba(94,234,212,.4); background: transparent; color: #a7f3d0; border-radius: 999px; padding: .25rem .8rem; font-weight: 700; font-size: .8rem; cursor: pointer; }
.bm-copy:hover, .bm-copy.done { background: var(--accent); color: #042f2e; }
.bm-pre { margin: 0; padding: .7rem .75rem; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,.28); user-select: all; }
button.buy { font: inherit; font-weight: 800; }
.pop-card { cursor: pointer; }
.pop-title a { color: inherit; }
button.pop-btn { border: none; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; }
@media (max-width: 640px) {
  .modal-backdrop.bm-backdrop { align-items: flex-end; padding: 0; }
  .modal.bm-card { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; border-bottom: none; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); animation: bm-sheet .22s ease-out; }
  .bm-grab { display: block; width: 42px; height: 4px; margin: .5rem auto 0; border-radius: 999px; background: rgba(255,255,255,.25); }
  .bm-head { padding-top: .5rem; }
  .bm-stats { gap: .35rem; }
  .bm-stat { padding: .5rem .55rem; }
  .bm-stat b { font-size: .95rem; }
}
@keyframes bm-sheet { from { transform: translateY(100%); } to { transform: none; } }

/* ===== 自选账号 (pick accounts) inside the purchase modal ===== */
.bm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bm-mode { text-align: left; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text); border-radius: 12px; padding: .6rem .75rem; cursor: pointer; }
.bm-mode b { display: block; font-size: .9rem; }
.bm-mode span { display: block; margin-top: .15rem; font-size: .8rem; color: #a7f3d0; font-weight: 700; }
.bm-mode span em { font-style: normal; color: #fbbf24; font-weight: 600; margin-left: .2rem; }
.bm-mode:hover { border-color: rgba(20,184,166,.6); }
.bm-mode.active { border-color: var(--accent); background: rgba(20,184,166,.14); box-shadow: inset 0 0 0 1px var(--accent); }
.bm-note { margin-top: .45rem; font-size: .78rem; color: var(--muted); }
.bm-note-pick { margin-top: .75rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); color: #fcd34d; }
.bm-picked { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .6rem .7rem; background: rgba(0,0,0,.2); }
.bm-picked-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .88rem; font-weight: 700; }
.bm-secondary.sm, .bm-primary.sm { display: inline-block; width: auto; padding: .4rem .85rem; font-size: .8rem; }
.bm-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.bm-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .25rem .15rem .55rem; border-radius: 999px; background: rgba(20,184,166,.14); border: 1px solid rgba(20,184,166,.35); font-size: .76rem; color: #ccfbf1; max-width: 100%; }
.bm-chip.more { padding-right: .55rem; }
.bm-chip button { border: none; background: transparent; color: #d1fae5; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .2rem; }
.bm-pk-tools { display: flex; gap: .5rem; }
.modal .bm-pk-tools input { flex: 1; min-width: 0; }
.bm-pk-tools select { flex: 0 0 auto; max-width: 40%; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: var(--text); padding: .55rem .6rem; }
.bm-pk-info { margin-top: .5rem; font-size: .78rem; color: var(--muted); }
.bm-pk-list { margin-top: .5rem; display: grid; gap: .35rem; max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding-right: .15rem; transition: opacity .15s; }
.bm-pk-list.dim { opacity: .55; }
.bm-pk-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; user-select: none; outline: none; }
.bm-pk-row:hover, .bm-pk-row:focus-visible { border-color: rgba(20,184,166,.6); }
.bm-pk-row.on { border-color: var(--accent); background: rgba(20,184,166,.13); }
.bm-pk-row.full { opacity: .5; }
.bm-check { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.bm-pk-row.on .bm-check { background: var(--accent); border-color: var(--accent); }
.bm-pk-row.on .bm-check::after { content: '✓'; color: #042f2e; font-size: .72rem; font-weight: 900; }
.bm-pk-main { flex: 1; min-width: 0; }
.bm-pk-user { display: block; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bm-pk-attrs { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.bm-pk-link { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #a7f3d0; background: rgba(255,255,255,.06); font-size: .8rem; }
.bm-pk-link:hover { background: rgba(20,184,166,.3); }
.bm-pk-price { flex: 0 0 auto; color: #a7f3d0; font-size: .86rem; font-variant-numeric: tabular-nums; }
.bm-pk-empty { padding: 1.5rem .5rem; text-align: center; color: var(--muted); font-size: .88rem; }
.bm-pk-nav { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.bm-pk-nav .bm-link { margin: 0; padding: .2rem .1rem; }
.bm-pk-nav .bm-link:disabled { opacity: .35; cursor: not-allowed; }
.bm-pk-sp { flex: 1; }
.bm-pk-foot { position: sticky; bottom: -1.25rem; z-index: 2; display: flex; align-items: center; gap: .75rem; margin: .25rem -1.25rem -1.25rem; padding: .75rem 1.25rem 1rem; background: #066548; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 700; }
.bm-pk-foot span { flex: 1; min-width: 0; }
.bm-pk-foot .bm-primary { width: auto; flex: 0 0 auto; padding: .65rem 1.1rem; }
.row-meta .m-pick { color: #fcd34d; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
button.buy.pick { background: linear-gradient(145deg, #f59e0b, #d97706); color: #1c1203; }
.pdp-pick { margin: 0 0 .9rem; padding: .7rem .85rem; border-radius: 12px; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.06); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pdp-pick-info { flex: 1; min-width: 200px; font-size: .86rem; line-height: 1.55; }
.pdp-pick-info b { color: #fcd34d; }
.pdp-pick-info .muted { color: var(--muted); font-size: .8rem; }
.pdp-pick-btn { border: 1px solid rgba(94,234,212,.45); background: rgba(20,184,166,.12); color: #d1fae5; border-radius: 999px; padding: .5rem .95rem; font-weight: 700; cursor: pointer; }
.pdp-pick-btn:hover { background: var(--accent); color: #042f2e; }
@media (max-width: 640px) {
  .bm-pk-list { max-height: 48vh; }
  .bm-pk-foot { bottom: calc(-1rem - env(safe-area-inset-bottom)); margin-bottom: calc(-1rem - env(safe-area-inset-bottom)); padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
}

/* dashboard · online top-up */
.dash-table .pos { color: #bbf7d0; font-weight: 700; }
.rc-form { display: flex; flex-direction: column; gap: .55rem; max-width: 460px; }
.rc-form label { font-size: .8rem; color: var(--muted); }
.rc-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.rc-presets button { background: rgba(0,0,0,.2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: .45rem .85rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.rc-presets button:hover, .rc-presets button.on { border-color: rgba(45,212,191,.7); background: rgba(20,184,166,.16); color: #a7f3d0; }
.rc-input { display: flex; align-items: center; gap: .4rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0 .75rem; }
.rc-input span { color: var(--muted); font-weight: 700; }
.rc-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 1.05rem; padding: .6rem 0; font-family: inherit; }
.rc-quote { font-size: .82rem; color: #d1fae5; min-height: 1.1rem; }
.rc-method { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .4rem .75rem; border-radius: 10px; border: 1px solid rgba(22,119,255,.55); background: rgba(22,119,255,.12); font-size: .86rem; font-weight: 700; }
.rc-alipay { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 5px; background: #1677ff; color: #fff; font-size: .78rem; }
.rc-form .err { color: #ffe4e6; font-size: .8rem; min-height: 1.1rem; }
.rc-form .cta { align-self: flex-start; }
.rc-form .cta[disabled] { opacity: .6; cursor: wait; }
.rc-status { display: flex; flex-direction: column; gap: .4rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.18); font-size: .9rem; }
.rc-status.ok { border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.08); }
.rc-status.wait { border-color: rgba(250,204,21,.35); }
.rc-status code, .dash-table code { font-size: .8rem; color: #e6f9f0; }
.rc-status .cta { align-self: flex-start; }
.rc-st { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rc-admin { color: #fbbf24 !important; }
.rc-h { margin: .6rem 0 0; font-size: .95rem; }
.rc-form .err:empty { display: none; }

/* dashboard · top-up v2 (payment method cards, crypto pay panel) */
.rc-form { max-width: 640px; }
.rc-step { margin: .8rem 0 .15rem; font-size: .98rem; }
.rc-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.rc-card { display: flex; align-items: center; gap: .75rem; text-align: left; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--text); cursor: pointer; font-family: inherit; position: relative; }
.rc-card b { display: block; font-size: .98rem; }
.rc-card small { display: block; color: var(--muted); font-size: .76rem; margin-top: .15rem; }
.rc-card.on { border-color: rgba(45,212,191,.8); background: rgba(20,184,166,.14); box-shadow: 0 0 0 1px rgba(45,212,191,.35) inset; }
.rc-card.on::after { content: '✓'; position: absolute; top: .45rem; right: .6rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #14b8a6; color: #042f2e; font-size: .78rem; font-weight: 800; display: grid; place-items: center; }
.rc-card.off, .rc-card[disabled] { opacity: .45; cursor: not-allowed; }
.rc-card-ico { flex: 0 0 auto; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; font-weight: 800; font-size: 1.05rem; }
.rc-card-ico.rc-alipay { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
.rc-ico-crypto { background: #f5b82e; color: #3b2a00; border-radius: 50%; }
.rc-crypto { display: flex; flex-direction: column; gap: .55rem; border-top: 1px dashed rgba(255,255,255,.12); padding-top: .75rem; }
.rc-sub { font-size: .82rem; color: var(--muted); }
.rc-coins { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.rc-coin { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--text); font-weight: 800; font-family: inherit; cursor: pointer; }
.rc-coin small { margin-left: auto; font-weight: 500; color: var(--muted); font-size: .72rem; }
.rc-coin.on { border-color: rgba(45,212,191,.8); background: rgba(20,184,166,.14); }
.rc-coin[disabled] { opacity: .45; cursor: not-allowed; }
.rc-coin-ico { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; font-weight: 800; }
.rc-coin-ico.usdt { background: #26a17b; }
.rc-coin-ico.usdc { background: #2775ca; }
.rc-crypto a, .rc-form a#rcUseAlipay { color: #a7f3d0; font-weight: 700; text-decoration: none; }
.rc-box { padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.18); font-size: .84rem; color: #e6f9f0; line-height: 1.6; }
.rc-warn { margin: 0; color: #fb923c !important; font-size: .86rem; font-weight: 600; }
.rc-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid rgba(45,212,191,.3); background: rgba(20,184,166,.08); }
.rc-bar-due { flex: 1 1 260px; }
.rc-bar-due b, .rc-bar-get b { color: #a7f3d0; font-size: 1.15rem; }
.rc-bar-due small { display: block; color: var(--muted); font-size: .74rem; margin-top: .2rem; }
.rc-bar .cta { margin-left: auto; }
.rc-pay { display: flex; flex-direction: column; gap: .7rem; max-width: 680px; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid rgba(45,212,191,.35); background: rgba(0,0,0,.2); }
.rc-pay-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.rc-pay-head b { font-size: 1.05rem; }
.rc-pay-head small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; }
.rc-timer { text-align: right; }
.rc-timer span { display: block; font-size: .72rem; color: var(--muted); }
.rc-timer b { font-size: 1.35rem; color: #fde68a; font-variant-numeric: tabular-nums; }
.rc-pay-body { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.rc-qr { width: 172px; height: 172px; background: #fff; border-radius: 12px; padding: 6px; flex: 0 0 auto; }
.rc-pay-fields { flex: 1 1 280px; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.rc-field label { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .2rem; }
.rc-copyrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rc-big { font-size: 1.25rem; color: #a7f3d0; }
.rc-addr { font-size: .86rem !important; word-break: break-all; background: rgba(0,0,0,.3); padding: .35rem .5rem; border-radius: 8px; }
.rc-net { color: #fde68a; }
.rc-pay-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 560px) { .rc-methods, .rc-coins { grid-template-columns: 1fr; } .rc-qr { width: 150px; height: 150px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* home sections: hot grid, 5-step flow, reviews, latest articles */
.home-sec { max-width: 1160px; margin: 0 auto; padding: 2.4rem 1.25rem; }
.home-sec[hidden] { display: none; }
.hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.hs-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.01em; }
.hs-title { display: flex; align-items: baseline; gap: .4rem .75rem; flex-wrap: wrap; padding-left: .7rem; border-left: 3px solid var(--accent); }
.hs-title span { color: var(--muted); font-size: .85rem; }
.hs-more { color: #a7f3d0; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.hs-more:hover { color: #d1fae5; }
.hs-head.center { flex-direction: column; align-items: center; text-align: center; gap: .35rem; margin-bottom: 1.6rem; }
.hs-head.center h2 { font-size: 1.65rem; }
.hs-head.center p { margin: 0; color: var(--muted); font-size: .95rem; }
.hs-kicker { color: #a7f3d0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.hot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.hot-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; }
.hot-card:hover, .hot-card:focus-visible { border-color: rgba(45,212,191,.55); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.3); outline: none; }
.hot-img { position: relative; aspect-ratio: 4 / 3; background: #065f45; overflow: hidden; }
.hot-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.hot-card:hover .hot-img img { transform: scale(1.04); }
.hot-img.fallback { background: linear-gradient(135deg, #076c50, #076c50); }
.hot-img.fallback::after { content: "AD"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: #a7f3d0; }
.hot-plat { position: absolute; left: .45rem; top: .45rem; z-index: 1; padding: .12rem .5rem; border-radius: 999px; background: rgba(4,20,18,.78); color: #d1fae5; font-size: .7rem; font-weight: 700; backdrop-filter: blur(4px); }
.hot-body { display: flex; flex-direction: column; gap: .5rem; padding: .65rem .7rem .7rem; flex: 1; }
.hot-title { font-size: .82rem; line-height: 1.4; color: #f0fdf4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; overflow-wrap: anywhere; }
.hot-foot { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; margin-top: auto; }
.hot-price { color: #a7f3d0; font-size: 1rem; font-weight: 800; white-space: nowrap; }
.hot-stock { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-card.skel { cursor: default; pointer-events: none; }
.hot-card.skel .hot-img, .hot-card.skel i { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: hotSkel 1.2s linear infinite; }
.hot-card.skel i { display: block; height: .7rem; border-radius: 6px; }
.hot-card.skel i:nth-child(2) { width: 70%; }
.hot-card.skel i:nth-child(3) { width: 40%; height: .9rem; }
@keyframes hotSkel { to { background-position: -200% 0; } }

.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.flow-steps::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, rgba(45,212,191,.15), rgba(45,212,191,.45), rgba(45,212,191,.15)); }
.flow-step { position: relative; text-align: center; padding: 0 .3rem; }
.flow-ico { position: relative; width: 56px; height: 56px; margin: 0 auto .85rem; border-radius: 16px; display: grid; place-items: center; background: var(--panel); border: 1px solid rgba(45,212,191,.35); color: #a7f3d0; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .15s, background .15s; }
.flow-ico svg { width: 26px; height: 26px; }
.flow-step:hover .flow-ico { transform: translateY(-2px); background: rgba(20,184,166,.16); }
.flow-n { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #042f2e; font-size: .72rem; font-weight: 800; border: 2px solid var(--bg); }
.flow-n.done { background: var(--ok); }
.flow-step h3 { margin: 0 0 .3rem; font-size: 1rem; }
.flow-step p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 370px)); justify-content: center; gap: 1rem; }
.rv-card { margin: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.rv-top { display: flex; align-items: center; justify-content: space-between; }
.rv-q { font-size: 2.4rem; line-height: .6; color: rgba(45,212,191,.55); font-family: Georgia, serif; }
.rv-stars { color: #fbbf24; letter-spacing: .1em; font-size: .9rem; }
.rv-stars i { color: rgba(255,255,255,.15); font-style: normal; }
.rv-card blockquote { margin: 0; color: #f0fdf4; font-size: .9rem; line-height: 1.7; flex: 1; overflow-wrap: anywhere; }
.rv-card figcaption { display: flex; align-items: center; gap: .6rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.rv-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,184,166,.2); color: #a7f3d0; font-weight: 800; flex: 0 0 36px; }
.rv-card figcaption b { display: block; font-size: .88rem; }
.rv-card figcaption small { display: block; color: var(--muted); font-size: .76rem; margin-top: .1rem; }

.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.art-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.art-card:hover { border-color: rgba(45,212,191,.45); transform: translateY(-2px); }
.art-cover { display: block; position: relative; aspect-ratio: 16 / 9; background: #065f45; overflow: hidden; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.art-card:hover .art-cover img { transform: scale(1.04); }
.art-cover.fallback::after { content: "AD"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.8rem; color: #a7f3d0; }
.art-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.art-date { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }
.art-date svg { width: 14px; height: 14px; }
.art-body h3 { margin: 0; font-size: 1.02rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-body h3 a:hover { color: #a7f3d0; }
.art-more { margin-top: auto; padding-top: .35rem; color: #a7f3d0; font-size: .85rem; font-weight: 700; width: fit-content; }
.art-all { text-align: center; margin-top: 1.4rem; }

@media (max-width: 1100px) { .hot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .hot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art-grid { grid-template-columns: 1fr 1fr; }
  .flow-steps { grid-template-columns: 1fr; gap: .6rem; max-width: 520px; margin: 0 auto; }
  .flow-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(45,212,191,.15), rgba(45,212,191,.45), rgba(45,212,191,.15)); }
  .flow-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; text-align: left; align-items: center; padding: .2rem 0; }
  .flow-ico { margin: 0; grid-row: span 2; }
  .flow-step h3 { align-self: end; }
  .flow-step p { align-self: start; }
}
@media (max-width: 560px) {
  .home-sec { padding: 1.8rem 1rem; }
  .hs-head h2 { font-size: 1.2rem; }
  .hs-head.center h2 { font-size: 1.35rem; }
  .hs-title span { display: none; }
  .hot-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hot-grid > .hot-card:nth-child(n+7) { display: none; }
  .art-grid { grid-template-columns: 1fr; }
}

/* footer: brand + quick links / support / contact */
.sf-inner { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
.sf-ci { display: flex; align-items: flex-start; gap: .55rem; color: #e2f7ee; }
.sf-ci svg { width: 18px; height: 18px; flex: 0 0 18px; color: #a7f3d0; margin-top: .1rem; }
.sf-ci b { display: block; font-weight: 600; color: #f0fdf4; font-size: .84rem; }
.sf-ci em { font-style: normal; color: #a7f3d0; font-size: .8rem; }
.sf-hint { margin: .2rem 0 0; font-size: .76rem; line-height: 1.6; color: rgba(211,243,230,.9); max-width: 20rem; }
.sf-contact-col { scroll-margin-top: 90px; border-radius: 12px; }
.sf-contact-col.flash { animation: sfFlash 1.6s ease; }
@keyframes sfFlash { 0%, 60% { box-shadow: 0 0 0 8px rgba(20,184,166,.18); background: rgba(20,184,166,.08); } 100% { box-shadow: 0 0 0 8px transparent; background: transparent; } }
@media (max-width: 900px) {
  .sf-inner { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .sf-brand, .sf-contact-col { grid-column: 1 / -1; }
}

/* home hero: single centered column (order-card mock removed) */
.page-home .hero.hero2 { border-bottom: 0; }
.page-home .hero2-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 900px; padding: 4.2rem 1.25rem 3.6rem; }
.page-home .hero2-copy { display: flex; flex-direction: column; align-items: center; }
.page-home .hero.hero2 p.hero2-lead { margin-left: auto; margin-right: auto; max-width: 40rem; }
.page-home .hero2-actions, .page-home .hero2-stats, .page-home .hero2-chips { justify-content: center; }
.page-home .hero2-stats { gap: 1.1rem 3rem; }
.page-home .hero2-stats .stat { align-items: center; }
.page-home .hero2-chips { max-width: 44rem; }
@media (max-width: 560px) {
  .page-home .hero2-inner { padding: 2.6rem 1rem 2.4rem; }
  .page-home .hero2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; width: 100%; max-width: 320px; }
}

/* home: light content area between the dark hero and the dark footer */
.home-light {
  --hl-text: #0f2a26; --hl-muted: #4d635e; --hl-line: #dfe9e6; --hl-card: #ffffff; --hl-soft: #f3f8f7;
  --hl-brand: #0f766e; --hl-brand-2: #0d9488;
  background: #fff; color: var(--hl-text);
}
.home-features { max-width: 1160px; margin: 0 auto; padding: 1.6rem 1.25rem .2rem; }
.home-light .feature-row .feature { background: var(--hl-soft); border: 1px solid var(--hl-line); color: var(--hl-text); font-weight: 500; }
.home-light .feature-row .feature i { position: relative; background: var(--hl-brand-2); }
.home-light .feature-row .feature i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.home-light .hs-title { border-left-color: var(--hl-brand-2); }
.home-light .hs-title span, .home-light .hs-head.center p { color: var(--hl-muted); }
.home-light .hs-more, .home-light .hs-kicker { color: var(--hl-brand); }
.home-light .hs-more:hover { color: #115e59; }

.home-light .hot-card { background: var(--hl-card); border-color: var(--hl-line); box-shadow: 0 1px 2px rgba(15,42,38,.05); }
.home-light .hot-card:hover, .home-light .hot-card:focus-visible { border-color: var(--hl-brand-2); box-shadow: 0 12px 26px rgba(15,42,38,.12); }
.home-light .hot-img { background: var(--hl-soft); }
.home-light .hot-img.fallback { background: linear-gradient(135deg, #ccfbf1, #e6f7f4); }
.home-light .hot-img.fallback::after { color: var(--hl-brand); }
.home-light .hot-plat { background: rgba(255,255,255,.92); color: #115e59; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.home-light .hot-title { color: var(--hl-text); }
.home-light .hot-price { color: var(--hl-brand); }
.home-light .hot-stock { color: var(--hl-muted); }
.home-light .hot-card.skel .hot-img, .home-light .hot-card.skel i { background: linear-gradient(90deg, #eef3f2, #e2ebe9, #eef3f2); background-size: 200% 100%; }

.home-light .flow { max-width: none; background: #fff; border-top: 1px solid var(--hl-line); border-bottom: 1px solid var(--hl-line); }
.home-light .flow > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.home-light .flow-steps::before { background: linear-gradient(90deg, rgba(13,148,136,.15), rgba(13,148,136,.5), rgba(13,148,136,.15)); }
.home-light .flow-ico { background: #fff; border-color: rgba(13,148,136,.35); color: var(--hl-brand-2); box-shadow: 0 8px 20px rgba(15,42,38,.08); }
.home-light .flow-step:hover .flow-ico { background: #f0fdfa; }
.home-light .flow-n { background: var(--hl-brand-2); color: #fff; border-color: #fff; }
.home-light .flow-n.done { background: #10b981; }
.home-light .flow-step p { color: var(--hl-muted); }

.home-light .rv-card { background: var(--hl-card); border-color: var(--hl-line); box-shadow: 0 6px 18px rgba(15,42,38,.07); }
.home-light .rv-q { color: rgba(13,148,136,.5); }
.home-light .rv-stars { color: #f59e0b; }
.home-light .rv-stars i { color: #d7e0de; }
.home-light .rv-card blockquote { color: #24413c; }
.home-light .rv-card figcaption { border-top-color: var(--hl-line); }
.home-light .rv-av { background: #ccfbf1; color: #115e59; }
.home-light .rv-card figcaption small { color: var(--hl-muted); }

.home-light .art-card { background: var(--hl-card); border-color: var(--hl-line); box-shadow: 0 6px 18px rgba(15,42,38,.07); }
.home-light .art-card:hover { border-color: var(--hl-brand-2); }
.home-light .art-cover { background: var(--hl-soft); }
.home-light .art-cover.fallback::after { color: var(--hl-brand); }
.home-light .art-date { color: var(--hl-muted); }
.home-light .art-body h3 a:hover { color: var(--hl-brand); }
.home-light .art-more { color: var(--hl-brand); }
.home-light .cta.ghost { color: var(--hl-brand); border-color: rgba(13,148,136,.45); }
.home-light .cta.ghost:hover { background: #f0fdfa; }
.page-home footer.site-footer { margin-top: 0; border-top: 0; }

/* home hero hierarchy: big headline + CTAs, quieter secondary info */
.page-home .hero2-inner { padding: 3.6rem 1.25rem 3rem; max-width: 980px; }
.page-home .hero2-badge { margin-bottom: 1.3rem; }
.page-home .hero2-title { font-size: clamp(2.9rem, 7.4vw, 5.4rem); font-weight: 900; line-height: 1.06; letter-spacing: -.03em; margin: 0 0 1.1rem; }
.page-home .hero2-title .grad { filter: drop-shadow(0 6px 26px rgba(45,212,191,.28)); }
html[lang="en"] .page-home .hero2-title { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.page-home .hero.hero2 p.hero2-lead { font-size: .92rem; line-height: 1.65; color: #93b3ab; max-width: 36rem; margin-bottom: 1.7rem; }
.page-home .hero2-actions { gap: .85rem; margin-bottom: 2rem; }
.page-home .hero2-actions .cta { padding: .95rem 1.85rem; font-size: 1.06rem; }
.page-home .hero2-actions .cta:not(.ghost) { box-shadow: 0 14px 34px rgba(20,184,166,.4); }
.page-home .hero2-stats { gap: .8rem 2.4rem; margin-bottom: 1.05rem; opacity: .85; }
.page-home .hero2-stats .stat b { font-size: 1.12rem; font-weight: 700; }
.page-home .hero2-stats .stat span { font-size: .72rem; }
.page-home .hero2-chips { gap: .4rem; }
.page-home .hero2-chips a { padding: .24rem .65rem; font-size: .74rem; font-weight: 500; color: #a9c8c0; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.page-home .hero2-chips a.more { color: #a7f3d0; }
@media (max-width: 560px) {
  .page-home .hero2-inner { padding: 2.4rem 1rem 2.2rem; }
  .page-home .hero2-title { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  html[lang="en"] .page-home .hero2-title { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .page-home .hero.hero2 p.hero2-lead { font-size: .86rem; margin-bottom: 1.4rem; }
  .page-home .hero2-actions { margin-bottom: 1.5rem; }
  .page-home .hero2-actions .cta { padding: .85rem 1.45rem; font-size: 1rem; }
  .page-home .hero2-stats { grid-template-columns: repeat(4, auto); justify-content: center; gap: .6rem 1.1rem; max-width: none; }
  .page-home .hero2-stats .stat { min-width: 0; }
  .page-home .hero2-stats .stat b { font-size: 1rem; }
  .page-home .hero2-stats .stat span { font-size: .68rem; white-space: nowrap; }
}
@media (max-width: 380px) {
  .page-home .hero2-stats { grid-template-columns: repeat(2, auto); gap: .7rem 2rem; }
}

/* home hero ≈ 2/3 of the viewport on desktop, content vertically centred */
@media (min-width: 901px) {
  .page-home .hero.hero2 { min-height: max(540px, calc(66vh - 40px)); display: flex; flex-direction: column; justify-content: center; }
  .page-home .hero2-inner { width: 100%; padding: 3rem 1.25rem; }
  .page-home .hero2-title { font-size: clamp(3.4rem, min(7.4vw, 10.5vh), 6.4rem); margin-bottom: 1.3rem; }
  html[lang="en"] .page-home .hero2-title { font-size: clamp(2.8rem, min(5.8vw, 8.4vh), 5.2rem); }
  .page-home .hero2-badge { margin-bottom: 1.6rem; }
  .page-home .hero.hero2 p.hero2-lead { font-size: .98rem; margin-bottom: 2rem; }
  .page-home .hero2-actions { margin-bottom: 2.4rem; }
  .page-home .hero2-actions .cta { padding: 1.05rem 2.1rem; font-size: 1.12rem; }
  .page-home .hero2-stats { margin-bottom: 1.2rem; }
}

/* compact hot-product cards: small logo + whitespace instead of a full-bleed image */
.hot-grid { gap: .7rem; }
.hot-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .75rem 0; }
.hot-img { aspect-ratio: auto; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; }
.hot-card:hover .hot-img img { transform: none; }
.hot-img.fallback::after { font-size: .85rem; }
.hot-plat { position: static; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: none; }
.home-light .hot-img { box-shadow: 0 0 0 1px var(--hl-line); }
.home-light .hot-plat { background: #ecfdf8; color: #115e59; box-shadow: none; border: 1px solid #c6eee4; }
.hot-body { padding: .6rem .75rem .7rem; gap: .45rem; }
.hot-card.skel .hot-img { width: 46px; height: 46px; }
@media (max-width: 560px) {
  .hot-grid > .hot-card:nth-child(n+7) { display: flex; }
  .hot-grid > .hot-card:nth-child(n+9) { display: none; }
  .hot-img { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
  .hot-head { padding: .6rem .6rem 0; }
  .hot-body { padding: .5rem .6rem .6rem; }
  .hot-plat { font-size: .66rem; }
}
@media (min-width: 901px) {
  .page-home .hero.hero2 { min-height: max(480px, calc(66vh - 40px)); }
  .page-home .hero2-inner { padding: clamp(1.5rem, 4vh, 3rem) 1.25rem; }
  .page-home .hero2-title { font-size: clamp(3rem, min(7.4vw, 9vh), 6.4rem); margin-bottom: clamp(.8rem, 1.8vh, 1.3rem); }
  html[lang="en"] .page-home .hero2-title { font-size: clamp(2.6rem, min(5.8vw, 7.2vh), 5.2rem); }
  .page-home .hero2-badge { margin-bottom: clamp(.9rem, 2vh, 1.6rem); }
  .page-home .hero.hero2 p.hero2-lead { margin-bottom: clamp(1.2rem, 2.6vh, 2rem); }
  .page-home .hero2-actions { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
}

/* hero headline a notch smaller (~72px at 1080p) */
@media (min-width: 901px) {
  .page-home .hero2-title { font-size: clamp(2.6rem, min(6.2vw, 6.7vh), 5.4rem); }
  html[lang="en"] .page-home .hero2-title { font-size: clamp(2.2rem, min(5vw, 6vh), 4.4rem); }
}
@media (max-width: 900px) and (min-width: 561px) {
  .page-home .hero2-title { font-size: clamp(2.6rem, 6.2vw, 3.6rem); }
}
@media (max-width: 560px) {
  .page-home .hero2-title { font-size: clamp(2.2rem, 10.5vw, 2.85rem); }
  html[lang="en"] .page-home .hero2-title { font-size: clamp(1.8rem, 8.4vw, 2.35rem); }
}

/* SEO blocks: platform landing intro, platform cards, types / FAQ / product links (server-rendered) */
.seo-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 1.25rem; }
.seo-wrap.seo-top { padding: 1.25rem 1.25rem 0; }
.seo-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.seo-hero h1 { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -.01em; }
.seo-hero p { margin: 0; color: #e6f9f0; line-height: 1.7; font-size: .95rem; max-width: 62rem; }
.seo-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: var(--muted); font-size: .8rem; }
.seo-crumbs a:hover { color: #a7f3d0; }
.seo-crumbs i { font-style: normal; opacity: .6; }
.seo-sec { margin-top: 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.seo-sec h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.seo-sec .seo-sub { margin: -.4rem 0 .9rem; color: var(--muted); font-size: .9rem; }
.seo-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.seo-types li { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: rgba(255,255,255,.02); }
.seo-types h3 { margin: 0 0 .3rem; font-size: .98rem; color: #d1fae5; }
.seo-types p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.seo-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .45rem 1rem; }
.seo-links a { display: block; color: #e6f9f0; font-size: .88rem; line-height: 1.5; padding: .35rem 0; border-bottom: 1px dashed var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-links a:hover { color: #a7f3d0; }
.home-light .seo-links a { color: var(--hl-text); border-bottom-color: var(--hl-line); }
.home-light .seo-links a:hover { color: var(--hl-brand); }
.seo-sec .faq-list { display: grid; gap: .6rem; }
.seo-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.seo-pcard { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1rem; background: rgba(255,255,255,.02); transition: border-color .15s, transform .15s; }
.seo-pcard:hover { border-color: rgba(45,212,191,.5); transform: translateY(-2px); }
.seo-pcard h3 { margin: 0; font-size: 1rem; }
.seo-pcard p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; flex: 1; }
.seo-pcard span { color: #a7f3d0; font-size: .85rem; font-weight: 600; }
.home-light .seo-home { padding-top: .6rem; padding-bottom: .6rem; }
.home-light .seo-sec.seo-light { background: transparent; border: 0; padding: 0; margin: 0; }
.home-light .seo-light h2 { font-size: 1.4rem; padding-left: .7rem; border-left: 3px solid var(--hl-brand-2); }
.home-light .seo-light .seo-sub { margin: -.3rem 0 1rem; color: var(--hl-muted); }
.home-light .seo-pcard { background: var(--hl-card); border-color: var(--hl-line); box-shadow: 0 1px 2px rgba(15,42,38,.05); }
.home-light .seo-pcard:hover { border-color: var(--hl-brand-2); box-shadow: 0 12px 26px rgba(15,42,38,.12); }
.home-light .seo-pcard h3 { color: var(--hl-text); }
.home-light .seo-pcard p { color: var(--hl-muted); }
.home-light .seo-pcard span { color: var(--hl-brand); }
@media (max-width: 760px) {
  .seo-wrap, .seo-wrap.seo-top { padding-left: .75rem; padding-right: .75rem; }
  .seo-hero { padding: 1rem; }
  .seo-hero p { font-size: .9rem; }
  .seo-pgrid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .seo-pcard { padding: .8rem; }
  .seo-pcard p { display: none; }
}

/* ===== Header v2 (2026-10-02): single row, nav left, [中/EN] [balance] [user menu] right ===== */
.topbar-inner { max-width: 1240px; height: 64px; padding: 0 1.25rem; gap: 1.25rem; flex-wrap: nowrap; justify-content: flex-start; }
.topbar .brand { flex: 0 0 auto; white-space: nowrap; }
.topbar .brand > a > div:last-child { font-size: 1.05rem; }
.topbar .nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: .2rem; align-items: center; overflow: hidden; }
.topbar .nav a { flex: 0 0 auto; white-space: nowrap; height: 36px; display: inline-flex; align-items: center; padding: 0 .85rem; font-size: .92rem; line-height: 1; }
.page-tutorials .topbar .nav a.active, .page-tutorial-detail .topbar .nav a.active { color: #fff; }
.topbar .top-actions { flex: 0 0 auto; margin-left: auto; gap: .6rem; flex-wrap: nowrap; white-space: nowrap; }
.topbar #connStatus { display: none !important; }
.topbar .lang-switch { height: 32px; align-items: stretch; padding: 2px; gap: 2px; background: #f1f7f5; border: 1px solid #dbe8e4; border-radius: 9px; flex: 0 0 auto; }
.topbar .lang-switch button { min-width: 34px; padding: 0 .55rem; border-radius: 7px; font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap; color: #4b635d; display: inline-flex; align-items: center; justify-content: center; }
.topbar .lang-switch button.active { background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgba(15,42,38,.16); }
.topbar .lang-switch button:hover:not(.active) { background: rgba(20,184,166,.08); }
.topbar .auth-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.hb-btn { height: 36px; padding: 0 .95rem; border-radius: 10px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.hb-btn.ghost { background: #fff; color: #0f766e; border: 1px solid #cfe3de; }
.hb-btn.ghost:hover { border-color: #14b8a6; }
.hb-btn.primary { background: #14b8a6; color: #fff; border: 1px solid #14b8a6; box-shadow: 0 4px 12px rgba(20,184,166,.28); }
.hb-btn.primary:hover { background: #0d9488; border-color: #0d9488; }
.hb-bal { height: 36px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .4rem 0 .75rem; border-radius: 10px; background: #ecfdf5; border: 1px solid #c7eee0; color: #065f46; font-size: .85rem; white-space: nowrap; }
.hb-bal-l { color: #4b7d6e; font-weight: 600; }
.hb-bal b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hb-bal i { font-style: normal; width: 22px; height: 22px; border-radius: 7px; background: #14b8a6; color: #fff; display: grid; place-items: center; font-weight: 800; line-height: 1; }
.hb-bal:hover { border-color: #14b8a6; }
.hb-user { position: relative; }
.hb-user-btn { height: 36px; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .45rem 0 .2rem; border-radius: 999px; border: 1px solid #dbe8e4; background: #fff; cursor: pointer; }
.hb-user-btn:hover, .hb-user-btn[aria-expanded="true"] { border-color: #14b8a6; }
.hb-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.hb-caret { width: 7px; height: 7px; border-right: 2px solid #4b635d; border-bottom: 2px solid #4b635d; transform: translateY(-2px) rotate(45deg); }
.hb-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; background: #fff; color: #0f2a26; border: 1px solid #dfe9e6; border-radius: 14px; box-shadow: 0 18px 40px rgba(15,42,38,.18); padding: .4rem; z-index: 60; display: flex; flex-direction: column; white-space: normal; }
.hb-menu-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .7rem; border-bottom: 1px solid #edf3f1; margin-bottom: .3rem; }
.hb-menu-head > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.hb-menu-head b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-menu-head small { font-size: .78rem; color: #4b7d6e; }
.hb-menu a, .hb-menu-out { display: block; width: 100%; text-align: left; padding: .6rem .65rem; border-radius: 9px; font: inherit; font-size: .9rem; font-weight: 600; color: #0f2a26; background: none; border: none; cursor: pointer; }
.hb-menu a:hover, .hb-menu-out:hover { background: #f1f7f5; }
.hb-menu-out { color: #be123c; border-top: 1px solid #edf3f1; border-radius: 0 0 9px 9px; margin-top: .3rem; }
.hb-menu-conn { display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; font-size: .78rem; color: #4b635d; }
.hb-menu-conn i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.hb-menu-conn.pending i { background: #facc15; }
.hb-menu-conn.bad i { background: #ef4444; }
@media (max-width: 1180px) {
  .topbar-inner { gap: .9rem; padding: 0 1rem; }
  .topbar .nav a { padding: 0 .65rem; font-size: .9rem; }
  .hb-bal-l { display: none; }
}
@media (max-width: 1040px) {
  .topbar .nav a { padding: 0 .5rem; }
}
@media (max-width: 900px) {
  .topbar-inner { height: 58px; }
  .topbar .nav { display: none; }
}

/* ===== SEO round 2 (2026-10-02): landing CTAs + trust row, need chips, tutorial related, CLS reserves ===== */
#catalog { scroll-margin-top: 76px; }
#list { min-height: min(100vh, 900px); }
.pdp-wrap { min-height: 100vh; }
.seo-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.seo-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 1.15rem; border-radius: 11px; font: inherit; font-weight: 800; font-size: .95rem; background: #14b8a6; color: #04241f; border: 1px solid #14b8a6; cursor: pointer; box-shadow: 0 8px 20px rgba(20,184,166,.28); }
.seo-cta:hover { background: #a7f3d0; }
.seo-cta.ghost { background: transparent; color: #d1fae5; border-color: rgba(45,212,191,.5); box-shadow: none; }
.seo-cta.ghost:hover { background: rgba(20,184,166,.12); }
.is-authed .seo-cta[data-auth-open] { display: none; }
.seo-trust { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.seo-trust li { display: flex; flex-direction: column; gap: .15rem; padding-left: 1.6rem; position: relative; }
.seo-trust li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(20,184,166,.18); box-shadow: inset 0 0 0 1px rgba(45,212,191,.55); }
.seo-trust li::after { content: ""; position: absolute; left: .4rem; top: .3rem; width: .28rem; height: .55rem; border: solid #a7f3d0; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.seo-trust b { font-size: .88rem; color: #e6fbf5; }
.seo-trust span { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.seo-need { margin-top: 1.1rem; }
.seo-need h3 { margin: 0 0 .6rem; font-size: .95rem; }
.seo-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.seo-chips a { padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(45,212,191,.4); color: #d1fae5; font-size: .86rem; font-weight: 600; }
.seo-chips a:hover { background: rgba(20,184,166,.12); }
.home-light .seo-need h3 { color: var(--hl-text); }
.home-light .seo-chips a { border-color: var(--hl-line); background: var(--hl-card); color: var(--hl-brand); }
.home-light .seo-chips a:hover { border-color: var(--hl-brand-2); }
.tut-related { max-width: 860px; margin: 1.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.tut-rel-cta { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(13,148,136,.08)); border: 1px solid rgba(45,212,191,.45); }
.tut-rel-cta b { font-size: 1.02rem; color: #e6fbf5; }
.tut-rel-cta span { grid-column: 1; font-size: .84rem; color: var(--muted); }
.tut-rel-cta i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 1.3rem; color: #a7f3d0; }
.tut-rel-cta:hover { border-color: #a7f3d0; }
.tut-related h2 { margin: .4rem 0 0; font-size: 1.1rem; }
.tut-rel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tut-rel-list a { display: block; padding: .7rem .85rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: #d7efe6; font-size: .9rem; line-height: 1.45; }
.tut-rel-list a:hover { border-color: rgba(45,212,191,.45); }
@media (max-width: 760px) {
  .seo-trust { grid-template-columns: 1fr 1fr; }
  .seo-cta { height: 40px; font-size: .9rem; }
  .tut-rel-list { grid-template-columns: 1fr; }
  #list { min-height: 70vh; }
}
.popular.pop-pending { min-height: 690px; }
@media (min-width: 901px) { .accounts-layout #cats:empty { min-height: 800px; } }
@media (max-width: 900px) { .accounts-layout #cats:empty { min-height: 47px; } .popular.pop-pending { min-height: 1120px; } }
.page-landing[data-platform] #subcats:empty { min-height: 30px; }
@media (max-width: 760px) { .page-landing[data-platform] #subcats:empty { min-height: 66px; } }

/* ===== Header v3 (2026-10-02): full-width row — [logo][首页 社媒账号 个人中心] … [使用教程][中/EN][balance][user menu] ===== */
.topbar-inner { max-width: none; padding: 0 20px; }
@media (min-width: 901px) {
  .topbar-inner { gap: .2rem; }
  .topbar .brand { margin-right: 1.1rem; }
  /* nav links become row items so 使用教程 can lead the right-hand group; #topNav stays in the DOM for the drawer */
  .topbar .nav { display: contents; }
  .topbar .nav a[href="/tutorials"] { order: 1; margin-left: auto; }
  .topbar .top-actions { order: 2; margin-left: .7rem; }
}
@media (max-width: 1180px) {
  .topbar-inner { padding: 0 16px; }
}

/* ===== Header v4 (2026-10-02): three zones — logo left · 首页/社媒账号/个人中心 truly centred · [使用教程][中/EN][balance][user menu] right ===== */
.top-tut { display: none; }
@media (min-width: 901px) {
  .topbar-inner { position: relative; gap: .6rem; }
  .topbar .brand { margin-right: 0; }
  .topbar .nav { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; overflow: visible; gap: .2rem; }
  .topbar .nav a[href="/tutorials"] { display: inline-flex; order: 0; margin-left: 0; }
  .topbar .top-actions { order: 0; margin-left: auto; }
  .top-tut { display: inline-flex; align-items: center; height: 36px; padding: 0 .85rem; border-radius: 999px; color: #345850; font-weight: 600; font-size: .92rem; line-height: 1; white-space: nowrap; }
  .top-tut.active, .top-tut:hover { background: #14b8a6; color: #fff; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .top-tut { padding: 0 .65rem; font-size: .9rem; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .topbar .nav a, .top-tut { padding: 0 .5rem; }
  .topbar .top-actions { gap: .45rem; }
}


/* ===== Theme: bright emerald (2026-10-02) — replaces the deep ink-green; white text stays ≥4.5:1 on body/panels ===== */
body { background: linear-gradient(180deg, #0a8a65 0, var(--bg) 640px) no-repeat, var(--bg); }
.hero, .hero.hero2 {
  background:
    radial-gradient(900px 460px at 8% -10%, rgba(18,184,134,.9), transparent 62%),
    radial-gradient(700px 420px at 92% 30%, rgba(52,211,153,.35), transparent 65%),
    linear-gradient(180deg, #0f9d6e 0%, #0c8d66 55%, var(--bg) 100%);
}
.hero h1, .hero2-title, .hero2-copy, .seo-hero h1 { text-shadow: 0 1px 2px rgba(3,52,38,.25); }
.hero2-title .grad, .hero h1 .grad { background: linear-gradient(90deg, #fef9c3, #d9f99d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.cta, .seo-cta { background: #4ade80; border-color: #4ade80; color: #04382a; box-shadow: 0 8px 22px rgba(3,52,38,.28); }
.cta:hover, .seo-cta:hover { background: #86efac; border-color: #86efac; }
.cta.ghost, .seo-cta.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.55); box-shadow: none; }
.cta.ghost:hover, .seo-cta.ghost:hover { background: rgba(255,255,255,.16); }
.notice { background: #076c50; color: #ecfdf5; border-bottom-color: rgba(255,255,255,.12); }
footer.site-footer { background: #065f45; border-top-color: rgba(255,255,255,.12); }
.sf-ci a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.sf-ci a:hover { text-decoration-color: #fff; }
.faq-a a, .dash-info a, .policy a, .legal a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
input, select, textarea { color-scheme: dark; }
::placeholder { color: rgba(236,253,245,.62); }

/* 客服 (Telegram) entry: desktop right group after 使用教程; drawer gets it from #topNav */
@media (min-width: 901px) {
  .topbar .nav a.nav-cs { display: none; }
  .top-cs { gap: .35rem; }
  .top-cs::before { content: ""; width: 15px; height: 15px; flex: 0 0 15px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.6 2.9 10.8c-1.3.5-1.3 1.2-.2 1.5l4.7 1.5 1.8 5.6c.2.6.4.8.9.8.4 0 .6-.2.8-.4l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.8-1.3-1.5zM9.3 14.3l8.6-5.4c.4-.2.8-.1.5.2l-7.1 6.4-.3 3-1.7-4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.6 2.9 10.8c-1.3.5-1.3 1.2-.2 1.5l4.7 1.5 1.8 5.6c.2.6.4.8.9.8.4 0 .6-.2.8-.4l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.8-1.3-1.5zM9.3 14.3l8.6-5.4c.4-.2.8-.1.5.2l-7.1 6.4-.3 3-1.7-4.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
}
.hero, .hero.hero2 {
  background:
    radial-gradient(760px 380px at 6% -18%, rgba(18,184,134,.85), transparent 62%),
    radial-gradient(640px 380px at 96% 20%, rgba(52,211,153,.3), transparent 65%),
    linear-gradient(180deg, #0f9d6e 0%, #0c8d66 55%, var(--bg) 100%);
}
.hero.hero2 p.hero2-lead, .hero p { color: rgba(255,255,255,.93); }
.hero2-stats .stat span, .hero2-stats span { color: rgba(255,255,255,.86); }
.hero2-stats .stat b, .hero2-stats b { color: #fff; }
.hero2-chips a { color: #fff; background: rgba(4,56,42,.2); border-color: rgba(255,255,255,.32); }
.hero2-chips a:hover { background: rgba(4,56,42,.32); border-color: rgba(255,255,255,.6); }
.hero2-badge { color: #fff; background: rgba(4,56,42,.22); border-color: rgba(255,255,255,.3); }
.page-home .hero.hero2 p.hero2-lead { color: rgba(255,255,255,.95); }
.page-home .hero2-stats .stat span { color: rgba(255,255,255,.92); }
.page-home .hero2-chips a { color: #fff; background: rgba(4,56,42,.24); border-color: rgba(255,255,255,.3); }
.page-home .hero2-chips a.more { color: #fef9c3; }
.dash-nav { color: #fff; }

/* keep the centred nav clear of the right group: compact the right side step by step */
@media (min-width: 901px) and (max-width: 1500px) { .hb-bal-l { display: none; } }
@media (min-width: 901px) and (max-width: 1320px) {
  .top-cs { font-size: 0; gap: 0; padding: 0 .55rem; }
  .top-cs::before { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .topbar .nav a { padding: 0 .5rem; font-size: .86rem; }
  .top-tut { padding: 0 .5rem; font-size: .86rem; }
  .top-cs { font-size: 0; }
  .topbar .top-actions { gap: .35rem; margin-left: auto; }
  .topbar .lang-switch button { min-width: 30px; padding: 0 .4rem; }
  .hb-caret { display: none; }
  .hb-user-btn { padding: 0 .2rem; }
  .topbar .brand > a > div:last-child { font-size: .98rem; }
}
.dash-nav.active { color: #fff; background: rgba(4,56,42,.32); border-color: rgba(255,255,255,.45); }
.hero, .hero.hero2 {
  background:
    radial-gradient(700px 300px at 4% -22%, rgba(18,184,134,.9), transparent 60%),
    radial-gradient(560px 300px at 98% -10%, rgba(52,211,153,.4), transparent 62%),
    linear-gradient(180deg, #0e9a6c 0%, #0a8562 34%, #08795a 100%);
}
.page-home .hero.hero2 p.hero2-lead, .hero.hero2 p.hero2-lead { color: #fff; }
.page-home .hero2-stats .stat span { color: #fff; }
@media (min-width: 901px) and (max-width: 1140px) {
  .topbar #authBar .hb-btn { padding: 0 .6rem; font-size: .84rem; }
}

/* ===== Theme v2 (2026-10-03): visible emerald gradients — brighter top, deeper bottom (ref: theme-lighter-reference) ===== */
:root { --panel: rgba(3,50,37,.42); --line: rgba(255,255,255,.15); --muted: #e6f9f0; }
body {
  background:
    radial-gradient(1100px 620px at 0% 0%, rgba(52,211,153,.22), transparent 60%),
    radial-gradient(900px 620px at 100% 100%, rgba(20,184,166,.28), transparent 62%),
    linear-gradient(168deg, #09805e 0%, #076e51 34%, #055a42 66%, #043f2d 100%);
  background-attachment: fixed;
  background-color: #055a42;
}
.hero, .hero.hero2 {
  background:
    radial-gradient(820px 420px at 0% -12%, rgba(74,222,128,.42), transparent 62%),
    radial-gradient(700px 460px at 100% 110%, rgba(20,184,166,.38), transparent 64%),
    linear-gradient(172deg, #13ad7a 0%, #0c9168 30%, #087a59 58%, #054e38 100%);
}
.hero2-badge { background: rgba(4,56,42,.38); }
.notice { background: linear-gradient(90deg, #065f46, #087a59 50%, #065f46); }
footer.site-footer {
  background:
    radial-gradient(700px 300px at 100% 100%, rgba(20,184,166,.25), transparent 65%),
    linear-gradient(180deg, #076c50 0%, #054e39 55%, #033a2a 100%);
}
.page-home footer.site-footer { border-top: 0; }
.hero, .hero.hero2 {
  background:
    radial-gradient(820px 420px at 0% -12%, rgba(74,222,128,.42), transparent 62%),
    radial-gradient(620px 300px at 100% 125%, rgba(20,184,166,.24), transparent 62%),
    linear-gradient(172deg, #13ad7a 0%, #0c9168 30%, #087a59 58%, #054e38 100%);
}

/* ===== Theme v3 (2026-10-03): deep ink-green gradients — #075c45 at the top fading to near-black green #022a20 ===== */
:root { --panel: rgba(255,255,255,.055); --line: rgba(255,255,255,.12); }
body {
  background:
    radial-gradient(1000px 560px at 70% 0%, rgba(16,185,129,.14), transparent 62%),
    radial-gradient(900px 620px at 100% 100%, rgba(20,184,166,.22), transparent 62%),
    linear-gradient(170deg, #075c45 0%, #054a37 38%, #043b2c 68%, #022a20 100%);
  background-attachment: fixed;
  background-color: #043b2c;
}
.hero, .hero.hero2 {
  background:
    radial-gradient(900px 480px at 75% -10%, rgba(16,185,129,.2), transparent 64%),
    radial-gradient(760px 460px at 100% 115%, rgba(20,184,166,.3), transparent 62%),
    linear-gradient(180deg, #076048 0%, #054a37 48%, #032e23 100%);
}
.hero2-title .grad, .hero h1 .grad { background: linear-gradient(90deg, #6ee7b7, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-badge { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.page-home .hero2-chips a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }
.notice { background: linear-gradient(90deg, #054a37, #066048 50%, #054a37); }
footer.site-footer {
  background:
    radial-gradient(700px 300px at 100% 100%, rgba(20,184,166,.2), transparent 65%),
    linear-gradient(180deg, #054a37 0%, #033427 55%, #022a20 100%);
}


/* ===== Night mode (2026-10-03): html.theme-dark — near-black with a faint green tint; day = deep-green theme above ===== */
.theme-toggle { height: 32px; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .6rem; border-radius: 9px; border: 1px solid #dbe8e4; background: #f1f7f5; color: #345850; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.theme-toggle:hover { border-color: #14b8a6; }
.tt-ico { width: 15px; height: 15px; flex: 0 0 15px; background: currentColor; mask-mode: alpha; -webkit-mask-mode: alpha;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tt-to-light { display: none; }
html.theme-dark .tt-to-dark { display: none; }
html.theme-dark .tt-to-light { display: inline; }
html.theme-dark .tt-ico {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 2h2v3h-2V2zm0 17h2v3h-2v-3zM2 11h3v2H2v-2zm17 0h3v2h-3v-2zM4.2 5.6 5.6 4.2 7.8 6.4 6.4 7.8 4.2 5.6zm11.8 11.8 1.4-1.4 2.2 2.2-1.4 1.4-2.2-2.2zM4.2 18.4l2.2-2.2 1.4 1.4-2.2 2.2-1.4-1.4zm11.8-11.8 2.2-2.2 1.4 1.4-2.2 2.2-1.4-1.4zM12 7a5 5 0 1 0 .01 10.01A5 5 0 0 0 12 7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 2h2v3h-2V2zm0 17h2v3h-2v-3zM2 11h3v2H2v-2zm17 0h3v2h-3v-2zM4.2 5.6 5.6 4.2 7.8 6.4 6.4 7.8 4.2 5.6zm11.8 11.8 1.4-1.4 2.2 2.2-1.4 1.4-2.2-2.2zM4.2 18.4l2.2-2.2 1.4 1.4-2.2 2.2-1.4-1.4zm11.8-11.8 2.2-2.2 1.4 1.4-2.2 2.2-1.4-1.4zM12 7a5 5 0 1 0 .01 10.01A5 5 0 0 0 12 7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mnav-theme { height: 40px; padding: 0 1rem; border-radius: 999px; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; font-size: .9rem; }
@media (max-width: 900px) { .topbar .theme-toggle { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) { .topbar .theme-toggle .tt-txt { display: none !important; } .topbar .theme-toggle { padding: 0 .5rem; } }

html.theme-dark { color-scheme: dark; --bg: #070b0a; --bg-2: #0c1311; --bg-3: #101917; --panel: #121a18; --line: rgba(255,255,255,.09); --text: #e8f1ee; --muted: #a9bdb7; --shadow: 0 10px 30px rgba(0,0,0,.45); }
html.theme-dark body {
  background: radial-gradient(1000px 560px at 70% 0%, rgba(16,185,129,.07), transparent 62%), linear-gradient(180deg, #0c1412 0%, #080c0b 55%, #050807 100%);
  background-attachment: fixed; background-color: #070b0a; color: var(--text);
}
html.theme-dark .hero, html.theme-dark .hero.hero2 { background: radial-gradient(900px 460px at 70% -10%, rgba(16,185,129,.12), transparent 64%), linear-gradient(180deg, #0e1915 0%, #090e0d 100%); border-bottom-color: rgba(255,255,255,.06); }
html.theme-dark .notice { background: #0b1210; color: #c9d8d3; border-bottom-color: rgba(255,255,255,.06); }
html.theme-dark footer.site-footer { background: #060a09; border-top: 1px solid rgba(255,255,255,.06); }
html.theme-dark .hero2-badge, html.theme-dark .page-home .hero2-chips a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* header + menus */
html.theme-dark .topbar { background: rgba(10,15,14,.96); color: #e8f1ee; border-bottom-color: rgba(255,255,255,.08); }
html.theme-dark .topbar .nav a, html.theme-dark .top-tut { color: #b9cbc5; }
html.theme-dark .topbar .nav a.active, html.theme-dark .topbar .nav a:hover, html.theme-dark .top-tut.active, html.theme-dark .top-tut:hover { background: #14b8a6; color: #04241f; }
html.theme-dark .topbar .lang-switch { background: #111917; border-color: #24312e; }
html.theme-dark .topbar .lang-switch button { color: #9fb3ad; }
html.theme-dark .topbar .lang-switch button.active { background: #1f2a27; color: #5eead4; box-shadow: none; }
html.theme-dark .theme-toggle { background: #111917; border-color: #24312e; color: #fde68a; }
html.theme-dark .mnav-theme { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }
html.theme-dark .hb-btn.ghost { background: transparent; color: #a7f3d0; border-color: #2a3a36; }
html.theme-dark .hb-bal { background: #0f1b18; border-color: #1f3a33; color: #d1fae5; }
html.theme-dark .hb-bal-l { color: #9fb3ad; }
html.theme-dark .hb-user-btn { background: #111917; border-color: #263330; }
html.theme-dark .hb-caret { border-color: #9fb3ad; }
html.theme-dark .hb-menu { background: #0f1513; color: #e8f1ee; border-color: #1f2a27; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
html.theme-dark .hb-menu-head { border-bottom-color: #1f2a27; }
html.theme-dark .hb-menu-head small, html.theme-dark .hb-menu-conn { color: #9fb3ad; }
html.theme-dark .hb-menu a, html.theme-dark .hb-menu-out { color: #e8f1ee; }
html.theme-dark .hb-menu a:hover, html.theme-dark .hb-menu-out:hover { background: #17201d; }
html.theme-dark .hb-menu-out { color: #fda4af; border-top-color: #1f2a27; }
html.theme-dark .mnav-burger { background: #111917; border-color: #263330; }
html.theme-dark .mnav-burger span { background: #a7f3d0; }
html.theme-dark .mnav-panel { background: #0a0f0e; border-left-color: rgba(255,255,255,.08); }
html.theme-dark .pill.ghost { background: transparent; color: #a7f3d0; border-color: #2a3a36; }

/* auth modal (white in day mode) */
html.theme-dark .modal.auth-card { background: #0f1614; color: #e8f1ee; border-color: #1f2a27; }
html.theme-dark .modal.auth-card h3 { color: #f3faf7; }
html.theme-dark .modal.auth-card .auth-sub, html.theme-dark .modal.auth-card label .opt { color: #a9bdb7; }
html.theme-dark .modal.auth-card label, html.theme-dark .auth-check { color: #c9d8d3 !important; }
html.theme-dark .modal.auth-card input[type="email"], html.theme-dark .modal.auth-card input[type="password"], html.theme-dark .modal.auth-card input[type="text"] { background: #0a100f; color: #e8f1ee; border-color: #263330; }
html.theme-dark .modal.auth-card input:focus { background: #0a100f; }
html.theme-dark .auth-close { background: #17201d; color: #c9d8d3; }
html.theme-dark .auth-close:hover { background: #1f2a27; }
html.theme-dark .auth-forgot-box { background: #0c1412; border-color: #1f3a33; color: #e8f1ee; }
html.theme-dark .auth-forgot-box b { color: #5eead4; }

/* home white content area */
html.theme-dark .home-light { --hl-text: #e8f1ee; --hl-muted: #a9bdb7; --hl-line: #1d2825; --hl-card: #0f1614; --hl-soft: #0c1311; --hl-brand: #5eead4; --hl-brand-2: #2dd4bf; background: #0a0f0e; }
html.theme-dark .home-light .hot-img.fallback { background: linear-gradient(135deg, #12201c, #0c1311); }
html.theme-dark .home-light .hot-plat { background: #13201c; color: #a7f3d0; border-color: #1f3a33; box-shadow: none; }
html.theme-dark .home-light .hot-card.skel .hot-img, html.theme-dark .home-light .hot-card.skel i { background: linear-gradient(90deg, #121a18, #18221f, #121a18); background-size: 200% 100%; }
html.theme-dark .home-light .flow { background: #0a0f0e; }
html.theme-dark .home-light .flow-ico { background: #0f1614; box-shadow: none; }
html.theme-dark .home-light .flow-step:hover .flow-ico { background: #13201c; }
html.theme-dark .home-light .flow-n { color: #04241f; border-color: #0a0f0e; }
html.theme-dark .home-light .rv-av { background: #13201c; color: #a7f3d0; }
html.theme-dark .home-light .rv-stars i { color: #2a3532; }
html.theme-dark .home-light .cta.ghost:hover { background: #13201c; }
html.theme-dark .home-light .seg button.active, html.theme-dark .home-light .tab.active { color: #04241f; }

/* generated: every day-theme green surface gets its night colour */
html.theme-dark .search { background: #0a100f; }
html.theme-dark .select, html.theme-dark .btn { background: #0a100f; }
html.theme-dark .modal { background: #0f1614; }
html.theme-dark .toast { background: #0d1513; }
html.theme-dark .tut-cover { background: linear-gradient(145deg, #0d1513, #121b18); }
html.theme-dark .tut-tag { background: rgba(8,12,11,.9); }
html.theme-dark .pdp-cover { background: linear-gradient(145deg, #0d1513, #121b18); }
html.theme-dark .qty-stepper { background: #0a100f; }
html.theme-dark .order-card { background: linear-gradient(160deg, rgba(20,30,27,.6), rgba(12,19,17,.92)); }
html.theme-dark .dash-stat { background: linear-gradient(160deg, rgba(20,30,27,.6), rgba(12,18,16,.92)); }
html.theme-dark .dash-form input { background: #0a100f; }
html.theme-dark .reset-card input { background: #0a100f; }
html.theme-dark .pop-img { background: #0c1311; }
html.theme-dark .bm-head { background: #0f1614; }
html.theme-dark .bm-img { background: #0c1311; }
html.theme-dark .bm-pk-foot { background: #0f1614; }
html.theme-dark .hot-img { background: #0c1311; }
html.theme-dark .hot-img.fallback { background: linear-gradient(135deg, #0d1513, #0d1513); }
html.theme-dark .art-cover { background: #0c1311; }
@media (min-width: 901px) and (max-width: 1320px) {
  .topbar .top-actions { gap: .4rem; }
  .topbar .theme-toggle { padding: 0 .45rem; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .topbar-inner { padding: 0 12px; }
  .topbar .nav a { padding: 0 .4rem; font-size: .82rem; }
  .top-tut { padding: 0 .4rem; font-size: .82rem; }
  .top-cs { padding: 0 .4rem; }
  .topbar .top-actions { gap: .25rem; }
  .topbar .lang-switch button { min-width: 28px; padding: 0 .3rem; }
  .topbar .theme-toggle { padding: 0 .35rem; }
  .topbar #authBar .hb-btn { padding: 0 .5rem; font-size: .8rem; }
  .hb-bal { padding: 0 .55rem; }
  .hb-bal i { display: none; }
}

/* night-mode contrast + card surfaces (keeps the deep-green day theme untouched) */
html.theme-dark .home-light .rv-card blockquote { color: #e8f1ee; }
html.theme-dark .home-light .hs-more:hover { color: #5eead4; }
html.theme-dark .home-light .art-body h3 a:hover { color: #5eead4; }
html.theme-dark .bm-radio { box-shadow: inset 0 0 0 3px #0f1614; }
html.theme-dark .thumb, html.theme-dark .pdp-rel img, html.theme-dark .pdp-rel-fb { background: #0c1311; }
html.theme-dark .tut-art-body code, html.theme-dark .tut-art-body pre { background: #0a100f; color: #d5e6e1; }
html.theme-dark .dash-stat { background: #141c1a; }
html.theme-dark .home-light { --hl-card: #161f1c; --hl-soft: #101816; }
html.theme-dark .side, html.theme-dark .main, html.theme-dark .dash-panel, html.theme-dark .legal-body, html.theme-dark .faq-item, html.theme-dark .seo-hero, html.theme-dark .seo-sec, html.theme-dark .tut-card, html.theme-dark .how-step, html.theme-dark .pdp-tabs-card, html.theme-dark .pdp-side-card, html.theme-dark .pdp-related { background: #121a18; }

/* Day white-green (2026-10-14): shop-style light gray page, white cards,
   green selected items and buy buttons. Home keeps its green hero.
   Night mode (html.theme-dark) is not targeted. */
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) {
  --bg: #f1f5f9;
  --bg-2: #e8eef3;
  --bg-3: #f8fafc;
  --panel: #ffffff;
  --line: rgba(15, 23, 42, .10);
  --text: #0f172a;
  --muted: #64748b;
  --ok: #059669;
  --bad: #e11d48;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04);
  color-scheme: light;
  background: #f1f5f9;
  background-image: none;
  color: #0f172a;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .notice {
  background: #0f766e;
  color: #f8fffe;
  border-bottom: 0;
}
html:not(.theme-dark) body.page-home .home-light {
  background: transparent;
  color: #0f172a;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .side,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .main,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-sec,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-hero,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .how-step,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .tool-card,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .tool-card-link,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .tool-work {
  background: #fff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, .08);
}
html:not(.theme-dark) body.page-tools .tool-card h2,
html:not(.theme-dark) body.page-tools .tool-card-link h2,
html:not(.theme-dark) body.page-tools .legal-head h1,
html:not(.theme-dark) body.page-tools .tool-work h2 { color: #0f172a; }
html:not(.theme-dark) body.page-tools .legal-kicker,
html:not(.theme-dark) body.page-tools .tool-tag { color: #0f766e; }
html:not(.theme-dark) body.page-tools .tool-tag { background: #ecfdf5; }
html:not(.theme-dark) body.page-tools .tool-row { background: #fff; color: #0f172a; }
html:not(.theme-dark) body.page-tools .tool-row.ok b,
html:not(.theme-dark) body.page-tools .tool-code { color: #047857; }
html:not(.theme-dark) body.page-tools .tool-row.bad b { color: #be123c; }
html:not(.theme-dark) body.page-tools .tool-copy { background: #0d9488; color: #fff; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .search,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .select,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .btn {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .search::placeholder { color: #94a3b8; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .chip,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .subcat,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-plat-btn,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-chips a {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .chip:hover,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .subcat:hover,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-plat-btn:hover,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-chips a:hover {
  border-color: #0d9488;
  color: #0f766e;
  background: #f0fdfa;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .chip.active,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .subcat.active {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-card,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .tips,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-types li,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-pcard {
  background: #fff;
  color: #0f172a;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .price,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-price { color: #0f172a; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .buy-box .price.ask { color: #b45309; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-stock,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta .m-stock.ok { color: #059669; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .buy,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .btn.primary,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-btn,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-card:hover .pop-btn {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
}
html:not(.theme-dark) body.page-home .hero .cta:not(.ghost) {
  background: #14b8a6;
  color: #fff;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-img,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .thumb { background: #f1f5f9; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .pop-img.fallback,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .thumb.fallback,
html:not(.theme-dark) body.page-followers .chip .letter { color: #0f766e; background: #f1f5f9; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta > span {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta .m-stock.ok { background: #ecfdf5; border-color: rgba(5, 150, 105, .25); }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta .m-stock.bad { color: #be123c; background: #fff1f2; border-color: rgba(190, 18, 60, .2); }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta .m-kind { color: #0f766e; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .row-meta .m-id { color: #64748b; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .error { color: #be123c; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-hero p,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-types h3,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-types p,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-links a,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-pcard h3,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-pcard span,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-trust b { color: #0f172a; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-links a:hover,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-pcard span { color: #0f766e; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-cta.ghost { color: #0f766e; border-color: rgba(13, 148, 136, .4); background: #fff; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-trust li::after { border-color: #0f766e; }
html:not(.theme-dark) body.page-followers .fol-notice {
  background: #f0fdfa;
  border-color: rgba(13, 148, 136, .22);
}
html:not(.theme-dark) body.page-followers .fol-notice h2,
html:not(.theme-dark) body.page-followers #orderNote a { color: #0f766e; }
html:not(.theme-dark) body.page-followers .fol-notice li p { color: #134e4a; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) footer.site-footer {
  background: #f8fafc;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-logo,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-col h4,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-ci b { color: #0f172a; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-col a,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-ci,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-hint,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-bottom { color: #64748b; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-contact,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-ci svg,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-ci em,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-ci a,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-col a:hover { color: #0f766e; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .sf-bottom { border-top-color: #e2e8f0; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .mnav-label { color: #d7efe6; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .toast {
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .modal:not(.auth-card) {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-head,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-pk-foot {
  background: #fff;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .modal input,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .modal .qty-input,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-step,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-prod,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-stat,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-var,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-pay,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-mode,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-picked,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-pk-row {
  background: #f8fafc;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-stat.due b,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-pk-price,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-detail-link { color: #0f766e; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-radio { box-shadow: inset 0 0 0 3px #fff; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-x { background: #f1f5f9; color: #334155; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .modal .err,
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .bm-err { color: #be123c; }

/* Add to Home Screen (2026-10-15): beside Buy on the homepage, not over it */
.page-home .hero2-a2hs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 1.15rem;
}
.page-home .hero2-a2hs .a2hs-result {
  text-align: center;
  color: rgba(255,255,255,.92);
}
.page-home .a2hs.is-tip {
  cursor: default;
  max-width: 22rem;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  font-weight: 600;
}

/* Follower average completion time */
.fol-avg { margin: .15rem 0 .7rem; color: var(--muted); font-size: .92rem; }

.page-followers .meta .avg { display: inline-flex; flex-direction: column; gap: .12rem; max-width: 36rem; }
.page-followers .meta .avg-note, .fol-avg .avg-note { color: #0f766e; font-size: .8rem; line-height: 1.4; }
.fol-avg { white-space: pre-line; }

/* Follower titles wrap */
.page-followers .row h3 { overflow-wrap: anywhere; line-height: 1.45; }
.page-followers .subcat { max-width: 100%; white-space: normal; text-align: left; line-height: 1.4; border-radius: 1rem; }


/* Followers description */
.fol-desc, .fol-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
.fol-desc { max-height: 280px; overflow: auto; margin: .4rem 0 .8rem; padding: .7rem .8rem; border-radius: .7rem; background: rgba(255,255,255,.06); line-height: 1.55; font-size: .92rem; }
.fol-preview { margin: .25rem 0 0; color: inherit; opacity: .9; font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.a2hs-result { margin: .6rem 0 0; max-width: 36rem; line-height: 1.5; }
.bm-copy { margin: .7rem 0; text-align: left; }
.bm-copy h4 { margin: 0 0 .25rem; font-size: .95rem; }
.bm-copy-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; max-height: 220px; overflow: auto; }
.bm-directs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.bm-direct { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: .45rem .7rem; cursor: pointer; }
.row-blurb { margin: .2rem 0 .35rem; font-size: .86rem; line-height: 1.45; opacity: .9; }
#bmEmail, #lookupEmail, #lookupOrder, #folExtra input, #folExtra textarea, #folExtra select { width: 100%; margin: .2rem 0 .55rem; }
html:not(.theme-dark) body.page-dash { background: #f1f5f9; color: #0f172a; }
html:not(.theme-dark) body.page-dash .dash-kicker { color: #0f766e; }
html:not(.theme-dark) body.page-dash .dash-welcome,
html:not(.theme-dark) body.page-dash .dash-stat .val,
html:not(.theme-dark) body.page-dash .dash-panel,
html:not(.theme-dark) body.page-dash .dash-panel-head h2 { color: #0f172a; }
html:not(.theme-dark) body.page-dash .dash-stat,
html:not(.theme-dark) body.page-dash .dash-panel,
html:not(.theme-dark) body.page-dash .dash-nav,
html:not(.theme-dark) body.page-dash .dash-gate-card {
  background: #fff; color: #0f172a; border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-dash .dash-nav { color: #0f172a; }
html:not(.theme-dark) body.page-dash .dash-nav.active,
html:not(.theme-dark) body.page-dash .cta,
html:not(.theme-dark) body.page-dash .auth-primary,
html:not(.theme-dark) body.page-dash .dash-nav.active {
  background: #0d9488; color: #fff; border-color: #0d9488;
}
html:not(.theme-dark) .fol-desc { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; }
html:not(.theme-dark) .bm-copy-body { color: #0f172a; }
@media (max-width: 800px) {
  body.page-landing { display: flex; flex-direction: column; }
  body.page-landing > header { order: 0; }
  body.page-landing > .notice { order: 1; }
  body.page-landing > .layout { order: 2; }
  body.page-landing > .seo-wrap.seo-top { order: 4; }
  body.page-landing > .seo-wrap:not(.seo-top) { order: 5; }
  body.page-landing > footer { order: 6; }
}

section.bm-supply { margin: .7rem 0; text-align: left; border: none; background: transparent; border-radius: 0; padding: 0; color: inherit; cursor: default; font-weight: 400; font-size: .95rem; display: block; }
section.bm-supply h4 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 700; }
section.bm-supply .bm-copy-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; max-height: none; overflow: visible; }
html:not(.theme-dark) section.bm-supply, html:not(.theme-dark) section.bm-supply .bm-copy-body { color: #0f172a; }


/* day dashboard contrast 2026-10-16 */
html:not(.theme-dark) body.page-dash .dash-warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #0f172a;
}
html:not(.theme-dark) body.page-dash .dash-warn .ico { color: #c2410c; }
html:not(.theme-dark) body.page-dash .dash-warn a {
  color: #0d9488;
  font-weight: 700;
  text-decoration: underline;
}
html:not(.theme-dark) body.page-dash .dash-info p,
html:not(.theme-dark) body.page-dash .dash-stat .lbl,
html:not(.theme-dark) body.page-dash .dash-stat .sub,
html:not(.theme-dark) body.page-dash .dash-muted,
html:not(.theme-dark) body.page-dash .dash-empty p,
html:not(.theme-dark) body.page-dash .dash-item-head small,
html:not(.theme-dark) body.page-dash .dash-table th,
html:not(.theme-dark) body.page-dash .dash-table td,
html:not(.theme-dark) body.page-dash .dash-table td small,
html:not(.theme-dark) body.page-dash .dash-kv span,
html:not(.theme-dark) body.page-dash .dash-kv b,
html:not(.theme-dark) body.page-dash .dash-loading,
html:not(.theme-dark) body.page-dash .dash-form label,
html:not(.theme-dark) body.page-dash .dash-form h3,
html:not(.theme-dark) body.page-dash .dash-gate-card p,
html:not(.theme-dark) body.page-dash .rc-form label,
html:not(.theme-dark) body.page-dash .rc-quote,
html:not(.theme-dark) body.page-dash .rc-sub,
html:not(.theme-dark) body.page-dash .rc-card,
html:not(.theme-dark) body.page-dash .rc-card b,
html:not(.theme-dark) body.page-dash .rc-card small,
html:not(.theme-dark) body.page-dash .rc-coin,
html:not(.theme-dark) body.page-dash .rc-step,
html:not(.theme-dark) body.page-dash .rc-h,
html:not(.theme-dark) body.page-dash .rc-admin {
  color: #0f172a !important;
}
html:not(.theme-dark) body.page-dash .dash-muted,
html:not(.theme-dark) body.page-dash .dash-stat .lbl,
html:not(.theme-dark) body.page-dash .dash-stat .sub,
html:not(.theme-dark) body.page-dash .dash-table th,
html:not(.theme-dark) body.page-dash .dash-kv span,
html:not(.theme-dark) body.page-dash .dash-form label,
html:not(.theme-dark) body.page-dash .rc-card small,
html:not(.theme-dark) body.page-dash .rc-sub,
html:not(.theme-dark) body.page-dash .dash-empty p {
  color: #334155;
}
html:not(.theme-dark) body.page-dash .dash-panel a,
html:not(.theme-dark) body.page-dash .dash-muted a,
html:not(.theme-dark) body.page-dash .dash-info a,
html:not(.theme-dark) body.page-dash .dash-warn a {
  color: #0d9488;
}
html:not(.theme-dark) body.page-dash .green,
html:not(.theme-dark) body.page-dash .dash-table .pos {
  color: #0f766e !important;
}
html:not(.theme-dark) body.page-dash .dash-table .neg,
html:not(.theme-dark) body.page-dash .dash-form .err,
html:not(.theme-dark) body.page-dash .rc-form .err {
  color: #be123c;
}
html:not(.theme-dark) body.page-dash .dash-note {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #134e4a !important;
}
html:not(.theme-dark) body.page-dash .dash-status.ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}
html:not(.theme-dark) body.page-dash .dash-status.wait {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}
html:not(.theme-dark) body.page-dash .dash-status.other {
  background: #f8fafc;
  color: #334155;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-dash .dash-item,
html:not(.theme-dark) body.page-dash .dash-kv,
html:not(.theme-dark) body.page-dash .rc-status,
html:not(.theme-dark) body.page-dash .rc-card,
html:not(.theme-dark) body.page-dash .rc-coin,
html:not(.theme-dark) body.page-dash .rc-presets button {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-dash .rc-card.on,
html:not(.theme-dark) body.page-dash .rc-coin.on,
html:not(.theme-dark) body.page-dash .rc-presets button.on {
  background: #f0fdfa;
  color: #0f172a;
  border-color: #0d9488;
}
html:not(.theme-dark) body.page-dash .dash-form input,
html:not(.theme-dark) body.page-dash .rc-input,
html:not(.theme-dark) body.page-dash .rc-input input {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}
html:not(.theme-dark) body.page-dash .dash-table td { border-bottom-color: #e2e8f0; }
html:not(.theme-dark) body.page-dash .rc-status code,
html:not(.theme-dark) body.page-dash .dash-table code { color: #0f172a; }

html:not(.theme-dark) body.page-dash .dash-stat .lbl,
html:not(.theme-dark) body.page-dash .dash-stat .sub,
html:not(.theme-dark) body.page-dash .dash-muted,
html:not(.theme-dark) body.page-dash .dash-kv span,
html:not(.theme-dark) body.page-dash .dash-table th { color: #334155 !important; }
html:not(.theme-dark) body.page-dash .dash-stat .val { color: #0f172a !important; }
@media (max-width: 800px) {
  body.page-accounts #subcats,
  body.page-landing #subcats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: 52px;
    margin-bottom: .45rem;
  }
  body.page-accounts #subcats .subcat,
  body.page-landing #subcats .subcat { flex: 0 0 auto; }
}

/* day dashboard readable text 2026-10-16b — night stays on the original light-on-dark colours */
html:not(.theme-dark) body.page-dash .dash-warn,
html:not(.theme-dark) body.page-dash .dash-warn span {
  color: #0f172a !important;
}
html:not(.theme-dark) body.page-dash .dash-warn a {
  color: #0d9488 !important;
  font-weight: 700;
  text-decoration: underline;
}
html:not(.theme-dark) body.page-dash .dash-cred {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f172a !important;
}
html:not(.theme-dark) body.page-dash .dash-copy {
  background: #ecfdf5;
  border-color: #99f6e4;
  color: #0f766e !important;
}
html:not(.theme-dark) body.page-dash .amber,
html:not(.theme-dark) body.page-dash .dash-stat .val.amber {
  color: #9a3412 !important;
}
html:not(.theme-dark) body.page-dash .teal {
  color: #0f766e !important;
}
html:not(.theme-dark) body.page-dash .green {
  color: #0f766e !important;
}
html:not(.theme-dark) body.page-dash .dash-info,
html:not(.theme-dark) body.page-dash .dash-info p,
html:not(.theme-dark) body.page-dash .dash-note {
  color: #134e4a !important;
}
html:not(.theme-dark) body.page-dash .dash-form input,
html:not(.theme-dark) body.page-dash .dash-form textarea {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1;
}
html:not(.theme-dark) body.page-dash a.cta,
html:not(.theme-dark) body.page-dash button.cta,
html:not(.theme-dark) body.page-dash .auth-primary {
  color: #fff !important;
}
html:not(.theme-dark) body.page-dash .dash-nav.logout {
  color: #be123c !important;
}
html:not(.theme-dark) body.page-dash .dash-nav.logout:hover {
  color: #9f1239 !important;
  background: #fff1f2;
}
html:not(.theme-dark) body.page-accounts main .dash-panel,
html:not(.theme-dark) body.page-accounts main .dash-panel.active {
  display: block;
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) #lookupForm label,
html:not(.theme-dark) #lookupLead,
html:not(.theme-dark) #lookupOut {
  color: #0f172a;
}
html:not(.theme-dark) #lookupEmail,
html:not(.theme-dark) #lookupOrder {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: .65rem .75rem;
}
@media (min-width: 901px) {
  .topbar .nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    gap: .1rem;
  }
  .topbar .nav a { padding: 0 .5rem; font-size: .86rem; }
}

/* guest channel selected + day buy modal text */
.bm-direct.on { background: #0d9488; color: #fff; border-color: #0d9488; }
html:not(.theme-dark) .modal.bm-card { background: #fff; color: #0f172a; }
html:not(.theme-dark) .modal.bm-card .bm-head { background: #fff; color: #0f172a; border-bottom-color: #e2e8f0; }
html:not(.theme-dark) .modal.bm-card .bm-head h3,
html:not(.theme-dark) .modal.bm-card .bm-name,
html:not(.theme-dark) .modal.bm-card .bm-label,
html:not(.theme-dark) .modal.bm-card .bm-note,
html:not(.theme-dark) .modal.bm-card .bm-warranty,
html:not(.theme-dark) .modal.bm-card .bm-supply,
html:not(.theme-dark) .modal.bm-card .bm-supply h4,
html:not(.theme-dark) .modal.bm-card .bm-copy-body { color: #0f172a; }
html:not(.theme-dark) .modal.bm-card .bm-cat { color: #0f766e; border-color: #99f6e4; }
html:not(.theme-dark) .modal.bm-card .bm-prod { background: #f8fafc; }
html:not(.theme-dark) .row-blurb { color: #334155; }

/* Account product page: full page, not a modal. Day stays white; night stays dark. */
.acct-page { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.acct-grid[hidden] { display: none !important; }
.acct-card, .acct-buy {
  background: var(--panel, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}
.acct-card { padding: 1.15rem 1.2rem 1.3rem; }
.acct-buy { position: sticky; top: .85rem; padding: 1.1rem 1.05rem 1.15rem; }
.acct-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: start; }
.acct-cover {
  width: 92px; height: 92px; border-radius: 16px; overflow: hidden;
  background: #0f766e; display: grid; place-items: center;
}
.acct-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-fallback { color: #fff; font-weight: 800; letter-spacing: .04em; }
.acct-title { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.4; color: inherit; }
.acct-price, .acct-buy-price { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.acct-facts { display: flex; flex-wrap: wrap; gap: .45rem 1rem; list-style: none; margin: .55rem 0 0; padding: 0; font-size: .9rem; }
.acct-facts b.ok { color: #0f766e; }
.acct-facts b.bad { color: #b91c1c; }
.acct-sec { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.acct-sec h2 { margin: 0 0 .45rem; font-size: 1rem; }
.acct-body { font-size: .94rem; line-height: 1.65; overflow-wrap: anywhere; }
.acct-body:empty { min-height: 0; }
.acct-label { display: block; margin: .85rem 0 .35rem; font-size: .82rem; font-weight: 700; }
.acct-buy-note { margin-top: .2rem; font-size: .85rem; opacity: .8; }
.acct-due { margin-top: .7rem; font-weight: 800; }
.acct-qty { margin-top: .15rem; }
#guestEmail, .acct-buy input[type="email"] {
  width: 100%; box-sizing: border-box; border-radius: 10px; padding: .65rem .75rem;
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
}
.acct-channels { display: flex; flex-wrap: wrap; gap: .4rem; }
.acct-ch {
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
  border-radius: 999px; padding: .4rem .7rem; font-weight: 700; cursor: pointer;
}
.acct-ch.on { background: #0d9488; color: #fff; border-color: #0d9488; }
.acct-fee { margin: .75rem 0; font-size: .8rem; line-height: 1.45; color: #475569; }
.acct-pay {
  width: 100%; border: 0; border-radius: 999px; padding: .8rem 1rem;
  background: #0d9488; color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.acct-pay:disabled { opacity: .5; cursor: not-allowed; }
.acct-hint { min-height: 1.2em; margin-top: .55rem; font-size: .84rem; color: #9a3412; }
#guestWrap[hidden] { display: none; }
html:not(.theme-dark) body.page-product { background: #f1f5f9; color: #0f172a; }
html:not(.theme-dark) body.page-product .acct-card,
html:not(.theme-dark) body.page-product .acct-buy { background: #fff; color: #0f172a; }
html:not(.theme-dark) body.page-product .acct-title,
html:not(.theme-dark) body.page-product .acct-price,
html:not(.theme-dark) body.page-product .acct-buy-price,
html:not(.theme-dark) body.page-product .acct-sec h2,
html:not(.theme-dark) body.page-product .acct-body,
html:not(.theme-dark) body.page-product .acct-body p,
html:not(.theme-dark) body.page-product .acct-body li,
html:not(.theme-dark) body.page-product .acct-facts,
html:not(.theme-dark) body.page-product .acct-due,
html:not(.theme-dark) body.page-product .pdp-meta { color: #0f172a; }
html:not(.theme-dark) body.page-product .acct-price,
html:not(.theme-dark) body.page-product .acct-buy-price { color: #0f766e; }
html:not(.theme-dark) body.page-product .pdp-crumbs,
html:not(.theme-dark) body.page-product .pdp-crumbs a,
html:not(.theme-dark) body.page-product .pdp-crumbs span { color: #334155; }
html:not(.theme-dark) body.page-product .acct-pay,
html:not(.theme-dark) body.page-product .acct-ch.on { color: #fff; }
html.theme-dark body.page-product .acct-card,
html.theme-dark body.page-product .acct-buy { background: #10211d; color: #f3faf7; border-color: rgba(255,255,255,.08); }
html.theme-dark body.page-product .acct-sec { border-top-color: rgba(255,255,255,.1); }
html.theme-dark body.page-product .acct-price,
html.theme-dark body.page-product .acct-buy-price { color: #5eead4; }
html.theme-dark body.page-product .acct-ch { background: #0c1a17; color: #f3faf7; border-color: rgba(255,255,255,.16); }
html.theme-dark body.page-product #guestEmail { background: #0c1a17; color: #f3faf7; border-color: rgba(255,255,255,.16); }
html.theme-dark body.page-product .acct-fee,
html.theme-dark body.page-product .acct-hint { color: #fde68a; }
a.pop-btn { display: inline-block; text-decoration: none; }
@media (max-width: 860px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-buy { position: static; }
}

html:not(.theme-dark) body.page-product .pdp-side-card,
html:not(.theme-dark) body.page-product .pdp-related,
html:not(.theme-dark) body.page-product .pdp-res,
html:not(.theme-dark) body.page-product .pdp-rel {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-product .pdp-side-card a,
html:not(.theme-dark) body.page-product .pdp-related a,
html:not(.theme-dark) body.page-product .pdp-res,
html:not(.theme-dark) body.page-product .pdp-res-t,
html:not(.theme-dark) body.page-product .pdp-rel-n,
html:not(.theme-dark) body.page-product .pdp-source {
  color: #0f172a;
}
html:not(.theme-dark) body.page-product .pdp-side-card a {
  color: #0f766e;
}

/* Product detail: one tab at a time, picker stays on the page */
.acct-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid #e2e8f0; margin: .35rem 0 0; }
.acct-tab {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: .72rem .85rem; margin: 0 0 -1px; font: inherit; font-weight: 700; color: #64748b; cursor: pointer;
}
.acct-tab[aria-selected="true"] { color: #0d9488; border-bottom-color: #0d9488; }
.acct-panel { padding: .9rem 0 .15rem; line-height: 1.65; min-height: 3.2rem; }
.acct-empty { margin: 0; color: #64748b; }
html:not(.theme-dark) body.page-product .acct-panel,
html:not(.theme-dark) body.page-product .acct-panel p,
html:not(.theme-dark) body.page-product .acct-panel li,
html:not(.theme-dark) body.page-product .acct-tab { color: #334155; }
html:not(.theme-dark) body.page-product .acct-tab[aria-selected="true"] { color: #0d9488; }
html:not(.theme-dark) body.page-product .acct-panel,
html:not(.theme-dark) body.page-product .acct-panel p,
html:not(.theme-dark) body.page-product .acct-panel li { color: #0f172a; }
html.theme-dark body.page-product .acct-tabs { border-bottom-color: rgba(255,255,255,.12); }
html.theme-dark body.page-product .acct-tab { color: #cbd5e1; }
html.theme-dark body.page-product .acct-tab[aria-selected="true"] { color: #5eead4; border-bottom-color: #5eead4; }
html.theme-dark body.page-product .acct-panel,
html.theme-dark body.page-product .acct-panel p,
html.theme-dark body.page-product .acct-panel li { color: #f3faf7; }
body.page-product .pdp-pick {
  display: block; margin: 0 0 1rem; padding: 0; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
}
.acct-pick-head { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; padding: .7rem .9rem; font-weight: 700; }
.acct-pick-head span { font-weight: 500; color: #475569; font-size: .86rem; }
.acct-pk-list { border-top: 1px solid #e2e8f0; max-height: 280px; overflow: auto; }
.acct-pk-row {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
  padding: .55rem .9rem; border: 0; border-bottom: 1px solid #e2e8f0; background: #fff;
  color: #0f172a; cursor: pointer; font: inherit;
}
.acct-pk-row.on { background: #f0fdfa; }
.acct-pk-user { display: block; font-weight: 650; }
.acct-pk-attrs { display: block; color: #475569; font-size: .78rem; font-weight: 400; }
.acct-pk-price { margin-left: auto; color: #0f766e; white-space: nowrap; }
.acct-pk-nav { display: flex; gap: .5rem; align-items: center; padding: .5rem .9rem; color: #334155; }
.acct-pk-nav button { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: .28rem .6rem; cursor: pointer; color: #0f172a; }
.acct-pk-nav button:disabled { opacity: .45; cursor: not-allowed; }
.acct-pick-state { padding: .8rem .9rem; color: #475569; }
html.theme-dark body.page-product .pdp-pick,
html.theme-dark body.page-product .acct-pk-row,
html.theme-dark body.page-product .acct-pk-nav button { background: #10211d; color: #f3faf7; border-color: rgba(255,255,255,.12); }
html.theme-dark body.page-product .acct-pk-row.on { background: #134e4a; }
html.theme-dark body.page-product .acct-pk-price { color: #5eead4; }
html.theme-dark body.page-product .acct-pick-head span,
html.theme-dark body.page-product .acct-pk-attrs,
html.theme-dark body.page-product .acct-pick-state { color: #cbd5e1; }

/* Product pay panel: balance on its own row, then Alipay and USDT */
body.page-product .acct-channels { display: flex; flex-direction: column; flex-wrap: nowrap; gap: .45rem; }
body.page-product .acct-ch-row { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
body.page-product .acct-ch {
  width: 100%; border-radius: 10px; padding: .72rem .7rem; font-weight: 700;
}
body.page-product .acct-ch-bal { display: block; text-align: center; }
html:not(.theme-dark) body.page-product .acct-ch { background: #fff; color: #0f172a; border-color: #cbd5e1; }
html:not(.theme-dark) body.page-product .acct-ch.on { background: #0d9488; color: #fff; border-color: #0d9488; }


/* Followers hot cards use the same day look as the account recommendations */
html:not(.theme-dark) body.page-followers .popular { background: linear-gradient(180deg, rgba(13,148,136,.08), rgba(13,148,136,.03)); border-color: rgba(13,148,136,.28); }
html:not(.theme-dark) body.page-followers .pop-head h3,
html:not(.theme-dark) body.page-followers .pop-plat,
html:not(.theme-dark) body.page-followers .pop-price { color: #0f172a; }
html:not(.theme-dark) body.page-followers .pop-head span,
html:not(.theme-dark) body.page-followers .pop-title,
html:not(.theme-dark) body.page-followers .pop-stock { color: #334155; }
html:not(.theme-dark) body.page-followers .pop-card { background: #fff; color: #0f172a; border-color: #e2e8f0; }
html:not(.theme-dark) body.page-followers .pop-img { background: #f1f5f9; }
html:not(.theme-dark) body.page-followers .pop-btn,
html:not(.theme-dark) body.page-followers .pop-card:hover .pop-btn { background: #0d9488; color: #fff; border-color: #0d9488; }
body.page-followers .pop-btn { width: 100%; display: block; box-sizing: border-box; }
body.page-followers .pop-card .pop-img { width: 30px; height: 30px; }


/* recharge bonus caption */
.rc-presets button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.rc-presets button small { display: block; margin-top: .12rem; font-size: .72rem; font-weight: 700; line-height: 1.15; }
html:not(.theme-dark) body.page-dash .rc-presets button small { color: #0f766e; }


/* zero-balance top-up link */
.acct-topup { display: flex; flex-direction: column; align-items: flex-end; gap: .08rem; color: #0d9488; font-weight: 800; font-size: .86rem; text-decoration: none; line-height: 1.2; }
.acct-topup small { font-size: .72rem; font-weight: 600; color: #64748b; }
body.page-product .acct-bal-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
body.page-product .acct-bal-row .acct-ch-bal { flex: 1 1 auto; width: auto; text-align: left; }
body.page-product .acct-bal-row .acct-topup { flex: 0 0 auto; }


/* register call-to-action note */
.seo-cta-stack { display: inline-flex; flex-direction: column; align-items: center; gap: .28rem; }
.seo-cta-note { font-size: .75rem; line-height: 1.2; font-weight: 700; color: #d1fae5; }
.is-authed .seo-cta-stack { display: none; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .seo-cta-note { color: #0f766e; }


/* register dialog */
.auth-gift { margin: -.2rem 0 .85rem; color: #0f766e; font-size: .82rem; font-weight: 700; }
.auth-ref-toggle { display: inline-block; margin: .65rem 0 .1rem; border: 0; background: none; padding: 0; color: #0d9488; font: inherit; font-weight: 700; cursor: pointer; }
.auth-ref-toggle:hover { text-decoration: underline; }


/* Selected top nav keeps the idle label width: color and background only. */
.topbar .nav a,
.topbar .nav a:hover,
.topbar .nav a.active,
.page-tutorials .nav a.active,
.page-tutorial-detail .nav a.active,
.page-tutorials .topbar .nav a.active,
.page-tutorial-detail .topbar .nav a.active,
.topbar .top-actions .top-tut,
.topbar .top-actions .top-tut:hover,
.topbar .top-actions .top-tut.active,
.topbar .top-actions .top-cs,
.topbar .top-actions .top-cs:hover {
  font-weight: 600;
}
.topbar .lang-switch button,
.topbar .lang-switch button:hover,
.topbar .lang-switch button.active,
.topbar .theme-toggle,
.topbar .theme-toggle:hover {
  font-weight: 700;
}


/* Day register dialog: dark text on the white card. Placeholders stay readable. */
html:not(.theme-dark) .modal.auth-card,
html:not(.theme-dark) .modal.auth-card h3,
html:not(.theme-dark) .modal.auth-card label,
html:not(.theme-dark) .modal.auth-card .auth-sub,
html:not(.theme-dark) .modal.auth-card .auth-gift,
html:not(.theme-dark) .modal.auth-card .auth-switch,
html:not(.theme-dark) .modal.auth-card .auth-check,
html:not(.theme-dark) .modal.auth-card .auth-ref-toggle {
  color: #0f172a;
}
html:not(.theme-dark) .modal.auth-card input[type="email"],
html:not(.theme-dark) .modal.auth-card input[type="password"],
html:not(.theme-dark) .modal.auth-card input[type="text"] {
  color: #0f172a;
  color-scheme: light;
  background: #f8fafc;
}
html:not(.theme-dark) .modal.auth-card input::placeholder {
  color: #334155;
  opacity: 1;
}


/* Top nav is centred on the page, not in the gap between the logo and the right actions. */
@media (min-width: 901px) {
  .topbar-inner { position: relative; }
  .topbar .brand,
  .topbar .top-actions { position: relative; z-index: 2; }
  .topbar .nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    flex: none;
    width: max-content;
    max-width: calc(100% - 2rem);
    min-width: 0;
    margin: 0;
    justify-content: center;
    overflow: visible;
  }
}


/* Add to desktop sits in the header, same small text as support, not a hero button. */
.topbar .top-a2hs,
.topbar .top-a2hs.is-tip {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  height: 36px;
  padding: 0 .85rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  color: #345850;
  white-space: nowrap;
  max-width: none;
  cursor: pointer;
}
.topbar .top-a2hs:hover,
.topbar .top-a2hs.is-tip:hover {
  background: #14b8a6;
  color: #fff;
}
html.theme-dark .topbar .top-a2hs,
html.theme-dark .topbar .top-a2hs.is-tip { color: #b9cbc5; }
html.theme-dark .topbar .top-a2hs:hover,
html.theme-dark .topbar .top-a2hs.is-tip:hover { background: #14b8a6; color: #04241f; }
@media (min-width: 901px) and (max-width: 1180px) {
  .topbar .top-a2hs,
  .topbar .top-a2hs.is-tip { padding: 0 .5rem; font-size: .86rem; }
}
header.topbar + .a2hs-result {
  margin: 0;
  padding: .45rem 1.25rem .55rem;
  text-align: right;
  max-width: none;
}


/* Right cluster keeps the old gap before the centred nav.
   Add to desktop is the first control in that cluster, same size as support.
   Padding on the right-hand controls gives the width back so the cluster
   does not slide left into 个人中心. */
@media (min-width: 901px) {
  .topbar .top-a2hs,
  .topbar .top-a2hs.is-tip,
  .topbar .top-actions .top-cs {
    padding-left: .25rem;
    padding-right: .25rem;
  }
  .topbar .lang-switch button {
    min-width: 26px;
    padding: 0 .2rem;
  }
  .topbar .theme-toggle {
    padding-left: .3rem;
    padding-right: .3rem;
  }
  .topbar #authBar { gap: .25rem; }
  .topbar #authBar .hb-btn { padding-left: .3rem; padding-right: .3rem; }
}
@media (min-width: 901px) {
  html[lang="en"] .topbar .top-actions { gap: .15rem; }
  html[lang="en"] .topbar .theme-toggle .tt-txt { display: none; }
  html[lang="en"] .topbar .theme-toggle { padding-left: .35rem; padding-right: .35rem; gap: 0; }
}


/* Day product pages: dark text on white or pale surfaces, including spec rows. */
html:not(.theme-dark) body.page-product {
  --text: #0f172a;
  --muted: #334155;
}
html:not(.theme-dark) body.page-product .pdp-variant {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-product .pdp-variant.active {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: none;
}
html:not(.theme-dark) body.page-product .pdp-variant .vn,
html:not(.theme-dark) body.page-product .pdp-variant .vm b,
html:not(.theme-dark) body.page-product .pdp-label,
html:not(.theme-dark) body.page-product .pdp-chip,
html:not(.theme-dark) body.page-product .pdp-chip.ghost,
html:not(.theme-dark) body.page-product .pdp-badge,
html:not(.theme-dark) body.page-product .pdp-badge.auto,
html:not(.theme-dark) body.page-product .pdp-badge.manual,
html:not(.theme-dark) body.page-product .pdp-stat,
html:not(.theme-dark) body.page-product .pdp-stat .v,
html:not(.theme-dark) body.page-product .pdp-price,
html:not(.theme-dark) body.page-product .pdp-rel-n,
html:not(.theme-dark) body.page-product .pdp-rel-m b,
html:not(.theme-dark) body.page-product .pdp-res-t,
html:not(.theme-dark) body.page-product .pdp-after,
html:not(.theme-dark) body.page-product .pdp-after b {
  color: #0f172a !important;
}
html:not(.theme-dark) body.page-product .pdp-variant .vm,
html:not(.theme-dark) body.page-product .pdp-stat .k,
html:not(.theme-dark) body.page-product .pdp-rel-m,
html:not(.theme-dark) body.page-product .pdp-chip.ghost {
  color: #334155 !important;
}
html:not(.theme-dark) body.page-product .pdp-chip,
html:not(.theme-dark) body.page-product .pdp-chip.ghost,
html:not(.theme-dark) body.page-product .pdp-badge.auto,
html:not(.theme-dark) body.page-product .pdp-badge.manual {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-product .qty-stepper {
  background: #fff;
  border-color: #cbd5e1;
}
html:not(.theme-dark) body.page-product .qty-stepper button,
html:not(.theme-dark) body.page-product .qty-stepper input {
  color: #0f172a;
}
/* Supplier HTML: drop leaked white / mint / inline paint in the detail tabs. */
html:not(.theme-dark) body.page-product .acct-panel :where(p, span, font, div, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, i, a, td, th, label, blockquote),
html:not(.theme-dark) body.page-product .pdp-rich :where(p, span, font, div, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, i, a, td, th, label, blockquote) {
  color: #0f172a !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
html:not(.theme-dark) body.page-product .acct-panel a,
html:not(.theme-dark) body.page-product .pdp-rich a {
  color: #0f172a !important;
  text-decoration: underline;
}
html.theme-dark body.page-product .pdp-variant,
html.theme-dark body.page-product .pdp-variant .vn,
html.theme-dark body.page-product .pdp-variant .vm b,
html.theme-dark body.page-product .pdp-label,
html.theme-dark body.page-product .pdp-chip,
html.theme-dark body.page-product .pdp-chip.ghost {
  color: #e8f1ee;
}
html.theme-dark body.page-product .pdp-variant .vm,
html.theme-dark body.page-product .pdp-chip.ghost {
  color: #cbd5e1;
}
html.theme-dark body.page-product .pdp-variant .vm b {
  color: #99f6e4;
}
html.theme-dark body.page-product .acct-panel :where(p, span, font, div, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, i, a, td, th, label, blockquote),
html.theme-dark body.page-product .pdp-rich :where(p, span, font, div, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, i, a, td, th, label, blockquote) {
  color: #e8f1ee !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: #e8f1ee !important;
}
html.theme-dark body.page-product .acct-panel a,
html.theme-dark body.page-product .pdp-rich a {
  color: #99f6e4 !important;
}

html:not(.theme-dark) body.page-product input::placeholder,
html:not(.theme-dark) body.page-product textarea::placeholder {
  color: #64748b;
  opacity: 1;
}
html.theme-dark body.page-product input::placeholder,
html.theme-dark body.page-product textarea::placeholder {
  color: #cbd5e1;
  opacity: 1;
}