* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Noto Sans Devanagari','IBM Plex Mono','Segoe UI',sans-serif;
  background:linear-gradient(160deg,#0a0e14 0%,#0f1720 45%,#0b1119 100%);
  min-height:100vh;
  padding:0;
}

/* ===== HEADER ===== */
.header {
  background:rgba(10,30,18,0.97);
  border-bottom:2px solid rgba(244,162,97,0.35);
  padding:9px 14px;
  position:sticky;
  top:0;
  z-index:200;
}
.header h1 {
  font-size:17px;
  font-weight:900;
  background:linear-gradient(90deg,#f5f0e8,#f4a261,#a8d5a2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:0.5px;
}

/* ===== TABS ===== */
.cat-tabs {
  display:flex;
  overflow-x:auto;
  background:rgba(0,0,0,0.2);
  border-radius:18px;
  padding:5px;
  margin:14px 16px;
  gap:4px;
  scrollbar-width:none;
  border:1px solid rgba(245,240,232,0.08);
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  flex-shrink:0;
  padding:10px 14px;
  border:none;
  background:transparent;
  font-size:12px;
  font-weight:700;
  color:rgba(245,240,232,0.7);
  cursor:pointer;
  border-radius:13px;
  transition:all 0.25s;
  white-space:nowrap;
}
.cat-tab.active {
  background:linear-gradient(135deg,#f4a261,#e76f3b);
  color:#1a3a2a;
  font-weight:900;
  box-shadow:0 4px 16px rgba(244,162,97,0.45);
}

/* ===== CONTENT ===== */
.content { padding:0 16px 24px; }
.section { display:none; }
.section.active { display:block; }

/* ===== CARDS ===== */
.calc-card {
  background:rgba(245,240,232,0.05);
  border:1px solid rgba(245,240,232,0.12);
  border-radius:20px;
  padding:20px;
  margin-bottom:14px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}
.calc-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,#f5f0e8,#f4a261,#a8d5a2);
}
.calc-card h3 {
  font-size:15px;
  font-weight:800;
  color:var(--txt-main);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* ===== CALCULATOR DISPLAY ===== */
.display {
  background:linear-gradient(135deg,rgba(0,0,0,0.6),rgba(10,20,10,0.8));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:16px;
  padding:16px 20px;
  margin-bottom:14px;
  text-align:right;
  border:1px solid rgba(244,162,97,0.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.4);
}
.display .expr { font-size:12px; color:rgba(245,240,232,0.3); min-height:16px; }
.display .num { font-size:36px; font-weight:700; color:var(--txt-main); word-break:break-all; }

/* ===== BUTTONS ===== */
.btns { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
button { border:none; border-radius:12px; padding:15px 0; font-size:17px; font-weight:700; cursor:pointer; transition:all 0.15s; }
button:active { transform:scale(0.91); }
.bn { background:rgba(245,240,232,0.08); color:var(--txt-main); border:1px solid rgba(245,240,232,0.1); box-shadow:0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
.bn:active { background:rgba(245,240,232,0.15); }
.bo { background:rgba(168,213,162,0.2); color:#a8d5a2; border:1px solid rgba(168,213,162,0.35); }
.bc { background:linear-gradient(135deg,#e76f3b,#e76f3b); color:var(--txt-main); box-shadow:0 3px 12px rgba(231,111,59,0.4); }
.be { background:linear-gradient(135deg,#f4a261,#e76f3b); color:#1a3a2a; grid-column:span 2; box-shadow:0 4px 16px rgba(244,162,97,0.4); font-size:20px; font-weight:900; }
.bz { grid-column:span 2; }
.bd { background:linear-gradient(135deg,#f4a261,#e76f3b); color:#1a3a2a; box-shadow:0 3px 12px rgba(244,162,97,0.3); }

/* ===== INPUTS ===== */
.inp-g { margin-bottom:12px; }
.inp-g label { display:block; font-size:12px; font-weight:700; color:var(--txt-sub); margin-bottom:5px; }
.inp-g input, .inp-g select {
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(245,240,232,0.12);
  border-radius:11px;
  font-size:14px; font-weight:600;
  color:var(--txt-main); outline:none;
  background:rgba(0,0,0,0.25);
  transition:all 0.2s;
}
.inp-g input:focus, .inp-g select:focus {
  border-color:#f4a261;
  background:rgba(244,162,97,0.08);
  box-shadow:0 0 0 3px rgba(244,162,97,0.1);
}
.inp-g select option { background:#1a3a2a; color:var(--txt-main); }
.inp-g input::placeholder { color:rgba(245,240,232,0.2); }

/* ===== GO BUTTON ===== */
.go-btn {
  width:100%;
  padding:14px;
  background:linear-gradient(135deg,#f4a261,#e76f3b);
  color:#1a3a2a;
  border:none;
  border-radius:13px;
  font-size:15px; font-weight:900;
  cursor:pointer; margin:6px 0;
  box-shadow:0 6px 20px rgba(244,162,97,0.4);
  letter-spacing:0.3px;
  transition:all 0.2s;
}
.go-btn:active { transform:scale(0.97); opacity:0.9; }
.go-btn.green { background:linear-gradient(135deg,#a8d5a2,#6db86b); color:#1a3a2a; box-shadow:0 6px 20px rgba(168,213,162,0.3); }
.go-btn.orange { background:linear-gradient(135deg,#f4a261,#e76f3b); color:#1a3a2a; }

/* ===== RESULT BOX ===== */
.res-box {
  background:rgba(0,0,0,0.25);
  border-radius:14px;
  padding:14px;
  display:none;
  margin-top:8px;
  border:1px solid rgba(244,162,97,0.2);
}
.res-box.show { display:block; }
.res-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid rgba(245,240,232,0.06);
}
.res-row:last-child { border-bottom:none; }
.rl { font-size:12px; color:rgba(245,240,232,0.45); font-weight:600; }
.rv { font-size:15px; color:var(--txt-main); font-weight:800; }
.rv.big { font-size:21px; color:#f4a261; }
.rv.red { color:#f87171; }

/* ===== CLEAR BUTTON ===== */
.clr-btn {
  width:100%;
  padding:10px;
  background:rgba(245,240,232,0.05);
  color:rgba(245,240,232,0.4);
  border:1px solid rgba(245,240,232,0.08);
  border-radius:11px;
  font-size:13px; font-weight:700;
  cursor:pointer; margin-top:8px;
  transition:all 0.2s;
}
.clr-btn:hover { background:rgba(245,240,232,0.1); color:var(--txt-main); }

/* ===== UTILITIES ===== */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.tag {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:800;
  background:rgba(244,162,97,0.1); color:#f4a261;
  margin-bottom:10px; border:1px solid rgba(244,162,97,0.25);
}

/* ===== SCIENTIFIC ===== */
.sci-display {
  background:rgba(0,0,0,0.5); border-radius:14px;
  padding:14px 18px; margin-bottom:14px;
  text-align:right; border:1px solid rgba(244,162,97,0.1);
}
.sci-display .sci-expr { font-size:11px; color:rgba(245,240,232,0.3); min-height:16px; }
.sci-display .sci-num { font-size:28px; font-weight:700; color:var(--txt-main); word-break:break-all; }
.sci-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.sci-btn { border:none; border-radius:10px; padding:12px 0; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.sci-btn:active { transform:scale(0.91); }
.s-fn { background:rgba(168,213,162,0.15); color:#a8d5a2; border:1px solid rgba(168,213,162,0.25); }
.s-n { background:rgba(245,240,232,0.07); color:var(--txt-main); }
.s-o { background:rgba(168,213,162,0.2); color:#a8d5a2; border:1px solid rgba(168,213,162,0.3); }
.s-c { background:linear-gradient(135deg,#e76f3b,#e76f3b); color:var(--txt-main); }
.s-e { background:linear-gradient(135deg,#f4a261,#e76f3b); color:#1a3a2a; grid-column:span 2; font-weight:900; }

/* ===== PACK ITEMS ===== */
.pack-category { margin-bottom:12px; }
.pack-cat-title { font-size:12px; font-weight:800; color:#f4a261; margin-bottom:6px; padding:6px 10px; background:rgba(244,162,97,0.1); border-radius:8px; border-left:3px solid #f4a261; }
.pack-items { display:flex; flex-wrap:wrap; gap:6px; }
.pack-item { background:rgba(245,240,232,0.06); border:1px solid rgba(245,240,232,0.1); border-radius:8px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; color:rgba(245,240,232,0.75); transition:all 0.2s; }
.pack-item.checked { background:rgba(168,213,162,0.2); border-color:#a8d5a2; color:#a8d5a2; text-decoration:line-through; }

/* ===== OTHER ===== */
.month-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.month-box { border-radius:8px; padding:8px 4px; text-align:center; font-size:10px; font-weight:700; }

.tip-row { padding:8px 0; border-bottom:1px solid rgba(245,240,232,0.06); font-size:12px; color:rgba(245,240,232,0.7); font-weight:600; line-height:1.5; }
.tip-row:last-child { border-bottom:none; }

.emg-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(245,240,232,0.06); }
.emg-row:last-child { border-bottom:none; }
.emg-label { font-size:11px; color:rgba(245,240,232,0.45); font-weight:600; }
.emg-val { font-size:13px; color:#f87171; font-weight:800; }

.elec-row input { background:rgba(0,0,0,0.25) !important; color:var(--txt-main) !important; border:1px solid rgba(245,240,232,0.12) !important; }

/* ===== FOOTER ===== */
footer {
  background:rgba(0,0,0,0.4); color:rgba(245,240,232,0.4);
  text-align:center; padding:20px 16px; font-size:12px;
  border-top:1px solid rgba(244,162,97,0.2);
}
footer a { color:rgba(245,240,232,0.55); text-decoration:none; margin:0 8px; font-weight:700; }
footer a:hover { color:#f4a261; }

/* ===== LIGHT MODE ===== */
body.light-mode {
  background:linear-gradient(160deg,#eef2f5 0%,#e6edf1 45%,#eaf0f3 100%);
  color:#1a1a1a;
}

/* Header */
body.light-mode .header {
  background:rgba(255,255,255,0.98);
  border-bottom:2px solid rgba(244,162,97,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
body.light-mode .header h1 {
  background:linear-gradient(90deg,#e76f3b,#f4a261,#2d5a3d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Tabs */
body.light-mode .cat-tabs {
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.1);
}
body.light-mode .cat-tab { color:rgba(0,0,0,0.6); }
body.light-mode .cat-tab.active { color:white; }

/* Cards */
body.light-mode .calc-card {
  background:white;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
body.light-mode .calc-card h3 { color:#1a3a2a; }
body.light-mode .calc-card::before {
  background:linear-gradient(90deg,#e76f3b,#f4a261,#a8d5a2);
}

/* Display */
body.light-mode .display {
  background:#1a1a2e;
  border:1px solid rgba(0,0,0,0.15);
}
body.light-mode .display .num { color:white; }
body.light-mode .display .expr { color:rgba(255,255,255,0.5); }

/* Inputs */
body.light-mode .inp-g label { color:#555; font-weight:700; }
body.light-mode .inp-g input,
body.light-mode .inp-g select {
  background:white;
  border:1.5px solid #ddd;
  color:#333;
}
body.light-mode .inp-g input::placeholder { color:#bbb; }
body.light-mode .inp-g input:focus,
body.light-mode .inp-g select:focus {
  border-color:#f4a261;
  background:#fffaf5;
}
body.light-mode .inp-g select option { background:white; color:#333; }

/* Number buttons */
body.light-mode .bn {
  background:#f0f0f0;
  color:#222;
  border:1px solid #ddd;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Result box */
body.light-mode .res-box {
  background:#fff8f0;
  border:1px solid rgba(244,162,97,0.3);
}
body.light-mode .rl { color:#666; }
body.light-mode .rv { color:#1a3a2a; }
body.light-mode .rv.big { color:#e76f3b; }
body.light-mode .res-row { border-bottom:1px solid rgba(0,0,0,0.06); }

/* Clear button */
body.light-mode .clr-btn {
  background:#f5f5f5;
  color:#888;
  border:1px solid #ddd;
}
body.light-mode .clr-btn:hover { background:#eee; color:#444; }

/* Tag */
body.light-mode .tag {
  background:#fff3e0;
  color:#e76f3b;
  border:1px solid rgba(244,162,97,0.4);
}

/* Scientific display */
body.light-mode .sci-display {
  background:#1a1a2e;
  border:1px solid rgba(0,0,0,0.15);
}
body.light-mode .sci-display .sci-num { color:#a8d5a2; }
body.light-mode .s-n { background:#f0f0f0; color:#333; }
body.light-mode .s-fn { background:#fff3e0; color:#e76f3b; }

/* Pack items */
body.light-mode .pack-cat-title {
  background:#fff3e0;
  color:#e76f3b;
  border-left:3px solid #f4a261;
}
body.light-mode .pack-item {
  background:#f9f9f9;
  border:1px solid #ddd;
  color:#444;
}
body.light-mode .pack-item.checked {
  background:#d4edda;
  border-color:#6db86b;
  color:#2e7d32;
}

/* Tip rows */
body.light-mode .tip-row {
  color:#444;
  border-bottom:1px solid rgba(0,0,0,0.07);
}
body.light-mode .emg-label { color:#666; }
body.light-mode .emg-row { border-bottom:1px solid rgba(0,0,0,0.07); }

/* Search */
body.light-mode #search_bar {
  background:white;
  color:#333;
  border:2px solid #f4a261;
}
body.light-mode #search_bar::placeholder { color:#aaa; }
body.light-mode #search_results {
  background:white;
  border:1px solid #ddd;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
body.light-mode .search-item { color:#333; border-bottom:1px solid #eee; }
body.light-mode .search-item:hover { background:#fff3e0; }

/* Popular chips */
body.light-mode .pop-chip {
  background:#fff3e0;
  border:1px solid rgba(244,162,97,0.4);
  color:#e76f3b;
}

/* Home sections */
body.light-mode .trend-card {
  background:#fff3e0;
  border:1px solid rgba(244,162,97,0.3);
}
body.light-mode .trend-card-green {
  background:#e8f5e9;
  border:1px solid rgba(168,213,162,0.4);
}
body.light-mode .new-card {
  background:white;
  border:1px solid #ddd;
}
body.light-mode .new-card div:last-child { color:#333 !important; }

/* Home section text */
body.light-mode #home_sections div[style*="font-size:13px;font-weight:800;color:var(--txt-main)"] {
  color:#1a3a2a !important;
}
body.light-mode #home_sections div[style*="color:var(--txt-main)"] { color:#1a1a1a !important; }
body.light-mode #home_sections div[style*="color:rgba(245,240,232"] { color:#666 !important; }
body.light-mode #home_sections span[style*="color:rgba(245,240,232"] { color:#444 !important; }

/* Most searched chips */
body.light-mode #home_sections span[style*="color:var(--txt-chip)"] {
  background:#f5f5f5 !important;
  border:1px solid #ddd !important;
  color:#444 !important;
}

/* Article cards */
body.light-mode #home_sections a[style*="background:rgba(255,255,255,0.04)"] {
  background:white !important;
  border:1px solid #eee !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Learn & Guides section (EMI/SIP/GST/BMI/Tax guides) */
body.light-mode #learn_section div[style*="color:var(--txt-main)"] { color:#1a1a1a !important; }
body.light-mode #learn_section div[style*="color:rgba(245,240,232"] { color:#555 !important; }
body.light-mode #learn_section span[style*="color:rgba(245,240,232"] { color:#555 !important; }
body.light-mode #learn_section > div > div[style*="background:rgba(255,255,255,0.05)"],
body.light-mode #learn_section div[style*="background:rgba(255,255,255,0.05)"] {
  background:white !important;
  border:1px solid #eee !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
}
body.light-mode #learn_section span[style*="background:rgba(0,0,0,0.3)"] {
  background:#f0f0f0 !important;
  color:#333 !important;
}
body.light-mode #learn_section button[style*="color:var(--txt-main)"] {
  background:#eee !important;
  color:#333 !important;
}

/* SEO box */
body.light-mode .seo-box {
  background:#f9f9f9;
  border:1px solid #eee;
}
body.light-mode .seo-box h4 { color:#e76f3b; border-bottom:1px solid rgba(244,162,97,0.2); }
body.light-mode .seo-guide { color:#444; }
body.light-mode .faq-item {
  background:white;
  border-left:3px solid #f4a261;
}
body.light-mode .faq-q { color:#1a3a2a; }
body.light-mode .faq-a { color:#555; }
body.light-mode .related-chip {
  background:#fff3e0;
  border:1px solid rgba(244,162,97,0.3);
  color:#e76f3b;
}

/* Popular section title */
body.light-mode .popular-title { color:#888; }

/* Share button */
body.light-mode .share-btn {
  background:rgba(37,211,102,0.1);
  border:1px solid rgba(37,211,102,0.3);
  color:#1a7a3a;
}

/* Footer */
body.light-mode footer {
  background:rgba(255,255,255,0.8);
  color:#666;
  border-top:1px solid rgba(244,162,97,0.3);
}
body.light-mode footer a { color:#e76f3b; }

/* Elec rows */
body.light-mode .elec-row input {
  background:white !important;
  color:#333 !important;
  border:1.5px solid #ddd !important;
}

/* ===== SEARCH ===== */
#search_bar::placeholder { color:#aaa; font-weight:500; }
body.light-mode #search_bar::placeholder { color:#aaa; }
.search-item {
  padding:10px 14px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--txt-main);
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex;
  align-items:center;
  gap:8px;
}
.search-item:hover { background:rgba(244,162,97,0.1); }
.search-item:last-child { border-bottom:none; }
body.light-mode .search-item { color:#333; border-bottom:1px solid #eee; }

/* ===== SHARE BUTTON ===== */
.share-btn {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:rgba(37,211,102,0.15);
  border:1px solid rgba(37,211,102,0.3);
  border-radius:10px;
  color:#25d366;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  margin-top:8px;
  width:100%;
  justify-content:center;
  transition:all 0.2s;
}
.share-btn:hover { background:rgba(37,211,102,0.25); }

/* ===== RECENT/FAV CHIPS (theme-aware) ===== */
.rf-recent { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--txt-chip); }
.rf-fav { background:rgba(244,162,97,0.1); border:1px solid rgba(244,162,97,0.25); color:#f4a261; }
body.light-mode .rf-recent { background:#ffffff; border-color:rgba(0,0,0,0.15); color:#3a3a3a; }
body.light-mode .rf-fav { background:#fff3e0; border-color:#f4a261; color:#b35c2a; }

/* ===== POPULAR SECTION ===== */
.popular-section {
  padding:0 14px 2px;
}
.popular-title {
  font-size:11px;
  font-weight:800;
  color:var(--txt-sub);
  margin-bottom:6px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
body.light-mode .popular-title { color:#888; }
.popular-chips {
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.popular-chips::-webkit-scrollbar { display:none; }
.pop-chip {
  flex-shrink:0;
  padding:5px 10px;
  background:rgba(244,162,97,0.1);
  border:1px solid rgba(244,162,97,0.25);
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  color:#f4a261;
  cursor:pointer;
  white-space:nowrap;
  transition:all 0.2s;
}
.pop-chip:hover { background:rgba(244,162,97,0.25); }
body.light-mode .pop-chip { background:#fff3e0; border-color:#f4a261; }

/* ===== SKELETON LOADER ===== */
.skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.05) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ===== FAVORITES ===== */
.fav-btn {
  background:none;
  border:none;
  font-size:16px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:6px;
  float:right;
  margin-top:-2px;
}

/* Trending Cards Animation */
.trend-card {
  background:rgba(244,162,97,0.1);
  border:1px solid rgba(244,162,97,0.25);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.trend-card:hover {
  transform:scale(0.97);
  box-shadow:0 6px 20px rgba(244,162,97,0.25);
  background:rgba(244,162,97,0.18);
}
.trend-card:active {
  transform:scale(0.94);
  box-shadow:0 2px 8px rgba(244,162,97,0.15);
}
.trend-card-green {
  background:rgba(168,213,162,0.1);
  border:1px solid rgba(168,213,162,0.2);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.trend-card-green:hover {
  transform:scale(0.97);
  box-shadow:0 6px 20px rgba(168,213,162,0.2);
  background:rgba(168,213,162,0.18);
}
.trend-card-green:active {
  transform:scale(0.94);
  box-shadow:0 2px 8px rgba(168,213,162,0.1);
}
.new-card {
  flex-shrink:0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  text-align:center;
  transition:transform 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color:transparent;
}
.new-card:hover { transform:scale(0.97); background:rgba(255,255,255,0.09); }
.new-card:active { transform:scale(0.93); }

/* SEO Content Styles */
.seo-box {
  background:rgba(0,0,0,0.2);
  border-radius:16px;
  padding:16px;
  margin-top:12px;
  border:1px solid rgba(245,240,232,0.08);
}
.seo-box h4 {
  font-size:13px;
  font-weight:800;
  color:#f4a261;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(244,162,97,0.2);
}
.seo-guide {
  font-size:12px;
  color:rgba(245,240,232,0.7);
  line-height:1.8;
  margin-bottom:12px;
}
.seo-guide strong { color:#a8d5a2; }
.faq-item {
  margin-bottom:10px;
  padding:10px;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  border-left:3px solid #f4a261;
}
.faq-q {
  font-size:12px;
  font-weight:800;
  color:var(--txt-main);
  margin-bottom:4px;
  cursor:pointer;
}
.faq-a {
  font-size:11px;
  color:rgba(245,240,232,0.65);
  line-height:1.7;
  display:none;
}
.faq-a.open { display:block; }
.related-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.related-chip {
  padding:8px 10px;
  background:rgba(244,162,97,0.08);
  border:1px solid rgba(244,162,97,0.2);
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  color:#f4a261;
  cursor:pointer;
  text-align:center;
  transition:all 0.2s;
}
.related-chip:active { transform:scale(0.96); background:rgba(244,162,97,0.15); }

/* Nav buttons light mode fix */
body.light-mode .header a[href="about.html"],
body.light-mode .header a[href="contact.html"] {
  color:#1a3a2a !important;
  background:rgba(244,162,97,0.15) !important;
  border:1px solid rgba(244,162,97,0.4) !important;
  font-weight:800 !important;
}
body.light-mode .header a[href="about.html"]:hover,
body.light-mode .header a[href="contact.html"]:hover {
  background:rgba(244,162,97,0.3) !important;
}
/* Theme button light mode */
body.light-mode #theme_btn {
  background:rgba(244,162,97,0.15) !important;
  border:1px solid rgba(244,162,97,0.3) !important;
}
/* Trending section title light mode */
body.light-mode #home_sections > div > div:first-child {
  color:#1a3a2a !important;
}

/* ===== FIX: theme-aware text colours ===== */
:root{
  --txt-main:#e6edf3;
  --txt-sub:rgba(230,237,243,0.5);
  --txt-chip:rgba(230,237,243,0.8);
}
body.light-mode{
  --txt-main:#1a3a2a;
  --txt-sub:rgba(26,58,42,0.62);
  --txt-chip:rgba(26,58,42,0.85);
}
body.light-mode .trend-card,
body.light-mode .trend-card-green{
  border:1px solid rgba(0,0,0,0.10);
}
body.light-mode #recent_chips > span,
body.light-mode #fav_chips > span{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.12) !important;
}

/* ===== SEO: category intro text ===== */
.cat-intro{background:rgba(255,255,255,0.05);border:1px solid rgba(244,162,97,0.25);
  border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.cat-intro h2{font-size:16px;font-weight:800;color:var(--txt-main);margin-bottom:6px;}
.cat-intro p{font-size:13px;line-height:1.6;color:var(--txt-chip);margin:0;}
body.light-mode .cat-intro{background:rgba(0,0,0,0.03);border-color:rgba(231,111,59,0.3);}


/* ===== Brand title (was <h1>, now a div so each page has ONE h1) ===== */
.header .brand-title {
  font-size:17px;
  font-weight:900;
  background:linear-gradient(90deg,#f5f0e8,#f4a261,#a8d5a2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:0.5px;
  margin:0;
}
body.light-mode .header .brand-title {
  background:linear-gradient(90deg,#e76f3b,#f4a261,#2d5a3d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== Inline error toast (replaces blocking alert) ===== */
.etc-toast{
  position:fixed; left:50%; bottom:-90px; transform:translateX(-50%);
  background:#c2410c; color:#fff; font-size:14px; font-weight:600;
  padding:12px 20px; border-radius:10px; z-index:9999;
  box-shadow:0 8px 28px rgba(0,0,0,.35); max-width:90vw; text-align:center;
  transition:bottom .3s ease; pointer-events:none;
}
.etc-toast.show{ bottom:26px; }

/* ===== Standalone calculator pages ===== */
body.subpage .calc-card{ display:block; max-width:640px; margin:18px auto; }
.page-wrap{ max-width:760px; margin:0 auto; padding:18px 16px 60px; }
.crumb{ font-size:13px; color:rgba(245,240,232,.65); margin-bottom:12px; }
.crumb a{ color:#f4a261; text-decoration:none; }
body.light-mode .crumb{ color:#5a6a5a; }
h1.page-title{ font-size:27px; line-height:1.3; margin:6px 0 10px; color:#f5f0e8; }
body.light-mode h1.page-title{ color:#1a3a2a; }
.lede{ font-size:16px; color:rgba(245,240,232,.75); margin-bottom:18px; line-height:1.7; }
body.light-mode .lede{ color:#4a5a4a; }
.byline{ font-size:12.5px; color:rgba(245,240,232,.55); margin-bottom:20px;
  border-left:3px solid #f4a261; padding-left:10px; line-height:1.6; }
body.light-mode .byline{ color:#5a6a5a; }
.byline a{ color:#f4a261; text-decoration:none; }
.content{ color:rgba(245,240,232,.88); line-height:1.85; font-size:15.5px; }
body.light-mode .content{ color:#243a2a; }
.content h2{ font-size:21px; margin:34px 0 12px; color:#f5f0e8; }
.content h3{ font-size:17px; margin:22px 0 9px; color:#f4a261; }
body.light-mode .content h2{ color:#1a3a2a; }
body.light-mode .content h3{ color:#c2410c; }
.content p{ margin-bottom:13px; }
.content ul,.content ol{ margin:0 0 16px 22px; }
.content li{ margin-bottom:8px; }
.content table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.content th,.content td{ border:1px solid rgba(244,162,97,.28); padding:9px 10px; text-align:left; }
.content th{ background:rgba(244,162,97,.16); font-weight:700; }
.content .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.callout{ background:rgba(244,162,97,.09); border:1px solid rgba(244,162,97,.3);
  border-left:4px solid #f4a261; border-radius:10px; padding:14px 16px; margin:20px 0; font-size:14.5px; }
.faq-item{ background:rgba(0,0,0,.18); border:1px solid rgba(244,162,97,.22);
  border-radius:11px; padding:13px 16px; margin-bottom:9px; }
body.light-mode .faq-item{ background:#fff; border-color:rgba(0,0,0,.09); }
.faq-item summary{ font-weight:700; cursor:pointer; font-size:15px; }
.faq-item p{ margin:10px 0 0; color:rgba(245,240,232,.75); font-size:14.5px; }
body.light-mode .faq-item p{ color:#4a5a4a; }
.rel-links{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.rel-links a{ background:rgba(0,0,0,.2); border:1px solid rgba(244,162,97,.28);
  border-radius:20px; padding:8px 14px; color:#f4a261; text-decoration:none;
  font-size:13px; font-weight:600; }
.rel-links a:hover{ border-color:#f4a261; }
body.light-mode .rel-links a{ background:#fff; }
.disclaimer{ font-size:12.5px; color:rgba(245,240,232,.55); border-top:1px solid rgba(244,162,97,.22);
  padding-top:14px; margin-top:32px; line-height:1.65; }
body.light-mode .disclaimer{ color:#5a6a5a; }
.site-foot{ border-top:1px solid rgba(244,162,97,.22); padding:22px 18px; text-align:center;
  color:rgba(245,240,232,.6); font-size:13px; }
.site-foot a{ color:#f4a261; text-decoration:none; margin:0 7px; }
body.light-mode .site-foot{ color:#5a6a5a; }
@media(max-width:520px){ h1.page-title{ font-size:22px; } .content{ font-size:15px; } }

/* Accessibility: visible focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid #f4a261; outline-offset:2px;
}


/* header overflow guard — chhote phones par nav kat raha tha */
.header > div:first-child{ min-width:0; }
.header h1, .header .brand-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:400px){
  .header .brand-title{ font-size:14px; }
}
@media(max-width:340px){
  .header .brand-title{ font-size:12.5px; }
}