:root{--bg:#f6fbf8;--card:#fff;--ink:#1c2c26;--muted:#607168;--brand:#267758;--brand2:#c9ecd9;--accent:#f1b35b;--danger:#a83f42;--line:#d9e8df;--shadow:0 20px 60px rgba(39,95,70,.10);--radius:22px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(246,251,248,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.header-inner{max-width:1220px;margin:auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;font-size:1.12rem}.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:linear-gradient(135deg,var(--brand),#83caa4);color:white}.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.nav a{font-weight:800;color:var(--ink);font-size:.94rem}.menu-toggle{display:none;border:1px solid var(--line);background:white;border-radius:12px;padding:9px 12px;font-weight:900}.wrap{max-width:1220px;margin:auto;padding:34px 18px}.hero{background:radial-gradient(circle at 12% 8%,#d8f3e5,transparent 34%),linear-gradient(135deg,#f6fbf8,#eff9f2 68%,#fff7e8)}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}.kicker{display:inline-flex;border:1px solid var(--line);background:#eaf8f0;color:#23694c;padding:7px 12px;border-radius:999px;font-weight:900}h1{font-size:clamp(2rem,5vw,4.1rem);line-height:1.04;letter-spacing:-.045em;margin:16px 0}h2{font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.14;letter-spacing:-.025em;margin:0 0 13px}h3{font-size:1.22rem;margin:20px 0 8px}.lead{font-size:1.15rem;color:var(--muted);max-width:820px}.grid{display:grid;grid-template-columns:minmax(0,2fr) 360px;gap:24px;align-items:start}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.flat{box-shadow:none}.content p{margin:0 0 15px}.content li{margin:7px 0}.article-meta{color:var(--muted);font-weight:800;font-size:.92rem}.notice{border-left:5px solid var(--danger);background:#fff3f4;padding:16px 18px;border-radius:16px;margin:18px 0}.safe{border-left:5px solid var(--brand);background:#eff9f4;padding:16px 18px;border-radius:16px;margin:18px 0}.cta{background:linear-gradient(135deg,var(--brand),#3c9b73);color:white;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.cta p{color:#eafef4}.cta h2,.cta h3{color:white}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:17px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:white;border:0;border-radius:14px;padding:12px 17px;font-weight:900;cursor:pointer}.btn:hover{text-decoration:none;filter:brightness(.96)}.btn.secondary{background:white;color:var(--brand);border:1px solid var(--line)}.btn.gold{background:var(--accent);color:#3a2405}.sidebar{display:grid;gap:18px}.adbox{min-height:110px;border:2px dashed #b7ccbf;border-radius:18px;background:#fafffc;display:grid;place-items:center;text-align:center;color:#687a70;font-weight:800;padding:16px;margin:18px 0}.list-check{list-style:none;padding-left:0}.list-check li{position:relative;padding-left:30px}.list-check li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:1000}.pill-grid{display:flex;gap:8px;flex-wrap:wrap}.pill{background:#edf8f2;border:1px solid var(--line);color:#2d6b50;border-radius:999px;padding:7px 11px;font-weight:850}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;background:white;border-radius:16px;overflow:hidden}th,td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}th{background:#eef8f1}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.article-list{display:grid;gap:12px}.article-card{border:1px solid var(--line);border-radius:18px;background:white;padding:16px}input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:13px;font:inherit;background:white}label{display:block;margin:10px 0 5px;font-weight:850}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-box{background:#f7fbf8;border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:14px}.footer{border-top:1px solid var(--line);background:#eaf6ef;margin-top:48px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}.small{font-size:.92rem;color:var(--muted)}.breadcrumbs{font-weight:800;color:var(--muted);font-size:.9rem;margin-bottom:8px}@media(max-width:900px){.hero-grid,.grid,.footer-grid,.category-grid{grid-template-columns:1fr}.nav{display:none;position:absolute;left:18px;right:18px;top:66px;background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:16px}.nav.open{display:grid}.menu-toggle{display:inline-block}.form-row{grid-template-columns:1fr}}

body,
.site-header,
.card,
.article-card,
input,
textarea,
select,
.nav,
.footer,
.adbox,
.result-box {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(39, 95, 70, 0.08);
}

.theme-toggle:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.theme-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--brand2);
  color: var(--brand);
  font-size: 0.85rem;
}

body.dark-mode {
  --bg: #111c18;
  --card: #182720;
  --ink: #edf8f1;
  --muted: #b5c8bf;
  --brand: #79d6a6;
  --brand2: #203f31;
  --accent: #f1b35b;
  --danger: #ff9b9b;
  --line: #2c4438;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

body.dark-mode .site-header {
  background: rgba(17, 28, 24, 0.94);
}

body.dark-mode .hero {
  background:
    radial-gradient(circle at 12% 8%, rgba(40, 82, 61, 0.9), transparent 34%),
    linear-gradient(135deg, #111c18, #14241d 68%, #211a10);
}

body.dark-mode .kicker,
body.dark-mode .pill {
  background: #203f31;
  color: #bff3d4;
  border-color: var(--line);
}

body.dark-mode .notice {
  background: #331d20;
  color: #ffe8ea;
}

body.dark-mode .safe {
  background: #173325;
  color: #e8fff1;
}

body.dark-mode .adbox {
  background: #14231d;
  color: #b5c8bf;
}

body.dark-mode .btn.secondary {
  background: #182720;
  color: var(--brand);
  border-color: var(--line);
}

body.dark-mode table,
body.dark-mode td {
  background: #182720;
  color: var(--ink);
}

body.dark-mode th {
  background: #203f31;
  color: var(--ink);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: #101b17;
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .theme-icon {
  background: #2f4d3f;
  color: #f1b35b;
}

body.dark-mode .footer {
  background: #101f19;
  color: #f1fff7;
}

body.dark-mode .footer .small,
body.dark-mode .footer p {
  color: #c7d8cf;
}

body.dark-mode .article-card,
body.dark-mode .card {
  background: #172820;
  color: #f1fff7;
}

/* ===== Mobile dark-mode menu readability fix ===== */

@media (max-width: 900px) {
  body.dark-mode .nav {
    background: #172820;
    border-color: #315246;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  }

  body.dark-mode .nav a {
    color: #f1fff7;
    font-weight: 900;
  }

  body.dark-mode .nav a:hover {
    color: #8be6b4;
  }

  body.dark-mode .nav .theme-toggle {
    background: #101f19;
    color: #f1fff7;
    border-color: #315246;
    justify-content: flex-start;
  }

  body.dark-mode .nav .theme-icon {
    background: #254737;
    color: #f1b35b;
  }

  body.dark-mode .menu-toggle {
    background: #ffffff;
    color: #111c18;
    border-color: #d9e8df;
  }
}

/* ===== Expandable medical disclaimer ===== */

.medical-disclaimer-box {
  margin: 18px 0;
  border: 1px solid #f1b6b6;
  border-left: 5px solid var(--danger);
  background: #fff5f5;
  border-radius: 16px;
  overflow: hidden;
}

.medical-disclaimer-box summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 900;
  color: #7d2e31;
}

.medical-disclaimer-box summary::-webkit-details-marker {
  display: none;
}

.medical-disclaimer-box summary::after {
  content: "+";
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #ffe1e1;
  color: #7d2e31;
  font-weight: 900;
}

.medical-disclaimer-box[open] summary::after {
  content: "−";
}

.disclaimer-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--danger);
  color: #ffffff;
  font-weight: 1000;
  font-size: 0.9rem;
}

.summary-hint {
  color: #9b5b5e;
  font-size: 0.88rem;
  font-weight: 800;
}

.disclaimer-content {
  padding: 0 16px 16px 50px;
  color: #643034;
}

.disclaimer-content p {
  margin: 0;
}

/* Dark mode version */
body.dark-mode .medical-disclaimer-box {
  background: #241819;
  border-color: #5e3335;
  border-left-color: #ff9b9b;
}

body.dark-mode .medical-disclaimer-box summary {
  color: #ffe8ea;
}

body.dark-mode .medical-disclaimer-box summary::after {
  background: #3a2426;
  color: #ffb8b8;
}

body.dark-mode .disclaimer-icon {
  background: #ff9b9b;
  color: #241819;
}

body.dark-mode .summary-hint {
  color: #e4b8ba;
}

body.dark-mode .disclaimer-content {
  color: #ffd8dc;
}