:root{
  --bg:#f7f5f1;
  --bg-alt:#ffffff;
  --surface:#ffffff;
  --surface-soft:#fffaf3;
  --text:#1f1f1f;
  --muted:#6c6c6c;
  --border:#e7ddd1;
  --accent:#ff7a1a;
  --accent-2:#27ae60;
  --accent-dark:#e66700;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --shadow:0 18px 40px rgba(26, 17, 11, 0.08);
}

body[data-theme="dark"]{
  --bg:#0b1018;
  --bg-alt:#0f1622;
  --surface:#111a29;
  --surface-soft:#151f31;
  --text:#f3f6fb;
  --muted:#a6b0c0;
  --border:#28354a;
  --accent:#ff9f43;
  --accent-2:#35d07f;
  --accent-dark:#ff7a1a;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 22px 60px rgba(0,0,0,.34);
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  transition:background .4s ease,color .3s ease;
}

a{color:inherit}

header,
.hdr{
  background:var(--bg-alt)!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:blur(18px);
}

footer,
.footer,
.footer-bottom{
  color:var(--muted);
}

footer,
.footer{
  background:var(--bg-alt)!important;
  border-top-color:var(--border)!important;
}

.logo,
.logo a,
.logo span,
.logo-mark{
  color:var(--accent)!important;
}

.nav a,
.hdr-links a,
.back,
.sb-link,
.fg-section a{
  color:var(--muted)!important;
}

.nav a:hover,
.hdr-links a:hover,
.back:hover,
.sb-link:hover,
.fg-section a:hover{
  color:var(--accent)!important;
}

.btn,
.btn-nav,
.btn-prim,
.btn-send,
.btn-cta,
.btn-plan,
.btn-save,
.btn-upg,
.btn-pay,
.bqa.p,
.bmo.p,
.badi,
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark))!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 14px 30px rgba(255,122,26,.18);
}

.btn:hover,
.btn-nav:hover,
.btn-prim:hover,
.btn-send:hover,
.btn-cta:hover,
.btn-plan:hover,
.btn-save:hover,
.btn-upg:hover,
.btn-pay:hover,
.bqa.p:hover,
.bmo.p:hover,
.badi:hover,
.btn-primary:hover{
  box-shadow:0 18px 35px rgba(255,122,26,.24)!important;
}

.btn.secondary,
.btn-nav,
.bmo.s,
.bqa,
.btn-secondary{
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}

.btn.secondary:hover,
.btn-nav:hover,
.bmo.s:hover,
.bqa:hover,
.btn-secondary:hover{
  border-color:var(--accent)!important;
  color:var(--accent)!important;
}

.hero,
.cta,
.section,
.container,
.main-grid,
.pay-grid,
.layout,
.main-area,
.main{
  color:var(--text);
}

.form-card,
.ic,
.faq-item,
.price-card,
.plan,
.pay-form,
.nl-card,
.hero-panel,
.plan-opt,
.auth-card,
.sidebar,
.sc,
.chart-box,
.tbl-wrap,
.mip,
.mb,
.fc,
.cc,
.sdc,
.ic,
.mcp,
.upg-banner,
.rev-card,
.menu-tab,
.rating-block,
.sub-card,
.pc,
.mo-b,
.info-panel,
.hero-card{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow);
}

.form-card::before,
.ic::before,
.price-card::before,
.plan::before,
.pay-form::before,
.nl-card::before,
.hero-panel .badge,
.sc::before,
.tbl-hd,
.mo-b::before{
  background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;
}

.hero p,
.hero-desc,
.section p,
.section-title p,
.fg-section p,
.ic-v,
.faq-a,
.plan-desc,
.price-note,
.pay-form p,
.vs,
.sc-l,
.tbl-badge,
.tbl th,
.tbl td,
.sub-info,
.upg-s,
.mb-s,
.mb-l,
.rev-date,
.rev-text,
.menu-tab,
.plan-features,
.desc,
.footer-bottom,
.ic-v a,
.sb-plan,
.sb-hello,
.u-pl{
  color:var(--muted)!important;
}

.hero h1,
.hero h2,
.section-title h2,
.section-hd h2,
.form-card h2,
.price-card h3,
.plan-name,
.plan-price,
.mo-t,
.vh,
.auth-title,
.sb-name{
  color:var(--text)!important;
}

.badge,
.hero-label,
.hero-panel .badge,
.local-badge,
.plan-pop,
.save-badge,
.plan-pill,
.sb-plan{
  background:var(--surface-soft)!important;
  color:var(--accent)!important;
  border-color:var(--border)!important;
}

.hero-panel .badge{
  color:#fff!important;
  border:none!important;
}

.local-grid,
.categories,
.services,
.pricing,
.footer-grid,
.plans,
.compare-tbl,
.sg,
.grant-row{
  color:var(--text);
}

.local-card,
.category-card,
.service,
.price-card,
.plan,
.pay-form,
.plan-opt,
.nl-card,
.auth-card,
.sidebar,
.sc,
.chart-box,
.tbl-wrap,
.mip,
.mb,
.fc,
.cc,
.sdc,
.mcp,
.upg-banner,
.rev-card,
.menu-tab,
.rating-block,
.sub-card,
.pc,
.mo-b,
.info-panel{
  border:1px solid var(--border)!important;
}

.local-card:hover,
.category-card:hover,
.service:hover,
.price-card:hover,
.plan:hover,
.plan-opt:hover,
.sc:hover,
.rev-card:hover{
  border-color:var(--accent)!important;
}

.compare-tbl,
.tbl,
.tbl th,
.tbl td{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}

.compare-tbl tr:hover td,
.tbl tr:hover td{
  background:rgba(255,122,26,.04)!important;
}

.hero-overlay{
  background:linear-gradient(to top, rgba(247,245,241,.96) 0%, rgba(247,245,241,.72) 55%, rgba(247,245,241,.15) 100%)!important;
}

body[data-theme="dark"] .hero-overlay{
  background:linear-gradient(to top, rgba(11,16,24,.96) 0%, rgba(11,16,24,.72) 55%, rgba(11,16,24,.15) 100%)!important;
}

.local-media-link{
  background:rgba(0,0,0,.58)!important;
  color:#fff!important;
}

.theme-toggle,
#themeToggle{
  background:var(--surface)!important;
  color:var(--accent)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;
}

body[data-theme="light"] .main-area,
body[data-theme="light"] .main,
body[data-theme="light"] .sidebar,
body[data-theme="light"] .auth-card,
body[data-theme="light"] .pay-form,
body[data-theme="light"] .hero-panel,
body[data-theme="light"] .form-card,
body[data-theme="light"] .info-panel,
body[data-theme="light"] .plan,
body[data-theme="light"] .plan-opt,
body[data-theme="light"] .price-card,
body[data-theme="light"] .nl-card,
body[data-theme="light"] .sc,
body[data-theme="light"] .chart-box,
body[data-theme="light"] .tbl-wrap,
body[data-theme="light"] .mo-b{
  background:var(--surface)!important;
}

body[data-theme="dark"] .main-area,
body[data-theme="dark"] .main,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .pay-form,
body[data-theme="dark"] .hero-panel,
body[data-theme="dark"] .form-card,
body[data-theme="dark"] .info-panel,
body[data-theme="dark"] .plan,
body[data-theme="dark"] .plan-opt,
body[data-theme="dark"] .price-card,
body[data-theme="dark"] .nl-card,
body[data-theme="dark"] .sc,
body[data-theme="dark"] .chart-box,
body[data-theme="dark"] .tbl-wrap,
body[data-theme="dark"] .mo-b{
  background:var(--surface)!important;
}