:root{
  --bg:#ffffff; --muted:#64748b; --accent:#2563eb; --accent-soft:#eef6ff; --text:#0b1220;
  --dot-festival:#2563eb; --dot-jayanti:#ffd54d; --dot-puny:#9ca3af; --dot-task:#ef4444; --dot-holiday:#16a34a; --dot-histent: #6a0dad;
  --topbar-h:60px; --sheet-collapsed:260px; --sheet-expanded:92vh; --shadow:0 16px 36px rgba(2,6,23,0.08);
  /* tightened sizing to allow 6-row months without overlapping bottom sheet */
  --cell-min-height:40px;
  --cell-padding-vert:2px;
  --date-font-size:0.92rem;
  --mini-month-font:12px;
}

/* Reset & typography */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter, 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif}
html,body{height:100%;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{cursor:pointer;border:0;background:transparent}

/* Topbar */
.topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid rgba(2,6,23,0.06);
  z-index: 2200;
}

.top-section{
  display: flex;
  align-items: center;
}

.top-left{
  justify-content: flex-start;
}

.top-center{
  justify-content: center;
}

.top-right{
  justify-content: flex-end;
  gap: 12px;
}

.top-icon{
  width:52px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text);background:transparent;
}
.top-icon.large{ width:52px; height:44px; font-size:22px; }
.top-icon svg{width:22px;height:22px}
.today-chip{
  min-width:42px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-weight:800;padding:6px 10px;border:0;font-size:18px; cursor: pointer;
}

.top-brand{
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-logo{
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
}

.brand-text{
  font-size:18px;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}

/* App container below topbar */
.app-wrap{
  max-width:1100px;margin:calc(var(--topbar-h) + 14px) auto;padding:0 14px;
}

/* Header with prev/title/next */
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
.title{font-weight:800;font-size:22px;padding:8px 0 6px;text-align:center;flex:1}

/* Week header */
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;color:var(--muted);font-weight:700;padding:6px 0;height:28px;align-items:end}
.weekday{text-align:center;font-size:13px;white-space:nowrap}

/* calendar wrap/grid */
.calendar-wrap{width:100%;overflow:hidden;border-radius:8px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;box-sizing:border-box}
.grid, .grid * { box-sizing: border-box; }

/* cell compact */
.cell{
  background:transparent;min-height:var(--cell-min-height);padding:var(--cell-padding-vert) 6px 6px 6px;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  border-radius:6px;
}
.cell:hover{transform:translateY(-3px)}
.cell.other-month{opacity:0.45;color:var(--muted)}
.daynum{font-weight:700;font-size:var(--date-font-size);text-align:center;width:100%;line-height:1;margin-top:2px;z-index:1;display:inline-block;padding:2px 6px;border-radius:8px}
.daynum-wrap{display:flex;align-items:center;justify-content:center;width:100%}

/* Today: number-only highlight (not whole cell) */
.daynum.todayNumber{
  background:var(--accent-soft); color:var(--accent);
  padding:4px 8px;border-radius:8px;font-weight:800;
}

/* Selected date: centered thin border (appears around whole cell) */
/* IMPORTANT: selected class is only applied for user-selected date (not automatically for today) */
.cell.selected{
  box-shadow: 0 0 0 2px rgba(100,116,139,0.18);
  border-radius:8px;
}

/* merged dots */
.dot-row{display:flex;gap:4px;align-items:center;margin-top:6px;justify-content:center;z-index:1;flex-wrap: nowrap;max-width: 100%;overflow: hidden;}
.dot{width:5px;height:5px;border-radius:50%}
.task-more{background:rgba(0,0,0,0.06);padding:1px 4px;border-radius:8px;font-size:7px;color:var(--muted);white-space: nowrap;flex-shrink: 0;}
/* ===== UPOSATH INDICATOR ===== */
.uposath-indicator{
  font-size:14px;
  line-height:1;
  margin-top:2px;
  opacity:0.85;
  pointer-events:none;
  user-select:none;
}

.uposath-purnima{ color:#f59e0b; }   /* saffron */
.uposath-amavasya{ color:#64748b; } /* muted grey */
.uposath-ashtami{ color:#2563eb; }  /* dhamma blue */


/* week view tweak to avoid horizontal overflow */
.grid.week-view{ grid-auto-rows:1fr; }

/* year view: UPDATED to 2x6 centered */
.year-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px;justify-content:center;box-sizing:border-box}
.mini-month{padding:8px;border:1px solid rgba(2,6,23,0.04);border-radius:8px;background:var(--bg)}
.mini-header{font-weight:700;margin-bottom:6px;text-align:center;font-size:13px}
.mini-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;color:var(--muted);font-weight:700;font-size:11px;margin-bottom:6px}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:var(--mini-month-font)}

/* day summary (grey area / bottom sheet on mobile) */
.day-summary{
  width:100%;max-width:1100px;margin:14px auto 0;background:#f7f8fb;border-radius:0;padding:12px;
  box-shadow:none;transition:height .22s cubic-bezier(.2,.9,.2,1),transform .2s;position:relative;overflow:hidden;
}
.summary-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px}
.summary-left,.summary-center,.summary-right{min-width:110px;text-align:center}
.summary-center{flex:1;font-weight:800;font-size:1.05rem;color:var(--accent);display:flex;flex-direction:column;align-items:center}
.small-muted{font-size:13px;color:var(--muted);font-weight:600}
.summary-right{
  cursor:pointer;
}

/* tithi/vikram two-line */
.tithi-line{font-weight:700;font-size:15px;line-height:1.05}
.tithi-sub{font-size:13px;color:var(--muted)}
.purnima-line,.amavasya-line{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.summary-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-right:8px}

/* event boxes */
.summary-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.event-box{background:#fff;padding:10px;border-radius:8px;border-left:6px solid transparent;display:flex;align-items:center;justify-content:space-between}
.event-left{display:flex;align-items:center;gap:10px}
.event-title{font-weight:700}
.event-festival{border-left-color:var(--dot-festival)}
.event-jayanti{border-left-color:var(--dot-jayanti)}
.event-puny{border-left-color:var(--dot-puny)}
.event-task{border-left-color:var(--dot-task);border:1px solid rgba(239,68,68,0.08)}
.event-holiday{border-left-color:var(--dot-holiday)}
.event-histent { border-left-color:var(--dot-histent)}
.event-more{
  margin-top:6px;
  padding:4px 10px;
  font-size:12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.15);
  background:transparent;
  cursor:pointer;
}

.event-more:hover{
  background:rgba(0,0,0,0.05);
}


/* FAB - smaller & bolder */
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:28px;border:0;box-shadow:var(--shadow);z-index:9999;display:flex;align-items:center;justify-content:center;font-weight:800}




.undo-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:#222;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  z-index:50000;
  font-size:14px;
}
.undo-toast button{
  background:none;
  border:0;
  color:#4da3ff;
  font-weight:700;
  cursor:pointer;
}
.undo-toast.hidden{
  display:none;
}

/* modal */

	.modal{
	  position: fixed;
	  inset: 0;
	  display: none;
	  align-items: center;
	  justify-content: center;
	  background: rgba(15,23,42,.42);
	  backdrop-filter: blur(6px);
	  z-index: 30000;
	  padding: 24px;
	}

	.modal.show{
	  display: flex;
	}

	.modal-card{
	  width: min(680px, 92vw);
	  min-height: 520px;
	  background: #fff;
	  border-radius: 24px;
	  box-shadow: 0 24px 60px rgba(0,0,0,.18);
	  overflow: hidden;
	}

	.modal-header{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 18px 22px;
	  border-bottom: 1px solid rgba(0,0,0,.06);
	}

	.modal-title{
	  font-size: 22px;
	  font-weight: 800;
	}

	.modal-close{
	  border: none;
	  background: #f1f5f9;
	  padding: 10px 16px;
	  border-radius: 10px;
	  cursor: pointer;
	  font-weight: 700;
	}

	.modal-body{
	  padding: 20px 22px;
	}

	.modal-body label{
	  display: block;
	  margin-bottom: 14px;
	  font-weight: 600;
	}

	.modal-body .input{
	  width: 100%;
	  padding: 12px 14px;
	  margin-top: 6px;
	  border: 1px solid #dbe3ef;
	  border-radius: 12px;
	}

	#taskDesc{
	  min-height: 60px;
	}

	.modal-actions{
	  display: flex;
	  gap: 10px;
	  margin-top: 18px;
	}
	
	#saveTaskBtn{
	  background:#2563eb;
	  color:#fff;
	  border:none;
	  border-radius:12px;
	  padding:10px 16px;
	  font-weight:700;
	  box-shadow:0 8px 20px rgba(37,99,235,.25);
	}

	#cancelTaskBtn{
	  background:#f1f5f9;
	  border:none;
	  border-radius:12px;
	  padding:10px 16px;
	}

/* Pop Ups */

.info-popup-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:40000;
}

.info-popup{
  background:#fff;
  width:100%;
  max-width:520px;
  border-radius:16px 16px 0 0;
  padding:16px;
}

.info-text{
  font-size:14px;
  line-height:1.5;
  margin-bottom:12px;
}

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

.info-actions button{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:none;
  font-size:14px;
}


/* responsive rules */
@media (max-width:920px){
  .app-wrap{margin-top:calc(var(--topbar-h) + 6px);padding:0 12px}
  .grid .cell{min-height:var(--cell-min-height);padding:var(--cell-padding-vert) 6px 6px 6px}
  .day-summary{position:fixed;left:0;right:0;bottom:0;height:var(--sheet-collapsed);max-height:var(--sheet-expanded);border-radius:14px 14px 0 0;padding-bottom:12px;z-index:2300}
  main{padding-bottom:calc(var(--sheet-collapsed) + 40px)}
}
@media (min-width:921px){
  main{min-height:520px}
  .day-summary{position:relative;margin-top:18px;border-radius:0;padding-bottom:18px}
}

/* prevent horizontal overflow in views */
.grid, .year-grid, .mini-grid { box-sizing:border-box; width:100%; }

.hidden{display:none}
.small{font-size:13px}

/* ===== Diary Editor Layout ===== */

.diary-editor-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.diary-title {
  border: none;
  outline: none;
  font-size: 22px;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.diary-editor {
  flex: 1;
  padding: 16px;
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  overflow-y: auto;
}

.diary-editor ul,
.diary-editor ol {
  padding-left: 22px;
  margin-left: 0;
}

.diary-editor p {
  margin: 6px 0;
}


/* Toolbar */
.editor-toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.editor-toolbar button {
  flex: 1;
  padding: 10px 0;
  font-size: 15px;
  border: none;
  background: #f2f2f2;
  border-radius: 8px;
}

/* Word counter */
.word-count {
  text-align: right;
  font-size: 12px;
  padding: 6px 12px;
  color: var(--muted);
}

#noterContainer{
   height:100%;
   display:flex;
   flex-direction:column;
}

#sidebar,
#home-page,
#editor-page{
   height:100%;
}

.sc-actions{
  display:flex;
  align-items:center;
}

.sc-filter-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  font-size:20px;
}

.filter-wrapper{
  position:relative;
}

.sc-filter-menu{
  position:absolute;
  top:40px;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
  display:none;
  min-width:170px;
  z-index:10000;
}

.filter-item{
  padding:10px 14px;
  cursor:pointer;
  font-size:14px;
}

.filter-item:hover{
  background:var(--surface);
}


/* style from js */
.sc-overlay {
  position:fixed; left:0; top:0; width:100%; height:100vh; background:#fff; z-index:9999; overflow:auto; padding:18px;
}
.sc-overlay .sc-header { display:flex; align-items:center; justify-content:space-between; position:relative; gap:12px; margin-bottom:12px; }
.sc-overlay .sc-title { font-weight:800; font-size:18px; }
.sc-overlay .sc-close { font-size:20px; padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:transparent; }
.sc-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.sc-list { display:flex; flex-direction:column; gap:8px; }
.sc-item { padding:12px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); display:flex; justify-content:space-between; gap:10px; align-items:center; }
.sc-meta { font-size:13px; color:var(--muted); }
.sc-filter { padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:#fff; }
.small-actions button { margin-left:6px; }
.sc-empty { color:var(--muted); padding:12px; text-align:center; }

/* Menu visual polish */
.sb-panel { width:320px; padding:16px; border-radius:0 12px 12px 0; box-shadow: 4px 0 24px rgba(10,20,40,0.08); background:#fff; }
.sb-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; transition:background .15s, transform .12s; cursor:pointer; }
.sb-item:hover { background: rgba(37,99,235,0.04); transform: translateX(2px); }
.sb-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
.sb-badge { margin-left:auto; background:var(--accent); color:white; padding:2px 8px; border-radius:999px; font-size:12px; }

/* Schedule lazy loader */
.load-more { padding:10px; text-align:center; cursor:pointer; color:var(--accent); }

/* small responsive tweak for overlay */
@media (max-width:920px){
  .sc-overlay { top:0; padding:12px; }
  .sb-panel { width: 100%; border-radius: 0; }
}


/* end style from js */

@media (min-width: 921px){

  /* Full width desktop layout */
  .app-wrap{
    max-width: 100%;
    width: 100%;
    margin: calc(var(--topbar-h) + 14px) 0 0;
    padding: 0 32px;
  }

  /* Header */
  .title{
    font-size: 34px;
    font-weight: 800;
    padding: 12px 0 16px;
  }

  /* Weekday names */
  .weekdays{
    gap: 16px;
    height: 40px;
    padding: 10px 0;
  }

  .weekday{
    font-size: 18px;
    font-weight: 700;
  }

  /* Calendar grid */
  .grid{
    gap: 16px;
  }

  /* Bigger date cells */
  .cell{
    min-height: 88px;
    padding: 10px 8px;
    border-radius: 12px;
  }

  /* Bigger date numbers */
  .daynum{
    font-size: 1.45rem;
    font-weight: 800;
  }

  /* Today highlight */
  .daynum.todayNumber{
    padding: 6px 12px;
    border-radius: 10px;
  }

  /* Dots spacing */
  .dot-row{
    margin-top: 10px;
    gap: 8px;
  }

  .dot{
    width: 8px;
    height: 8px;
  }

  /* Better top icons */
  .top-icon{
    width: 56px;
    height: 46px;
    font-size: 22px;
  }

  /* Bottom summary full width */
  .day-summary{
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    border-radius: 14px;
  }
}

.seo-section{
  margin-top: 40px;
  padding: 40px 20px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.seo-container{
  max-width: 1100px;
  margin: 0 auto;
}

.seo-section h1{
  font-size: 28px;
  margin-bottom: 16px;
}

.seo-section h2{
  font-size: 22px;
  margin-bottom: 12px;
}

.seo-section p{
  line-height: 1.8;
  color: #374151;
}

.seo-demo-box{
  margin-top: 24px;
  padding: 20px;
  background: #f8fbff;
  border-radius: 14px;
  border: 1px solid #dbeafe;
}

.site-footer{
  padding: 24px 20px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.footer-container{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.footer-links{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.footer-links a{
  text-decoration: none;
  color: #2563eb;
  font-weight: 600;
}

.footer-copy{
  color: #6b7280;
  font-size: 14px;
}

@media (display-mode: standalone),
       (max-width: 768px){
  .seo-section,
  .site-footer{
    display:none;
  }
}

.date-info-card{
  max-width: 420px;
}

.date-info-events{
  min-height: 80px;
  font-size: 16px;
  line-height: 1.8;
}

.date-event-item{
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
}

.date-info-card .modal-actions{
  display:flex;
  gap:12px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e5e7eb;
}

.date-info-card .modal-actions button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:0 16px;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}

#dateAddEventBtn{
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.18);
}

#dateAddEventBtn:hover{
  transform:translateY(-1px);
}

#dateCloseBtn{
  background:#f3f4f6;
  color:#111827;
}

.share-card-wrap{
  max-width: 420px;
}

.share-card{
  margin: 16px auto;
  padding: 24px 20px;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.share-date{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}

.share-image{
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto 18px;
  display: block;
}

.share-event-name{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 16px;
}

.share-copy{
  font-size: 14px;
  color: #6b7280;
}

#shareCardModal .modal-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

#shareCardModal .modal-actions button{
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* DOWNLOAD - BLUE */
#downloadShareCardBtn{
  background: #2563eb;
  color: #fff;
}

/* SHARE - GREEN */
#ShareNowCardBtn{
  background: #16a34a;
  color: #fff;
}

/* CLOSE - RED */
#closeSharePreviewBtn{
  background: #dc2626;
  color: #fff;
}

/* subtle animation */
#shareCardModal .modal-actions button:active{
  transform: scale(0.94);
}

.event-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

.event-share,
.event-more{
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: none;
  border-radius: 12px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;

  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);

  transition: transform .18s ease;
}

.event-share:active,
.event-more:active{
  transform: scale(0.95);
}

.event-share .material-symbols-outlined,
.event-more .material-symbols-outlined{
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  display: block;

  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.event-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-btn-edit .material-symbols-outlined{
  font-size:22px;
  background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

.icon-btn-edit:hover{
  transform:translateY(-2px) scale(1.06);
  opacity:0.9;
}

/* ===== View Jump Popup ===== */
.view-jump-popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40000;
}

.view-jump-card{
  width: min(380px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.view-jump-top{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.view-mode-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.jump-view-item{
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}

.jump-view-item:hover{
  background: #f3f4f6;
}

.jump-year-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
}

#jumpYearText{
  font-size: 28px;
  font-weight: 800;
}

.jump-month-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.jump-month-btn{
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  padding: 14px 8px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: all .2s ease;
}

.jump-month-btn:hover{
  background: #2563eb;
  color: #fff;
}

.jump-month-btn.active{
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 700;
}