/* MyFreeCalendar — Bright "Sunburst" theme
   Distinctive identity: luminous sky, sunburst halo, orbit accent, candy-glass tiles.
*/
:root{
  --bg1:#FFF7D6;
  --bg2:#E9F7FF;
  --bg3:#F2E8FF;

  --ink:#121826;
  --muted:#55607a;

  --card:#ffffffcc;
  --cardSolid:#fff;
  --line: rgba(18,24,38,.10);

  --blue:#2F7BFF;
  --blue2:#1E5FE6;
  --cyan:#00D3FF;
  --pink:#FF4FD8;
  --lime:#5CFF8B;
  --sun:#FFCC3D;

  --shadow: 0 18px 60px rgba(18,24,38,.10);
  --shadow2: 0 10px 25px rgba(18,24,38,.08);
  --radius: 22px;

  --focus: 0 0 0 5px rgba(47,123,255,.22);

  /* Calendar theme (user-customizable): affects the calendar card + grid, not the page background */
  --calCard: var(--card);
  --calHeader: rgba(255,255,255,.55);
  --calDow: rgba(255,255,255,.55);
  --calTile: rgba(255,255,255,.68);
  --calTileMuted: rgba(255,255,255,.40);
  --calAccent: var(--blue);
  --calAccent2: var(--blue2);
  --calSun: var(--sun);
  /* Derived soft colors (populated by JS so tiles can keep their glow) */
  --calSunSoft: rgba(255,204,61,.25);
  --calAccentSoft: rgba(0,211,255,.18);
  --calAccentRing: rgba(47,123,255,.35);
  --calAccentBorder: rgba(47,123,255,.22);
  --calAccentFill: rgba(47,123,255,.10);
}

/* Theme vars are CSS custom properties so users can personalize colors.
   The calendar UI includes a small theme picker that updates these at runtime
   and saves them in localStorage for this device.
*/

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,204,61,.55), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(0,211,255,.35), transparent 55%),
    radial-gradient(800px 520px at 85% 85%, rgba(255,79,216,.22), transparent 60%),
    linear-gradient(140deg, var(--bg1), var(--bg2) 40%, var(--bg3));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Background ornaments */
.sky{position:fixed; inset:0; pointer-events:none; z-index:-1}
.sunburst{
  position:absolute;
  width:780px;height:780px;
  left:-260px; top:-320px;
  background:
    radial-gradient(circle at 40% 45%, rgba(255,255,255,.85), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 50%, rgba(255,204,61,.90), rgba(255,204,61,0) 62%);
  filter: blur(.2px);
  opacity:.9;
}
.float{
  position:absolute; border-radius:999px;
  filter: blur(0px);
  opacity:.75;
  mix-blend-mode:soft-light;
}
.float-a{width:240px;height:240px; right: -70px; top: 90px;
  background: radial-gradient(circle at 30% 30%, rgba(0,211,255,.85), rgba(0,211,255,0) 62%);
}
.float-b{width:330px;height:330px; left: 40%; top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(255,79,216,.55), rgba(255,79,216,0) 65%);
}
.float-c{width:300px;height:300px; left: 55%; bottom: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(92,255,139,.55), rgba(92,255,139,0) 65%);
}

/* Top bar */
.top{
  max-width:1180px;
  margin:0 auto;
  padding:16px 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex;align-items:center;gap:12px}
.brandLogo{
  width:34px;height:34px;
  border-radius:14px;
  padding:5px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(18,24,38,.10);
  box-shadow: 0 16px 36px rgba(47,123,255,.14);
}
.brandMark{
  width:44px;height:44px;border-radius:16px;
  background: conic-gradient(from 210deg, var(--sun), var(--pink), var(--cyan), var(--lime), var(--sun));
  box-shadow: 0 16px 36px rgba(47,123,255,.18);
  position:relative;
  overflow:hidden;
}
.spark{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.70), transparent 55%);
  transform: rotate(18deg);
}
.spark.s2{
  inset:-50%;
  background: radial-gradient(circle at 65% 60%, rgba(255,255,255,.55), transparent 60%);
  transform: rotate(-10deg);
}
.brandText{display:flex;flex-direction:column;line-height:1.05}
.name{font-weight:900;letter-spacing:-.03em}
.tag{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}

.topRight{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* Copy/share toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  max-width:min(560px, calc(100% - 24px));
  background: rgba(255,255,255,.92);
  border:1px solid rgba(18,24,38,.10);
  border-radius: 999px;
  padding:10px 14px;
  font-weight:1000;
  color: rgba(18,24,38,.88);
  box-shadow:0 16px 44px rgba(18,24,38,.18);
  backdrop-filter: blur(14px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Shared UI */
.wrap{max-width:1180px;margin:0 auto;padding:10px 16px 56px}
.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  padding:10px 12px;
  border-radius:999px;
  font-weight:850;
  font-size:14px;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform .08s ease, filter .12s ease, background .12s ease;
}
.chip:hover{filter:brightness(1.03)}
.chip:active{transform:translateY(1px)}
.chip:focus{outline:none; box-shadow: var(--focus)}
.chipPrimary{
  border:0;
  color:#08101f;
  background: linear-gradient(135deg, rgba(255,204,61,.95), rgba(0,211,255,.75));
}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  padding:12px 14px;
  border-radius:16px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform .08s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none; box-shadow: var(--focus)}
.btnPrimary{
  border:0;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  color:white;
  box-shadow: 0 18px 40px rgba(47,123,255,.22);
}

.link{font-weight:900;color:rgba(18,24,38,.80)}
.link:hover{text-decoration:underline}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  margin-top:8px;
}
.heroCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
}
.heroCard:before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,204,61,.30), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(0,211,255,.22), transparent 55%),
    radial-gradient(circle at 55% 70%, rgba(255,79,216,.16), transparent 60%);
  transform: rotate(8deg);
}
.heroCard > *{position:relative}

.pill{
  display:inline-flex;align-items:center;
  font-size:12px;
  font-weight:900;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(18,24,38,.10);
  box-shadow: var(--shadow2);
}
h1{
  margin:12px 0 10px;
  font-size:38px;
  letter-spacing:-.05em;
  line-height:1.05;
}
.lead{
  margin:0 0 14px;
  color:rgba(18,24,38,.75);
  font-size:15px;
  line-height:1.55;
  max-width:66ch;
}
.heroActions{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin-top:10px;
}

.toggle{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px dashed rgba(47,123,255,.28);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
}
.toggle input{width:18px;height:18px;margin-top:2px}
.toggle strong{display:block;font-size:13px}
.toggle em{display:block;font-style:normal;color:var(--muted);font-size:12px;margin-top:2px}

.miniStats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.stat{
  border:1px solid var(--line);
  background: rgba(255,255,255,.60);
  border-radius: 18px;
  padding:10px 12px;
  box-shadow: var(--shadow2);
}
.k{font-size:12px;color:var(--muted);font-weight:900}
.v{font-size:15px;font-weight:1000; letter-spacing:-.02em;margin-top:4px}
.v.small{font-size:13px;color:rgba(18,24,38,.78);font-weight:900}

/* Hero art (distinctive) */
.heroArt{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
  min-height:260px;
}

/* Right-side hero image (replaces orbit spinner) */
.heroImageWrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 10px;
}
.heroImg{
  width:min(520px, 92%);
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(20,20,43,.18));
  transform: translateY(-4px);
}
.orbit{
  position:absolute;
  width:220px;height:220px;
  left: -30px; top: -30px;
  border-radius:999px;
  border:2px solid rgba(18,24,38,.08);
  background: radial-gradient(circle at 40% 45%, rgba(255,204,61,.22), transparent 60%);
  animation: spin 18s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.planet{
  position:absolute; width:18px;height:18px;border-radius:999px;
  box-shadow: 0 12px 20px rgba(18,24,38,.10);
}
.p1{left:16px; top: 110px; background: linear-gradient(135deg, var(--pink), var(--cyan))}
.p2{left:170px; top: 25px; background: linear-gradient(135deg, var(--sun), var(--lime))}
.p3{left:155px; top: 175px; background: linear-gradient(135deg, var(--blue), var(--pink))}

.poster{
  position:absolute;
  right:14px; bottom:14px;
  width:min(320px, 84%);
  border-radius: 22px;
  border:1px solid rgba(18,24,38,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.posterTop{
  display:flex; gap:6px;
  padding:10px 12px;
  border-bottom:1px solid rgba(18,24,38,.08);
  background: rgba(255,255,255,.65);
}
.posterDot{width:10px;height:10px;border-radius:999px;background:rgba(18,24,38,.12)}
.posterBody{padding:12px}
.posterTitle{font-weight:1000; letter-spacing:-.02em}
.posterLine{height:10px;border-radius:999px;background:rgba(18,24,38,.08); margin-top:10px}
.posterLine.w2{width:85%}
.posterLine.w3{width:65%}
.posterStamp{
  margin-top:12px;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:28px;border-radius:999px;
  font-weight:1000;
  background: linear-gradient(135deg, rgba(255,204,61,.95), rgba(255,79,216,.70));
  color:#111;
}

/* Calendar */
.calendarCard{
  margin-top:16px;
  background: var(--calCard);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  /* IMPORTANT: let the month/year picker overflow on desktop */
  overflow: visible;
}
.calHeader{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  border-bottom: 1px solid rgba(18,24,38,.08);
  background: var(--calHeader);
}
.calTitle{display:flex;flex-direction:column;gap:2px;position:relative}

/* Clickable month label + picker */
.monthPick{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  color:var(--ink);
}
.monthText{font-size:18px;font-weight:1000;letter-spacing:-.02em}
.caret{font-size:14px;opacity:.7}
.monthPick:focus{outline:none;box-shadow:var(--focus);border-radius:14px}

.monthPicker{
  width:min(360px, 100%);
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(20,20,43,.10);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow:0 18px 44px rgba(20,20,43,.18);
  position:absolute;
  left:0;
  top:42px;
  z-index:30;
  display:none;
}
.monthPicker[aria-hidden="false"]{display:block}
.pickRow{display:grid;gap:6px;margin-bottom:10px}
.pickLabel{font-size:12px;font-weight:900;letter-spacing:.02em;color:rgba(20,20,43,.70)}
.pickSelect{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(20,20,43,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  font:inherit;
  font-weight:900;
  color: rgba(20,20,43,.92);
  padding-right:42px;
  background-image:
    radial-gradient(12px 12px at 18px 50%, rgba(255,204,61,.35), transparent 62%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%231114" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;
  background-position: 12px 50%, calc(100% - 14px) 50%;
  background-size: 28px 28px, 18px 18px;
}
.pickSelect:focus{outline:none;box-shadow:0 0 0 4px rgba(47,123,255,.18)}
.pickActions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.range{font-size:12px;color:var(--muted);font-weight:900;margin-top:2px}
.calTools{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.calBody{padding:14px}
.dow{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}
.dow div{
  text-align:center;
  font-size:12px;
  font-weight:1000;
  color:rgba(18,24,38,.70);
  padding:9px 8px;
  border-radius: 16px;
  background: var(--calDow);
  border:1px solid rgba(18,24,38,.08);
}

.days{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:8px;
}

.day{
  min-height:96px;
  border-radius: 18px;
  border:1px solid rgba(18,24,38,.10);
  background:
    radial-gradient(120px 90px at 18% 18%, var(--calSunSoft), transparent 60%),
    radial-gradient(120px 90px at 82% 25%, var(--calAccentSoft), transparent 65%),
    var(--calTile);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 20px rgba(18,24,38,.06);
  padding:10px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: transform .08s ease, filter .12s ease;
}
.day:hover{filter:brightness(1.02)}
.day:active{transform:translateY(1px)}
.day.mutedDay{
  background: var(--calTileMuted);
  opacity:.70;
}
.day.weekend{
  border-color: var(--calAccentSoft);
}
.dayNum{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12px;
  color:rgba(18,24,38,.65);
  font-weight:1000;
}
.badge{
  font-size:11px;
  font-weight:1000;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(92,255,139,.35);
  background: rgba(92,255,139,.18);
  color: rgba(9,70,40,.95);
  white-space:nowrap;
}
.isToday{
  outline: 3px solid var(--calAccentRing);
  box-shadow: 0 0 0 5px rgba(47,123,255,.12), 0 10px 20px rgba(18,24,38,.08);
}
.items{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pillItem{
  font-size:12px;
  padding:7px 9px;
  border-radius:14px;
  border:1px solid var(--calAccentBorder);
  background: var(--calAccentFill);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pillItem.holiday{
  border-color: rgba(92,255,139,.32);
  background: rgba(92,255,139,.14);
}
.x{
  border:0;background:transparent;
  cursor:pointer;
  font-weight:1000;
  color: rgba(18,24,38,.55);
  padding:0 2px;
}
.x:hover{color: rgba(18,24,38,.92)}

.hint{
  margin-top:10px;
  color:rgba(18,24,38,.68);
  font-size:13px;
  font-weight:850;
}

/* Printable section */
.printCard{
  margin-top:16px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(18,24,38,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding:16px;
}
.printCard h2{margin:0 0 6px; letter-spacing:-.02em}
.printCard p{margin:0; color:rgba(18,24,38,.75); line-height:1.55}
.printCTA{margin-top:12px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* Footer */
.footer{
  margin-top:16px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:rgba(18,24,38,.68);
}
.footBrand{font-weight:1000}
.footNote{font-size:12px; font-weight:850; color:rgba(18,24,38,.60); margin-top:4px}
.footLinks{display:flex; gap:12px; flex-wrap:wrap}
.footLinks a{font-weight:900; color:rgba(18,24,38,.65)}
.footLinks a:hover{color:rgba(18,24,38,.92); text-decoration:none}

/* Modal */
.overlay{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  background: rgba(18,24,38,.30);
  z-index:50;
}
.modal{
  width:min(560px, 100%);
  background: rgba(255,255,255,.92);
  border:1px solid rgba(18,24,38,.12);
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(18,24,38,.30);
  overflow:hidden;
  backdrop-filter: blur(18px);
}
.modalHead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px 16px;
  border-bottom: 1px solid rgba(18,24,38,.10);
  background: rgba(255,255,255,.70);
}
.modalTitle{font-weight:1000; letter-spacing:-.02em}
.modalSub{font-size:12px;color:var(--muted); font-weight:850; margin-top:2px}
.iconBtn{
  border:1px solid rgba(18,24,38,.12);
  background: rgba(255,255,255,.70);
  width:38px;height:38px;
  border-radius:14px;
  cursor:pointer;
  font-weight:1000;
}
.iconBtn:hover{filter:brightness(1.03)}
.iconBtn:focus{outline:none; box-shadow: var(--focus)}
.modalBody{padding:14px 16px; display:grid; gap:10px}
.field{display:grid; gap:6px}
.field span{font-size:12px;color:var(--muted); font-weight:1000}
input, textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(18,24,38,.12);
  background: rgba(255,255,255,.70);
  padding:11px 12px;
  font:inherit;
}
textarea{min-height:90px; resize:vertical}
.modalFoot{
  padding:14px 16px;
  border-top:1px solid rgba(18,24,38,.10);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 940px){
  .hero{grid-template-columns:1fr}
  h1{font-size:34px}
  .miniStats{grid-template-columns:1fr}
  .day{min-height:88px}
}


/* Mobile calendar comfort (avoid narrow day boxes) */
@media (max-width: 520px){
  .calBody{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px}
  /* Make each date tile comfortably tap-able by widening the grid and allowing horizontal scroll */
  .dow, .days{min-width:720px}
  .dow{gap:6px}
  .days{gap:6px}
  /* Keep day tiles uniform even when holidays add labels */
  .day{padding:8px; height:96px}
  /* Reserve a fixed area for event/holiday labels so tiles stay uniform */
  .items{max-height:66px; overflow:hidden}

  /* On mobile, allow holiday/event labels to wrap to 2 lines so names show fully */
  .pillItem{
    font-size:11px;
    padding:6px 8px;
    white-space:normal;
    text-overflow:clip;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-height:1.15;
  }

  /* Holidays are often longer: allow up to 3 lines on mobile */
  .pillItem.holiday{
    -webkit-line-clamp:3;
  }

  .dow div{padding:8px 6px; border-radius:14px}
}

/* Print */
@media print{
  /* Try to preserve user-selected theme colors in print/PDF */
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .pillItem{border:1px solid #888 !important;}
  .pillItem span{color:#000 !important;}

  .sky,.top,.hero,.printCard,.footer,.calTools,.hint,.overlay{display:none !important}
  body{background:#fff}
  .wrap{padding:0; max-width:unset}
  /* Keep the calendar theme colors */
  .calendarCard{border:0; box-shadow:none; background:var(--calCard) !important}
  .calHeader{padding:0 0 8px; background:var(--calHeader) !important; border:0}
  .calBody{padding:0}
  .dow div{background:var(--calDow) !important; border:1px solid #ddd; color:#111}
  .day{
    background:
      radial-gradient(120px 90px at 18% 18%, var(--calSunSoft), transparent 60%),
      radial-gradient(120px 90px at 82% 25%, var(--calAccentSoft), transparent 65%),
      var(--calTile) !important;
    box-shadow:none;
    border:1px solid #ddd;
  }
  .x{display:none !important}
}


/* Brand calendar icon */
.name{display:inline-flex;align-items:center;gap:8px}
.nameIcon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(20,20,43,.08);
  box-shadow:0 10px 24px rgba(20,20,43,.10);
  color:rgba(12, 32, 80, .92);
}


.monthStatic{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(17,24,39,.10);box-shadow:0 10px 24px rgba(17,24,39,.08);} 

.printTips{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px;}
.printTips li{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(17,24,39,.08);color:rgba(17,24,39,.78);font-size:14px;line-height:1.35}

.shareGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px;}
@media (min-width:720px){ .shareGrid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.tinyNote{margin-top:10px;color:rgba(17,24,39,.62);font-size:12px;line-height:1.4}
.iconBtn{border:1px solid rgba(17,24,39,.10); background:rgba(255,255,255,.75); border-radius:14px; padding:8px 10px; cursor:pointer; font-weight:800}
.iconBtn:hover{transform:translateY(-1px)}
.modalTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(17,24,39,.08);background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));}
.modalTitle{font-weight:900;letter-spacing:-.02em}
.modalSub{margin-top:2px;color:rgba(17,24,39,.62);font-size:13px}

/* Theme picker */
.themeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
@media (min-width:720px){.themeGrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.themePick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(17,24,39,.10);border-radius:16px;background:rgba(255,255,255,.70);}
.themePick .lbl{font-size:13px;color:rgba(17,24,39,.75);font-weight:800;}
.themePick input[type="color"]{width:44px;height:34px;border:0;background:transparent;padding:0;cursor:pointer;}
.themeActions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;}


/* Calendar tool spacer */
.toolSpacer{flex:1;}

/* Bottom-right in-calendar controls (mobile reach) */
.calBottomBar{
  position:sticky;
  bottom:10px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
  padding:0 2px;
  z-index:5;
  pointer-events:none;
}
.calBottomBar .fab{pointer-events:auto;}

.fab{
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:10px 12px;
  border-radius:999px;
  font-weight:850;
  font-size:14px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(17,24,39,.10);
}
.fabPrimary{
  border:0;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  box-shadow:0 14px 28px rgba(47,111,232,.22);
}
@media (max-width: 520px){
  .fab{font-size:13px; padding:10px 11px;}
}


/* Mobile calendar: prevent cramped day tiles */
@media (max-width: 720px){
  .calBody{overflow-x:auto;}
  .dow, .days{min-width: 680px;}
}
@media (max-width: 420px){
  .dow, .days{min-width: 640px;}
}


/* Subtle emphasis when jumping to Today */
.pulseToday{ animation: pulseToday 0.9s ease-out 1; }
@keyframes pulseToday{ 0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.0);} 40%{ transform: scale(1.03); box-shadow: 0 0 0 6px rgba(0,0,0,0.06);} 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.0);} }