:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --ink:#0b1b33;
  --muted:#51627a;
  --line:#dde6f2;
  --shadow:0 10px 30px rgba(3,20,43,.08);

  --grey:#707b8a;
  --grey-bg:#eef2f7;

  --vv:#0f5f2b;
  --vv-bg:#0f8a3a;

  --vg-bg:#84cc16;

  --g-bg:#ffe88a;

  --bad-bg:#ff6b6b;

  --accent:#31a050;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:12px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:
    0 10px 30px rgba(3,20,43,.08),
    0 4px 12px rgba(3,20,43,.05),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  padding:12px;
  margin-top:10px;
  position: relative;
  transform-style: preserve-3d;
}
.hero{margin-top:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.titleRow{display:flex;align-items:center;gap:10px}
.logo{width:35px;height:35px;max-width:35px;max-height:35px;object-fit:contain}
.titleText{display:flex;flex-direction:column;gap:2px}
.brand .title{font-size:18px;font-weight:600;line-height:1.2}
.brand .location{font-size:11px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.brand .subtitle{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.brand .subtitle .credits{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:2px}
.brand .subtitle .company{font-size:12px;color:var(--coal);font-weight:700;margin-bottom:2px}
.brand .subtitle .experience{font-size:10px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-size:11px;color:var(--muted);font-weight:500}
.btn{
  border:0;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:6px 11px;
  font-weight:500;
  cursor:pointer;
  font-size:13px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    0 1px 2px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btnRefresh{
  border:0;
  background:#22c55e;
  color:#fff;
  border-radius:6px;
  padding:4px 10px;
  font-weight:600;
  cursor:pointer;
  font-size:11px;
  box-shadow:
    0 3px 6px rgba(34,197,94,0.3),
    0 1px 3px rgba(34,197,94,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition:all 0.2s;
}
.btnRefresh:hover{
  background:#16a34a;
  transform:translateY(-1px);
  box-shadow:
    0 4px 8px rgba(34,197,94,0.4),
    0 2px 4px rgba(34,197,94,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}
.btnRefresh:disabled{opacity:.5;cursor:not-allowed}

.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media(min-width:960px){.filters{grid-template-columns:2fr 1fr 1fr 1fr}}
.field label{display:block;font-size:11px;color:var(--muted);margin:0 0 4px 2px;font-weight:500}
.field input,.field select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;font-size:13px;background:#fff}

.bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}

.excludeFilters{
  margin-top:12px;
  padding:12px;
  background:#fff9e6;
  border:1px solid #ffc107;
  border-radius:12px;
}
.excludeSection{margin-bottom:10px}
.excludeSection:last-child{margin-bottom:0}
.checkLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:12px;
  cursor:pointer;
  font-size:13px;
  user-select:none;
}
.checkLabel input[type="checkbox"]{cursor:pointer}
.checkLabel span{font-weight:500}
.sectionTitle{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.checkGroup{display:flex;flex-wrap:wrap;gap:8px}
.helpText{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  margin-left:22px;
}

.taraFilters{
  margin-top:12px;
  padding:12px;
  background:#faf5ff;
  border:1px solid #7c3aed;
  border-radius:12px;
}
.taraSection{margin-bottom:0}

.karanaGuide{
  margin-top:10px;
  border:1px solid #ffc107;
  border-radius:12px;
  overflow:hidden;
}
.karanaGuideSummary{
  padding:10px 12px;
  background:#fff9e6;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:#f57c00;
  user-select:none;
  list-style:none;
}
.karanaGuideSummary::-webkit-details-marker{display:none}
.karanaGuideSummary::before{
  content:"▶";
  display:inline-block;
  margin-right:8px;
  transition:transform 0.2s;
}
details[open] .karanaGuideSummary::before{
  transform:rotate(90deg);
}
.karanaGuideSummary:hover{background:#fff6da}

.karanaGuideContent{
  padding:12px;
  background:#fefefe;
  border-top:1px solid #ffc107;
}

.karanaCompact{
  display:grid;
  gap:8px;
}
.karanaGroup{
  border-radius:8px;
  overflow:hidden;
}
.karanaGroup.good{background:#e8f5e9;border:1px solid #81c784}
.karanaGroup.warning{background:#fff6da;border:1px solid #ffc107}
.karanaGroup.bad{background:#ffebee;border:1px solid #ef5350}

.karanaGroupHead{
  padding:8px 10px;
  font-weight:700;
  font-size:12px;
  color:var(--coal);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.karanaGroup.good .karanaGroupHead{background:rgba(129,199,132,0.2)}
.karanaGroup.warning .karanaGroupHead{background:rgba(255,193,7,0.2)}
.karanaGroup.bad .karanaGroupHead{background:rgba(239,83,80,0.2)}

.karanaGroupBody{
  padding:8px 10px;
}
.karanaLine{
  font-size:11px;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:4px;
}
.karanaLine:last-child{margin-bottom:0}
.karanaLine b{font-weight:700;color:var(--coal)}
.karanaNote{
  font-size:10px;
  color:var(--muted);
  margin-top:6px;
  font-style:italic;
}

.taraGuide{
  margin-top:10px;
  border:1px solid #e0e7ff;
  border-radius:12px;
  overflow:hidden;
}
.taraGuideSummary{
  padding:10px 12px;
  background:#f5f3ff;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:#5b21b6;
  user-select:none;
  list-style:none;
}
.taraGuideSummary::-webkit-details-marker{display:none}
.taraGuideSummary::before{
  content:"▶";
  display:inline-block;
  margin-right:8px;
  transition:transform 0.2s;
}
details[open] .taraGuideSummary::before{
  transform:rotate(90deg);
}
.taraGuideSummary:hover{background:#ede9fe}

.taraGuideContent{
  padding:12px;
  background:#fefefe;
  border-top:1px solid #e0e7ff;
}
.guideIntro{
  margin-bottom:8px;
  padding:6px 8px;
  background:#f8f9fa;
  border-radius:6px;
}

.taraCompact{
  display:grid;
  gap:6px;
}
.taraItem{
  border-radius:8px;
  padding:8px 10px;
  font-size:11px;
  line-height:1.5;
}
.taraItem.good{background:#e8f5e9}
.taraItem.bad{background:#ffebee}
.taraItem.neutral{background:#f5f5f5}

.taraHeader{
  font-weight:700;
  color:var(--coal);
  font-size:11px;
  margin-bottom:2px;
}
.taraEffect{
  font-weight:600;
  color:var(--ink);
  font-size:12px;
  margin-bottom:4px;
}
.taraStarsLine{
  color:var(--ink);
  font-size:11px;
  line-height:1.6;
}
.taraStarsLine .en{
  font-weight:600;
  color:var(--coal);
}
.taraStarsLine .te{
  font-weight:500;
  opacity:0.85;
}




dd, details { position:relative; }
.dd summary{list-style:none}
.dd summary::-webkit-details-marker{display:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 11px;
  font-weight:500;
  cursor:pointer;
  user-select:none;
  min-width:90px;
  justify-content:center;
  font-size:13px;
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  transform-style: preserve-3d;
}
.dd .chip:after{content:"▾"; font-size:11px; opacity:.85}

.dd.all .chip{background:var(--grey-bg); color:var(--ink)}
.dd.vv  .chip{
  background:var(--vv-bg); 
  color:#fff;
  box-shadow: 
    0 3px 8px rgba(15, 138, 58, 0.3),
    0 1px 3px rgba(15, 138, 58, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}
.dd.vg  .chip{
  background:var(--vg-bg); 
  color:#fff;
  box-shadow: 
    0 3px 8px rgba(132, 204, 22, 0.3),
    0 1px 3px rgba(132, 204, 22, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}
.dd.g   .chip{
  background:var(--g-bg); 
  color:var(--ink);
  box-shadow: 
    0 3px 8px rgba(255, 232, 138, 0.4),
    0 1px 3px rgba(255, 232, 138, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
.dd.bad .chip{
  background:var(--bad-bg); 
  color:#fff;
  box-shadow: 
    0 3px 8px rgba(255, 107, 107, 0.3),
    0 1px 3px rgba(255, 107, 107, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.dd.active .chip{
  outline:3px solid rgba(11,27,51,.12);
  transform:translateY(-2px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset 0 -1px 3px rgba(0, 0, 0, 0.15);
}

.menu{
  position:absolute;
  top:48px;
  left:0;
  width:min(360px, calc(100vw - 32px));
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  z-index:9999;
  display:none;
}
.dd[open] > .menu{
  display:block;
}

/* Color-coded dropdown menus for each category */
.dd.vv[open] > .menu{
  display:block;
  border:2px solid #009900;
  background:#f0fdf4;
}
.dd.vv .menu .note{
  background:#009900;
  color:#fff;
  padding:8px 10px;
  margin:-8px -8px 8px -8px;
  border-radius:12px 12px 0 0;
  font-weight:600;
}

.dd.vg[open] > .menu{
  display:block;
  border:2px solid #84cc16;
  background:#f7fee7;
}
.dd.vg .menu .note{
  background:#84cc16;
  color:#fff;
  padding:8px 10px;
  margin:-8px -8px 8px -8px;
  border-radius:12px 12px 0 0;
  font-weight:600;
}

.dd.g[open] > .menu{
  display:block;
  border:2px solid #eab308;
  background:#fefce8;
}
.dd.g .menu .note{
  background:#eab308;
  color:#fff;
  padding:8px 10px;
  margin:-8px -8px 8px -8px;
  border-radius:12px 12px 0 0;
  font-weight:600;
}

.dd.bad[open] > .menu{
  display:block;
  border:2px solid #ef4444;
  background:#fef2f2;
}
.dd.bad .menu .note{
  background:#ef4444;
  color:#fff;
  padding:8px 10px;
  margin:-8px -8px 8px -8px;
  border-radius:12px 12px 0 0;
  font-weight:600;
}

.menu button{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:500;
  color:var(--ink);
  font-size:13px;
}
.menu button:hover{background:#f6f9fd}
.menu .note{
  margin:0;
  text-align:left;
  padding:0 10px 10px 10px;
  color:var(--muted);
  font-size:12px;
}
.menu .sep{height:1px;background:#eef2f7;margin:6px 0}

/* Results section - smooth transition when pushed down */
#results {
  transition: transform 0.3s ease;
}

.resultsTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hint{font-size:12px;color:var(--muted)}
.note{margin:8px 0 0 0;text-align:center;color:var(--muted);font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.summary{font-weight:600;color:var(--ink);padding:6px 2px;cursor:pointer}

.group{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  margin:10px 0;
  background:#fff;
}
.groupHead{
  padding:10px 12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.groupHead .left{display:flex;align-items:center;gap:8px}
.groupHead .tag{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:500}

/* Color-coded result groups matching buttons and dropdowns */
.group.vv{
  border:2px solid #009900;
  background:#f0fdf4;
}
.group.vv .groupHead{
  background:#009900;
  color:#fff;
}
.group.vv .tag{
  color:#009900;
  background:#fff;
  border-color:#009900;
}

.group.vg{
  border:2px solid #84cc16;
  background:#f7fee7;
}
.group.vg .groupHead{
  background:#84cc16;
  color:#fff;
}
.group.vg .tag{
  color:#84cc16;
  background:#fff;
  border-color:#84cc16;
}

.group.g{
  border:2px solid #eab308;
  background:#fefce8;
}
.group.g .groupHead{
  background:#eab308;
  color:#fff;
}
.group.g .tag{
  color:#eab308;
  background:#fff;
  border-color:#eab308;
}

.group.bad{
  border:2px solid #ef4444;
  background:#fef2f2;
}
.group.bad .groupHead{
  background:#ef4444;
  color:#fff;
}
.group.bad .tag{
  color:#ef4444;
  background:#fff;
  border-color:#ef4444;
}

.groupBody{padding:8px 12px}
.rule{border:1px solid #eef2f7;border-radius:12px;padding:8px 10px;margin:8px 0;background:#fff}
.ruleTitle{font-weight:600;font-size:14px}
.ruleNote{font-size:12px;color:var(--muted);margin-top:3px}

.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;border:1px solid #eef2f7;border-radius:12px;overflow:hidden}
.table th{background:#fbfcfe;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #eef2f7;font-size:13px;text-align:left}
.table tr:last-child td{border-bottom:0}
.table td b{font-weight:600}
.table .date{min-width:100px}
.table .ends{white-space:nowrap}

/* Vertical borders between column groups - THIN LINES */
.table th:nth-child(2),
.table td:nth-child(2) {
  border-right: 1px solid #dde6f2 !important;
}
.table th:nth-child(4),
.table td:nth-child(4) {
  border-right: 1px solid #dde6f2 !important;
}
.table th:nth-child(6),
.table td:nth-child(6) {
  border-right: 1px solid #dde6f2 !important;
}

.table .yogam{
  font-weight:600;
  color:#7c3aed;
  background:#faf5ff;
  font-size:12px;
}
.table .consecutive-group{background:#f8fff9}
.table .consecutive-group td{padding:12px 10px;line-height:1.6}
.table .same-date-group{background:#faf5ff}
.table .same-date-group td{padding:12px 10px;line-height:1.6}
.badge-purple{background:#e9d5ff !important;color:#7c3aed !important;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600}

@media(max-width:640px){
  .chip{
    min-width:75px;
    padding:5px 9px;
    font-size:12px;
  }
  .badge{font-size:10px}
  .bar{gap:5px}
  .logo{width:28px;height:28px}
  .brand .title{font-size:16px}
  .brand .location{font-size:10px}
  .brand .subtitle{font-size:10px}
  .brand .subtitle .credits{font-size:9px}
  .brand .subtitle .company{font-size:10px}
  .brand .subtitle .experience{font-size:9px}
  .card{padding:10px}
}

/* 🎨 PANCHA (5) ELEMENTS - 3D Color-Coded Cards */
.panchaIntro{
  margin:8px 0;
  padding:8px 14px;
  background:#FF9933;
  border-radius:10px;
  text-align:left;
  color:#fff;
  box-shadow:0 4px 12px rgba(255,153,51,0.3);
}
.panchaIntro h3{
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.3px;
  line-height:1.3;
}
.panchaIntro p{
  margin:2px 0 0 0;
  font-size:11px;
  opacity:0.95;
  font-weight:400;
  line-height:1.3;
}

/* 📚 Panchang Guide (Educational Collapsible) */
.panchangGuide{
  margin:14px 0;
  border:2px solid #42a5f5;
  border-radius:12px;
  overflow:hidden;
  background:#e3f2fd;
}
.panchangGuideSummary{
  padding:12px 16px;
  background:#bbdefb;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:#0d47a1;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background 0.2s;
}
.panchangGuideSummary::-webkit-details-marker{display:none}
.panchangGuideSummary::after{
  content:"▶";
  font-size:14px;
  transition:transform 0.3s;
}
details[open].panchangGuide .panchangGuideSummary::after{
  transform:rotate(90deg);
}
.panchangGuideSummary:hover{
  background:#90caf9;
}

.panchangGuideContent{
  padding:16px;
  background:#fff;
  max-height:600px;
  overflow-y:auto;
}

/* Language Tabs */
.langTabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  border-bottom:2px solid #e0e0e0;
  padding-bottom:8px;
}
.langTab{
  padding:8px 20px;
  background:#f5f5f5;
  border:none;
  border-radius:8px 8px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all 0.2s;
}
.langTab:hover{
  background:#e0e0e0;
}
.langTab.active{
  background:#42a5f5;
  color:#fff;
}

/* Guide Text Styling */
.guideText h4{
  margin:16px 0 8px 0;
  font-size:15px;
  font-weight:700;
  color:var(--coal);
}
.guideText h4:first-child{
  margin-top:0;
}
.guideText p{
  margin:8px 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink);
}
.guideText strong{
  color:var(--coal);
  font-weight:700;
}
.guideText ul,
.guideText ol{
  margin:8px 0;
  padding-left:24px;
}
.guideText li{
  margin:4px 0;
  font-size:12px;
  line-height:1.5;
  color:var(--ink);
}

/* Element Boxes */
.element{
  margin:12px 0;
  padding:10px 12px;
  background:#f8f9fa;
  border-left:4px solid #42a5f5;
  border-radius:6px;
}
.elementTitle{
  font-size:13px;
  font-weight:700;
  color:var(--coal);
  margin-bottom:6px;
}

/* Highlight Box */
.highlight{
  margin:12px 0;
  padding:10px 14px;
  background:#fff3e0;
  border-left:4px solid #ff9800;
  border-radius:6px;
}
.highlight div{
  margin:4px 0;
  font-size:12px;
  font-weight:600;
  color:#e65100;
}

/* Mobile Responsive */
@media(max-width:640px){
  .panchangGuide{
    margin:10px 0;
  }
  .panchangGuideSummary{
    padding:10px 12px;
    font-size:12px;
  }
  .panchangGuideContent{
    padding:12px;
    max-height:500px;
  }
  .langTab{
    padding:6px 14px;
    font-size:12px;
  }
  .guideText h4{
    font-size:14px;
  }
  .guideText p,
  .guideText li{
    font-size:12px;
  }
  .elementTitle{
    font-size:12px;
  }
}

/* 🔍 Filters Card (Between Karana and Yogam) */
.filtersCard{
  margin:14px 0;
  padding:14px;
  background:linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);
  border-radius:14px;
  box-shadow:
    0 6px 16px rgba(255,179,0,0.3),
    0 3px 8px rgba(255,179,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.1);
  transform-style: preserve-3d;
}
.filtersHeader{
  font-size:15px;
  font-weight:800;
  color:#4a2800;
  margin-bottom:12px;
  text-align:center;
  letter-spacing:0.5px;
}
.filtersCard .filters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  background:rgba(255,255,255,0.9);
  padding:14px;
  border-radius:10px;
}
@media(max-width:640px){
  .filtersCard{
    margin:10px 0;
    padding:12px;
  }
  .filtersHeader{
    font-size:13px;
  }
  .filtersCard .filters{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }
}

/* 🕐 Rahu Kalam / Yamagandam / Gulika Kalam Reference */
.kalamReference{
  margin:14px 0;
  border:2px solid #3b82f6;
  border-radius:14px;
  overflow:hidden;
  background:#eff6ff;
}
.kalamSummary{
  padding:14px 16px;
  background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  color:#fff;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.kalamSummary::-webkit-details-marker{display:none}
.kalamSummary #downloadKalamPDF{
  background:#fff;
  color:#2563eb;
  border:none;
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
  flex-shrink:0;
}
.kalamSummary #downloadKalamPDF:hover{
  background:#dbeafe;
  transform:scale(1.05);
}
.kalamContent{
  padding:16px;
  background:#fff;
}
.kalamIntro{
  margin-bottom:20px;
  padding:14px;
  background:#f0f9ff;
  border-left:4px solid #3b82f6;
  border-radius:8px;
}
.kalamIntro p{
  margin:8px 0;
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
}
.kalamIntro strong{
  color:var(--coal);
  font-weight:700;
}
.kalamNote{
  margin:10px 0;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.kalamTiny{
  font-size:11px;
  color:var(--muted);
  margin:6px 0 0 0;
}
.kalamSection{
  margin:20px 0;
}
.kalamTableTitle{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:700;
  color:var(--coal);
}
.kalamTable{
  width:100%;
  border-collapse:collapse;
  border:1px solid #cbd5e1;
  border-radius:8px;
  overflow:hidden;
}
.kalamTable th,
.kalamTable td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
  text-align:left;
}
.kalamTable th{
  background:#f1f5f9;
  font-weight:700;
  color:var(--coal);
}
.kalamTable tr:last-child td{
  border-bottom:0;
}
.kalamTable tbody tr:hover{
  background:#f8fafc;
}
@media(max-width:640px){
  .kalamSummary{
    font-size:13px;
    padding:12px;
  }
  .kalamSummary #downloadKalamPDF{
    font-size:11px;
    padding:6px 12px;
  }
  .kalamContent{
    padding:12px;
  }
  .kalamIntro{
    padding:12px;
  }
  .kalamIntro p{
    font-size:12px;
  }
  .kalamTableTitle{
    font-size:14px;
  }
  .kalamTable{
    font-size:12px;
  }
  .kalamTable th,
  .kalamTable td{
    padding:8px 10px;
  }
}

/* 3D Card Base */
.panchaCard{
  margin:10px 0;
  border-radius:12px;
  border:2px solid;
  overflow:hidden;
  width:100%;
  max-width:100%;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.05);
  transform:translateY(0);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
}
.panchaCard:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 10px rgba(0,0,0,0.12),
    0 12px 24px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 4px rgba(0,0,0,0.06);
}

/* Card Colors */
.panchaCard.card1{
  background:#FFE1FF;
  border-color:#FF9BFF;
}
.panchaCard.card2{
  background:#E1FFC8;
  border-color:#A0E884;
}
.panchaCard.card3{
  background:#E1FFFF;
  border-color:#84E8E8;
}
.panchaCard.card4{
  background:#FFFFE1;
  border-color:#E8E884;
}
.panchaCard.card5{
  background:#FFE1C8;
  border-color:#E8B584;
  overflow:visible !important;
}

/* Card Summary (Header) */
.panchaCardSummary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(255,255,255,0.5);
  border-bottom:2px solid rgba(0,0,0,0.08);
  transition:background 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.05);
}
.panchaCardSummary::-webkit-details-marker{display:none}
.panchaCardSummary:hover{
  background:rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* Card Number Badge */
.cardNumber{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:900;
  color:#fff;
  flex-shrink:0;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.2);
  transform-style: preserve-3d;
}
.card1 .cardNumber{background:linear-gradient(135deg, #FF6BFF 0%, #C830C8 100%)}
.card2 .cardNumber{background:linear-gradient(135deg, #7ED957 0%, #4CAF50 100%)}
.card3 .cardNumber{background:linear-gradient(135deg, #3DC7C7 0%, #00ACC1 100%)}
.card4 .cardNumber{background:linear-gradient(135deg, #F4D03F 0%, #E6B800 100%)}
.card5 .cardNumber{background:linear-gradient(135deg, #FF9D6B 0%, #FF7043 100%)}

/* Card Title */
.cardTitle{
  flex-grow:1;
}
.cardTitleMain{
  font-size:14px;
  font-weight:500;
  color:var(--coal);
  line-height:1.3;
}
.cardTitleSub{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  margin-top:2px;
}

/* Card Chevron */
.cardChevron{
  font-size:18px;
  font-weight:900;
  color:var(--coal);
  transition:transform 0.3s;
  flex-shrink:0;
}
details[open].panchaCard .cardChevron{
  transform:rotate(180deg);
}

/* Card 5 needs overflow visible for dropdowns */
details[open].panchaCard.card5{
  overflow:visible !important;
}

/* Push results table down when any dropdown is open */
.panchaCard.card5:has(.dd[open]) {
  margin-bottom: 250px;
  transition: margin-bottom 0.3s ease;
}

/* Normal state - no extra margin */
.panchaCard.card5 {
  margin-bottom: 0;
  transition: margin-bottom 0.3s ease;
}

/* Card Status Indicator */
.cardIndicator{
  display:inline-block;
  padding:3px 8px;
  border-radius:12px;
  font-size:10px;
  font-weight:700;
  margin-left:8px;
  margin-right:8px;
  flex-shrink:0;
  background:#e0e7ff;
  color:#3730a3;
  white-space:nowrap;
  transition:all 0.2s;
}
.cardIndicator:empty{
  display:none;
}
.cardIndicator.active{
  background:#dcfce7;
  color:#15803d;
}
.cardIndicator.warning{
  background:#fef3c7;
  color:#92400e;
}
.cardIndicator.inactive{
  background:#fee2e2;
  color:#991b1b;
}

/* Card Body */
.panchaCardBody{
  padding:12px;
  background:rgba(255,255,255,0.7);
}

/* Mobile Responsive */
@media(max-width:640px){
  .panchaCard{
    margin:8px 0;
  }
  .panchaCardSummary{
    padding:10px;
  }
  .cardNumber{
    width:32px;
    height:32px;
    font-size:16px;
  }
  .cardTitleMain{
    font-size:12px;
  }
  .cardTitleSub{
    font-size:9px;
  }
  .panchaCardBody{
    padding:10px;
  }
  .cardIndicator{
    font-size:9px;
    padding:2px 6px;
    margin:0 4px;
  }
  .panchaIntro h3{
    font-size:13px;
  }
  .panchaIntro p{
    font-size:10px;
  }
}

/* 📚 Panchang Information Guide */
.panchangGuide{
  margin:14px 0;
  border:2px solid #3498db;
  border-radius:14px;
  overflow:hidden;
  background:#e3f2fd;
  box-shadow:0 4px 12px rgba(52,152,219,0.2);
}
.panchangGuideSummary{
  padding:14px 16px;
  background:#2196f3;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  color:#fff;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.panchangGuideSummary::-webkit-details-marker{display:none}
.panchangGuideSummary::after{
  content:"▼";
  font-size:12px;
  transition:transform 0.3s;
}
details[open].panchangGuide .panchangGuideSummary::after{
  transform:rotate(180deg);
}
.panchangGuideSummary:hover{
  background:#1976d2;
}
.panchangGuideContent{
  padding:16px;
  background:#fff;
}

/* Language Tabs */
.langTabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  border-bottom:2px solid #e0e0e0;
  padding-bottom:8px;
}
.langTab{
  padding:8px 20px;
  border:none;
  background:#f5f5f5;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:all 0.2s;
}
.langTab:hover{
  background:#e0e0e0;
}
.langTab.active{
  background:#2196f3;
  color:#fff;
}

/* Guide Content */
.guideText{
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
}
.guideText h4{
  font-size:16px;
  color:#1976d2;
  margin:0 0 12px 0;
  font-weight:700;
}
.guideText h5{
  font-size:14px;
  color:#0d47a1;
  margin:16px 0 10px 0;
  font-weight:700;
}
.guideText p{
  margin:8px 0;
}
.guideText ul, .guideText ol{
  margin:8px 0;
  padding-left:24px;
}
.guideText li{
  margin:4px 0;
}
.element{
  display:flex;
  gap:10px;
  margin:12px 0;
  padding:10px;
  background:#f8f9fa;
  border-left:4px solid #2196f3;
  border-radius:6px;
}
.elemNum{
  font-size:18px;
  flex-shrink:0;
}
.elemContent{
  flex-grow:1;
}
.elemContent strong{
  display:block;
  margin-bottom:6px;
  color:var(--coal);
  font-size:14px;
}
.highlight{
  background:#fff9c4;
  padding:10px;
  border-left:4px solid #fbc02d;
  border-radius:6px;
  font-weight:600;
  color:#f57f17;
}

/* Mobile Responsive */
@media(max-width:640px){
  .panchangGuide{
    margin:10px 0;
  }
  .panchangGuideSummary{
    padding:12px;
    font-size:12px;
  }
  .panchangGuideContent{
    padding:12px;
  }
  .langTab{
    padding:6px 12px;
    font-size:11px;
  }
  .guideText{
    font-size:12px;
  }
  .guideText h4{
    font-size:14px;
  }
  .guideText h5{
    font-size:13px;
  }
  .elemNum{
    font-size:16px;
  }
  .elemContent strong{
    font-size:13px;
  }
}

/* 📱 Mobile: Fix text overflow in results table */
@media(max-width:640px){
  .table{
    font-size:12px;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table thead,
  .table tbody,
  .table tr{
    display:table;
    width:100%;
    table-layout:fixed;
  }
  .table th,
  .table td{
    font-size:11px;
    padding:6px 4px;
    word-wrap:break-word;
    word-break:break-word;
    overflow-wrap:break-word;
    white-space:normal !important;
    hyphens:auto;
  }
  .table .date{
    white-space:normal !important;
    word-break:break-word;
  }
  .table .consecutive-group td,
  .table .same-date-group td{
    white-space:normal !important;
    word-wrap:break-word;
    line-height:1.4;
  }
  .groupBody{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* 🏢 Site Footer */
.siteFooter{
  margin-top:14px;
  padding:10px 16px;
  background:linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-top:2px solid #3b82f6;
  text-align:center;
}
.footerContent{
  max-width:900px;
  margin:0 auto;
}
.footerText{
  margin:2px 0;
  font-size:11px;
  color:#e0e7ff;
  line-height:1.4;
}
.footerText:first-child{
  font-weight:600;
  font-size:11px;
  color:#fff;
}
.footerABN{
  display:inline-block;
  padding:2px 10px;
  background:rgba(255,255,255,0.2);
  border-radius:4px;
  margin-left:8px;
  font-size:13px;
  color:#fff;
}
@media(max-width:640px){
  .siteFooter{
    padding:8px 12px;
    margin-top:14px;
  }
  .footerText{
    font-size:10px;
  }
  .footerText:first-child{
    font-size:10px;
  }
  .footerABN{
    display:block;
    margin:3px auto 0;
    width:fit-content;
  }
}

/* 📊 Yogam Rules Card (3D Style) */
.yogamRulesCard{
  margin:20px 0;
  border-radius:16px;
  border:2px solid #8b5cf6;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 4px 6px rgba(139,92,246,0.1),
    0 8px 16px rgba(139,92,246,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.03);
  transform:translateY(0);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.yogamRulesCard:hover{
  transform:translateY(-3px);
  box-shadow:
    0 6px 12px rgba(139,92,246,0.15),
    0 12px 24px rgba(139,92,246,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.03);
}
.yogamRulesSummary{
  padding:16px 20px;
  background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  color:#fff;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background 0.2s;
}
.yogamRulesSummary::-webkit-details-marker{display:none}
.yogamRulesSummary:hover{
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}
.yogamRulesContent{
  padding:20px;
  background:#faf5ff;
}
.yogamNote{
  margin:0 0 16px 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  padding:12px;
  background:#fff;
  border-left:4px solid #8b5cf6;
  border-radius:6px;
}
.yogamNote .mono{
  font-family:monospace;
  background:#f3e8ff;
  padding:2px 6px;
  border-radius:4px;
  font-weight:600;
  color:#6d28d9;
}
@media(max-width:640px){
  .yogamRulesCard{
    margin:14px 0;
  }
  .yogamRulesSummary{
    font-size:13px;
    padding:12px 14px;
  }
  .yogamRulesContent{
    padding:14px;
  }
  .yogamNote{
    font-size:12px;
    padding:10px;
  }
}

/* Nested Yogam Rules inside Card 5 */
.yogamRulesNested{
  border:2px solid #8b5cf6;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 4px rgba(139,92,246,0.1);
}
.yogamRulesNestedSummary{
  padding:12px 16px;
  background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:#fff;
  user-select:none;
  list-style:none;
  transition:background 0.2s;
}
.yogamRulesNestedSummary::-webkit-details-marker{display:none}
.yogamRulesNestedSummary:hover{
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}
.yogamRulesNestedContent{
  padding:16px;
  background:#faf5ff;
}
@media(max-width:640px){
  .yogamRulesNested{
    margin:14px 0;
  }
  .yogamRulesNestedSummary{
    font-size:12px;
    padding:10px 12px;
  }
  .yogamRulesNestedContent{
    padding:12px;
  }
}
  .yogamNote{
    font-size:12px;
    padding:10px;
  }
}

/* 🕐 Rahu Kalam Card (Enhanced 3D Style) */
.kalamReferenceCard{
  margin:20px 0;
  border-radius:16px;
  border:2px solid #f59e0b;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 4px 6px rgba(245,158,11,0.1),
    0 8px 16px rgba(245,158,11,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.03);
  transform:translateY(0);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.kalamReferenceCard:hover{
  transform:translateY(-3px);
  box-shadow:
    0 6px 12px rgba(245,158,11,0.15),
    0 12px 24px rgba(245,158,11,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.03);
}
.kalamCardSummary{
  padding:16px 20px;
  background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  color:#fff;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  transition:background 0.2s;
}
.kalamCardSummary::-webkit-details-marker{display:none}
.kalamCardSummary:hover{
  background:linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.kalamCardSummary .btnDownload{
  background:#fff;
  color:#d97706;
  border:none;
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
  flex-shrink:0;
}
.kalamCardSummary .btnDownload:hover{
  background:#fef3c7;
  transform:scale(1.05);
}
@media(max-width:640px){
  .kalamReferenceCard{
    margin:14px 0;
  }
  .kalamCardSummary{
    font-size:13px;
    padding:12px 14px;
  }
  .kalamCardSummary .btnDownload{
    font-size:11px;
    padding:6px 12px;
  }
}

/* ⚠️ DISCLAIMER CARD (Bright Yellow, 3D Effect) */
.disclaimerCard{
  margin:20px 0;
  border-radius:16px;
  border:4px solid #ff0000;
  outline:3px solid #ffff00;
  outline-offset:-7px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 6px 12px rgba(255,0,0,0.3),
    0 12px 24px rgba(255,255,0,0.15),
    inset 0 -3px 6px rgba(0,0,0,0.05);
  transform:translateY(0);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.disclaimerCard:hover{
  transform:translateY(-4px);
  box-shadow:
    0 8px 16px rgba(255,0,0,0.4),
    0 16px 32px rgba(255,255,0,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.05);
}
.disclaimerCardSummary{
  padding:16px 20px;
  background:linear-gradient(135deg, #ffff00 0%, #ffed4e 100%);
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  color:#000;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transition:background 0.2s;
  text-shadow:0 1px 2px rgba(255,255,255,0.5);
}
.disclaimerCardSummary::-webkit-details-marker{display:none}
.disclaimerCardSummary:hover{
  background:linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}
.disclaimerContent{
  background:#fff;
  padding:20px;
}
.disclaimerSection{
  margin-bottom:24px;
}
.disclaimerSection:last-child{
  margin-bottom:0;
}
.disclaimerTitle{
  font-size:16px;
  font-weight:700;
  color:#000;
  margin:0 0 12px 0;
  padding-bottom:8px;
  border-bottom:2px solid #ffff00;
}
.disclaimerText{
  font-size:13px;
  line-height:1.7;
  color:#333;
  margin:0 0 12px 0;
  text-align:justify;
}
.disclaimerText:last-child{
  margin-bottom:0;
}
@media(max-width:640px){
  .disclaimerCard{
    margin:14px 0;
  }
  .disclaimerCardSummary{
    font-size:14px;
    padding:12px 14px;
  }
  .disclaimerContent{
    padding:14px;
  }
  .disclaimerTitle{
    font-size:14px;
  }
  .disclaimerText{
    font-size:12px;
  }
}

/* Personal Settings Lock Button */
.btnSettingsLock {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  border: 2px solid #eab308;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #713f12;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 3px 6px rgba(234, 179, 8, 0.3),
    0 1px 3px rgba(234, 179, 8, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btnSettingsLock:hover {
  background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
  border-color: #ca8a04;
  box-shadow:
    0 4px 8px rgba(234, 179, 8, 0.4),
    0 2px 4px rgba(234, 179, 8, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.btnSettingsLock.locked {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  border: 2px solid #ea580c;
  color: #7c2d12;
  box-shadow:
    0 3px 6px rgba(249, 115, 22, 0.3),
    0 1px 3px rgba(249, 115, 22, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btnSettingsLock.locked:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow:
    0 4px 8px rgba(249, 115, 22, 0.4),
    0 2px 4px rgba(249, 115, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

#lockIcon {
  font-size: 14px;
}

/* Expand/Collapse All Button */
.btnExpandCollapse {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  border: 2px solid #818cf8;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #3730a3;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btnExpandCollapse:hover {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  border-color: #6366f1;
}

#expandCollapseIcon {
  font-size: 12px;
  transition: transform 0.2s;
}


/* Master Card for Personal Settings (Contains Cards 1-4) */
.masterCard {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 3px solid #0ea5e9;
  border-radius: 16px;
  margin: 16px 0;
  padding: 0;
  box-shadow: 
    0 8px 20px rgba(14, 165, 233, 0.2),
    0 4px 12px rgba(14, 165, 233, 0.15),
    0 2px 6px rgba(14, 165, 233, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform-style: preserve-3d;
}

.masterCardSummary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-bottom: 2px solid #0ea5e9;
  transition: all 0.2s ease;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.masterCardSummary:hover {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}

.masterCardIcon {
  font-size: 18px;
  font-weight: bold;
  color: #0369a1;
  transition: transform 0.2s ease;
}

.masterCard[open] .masterCardIcon {
  transform: rotate(0deg);
}

.masterCard:not([open]) .masterCardIcon {
  transform: rotate(-90deg);
}

.masterCardBody {
  padding: 20px;
  background: #ffffff;
}

/* Adjust inner cards spacing when inside master card */
.masterCardBody .panchaCard {
  margin: 12px 0;
}

.masterCardBody .panchaCard:first-child {
  margin-top: 0;
}

.masterCardBody .panchaCard:last-child {
  margin-bottom: 0;
}


/* Share Button */
/* Share Buttons - Ultra Compact & Cute for Mobile */
.btnShareCute {
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  min-width: 80px;
  justify-content: center;
  transform-style: preserve-3d;
}

.btnShareCute:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.btnShareCute:active {
  transform: translateY(0px);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.12),
    inset 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* PDF Button - Red */
.btnPDF {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 
    0 2px 4px rgba(239, 68, 68, 0.25),
    0 1px 2px rgba(239, 68, 68, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.btnPDF:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 
    0 3px 6px rgba(239, 68, 68, 0.3),
    0 1px 3px rgba(239, 68, 68, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* WhatsApp Button - Green */
.btnWhatsApp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 
    0 2px 4px rgba(37, 211, 102, 0.25),
    0 1px 2px rgba(37, 211, 102, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.btnWhatsApp:hover {
  background: linear-gradient(135deg, #20BA5A 0%, #0E7A6D 100%);
  box-shadow: 
    0 3px 6px rgba(37, 211, 102, 0.3),
    0 1px 3px rgba(37, 211, 102, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.shareIconCute {
  font-size: 15px;
  line-height: 1;
}

.shareTextCute {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Old 3D button - hide */
.btnShare3D {
  display: none;
}

/* Old share button - hide */
.btnShare {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 2px solid #047857;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  display: none;
  align-items: center;
  gap: 6px;
}

.btnShare:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Share Modal */
.shareModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.shareModal.active {
  display: flex;
}

.shareModalContent {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

.shareModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.shareModalTitle {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.shareModalClose {
  background: none;
  border: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.shareModalClose:hover {
  background: #f3f4f6;
  color: #1f2937;
}

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

.shareOption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}

.shareOption:hover {
  border-color: #10b981;
  background: #f0fdf4;
  transform: translateX(4px);
}

.shareOptionIcon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.shareOptionIcon.whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.shareOptionIcon.pdf {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.shareOptionIcon.link {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.shareOptionText {
  flex: 1;
}

.shareOptionTitle {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.shareOptionDesc {
  font-size: 12px;
  color: #6b7280;
}


/* Mobile Optimizations - Compact Heights */
@media (max-width: 768px) {
  /* Reduce card padding on mobile */
  .card {
    padding: 8px;
    margin-top: 8px;
  }
  
  /* Compact master card */
  .masterCard {
    margin: 12px 0;
  }
  
  .masterCardSummary {
    padding: 12px 14px;
  }
  
  .masterCardBody {
    padding: 12px;
  }
  
  /* Compact individual cards */
  .panchaCard {
    margin: 8px 0;
  }
  
  .panchaCardSummary {
    padding: 10px;
  }
  
  .panchaCardBody {
    padding: 10px;
  }
  
  /* Smaller card numbers */
  .cardNumber {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  /* Compact card titles */
  .cardTitleMain {
    font-size: 13px;
  }
  
  .cardTitleSub {
    font-size: 10px;
  }
  
  /* Compact filters */
  .filtersCard {
    padding: 10px;
    margin: 10px 0;
  }
  
  .filtersHeader {
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .filtersCard .filters {
    padding: 10px;
    gap: 8px;
  }
  
  /* Compact fields */
  .field label {
    font-size: 10px;
    margin-bottom: 3px;
  }
  
  .field input,
  .field select {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  /* Compact share button container */
  div[style*="justify-content:flex-end"] {
    margin: 10px 0 !important;
  }
  
  /* Extra compact share buttons on mobile */
  .btnShareCute {
    padding: 5px 10px;
    font-size: 11px;
    min-width: 70px;
    border-radius: 14px;
  }
  
  .shareIconCute {
    font-size: 14px;
  }
  
  .shareTextCute {
    font-size: 11px;
  }
  
  /* Compact dropdowns */
  .chip {
    padding: 5px 9px;
    font-size: 12px;
    min-width: 80px;
  }
  
  /* Compact buttons */
  .btnSettingsLock,
  .btnRefresh {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  /* Compact hero section */
  .hero {
    padding: 10px;
  }
  
  .logo {
    width: 30px;
    height: 30px;
  }
  
  .brand .title {
    font-size: 16px;
  }
  
  .brand .subtitle {
    font-size: 11px;
  }
  
  /* Reduce gap between elements */
  .topbar {
    gap: 8px;
  }
  
  /* Compact yogam rules */
  .yogamRulesNested {
    margin: 12px 0;
  }
  
  .yogamRulesNestedSummary {
    padding: 10px;
    font-size: 12px;
  }
  
  .yogamRulesNestedContent {
    padding: 10px;
  }
}

/* Extra small mobile (320px-480px) */
@media (max-width: 480px) {
  .wrap {
    padding: 8px;
  }
  
  .card {
    padding: 6px;
    margin-top: 6px;
    border-radius: 10px;
  }
  
  .masterCard {
    margin: 10px 0;
    border-radius: 12px;
  }
  
  .masterCardSummary {
    padding: 10px 12px;
  }
  
  .masterCardBody {
    padding: 10px;
  }
  
  .panchaCard {
    margin: 6px 0;
    border-radius: 10px;
  }
  
  .panchaCardSummary {
    padding: 8px;
  }
  
  .panchaCardBody {
    padding: 8px;
  }
  
  .cardNumber {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .filtersCard {
    padding: 8px;
    margin: 8px 0;
  }
  
  .btnShareCute {
    padding: 4px 8px;
    font-size: 10px;
    min-width: 65px;
    gap: 4px;
  }
  
  .shareIconCute {
    font-size: 13px;
  }
  
  .shareTextCute {
    font-size: 10px;
  }
}



/* Extra Small Mobile - Ultra Compact Header */
@media (max-width: 480px) {
  .panchaIntro {
    padding: 6px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 6px !important;
  }
  
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 45px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 40px !important;
  }
  
  .panchaIntro h3 {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin-bottom: 0px !important;
  }
  
  .panchaIntro h4 {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 1px !important;
  }
  
  .panchaIntro p {
    font-size: 9px !important;
    line-height: 1.1 !important;
    display: none; /* Hide subtitle on very small screens to save space */
  }
}



/* Extra Small Mobile - Ultra Compact, Bigger Images */
@media (max-width: 480px) {
  .panchaIntro {
    padding: 4px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 6px !important;
  }
  
  /* BIGGER images on small screens for visibility */
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 60px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 50px !important;
  }
  
  /* SMALLER text to save space */
  .panchaIntro > div > div > div:first-child {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
  
  .panchaIntro > div > div > div:nth-child(2) {
    font-size: 9px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
  }
}

/* Tiny screens - Maximum image visibility */
@media (max-width: 360px) {
  .panchaIntro {
    padding: 3px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 4px !important;
  }
  
  /* Keep images prominent */
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 55px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 45px !important;
  }
  
  /* Tiny text */
  .panchaIntro > div > div > div:first-child {
    font-size: 9px !important;
    line-height: 1.0 !important;
  }
  
  .panchaIntro > div > div > div:nth-child(2) {
    font-size: 8px !important;
    line-height: 1.0 !important;
    margin-top: 1px !important;
  }
}


/* Mobile Header - White Text with Shadow, Black Subtitle */
@media (max-width: 768px) {
  .panchaIntro {
    padding: 6px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 8px !important;
  }
  
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 65px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 55px !important;
  }
  
  /* Telugu title - white */
  .panchaIntro > div > div > div:first-child {
    font-size: 11px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4) !important;
  }
  
  /* English title - white */
  .panchaIntro > div > div > div:nth-child(2) {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4) !important;
  }
  
  /* Subtitle - black, keep visible */
  .panchaIntro > div > div > div:nth-child(3) {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    color: #000000 !important;
    text-shadow: none !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
  .panchaIntro {
    padding: 4px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 6px !important;
  }
  
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 60px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 50px !important;
  }
  
  /* Telugu - white */
  .panchaIntro > div > div > div:first-child {
    font-size: 10px !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
  }
  
  /* English - white */
  .panchaIntro > div > div > div:nth-child(2) {
    font-size: 9px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
  }
  
  /* Subtitle - black, smaller but visible */
  .panchaIntro > div > div > div:nth-child(3) {
    font-size: 8px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    color: #000000 !important;
    text-shadow: none !important;
  }
}

/* Tiny screens */
@media (max-width: 360px) {
  .panchaIntro {
    padding: 3px !important;
  }
  
  .panchaIntro div[style*="display:flex"] {
    gap: 4px !important;
  }
  
  .panchaIntro img[alt="Lord Venkateswara"] {
    height: 55px !important;
  }
  
  .panchaIntro img[alt="Panchang"] {
    height: 45px !important;
  }
  
  /* Telugu - white */
  .panchaIntro > div > div > div:first-child {
    font-size: 9px !important;
    line-height: 1.0 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
  }
  
  /* English - white */
  .panchaIntro > div > div > div:nth-child(2) {
    font-size: 8px !important;
    line-height: 1.0 !important;
    margin-top: 1px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
  }
  
  /* Subtitle - black, very small but keep visible */
  .panchaIntro > div > div > div:nth-child(3) {
    font-size: 7px !important;
    line-height: 1.0 !important;
    margin-top: 1px !important;
    color: #000000 !important;
    text-shadow: none !important;
  }
}


/* Fix dropdown visibility on mobile */
@media (max-width: 768px) {
  .menu {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 360px !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  }
  
  .dd[open] > .menu {
    display: block !important;
  }
}


/* Rotate Phone Message */
.rotateMessage {
  display: none; /* Hidden on desktop */
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  box-shadow: 
    0 2px 4px rgba(245, 158, 11, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: gentlePulse 2s ease-in-out infinite;
}

.rotateIcon {
  font-size: 16px;
  line-height: 1;
}

.rotateText {
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Show rotate message on mobile portrait only */
@media (max-width: 768px) and (orientation: portrait) {
  .rotateMessage {
    display: flex !important;
  }
}

/* Extra small mobile - make message more compact */
@media (max-width: 480px) and (orientation: portrait) {
  .rotateMessage {
    padding: 5px 10px;
    font-size: 10px;
  }
  
  .rotateIcon {
    font-size: 14px;
  }
  
  .rotateText {
    font-size: 9px;
  }
}

/* Very small screens - ultra compact message */
@media (max-width: 360px) and (orientation: portrait) {
  .rotateMessage {
    padding: 4px 8px;
    gap: 4px;
  }
  
  .rotateIcon {
    font-size: 13px;
  }
  
  .rotateText {
    font-size: 8px;
  }
}

/* Hide message in landscape mode (already horizontal!) */
@media (orientation: landscape) {
  .rotateMessage {
    display: none !important;
  }
}