/* v2.4.46 — Inter 4.1 (OFL, rsms/inter) self-hosted variable font, Latin subset. opsz pinned to the default (14) via
   font-optical-sizing:none so rendering matches the previous Google-hosted Inter (wght-only). See static/fonts/Inter-OFL-LICENSE.txt */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable-latin.woff2") format("woff2");
}
/* v2.4.48 — Roboto (Roboto 3, OFL, googlefonts/roboto-3-classic, v51) self-hosted variable font, Latin subset, wght 100-900, wdth 100. See static/fonts/Roboto-OFL-LICENSE.txt */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/RobotoVariable-latin.woff2") format("woff2");
}
:root { font-optical-sizing: none; }
:root {
  --bg: #000000;
  --panel: transparent;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --border: rgba(255, 255, 255, 0.14);
  --surface-2: rgba(255, 255, 255, 0.06);
  --board-pad: clamp(14px, 2.2vw, 32px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  margin: 0;
  background: #000000;
  overflow: hidden;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}
body.lobby-card {
  color: var(--text);
  background: #000000; /* black base; blurred art sits on top edge-to-edge */
  min-height: 100dvh;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed blurred art — true viewport edge-to-edge (content card keeps its own pad) */
.np-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* clip oversized blur layer */
  background-color: #000000; /* black to absolute edges under art */
  pointer-events: none;
}
/* Oversized painted layer: JS sets backgroundImage on #backdrop; ::before inherits it */
.np-backdrop::before {
  content: "";
  position: absolute;
  /* extend past viewport so blur(40px) never leaves a hard/empty rim */
  top: -12%;
  right: -12%;
  bottom: -12%;
  left: -12%;
  background-color: #000000;
  background-image: var(--np-art, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(20px) saturate(1.1) brightness(0.45);
  transform: scale(1.08);
  transition: background-image 0.7s ease, opacity 0.45s ease;
}
.np-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.78) 100%);
}
.np-backdrop.empty {
  background-image: none !important;
}
.np-backdrop.empty::before {
  background-image: none !important;
  background-color: #000000;
  filter: none;
  transform: none;
}
.np-backdrop.empty::after {
  background: radial-gradient(ellipse 70% 50% at 50% 40%, transparent 0%, rgba(0,0,0,0.85) 100%);
}

/* Idle (unused in Lobby Calendar) */
.np-idle {
  position: fixed; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; text-align: center;
  padding:
    calc(24px + var(--safe-top))
    calc(24px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(24px + var(--safe-left));
  background: transparent;
}
.np-idle[hidden], .np-board[hidden] { display: none !important; }
.np-idle-logo {
  display: block;
  width: min(78vw, 900px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.55));
  user-select: none;
  pointer-events: none;
}

/* standby art (unused) */
.np-idle-logo {
  width: auto;
  max-width: min(42vw, 420px);
  height: auto;
  max-height: min(70vh, 720px);
  object-fit: contain;
}

/* Caption under idle logo removed (logo-only). Rule kept inert if markup reappears. */
.np-idle-caption,
.np-idle-caption[hidden] { display: none !important; }

/* Content card — padded inset; backdrop behind bleeds to viewport edge */
.np-board {
  position: fixed;
  z-index: 1;
  top: calc(var(--board-pad) + var(--safe-top));
  right: calc(var(--board-pad) + var(--safe-right));
  bottom: calc(var(--board-pad) + var(--safe-bottom));
  left: calc(var(--board-pad) + var(--safe-left));
  display: grid;
  grid-template-columns: minmax(34%, 42%) 1fr;
  width: auto;
  height: auto;
  background: transparent; /* no dark card — only black blurred image behind */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}

.np-board-poster {
  cursor: pointer;
  position: relative;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: transparent;
  overflow: hidden; /* letterbox only; image itself uses contain */
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep cover in its own grid cell — panel never overlays */
  z-index: 0;
  isolation: isolate;
}
.np-cover {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* NEVER crop — full art on every screen */
  object-position: center center;
  display: block;
}
.np-cover-ph {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* unused space = blurred bg, no black letterbox */
}
.np-cover-ph-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.np-cover-ph[hidden] { display: none !important; }

.np-board-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 2.5vh, 28px);
  min-width: 0;
  min-height: 0;
  /* panel is a separate grid column/row — must not overlap cover */
  overflow: hidden;
  padding:
    clamp(28px, 5vh, 56px)
    clamp(28px, 4vw, 56px)
    clamp(24px, 4vh, 48px)
    clamp(28px, 4vw, 56px);
  background: transparent; /* panel fully clear over blur */
}

.np-board-top {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  /* Match Ends right edge until this cap; .np-lobby stays full panel so Ends can run wider. */
  width: 100%;
  max-width: min(100%, 42rem);
}

.np-title {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}

.np-episode {
  margin: clamp(6px, 1vh, 12px) 0 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.np-episode[hidden] { display: none !important; }


.np-synopsis {
  margin: clamp(16px, 2.5vh, 28px) 0 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: none; /* width follows .np-board-top; Ends can grow past that on wide screens */
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: min(42vh, 18rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
  min-height: 0;
}
.np-synopsis[hidden] { display: none !important; }

/* Format badges — below synopsis, above screen/time strip (controller style) */
.format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: clamp(14px, 2vh, 22px);
  overflow: visible;
  flex-shrink: 0;
}
.format-row[hidden] { display: none !important; }

.fmt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(48px, 6.5vh, 64px);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.fmt-badge svg,
.fmt-badge .fmt-logo {
  display: block;
  height: clamp(30px, 4vh, 42px);
  width: auto;
  max-width: min(240px, 38vw);
}
.fmt-badge .fmt-logo {
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
}
/* Brand-color marks — keep as authored (colorful HDR10 / HDR10+ / HDR rainbow; DTS PNGs) */
.fmt-badge .fmt-logo[src$="hdr10.svg"],
.fmt-badge .fmt-logo[src*="hdr10-plus.svg"],
.fmt-badge .fmt-logo[src$="hdr.svg"],
.fmt-badge .fmt-logo[src$="dts-hd-ma.png"],
.fmt-badge .fmt-logo[src$="dts-x.png"] { filter: none; }
.fmt-badge.logo { padding: 0; background: transparent; }

.fmt-badge.res { letter-spacing: 0.06em; }
.fmt-badge.text { font-size: clamp(0.8rem, 1.3vw, 0.95rem); text-transform: uppercase; }
.fmt-badge.codec { font-weight: 600; color: rgba(255,255,255,0.75); }

/* Bottom lobby strip: rotated SCREEN + big 1 | ENDS + time once */
.np-lobby {
  --ends-time-size: clamp(2.6rem, 8vw, 5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 36px);
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
}

.np-screen[hidden] { display: none; }
/* 2.4.34 — Lobby Card Screen 1 mark temporarily hidden (restorable: remove this block + HIDE_SCREEN_MARK in now.js) */
.np-screen {
  display: none !important;
  align-items: flex-end;
  color: #fff;
  user-select: none;
}
/* Single vector: SCREEN word rotated (S bottom, N top, letters sideways); 1 ink matches SCREEN; bottom = ENDS time */
.np-screen-mark {
  display: block;
  height: clamp(5.8rem, 15vw, 10rem);
  width: auto;
  overflow: visible;
  flex-shrink: 0;
  /* Lift by ~font descent of .np-ends-time so SVG ink bottom == digit ink bottom */
  margin-bottom: calc(var(--ends-time-size) * 0.18);
}

.np-ends {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
  color: #fff;
  padding-bottom: 0;
  text-align: right;
}
.np-ends-label {
  font-size: clamp(1.1rem, 2.4vw, 1.65rem);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.1;
  opacity: 0.92;
  white-space: nowrap;
}
.np-ends-time {
  display: block;
  font-size: var(--ends-time-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Portrait / narrow: stack poster on top */
@media (max-width: 800px), (orientation: portrait) {
  .np-board {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(34vh, 42vh) 1fr;
  }
  .np-board-poster { height: 100%; }
  .np-lobby { --ends-time-size: clamp(2.2rem, 10vw, 3.6rem); }
  .np-ends-time { font-size: var(--ends-time-size); }
  .np-ends-label { font-size: clamp(0.95rem, 3.2vw, 1.35rem); }
}

/* Soften for very short landscape */
@media (max-height: 480px) and (orientation: landscape) {
  .np-board-panel {
    padding: 16px 24px 12px;
  }
  .np-board {
    --board-pad: 8px;
  }
}

/* ==========================================================================
   Lobby Calendar header. No SCREEN/1.
   Aesthetics match a design mockup
   ========================================================================== */
.np-cal {
  position: fixed; inset: 0;
  z-index: 2;
  font-family: Inter, Roboto, system-ui, sans-serif;
  color: #f4f4f5;
  overflow: hidden;
  /* Birthday standout palette — themes override these to match accents */
  --cal-bday-accent: #7fe0e2;
  --cal-bday-accent-soft: rgba(127, 224, 226, 0.60);
  --cal-bday-wash: rgba(64, 176, 196, 0.22);
  --cal-bday-glow: rgba(38, 170, 190, 0.20);
  --cal-bday-title: #efffff;
}
.np-cal[hidden] { display: none !important; }
.cal-stage {
  position: relative;
  width: 100%; height: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 90% 70% at 20% 30%, rgba(90,40,20,0.45), transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 70%, rgba(20,40,80,0.35), transparent 50%),
    linear-gradient(160deg, #0a0a0a 0%, #121018 40%, #080808 100%);
}
.cal-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.35; pointer-events: none;
}
.cal-pad {
  position: relative; z-index: 1;
  height: 100%;
  /* 2.4.29: outer screen-edge padding matches the middle column gap */
  padding:
    calc(clamp(20px, 3.5vw, 48px) + var(--safe-top))
    calc(clamp(20px, 3vw, 40px) + var(--safe-right))
    calc(clamp(20px, 3.5vw, 48px) + var(--safe-bottom))
    calc(clamp(20px, 3vw, 40px) + var(--safe-left));
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.12fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}
.cal-left {
  display: flex; flex-direction: column; min-height: 0; gap: clamp(36px, 5.5vh, 68px);
  /* Let the month use the left column's size when all-day rows take space. */
  container-type: size;
}
/* ——— Header: time/date LEFT · open weather RIGHT · no title · no frosted pill ——— */
.cal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex: 0 0 auto;
  min-width: 0;
}
.cal-clock-block {
  flex: 1 1 auto;
  min-width: 0;
}
.cal-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: clamp(52px, 8.5vw, 96px); font-weight: 600; letter-spacing: -0.04em;
  line-height: 0.92; color: #fff;
  text-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.cal-ampm {
  margin-left: 0.22em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255,255,255,0.45);
  text-shadow: none;
}
.cal-date {
  margin-top: 0.28em;
  font-size: clamp(15px, 2vw, 22px); font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.cal-dow {
  color: rgba(255,255,255,0.45); font-weight: 500; margin-left: 0.4em; font-size: 0.78em;
}

/* Open typography weather — no frosted container / pill / border */
.weather-open {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  max-width: min(320px, 48%);
  min-width: 0;
  text-align: left;
}
.weather-open[hidden] { display: none !important; }
.weather-open > svg,
.weather-open .wx-icon {
  flex: 0 0 auto;
  width: clamp(34px, 4vw, 44px);
  height: clamp(34px, 4vw, 44px);
  filter: drop-shadow(0 0 8px rgba(245,197,66,0.35));
}
.weather-open .wx-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.1;
}
.weather-open .wx-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}
.weather-open .temp {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.weather-open .cond {
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  font-size: clamp(13px, 1.35vw, 16px);
  white-space: nowrap;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}
.weather-open .wx-hl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 550;
}
.weather-open .wx-hl[hidden] { display: none !important; }
.weather-open .hi {
  color: rgba(245,197,66,0.92);
  font-weight: 650;
}
.weather-open .lo {
  color: rgba(255,255,255,0.48);
  font-weight: 500;
}
.weather-open .sep {
  color: rgba(255,255,255,0.22);
  font-weight: 500;
}
.weather-open .wx-src {
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 550;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 520px) {
  .cal-header-row { flex-wrap: wrap; gap: 12px; }
  .weather-open { max-width: 100%; }
}
/* ——— All-day band (cooler frost) — left, above month; TODAY only ——— */
.cal-allday-band {
  flex: 0 0 auto;
  background:
    linear-gradient(135deg, rgba(120,140,200,0.12) 0%, rgba(90,70,140,0.10) 55%, rgba(70,100,130,0.08) 100%);
  border: 1px solid rgba(160,175,220,0.28);
  border-radius: clamp(14px, 1.6vw, 18px);
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.5vw, 16px);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(200,210,255,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cal-allday-band[hidden] { display: none !important; }
.cal-allday-label {
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(180,195,235,0.85);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: clamp(6px, 0.9vh, 10px);
}
.cal-allday-label::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(160,180,230,0.9);
  box-shadow: 0 0 8px rgba(140,160,220,0.55);
}
.cal-allday-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-allday-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(130,145,200,0.18);
  border: 1px solid rgba(160,175,220,0.18);
  white-space: nowrap;
  overflow: hidden;
}
.cal-allday-line .cal-allday-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(16px, 1.85vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-allday-line .cal-allday-when {
  flex: 0 0 auto;
  font-size: clamp(11px, 1.15vw, 12px);
  font-weight: 600;
  color: rgba(180,195,235,0.62);
  letter-spacing: 0.02em;
}
/* Birthday standout: wash + inset edge use theme --cal-bday-* vars. */
.cal-allday-line.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(255,255,255,0.045) 88%);
  border-color: var(--cal-bday-accent-soft);
  box-shadow:
    inset 4px 0 0 var(--cal-bday-accent),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 22px var(--cal-bday-glow);
}
.cal-allday-line.cal-birthday .cal-allday-when { color: var(--cal-bday-accent); }

/* Keep the month full-width, 4:3, and bottom-aligned with the right column's visible list edge.
   Under vertical pressure it may flex-shrink, but never below 2:1 (height = half
   the left-column width). The container query units keep that floor tied to this
   column instead of the viewport. */
.cal-month-wrap {
  flex: 0 1 auto;
  width: 100%;
  align-self: center;
  aspect-ratio: 4 / 3;
  margin-top: auto;
  max-height: 100cqh;
  min-height: 50cqw;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: clamp(14px, 1.5vw, 20px);
  padding: clamp(12px, 1.8vw, 20px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cal-month-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: clamp(8px, 1.2vh, 14px);
  flex: 0 0 auto;
  gap: 8px;
}
.cal-theme-menu {
  flex: 0 0 auto;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 5px 6px;
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.48);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-theme-menu:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.06); }
.cal-theme-menu:focus { outline: none; }
.cal-theme-menu:focus-visible {
  outline: 2px solid rgba(245, 197, 66, 0.85);
  outline-offset: 2px;
  color: rgba(255,255,255,0.95);
}
.cal-theme-menu-bars,
.cal-theme-menu-bars::before,
.cal-theme-menu-bars::after {
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}
.cal-theme-menu-bars { position: relative; }
.cal-theme-menu-bars::before { position: absolute; left: 0; top: -4.5px; }
.cal-theme-menu-bars::after { position: absolute; left: 0; top: 4.5px; }
.cal-month-title { flex: 1 1 auto; min-width: 0; font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; letter-spacing: 0.04em; }
.cal-month-sub {
  font-size: clamp(10px, 1vw, 12px); color: rgba(255,255,255,0.4);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.cal-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  gap: clamp(2px, 0.5vw, 6px);
}
.cal-dow-h {
  text-align: center; font-size: clamp(9px, 1vw, 11px); font-weight: 700;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
  padding-bottom: 2px; text-transform: uppercase;
}
.cal-day {
  min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: clamp(6px, 0.8vw, 10px);
  font-size: clamp(11px, 1.4vw, 15px); font-weight: 600;
  color: rgba(255,255,255,0.72);
}
.cal-day.mute { color: rgba(255,255,255,0.22); }
.cal-day.today {
  background: rgba(245,197,66,0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(245,197,66,0.7);
}
.cal-day.has::after {
  content: "";
  width: clamp(3px, 0.4vw, 5px); height: clamp(3px, 0.4vw, 5px); border-radius: 50%;
  background: #f5c542;
  margin-top: 2px;
}
.cal-day.today.has::after { background: #fff; }
.cal-right {
  display: flex; flex-direction: column; min-height: 0;
  gap: clamp(12px, 1.8vh, 18px);
}
.cal-next-card {
  flex: 0 0 auto;
  background: rgba(245,197,66,0.12);
  border: 1px solid rgba(245,197,66,0.38);
  border-radius: clamp(16px, 1.8vw, 22px);
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cal-next-label {
  font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.22em; text-transform: uppercase;
  color: #f5c542; font-weight: 700; margin-bottom: 0.55em;
}
.cal-next-title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 600; line-height: 1.1; }
.cal-next-meta {
  margin-top: 0.45em; font-size: clamp(14px, 1.8vw, 20px);
  color: rgba(255,255,255,0.78); font-weight: 500;
}
.cal-next-location,
.cal-next-description { margin-top: 0.18em; }
.np-cal[data-location="off"] .cal-next-location,
.np-cal[data-location="off"] .cal-row-location { display: none; }
.np-cal[data-descriptions="off"] .cal-next-description,
.np-cal[data-descriptions="off"] .cal-row-description { display: none; }
.cal-section-h {
  font-size: clamp(10px, 1.1vw, 12px); letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 700;
  flex: 0 0 auto;
}
.cal-list {
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
}
.cal-row {
  display: grid;
  grid-template-columns: clamp(72px, 8vw, 92px) 1fr;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: start;
  padding: clamp(10px, 1.4vw, 14px);
  border-radius: clamp(10px, 1.2vw, 14px);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.cal-row.soon {
  background: rgba(245,197,66,0.16);
  border-color: rgba(245,197,66,0.28);
}
.cal-when {
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; color: rgba(255,255,255,0.55);
  line-height: 1.35; padding-top: 2px;
}
.cal-row.soon .cal-when { color: #f5c542; }
.cal-row-title { font-size: clamp(15px, 1.7vw, 18px); font-weight: 650; line-height: 1.25; }
.cal-row-sub { margin-top: 3px; font-size: clamp(12px, 1.3vw, 14px); color: rgba(255,255,255,0.48); font-weight: 500; }
.cal-row-location,
.cal-row-description,
.cal-row-duration,
.cal-row-reminder { margin-top: 2px; }
.cal-row-sub > :first-child { margin-top: 0; }
/* Event tiles keep theme decorations visible, but soften them behind the text. */
.cal-allday-line,
.cal-row {
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.cal-row.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(255,255,255,0.035) 91%);
  border-color: var(--cal-bday-accent-soft);
  box-shadow:
    inset 4px 0 0 var(--cal-bday-accent),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 22px var(--cal-bday-glow);
}
.cal-row.cal-birthday .cal-when { color: var(--cal-bday-accent); }

.cal-footer {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.28); font-size: clamp(10px, 1vw, 11px); letter-spacing: 0.08em;
}
.cal-footer[hidden] { display: none !important; }
.cal-empty {
  padding: clamp(10px, 1.4vw, 14px);
  color: rgba(255,255,255,0.45);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
}

.cal-next-card.cal-setup-card {
  background: rgba(245,197,66,0.1);
}
.cal-next-card.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(255,255,255,0.045) 88%);
  border-color: var(--cal-bday-accent-soft);
  box-shadow:
    inset 4px 0 0 var(--cal-bday-accent),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 40px rgba(0,0,0,0.35),
    0 0 26px var(--cal-bday-glow);
}
.cal-next-card.cal-birthday .cal-next-label { color: var(--cal-bday-accent); }
.cal-next-card.cal-birthday .cal-next-title { color: var(--cal-bday-title); }
.cal-setup {
  padding: clamp(4px, 0.6vw, 8px) 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(13px, 1.45vw, 16px);
  font-weight: 500;
  line-height: 1.4;
}
.cal-setup-steps {
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}
.cal-setup-steps li { padding-left: 0.15em; }
.cal-setup-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: #f5c542;
  background: rgba(0,0,0,0.28);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.cal-setup-note {
  margin: clamp(10px, 1.4vh, 14px) 0 0;
  font-size: clamp(12px, 1.25vw, 14px);
  color: rgba(255,255,255,0.42);
  font-weight: 500;
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .cal-pad {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: auto;
  }
  /* Stacked layout only. Do not restore a growing month or a fixed min-height
     that would undo the 4:3, bottom-aligned calendar. */
  .cal-month-wrap {
    flex: 0 1 auto;
    width: 100%;
    align-self: center;
    aspect-ratio: 4 / 3;
    margin-top: auto;
    max-height: 100cqh;
    min-height: 50cqw;
  }
  .weather-open { max-width: none; }
}

/* ==========================================================================
   Calendar themes (v2.2.2). Default keeps the rules above (data-theme=default
   adds nothing). Decorations are .cal-stage::after only — behind .cal-pad,
   low opacity, never a layer over the grid or type. Lobby idle logo is outside
   .np-cal and is not themed.
   ========================================================================== */
.cal-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 0;
}

.np-cal[data-theme="paper"] { color: #1c1915; }
.np-cal[data-theme="paper"] .cal-stage {
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(255,255,255,0.7), transparent 50%),
    linear-gradient(165deg, #f7f3ec 0%, #efe8dc 48%, #e7dfd2 100%);
}
.np-cal[data-theme="paper"] .cal-stage::before { opacity: 0.08; }
.np-cal[data-theme="paper"] .cal-clock { color: #1a1612; text-shadow: none; }
.np-cal[data-theme="paper"] .cal-date { color: rgba(28, 25, 21, 0.72); }
.np-cal[data-theme="paper"] .cal-dow,
.np-cal[data-theme="paper"] .cal-ampm { color: rgba(28, 25, 21, 0.42); }
.np-cal[data-theme="paper"] .weather-open .temp { color: #1a1612; text-shadow: none; }
.np-cal[data-theme="paper"] .weather-open .cond { color: rgba(28, 25, 21, 0.62); }
.np-cal[data-theme="paper"] .weather-open .hi { color: #2f6f74; }
.np-cal[data-theme="paper"] .weather-open .lo,
.np-cal[data-theme="paper"] .weather-open .sep,
.np-cal[data-theme="paper"] .weather-open .wx-src { color: rgba(28, 25, 21, 0.42); }
.np-cal[data-theme="paper"] .cal-allday-band {
  background: rgba(255,255,255,0.72);
  border-color: rgba(28, 25, 21, 0.08);
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.06);
}
.np-cal[data-theme="paper"] .cal-allday-label { color: rgba(47, 111, 116, 0.9); }
.np-cal[data-theme="paper"] .cal-allday-label::before { background: #3d8b90; box-shadow: none; }
.np-cal[data-theme="paper"] .cal-allday-line {
  background: rgba(255,255,255,0.55);
  border-color: rgba(28, 25, 21, 0.06);
}
.np-cal[data-theme="paper"] .cal-allday-line .cal-allday-title { color: #1c1915; }
.np-cal[data-theme="paper"] .cal-allday-line .cal-allday-when { color: rgba(28, 25, 21, 0.45); }
.np-cal[data-theme="paper"] .cal-theme-menu { color: rgba(28, 25, 21, 0.48); }
.np-cal[data-theme="paper"] .cal-theme-menu:hover { color: #1a1612; background: rgba(28, 25, 21, 0.06); }
.np-cal[data-theme="paper"] .cal-theme-menu:focus-visible { color: #1a1612; }
.np-cal[data-theme="paper"] .cal-month-wrap,
.np-cal[data-theme="paper"] .cal-row {
  background: rgba(255,255,255,0.78);
  border-color: rgba(28, 25, 21, 0.06);
}
.np-cal[data-theme="paper"] .cal-month-title { color: #1c1915; }
.np-cal[data-theme="paper"] .cal-month-sub,
.np-cal[data-theme="paper"] .cal-dow-h,
.np-cal[data-theme="paper"] .cal-section-h,
.np-cal[data-theme="paper"] .cal-footer { color: rgba(28, 25, 21, 0.42); }
.np-cal[data-theme="paper"] .cal-day { color: rgba(28, 25, 21, 0.78); }
.np-cal[data-theme="paper"] .cal-day.mute { color: rgba(28, 25, 21, 0.28); }
.np-cal[data-theme="paper"] .cal-day.today {
  background: rgba(61, 139, 144, 0.16);
  color: #14383b;
  box-shadow: inset 0 0 0 1.5px rgba(61, 139, 144, 0.85);
}
.np-cal[data-theme="paper"] .cal-day.has::after { background: #3d8b90; }
.np-cal[data-theme="paper"] .cal-day.today.has::after { background: #1f5c60; }
.np-cal[data-theme="paper"] .cal-next-card {
  background: #d7e6de;
  border-color: rgba(47, 90, 78, 0.18);
  box-shadow: 0 10px 28px rgba(60, 40, 20, 0.06);
}
.np-cal[data-theme="paper"] .cal-next-label { color: #2f6f74; }
.np-cal[data-theme="paper"] .cal-next-title { color: #1c1915; }
.np-cal[data-theme="paper"] .cal-next-meta,
.np-cal[data-theme="paper"] .cal-row-sub,
.np-cal[data-theme="paper"] .cal-when,
.np-cal[data-theme="paper"] .cal-empty,
.np-cal[data-theme="paper"] .cal-setup { color: rgba(28, 25, 21, 0.62); }
.np-cal[data-theme="paper"] .cal-row-title { color: #1c1915; }
.np-cal[data-theme="paper"] .cal-row.soon {
  background: rgba(215, 230, 222, 0.95);
  border-color: rgba(47, 111, 116, 0.28);
}
.np-cal[data-theme="paper"] .cal-row.soon .cal-when { color: #2f6f74; }
.np-cal[data-theme="paper"] .cal-setup-steps code { color: #1f5c60; background: rgba(255,255,255,0.7); }
.np-cal[data-theme="paper"] .cal-setup-note { color: rgba(28, 25, 21, 0.45); }

/* 2.4.47 — Dark: dark-mode Paper. Same rules/metrics as Paper; colors only (warm near-black paper, soft off-white text, muted teal accent). */
.np-cal[data-theme="dark"] { color: #e4e8ee; }
.np-cal[data-theme="dark"] .cal-stage {
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(200,215,240,0.07), transparent 50%),
    linear-gradient(165deg, #17191d 0%, #131518 48%, #0f1114 100%);
}
.np-cal[data-theme="dark"] .cal-stage::before { opacity: 0.08; }
.np-cal[data-theme="dark"] .cal-clock { color: #eef1f5; text-shadow: none; }
.np-cal[data-theme="dark"] .cal-date { color: rgba(228, 232, 238, 0.78); }
.np-cal[data-theme="dark"] .cal-dow,
.np-cal[data-theme="dark"] .cal-ampm { color: rgba(228, 232, 238, 0.56); }
.np-cal[data-theme="dark"] .weather-open .temp { color: #eef1f5; text-shadow: none; }
.np-cal[data-theme="dark"] .weather-open .cond { color: rgba(228, 232, 238, 0.72); }
.np-cal[data-theme="dark"] .weather-open .hi { color: #8CA9D8; }
.np-cal[data-theme="dark"] .weather-open .lo,
.np-cal[data-theme="dark"] .weather-open .sep,
.np-cal[data-theme="dark"] .weather-open .wx-src { color: rgba(228, 232, 238, 0.56); }
.np-cal[data-theme="dark"] .cal-allday-band {
  background: rgba(200, 215, 240, 0.06);
  border-color: rgba(228, 232, 238, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.np-cal[data-theme="dark"] .cal-allday-label { color: rgba(140, 169, 216, 0.95); }
.np-cal[data-theme="dark"] .cal-allday-label::before { background: #5B7DB1; box-shadow: none; }
.np-cal[data-theme="dark"] .cal-allday-line {
  background: rgba(200, 215, 240, 0.05);
  border-color: rgba(228, 232, 238, 0.08);
}
.np-cal[data-theme="dark"] .cal-allday-line .cal-allday-title { color: #e4e8ee; }
.np-cal[data-theme="dark"] .cal-allday-line .cal-allday-when { color: rgba(228, 232, 238, 0.70); }
.np-cal[data-theme="dark"] .cal-theme-menu { color: rgba(228, 232, 238, 0.6); }
.np-cal[data-theme="dark"] .cal-theme-menu:hover { color: #eef1f5; background: rgba(228, 232, 238, 0.10); }
.np-cal[data-theme="dark"] .cal-theme-menu:focus-visible { color: #eef1f5; }
.np-cal[data-theme="dark"] .cal-month-wrap,
.np-cal[data-theme="dark"] .cal-row {
  background: rgba(200, 215, 240, 0.06);
  border-color: rgba(228, 232, 238, 0.09);
}
.np-cal[data-theme="dark"] .cal-month-title { color: #e4e8ee; }
.np-cal[data-theme="dark"] .cal-month-sub,
.np-cal[data-theme="dark"] .cal-dow-h,
.np-cal[data-theme="dark"] .cal-section-h,
.np-cal[data-theme="dark"] .cal-footer { color: rgba(228, 232, 238, 0.56); }
.np-cal[data-theme="dark"] .cal-day { color: rgba(228, 232, 238, 0.84); }
.np-cal[data-theme="dark"] .cal-day.mute { color: rgba(228, 232, 238, 0.55); }
.np-cal[data-theme="dark"] .cal-day.today {
  background: rgba(91, 125, 177, 0.20);
  color: #eef4fc;
  box-shadow: inset 0 0 0 1.5px rgba(91, 125, 177, 0.85);
}
.np-cal[data-theme="dark"] .cal-day.has::after { background: #5B7DB1; }
.np-cal[data-theme="dark"] .cal-day.today.has::after { background: #B3C8E8; }
.np-cal[data-theme="dark"] .cal-next-card {
  background: #1f2733;
  border-color: rgba(140, 169, 216, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.np-cal[data-theme="dark"] .cal-next-label { color: #8CA9D8; }
.np-cal[data-theme="dark"] .cal-next-title { color: #e4e8ee; }
.np-cal[data-theme="dark"] .cal-next-meta,
.np-cal[data-theme="dark"] .cal-row-sub,
.np-cal[data-theme="dark"] .cal-when,
.np-cal[data-theme="dark"] .cal-empty,
.np-cal[data-theme="dark"] .cal-setup { color: rgba(228, 232, 238, 0.72); }
.np-cal[data-theme="dark"] .cal-row-title { color: #e4e8ee; }
.np-cal[data-theme="dark"] .cal-row.soon {
  background: rgba(33, 45, 64, 0.95);
  border-color: rgba(140, 169, 216, 0.32);
}
.np-cal[data-theme="dark"] .cal-row.soon .cal-when { color: #8CA9D8; }
.np-cal[data-theme="dark"] .cal-setup-steps code { color: #B3C8E8; background: rgba(200, 215, 240, 0.08); }
.np-cal[data-theme="dark"] .cal-setup-note { color: rgba(228, 232, 238, 0.58); }

/* 2.4.51 — Dark: birthday highlight (warm amber vs the blue). The generic .cal-birthday rules lose to the Dark card/row rules above, so restate them here. Paint only. */
.np-cal[data-theme="dark"] .cal-next-card.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(255,255,255,0.045) 88%), #1f2733;
  border-color: var(--cal-bday-accent-soft);
  box-shadow:
    inset 4px 0 0 var(--cal-bday-accent),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.32),
    0 0 26px var(--cal-bday-glow);
}
.np-cal[data-theme="dark"] .cal-next-card.cal-birthday .cal-next-label { color: var(--cal-bday-accent); }
.np-cal[data-theme="dark"] .cal-next-card.cal-birthday .cal-next-title { color: var(--cal-bday-title); }
.np-cal[data-theme="dark"] .cal-row.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(200,215,240,0.06) 91%);
  border-color: var(--cal-bday-accent-soft);
}
.np-cal[data-theme="dark"] .cal-row.cal-birthday .cal-when { color: var(--cal-bday-accent); }
.np-cal[data-theme="dark"] .cal-allday-line.cal-birthday {
  background: linear-gradient(100deg, var(--cal-bday-wash), rgba(200,215,240,0.05) 88%);
  border-color: var(--cal-bday-accent-soft);
}
.np-cal[data-theme="dark"] .cal-allday-line.cal-birthday .cal-allday-when { color: var(--cal-bday-accent); }

.np-cal[data-theme="fall"] .cal-stage {
  background:
    radial-gradient(ellipse 70% 55% at 18% 20%, rgba(120, 62, 24, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(60, 28, 10, 0.5), transparent 50%),
    linear-gradient(165deg, #3a2418 0%, #2a1810 42%, #1a0e09 100%);
}
.np-cal[data-theme="fall"] .cal-stage::after {
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='%23c4783a'%3E%3Cellipse cx='360' cy='90' rx='22' ry='11' transform='rotate(-28 360 90)'/%3E%3Cellipse cx='410' cy='160' rx='18' ry='9' transform='rotate(20 410 160)'/%3E%3Cellipse cx='300' cy='200' rx='16' ry='8' transform='rotate(-50 300 200)'/%3E%3Cellipse cx='390' cy='280' rx='26' ry='12' transform='rotate(12 390 280)'/%3E%3Cellipse cx='250' cy='340' rx='20' ry='10' transform='rotate(-18 250 340)'/%3E%3Cellipse cx='430' cy='380' rx='18' ry='9' transform='rotate(40 430 380)'/%3E%3C/g%3E%3Cpath d='M40 430 C120 400 200 420 280 390' fill='none' stroke='%23a86830' stroke-width='2' opacity='0.8'/%3E%3C/svg%3E");
  background-size: min(52vw, 560px);
}
.np-cal[data-theme="fall"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(120, 72, 32, 0.28), rgba(60, 32, 16, 0.2));
  border-color: rgba(224, 161, 90, 0.28);
}
.np-cal[data-theme="fall"] .cal-allday-label { color: rgba(224, 176, 120, 0.9); }
.np-cal[data-theme="fall"] .cal-allday-label::before { background: #e0a15a; box-shadow: 0 0 8px rgba(224, 161, 90, 0.45); }
.np-cal[data-theme="fall"] .cal-allday-line { background: rgba(90, 50, 24, 0.28); border-color: rgba(224, 161, 90, 0.16); }
.np-cal[data-theme="fall"] .cal-allday-line .cal-allday-when { color: rgba(224, 176, 120, 0.7); }
.np-cal[data-theme="fall"] .cal-month-wrap { background: rgba(42, 24, 14, 0.55); border-color: rgba(224, 161, 90, 0.16); }
.np-cal[data-theme="fall"] .cal-day.today { background: rgba(224, 161, 90, 0.2); box-shadow: inset 0 0 0 1.5px rgba(224, 161, 90, 0.75); }
.np-cal[data-theme="fall"] .cal-day.has::after { background: #e0a15a; }
.np-cal[data-theme="fall"] .cal-next-card { background: rgba(120, 68, 28, 0.28); border-color: rgba(224, 161, 90, 0.4); }
.np-cal[data-theme="fall"] .cal-next-label,
.np-cal[data-theme="fall"] .cal-row.soon .cal-when { color: #e0a15a; }
.np-cal[data-theme="fall"] .cal-row { background: rgba(255, 236, 210, 0.04); border-color: rgba(224, 161, 90, 0.12); }
.np-cal[data-theme="fall"] .cal-row.soon { background: rgba(224, 161, 90, 0.1); border-color: rgba(224, 161, 90, 0.28); }
.np-cal[data-theme="fall"] .cal-setup-steps code { color: #e0a15a; }

.np-cal[data-theme="spring"] .cal-stage {
  background:
    radial-gradient(ellipse 70% 50% at 15% 18%, rgba(80, 140, 90, 0.28), transparent 55%),
    radial-gradient(ellipse 40% 40% at 88% 78%, rgba(180, 140, 170, 0.12), transparent 50%),
    linear-gradient(165deg, #16382f 0%, #102c26 50%, #0c221e 100%);
}
.np-cal[data-theme="spring"] .cal-stage::after {
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%238fbf7a' stroke-width='2'%3E%3Cpath d='M340 460 C348 360 330 300 360 220'/%3E%3Cpath d='M360 300 C400 280 420 250 410 210'/%3E%3Cpath d='M352 340 C300 320 280 280 300 240'/%3E%3C/g%3E%3Ccircle cx='360' cy='210' r='7' fill='%23d6e27a'/%3E%3Ccircle cx='414' cy='200' r='6' fill='%23d7b4c8'/%3E%3Ccircle cx='292' cy='232' r='5' fill='%23c9d48a'/%3E%3Ccircle cx='250' cy='160' r='4' fill='%23d7b4c8' opacity='0.8'/%3E%3Ccircle cx='430' cy='120' r='3' fill='%23d6e27a'/%3E%3C/svg%3E");
  background-size: min(48vw, 520px);
}
.np-cal[data-theme="spring"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(90, 150, 110, 0.18), rgba(20, 50, 40, 0.2));
  border-color: rgba(180, 210, 120, 0.28);
}
.np-cal[data-theme="spring"] .cal-allday-label { color: rgba(214, 226, 122, 0.9); }
.np-cal[data-theme="spring"] .cal-allday-label::before { background: #d6e27a; box-shadow: 0 0 8px rgba(214, 226, 122, 0.4); }
.np-cal[data-theme="spring"] .cal-allday-line { background: rgba(80, 140, 90, 0.12); border-color: rgba(180, 210, 120, 0.16); }
.np-cal[data-theme="spring"] .cal-month-wrap { background: rgba(12, 40, 34, 0.45); border-color: rgba(180, 210, 140, 0.16); }
.np-cal[data-theme="spring"] .cal-day.today { background: rgba(214, 226, 122, 0.16); box-shadow: inset 0 0 0 1.5px rgba(214, 226, 122, 0.7); }
.np-cal[data-theme="spring"] .cal-day.has::after { background: #d6e27a; }
.np-cal[data-theme="spring"] .cal-next-card { background: rgba(80, 140, 100, 0.2); border-color: rgba(214, 226, 122, 0.35); }
.np-cal[data-theme="spring"] .cal-next-label,
.np-cal[data-theme="spring"] .cal-row.soon .cal-when { color: #d6e27a; }
.np-cal[data-theme="spring"] .cal-row.soon { background: rgba(214, 226, 122, 0.1); border-color: rgba(214, 226, 122, 0.28); }
.np-cal[data-theme="spring"] .cal-setup-steps code { color: #d6e27a; }

.np-cal[data-theme="summer"] .cal-stage {
  background:
    radial-gradient(ellipse 55% 45% at 82% 18%, rgba(240, 193, 74, 0.16), transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(30, 80, 160, 0.35), transparent 60%),
    linear-gradient(180deg, #12315f 0%, #0a244c 55%, #071a38 100%);
}
.np-cal[data-theme="summer"] .cal-stage::after {
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Ccircle cx='390' cy='120' r='36' fill='%23f0c14a'/%3E%3Cg stroke='%23f0c14a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M390 62 V78 M390 162 V178 M332 120 H348 M432 120 H448 M350 80 L362 92 M418 148 L430 160 M350 160 L362 148 M418 92 L430 80'/%3E%3C/g%3E%3Cpath d='M20 400 C80 380 120 410 180 392 C240 374 280 400 340 386 C400 372 440 390 480 376' fill='none' stroke='%237eb0e0' stroke-width='3' opacity='0.7'/%3E%3Cpath d='M0 430 C70 410 130 440 200 422 C270 404 330 428 400 414' fill='none' stroke='%237eb0e0' stroke-width='2' opacity='0.45'/%3E%3C/svg%3E");
  background-size: min(56vw, 600px);
}
.np-cal[data-theme="summer"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(40, 90, 170, 0.28), rgba(10, 30, 70, 0.25));
  border-color: rgba(126, 176, 224, 0.28);
}
.np-cal[data-theme="summer"] .cal-allday-label { color: rgba(180, 210, 245, 0.9); }
.np-cal[data-theme="summer"] .cal-allday-label::before { background: #f0c14a; box-shadow: 0 0 8px rgba(240, 193, 74, 0.45); }
.np-cal[data-theme="summer"] .cal-allday-line { background: rgba(30, 70, 140, 0.22); border-color: rgba(126, 176, 224, 0.16); }
.np-cal[data-theme="summer"] .cal-month-wrap { background: rgba(8, 28, 64, 0.45); border-color: rgba(126, 176, 224, 0.16); }
.np-cal[data-theme="summer"] .cal-day.today { background: rgba(240, 193, 74, 0.18); box-shadow: inset 0 0 0 1.5px rgba(240, 193, 74, 0.75); }
.np-cal[data-theme="summer"] .cal-day.has::after { background: #f0c14a; }
.np-cal[data-theme="summer"] .cal-next-card { background: rgba(30, 70, 150, 0.32); border-color: rgba(126, 176, 224, 0.35); }
.np-cal[data-theme="summer"] .cal-next-label,
.np-cal[data-theme="summer"] .cal-row.soon .cal-when { color: #f0c14a; }
.np-cal[data-theme="summer"] .cal-row.soon { background: rgba(240, 193, 74, 0.1); border-color: rgba(240, 193, 74, 0.28); }
.np-cal[data-theme="summer"] .cal-setup-steps code { color: #f0c14a; }

.np-cal[data-theme="halloween"] .cal-stage {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(90, 40, 140, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(180, 80, 20, 0.22), transparent 50%),
    linear-gradient(165deg, #1c1018 0%, #140c12 50%, #0c080c 100%);
}
.np-cal[data-theme="halloween"] .cal-stage::after {
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22gh%22%20cx%3D%2250%25%22%20cy%3D%2230%25%22%20r%3D%2270%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff6e4%22%20stop-opacity%3D%220.58%22%2F%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23e8d6b0%22%20stop-opacity%3D%220.24%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c8b890%22%20stop-opacity%3D%220.06%22%2F%3E%20%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeGaussianBlur%20stdDeviation%3D%221.1%22%2F%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20opacity%3D%220.9%22%20filter%3D%22url%28%23soft%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M118%2048c-32%200-54%2026-54%2058v88c0%2010%208%2014%2014%208%207-7%2014%201%2014%2010s9%2012%2015%205c6-7%2015-1%2015%208%200%209%2010%2011%2016%204%206-7%2014-2%2014%207v-130c0-32-22-58-34-58z%22%2F%3E%20%3Cellipse%20cx%3D%22100%22%20cy%3D%2292%22%20rx%3D%225.5%22%20ry%3D%228%22%20fill%3D%22%231a1018%22%20opacity%3D%220.4%22%2F%3E%20%3Cellipse%20cx%3D%22132%22%20cy%3D%2292%22%20rx%3D%225.5%22%20ry%3D%228%22%20fill%3D%22%231a1018%22%20opacity%3D%220.4%22%2F%3E%20%3Cellipse%20cx%3D%22116%22%20cy%3D%22112%22%20rx%3D%227%22%20ry%3D%224%22%20fill%3D%22%231a1018%22%20opacity%3D%220.22%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.72%22%20transform%3D%22translate%2840%20110%29%20scale%280.72%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M210%2040c-36%200-60%2028-60%2064v102c0%2011%209%2015%2016%208%208-8%2016%202%2016%2011s10%2013%2017%205c7-8%2017-1%2017%209%200%2010%2011%2012%2018%204%207-8%2016-2%2016%208V104c0-36-24-64-40-64z%22%2F%3E%20%3Cellipse%20cx%3D%22188%22%20cy%3D%2292%22%20rx%3D%226%22%20ry%3D%229%22%20fill%3D%22%231a1018%22%20opacity%3D%220.38%22%2F%3E%20%3Cellipse%20cx%3D%22224%22%20cy%3D%2292%22%20rx%3D%226%22%20ry%3D%229%22%20fill%3D%22%231a1018%22%20opacity%3D%220.38%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.58%22%20transform%3D%22translate%28280%2090%29%20scale%280.55%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M200%2030c-30%200-52%2024-52%2054v90c0%209%207%2013%2013%207%207-7%2013%202%2013%2010s8%2011%2014%204c6-7%2014%200%2014%208%200%208%209%2010%2015%203%206-7%2013-1%2013%207V84c0-30-20-54-30-54z%22%2F%3E%20%3Cellipse%20cx%3D%22180%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.65%22%20transform%3D%22translate%28380%20200%29%20scale%280.85%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M200%2030c-34%200-58%2026-58%2060v108c0%2011%209%2015%2016%208%208-8%2015%202%2015%2011s10%2013%2017%205c7-8%2016-1%2016%209%200%2010%2011%2012%2018%204%207-8%2015-2%2015%208V90c0-34-24-60-39-60z%22%2F%3E%20%3Cellipse%20cx%3D%22178%22%20cy%3D%2288%22%20rx%3D%226%22%20ry%3D%229%22%20fill%3D%22%231a1018%22%20opacity%3D%220.38%22%2F%3E%20%3Cellipse%20cx%3D%22214%22%20cy%3D%2288%22%20rx%3D%226%22%20ry%3D%229%22%20fill%3D%22%231a1018%22%20opacity%3D%220.38%22%2F%3E%20%3Cellipse%20cx%3D%22196%22%20cy%3D%22110%22%20rx%3D%228%22%20ry%3D%224%22%20fill%3D%22%231a1018%22%20opacity%3D%220.2%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.5%22%20transform%3D%22translate%28460%20320%29%20scale%280.62%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M200%2030c-30%200-52%2024-52%2054v90c0%209%207%2013%2013%207%207-7%2013%202%2013%2010s8%2011%2014%204c6-7%2014%200%2014%208%200%208%209%2010%2015%203%206-7%2013-1%2013%207V84c0-30-20-54-30-54z%22%2F%3E%20%3Cellipse%20cx%3D%22180%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.45%22%20transform%3D%22translate%28300%20380%29%20scale%280.48%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M200%2030c-30%200-52%2024-52%2054v90c0%209%207%2013%2013%207%207-7%2013%202%2013%2010s8%2011%2014%204c6-7%2014%200%2014%208%200%208%209%2010%2015%203%206-7%2013-1%2013%207V84c0-30-20-54-30-54z%22%2F%3E%20%3Cellipse%20cx%3D%22180%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20opacity%3D%220.4%22%20transform%3D%22translate%28520%20140%29%20scale%280.4%29%22%3E%20%3Cpath%20fill%3D%22url%28%23gh%29%22%20d%3D%22M200%2030c-30%200-52%2024-52%2054v90c0%209%207%2013%2013%207%207-7%2013%202%2013%2010s8%2011%2014%204c6-7%2014%200%2014%208%200%208%209%2010%2015%203%206-7%2013-1%2013%207V84c0-30-20-54-30-54z%22%2F%3E%20%3Cellipse%20cx%3D%22180%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%2278%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%231a1018%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  background-size: min(62vw, 640px);
  background-position: right 2% bottom 1%;
}
.np-cal[data-theme="halloween"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(90, 40, 140, 0.38), rgba(40, 16, 50, 0.3));
  border-color: rgba(180, 120, 220, 0.35);
}
.np-cal[data-theme="halloween"] .cal-allday-label { color: rgba(210, 170, 245, 0.9); }
.np-cal[data-theme="halloween"] .cal-allday-label::before { background: #c084f5; box-shadow: 0 0 8px rgba(192, 132, 245, 0.45); }
.np-cal[data-theme="halloween"] .cal-allday-line { background: rgba(70, 30, 110, 0.28); border-color: rgba(180, 120, 220, 0.2); }
.np-cal[data-theme="halloween"] .cal-allday-line .cal-allday-when { color: rgba(210, 180, 245, 0.7); }
.np-cal[data-theme="halloween"] .cal-month-wrap { background: rgba(20, 10, 18, 0.55); border-color: rgba(232, 137, 58, 0.2); }
.np-cal[data-theme="halloween"] .cal-day.today { background: rgba(232, 137, 58, 0.22); box-shadow: inset 0 0 0 1.5px rgba(232, 137, 58, 0.8); }
.np-cal[data-theme="halloween"] .cal-day.has::after { background: #e8893a; }
.np-cal[data-theme="halloween"] .cal-next-card { background: rgba(140, 70, 24, 0.32); border-color: rgba(232, 137, 58, 0.45); }
.np-cal[data-theme="halloween"] .cal-next-label,
.np-cal[data-theme="halloween"] .cal-row.soon .cal-when { color: #e8893a; }
.np-cal[data-theme="halloween"] .cal-row { background: rgba(255, 160, 60, 0.12); border-color: rgba(232, 137, 58, 0.12); }
.np-cal[data-theme="halloween"] .cal-row.soon { background: rgba(232, 137, 58, 0.12); border-color: rgba(232, 137, 58, 0.3); }
.np-cal[data-theme="halloween"] .cal-setup-steps code { color: #e8893a; }

.np-cal[data-theme="christmas"] .cal-stage {
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(140, 30, 30, 0.28), transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(20, 80, 40, 0.35), transparent 55%),
    linear-gradient(165deg, #143028 0%, #0e241a 48%, #081610 100%);
}
.np-cal[data-theme="christmas"] .cal-stage::after {
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22tg%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234caf6a%22%2F%3E%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%232f8a4a%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231a5c32%22%2F%3E%20%3C%2FlinearGradient%3E%20%3CradialGradient%20id%3D%22star%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff4c0%22%2F%3E%20%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23f0c14a%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c49220%22%20stop-opacity%3D%220.2%22%2F%3E%20%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%22glow%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.4%22%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3C%21--%20soft%20snow%20--%3E%20%3Cg%20fill%3D%22%23fff%22%20opacity%3D%220.55%22%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2250%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%2290%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%2240%22%20r%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%22240%22%20cy%3D%22110%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22160%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%2270%22%20r%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22200%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22180%22%20r%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%2230%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22130%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22250%22%20r%3D%221.3%22%2F%3E%20%3C%2Fg%3E%20%3C%21--%20tree%20trunk%20--%3E%20%3Crect%20x%3D%22454%22%20y%3D%22520%22%20width%3D%2222%22%20height%3D%2248%22%20rx%3D%223%22%20fill%3D%22%236b4423%22%2F%3E%20%3Crect%20x%3D%22450%22%20y%3D%22558%22%20width%3D%2230%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%235a3818%22%20opacity%3D%220.7%22%2F%3E%20%3C%21--%20layered%20boughs%20--%3E%20%3Cpath%20fill%3D%22url%28%23tg%29%22%20d%3D%22M465%20220%20L380%20340%20L550%20340%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%23287848%22%20opacity%3D%220.55%22%20d%3D%22M465%20250%20L400%20340%20L530%20340%20Z%22%2F%3E%20%3Cpath%20fill%3D%22url%28%23tg%29%22%20d%3D%22M465%20280%20L355%20410%20L575%20410%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%231f6b3a%22%20opacity%3D%220.45%22%20d%3D%22M465%20310%20L385%20410%20L545%20410%20Z%22%2F%3E%20%3Cpath%20fill%3D%22url%28%23tg%29%22%20d%3D%22M465%20360%20L330%20500%20L600%20500%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%23246f40%22%20opacity%3D%220.4%22%20d%3D%22M465%20390%20L360%20500%20L570%20500%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%231a5c32%22%20d%3D%22M465%20430%20L310%20545%20L620%20545%20Z%22%2F%3E%20%3C%21--%20garland%20hint%20--%3E%20%3Cpath%20d%3D%22M400%20360%20Q465%20375%20530%20360%22%20stroke%3D%22%23c73a3a%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20opacity%3D%220.55%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M375%20430%20Q465%20450%20555%20430%22%20stroke%3D%22%23c73a3a%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M350%20490%20Q465%20512%20580%20490%22%20stroke%3D%22%23c73a3a%22%20stroke-width%3D%223.4%22%20fill%3D%22none%22%20opacity%3D%220.45%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%21--%20ornaments%20--%3E%20%3Ccircle%20cx%3D%22420%22%20cy%3D%22355%22%20r%3D%227%22%20fill%3D%22%23c73a3a%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22355%22%20r%3D%223%22%20fill%3D%22%23ff8a8a%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22510%22%20cy%3D%22370%22%20r%3D%226.5%22%20fill%3D%22%23f0c14a%22%2F%3E%3Ccircle%20cx%3D%22510%22%20cy%3D%22370%22%20r%3D%222.5%22%20fill%3D%22%23fff4c0%22%20opacity%3D%220.55%22%2F%3E%20%3Ccircle%20cx%3D%22440%22%20cy%3D%22430%22%20r%3D%227%22%20fill%3D%22%235ec4ff%22%20opacity%3D%220.9%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22430%22%20r%3D%222.5%22%20fill%3D%22%23dff4ff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22500%22%20cy%3D%22450%22%20r%3D%226%22%20fill%3D%22%23c73a3a%22%2F%3E%20%3Ccircle%20cx%3D%22390%22%20cy%3D%22480%22%20r%3D%227%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Ccircle%20cx%3D%22545%22%20cy%3D%22475%22%20r%3D%226.5%22%20fill%3D%22%23e8e8ff%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%22465%22%20cy%3D%22400%22%20r%3D%225%22%20fill%3D%22%23ff6b6b%22%2F%3E%20%3C%21--%20star%20--%3E%20%3Cg%20transform%3D%22translate%28465%20198%29%22%20filter%3D%22url%28%23glow%29%22%3E%20%3Cpath%20fill%3D%22url%28%23star%29%22%20d%3D%22M0-16%20L4-4%20L16-4%20L6%204%20L10%2016%20L0%208%20L-10%2016%20L-6%204%20L-16-4%20L-4-4%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%21--%20small%20gifts%20--%3E%20%3Cg%20transform%3D%22translate%28330%20530%29%22%3E%20%3Crect%20width%3D%2236%22%20height%3D%2228%22%20rx%3D%222%22%20fill%3D%22%23c73a3a%22%2F%3E%20%3Crect%20x%3D%2215%22%20width%3D%226%22%20height%3D%2228%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Crect%20y%3D%2211%22%20width%3D%2236%22%20height%3D%226%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%28540%20540%29%22%3E%20%3Crect%20width%3D%2228%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%232f6b9a%22%2F%3E%20%3Crect%20x%3D%2211%22%20width%3D%225%22%20height%3D%2222%22%20fill%3D%22%23d4b15a%22%2F%3E%20%3Crect%20y%3D%228%22%20width%3D%2228%22%20height%3D%225%22%20fill%3D%22%23d4b15a%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  background-size: min(58vw, 620px);
  background-position: right 1% bottom 0%;
}
.np-cal[data-theme="christmas"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(30, 90, 50, 0.32), rgba(12, 40, 24, 0.28));
  border-color: rgba(80, 160, 90, 0.3);
}
.np-cal[data-theme="christmas"] .cal-allday-label { color: rgba(160, 210, 160, 0.92); }
.np-cal[data-theme="christmas"] .cal-allday-label::before { background: #3d9a55; box-shadow: 0 0 8px rgba(61, 154, 85, 0.45); }
.np-cal[data-theme="christmas"] .cal-allday-line { background: rgba(20, 70, 40, 0.28); border-color: rgba(80, 160, 90, 0.18); }
.np-cal[data-theme="christmas"] .cal-month-wrap { background: rgba(8, 28, 18, 0.5); border-color: rgba(212, 177, 90, 0.16); }
.np-cal[data-theme="christmas"] .cal-day.today { background: rgba(150, 40, 40, 0.35); box-shadow: inset 0 0 0 1.5px rgba(196, 70, 70, 0.8); }
.np-cal[data-theme="christmas"] .cal-day.has::after { background: #d4b15a; }
.np-cal[data-theme="christmas"] .cal-next-card { background: rgba(20, 70, 40, 0.4); border-color: rgba(212, 177, 90, 0.4); }
.np-cal[data-theme="christmas"] .cal-next-card {
  position: relative;
  overflow: visible;
}
.np-cal[data-theme="christmas"] .cal-next-card::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -8px;
  width: clamp(44px, 6.5vw, 64px);
  height: clamp(44px, 6.5vw, 64px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22berry%22%20cx%3D%2235%25%22%20cy%3D%2235%25%22%20r%3D%2265%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff6b6b%22%2F%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23c73a3a%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238a2020%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3C%21--%20leaves%20--%3E%20%3Cg%3E%20%3Cpath%20fill%3D%22%232f8a4a%22%20d%3D%22M48%2052%20C28%2048%2012%2028%2018%2016%20C30%2022%2042%2036%2048%2052%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%23246f40%22%20d%3D%22M48%2052%20C36%2034%2040%2012%2054%208%20C54%2024%2052%2040%2048%2052%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%233d9a55%22%20d%3D%22M48%2052%20C68%2046%2086%2028%2080%2014%20C66%2022%2054%2038%2048%2052%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%231f6b3a%22%20d%3D%22M48%2052%20C62%2036%2070%2014%2058%206%20C52%2020%2050%2038%2048%2052%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%23287848%22%20d%3D%22M48%2052%20C42%2070%2022%2082%2012%2074%20C24%2064%2038%2058%2048%2052%20Z%22%2F%3E%20%3Cpath%20fill%3D%22%232f8a4a%22%20d%3D%22M48%2052%20C58%2070%2078%2080%2088%2070%20C74%2064%2058%2056%2048%2052%20Z%22%2F%3E%20%3C%21--%20leaf%20veins%20--%3E%20%3Cpath%20d%3D%22M48%2052%20L22%2022%22%20stroke%3D%22%231a5c32%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.45%22%2F%3E%20%3Cpath%20d%3D%22M48%2052%20L54%2012%22%20stroke%3D%22%231a5c32%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.4%22%2F%3E%20%3Cpath%20d%3D%22M48%2052%20L78%2022%22%20stroke%3D%22%231a5c32%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.4%22%2F%3E%20%3C%2Fg%3E%20%3C%21--%20berries%20--%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%2248%22%20r%3D%227%22%20fill%3D%22url%28%23berry%29%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%2246%22%20r%3D%226.5%22%20fill%3D%22url%28%23berry%29%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2256%22%20r%3D%226%22%20fill%3D%22url%28%23berry%29%22%2F%3E%20%3Ccircle%20cx%3D%2242%22%20cy%3D%2245%22%20r%3D%222%22%20fill%3D%22%23ffb0b0%22%20opacity%3D%220.45%22%2F%3E%20%3Ccircle%20cx%3D%2254%22%20cy%3D%2243%22%20r%3D%221.8%22%20fill%3D%22%23ffb0b0%22%20opacity%3D%220.4%22%2F%3E%20%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.np-cal[data-theme="christmas"] .cal-next-label,
.np-cal[data-theme="christmas"] .cal-row.soon .cal-when { color: #d4b15a; }
.np-cal[data-theme="christmas"] .cal-row.soon { background: rgba(212, 177, 90, 0.1); border-color: rgba(212, 177, 90, 0.28); }
.np-cal[data-theme="christmas"] .cal-setup-steps code { color: #d4b15a; }


.np-cal[data-theme="winter"] .cal-stage {
  background:
    radial-gradient(ellipse 55% 42% at 8% 0%, rgba(197, 224, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 48% at 88% 100%, rgba(80, 130, 180, 0.34), transparent 58%),
    linear-gradient(168deg, #2a4460 0%, #1a2838 46%, #101820 100%);
}
.np-cal[data-theme="winter"] .cal-stage::after {
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22sf%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22640%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.16%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.08%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.32%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.38%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.48%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.78%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.62%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3Cmask%20id%3D%22sm%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22640%22%20height%3D%22640%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22url%28%23sf%29%22%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20fill%3D%22%23eef6ff%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2248%22%20cy%3D%2236%22%20r%3D%222.2%22%20opacity%3D%220.85%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2288%22%20r%3D%221.6%22%20opacity%3D%220.7%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%22150%22%20r%3D%222.4%22%20opacity%3D%220.55%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%2246%22%20r%3D%221.4%22%20opacity%3D%220.75%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22230%22%20cy%3D%22120%22%20r%3D%222%22%20opacity%3D%220.5%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22300%22%20cy%3D%2264%22%20r%3D%221.5%22%20opacity%3D%220.65%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22360%22%20cy%3D%2228%22%20r%3D%222.1%22%20opacity%3D%220.8%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22410%22%20cy%3D%2296%22%20r%3D%221.3%22%20opacity%3D%220.55%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22470%22%20cy%3D%2252%22%20r%3D%221.8%22%20opacity%3D%220.7%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22540%22%20cy%3D%2230%22%20r%3D%222.3%22%20opacity%3D%220.85%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22590%22%20cy%3D%22110%22%20r%3D%221.5%22%20opacity%3D%220.6%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22210%22%20r%3D%221.2%22%20opacity%3D%220.4%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22260%22%20cy%3D%22180%22%20r%3D%221.7%22%20opacity%3D%220.45%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22520%22%20cy%3D%22170%22%20r%3D%221.4%22%20opacity%3D%220.4%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22250%22%20r%3D%221.1%22%20opacity%3D%220.35%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D%22%23c5e0ff%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.9%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22translate%28500%20150%29%22%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22-34%22%20x2%3D%220%22%20y2%3D%2234%22%20stroke-width%3D%221.8%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-34%22%20y1%3D%220%22%20x2%3D%2234%22%20y2%3D%220%22%20stroke-width%3D%221.8%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-24%22%20y1%3D%22-24%22%20x2%3D%2224%22%20y2%3D%2224%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%2224%22%20y1%3D%22-24%22%20x2%3D%22-24%22%20y2%3D%2224%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22-34%22%20x2%3D%22-7%22%20y2%3D%22-24%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22-34%22%20x2%3D%227%22%20y2%3D%22-24%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%2234%22%20x2%3D%22-7%22%20y2%3D%2224%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%2234%22%20x2%3D%227%22%20y2%3D%2224%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-34%22%20y1%3D%220%22%20x2%3D%22-24%22%20y2%3D%22-7%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-34%22%20y1%3D%220%22%20x2%3D%22-24%22%20y2%3D%227%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%2234%22%20y1%3D%220%22%20x2%3D%2224%22%20y2%3D%22-7%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%2234%22%20y1%3D%220%22%20x2%3D%2224%22%20y2%3D%227%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%223.2%22%20fill%3D%22%23f4f8ff%22%20stroke%3D%22none%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22translate%28120%20420%29%20scale%280.62%29%22%20opacity%3D%220.75%22%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22-34%22%20x2%3D%220%22%20y2%3D%2234%22%20stroke-width%3D%221.8%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-34%22%20y1%3D%220%22%20x2%3D%2234%22%20y2%3D%220%22%20stroke-width%3D%221.8%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%22-24%22%20y1%3D%22-24%22%20x2%3D%2224%22%20y2%3D%2224%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20x1%3D%2224%22%20y1%3D%22-24%22%20x2%3D%22-24%22%20y2%3D%2224%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%223%22%20fill%3D%22%23f4f8ff%22%20stroke%3D%22none%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20mask%3D%22url%28%23sm%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20640%20C48%20632%2096%20624%20140%20632%20C168%20636%20176%20640%20176%20640%20Z%22%20fill%3D%22%23e8f1fb%22%20opacity%3D%220.28%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M60%20640%20C140%20612%20210%20622%20280%20640%20Z%22%20fill%3D%22%23d7e5f5%22%20opacity%3D%220.32%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M150%20640%20C240%20592%20330%20608%20420%20640%20Z%22%20fill%3D%22%23e7f0fa%22%20opacity%3D%220.36%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M90%20640%20C170%20618%20230%20598%20300%20572%20C380%20540%20450%20578%20530%20538%20C585%20512%20620%20536%20640%20516%20L640%20640%20Z%22%20fill%3D%22%23c5d8ee%22%20opacity%3D%220.42%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M200%20640%20C280%20616%20340%20598%20410%20574%20C490%20546%20550%20582%20610%20556%20C630%20546%20640%20552%20640%20552%20L640%20640%20Z%22%20fill%3D%22%23f4f8ff%22%20opacity%3D%220.5%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-size: min(64vw, 720px);
  background-position: right 0% bottom 0%;
}
.np-cal[data-theme="winter"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(90, 140, 190, 0.34), rgba(18, 36, 56, 0.32));
  border-color: rgba(142, 184, 224, 0.38);
}
.np-cal[data-theme="winter"] .cal-allday-label { color: rgba(197, 224, 255, 0.92); }
.np-cal[data-theme="winter"] .cal-allday-label::before { background: #8eb8e0; box-shadow: 0 0 8px rgba(142, 184, 224, 0.5); }
.np-cal[data-theme="winter"] .cal-allday-line { background: rgba(40, 70, 100, 0.32); border-color: rgba(142, 184, 224, 0.22); }
.np-cal[data-theme="winter"] .cal-allday-line .cal-allday-when { color: rgba(197, 224, 255, 0.75); }
.np-cal[data-theme="winter"] .cal-month-wrap { background: rgba(12, 24, 38, 0.52); border-color: rgba(142, 184, 224, 0.2); }
.np-cal[data-theme="winter"] .cal-day.today { background: rgba(142, 184, 224, 0.24); box-shadow: inset 0 0 0 1.5px rgba(197, 224, 255, 0.8); }
.np-cal[data-theme="winter"] .cal-day.has::after { background: #8eb8e0; }
.np-cal[data-theme="winter"] .cal-next-card { background: rgba(40, 78, 112, 0.42); border-color: rgba(142, 184, 224, 0.45); }
.np-cal[data-theme="winter"] .cal-next-label,
.np-cal[data-theme="winter"] .cal-row.soon .cal-when { color: #c5e0ff; }
.np-cal[data-theme="winter"] .cal-row { background: rgba(142, 184, 224, 0.1); border-color: rgba(142, 184, 224, 0.14); }
.np-cal[data-theme="winter"] .cal-row.soon { background: rgba(142, 184, 224, 0.16); border-color: rgba(197, 224, 255, 0.32); }
.np-cal[data-theme="winter"] .cal-setup-steps code { color: #8eb8e0; }

.np-cal[data-theme="july4"] .cal-stage {
  background:
    linear-gradient(#c73a3a, #c73a3a) 0 0 / 100% 5px no-repeat,
    linear-gradient(#f4f4f4, #f4f4f4) 0 5px / 100% 4px no-repeat,
    linear-gradient(#243e86, #243e86) 0 9px / 100% 5px no-repeat,
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(40, 70, 150, 0.35), transparent 55%),
    linear-gradient(180deg, #122454 0%, #0c1a3f 60%, #08122e 100%);
}
.np-cal[data-theme="july4"] .cal-stage::after {
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22b%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff8e0%22%2F%3E%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23e8c84a%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23e8c84a%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22r%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffd0d0%22%2F%3E%3Cstop%20offset%3D%2235%25%22%20stop-color%3D%22%23c73a3a%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c73a3a%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22u%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23e0e8ff%22%2F%3E%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%235a7fd4%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23243e86%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22spark%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23fff4c0%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23e8c84a%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22120%22%20r%3D%2270%22%20fill%3D%22url%28%23r%29%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22420%22%20cy%3D%2290%22%20r%3D%2290%22%20fill%3D%22url%28%23b%29%22%20opacity%3D%220.45%22%2F%3E%20%3Ccircle%20cx%3D%22500%22%20cy%3D%22220%22%20r%3D%2260%22%20fill%3D%22url%28%23u%29%22%20opacity%3D%220.5%22%2F%3E%20%3Cg%20stroke%3D%22%23e8c84a%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.8%22%3E%20%3Cg%20transform%3D%22translate%28420%2090%29%22%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22-58%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2258%22%20stroke-width%3D%222.2%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2258%22%20y2%3D%220%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-58%22%20y2%3D%220%22%20stroke-width%3D%222.2%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2241%22%20y2%3D%22-41%22%20stroke-width%3D%221.8%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-41%22%20y2%3D%2241%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2241%22%20y2%3D%2241%22%20stroke-width%3D%221.8%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-41%22%20y2%3D%22-41%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20r%3D%224%22%20fill%3D%22%23fff4c0%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23e06060%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.75%22%3E%20%3Cg%20transform%3D%22translate%28160%20120%29%22%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22-42%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2242%22%20stroke-width%3D%222%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2242%22%20y2%3D%220%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-42%22%20y2%3D%220%22%20stroke-width%3D%222%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2230%22%20y2%3D%22-30%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-30%22%20y2%3D%2230%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2230%22%20y2%3D%2230%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22-30%22%20y2%3D%22-30%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20r%3D%223.2%22%20fill%3D%22%23ffb0b0%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%21--%20sparkler%20stick%20%2B%20burst%20--%3E%20%3Cg%20transform%3D%22translate%28470%20520%29%22%3E%20%3Cline%20x1%3D%220%22%20y1%3D%2220%22%20x2%3D%220%22%20y2%3D%22110%22%20stroke%3D%22%239a9a9a%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%2220%22%20x2%3D%220%22%20y2%3D%2270%22%20stroke%3D%22%23c8c8c8%22%20stroke-width%3D%221.5%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%220%22%20cy%3D%228%22%20r%3D%2228%22%20fill%3D%22url%28%23spark%29%22%20opacity%3D%220.85%22%2F%3E%20%3Cg%20stroke%3D%22%23fff4c0%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.9%22%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%220%22%20y2%3D%22-36%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%220%22%20y2%3D%2240%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%2234%22%20y2%3D%228%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%22-34%22%20y2%3D%228%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%2224%22%20y2%3D%22-24%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%22-24%22%20y2%3D%22-24%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%2224%22%20y2%3D%2228%22%20stroke-width%3D%221.3%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%22-24%22%20y2%3D%2228%22%20stroke-width%3D%221.3%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%2214%22%20y2%3D%22-32%22%20stroke-width%3D%221.1%22%20stroke%3D%22%23ff8a8a%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%22-14%22%20y2%3D%22-32%22%20stroke-width%3D%221.1%22%20stroke%3D%22%238aa6e8%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%2232%22%20y2%3D%22-10%22%20stroke-width%3D%221.1%22%20stroke%3D%22%23e8c84a%22%2F%3E%20%3Cline%20x1%3D%220%22%20y1%3D%228%22%20x2%3D%22-32%22%20y2%3D%22-10%22%20stroke-width%3D%221.1%22%20stroke%3D%22%23ff8a8a%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%23fff%22%3E%20%3Ccircle%20cx%3D%226%22%20cy%3D%22-18%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-10%22%20cy%3D%22-14%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-4%22%20r%3D%221.4%22%2F%3E%20%3Ccircle%20cx%3D%22-20%22%20cy%3D%222%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%22-8%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%22-20%22%20r%3D%221%22%20fill%3D%22%23e8c84a%22%2F%3E%3Ccircle%20cx%3D%22-16%22%20cy%3D%22-22%22%20r%3D%221%22%20fill%3D%22%23ff8a8a%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  background-size: min(62vw, 680px);
  background-position: right 2% bottom 1%;
}
.np-cal[data-theme="july4"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(36, 62, 134, 0.45), rgba(80, 24, 48, 0.28));
  border-color: rgba(180, 190, 230, 0.28);
}
.np-cal[data-theme="july4"] .cal-allday-label { color: rgba(200, 210, 245, 0.9); }
.np-cal[data-theme="july4"] .cal-allday-label::before { background: #e8c84a; box-shadow: 0 0 8px rgba(232, 200, 74, 0.4); }
.np-cal[data-theme="july4"] .cal-allday-line { background: rgba(20, 36, 90, 0.35); border-color: rgba(180, 190, 230, 0.16); }
.np-cal[data-theme="july4"] .cal-month-wrap { background: rgba(8, 16, 40, 0.5); border-color: rgba(180, 190, 230, 0.16); }
.np-cal[data-theme="july4"] .cal-day.today { background: rgba(160, 40, 60, 0.35); box-shadow: inset 0 0 0 1.5px rgba(220, 80, 90, 0.8); }
.np-cal[data-theme="july4"] .cal-day.has::after { background: #e8c84a; }
.np-cal[data-theme="july4"] .cal-next-card {
  background: linear-gradient(135deg, rgba(90, 24, 60, 0.45), rgba(24, 36, 100, 0.4));
  border-color: rgba(220, 80, 100, 0.35);
}
.np-cal[data-theme="july4"] .cal-next-label,
.np-cal[data-theme="july4"] .cal-row.soon .cal-when { color: #e8c84a; }
.np-cal[data-theme="july4"] .cal-row.soon { background: rgba(232, 200, 74, 0.1); border-color: rgba(232, 200, 74, 0.28); }
.np-cal[data-theme="july4"] .cal-setup-steps code { color: #e8c84a; }

.np-cal[data-theme="birthday"] .cal-stage {
  background:
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(180, 80, 160, 0.2), transparent 50%),
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(80, 40, 120, 0.35), transparent 55%),
    linear-gradient(165deg, #3a1450 0%, #2a0c38 50%, #1a0824 100%);
}
.np-cal[data-theme="birthday"] .cal-stage::after {
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22bp%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2270%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffb0e0%22%2F%3E%20%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23e070b0%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23a03878%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22bb%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2270%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23b8f0ff%22%2F%3E%20%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%235ec8e0%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232a7a98%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22by%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2270%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffe08a%22%2F%3E%20%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23f0c14a%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23b88818%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22bg%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2270%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23d8b8ff%22%2F%3E%20%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23a078e0%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236030a0%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3C%21--%20confetti%20scatter%20--%3E%20%3Cg%20opacity%3D%220.75%22%3E%20%3Crect%20x%3D%2240%22%20y%3D%2250%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%23f0c14a%22%20transform%3D%22rotate%2825%2044%2052%29%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%2290%22%20width%3D%227%22%20height%3D%223.5%22%20rx%3D%221%22%20fill%3D%22%23e070b0%22%20transform%3D%22rotate%28-18%20123%2092%29%22%2F%3E%20%3Crect%20x%3D%22200%22%20y%3D%2240%22%20width%3D%229%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%235ec8e0%22%20transform%3D%22rotate%2840%20204%2042%29%22%2F%3E%20%3Crect%20x%3D%22280%22%20y%3D%22110%22%20width%3D%226%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22%23c084f5%22%20transform%3D%22rotate%28-30%20283%20111%29%22%2F%3E%20%3Crect%20x%3D%2290%22%20y%3D%22160%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%23ff8a8a%22%20transform%3D%22rotate%2812%2094%20162%29%22%2F%3E%20%3Crect%20x%3D%22160%22%20y%3D%22200%22%20width%3D%227%22%20height%3D%223.5%22%20rx%3D%221%22%20fill%3D%22%23f0c14a%22%20transform%3D%22rotate%28-50%20163%20202%29%22%2F%3E%20%3Crect%20x%3D%22240%22%20y%3D%22150%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%237fe0e2%22%20transform%3D%22rotate%2822%20244%20152%29%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22240%22%20width%3D%226%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22%23e090c8%22%20transform%3D%22rotate%2855%2063%20241%29%22%2F%3E%20%3Ccircle%20cx%3D%22100%22%20cy%3D%2270%22%20r%3D%222.5%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%22130%22%20r%3D%222%22%20fill%3D%22%23e070b0%22%2F%3E%20%3Ccircle%20cx%3D%22270%22%20cy%3D%2260%22%20r%3D%222.2%22%20fill%3D%22%235ec8e0%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%22130%22%20r%3D%221.8%22%20fill%3D%22%23c084f5%22%2F%3E%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22250%22%20r%3D%222%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Cpath%20d%3D%22M220%2080%20l6%200%20l-3%206%20z%22%20fill%3D%22%23ff8a8a%22%2F%3E%20%3Cpath%20d%3D%22M70%20190%20l5%200%20l-2.5%205%20z%22%20fill%3D%22%237fe0e2%22%2F%3E%20%3Cpath%20d%3D%22M300%20180%20l6%200%20l-3%206%20z%22%20fill%3D%22%23e090c8%22%2F%3E%20%3Crect%20x%3D%22310%22%20y%3D%2290%22%20width%3D%225%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23f0c14a%22%20transform%3D%22rotate%2818%20312%2095%29%22%20opacity%3D%220.7%22%2F%3E%20%3Crect%20x%3D%2230%22%20y%3D%22100%22%20width%3D%224%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%235ec8e0%22%20transform%3D%22rotate%28-25%2032%20104%29%22%20opacity%3D%220.7%22%2F%3E%20%3C%2Fg%3E%20%3C%21--%20balloon%20strings%20--%3E%20%3Cpath%20d%3D%22M400%20210%20C398%20280%20405%20360%20400%20470%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20fill%3D%22none%22%20opacity%3D%220.35%22%2F%3E%20%3Cpath%20d%3D%22M330%20250%20C318%20320%20312%20400%20305%20500%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.32%22%2F%3E%20%3Cpath%20d%3D%22M470%20190%20C482%20270%20490%20360%20498%20460%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.32%22%2F%3E%20%3Cpath%20d%3D%22M360%20280%20C350%20350%20340%20420%20328%20510%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20opacity%3D%220.28%22%2F%3E%20%3Cpath%20d%3D%22M510%20230%20C520%20310%20528%20390%20535%20480%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20opacity%3D%220.28%22%2F%3E%20%3C%21--%20balloons%20--%3E%20%3Cg%3E%20%3Cellipse%20cx%3D%22400%22%20cy%3D%22185%22%20rx%3D%2234%22%20ry%3D%2244%22%20fill%3D%22url%28%23bp%29%22%2F%3E%20%3Cellipse%20cx%3D%22388%22%20cy%3D%22168%22%20rx%3D%2210%22%20ry%3D%2214%22%20fill%3D%22%23fff%22%20opacity%3D%220.22%22%2F%3E%20%3Cpath%20d%3D%22M392%20228%20L400%20240%20L408%20228%20Z%22%20fill%3D%22%23a03878%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cellipse%20cx%3D%22330%22%20cy%3D%22225%22%20rx%3D%2230%22%20ry%3D%2240%22%20fill%3D%22url%28%23bb%29%22%2F%3E%20%3Cellipse%20cx%3D%22320%22%20cy%3D%22210%22%20rx%3D%229%22%20ry%3D%2212%22%20fill%3D%22%23fff%22%20opacity%3D%220.2%22%2F%3E%20%3Cpath%20d%3D%22M322%20264%20L330%20275%20L338%20264%20Z%22%20fill%3D%22%232a7a98%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cellipse%20cx%3D%22470%22%20cy%3D%22165%22%20rx%3D%2228%22%20ry%3D%2238%22%20fill%3D%22url%28%23by%29%22%2F%3E%20%3Cellipse%20cx%3D%22460%22%20cy%3D%22150%22%20rx%3D%228%22%20ry%3D%2211%22%20fill%3D%22%23fff%22%20opacity%3D%220.22%22%2F%3E%20%3Cpath%20d%3D%22M462%20202%20L470%20213%20L478%20202%20Z%22%20fill%3D%22%23b88818%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cellipse%20cx%3D%22360%22%20cy%3D%22255%22%20rx%3D%2224%22%20ry%3D%2232%22%20fill%3D%22url%28%23bg%29%22%2F%3E%20%3Cellipse%20cx%3D%22352%22%20cy%3D%22242%22%20rx%3D%227%22%20ry%3D%2210%22%20fill%3D%22%23fff%22%20opacity%3D%220.18%22%2F%3E%20%3Cpath%20d%3D%22M354%20286%20L360%20296%20L366%20286%20Z%22%20fill%3D%22%236030a0%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cellipse%20cx%3D%22510%22%20cy%3D%22205%22%20rx%3D%2222%22%20ry%3D%2230%22%20fill%3D%22url%28%23bp%29%22%2F%3E%20%3Cellipse%20cx%3D%22503%22%20cy%3D%22192%22%20rx%3D%226%22%20ry%3D%229%22%20fill%3D%22%23fff%22%20opacity%3D%220.2%22%2F%3E%20%3Cpath%20d%3D%22M504%20234%20L510%20244%20L516%20234%20Z%22%20fill%3D%22%23a03878%22%2F%3E%20%3C%2Fg%3E%20%3C%21--%20small%20cake%20--%3E%20%3Cg%20transform%3D%22translate%28430%20500%29%22%3E%20%3Crect%20x%3D%220%22%20y%3D%2228%22%20width%3D%2270%22%20height%3D%2222%22%20rx%3D%223%22%20fill%3D%22%23f4d4a0%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%2262%22%20height%3D%2218%22%20rx%3D%223%22%20fill%3D%22%23e090c8%22%2F%3E%20%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%23fff0fa%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%2270%22%20height%3D%225%22%20fill%3D%22%23f0c14a%22%20opacity%3D%220.85%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%2262%22%20height%3D%224%22%20fill%3D%22%237fe0e2%22%20opacity%3D%220.7%22%2F%3E%20%3C%21--%20candles%20--%3E%20%3Crect%20x%3D%2222%22%20y%3D%22-14%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%20%3Crect%20x%3D%2234%22%20y%3D%22-16%22%20width%3D%223%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%20%3Crect%20x%3D%2246%22%20y%3D%22-14%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%20%3Cellipse%20cx%3D%2223.5%22%20cy%3D%22-16%22%20rx%3D%222.5%22%20ry%3D%223.5%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Cellipse%20cx%3D%2235.5%22%20cy%3D%22-18%22%20rx%3D%222.5%22%20ry%3D%223.5%22%20fill%3D%22%23ff8a8a%22%2F%3E%20%3Cellipse%20cx%3D%2247.5%22%20cy%3D%22-16%22%20rx%3D%222.5%22%20ry%3D%223.5%22%20fill%3D%22%235ec8e0%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  background-size: min(58vw, 640px);
  background-position: right 1% bottom 0%;
}
.np-cal[data-theme="birthday"] .cal-allday-band {
  background: linear-gradient(135deg, rgba(120, 50, 150, 0.28), rgba(40, 16, 60, 0.25));
  border-color: rgba(220, 150, 210, 0.28);
}
.np-cal[data-theme="birthday"] .cal-allday-label { color: rgba(230, 180, 230, 0.92); }
.np-cal[data-theme="birthday"] .cal-allday-label::before { background: #e090c8; box-shadow: 0 0 8px rgba(224, 144, 200, 0.45); }
.np-cal[data-theme="birthday"] .cal-allday-line { background: rgba(80, 30, 110, 0.25); border-color: rgba(220, 150, 210, 0.16); }
.np-cal[data-theme="birthday"] .cal-month-wrap { background: rgba(28, 8, 40, 0.5); border-color: rgba(224, 144, 200, 0.16); }
.np-cal[data-theme="birthday"] .cal-day.today { background: rgba(196, 122, 212, 0.22); box-shadow: inset 0 0 0 1.5px rgba(224, 144, 200, 0.8); }
.np-cal[data-theme="birthday"] .cal-day.has::after { background: #f0c14a; }
.np-cal[data-theme="birthday"] .cal-next-card { background: rgba(90, 36, 120, 0.35); border-color: rgba(224, 144, 200, 0.4); }
.np-cal[data-theme="birthday"] .cal-next-card {
  position: relative;
  overflow: visible;
}
.np-cal[data-theme="birthday"] .cal-next-card::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -8px;
  width: clamp(48px, 7vw, 68px);
  height: clamp(48px, 7vw, 68px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%20%3Cg%20opacity%3D%220.95%22%3E%20%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%23f0c14a%22%20transform%3D%22rotate%2828%2013%2022%29%22%2F%3E%20%3Crect%20x%3D%2228%22%20y%3D%2210%22%20width%3D%229%22%20height%3D%224.5%22%20rx%3D%221.5%22%20fill%3D%22%23e070b0%22%20transform%3D%22rotate%28-20%2032%2012%29%22%2F%3E%20%3Crect%20x%3D%2250%22%20y%3D%2218%22%20width%3D%2210%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%235ec8e0%22%20transform%3D%22rotate%2835%2055%2020%29%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221.5%22%20fill%3D%22%23c084f5%22%20transform%3D%22rotate%28-40%2022%2042%29%22%2F%3E%20%3Crect%20x%3D%2242%22%20y%3D%2236%22%20width%3D%229%22%20height%3D%224.5%22%20rx%3D%221.5%22%20fill%3D%22%23ff8a8a%22%20transform%3D%22rotate%2815%2046%2038%29%22%2F%3E%20%3Crect%20x%3D%2262%22%20y%3D%2242%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221.5%22%20fill%3D%22%23f0c14a%22%20transform%3D%22rotate%28-25%2066%2044%29%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2214%22%20r%3D%223%22%20fill%3D%22%237fe0e2%22%2F%3E%20%3Ccircle%20cx%3D%2248%22%20cy%3D%228%22%20r%3D%222.5%22%20fill%3D%22%23e090c8%22%2F%3E%20%3Ccircle%20cx%3D%2270%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Ccircle%20cx%3D%2234%22%20cy%3D%2228%22%20r%3D%222.2%22%20fill%3D%22%235ec8e0%22%2F%3E%20%3Cpath%20d%3D%22M60%208%20l7%200%20l-3.5%207%20z%22%20fill%3D%22%23e070b0%22%2F%3E%20%3Cpath%20d%3D%22M12%2048%20l6%200%20l-3%206%20z%22%20fill%3D%22%23f0c14a%22%2F%3E%20%3Cpath%20d%3D%22M78%2050%20l6%200%20l-3%206%20z%22%20fill%3D%22%23c084f5%22%2F%3E%20%3C%21--%20tiny%20balloon%20--%3E%20%3Cellipse%20cx%3D%2272%22%20cy%3D%2268%22%20rx%3D%2212%22%20ry%3D%2215%22%20fill%3D%22%23e070b0%22%2F%3E%20%3Cellipse%20cx%3D%2268%22%20cy%3D%2262%22%20rx%3D%223.5%22%20ry%3D%225%22%20fill%3D%22%23fff%22%20opacity%3D%220.25%22%2F%3E%20%3Cpath%20d%3D%22M69%2082%20L72%2086%20L75%2082%20Z%22%20fill%3D%22%23a03878%22%2F%3E%20%3Cpath%20d%3D%22M72%2086%20C70%2092%2074%2094%2072%2096%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%220.45%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.92;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.np-cal[data-theme="birthday"] .cal-next-label,
.np-cal[data-theme="birthday"] .cal-row.soon .cal-when { color: #f0c14a; }
.np-cal[data-theme="birthday"] .cal-row.soon { background: rgba(240, 193, 74, 0.1); border-color: rgba(224, 144, 200, 0.28); }
.np-cal[data-theme="birthday"] .cal-setup-steps code { color: #f0c14a; }

/* Theme sheet — overlay only. Does not participate in the calendar grid. */
.cal-theme-sheet[hidden] { display: none !important; }
.cal-theme-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  font-family: Inter, Roboto, system-ui, sans-serif;
}
.cal-theme-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.cal-theme-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: 0;
  background: #12161c;
  color: #f4f4f5;
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -16px 0 48px rgba(0,0,0,0.45);
  padding: calc(22px + var(--safe-top)) 22px calc(22px + var(--safe-bottom));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-theme-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cal-theme-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(127, 224, 226, 0.85);
  font-weight: 700;
}
.cal-theme-panel h2 {
  margin: 4px 0 0;
  font-size: 28px;
  letter-spacing: -0.03em;
  font-weight: 750;
}
.cal-theme-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.cal-theme-note {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
.cal-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cal-theme-tile {
  min-height: 84px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1c222b;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px;
  text-align: left;
  font: inherit;
  font-weight: 650;
  font-size: 13px;
}
.cal-theme-tile[aria-pressed="true"] {
  border-color: rgba(104, 120, 180, 0.9);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 226, 0.85);
}
.cal-theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.cal-theme-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.cal-theme-auto {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(127, 224, 226, 0.95);
  font-weight: 700;
}
.cal-theme-error {
  margin: 0;
  color: #ffb4b4;
  font-size: 13px;
  font-weight: 600;
}
.cal-theme-error[hidden] { display: none !important; }
.cal-display {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-selection {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-selection[hidden] { display: none !important; }
.cal-selection-empty {
  margin: 0;
  color: rgba(255,255,255,0.52);
  font-size: 14px;
  font-weight: 500;
}
/* Each feed is a self-contained tile. The secondary preference is nested
   inside the tile and is only rendered while its master is on. */
.cal-feed-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1a2029;
}
.cal-feed-card.is-disabled {
  opacity: 0.58;
}
.cal-feed-card > .cal-desc-row {
  min-height: 46px;
  padding: 8px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
}
.cal-feed-card.is-enabled > .cal-feed-row {
  background: rgba(127,224,226,0.07);
}
.cal-feed-next-row {
  min-height: 42px;
  margin-left: 15px;
  padding: 8px 10px !important;
  background: #171c24 !important;
  border: 1px dashed rgba(127,224,226,0.18) !important;
  border-left: 2px solid rgba(127,224,226,0.5) !important;
  border-radius: 10px !important;
}
.cal-feed-next-row .cal-desc-name {
  font-size: 14px;
  font-weight: 550;
}
.cal-selection-all {
  align-self: flex-start;
  min-width: 132px; min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(127,224,226,0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(127,224,226,0.18), rgba(255,255,255,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 18px rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.96);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.cal-selection-all:hover {
  border-color: rgba(127,224,226,0.85);
  background: linear-gradient(180deg, rgba(127,224,226,0.25), rgba(255,255,255,0.08));
}
.cal-selection-all:active { transform: translateY(1px); }
.cal-selection-all:focus-visible { outline: 2px solid rgba(127,224,226,0.95); outline-offset: 3px; }
.cal-display-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(127, 224, 226, 0.85);
  font-weight: 700;
}
.cal-desc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1c222b;
  color: #fff;
  cursor: pointer;
}
.cal-desc-name { font-size: 15px; font-weight: 650; }
.cal-switch {
  position: relative;
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
}
.cal-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cal-switch-ui {
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  position: relative;
  pointer-events: none;
}
.cal-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.cal-switch input:checked + .cal-switch-ui { background: rgba(104, 120, 180, 0.9); }
.cal-switch input:checked + .cal-switch-ui::after { transform: translateX(20px); }
.cal-switch input:focus-visible + .cal-switch-ui {
  box-shadow: 0 0 0 2px #12161c, 0 0 0 4px rgba(104, 120, 180, 0.9);
}
@media (max-width: 640px) {
  .cal-theme-sheet { align-items: flex-end; }
  .cal-theme-panel {
    width: 100%;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px 18px 0 0;
    max-height: min(86dvh, 720px);
  }
}

/* Lobby Calendar */
@media (min-aspect-ratio: 16/10) {
  /* Slightly roomier text column on wide landscape; Ends still full panel width */
  .np-board-top {
    max-width: min(100%, 48rem);
  }
}
@media (orientation: portrait) {
  .cal-month-wrap {
    display: none !important;
  }
  /* Flatten columns so All day sits above Up next / Coming up (not under a clipped left column). */
  .cal-pad {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.2vh, 24px);
    overflow: auto;
    align-items: stretch;
  }
  .cal-left,
  .cal-right {
    display: contents;
  }
  .cal-header-row { order: 1; flex: 0 0 auto; }
  .cal-allday-band { order: 2; flex: 0 0 auto; }
  .cal-next-card { order: 3; flex: 0 0 auto; }
  .cal-section-h { order: 4; flex: 0 0 auto; }
  .cal-list { order: 5; flex: 1 1 auto; min-height: 0; overflow: auto; }
  .cal-footer { order: 6; flex: 0 0 auto; }
}

/* Birthday standout accents follow each calendar theme */
.np-cal[data-theme="paper"] {
  --cal-bday-accent: #2f6f74;
  --cal-bday-accent-soft: rgba(47, 111, 116, 0.55);
  --cal-bday-wash: rgba(61, 139, 144, 0.20);
  --cal-bday-glow: rgba(47, 111, 116, 0.18);
  --cal-bday-title: #1c1915;
}
.np-cal[data-theme="dark"] {
  --cal-bday-accent: #f2a65a;
  --cal-bday-accent-soft: rgba(242, 166, 90, 0.55);
  --cal-bday-wash: rgba(242, 150, 70, 0.20);
  --cal-bday-glow: rgba(242, 166, 90, 0.16);
  --cal-bday-title: #eef1f5;
}
.np-cal[data-theme="fall"] {
  --cal-bday-accent: #e0a15a;
  --cal-bday-accent-soft: rgba(224, 161, 90, 0.60);
  --cal-bday-wash: rgba(224, 161, 90, 0.22);
  --cal-bday-glow: rgba(180, 100, 30, 0.22);
  --cal-bday-title: #fff4e8;
}
.np-cal[data-theme="spring"] {
  --cal-bday-accent: #d6e27a;
  --cal-bday-accent-soft: rgba(214, 226, 122, 0.60);
  --cal-bday-wash: rgba(214, 226, 122, 0.20);
  --cal-bday-glow: rgba(140, 180, 60, 0.22);
  --cal-bday-title: #f7ffe8;
}
.np-cal[data-theme="summer"] {
  --cal-bday-accent: #f0c14a;
  --cal-bday-accent-soft: rgba(240, 193, 74, 0.60);
  --cal-bday-wash: rgba(240, 193, 74, 0.20);
  --cal-bday-glow: rgba(240, 193, 74, 0.22);
  --cal-bday-title: #fff8e0;
}
.np-cal[data-theme="halloween"] {
  --cal-bday-accent: #e8893a;
  --cal-bday-accent-soft: rgba(232, 137, 58, 0.60);
  --cal-bday-wash: rgba(232, 137, 58, 0.22);
  --cal-bday-glow: rgba(192, 132, 245, 0.20);
  --cal-bday-title: #fff0e0;
}
.np-cal[data-theme="christmas"] {
  --cal-bday-accent: #d4b15a;
  --cal-bday-accent-soft: rgba(212, 177, 90, 0.60);
  --cal-bday-wash: rgba(212, 177, 90, 0.22);
  --cal-bday-glow: rgba(150, 40, 40, 0.20);
  --cal-bday-title: #fff8e8;
}
.np-cal[data-theme="winter"] {
  --cal-bday-accent: #8eb8e0;
  --cal-bday-accent-soft: rgba(142, 184, 224, 0.60);
  --cal-bday-wash: rgba(142, 184, 224, 0.22);
  --cal-bday-glow: rgba(80, 140, 190, 0.24);
  --cal-bday-title: #f4f8ff;
}
.np-cal[data-theme="july4"] {
  --cal-bday-accent: #e8c84a;
  --cal-bday-accent-soft: rgba(232, 200, 74, 0.60);
  --cal-bday-wash: rgba(220, 80, 90, 0.22);
  --cal-bday-glow: rgba(36, 62, 134, 0.28);
  --cal-bday-title: #fff8e0;
}
.np-cal[data-theme="birthday"] {
  --cal-bday-accent: #e090c8;
  --cal-bday-accent-soft: rgba(224, 144, 200, 0.60);
  --cal-bday-wash: rgba(224, 144, 200, 0.24);
  --cal-bday-glow: rgba(196, 122, 212, 0.25);
  --cal-bday-title: #fff0fa;
}

.app-home {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 80;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.92);
  opacity: 0.38;
  text-decoration: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.app-home svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.app-home:hover,
.app-home:focus-visible { opacity: 0.9; }
.app-home:focus-visible { outline: 2px solid rgba(245,197,66,0.9); outline-offset: 3px; border-radius: 999px; }
.app-home[hidden] { display: none !important; }
a.cal-settings-link {
  display: block;
  margin: 14px 2px 4px;
  color: rgba(245,197,66,0.95);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
a.cal-settings-link:focus-visible { outline: 2px solid rgba(245,197,66,0.9); outline-offset: 3px; }

/* v2.4.22 — Calendar header weather fit (standalone Calendar + Home Lobby calendar).
   now.js fitWeatherChip() measures the clock/date text and the weather block with
   getBoundingClientRect on resize, orientation change, clock text change, font load
   and after weather renders. While they would come closer than 12px it steps
   .wx-fit-1 → .wx-fit-2 → .wx-fit-3, then .wx-fit-hide (weather hidden).
   Every step is smaller than the base clamp() minimums. Clock size, .cal-pad, Ops
   columns and the month-grid rules are untouched. */
.cal-header-row.wx-fit-1 { gap: 16px; }
.cal-header-row.wx-fit-2 { gap: 12px; }
.cal-header-row.wx-fit-3,
.cal-header-row.wx-fit-hide { gap: 10px; }

.weather-open.wx-fit-1 { gap: 8px; }
.weather-open.wx-fit-1 > svg,
.weather-open.wx-fit-1 .wx-icon { width: 30px; height: 30px; }
.weather-open.wx-fit-1 .wx-body { gap: 2px; }
.weather-open.wx-fit-1 .wx-top { gap: 6px; }
.weather-open.wx-fit-1 .temp { font-size: 26px; }
.weather-open.wx-fit-1 .cond { font-size: 12px; }
.weather-open.wx-fit-1 .wx-hl { font-size: 11px; gap: 5px; }
.weather-open.wx-fit-1 .wx-src { font-size: 9.5px; letter-spacing: 0.05em; }

.weather-open.wx-fit-2 { gap: 6px; }
.weather-open.wx-fit-2 > svg,
.weather-open.wx-fit-2 .wx-icon { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(245,197,66,0.3)); }
.weather-open.wx-fit-2 .wx-body { gap: 1px; }
.weather-open.wx-fit-2 .wx-top { gap: 5px; }
.weather-open.wx-fit-2 .temp { font-size: 22px; }
.weather-open.wx-fit-2 .cond { font-size: 11px; }
.weather-open.wx-fit-2 .wx-hl { font-size: 10px; gap: 4px; }
.weather-open.wx-fit-2 .wx-src { font-size: 9px; letter-spacing: 0.04em; margin-top: 0; }

.weather-open.wx-fit-3 { gap: 4px; }
.weather-open.wx-fit-3 > svg,
.weather-open.wx-fit-3 .wx-icon { width: 20px; height: 20px; filter: drop-shadow(0 0 4px rgba(245,197,66,0.28)); }
.weather-open.wx-fit-3 .wx-body { gap: 1px; }
.weather-open.wx-fit-3 .wx-top { gap: 4px; }
.weather-open.wx-fit-3 .temp { font-size: 18px; }
.weather-open.wx-fit-3 .cond { font-size: 10px; }
.weather-open.wx-fit-3 .wx-hl { font-size: 9px; gap: 3px; }
.weather-open.wx-fit-3 .wx-src { font-size: 8px; letter-spacing: 0.03em; margin-top: 0; }

.weather-open.wx-fit-hide { display: none !important; }

/* v2.4.23 — Stacked landscape (≤900px wide, window still wider than tall).
   .cal-left's base container-type: size turns on size containment, so in the stacked
   grid its `auto` row was 0px tall and .cal-right (Up next / Coming up) painted over the
   clock until the window became portrait (portrait flattens columns). Here, use
   inline-size containment so the header + month row takes its real height (50cqw still
   resolves; 100cqh falls back to the viewport height), and let the events column keep
   its content height under the minmax(0, 1fr) row. The page scrolls (.cal-pad overflow: auto).
   Two-column landscape, portrait, .cal-pad values and month-grid rules are unchanged. */
@media (max-width: 900px) and (orientation: landscape) {
  .cal-left { container-type: inline-size; }
  .cal-right { min-height: max-content; }
}

/* 2.4.29 — ICS feed editor inside Calendar hamburger settings */
.cal-ics {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-ics-hint {
  margin: 0;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.cal-ics-hint code {
  font-size: 12px;
  color: rgba(127,224,226,0.9);
}
.cal-ics-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-ics-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}
.cal-ics-row input {
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,12,16,0.75);
  color: #f4f4f5;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
}
.cal-ics-row input::placeholder { color: rgba(255,255,255,0.35); }
.cal-ics-remove {
  border: 0;
  background: rgba(255,80,80,0.12);
  color: #ffb4b4;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cal-ics-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-ics-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.cal-ics-status:empty { display: none; }
.cal-ics-status.is-error { color: #f28b82; }
@media (max-width: 720px) {
  .cal-ics-row { grid-template-columns: 1fr; }
}

/* 2.4.34 — wider calendar settings + sticky Save */
/* 2.4.52 — Save bar: the panel's bottom padding made the sticky bar stop ~94px above the sheet bottom, hovering over the
   settings list. Zero the panel's bottom padding so the bar pins to the real bottom edge (safe-area handled inside the bar),
   with a solid background and a short fade above it. */
.cal-theme-panel {
  padding-bottom: 0;
}
.cal-prefs-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: auto -22px 0; /* auto top: panel is a flex column, so a short settings list still pins Save to the sheet bottom */
  padding: 14px 22px calc(14px + var(--safe-bottom));
  background: #12161c;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cal-prefs-save-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: linear-gradient(180deg, rgba(18,22,28,0), #12161c);
  pointer-events: none;
}
.cal-prefs-save {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: #7fe0e2;
  color: #0b1218;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
}
.cal-prefs-save:disabled {
  opacity: 0.55;
  cursor: wait;
}
.cal-prefs-save-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.cal-prefs-save-status:empty { display: none; }
.cal-prefs-save-status.is-error { color: #f28b82; }

/* 2.4.36 — Lobby Card standby: the wide Lobby Calendar */
.np-idle.np-idle-wide { background: #000; }
.np-idle.np-idle-wide .np-idle-logo {
  width: min(78vw, 900px);
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  filter: none;
}

/* 2.4.41 — calendar PORTRAIT only: Coming up grows to its content (no inner scroll box,
   never clipped); only the page (.cal-pad) scrolls vertically; no pinch-zoom/horizontal pan.
   Landscape rules are intentionally untouched. */
@media (orientation: portrait) {
  .cal-stage,
  .cal-pad,
  .cal-list {
    touch-action: pan-y;
    -ms-touch-action: pan-y;
  }
  .cal-pad { overflow-x: hidden; overflow-y: auto; }
  .cal-list {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }
  .cal-allday-band,
  .cal-next-card,
  .cal-section-h,
  .cal-footer { flex-shrink: 0; }
}

/* 2.4.42 — portrait only: long links / unbroken text in detail lines stay inside the card
   (single-line ellipsis). Landscape rules untouched. */
@media (orientation: portrait) {
  .cal-row { grid-template-columns: clamp(72px, 8vw, 92px) minmax(0, 1fr); }
  .cal-row > div:last-child { min-width: 0; }
  .cal-row-sub { min-width: 0; }
  .cal-row-location,
  .cal-row-description,
  .cal-next-location,
  .cal-next-description {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== 2.4.43 — source calendar names, month-grid source dots, color picker =====
   Landscape baseline: every new element is absolutely positioned inside existing padding
   (or is an overlay on the existing dot box), so no existing box moves or resizes. */
.cal-next-card { position: relative; }
.cal-src-name {
  position: absolute;
  top: clamp(2px, 0.3vw, 3px);
  right: clamp(10px, 1.4vw, 14px);
  max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(9px, 0.9vw, 11px); line-height: 1.1;
  font-weight: 700; letter-spacing: 0.03em;
  color: var(--src, currentColor); opacity: 0.88;
  pointer-events: none;
}
.cal-next-card > .cal-src-name { top: clamp(8px, 1vw, 12px); right: clamp(14px, 1.8vw, 20px); font-size: clamp(10px, 1vw, 12px); }
/* 2.4.44: All Day band shows the source name in place of "Today" (same slot, same line). */
.cal-allday-line .cal-allday-when.cal-allday-src { flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--src, currentColor); font-weight: 700; }
/* 2.4.44: Coming up rows show the source name as a small colored line in the date column. */
.cal-when .cal-src-line { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, 1vw, 11px); line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; color: var(--src, currentColor); }
.cal-row-range { margin-top: 2px; }
.cal-row-sub > .cal-row-range:first-child { margin-top: 0; }
/* Month grid: same box height/margin as the old single dot; dots overflow it symmetrically. */
.cal-day.msrc.has::after { display: none !important; }
.cal-day .msrc-box {
  height: clamp(3px, 0.4vw, 5px); margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2px, 0.2vw, 3px); overflow: visible; pointer-events: none; position: relative; flex: 0 0 auto;
}
.msrc-dot {
  flex: 0 0 auto; width: clamp(4px, 0.31vw, 6px); height: clamp(4px, 0.31vw, 6px);
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.cal-day.today .msrc-dot { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.6); }
.msrc-more {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-weight: 800; line-height: 1; font-size: clamp(7px, 0.45vw, 9px);
  color: currentColor; opacity: 0.75; margin-left: 1px;
}
.msrc-ring {
  width: clamp(8px, 0.5vw, 10px); height: clamp(8px, 0.5vw, 10px); border-radius: 50%; flex: 0 0 auto;
  background: var(--g);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 31%); mask: radial-gradient(circle, transparent 28%, #000 31%);
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.55));
}
.cal-day.today .msrc-ring { filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.75)); }
@media (orientation: portrait) {
  .cal-row-range { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
/* Calendar settings: per-feed color picker */
.cal-color-row { cursor: default; }
.cal-color-current {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cal-color-current:focus-visible, .cal-color-sw:focus-visible, .cal-color-default:focus-visible, .cal-color-reset:focus-visible {
  outline: 2px solid rgba(127,224,226,0.95); outline-offset: 2px;
}
.cal-color-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(255,255,255,0.35); flex: 0 0 auto; display: inline-block; }
.cal-color-picker {
  margin-left: 15px; padding: 10px; border-radius: 10px; background: #171c24;
  border: 1px dashed rgba(127,224,226,0.18); border-left: 2px solid rgba(127,224,226,0.5);
  display: flex; flex-direction: column; gap: 8px;
}
.cal-color-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; }
.cal-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-color-sw {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18);
  background: var(--sw); cursor: pointer; padding: 0;
}
.cal-color-sw[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px rgba(127,224,226,0.8); }
.cal-color-default, .cal-color-reset {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 34px; padding: 6px 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
  color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cal-color-default[aria-pressed="true"] { border-color: rgba(127,224,226,0.9); background: rgba(127,224,226,0.14); }
.cal-color-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-color-input { width: 40px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: transparent; cursor: pointer; }
.cal-color-hex {
  width: 92px; min-height: 34px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  background: #0f1319; color: #fff; font: inherit; font-size: 13px; font-family: ui-monospace, monospace;
}

/* 2.4.45 — two-column LANDSCAPE month card: no "Month" label; hamburger is an absolute overlay in the
   outer top-right padding (no layout space), glyph right edge aligned to the content's right edge,
   free space to its left reserved for a future home icon. Portrait / stacked layouts unchanged. */
.cal-theme-menu-top { display: none; }
@media (min-width: 901px) and (min-aspect-ratio: 4/5) and (orientation: landscape) {
  .cal-month-h .cal-theme-menu,
  .cal-month-h .cal-month-sub { display: none; }
  .cal-month-h { min-height: 24px; }
  .cal-theme-menu.cal-theme-menu-top {
    display: inline-flex;
    position: absolute;
    z-index: 4;
    top: calc(var(--safe-top) + (clamp(20px, 3.5vw, 48px) - 24px) / 2);
    right: calc(clamp(20px, 3vw, 40px) + var(--safe-right) - 7px);
  }
}

/* OSU (mock) — dark mode, Oklahoma State athletics orange #FE5C00 on near-black. Same rules as Dark; colors only. */
.np-cal[data-theme="osu"] { color: #f4f4f4; }
.np-cal[data-theme="osu"] .cal-stage {
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(255,255,255,0.07), transparent 50%),
    linear-gradient(165deg, #0f0f0f 0%, #0a0a0a 48%, #050505 100%);
}
.np-cal[data-theme="osu"] .cal-stage::before { opacity: 0.08; }
.np-cal[data-theme="osu"] .cal-clock { color: #fafafa; text-shadow: none; }
.np-cal[data-theme="osu"] .cal-date { color: rgba(245, 245, 245, 0.78); }
.np-cal[data-theme="osu"] .cal-dow,
.np-cal[data-theme="osu"] .cal-ampm { color: rgba(245, 245, 245, 0.56); }
.np-cal[data-theme="osu"] .weather-open .temp { color: #fafafa; text-shadow: none; }
.np-cal[data-theme="osu"] .weather-open .cond { color: rgba(245, 245, 245, 0.72); }
.np-cal[data-theme="osu"] .weather-open .hi { color: #ff8133; }
.np-cal[data-theme="osu"] .weather-open .lo,
.np-cal[data-theme="osu"] .weather-open .sep,
.np-cal[data-theme="osu"] .weather-open .wx-src { color: rgba(245, 245, 245, 0.56); }
.np-cal[data-theme="osu"] .cal-allday-band {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 245, 245, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.np-cal[data-theme="osu"] .cal-allday-label { color: rgba(254, 92, 0, 0.95); }
.np-cal[data-theme="osu"] .cal-allday-label::before { background: #fe5c00; box-shadow: none; }
.np-cal[data-theme="osu"] .cal-allday-line {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 245, 245, 0.08);
}
.np-cal[data-theme="osu"] .cal-allday-line .cal-allday-title { color: #f4f4f4; }
.np-cal[data-theme="osu"] .cal-allday-line .cal-allday-when { color: rgba(245, 245, 245, 0.70); }
.np-cal[data-theme="osu"] .cal-theme-menu { color: rgba(245, 245, 245, 0.6); }
.np-cal[data-theme="osu"] .cal-theme-menu:hover { color: #fafafa; background: rgba(245, 245, 245, 0.10); }
.np-cal[data-theme="osu"] .cal-theme-menu:focus-visible { color: #fafafa; }
.np-cal[data-theme="osu"] .cal-month-wrap,
.np-cal[data-theme="osu"] .cal-row {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 245, 245, 0.09);
}
.np-cal[data-theme="osu"] .cal-month-title { color: #f4f4f4; }
.np-cal[data-theme="osu"] .cal-month-sub,
.np-cal[data-theme="osu"] .cal-dow-h,
.np-cal[data-theme="osu"] .cal-section-h,
.np-cal[data-theme="osu"] .cal-footer { color: rgba(245, 245, 245, 0.56); }
.np-cal[data-theme="osu"] .cal-day { color: rgba(245, 245, 245, 0.84); }
.np-cal[data-theme="osu"] .cal-day.mute { color: rgba(245, 245, 245, 0.55); }
.np-cal[data-theme="osu"] .cal-day.today {
  background: rgba(254, 92, 0, 0.20);
  color: #fff1e6;
  box-shadow: inset 0 0 0 1.5px rgba(254, 92, 0, 0.85);
}
.np-cal[data-theme="osu"] .cal-day.has::after { background: #fe5c00; }
.np-cal[data-theme="osu"] .cal-day.today.has::after { background: #ffa566; }
.np-cal[data-theme="osu"] .cal-next-card {
  background: #2b1608;
  border-color: rgba(254, 92, 0, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.np-cal[data-theme="osu"] .cal-next-label { color: #ff8133; }
.np-cal[data-theme="osu"] .cal-next-title { color: #f4f4f4; }
.np-cal[data-theme="osu"] .cal-next-meta,
.np-cal[data-theme="osu"] .cal-row-sub,
.np-cal[data-theme="osu"] .cal-when,
.np-cal[data-theme="osu"] .cal-empty,
.np-cal[data-theme="osu"] .cal-setup { color: rgba(245, 245, 245, 0.72); }
.np-cal[data-theme="osu"] .cal-row-title { color: #f4f4f4; }
.np-cal[data-theme="osu"] .cal-row.soon {
  background: rgba(60, 29, 8, 0.95);
  border-color: rgba(254, 92, 0, 0.32);
}
.np-cal[data-theme="osu"] .cal-row.soon .cal-when { color: #ff8133; }
.np-cal[data-theme="osu"] .cal-setup-steps code { color: #ffa566; background: rgba(255, 255, 255, 0.08); }
.np-cal[data-theme="osu"] .cal-setup-note { color: rgba(245, 245, 245, 0.58); }

.np-cal[data-theme="osu"] {
  --cal-bday-accent: #ff8133;
  --cal-bday-accent-soft: rgba(254, 92, 0, 0.55);
  --cal-bday-wash: rgba(254, 92, 0, 0.20);
  --cal-bday-glow: rgba(254, 92, 0, 0.16);
  --cal-bday-title: #fafafa;
}

/* C3 (shipped 2.4.49): soft washes + chevron pattern, charcoal cards, toned-down borders; no top/bottom hairlines */
.np-cal[data-theme="osu"] .cal-stage {
  background:
    linear-gradient(180deg, rgba(254,92,0,.14) 0, rgba(254,92,0,0) 110px),
    linear-gradient(0deg, rgba(254,92,0,.08) 0, rgba(254,92,0,0) 60px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 24L24 0L48 24' fill='none' stroke='%23fe5c00' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #121212 0%, #0b0b0b 55%, #070707 100%);
}
.np-cal[data-theme="osu"] .cal-row, .np-cal[data-theme="osu"] .cal-month-wrap, .np-cal[data-theme="osu"] .cal-allday-band, .np-cal[data-theme="osu"] .cal-allday-line {
  background-color: #1b1b1b;
  background-image: none;
  border-color: rgba(254,92,0,.80);
}
.np-cal[data-theme="osu"] .cal-row.soon { background-color: #2a1406; border-color: rgba(254,92,0,.9); }
.np-cal[data-theme="osu"] .cal-next-card { background: linear-gradient(90deg, rgba(254,92,0,.20) 0, rgba(254,92,0,.05) 35%, rgba(254,92,0,0) 70%), #2b1608; border-color: rgba(254,92,0,.9); box-shadow: inset 0 1px 0 rgba(254,92,0,.35), 0 10px 28px rgba(0,0,0,.32); }
.np-cal[data-theme="osu"] .cal-allday-label, .np-cal[data-theme="osu"] .cal-section-h { color: #ff8133; }

/* C3: C2 with orange borders substantially toned down (~22-30% orange, neutral-ish). Hairlines, chevrons, washes kept */
.np-cal[data-theme="osu"] .cal-row, .np-cal[data-theme="osu"] .cal-month-wrap, .np-cal[data-theme="osu"] .cal-allday-band, .np-cal[data-theme="osu"] .cal-allday-line { border-color: rgba(254,92,0,.22); }
.np-cal[data-theme="osu"] .cal-row.soon { border-color: rgba(254,92,0,.34); }
.np-cal[data-theme="osu"] .cal-next-card { border-color: rgba(254,92,0,.38); }

/* 2.4.52 (MOCK v1) — PORTRAIT: show the top-right hamburger overlay (#calThemeMenuTop).
   Portrait hides .cal-month-wrap (which holds the inline hamburger) and .cal-theme-menu-top is display:none
   outside the 2.4.45 landscape query, so portrait had no menu at all. Absolute overlay in the outer
   top-right padding; takes no layout space; glyph right edge = content right edge; glyph centred in the
   top padding band; 44x44 hit box (starts below the safe-area inset). Scrolls with the page like the clock. */
@media (orientation: portrait) {
  .np-cal .cal-pad > .cal-theme-menu.cal-theme-menu-top {
    display: inline-flex;
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: calc(clamp(20px, 3.5vw, 48px) / 2 - 0.75px) 0 0;
    align-items: flex-start;
    justify-content: center;
    top: var(--safe-top);
    right: calc(clamp(20px, 3vw, 40px) + var(--safe-right) - 15px);
    -webkit-tap-highlight-color: transparent;
  }
  .np-cal .cal-pad > .cal-theme-menu.cal-theme-menu-top:focus-visible { outline-offset: -6px; }
}