:root{
  --ink:#0f172a;
  --muted:#475569;
  --accent:#3b82f6;
  --brand:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --info:#60a5fa;
  --radius:16px;
}

/* base */
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(-45deg,#ecfeff,#f9fafb,#dbeafe,#fef9c3);
  background-size:400% 400%;
  animation:gradientMove 20s ease infinite;
}
@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* top tabs */
.tabbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.tabs{ max-width:1200px; margin:0 auto; display:flex; gap:8px; padding:10px 16px; flex-wrap:wrap }
.tab{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
  color:var(--muted);
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,var(--accent),#2563eb);
  color:#fff;
  border-color:transparent;
}

/* layout */
.wrap{ max-width:1200px; margin:20px auto; padding:0 16px }
.card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius);
  padding:20px; margin-bottom:20px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
h2{ margin-top:0 }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.field{ display:flex; flex-direction:column; gap:6px }
label{ font-size:13px; color:var(--muted) }
input,select,textarea{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid #e5e7eb; background:#fff; color:var(--ink); outline:none
}
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 3px rgba(59,130,246,.2) }
.subtitle{ color:var(--muted); }

/* buttons */
.btn{ padding:10px 16px; border-radius:10px; border:none; font-weight:600; cursor:pointer }
.btn.primary{ background:var(--brand); color:#fff }
.btn.reset{ background:#64748b; color:#fff }
.btn.blue{ background:#3b82f6; color:#fff }

/* results */
.result{
  margin-top:14px; padding:14px; border-radius:12px;
  background:#ffffff; border:1px solid rgba(15,23,42,.12);
  opacity:0; transform:translateY(6px);
  transition:all .35s ease; display:none
}
.result.show{ opacity:1; transform:translateY(0); display:block }
.result.good{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.result.caution{ background:#fff7ed; border-color:#fed7aa; color:#92400e }
.result.bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b }
.result h3{ margin:0 0 8px }
.icon{ font-size:32px; margin-bottom:6px }
.infocard{
  margin-top:10px; padding:12px; border-radius:10px;
  background:#ffffff; border:1px solid #e5e7eb; color:#1e293b
}

/* header */
header.site{ text-align:center; padding:28px 16px }
header.site h1{ font-size:2rem; margin:0 0 6px; font-weight:800 }
header.site p{ margin:0; color:var(--muted) }

/* sharebar */
.sharebar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.sharebtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff; color:#0f172a; text-decoration:none; font-weight:600
}
.sharebtn:hover{ box-shadow:0 2px 8px rgba(2,6,23,.08) }
.sharebtn.small{ padding:6px 10px }

/* poster (offscreen) */
.poster-wrap{ position:fixed; left:-99999px; top:-99999px; z-index:-1 }
.poster{
  width:900px; max-width:900px;
  background:linear-gradient(135deg,#ffffff,#f8fafc,#eef2ff);
  border-radius:24px; border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 28px rgba(2,6,23,.08); padding:24px; color:#0f172a
}
.poster .hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.poster .brand{ font-weight:800; font-size:20px }
.poster .badge{ font-weight:700; background:#e2fbe8; color:#065f46; border:1px solid #bbf7d0; padding:4px 10px; border-radius:999px }
.poster .title{ font-size:28px; font-weight:800; margin:6px 0 14px }
.poster .content{ background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; padding:14px }
.poster .cta{ margin-top:12px; display:inline-block; background:linear-gradient(180deg,var(--accent),#2563eb); color:#fff; border-radius:999px; padding:10px 14px; font-weight:800 }
.poster .link{ margin-top:6px; color:#475569; font-weight:700 }

/* traffic pill */
.traffic-pill{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  background:#fff; color:#0f172a; font-size:13px; min-width:220px;
  border:1px solid rgba(15,23,42,.12); border-radius:12px;
  box-shadow:0 8px 24px rgba(2,6,23,.10); padding:10px 12px;
}
.traffic-pill .row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.traffic-pill .traffic-close{ border:0; background:#f1f5f9; border-radius:8px; padding:2px 6px; cursor:pointer }
.traffic-pill .hint{ color:#64748b; font-size:11px; margin-top:4px }

/* --- Icon tiles for homepage --- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.tile{
  display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(2,6,23,.10); border-color:rgba(59,130,246,.28) }
.tile-icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; font-size:26px; font-weight:700;
  color:#0f172a; user-select:none;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.tile h3{ margin:0 0 6px; font-size:18px }
.tile p{ margin:0; color:var(--muted); font-size:14px }

/* colorways per tool */
.icon-bmi   { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#7f1d1d }
.icon-sleep { background:linear-gradient(135deg,#e0e7ff,#c7d2fe); color:#3730a3 }
.icon-cal   { background:linear-gradient(135deg,#dcfce7,#bbf7d0); color:#166534 }
.icon-kh    { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e }
.icon-kw    { background:linear-gradient(135deg,#e9d5ff,#c4b5fd); color:#6d28d9 }
.icon-food  { background:linear-gradient(135deg,#ffedd5,#fed7aa); color:#9a3412 }

/* footer */
.site-footer{
  margin-top:24px;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-top:1px solid rgba(15,23,42,.08);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px;
  color:#475569; font-size:14px;
}
.foot-links a{ color:#475569; text-decoration:none; font-weight:600 }
.foot-links a:hover{ text-decoration:underline }
@media (max-width:640px){
  .footer-inner{ flex-direction:column; align-items:flex-start }
}

/* === Home feed layout (final) === */
#home-feed.ti-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:900px){
  #home-feed.ti-grid{ grid-template-columns:1fr; }
}

/* If there is only one post, center it nicely */
#home-feed.ti-grid > :only-child{
  grid-column:1 / -1;
  max-width:680px;
  margin:0 auto;
}

/* Card look */
#home-feed .ti-card{
  border:1px solid #e8e8e8;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#home-feed .ti-body{ padding:12px 14px }
#home-feed .ti-title{ margin:8px 0 4px; font-size:18px; line-height:1.3 }
#home-feed .ti-title a{ text-decoration:none; color:#1f2a44 }
#home-feed .ti-meta{ font-size:12px; opacity:.7; margin-bottom:6px }

/* Clamp to ~2 lines */
#home-feed .ti-excerpt{
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#4b5563;
}

/* Compact Read more button */
#home-feed .ti-btn{
  display:inline-block;
  width:auto;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #e0e0e0;
  background:#f8fafc;
  text-decoration:none;
}
#home-feed .ti-btn:hover{ background:#eef2f7 }

/* Make the thumbnail a perfect square (override any inline/injected rules) */
#home-feed .ti-thumb img{
  width:100%;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover;
  display:block;
  border-radius:12px 12px 0 0;
}