:root{
  --surface-1:var(--bg-card);
  --surface-2:var(--bg-glass);
  --surface-3:rgba(255,255,255,.06);
  --surface-border:var(--border-glass);
  --surface-shadow:0 18px 48px rgba(0,0,0,.22);
  --input-bg:rgba(255,255,255,.04);
  --input-text:var(--text-primary);
  --muted-strong:var(--text-secondary);
}

html[data-theme=light]{
  --surface-1:rgba(255,255,255,.92);
  --surface-2:rgba(255,255,255,.72);
  --surface-3:rgba(15,23,42,.04);
  --surface-border:rgba(15,23,42,.08);
  --surface-shadow:0 14px 36px rgba(15,23,42,.08);
  --input-bg:rgba(255,255,255,.96);
  --input-text:#0f172a;
  --muted-strong:#475569;
}

html[data-theme=light] .card,
html[data-theme=light] .modal,
html[data-theme=light] .pay-admin-card,
html[data-theme=light] .pp-cat,
html[data-theme=light] .pp-qf,
html[data-theme=light] .pp-mcd,
html[data-theme=light] .pp-ec,
html[data-theme=light] .pp-mc,
html[data-theme=light] .pp-sb,
html[data-theme=light] .pp-ua,
html[data-theme=light] .hero-icon-card,
html[data-theme=light] .service-card,
html[data-theme=light] .pricing-card{
  box-shadow:var(--surface-shadow);
}

html[data-theme=light] .card,
html[data-theme=light] .modal,
html[data-theme=light] .pay-admin-card,
html[data-theme=light] .pp-cat,
html[data-theme=light] .pp-mcd,
html[data-theme=light] .pp-ec,
html[data-theme=light] .pp-mc{
  background:var(--surface-1) !important;
  border-color:var(--surface-border) !important;
}

html[data-theme=light] .pp-qf,
html[data-theme=light] .pp-sb{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96)) !important;
  border-color:rgba(var(--primary-rgb),.16) !important;
}

html[data-theme=light] .table-responsive .table tbody tr{
  background:var(--surface-1) !important;
  border-color:var(--surface-border) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}

html[data-theme=light] .table-responsive .table td,
html[data-theme=light] .table-responsive .table th{
  border-color:rgba(15,23,42,.06) !important;
}

html[data-theme=light] .form-control,
html[data-theme=light] input:not([type=checkbox]):not([type=radio]):not([type=color]),
html[data-theme=light] select,
html[data-theme=light] textarea{
  background:var(--input-bg);
  color:var(--input-text);
  border-color:var(--surface-border);
}

html[data-theme=light] input::placeholder,
html[data-theme=light] textarea::placeholder{
  color:#94a3b8;
}

html[data-theme=light] .pp-en,
html[data-theme=light] .pp-mo,
html[data-theme=light] .pac-meta,
html[data-theme=light] small,
html[data-theme=light] .section-label{
  color:var(--muted-strong) !important;
}

html[data-theme=light] .sidebar,
html[data-theme=light] .sidebar-menu,
html[data-theme=light] .sidebar-content{
  background:rgba(255,255,255,.9);
  border-color:var(--surface-border);
}