:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#1b2430;
  --muted:#5c6675;
  --line:#d8e0ea;
  --accent:#1f5fbf;
  --accent-dark:#184d9a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;padding:28px 16px}
.wrap{max-width:1100px;margin:0 auto}
header h1{margin:0 0 10px;font-size:2rem;line-height:1.2}
header p{margin:0;max-width:820px}
nav.topnav{background:#fff;border-bottom:1px solid var(--line)}
nav.topnav .wrap{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px}
nav.topnav a{background:#eef4ff;border:1px solid #cfe0ff;padding:8px 12px;border-radius:999px;font-size:.95rem}
main{padding:24px 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 6px 18px rgba(20,33,61,.05)}
.card h2,.card h3{margin-top:0}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.btn:hover{text-decoration:none;background:var(--accent-dark)}
.note{font-size:.95rem;color:var(--muted)}
.section{margin-top:28px}
.question{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.question h3{margin:0 0 10px;font-size:1.08rem}
.options{padding-left:18px;margin:0 0 10px}
.answer{background:#eef7ee;border-left:4px solid #3c8c4a;padding:10px 12px;border-radius:8px;margin-top:10px}
.tipbox{background:#fff7e8;border:1px solid #f2ddb2;border-radius:16px;padding:16px}
footer{border-top:1px solid var(--line);padding:24px 16px;color:var(--muted)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#eef4ff}
ul.checks{padding-left:20px}
.breadcrumbs{font-size:.95rem;margin-bottom:10px;color:#e8efff}
.breadcrumbs a{color:#fff;text-decoration:underline}
@media (max-width:700px){
  header h1{font-size:1.55rem}
  nav.topnav .wrap{gap:8px}
  nav.topnav a{font-size:.9rem;padding:7px 10px}
  .card,.question{padding:15px}
}

.site-link{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sharebar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sharebtn{display:inline-block;background:#eef4ff;border:1px solid #cfe0ff;color:var(--accent);padding:9px 12px;border-radius:10px;font-weight:700}
.sharebtn:hover{text-decoration:none;background:#e4eeff}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.small-note{font-size:.92rem;color:var(--muted)}

.footer-share{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
footer .footer-links{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
@media (max-width: 700px){
  .footer-share{margin-left:0;justify-content:flex-start}
  footer .footer-links{align-items:flex-start}
}