:root {
  --primary: #5c6cff;
  --primary-600: #4656e0;
  --danger: #e74c3c;
  --glass: rgba(255, 255, 255, .86);
  --muted: #6b7280;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  color: #0f172a;
}

/* Sky + subtle moving stars */
#sky-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('assets/clouds_tile.png') repeat;
  opacity: .25
}

.stars,
.stars2,
.stars3 {
  position: fixed;
  inset: -200% -200% 0 -200%;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .15;
  animation: drift 120s linear infinite;
}

.stars2 {
  background-size: 28px 28px;
  opacity: .12;
  animation-duration: 160s
}

.stars3 {
  background-size: 36px 36px;
  opacity: .09;
  animation-duration: 220s
}

@keyframes drift {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-300px)
  }
}

.screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.center-wrap {
  padding: 24px
}

.card {
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
  width: min(480px, 92vw);
  padding: 22px 20px
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px)
}

.card-head {
  text-align: center;
  margin-bottom: 8px
}

.logo {
  width: 85px;
  height: 85px;
  opacity: .9
}

h1 {
  margin: .35rem 0 .2rem
}

.sub {
  margin: .2rem 0 1rem;
  color: var(--muted)
}

.vertical {
  display: flex;
  flex-direction: column;
  gap: 12px
}

label {
  font-size: .9rem
}

input {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  outline: none;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s
}

input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(92, 108, 255, .12)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 700
}

.btn.primary {
  background: var(--primary);
  color: #fff
}

.btn.primary:hover {
  background: var(--primary-600)
}

.btn.ghost {
  background: #eef2ff;
  color: #111827
}

.btn.danger {
  background: var(--danger);
  color: #fff
}

.link {
  color: var(--primary);
  text-decoration: underline
}

.row {
  display: flex;
  gap: 10px;
  align-items: center
}

.row.spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row.spread .btn.secondary {
  font-size: 0.85rem;
  padding: 6px 14px;
}

.row.spread .link {
  font-size: 0.85rem;
  color: var(--accent, #ffd54f);
  /* or your theme accent */
  text-decoration: underline;
}

.row.end {
  justify-content: flex-end
}

.msg {
  margin-top: 10px;
  font-size: .9rem
}

.muted {
  color: var(--muted)
}

.appbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  margin: 10px auto 0 auto;
  max-width: 1200px
}

.appbar .halo-mini {
  width: 85px;
  height: 85px;
  margin-right: 8px
}

.appbar-left {
  display: flex;
  align-items: center;
  gap: 8px
}

.appbar-right {
  display: flex;
  gap: 10px
}

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 12px auto 28px auto;
  padding: 0 12px
}

.sidebar {
  padding: 16px;
  border-radius: 16px
}

.children {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0
}

.children li {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent
}

.children li:hover {
  background: #eef2ff
}

.children li.active {
  border-color: var(--primary);
  background: #eef2ff
}

.divider {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 6px
}



/* --- Plans section --- */
.plans {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0;
  padding: 16px;
  background: #1c2748;
  /* dark card background */
  border: 1px solid #ccd6ff;
  /* light border for contrast */
  border-radius: 14px;
  justify-content: center;
}

/* --- Plans section (responsive grid) --- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0;
  padding: 16px;
  background: #1c2748;
  /* dark card */
  border: 1px solid #ccd6ff;
  /* light contrast border */
  border-radius: 14px;
}

/* Plan buttons */
.btn.plan {
  background: #f8f9fa;
  border: 2px solid #d1d5db;
  color: #374151;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 10px;
  margin: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn.plan:hover:not(:disabled) {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* Selected plan highlight */
.btn.plan.selected {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
  position: relative;
  /* required for the ::after positioning */
}

/* Add a checkmark icon */
.btn.plan.selected::after {
  content: "✔";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  /* white checkmark */
}

/* Disabled plan (locked) */
.btn.plan:disabled {
  background: #f3f4f6;
  /* lighter gray */
  border: 2px dashed #d1d5db;
  /* dashed border */
  color: #9ca3af;
  /* muted text */
  cursor: not-allowed;
  position: relative;
  opacity: 0.7;
}

/* Optional: add a subtle lock icon overlay */
.btn.plan:disabled::after {
  content: "🔒";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.6;
}

.btn.plan:active {
  transform: translateY(0);
}

/* Focus (keyboard accessibility) */
.btn.plan:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 141, 255, 0.55), 0 6px 16px rgba(79, 141, 255, 0.45);
}


/* Disabled */
.btn.plan[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tighten on very small screens */
@media (max-width: 420px) {
  .plans {
    gap: 12px;
    padding: 12px;
  }

  .btn.plan {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn.plan {
    transition: none;
  }
}

.content {
  padding: 18px;
  border-radius: 16px
}

.content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.charts-wrap {
  position: relative;
  margin-top: 12px
}

.blurred {
  filter: blur(6px);
  pointer-events: none
}

.paywall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(6px);
  border-radius: 12px
}

.paywall-card {
  background: white;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  text-align: center
}

.plan-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px
}

.chart-card {
  background: white;
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06)
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.modal-card {
  width: min(480px, 92vw);
  border-radius: 14px;
  padding: 16px
}

/* Responsive */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr
  }

  .sidebar {
    order: 2
  }

  .content {
    order: 1
  }

  .content-head {
    flex-direction: column;
    align-items: flex-start
  }
}

#customRange {
  display: inline-flex;
  gap: 8px;
  align-items: center
}

#customRange.hidden {
  display: none
}

:root {
  --ui-bg: rgba(255, 255, 255, 0.07);
  --ui-border: rgba(255, 255, 255, 0.18);
  --ui-border-strong: rgba(255, 255, 255, 0.28);
  --ui-text: #e6ebff;
  --ui-muted: #b9c4ff;
  --brand: #8fb3ff;
  --brand-strong: #6b97ff;
  --brand-glow: #2b4bbf;
  --danger: #ff7f7f;
}

/* Controls bar */
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  padding: 10px 12px;
}

/* Labels tighter + muted */
.controls label {
  margin: 0 2px 0 0;
  font-size: 13px;
  color: var(--ui-muted);
}

/* Base field */
.select,
.date-input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.select:focus,
.date-input:focus {
  border-color: var(--ui-border-strong);
  box-shadow: 0 0 0 3px rgba(143, 179, 255, 0.25);
}

/* Buttons */
.btn {
  appearance: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(143, 179, 255, 0.25);
  border-color: var(--ui-border-strong);
}

/* Variants */
.btn-primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  border-color: transparent;
  color: #0b1226;
  box-shadow: 0 6px 18px rgba(43, 75, 191, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(43, 75, 191, 0.45);
}

.btn-outline {
  background: transparent;
  border-color: var(--ui-border-strong);
}

.btn-danger {
  background: transparent;
  border-color: rgba(255, 127, 127, 0.5);
  color: #ffb3b3;
}

.btn-danger:hover {
  background: rgba(255, 127, 127, 0.08);
}

/* Disabled */
.btn[disabled],
.select[disabled],
.date-input[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
}

/* Custom range group */
#customRange {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--ui-border);
  border-radius: 10px;
  padding: 6px 8px;
}

#customRange.hidden {
  display: none;
}

/* Compact on small widths */
@media (max-width: 600px) {
  .controls {
    padding: 8px
  }

  .btn,
  .select,
  .date-input {
    width: 100%
  }
}

/* --- Clearer control styles --- */
:root {
  --brand: #4f8dff;
  --brand-dark: #2d6be0;
  --text-light: #ffffff;
  --text-dark: #0b1226;
  --bg-dark: #121a33;
  --border-light: #ccd6ff;
}

/* Controls container */
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: #1c2748;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 14px;
}

/* Labels */
.controls label {
  margin: 0 4px 0 0;
  font-size: 13px;
  color: var(--text-light);
}

/* Selects and inputs */
.select,
.date-input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--bg-dark);
  font-weight: 500;
}

.select:focus,
.date-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 141, 255, 0.4);
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Variants */
.btn-primary {
  background: var(--brand);
  color: var(--text-light);
  box-shadow: 0 4px 12px rgba(79, 141, 255, 0.4);
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
}

.btn-outline:hover {
  background: rgba(79, 141, 255, 0.1);
}

.btn-danger {
  background: #ff4f4f;
  color: var(--text-light);
}

.btn-danger:hover {
  background: #e63838;
}

/* Custom range container */
#customRange {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

#customRange.hidden {
  display: none;
}

/* --- Subscription chip --- */

/* Base chip */
.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #6c757d;
  /* neutral */
}

/* States */
.chip-active {
  background: #28c76f !important;
}

/* green */
.chip-inactive {
  background: #ef4444 !important;
}

/* red */


#subscription-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0;
  color: #fff;
  /* default text color */
  background-color: #6c757d;
  /* default inactive grey */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* State variants applied to the same element */
#subscription-chip.active {
  background-color: #28c76f;
  /* bright green for active */
  color: #0b1226;
}

#subscription-chip.warning {
  background-color: #ff9f43;
  /* orange for warning */
  color: #0b1226;
}

#subscription-chip.trial {
  background-color: #9b59b6;
  /* purple for trial */
  color: #fff;
}

/* --- App Header Layout --- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #1c2748;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-logo {
  width: 85px;
  height: 85px;
  border-radius: 8px;
  /*background: #fff;*/
  /* fallback if transparent */
}

.app-title {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  color: #eaf1ff;
  display: flex;
  align-items: center;
}

.app-title .brand {
  color: #4f8dff;
  text-shadow: 0 2px 6px rgba(79, 141, 255, 0.45);
}

.app-title .divider {
  margin: 0 8px;
  color: #9aa7ff;
  font-weight: 400;
}

.app-title .section {
  color: #ffffff;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* --- Button tweaks --- */
.btn.small {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.btn.outline {
  background: transparent;
  border: 2px solid #4f8dff;
  color: #4f8dff;
}

.btn.outline:hover {
  background: rgba(79, 141, 255, 0.1);
}

.btn.danger {
  background: #ff4f4f;
  color: #fff;
  border: none;
}

.btn.danger:hover {
  background: #e63838;
}

/* Responsive */
@media (max-width: 600px) {
  .app-title {
    font-size: 18px;
  }

  .header-actions {
    flex-direction: column;
    gap: 6px;
  }
}

/* --- Entries Actions Section --- */
.entries-actions {
  margin-top: 40px;
  /* adds more vertical space below header */
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Download Button - eye-catching */
.btn.download {
  background: linear-gradient(135deg, #4f8dff, #2d6be0);
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 12px rgba(79, 141, 255, 0.35);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}

.btn.download:hover {
  background: linear-gradient(135deg, #5f9eff, #3d7aff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 141, 255, 0.45);
}

.btn.download:active {
  transform: translateY(0);
}

/* Delete button (consistent danger style) */
.btn.danger {
  background: #ff4f4f;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 10px rgba(230, 56, 56, 0.3);
}

.btn.danger:hover {
  background: #e63838;
}

/* --- Entries Management card --- */
.entries-card {
  margin-top: 36px;
  /* extra space below header/charts */
  background: #1c2748;
  border: 1px solid #ccd6ff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.entries-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.entries-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #eaf1ff;
}

.entries-card .subtext {
  margin: 4px 0 0;
  color: #b9c4ff;
  font-size: 13px;
}

/* Actions row */
.entries-actions {
  margin-top: 12px;
  /* space from title */
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Download = primary CTA */
.btn.download {
  background: linear-gradient(135deg, #4f8dff, #2d6be0);
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 12px rgba(79, 141, 255, 0.35);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}

.btn.download:hover {
  background: linear-gradient(135deg, #5f9eff, #3d7aff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 141, 255, 0.45);
}

.btn.download:active {
  transform: translateY(0);
}

/* Delete = danger */
.btn.danger {
  background: #ff4f4f;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 10px rgba(230, 56, 56, 0.3);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}

.btn.danger:hover {
  background: #e63838;
  transform: translateY(-2px);
}

.btn.danger:active {
  transform: translateY(0);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .entries-card {
    padding: 14px;
  }

  .entries-actions {
    gap: 10px;
  }

  .btn.download,
  .btn.danger {
    width: 100%;
    justify-content: center;
  }
}

/* --- Pro Gate (fully hide charts when inactive) --- */
.pro-gate {
  position: relative;
}

/* Instead of just blur, make charts invisible but keep layout */
.pro-gate.blurred #chartsWrap {
  opacity: 0;
  /* fully invisible */
  pointer-events: none;
  user-select: none;
}

/* Overlay - top aligned */
.pro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  /* horizontally centered */
  align-items: flex-start;
  /* top align */
  padding-top: 60px;
  /* space from very top */
  background: rgba(12, 16, 32, 0.55);
  backdrop-filter: blur(2px);
  z-index: 3;
}

.pro-overlay.hidden {
  display: none;
}

.pro-card {
  background: #1c2748;
  border: 1px solid #ccd6ff;
  border-radius: 14px;
  padding: 18px;
  width: min(520px, 92vw);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.pro-card h3 {
  margin: 0 0 6px;
  color: #eaf1ff;
  font-weight: 800;
}

.pro-card p {
  margin: 6px 0 14px;
  color: #b9c4ff;
}

.pro-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn.pro-cta {
  background: linear-gradient(135deg, #4f8dff, #2d6be0);
  color: #fff;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(79, 141, 255, 0.45);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}

.btn.pro-cta:hover {
  background: linear-gradient(135deg, #5f9eff, #3d7aff);
  transform: translateY(-2px);
}

.btn.outline {
  background: transparent;
  border: 2px solid #4f8dff;
  color: #4f8dff;
  border-radius: 10px;
  padding: 12px 18px;
}

.btn.outline:hover {
  background: rgba(79, 141, 255, 0.12);
}

/* Strong, readable message text */
#subMsg,
#subscriptionCard .sub-msg,
#subscriptionCard .muted {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937 !important;
  /* dark gray, overrides muted */
  opacity: 1 !important;
  min-height: 18px;
  /* dark gray for contrast */
}

/* When the card is in inactive (red) style, still readable */
.info-block.inactive #subMsg {
  color: #7f1d1d;
  /* dark red on light-red background */
}

/* If you previously had super-light .muted text, override it */
.muted {
  color: #374151 !important;
  opacity: 1 !important;
}

/* =========================
   Angel Diary – Glossy Theme
   Paste at END of styles.css
   ========================= */

/* --- Brand tokens (tweakable) --- */
:root {
  --bg-grad-1: #e6f0ff;
  --bg-grad-2: #cde6ff;
  --glass: #ffffffcc;
  /* translucent white */
  --glass-border: #ffffff55;
  --ink-900: #0f172a;
  --ink-800: #1f2937;
  --ink-600: #475569;
  --muted: #6b7280;
  --primary: #2563eb;
  /* brand blue */
  --primary-600: #1d4ed8;
  --primary-700: #1947c6;
  --accent: #7c3aed;
  /* violet accent */
  --success: #28c76f;
  --danger: #ef4444;
  --warning: #ff9f43;
  --card-shadow: 0 12px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
  --inner-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .06);
  --radius-12: 12px;
  --radius-16: 16px;
  --blur-strength: 10px;
}

/* --- App background & base typography --- */
html,
body {
  height: 100%;
  background: radial-gradient(1200px 800px at 10% -10%, #ffffff 0%, var(--bg-grad-1) 45%, var(--bg-grad-2) 100%);
  color: var(--ink-800);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Optional: soften scrollbars (WebKit) */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px
}

*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid #e2e8f0
}

*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8
}

/* --- Top header / brand bar --- */
header,
.topbar,
#topbar {
  background: linear-gradient(180deg, #ffffffcc 0%, #f8fafccc 100%);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-16);
  padding: 10px 14px;
}

/* --- Cards & “glass” surfaces --- */
.card,
.info-block,
.panel,
.stat,
.chart-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur-strength));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-16);
  box-shadow: var(--card-shadow);
}

/* Side panel feel */
.sidebar,
#left,
.left-col {
  background: linear-gradient(180deg, #ffffffb3, #f8fafcb3);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-16);
  box-shadow: var(--card-shadow);
}

/* Section headings */
h1,
h2,
h3,
h4 {
  color: var(--ink-900);
  letter-spacing: .2px
}

h1 {
  font-size: 26px;
  font-weight: 800
}

h2 {
  font-size: 20px;
  font-weight: 700
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink-900)
}

/* --- Buttons --- */
.btn {
  position: relative;
  border-radius: 12px;
  border: 0;
  padding: 10px 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 70%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .30), 0 2px 6px rgba(37, 99, 235, .2);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .35), 0 3px 8px rgba(37, 99, 235, .25);
}

.btn:active {
  transform: translateY(0);
  filter: saturate(0.95);
}

/* Primary variants you already use */
.btn.danger {
  background: linear-gradient(180deg, #f87171, #ef4444);
  box-shadow: 0 10px 24px rgba(239, 68, 68, .25);
}

.btn.secondary {
  background: linear-gradient(180deg, #64748b, #475569);
  box-shadow: 0 10px 24px rgba(71, 85, 105, .25);
}

/* --- Range controls cluster (Range + select + Refresh) --- */
.controls,
.filters-bar {
  background: var(--glass);
  backdrop-filter: blur(var(--blur-strength));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-16);
  box-shadow: var(--card-shadow);
  padding: 10px 12px;
}

select,
.select,
input[type="date"] {
  background: #ffffffee;
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--ink-800);
  box-shadow: var(--inner-shadow);
}

select:focus,
input[type="date"]:focus {
  outline: 2px solid #93c5fd;
}

/* --- Plan buttons (with glossy selected state) --- */
.btn.plan {
  background: linear-gradient(180deg, #f0f4ff, #e9efff);
  border: 1px solid #c7d2fe;
  color: #1e293b;
  box-shadow: 0 6px 14px rgba(30, 41, 59, .12);
}

.btn.plan:hover {
  filter: brightness(1.03);
}

.btn.plan.selected {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 80%);
  border: 1px solid #1d4ed8;
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .45);
  transform: translateY(-2px);
}

.btn.plan.selected::after {
  content: "✔";
  position: absolute;
  top: 6px;
  right: 8px;
  font-weight: 800;
}

/* Disabled premium look */
.btn.plan:disabled {
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

.btn.plan:disabled::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Pro CTA button inside subscription card --- */
#paypal-buttons .btn.pro-cta {
  background: linear-gradient(180deg, var(--accent), #5b21b6);
  box-shadow: 0 12px 26px rgba(124, 58, 237, .35);
}

#paypal-buttons .btn.pro-cta:hover {
  box-shadow: 0 16px 36px rgba(124, 58, 237, .45);
}

/* --- Chips (Active/Inactive/Grace) --- */
.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #6c757d;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), 0 6px 14px rgba(2, 6, 23, .15);
}

.chip-active {
  background: linear-gradient(180deg, #34d399, var(--success)) !important;
}

.chip-inactive {
  background: linear-gradient(180deg, #ff7b7b, var(--danger)) !important;
}

.chip-warning {
  background: linear-gradient(180deg, #fbbf24, var(--warning));
}

/* Subscription card emphasis when inactive */
.info-block.inactive {
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff7f7cc, #ffececaa);
}

/* subMsg – make sure it’s visible & readable */
#subMsg {
  display: block;
  min-height: 20px;
  margin: 8px 0 6px;
  color: #1f2937 !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* --- Chart wrappers --- */
.chart-card,
.chart,
.charts {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-16);
  box-shadow: var(--card-shadow);
}

/* Gate/blur effect for Pro-locked content */
.blurred {
  filter: blur(6px) saturate(.7) brightness(.95);
  position: relative;
}

.blurred::after {
  content: "Pro feature • Activate to view";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffffaa, #ffffffcc);
  border-radius: var(--radius-16);
}

/* --- Inputs & lists (children, search, etc.) --- */
input[type="text"],
input[type="email"],
input[type="password"] {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--inner-shadow);
}

input:focus {
  outline: 2px solid #93c5fd;
}

/* Children list selected */
#children-list li {
  background: #ffffffaa;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 6px 0;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}

#children-list li:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(2, 6, 23, .08);
}

#children-list li.active {
  background: linear-gradient(180deg, #e6f0ff, #dbeafe);
  border-color: #bfdbfe;
  color: #1e3a8a;
  box-shadow: 0 8px 20px rgba(30, 58, 138, .15);
}

/* --- Entry management panel (Download/Delete) --- */
.entries-panel,
.entries,
#entriesPanel {
  background: linear-gradient(180deg, #0b1223, #0f172a);
  color: #e5e7eb;
  border-radius: var(--radius-16);
  border: 1px solid #0b1223;
  box-shadow: 0 16px 32px rgba(2, 6, 23, .35);
}

.entries-panel .btn {
  box-shadow: none;
}

/* --- Fancier “glass” shadows for major blocks --- */
.glow {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 40px 80px rgba(37, 99, 235, .10), 0 2px 6px rgba(2, 6, 23, .08);
}

/* --- Motion safety --- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Patch: spacing + contrast inside glass/dark cards ===== */

/* 1) Restore sensible padding for all cards/panels */
.card,
.info-block,
.panel,
.stat,
.chart-card,
.controls,
.filters-bar,
.entries-panel,
#entriesPanel {
  padding: 16px 18px !important;
  /* base spacing */
  border-radius: var(--radius-16);
}

/* 2) Headings & subheadings inside any card */
.card h1,
.card h2,
.card h3,
.card h4,
.info-block h1,
.info-block h2,
.info-block h3,
.info-block h4,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.entries-panel h1,
.entries-panel h2,
.entries-panel h3,
.entries-panel h4,
#entriesPanel h1,
#entriesPanel h2,
#entriesPanel h3,
#entriesPanel h4 {
  margin: 0 0 8px 0;
  line-height: 1.2;
}

/* 3) Generic subtitle text inside panels */
.card .subtitle,
.panel .subtitle,
.info-block .subtitle,
.entries-panel .subtitle,
#entriesPanel .subtitle,
.card p.muted,
.panel p.muted,
.info-block p.muted,
.entries-panel p.muted,
#entriesPanel p.muted {
  margin: 2px 0 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  opacity: .9;
}

/* 4) Entries Management (dark panel) – ensure title & subtitle are visible */
.entries-panel,
#entriesPanel {
  background: linear-gradient(180deg, #0b1223, #0f172a);
  color: #e5e7eb;
  /* default text color */
  border: 1px solid rgba(255, 255, 255, .08);
}

.entries-panel h2,
#entriesPanel h2,
.entries-panel h3,
#entriesPanel h3 {
  color: #f3f4f6 !important;
  /* bright headings */
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.entries-panel .subtitle,
#entriesPanel .subtitle,
.entries-panel p,
#entriesPanel p {
  color: #cfd8e3 !important;
  /* readable subtitle/body */
  opacity: 1 !important;
}

/* If your title/subtitle live in a header bar */
.entries-panel .panel-head,
#entriesPanel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.entries-panel .panel-head .title,
#entriesPanel .panel-head .title {
  font-weight: 800;
  font-size: 16px;
  color: #f3f4f6 !important;
}

.entries-panel .panel-head .desc,
#entriesPanel .panel-head .desc {
  font-size: 13px;
  color: #cfd8e3 !important;
}

/* 5) Buttons row inside Entries panel – keep spacing */
.entries-panel .btn,
#entriesPanel .btn {
  margin-right: 8px;
  margin-top: 8px;
}

/* 6) SubMsg always readable (light & dark) */
#subMsg {
  color: #1f2937 !important;
}


/* 7) Labels in left sidebar (e.g., “Reminder Time”, “Subscription”) */
.left-col label,
.sidebar label,
.info-block>label {
  display: block;
  margin: 0 0 6px 0;
  font-weight: 800;
  color: var(--ink-900);
}


/* 8) Prevent inner content from hugging edges after gradients */
.card>*:first-child,
.info-block>*:first-child,
.panel>*:first-child,
.entries-panel>*:first-child {
  margin-top: 2px;
}

.card>*:last-child,
.info-block>*:last-child,
.panel>*:last-child,
.entries-panel>*:last-child {
  margin-bottom: 2px;
}

/* =========================
   Entries Management Card – Patch
   ========================= */

/* Card base */
.entries-card {
  padding: 16px 20px;
  border-radius: var(--radius-16);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

/* Head area */
.entries-card-head {
  margin-bottom: 14px;
}

/* Title */
.entries-card-head h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--ink-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

/* Subtitle text */
.entries-card-head .subtext {
  font-size: 14px;
  font-weight: 500;
  margin: 2px 0 0;
  color: var(--ink-600);
  opacity: 1;
}

/* Action buttons cluster */
.entries-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.entries-actions .btn {
  flex: 0 0 auto;
}

/* =========================
   Entries Management – Glossy Glass
   ========================= */

/* Base glass card */
.entries-card {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--radius-16);
  background: linear-gradient(180deg, #ffffffcc, #f8fafccc);
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Subtle inner sheen */
.entries-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%),
    radial-gradient(800px 300px at -10% -20%, rgba(124, 58, 237, .08), rgba(0, 0, 0, 0));
  mix-blend-mode: screen;
}

/* Accent glow on hover/focus (light but classy) */
.entries-card:hover,
.entries-card:focus-within {
  box-shadow: 0 16px 36px rgba(37, 99, 235, .18), 0 4px 10px rgba(2, 6, 23, .08);
  border-color: rgba(37, 99, 235, .28);
}

/* Header */
.entries-card-head {
  margin-bottom: 14px;
}

.entries-card-head h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--ink-900);
  letter-spacing: .2px;
}

.entries-card-head .subtext {
  font-size: 14px;
  font-weight: 500;
  margin: 2px 0 0;
  color: var(--ink-600);
  opacity: 1;
}

/* Buttons row */
.entries-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* Buttons (download/danger) get a little shine */
.entries-actions .btn.download {
  background: linear-gradient(180deg, #16a34a, #15803d);
  box-shadow: 0 12px 26px rgba(22, 163, 74, .28), 0 2px 6px rgba(2, 6, 23, .12);
}

.entries-actions .btn.download:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(22, 163, 74, .36), 0 3px 10px rgba(2, 6, 23, .16);
}

.entries-actions .btn.danger {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 12px 26px rgba(239, 68, 68, .28), 0 2px 6px rgba(2, 6, 23, .12);
}

.entries-actions .btn.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(239, 68, 68, .36), 0 3px 10px rgba(2, 6, 23, .16);
}

/* Small screens: keep breathing room */
@media (max-width: 560px) {
  .entries-card {
    padding: 16px;
  }

  .entries-actions {
    gap: 10px;
  }
}

/* =========================================
   Mobile-first polish (glossy + responsive)
   ========================================= */

/* Global touch targets & smoother tap */
:root {
  --tap: 14px;
}

@media (hover:none) and (pointer:coarse) {
  .btn {
    transition: none;
  }

  /* remove hover-lift on touch */
}

/* Base typography scale down slightly */
@media (max-width: 768px) {
  html {
    font-size: 15.5px;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }
}

/* Cards: tighter padding on small screens */
@media (max-width: 768px) {

  .card,
  .info-block,
  .panel,
  .chart-card,
  .entries-card,
  .controls,
  .filters-bar,
  .sidebar,
  #left,
  .left-col {
    padding: 14px 14px !important;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  }

  .entries-card {
    padding-top: 16px !important;
  }
}

/* Top header: stack logo + actions */
@media (max-width: 768px) {

  .topbar,
  header,
  #topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .topbar .title,
  .topbar .brand {
    flex: 1 1 100%;
    order: 1;
  }

  .topbar .actions {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    order: 2;
  }

  .topbar .btn {
    padding: 10px 12px;
  }
}

/* Plans: full-width, easy tapping */
@media (max-width: 768px) {
  .plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .btn.plan {
    width: 100%;
    padding: 12px;
    font-weight: 800;
  }

  .btn.plan.selected::after {
    top: 8px;
    right: 12px;
  }
}

/* Subscription card: keep message visible, tuck CTA under it */
@media (max-width: 768px) {
  #subscriptionCard {
    display: grid;
    gap: 10px;
  }

  #subMsg {
    margin: 4px 0 0;
  }

  #paypal-buttons .btn.pro-cta {
    width: 100%;
    padding: 12px 14px;
  }
}

/* Filters bar: wrap nicely, inputs full-width */
@media (max-width: 768px) {

  .filters-bar,
  .controls {
    display: grid;
    gap: 10px;
  }

  .filters-bar .row,
  .controls .row {
    display: grid;
    gap: 10px;
  }

  select,
  input[type="date"] {
    width: 100%;
    padding: 10px 12px;
  }

  .btn.refresh,
  #refreshBtn,
  #applyCustomBtn {
    width: 100%;
  }
}

/* Entries card: buttons stack */
@media (max-width: 768px) {
  .entries-actions {
    display: grid;
    gap: 10px;
  }

  .entries-actions .btn {
    width: 100%;
    padding: 12px 14px;
  }
}

/* Children list: horizontal chips on mobile */
@media (max-width: 768px) {
  #children-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  #children-list li {
    flex: 0 0 auto;
    min-width: max-content;
  }
}

/* Charts: responsive height + better spacing */
@media (max-width: 768px) {

  .chart-card canvas,
  .charts canvas {
    width: 100% !important;
    height: 260px !important;
  }

  .chart-card,
  .charts {
    padding: 12px !important;
  }
}

/* Paywall/blur overlay: readable but compact on small screens */
@media (max-width: 768px) {
  .blurred::after {
    font-size: 13px;
    padding: 0 12px;
  }
}

/* Reduce visual noise on very small screens */
@media (max-width: 420px) {
  html {
    font-size: 15px;
  }

  .btn {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .chip {
    padding: 6px 10px;
    font-size: 12px;
  }

  .entries-card::after {
    height: 3px;
  }

  /* thinner accent bar */
  .topbar,
  header,
  #topbar {
    border-radius: 12px;
  }

  .card,
  .info-block,
  .panel,
  .entries-card {
    border-radius: 12px;
  }
}

/* Dark mode mobile tweaks: keep contrast high */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .entries-card-head h3 {
    color: #f8fafc !important;
  }

  .entries-card-head .subtext {
    color: #cbd5e1 !important;
  }

  #subMsg {
    color: #e5e7eb !important;
  }
}

/* Prevent content hugging edges on mobile */
@media (max-width: 768px) {

  .container,
  .main,
  .page-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ======================
   Manual Dark Theme
   ====================== */
body.theme-dark {
  background: radial-gradient(1200px 800px at 10% -10%, #0a0f1d 0%, #0b1223 45%, #0f172a 100%);
  color: #cbd5e1;
}

/* Cards & glass */
body.theme-dark .card,
body.theme-dark .info-block,
body.theme-dark .panel,
body.theme-dark .entries-card,
body.theme-dark .chart-card,
body.theme-dark .controls,
body.theme-dark .filters-bar,
body.theme-dark .sidebar {
  background: linear-gradient(180deg, #0f172ab3, #0b1223b3);
  border-color: #1f2937;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
}

/* Headings & text */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4 {
  color: #f3f4f6;
}

body.theme-dark p,
body.theme-dark .subtext,
body.theme-dark label {
  color: #cbd5e1;
}

/* Buttons */
body.theme-dark .btn {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 12px 28px rgba(59, 130, 246, .35), 0 3px 10px rgba(0, 0, 0, .35);
}

body.theme-dark .btn.plan.selected {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #3b82f6;
  box-shadow: 0 16px 36px rgba(59, 130, 246, .45);
}

/* Chips */
body.theme-dark .chip {
  background: #334155;
}

body.theme-dark .chip-active {
  background: linear-gradient(180deg, #10b981, #059669) !important;
}

body.theme-dark .chip-inactive {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
}

/* Blur overlay */
body.theme-dark .blurred::after {
  color: #e5e7eb;
  background: linear-gradient(180deg, #0b12238f, #0f172a9f);
}

/* Theme toggle button style */
.btn.theme-toggle {
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make plan selection/status text readable in dark mode */
body.theme-dark #subMsg,
body.theme-dark .sub-msg,
body.theme-dark #subscriptionCard .muted,
body.theme-dark #subscriptionCard .subtext {
  color: #e5e7eb !important;
  /* light gray */
  opacity: 1 !important;
}

/* If you render the selection somewhere else too */
body.theme-dark .plans .selection-note,
body.theme-dark .plans .selected-note {
  color: #e5e7eb !important;
  opacity: 1 !important;
}

/* Ensure the subscription card doesn't dim the text when inactive */
body.theme-dark .info-block.inactive #subMsg {
  color: #f3f4f6 !important;
}

/* Bonus: if you ever style #subMsg as a badge */
body.theme-dark #subMsg.badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f9fafb !important;
}

/* Ensure chart area positions overlay correctly */
.chart-area {
  position: relative;
}

/* --- Reset any global blur overlay you had before --- */
.blurred::after {
  display: none !important;
  content: none !important;
}

/* Blur only the charts we want to tease */
#chartsGate.blurred .blur-target {
  filter: blur(6px) saturate(.85) brightness(.95);
}

/* Hide Sentiment completely when inactive */
#chartsGate.blurred #sentimentWrap {
  display: none !important;
}

/* Keep non-blurred state normal */
#chartsGate:not(.blurred) #sentimentWrap {
  display: block;
}

/* Overlay sits above charts but is semi-transparent */
.pro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  /* top-align vertically */
  justify-content: center;
  /* keep horizontally centered; change to flex-start to left-align */
  padding-top: 12px;
  /* space from top */
  background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .75));
  border-radius: var(--radius-16);
  z-index: 10;
}

.pro-overlay.hidden {
  display: none;
}

.pro-overlay .overlay-content {
  width: min(680px, 94%);
  text-align: center;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-16);
  box-shadow: var(--card-shadow);
}

/* Dark theme background */
body.theme-dark .pro-overlay {
  background: linear-gradient(180deg, rgba(11, 18, 35, .65), rgba(15, 23, 42, .75));
}

/* Make sure canvases have a height on mobile */
.chart-card canvas {
  width: 100% !important;
  min-height: 260px;
}

/* Spacing between Entries card and Charts area */
.entries-card {
  margin-bottom: 16px;
}

.chart-area {
  margin-top: 6px;
}

/* small top gap; tweak if needed */

/* On small screens give a bit more breathing room */
@media (max-width: 768px) {
  .entries-card {
    margin-bottom: 14px;
  }

  .chart-area {
    margin-top: 8px;
  }
}

/* --- Login Box Customization --- */
#login-screen .card {
  background: #1c2748;
  /* solid navy blue background */
  border: 1px solid #ccd6ff;
  /* light border for contrast */
  color: #eaf1ff;
  /* light text inside */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#login-screen .card-head h1,
#login-screen .card-head .sub {
  color: #eaf1ff;
  /* make heading + subtitle readable */
}

#login-screen input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f1f5f9;
}

#login-screen input::placeholder {
  color: rgba(241, 245, 249, 0.7);
}

#login-screen label {
  color: #cbd5e1;
  font-weight: 600;
}

#login-screen .btn.primary {
  background: linear-gradient(180deg, #4f8dff, #2d6be0);
  border: none;
  box-shadow: 0 6px 16px rgba(79, 141, 255, 0.45);
}

#login-screen .btn.primary:hover {
  background: linear-gradient(180deg, #5f9eff, #3d7aff);
}

/* --- Premium Login Box --- */
#login-screen .card {
  background: #1c2748;
  /* solid navy */
  border: 1px solid #2f3b66;
  color: #eaf1ff;
  border-radius: 16px;
  /* match dashboard cards */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  position: relative;
  /* needed for accent bar */
  overflow: hidden;
  /* ensures accent bar corners are clipped */
  padding: 28px 30px;
}

/* Thin glossy accent bar on top */
#login-screen .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4f8dff, #7c3aed, #4f8dff);
  background-size: 200% 100%;
  animation: barFlow 6s linear infinite;
}

/* Animation for accent bar */
@keyframes barFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* Headings */
#login-screen .card-head h1 {
  color: #ffffff;
  font-weight: 800;
  margin: 10px 0 2px;
}

#login-screen .card-head .sub {
  color: #cbd5e1;
  font-weight: 500;
  margin: 0 0 20px;
}

/* Inputs */
#login-screen input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #f1f5f9;
  padding: 10px 14px;
}

#login-screen input::placeholder {
  color: rgba(241, 245, 249, 0.6);
}

/* Labels */
#login-screen label {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}

/* Buttons */
#login-screen .btn.primary {
  background: linear-gradient(180deg, #4f8dff, #2d6be0);
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(79, 141, 255, 0.45);
  font-weight: 700;
  margin-top: 10px;
}

#login-screen .btn.primary:hover {
  background: linear-gradient(180deg, #5f9eff, #3d7aff);
  box-shadow: 0 8px 22px rgba(79, 141, 255, 0.55);
}

/* Forgot link */
#login-screen .link {
  color: #93c5fd;
  font-weight: 500;
}

#login-screen .link:hover {
  text-decoration: underline;
}

.info-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  padding: 14px 40px 14px 14px;
  margin-bottom: 0px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
  color: #ffd54f;
  /* golden highlight */
}

.info-banner .close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  color: #ffd54f;
  cursor: pointer;
  transition: color 0.2s;
}

.info-banner .close-btn:hover {
  color: #fff;
}

.store-badges {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.store-badges img {
  height: 40px;
}

.row.center {
  text-align: center;
}

.row.center .link {
  color: var(--link-color, #4dabf7);
  text-decoration: underline;
  font-size: 0.9rem;
}

.row.center .link:hover {
  color: var(--link-hover-color, #82c0ff);
}

.row.center .btn.secondary {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* Keep nav logo small, but ONLY in the nav */
.nav .logo {
  height: 28px;
  width: auto;
}

/* Make the login card logo big and centered */
#login-screen .card-head .logo {
  width: 200px !important;
  /* tweak: 180–220px */
  height: auto !important;
  display: block;
  margin: 0 auto 6px;
}

/* Optional: scale on small screens */
@media (max-width: 420px) {
  #login-screen .card-head .logo {
    width: 170px !important;
  }
}

/* Make sure info-banner badges don't affect other images */
.info-banner .store-badges img {
  height: 40px;
  width: auto;
}

/* Just in case you had a generic .logo rule elsewhere */
.logo {
  max-width: none;
}

.login-logo {
  width: 200px !important;
  height: auto !important;
}

.info-banner.is-warning {
  border-color: #f4be57;
  background: #fff9e8;
  color: #e63946 !important;
  /* bright red */
  font-weight: 600;
}

.info-banner.is-danger {
  border-color: #e06666;
  background: #ffefef;
  color: #e63946 !important;
  /* bright red */
  font-weight: 600;
}

/* Coupon row: clean layout inside the card */
.coupon-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}

/* Make sure the input never overflows */
#couponInput {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* IMPORTANT: allows shrinking inside grid/flex */
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d6d6e7;
  border-radius: 8px;
  outline: none;
}

#couponInput:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .15);
}

/* Buttons */
#applyCouponBtn,
#removeCouponBtn {
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #6c63ff;
  background: #6c63ff;
  color: #fff;
  cursor: pointer;
  height: 40px;
}

#removeCouponBtn {
  background: #fff;
  color: #6c63ff;
}

/* Keep the card from letting children spill out */
#checkout-card,
.info-block {
  overflow: visible;
  /* or hidden if you prefer; grid will prevent overflow anyway */
}

#checkout-card .info-block {
  padding-top: 6px;
}

/* Price summary spacing */
.summary {
  line-height: 1.6;
}

/* Responsive: stack on small widths */
@media (max-width: 640px) {
  .coupon-row {
    grid-template-columns: 1fr;
    /* input on its own line, buttons underneath */
  }

  #applyCouponBtn,
  #removeCouponBtn {
    width: 100%;
  }
}

/* Coupon block layout */
.coupon-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#couponInput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d6d6e7;
  border-radius: 8px;
  outline: none;
}

#couponInput:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.coupon-buttons {
  display: flex;
  gap: 8px;
}

#applyCouponBtn,
#removeCouponBtn {
  flex: 1;
  /* take equal width */
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #6c63ff;
  height: 40px;
  cursor: pointer;
}

#applyCouponBtn {
  background: #6c63ff;
  color: #fff;
}

#removeCouponBtn {
  background: #fff;
  color: #6c63ff;
}

/* Ensure hidden or empty info-banner does not occupy space */
.info-banner.hidden,
#renew-banner:empty {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent collapsed cards while charts are initializing */
.chart-card,
.chart,
.apexcharts-canvas,
.echart {
  min-height: 220px;
  /* adjust to your design */
}

/* Prefer hiding with visibility to keep measurable size during transitions (optional) */
.charts-panel.hidden-keep-size {
  visibility: hidden;
}