:root {
  --bg: #fff5f7;
  --panel: #ffffff;
  --text: #2d2d3a;
  --muted: #8d8da6;
  --border: rgba(45, 45, 58, 0.08);
  --shadow: 0 20px 40px rgba(155, 120, 200, 0.08), 0 8px 20px rgba(0, 0, 0, 0.03);
  --primary: #b9a4ff;
  --primary2: #a288f0;
  --danger: #f87171;
  --warn: #fde047;
  --chip: rgba(185, 164, 255, 0.2);
  --focus: rgba(185, 164, 255, 0.35);
  --star-pattern: radial-gradient(1px 1px at 5px 8px, #e9d5ff 1px, transparent 1px),
    radial-gradient(1px 1px at 15px 20px, #fbcfe8 1px, transparent 1px),
    radial-gradient(1.5px 1.5px at 30px 12px, #cbd5e1 1.5px, transparent 1.5px);
  background-size: 40px 40px;
}

* { box-sizing: border-box }
html, body { height: 100% }

body {
  margin: 0;
  font-family: 'Nunito', 'Quicksand', 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  background-image: var(--star-pattern);
  transition: background 0.3s ease, color 0.3s ease;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 245, 247, 0.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(185, 164, 255, 0.15);
}

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

.logo {
  width: 44px; height: 44px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ffe9f2, #ffe0f0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 12px rgba(185, 164, 255, 0.2);
  font-size: 24px;
}

h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; color: #514e6b; }
.subtitle { margin: 4px 0 0; font-size: 12px; color: var(--muted) }

.btn {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--panel); color: var(--text);
  padding: 12px 16px; border-radius: 30px; cursor: pointer;
  box-shadow: 0 8px 16px rgba(185, 164, 255, 0.15);
  font-weight: 600; outline: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 24px rgba(185, 164, 255, 0.25); }
.btn:active { transform: translateY(0px) scale(0.98); box-shadow: 0 4px 12px rgba(185, 164, 255, 0.2); }
.btn:focus { box-shadow: 0 0 0 4px var(--focus), 0 8px 16px rgba(185, 164, 255, 0.2); }

.btn.primary {
  background: linear-gradient(145deg, var(--primary), var(--primary2));
  color: #2d2d3a; border-color: rgba(255, 255, 255, 0.8);
}
.btn.primary:hover { background: linear-gradient(145deg, var(--primary2), var(--primary)); }

.btn.clear-custom {
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  color: #1e3a8a; border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 30px; box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
}
.btn.clear-custom:hover { background: linear-gradient(145deg, #bfdbfe, #93c5fd); box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3); }

.btn.ghost {
  background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px);
  box-shadow: none; border: 1px dashed rgba(185, 164, 255, 0.5); color: var(--muted);
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.8); color: var(--text); border-style: solid; }

.btn.danger { background: rgba(248, 113, 113, 0.1); box-shadow: none; border: 1px solid rgba(248, 113, 113, 0.4); color: #b83b3b; }
.btn.danger:hover { background: rgba(248, 113, 113, 0.2); }

.wrap {
  max-width: 1200px; margin: 18px auto 40px; padding: 0 18px;
  display: grid; grid-template-columns: 1.6fr .9fr; gap: 20px;
}

@media (max-width:980px) { .wrap { grid-template-columns: 1fr; } }

@media (max-width:768px) {
  .wrap { padding: 0 12px; margin: 12px auto 30px; gap: 14px; }
  .topbar { padding: 12px 14px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .head-right { width: 100%; flex-direction: column; align-items: stretch; }
  .search { width: 100%; min-width: unset; }
  .monthbar { gap: 8px; flex-wrap: wrap; }
  .month-label { min-width: unset; font-size: 13px; }
  .dow { padding: 0 12px 8px; gap: 4px; font-size: 11px; }
  .dow > div { padding: 6px 4px; font-size: 11px; }
  .grid { padding: 0 12px 12px; gap: 6px; }
  .cell { min-height: 70px; padding: 8px 6px; border-radius: 16px; gap: 4px; }
  .cell .date { font-size: 11px; }
  .event-chip { font-size: 10px; padding: 4px 6px; border-radius: 12px; }
  .panel-foot { flex-wrap: wrap; justify-content: stretch; gap: 8px; }
  .panel-foot .btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 13px; }
  .day-list { padding: 0 12px 10px; }
  .day-item { padding: 12px; border-radius: 20px; }
}

@media (max-width:480px) {
  h1 { font-size: 14px; }
  .logo { width: 36px; height: 36px; font-size: 20px; }
  .btn { padding: 10px 12px; font-size: 13px; }
  .grid { gap: 4px; padding: 0 8px 8px; }
  .cell { min-height: 55px; padding: 6px 4px; border-radius: 12px; }
  .cell .date { font-size: 10px; }
  .event-chip { display: none; }
  .pill { font-size: 10px; padding: 3px 8px; }
  .modal { border-radius: 24px; }
  .panel { border-radius: 20px; }
}

.panel {
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.2s;
}
.panel:hover { transform: translateY(-4px); }
.panel.side { height: fit-content; display: flex; flex-direction: column; }

.panel-head {
  padding: 20px 20px 12px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.panel.side .panel-head { margin-bottom: 24px; }

.panel-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px;
  background: linear-gradient(145deg, #7c6e9f, #b9a4ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.panel.side h2 { font-size: 22px; font-weight: 700; color: #5b6aa5; }
body.dark .panel.side h2 { color: #f1f5f9; }

.upcoming-heading { margin: 28px 0 18px 0; }

.muted { color: var(--muted); font-size: 13px; margin: 6px 0 0; line-height: 1.45; }

.head-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.search {
  padding: 12px 18px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px);
  color: var(--text); outline: none;
  transition: box-shadow 0.2s, background 0.2s; min-width: 220px;
}
.search:focus { box-shadow: 0 0 0 4px var(--focus); background: #ffffff; }

        supreme
        supreme

        master
        main
.no-results {
  text-align: center;
  padding: 20px;
  font-weight: 700;
  color: var(--danger);
  grid-column: 1 / -1;
}

.monthbar { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 10px; }
        main

.month-label {
  min-width: 180px; text-align: center; font-weight: 700; letter-spacing: .3px;
  background: rgba(185, 164, 255, 0.2); padding: 6px 14px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.month-year-group { display: flex; align-items: center; gap: 8px; }

.month-select, .year-select {
  padding: 10px 16px; border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(145deg, #fff5f7, #ffeef5);
  backdrop-filter: blur(4px); font-weight: 700; color: #514e6b;
  cursor: pointer; outline: none;
  box-shadow: 0 6px 12px rgba(185, 164, 255, 0.15); transition: all 0.25s ease;
}
.month-select:hover, .year-select:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(185, 164, 255, 0.25); }
.month-select:focus, .year-select:focus { box-shadow: 0 0 0 4px var(--focus); }

.dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 20px 12px; gap: 10px; font-size: 13px; color: #6f6b8a; font-weight: 600;
}
.dow > div {
  padding: 10px 12px; border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 245, 247, 0.8); backdrop-filter: blur(2px);
  text-align: center; box-shadow: 0 4px 8px rgba(185, 164, 255, 0.1);
}

.grid { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }

.cell {
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 28px;
  min-height: 106px; padding: 14px;
  background: rgba(255, 245, 247, 0.6); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  box-shadow: 0 6px 14px rgba(185, 164, 255, 0.1);
}
.cell:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 18px 36px rgba(185, 164, 255, 0.2); }
.cell.today { background: rgba(185, 164, 255, 0.25); border: 2px solid #b9a4ff; box-shadow: 0 0 0 4px rgba(185, 164, 255, 0.15); }
.cell.selected { background: rgba(185, 164, 255, 0.4); border: 2px solid var(--primary); }
.cell.empty { cursor: default; opacity: .5; background: rgba(220, 210, 240, 0.2); }
.cell.empty:hover { transform: none; box-shadow: 0 6px 14px rgba(185, 164, 255, 0.1); }

.cell .date { font-weight: 700; font-size: 13px; color: #5f5b7a; display: flex; align-items: center; justify-content: space-between; }

.pill {
  font-size: 11px; padding: 5px 12px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(185, 164, 255, 0.3); backdrop-filter: blur(2px);
  font-weight: 600; color: #4b456b;
}

.events { display: flex; flex-direction: column; gap: 8px; }

.event-chip {
  font-size: 12px; padding: 8px 10px; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 240, 245, 0.9); backdrop-filter: blur(2px);
  display: flex; justify-content: space-between; gap: 8px;
  transition: all 0.2s; box-shadow: 0 2px 6px rgba(185, 164, 255, 0.1);
}
.event-chip:hover { background: #ffe9f2; transform: scale(1.02); }
.event-chip b { font-weight: 700; color: #514e6b; }
.event-chip .t { color: #9b8bb0; font-size: 11px; }

.day-list { padding: 0 20px 10px; display: flex; flex-direction: column; gap: 12px; }

.day-item {
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 28px;
  padding: 16px; background: rgba(255, 245, 247, 0.6); backdrop-filter: blur(2px);
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 14px rgba(185, 164, 255, 0.1);
}
.day-item:hover { transform: translateY(-4px) rotate(0.5deg); box-shadow: 0 20px 30px rgba(185, 164, 255, 0.2); }
.day-item .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.day-item .title {
  font-weight: 700; background: linear-gradient(145deg, #5f5b7a, #b9a4ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.day-item .meta { color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.5; }

.tag {
  font-size: 11px; padding: 5px 14px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(253, 224, 71, 0.3); font-weight: 600; color: #a06f2c;
}

.day-item[data-color="red"] .tag { background-color: #f87171; color: #fff; }
.day-item[data-color="blue"] .tag { background-color: #60a5fa; color: #fff; }
.day-item[data-color="green"] .tag { background-color: #4ade80; color: #fff; }

.panel-foot { padding: 16px 20px 20px; display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.backdrop { position: fixed; inset: 0; background: rgba(255, 215, 230, 0.4); backdrop-filter: blur(5px); z-index: 40; }

.modal {
  width: min(660px, calc(100% - 24px)); border: none; border-radius: 36px; padding: 0;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); color: var(--text);
  box-shadow: 0 40px 80px rgba(185, 164, 255, 0.3); z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.modal::backdrop { background: transparent; }

.modal-head {
  padding: 18px 20px; display: flex; justify-content: space-between; align-items: center;
  gap: 10px; border-bottom: 1px solid rgba(185, 164, 255, 0.3);
}
.modal-title {
  font-weight: 700; font-size: 18px;
  background: linear-gradient(145deg, #7c6e9f, #b9a4ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.modal-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.form { padding: 18px 20px; display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; color: #7b6f98; font-weight: 600; letter-spacing: 0.3px; }
.field input, .field select, .field textarea {
  padding: 12px 16px; border-radius: 30px;
  border: 1px solid rgba(185, 164, 255, 0.4);
  background: rgba(255, 255, 255, 0.8); color: var(--text); outline: none;
  transition: box-shadow 0.2s, border 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 4px rgba(185, 164, 255, 0.25); border-color: #b9a4ff;
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:520px) { .row { grid-template-columns: 1fr; } }

.hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; padding-left: 6px; }

.callout { border: 1px solid rgba(185, 164, 255, 0.4); border-radius: 28px; padding: 12px 16px; background: rgba(255, 245, 247, 0.7); backdrop-filter: blur(2px); }
.callout.warn { border-color: rgba(253, 224, 71, 0.5); background: rgba(253, 224, 71, 0.15); }

.modal-foot { padding: 14px 20px 20px; border-top: 1px solid rgba(185, 164, 255, 0.3); display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1 }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}
.cell, .day-item, .btn:not(:active) { animation: float 6s infinite ease-in-out; }
.cell:nth-child(odd), .day-item:nth-child(even) { animation-delay: 1s; }
.btn { animation-duration: 5s; }
.panel-head h2::after { content: " ✦"; font-size: 14px; opacity: 0.6; filter: drop-shadow(0 2px 2px rgba(185, 164, 255, 0.4)); }

/* ===== EVENT ROW LAYOUT ===== */
.event-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.event-info { display: flex; flex-direction: column; gap: 4px; }
.event-actions { display: flex; gap: 8px; }

/* ===== PILL BUTTON STYLE ===== */
.pill-btn { padding: 6px 14px; border-radius: 999px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s ease; }
.pill-btn.edit-btn { background: #e0e7ff; color: #3730a3; }
.pill-btn.edit-btn:hover { background: #c7d2fe; }
.pill-btn.delete-btn { background: #fee2e2; color: #b91c1c; }
.pill-btn.delete-btn:hover { background: #fecaca; }

/* ===== COLOR-CODED EVENT CHIPS ===== */
.event-chip[data-color="red"] { background-color: #fef2f2; border-color: #fecaca; }
.event-chip[data-color="red"] b, .event-chip[data-color="red"] .t { color: #b91c1c; }
.event-chip[data-color="blue"] { background-color: #eff6ff; border-color: #bfdbfe; }
.event-chip[data-color="blue"] b, .event-chip[data-color="blue"] .t { color: #1d4ed8; }
.event-chip[data-color="green"] { background-color: #f0fdf4; border-color: #bbf7d0; }
.event-chip[data-color="green"] b, .event-chip[data-color="green"] .t { color: #166534; }

/* ===== NOTIFICATION BANNER ===== */
.notif-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 14px 20px;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  border-bottom: 1px solid rgba(185, 164, 255, 0.4);
  font-size: 14px; font-weight: 600; color: #4b3f6b;
}
.notif-banner[hidden] { display: none !important; }
.notif-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.notif-banner .btn.primary { padding: 8px 18px; font-size: 13px; }
.notif-banner .btn.ghost { padding: 8px 14px; font-size: 13px; }

/* ===== SELECTED DAY-ITEM HIGHLIGHT ===== */
.day-item.selected {
  border: 2px solid var(--primary);
  background: rgba(185, 164, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(185, 164, 255, 0.25), 0 8px 20px rgba(185, 164, 255, 0.2);
  transform: translateY(-2px) scale(1.01);
}
.day-item.selected .title {
  background: linear-gradient(145deg, #6c3fc5, #b9a4ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.day-item.selected .tag {
  background: rgba(185, 164, 255, 0.4);
  border-color: rgba(185, 164, 255, 0.6);
  color: #6c3fc5;
}

/* ===== IMPORT MODAL ===== */
.import-body {
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}

.import-drop {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(185, 164, 255, 0.5); border-radius: 24px;
  padding: 40px 20px; cursor: pointer;
  background: rgba(255, 245, 247, 0.5);
  transition: border-color 0.2s, background 0.2s;
  text-align: center; user-select: none;
}
.import-drop:hover, .import-drop.drag-over {
  border-color: var(--primary); background: rgba(185, 164, 255, 0.12);
}
.import-drop.has-file {
  border-style: solid; border-color: var(--primary);
  background: rgba(185, 164, 255, 0.08); padding: 24px 20px;
}
.import-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.import-drop-icon { font-size: 36px; line-height: 1; }
.import-drop-text { font-size: 15px; font-weight: 700; color: #514e6b; }
.import-drop-hint { font-size: 12px; color: var(--muted); }
.import-drop-filename { font-size: 12px; color: var(--primary2); font-weight: 600; margin-top: 4px; }

.import-preview { border: 1px solid rgba(185, 164, 255, 0.3); border-radius: 20px; overflow: hidden; }
.import-preview-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: rgba(185, 164, 255, 0.12);
  font-size: 13px; font-weight: 700; color: #514e6b; flex-wrap: wrap; gap: 6px;
}
.import-skip-label { font-size: 12px; color: #a06f2c; }
.import-preview-list { max-height: 180px; overflow-y: auto; padding: 6px 0; }
.import-preview-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  padding: 7px 16px; font-size: 12px;
  border-bottom: 1px solid rgba(185, 164, 255, 0.1); align-items: center;
}
.import-preview-row:last-child { border-bottom: none; }
.import-prev-title { font-weight: 700; color: #514e6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-prev-date { color: var(--muted); font-size: 11px; white-space: nowrap; }
.import-prev-time {
  font-size: 11px; padding: 3px 10px; border-radius: 40px;
  background: rgba(253, 224, 71, 0.3); border: 1px solid rgba(255, 255, 255, 0.7);
  color: #a06f2c; font-weight: 600; white-space: nowrap;
}
.import-preview-row[data-color=red]   .import-prev-time { background: rgba(248, 113, 113, 0.15); color: #b83b3b; }
.import-preview-row[data-color=blue]  .import-prev-time { background: rgba(96, 165, 250, 0.15);  color: #1d4ed8; }
.import-preview-row[data-color=green] .import-prev-time { background: rgba(74, 222, 128, 0.15);  color: #166534; }
.import-preview-more { text-align: center; padding: 8px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ===== RECURRING EVENT STYLING ===== */
.items-center { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.mt-10 { margin-top: 10px; }
.checkbox-field { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: #7b6f98; transition: transform 0.2s ease; }
.checkbox-field:hover { transform: translateX(4px); }
.checkbox-field input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 8px;
  border: 1.5px solid rgba(185, 164, 255, 0.4); background: rgba(255, 255, 255, 0.8);
  cursor: pointer; position: relative; transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(185, 164, 255, 0.1);
}
.checkbox-field input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary2); }
.checkbox-field input[type="checkbox"]:checked::after {
  content: "✓"; position: absolute; color: #2d2d3a; font-size: 14px; font-weight: 800;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.checkbox-field input[type="checkbox"]:focus { box-shadow: 0 0 0 4px var(--focus); }
#repeatOptions {
  background: rgba(185, 164, 255, 0.05); border: 1px dashed rgba(185, 164, 255, 0.4);
  padding: 16px; border-radius: 24px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 12px; animation: float 6s infinite ease-in-out;
}

/* ===== DARK MODE ===== */
body.dark { --bg: #0f172a; background-color: var(--bg); background-image: none; color: #f1f5f9; }
body.dark button { color: #e9f0f7; }
body.dark .container, body.dark .calendar, body.dark .side, body.dark .panel { background: #1e293b; color: #e5e7eb; box-shadow: none; }
body.dark .cell { background: #334155; border-color: #475569; }
body.dark .cell .date span:first-child { color: #ffffff; opacity: 0.9; font-weight: 700; }
body.dark .cell:hover { box-shadow: 0 0 0 1px #7c9cff, 0 0 12px rgba(124, 156, 255, 0.25); }
body.dark .cell.selected { background: rgba(124, 156, 255, 0.25); border-color: #7c9cff; }
body.dark h1, body.dark h2, body.dark h3, body.dark .title { color: #ffffff; }
body.dark .btn { background: #334155; color: #f1f5f9; border: 1px solid #475569; }
body.dark .btn.ghost { color: #f1f5f9; }
body.dark .btn.clear-custom { background: #3b82f6; color: white; border: none; }
body.dark .btn.clear-custom:hover { background: #2563eb; }
body.dark input, body.dark textarea { background: #1e293b; color: #fff; border: 1px solid #475569; }
body.dark input::placeholder { color: #94a3b8; }
body.dark dialog { background: #1e293b; color: white; }
body.dark p, body.dark .meta, body.dark .t { color: #cbd5e1; }
body.dark .weekday, body.dark .weekdays div { background: #eaecf0; color: #1e293b; font-weight: 600; }
body.dark .month-select, body.dark .year-select { background: #334155; color: #f1f5f9; border: 1px solid #475569; box-shadow: none; }
body.dark .event-chip { color: #ffffff; }
body.dark .day-item { background: #334155; color: #f1f5f9; }
body.dark .day-item .title { color: #ffffff; }
body.dark .day-item .meta { color: #cbd5e1; }
body.dark #themeToggle { background: #2b3648; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
body.dark .search { background: #1e293b; color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); }
body.dark .wrap, body.dark .panel, body.dark .panel.side, body.dark .modal, body.dark .grid { background-color: #1e293b; border-color: #334155; color: #f1f5f9; box-shadow: none; }
body.dark .pill-btn.edit-btn { background: #1e3a8a; color: #dbeafe; }
body.dark .pill-btn.delete-btn { background: #7f1d1d; color: #fee2e2; }

/* Dark mode – color-coded event chips */
body.dark .event-chip[data-color="red"] { background-color: #2e1515; border-color: #5b2d2d; }
body.dark .event-chip[data-color="red"] b, body.dark .event-chip[data-color="red"] .t { color: #fca5a5; }
body.dark .event-chip[data-color="blue"] { background-color: #1c273a; border-color: #354763; }
body.dark .event-chip[data-color="blue"] b, body.dark .event-chip[data-color="blue"] .t { color: #93c5fd; }
body.dark .event-chip[data-color="green"] { background-color: #172a1e; border-color: #2d553a; }
body.dark .event-chip[data-color="green"] b, body.dark .event-chip[data-color="green"] .t { color: #86efac; }

/* Dark mode – notification banner */
body.dark .notif-banner { background: linear-gradient(135deg, #1e1b33, #2d1e2f); border-bottom-color: #475569; color: #e2e8f0; }

/* Dark mode – selected day-item */
body.dark .day-item.selected {
  border-color: #7c9cff;
  background: rgba(124, 156, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(124, 156, 255, 0.2), 0 8px 20px rgba(124, 156, 255, 0.15);
}
body.dark .day-item.selected .tag {
  background: rgba(124, 156, 255, 0.25);
  border-color: rgba(124, 156, 255, 0.5);
  color: #93c5fd;
}

/* Dark mode – import modal */
body.dark .import-drop { background: #1e293b; border-color: #475569; }
body.dark .import-drop:hover, body.dark .import-drop.drag-over { border-color: #7c9cff; background: rgba(124, 156, 255, 0.1); }
body.dark .import-drop-text { color: #f1f5f9; }
body.dark .import-preview { background: #1e293b; border-color: #334155; }
body.dark .import-preview-head { background: rgba(124, 156, 255, 0.1); color: #e2e8f0; }
body.dark .import-prev-title { color: #f1f5f9; }
body.dark .import-preview-row { border-bottom-color: #334155; }

/* Dark mode – recurring events */
body.dark .checkbox-field span { color: #cbd5e1; }
body.dark .checkbox-field input[type="checkbox"] { background: #9aa2ac; border-color: #475569; }
body.dark #repeatOptions { background: rgba(255, 255, 255, 0.03); border-color: #475569; }