:root {
--v-pink: #e61c5d; --d-crimson: #b01043; --cream: #faf6ee;
}

body {
	background-color: #2c2520; background-image: radial-gradient(#44372e 20%, transparent 20%), radial-gradient(#44372e 20%, transparent 20%); background-size: 16px 16px; background-position: 0 0, 8px 8px; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; color: #111; overflow: hidden; height: 100dvh; display: flex; flex-direction: column;
}
body {
    overscroll-behavior-y: auto;
    min-height: 100.1vh;
	padding-top: env(safe-area-inset-top);
}

html {
	overscroll-behavior-y: auto;
}

.app-notification-slot {
width: 100%; position: relative; z-index: 200;
}

.sync-warning-banner {
display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff3cd; color: #856404; font-size: 14px; font-weight: bold; box-sizing: border-box; border-bottom: 3px solid #ffeeba;
}

.banner-msg-content {
text-align: left; padding-right: 8px; line-height: 1.4;
}

.catchup-btn {
background: #856404; color: #fff; border: none; padding: 6px 14px; font-size: 13px; font-weight: bold; border-radius: 4px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#live-time-ticker {
white-space: nowrap; letter-spacing: 0.5px; font-weight: 900;
}

.live-clock-panel {
background: #111; 
    color: #fffb14; 
    padding: 8px 12px; 
    text-align: center; 
    font-weight: bold; 
    font-family: monospace; 
    font-size: 16px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); 
    
    
    position: relative;
    z-index: 110 !important; 
    pointer-events: auto !important; 
    
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
}

.calendar-slip {
position: relative !important; 
    width: 100%; 
    background-color: var(--v-pink) !important; 
    color: #fff; 
    padding: 14px; 
    box-sizing: border-box; 
    border: 1px solid var(--d-crimson) !important; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); 
    transform-origin: top center; 
    transition: transform 0.5s ease, opacity 0.4s ease, background-color 0.3s ease; 
    z-index: 10; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    gap: 12px; 
    background-image: linear-gradient(to right, #222 50%, transparent 50%); 
    background-size: 8px 3px; 
    background-repeat: repeat-x; 
    background-position: top; 
    padding-top: 20px; 
    pointer-events: auto !important;
}

.top-row-deck {
flex: unset !important; 
    width: 100%;
    padding: 12px 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: #241d19; 
    border-bottom: 4px solid #111; 
    position: relative; 
    perspective: 1000px; 
    touch-action: pan-y !important;
}

.nav-btn {
background: var(--v-pink) !important; 
    color: #fff; 
    border: 1px solid var(--d-crimson) !important; 
    width: 85px; 
    text-align: center; 
    padding: 6px 0; 
    font-size: 13px; 
    font-weight: bold; 
    border-radius: 4px; 
    cursor: pointer; 
    flex-shrink: 0; 
    transition: background-color 0.3s ease;
}

.app-container {
display: flex; flex-direction: column; flex-grow: 1; min-height: 0;
}

.bottom-row-dashboard {
flex-grow: 1; 
    background-color: #eedec4; 
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 0); 
    background-size: 8px 8px; 
    padding: 12px; 
    box-sizing: border-box; 
    overflow-y: auto !important; 
    padding-bottom: 40px !important;
}

.slip-viewport-wrapper {
position: relative; width: 94%; /*max-width: 440px; */ display: flex; align-items: center; justify-content: center;
}

.calendar-slip.rip-off-next {
animation: ripNext 0.65s forwards ease-in; pointer-events: none !important;
}

.calendar-slip.rip-off-prev {
animation: ripPrev 0.65s forwards ease-in; pointer-events: none !important;
}

.slip-top-event-bar {
display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px;
}

.diya-icon {
font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.diya-icon.left-diya {
transform: scaleX(-1);
}

.elegant-event-badge {
font-weight: bold; font-size: 13px; color: #fffb14; text-align: center; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(255, 251, 20, 0.15); border: 1px solid rgba(255, 251, 20, 0.4); padding: 2px 12px; border-radius: 20px; text-shadow: 0 1px 2px #000;
}

.elegant-event-badge:empty {
display: none !important;
}

.grid-columns-container {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%;
}

.arch-card-node {
position: relative !important;
    background: var(--cream); 
    color: #111; 
    border-radius: 6px; 
    padding: 12px 6px; 
    text-align: center; 
    box-sizing: border-box; 
    border: 1px solid #ccbba3; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px;
}

.meta-stamp-yr {
font-size: 16px !important; font-weight: bold; color: #555; margin: 0px 0px 5px 0px !important; line-height: 1.2;
}

.panel-heading-str {
font-size: 20px !important; font-weight: 800; color: #000; margin: 0; line-height: 1.2;
}

.panel-heading-str.en {
font-family: 'Segoe UI', Arial, sans-serif; font-size: 20px !important; font-weight: bold;
}

#gu-tithi-txt-container, #gu-tithi-img-container {
display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    padding: 0 !important; 
    width: 100%;
}

#gu-tithi-lbl_word {
display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    margin: -0px 0px -10px 0px !important;
    padding: 0 !important; 
    width: 100%;
	font-size: 15px; font-weight: bold; margin-top: 4px; line-height: 1.2; color: var(--v-pink);
}

.massive-typographic-digit {
font-size: 82px !important; 
    font-weight: 900 !important; 
    font-family: 'Times New Roman', serif !important; 
    line-height: 1.0 !important; 
    color: #000 !important;
    margin: 0 !important; 
    padding: 0 !important;
}

.left-node .massive-typographic-digit {
color: var(--v-pink) !important;
}

#moon-phase-pic {
width: 100px !important; height: 100px !important; object-fit: contain; margin: 0 auto !important; display: block;
}

#moon-phase-name {
font-size: 16px !important; font-weight: 900; margin-top: 4px !important; line-height: 1.2;
}

.sub-day-string {
font-size: 24px !important; 
    font-weight: 900 !important; 
    color: #000 !important; 
    border-top: 1px solid #bbb; 
    padding-top: 8px !important; 
    width: 100%; 
    margin: 0 !important; 
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.slip-bottom-strip {
display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: bold; border-top: 1px dashed rgba(255,255,255,0.4); padding-top: 8px; width: 100%; box-sizing: border-box;
}

.astro-pill {
background: rgba(0,0,0,0.3); color: #fff; padding: 2px 8px; border-radius: 12px; display: flex; align-items: center; font-size: 12px
}

.chog-wrapper-matrix.three-col-dashboard {
display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; margin-bottom: 12px; align-items: stretch;
}

.chog-column-deck {
background: #fff; border: 1px solid #c8b89e; border-radius: 4px; overflow: hidden;
}

.chog-column-header {
background: #5e4636; color: #fff; font-size: 12px; font-weight: bold; padding: 6px 2px; text-align: center;
}

.chog-grid-cell {
padding: 6px 2px; font-size: 14px; font-weight: bold; border-bottom: 1px dashed #eee; text-align: center; cursor: pointer;
}

.chog-grid-cell.good-chog {
color: #cc0000;
}

.chog-grid-cell.bad-chog {
color: #666;
}

.chog-grid-cell.active {
background-color: #fff4b8 !important; color: #b01043 !important; outline: 1px solid #b01043;
}

.chog-display-focus-box {
background: linear-gradient(135deg, #fffdf7 0%, #f4eae1 100%); border: 1px solid #c8b89e; border-radius: 4px; padding: 8px 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}

.chog-display-focus-box .focus-title {
font-size: 20px; font-weight: bold; color: #b01043; margin-bottom: 4px;
}

.chog-display-focus-box .focus-time {
font-size: 14px; font-weight: 900; color: #2c2520; font-family: monospace; background: rgba(0,0,0,0.04); padding: 4px; border-radius: 3px; width: 94%;
}

.chog-display-focus-box .focus-hint {
font-size: 11px; color: #666; margin-top: 4px;
}

.astro-expanded-card {
background: #fff; border: 1px solid #c8b89e; border-radius: 4px; padding: 8px;
}

.detail-line-node {
display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #f5f0e6; font-weight: 500;
}

.detail-line-node span:first-child {
color: #665243; font-weight: bold;
}

.hide-node {
display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.toast-popup-window.show-toast {
bottom: 30px;
}

@keyframes ripNext {
	0% { transform: rotate(0deg) translateX(0); opacity: 1; }
    100% { transform: rotate(-15deg) translateX(-650px) translateY(100px); opacity: 0; }
}

@keyframes ripPrev {
	0% {transform: rotate(0deg) translateX(0); opacity: 1; }
    100% { transform: rotate(15deg) translateX(650px) translateY(100px); opacity: 0; }
}

@media (orientation: landscape) {
.app-container {
flex-direction: row; height: auto; }

.top-row-deck {
flex: 44 0 0; height: auto; border-bottom: none; border-right: 4px solid #111; }

    .bottom-row-dashboard {
flex: 56 0 0; height: auto; border-top: none; padding: 14px; }

    .slip-viewport-wrapper {
height: 92%; }

}

.muhurat-timeline-grid {
display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 8px;
    margin: 8px 0;
}

.muhurat-pill {
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.muhurat-pill.auspicious {
background: #e2f0d9;
    color: #385723;
    border-left: 4px solid #70ad47;
}

.muhurat-pill.inauspicious {
background: #fce4d6;
    color: #c65911;
    border-left: 4px solid #ed7d31;
}

.muhurat-pill .m-title {
font-weight: bold;
    margin-bottom: 2px;
}

.muhurat-pill span:last-child {
font-family: monospace, sans-serif;
    font-weight: 900;
}

@media (max-width: 360px) {
.muhurat-timeline-grid {
grid-template-columns: 1fr; }

}

.senior-highlight-deck {
display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.deck-item-pill {
display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccbba3;
    font-size: 15px;
    font-weight: bold;
}

.deck-item-pill .pill-tag {
color: #5e4636;
}

.deck-item-pill .pill-value {
font-weight: 900;
}

.senior-card-layout .detail-line-node {
font-size: 15px !important; 
    padding: 8px 0 !important;
}

.form-control-row {
display: flex; flex-direction: column; gap: 6px; border-bottom: 1px dashed #e4dec8; padding-bottom: 12px;
}

.form-control-row:last-child {
border-bottom: none; padding-bottom: 0;
}

.form-lbl {
font-size: 14px; font-weight: bold; color: #2c2520;
}

.field-explainer {
font-size: 11px; color: #666; font-weight: 500; line-height: 1.3; margin-top: 2px;
}

.input-inline-group {
display: flex; gap: 8px; width: 100%;
}

#user-city-input {
flex-grow: 1; padding: 8px 12px; font-size: 14px; border: 1px solid #c8b89e; border-radius: 4px; background: #fff; font-weight: bold;
}

.modal-action-btn {
background: #70ad47; color: #fff; border: none; padding: 8px 16px; font-weight: bold; border-radius: 4px; cursor: pointer;
}

.close-footer-btn {
background: #665243; color: #fff; border: none; padding: 8px 16px; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%;
}

/* 🚀 MATERIAL DIARY CSS HARDWARE SLIDER TOGGLE SWITCH BUTTON */
.toggle-switch-wrapper {
position: relative; width: 50px; height: 26px; margin-top: 2px;
}

.toggle-switch-wrapper input {
opacity: 0; width: 0; height: 0;
}

.slider-switch-track {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 34px;
}

.slider-switch-track:before {
position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .3s; border-radius: 50%;
}

input:checked + .slider-switch-track {
background-color: #e61c5d;
}

input:checked + .slider-switch-track:before {
transform: translateX(24px);
}

@keyframes zoomModalIn {
0% {
transform: scale(0.9); opacity: 0; }

    100% {
transform: scale(1); opacity: 1; }

}

#pref-trigger-btn {
pointer-events: auto !important;
    cursor: pointer;
}

.corner-anomaly-flag {
position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    /* પ્યોર CSS થી ત્રિકોણ આકાર ડ્રો થશે */
    border-style: solid;
    border-width: 38px 38px 0 0;
    border-color: #ffc107 transparent transparent transparent; /* વૃદ્ધિ તિથિ માટે પીળો રંગ */
    z-index: 50;
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}

/* ક્ષય (ટૂંકી) તિથિ માટે લાલ રંગનો ફ્લેગ */
.corner-anomaly-flag.status-broken {
border-color: #dc3545 transparent transparent transparent;
}

/* પીળા ફ્લેગની અંદર કાળો "!" આઇકોન સેટ કરવા માટે */
.corner-anomaly-flag::after {
content: "!";
    position: absolute;
    top: -36px;
    left: 8px;
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 14px;
    color: #000;
}

/* લાલ ફ્લેગની અંદર સફેદ "✕" આઇકોન સેટ કરવા માટે */
.corner-anomaly-flag.status-broken::after {
content: "✕";
    font-size: 11px;
    color: #fff;
    top: -34px;
    left: 9px;
}

/* 🚀 16-DOT GRID THEME PALETTE MANAGER */
.theme-palette-grid {
display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important; /* Forces 8 equal columns per row */
    gap: 8px;
    padding: 6px 0;
    width: 100%;
    box-sizing: border-box;
}

.color-dot {
display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Guarantees circles remain perfectly round regardless of phone width */
    border-radius: 50% !important;
    cursor: pointer;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-sizing: border-box !important;
}

/* Active Highlight Visual Ring state marker */
.color-dot.active {
transform: scale(1.2) !important;
    border-color: #fffb14 !important; /* Crisp traditional yellow focus border ring */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important;
    z-index: 10;
}

/* Styling Architecture to Rebuild standard Modals to Sliding Drawer Menu Layout */
.drawer-overlay-bg {
position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    transition: opacity 0.3s ease-in-out;
}

.drawer-card-box {
width: 460px; max-width: 95%; height: 100%;
    background: #ffffff; box-shadow: -4px 0 15px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    animation: slideInRight 0.25s forwards ease-out;
}

@keyframes slideInRight {
from {
transform: translateX(100%); }

    to {
transform: translateX(0); }

}

.hide-node {
display: none !important;
}

.drawer-header {
padding: 15px 20px; background: var(--v-pink, #d11a2a);
    color: white; display: flex; justify-content: space-between; align-items: center;
}

.close-drawer-btn {
font-size: 24px; cursor: pointer;
}

.drawer-nav-tabs {
display: flex; background: #f1f1f1; border-bottom: 1px solid #ddd;
}

.drawer-tab-btn {
flex: 1; padding: 12px 10px; border: none; background: none;
    font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s;
}

.drawer-tab-btn.active-tab {
background: #fff; border-bottom: 3px solid var(--primary-color, #d11a2a);
    color: var(--primary-color, #d11a2a);
}

.drawer-body {
padding: 20px; flex: 1; overflow-y: auto;
}

.form-control-row {
margin-bottom: 16px;
}

.form-inline-row {
display: flex; gap: 10px; margin-bottom: 16px;
}

.form-control-col {
flex: 1;
}

.full-width-input {
width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}

.input-inline-group {
display: flex; gap: 6px;
}

.input-inline-group input {
flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
}

.modal-action-btn {
padding: 0 15px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;
}

.coord-display-badge {
margin-top: 5px; font-size: 12px; color: #555; font-style: italic; font-weight: 500;
}

/* Custom Fallback Box CSS for missing locations */
.manual-coords-box {
background: #fff3e0; border: 1px solid #ffe0b2;
    padding: 12px; border-radius: 6px; margin: 10px 0;
}

.alert-text {
color: #e65100; font-weight: bold; font-size: 13px; margin-bottom: 8px;
}

.warm-btn {
background: #ff9800 !important;
}

.separation-border-top {
border-top: 1px dashed #ccc; padding-top: 14px;
}

.add-reminder-form-container {
background: #f9f9f9; padding: 14px; border-radius: 6px; border: 1px solid #eaeaea;
}

.add-rem-action-submit-btn {
width: 100%; padding: 12px; background: #2e7d32; color: #fff; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;
}

.reminders-flex-list {
display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}

.reminder-item-card {
display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #f5f5f5; border-left: 4px solid var(--primary-color, #d11a2a);
}

@keyframes pillPulse {
0% {
transform: scale(1); }

    50% {
transform: scale(1.05); background: #ffe0b2 !important; }

    100% {
transform: scale(1); }

}

/* Enhanced Senior-Readable Interactive Reminder Elements */
.reminder-item-card {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fdfdfd;
    border-left: 5px solid var(--primary-color, #d11a2a);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.reminder-item-card:hover {
background: #f5f9ff;
    border-left-color: #2196f3;
    transform: translateY(-1px);
}

@keyframes floatingBell {
0% {
transform: translateY(0) scale(1); }

    50% {
transform: translateY(-4px) scale(1.15); }

    100% {
transform: translateY(0) scale(1); }

}

.dynamic-bell-touch-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    //background: rgba(255, 255, 255, 0.12) !important;
    //border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    //padding: 6px 16px !important;
    //border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    
    /* GESTURE ISOLATION BLOCK: Completely kills browser side-swiping on this element */
    touch-action: none !important; 
    -webkit-user-select: none !important;
    user-select: none !important;
    
    /* Accessibility touch footprint footprint */
    min-width: 50px !important;
    height: 30px !important;
    
    /* Layer positioning hierarchy boost */
    position: relative !important;
    z-index: 9999 !important;
}

/* Ensure empty padding areas inside the pill don't leak touch data */
#user-reminder-bell-strip {
    touch-action: none !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Give a subtle tactile hover pop highlight effect on desktop screens */
.dynamic-bell-touch-pill:hover {
//    background: rgba(255, 255, 255, 0.15) !important;
}

/* Visual feedback on physical tap actions */
.dynamic-bell-touch-pill:active {
    transform: scale(0.95) !important;
//    background: rgba(255, 255, 255, 0.2) !important;
}

/* Guard: Ensure inner raw string characters don't interfere with interaction boundaries */
.dynamic-bell-touch-pill * {
    pointer-events: none !important;
}

#mobile-toast-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: #27272a; /* Premium modern slate dark charcoal core */
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    z-index: 9999999 !important; /* Forces global overlay dominance over sticky footers */
    width: auto;
    min-width: 290px;
    max-width: 90%;
    pointer-events: none;
    
    /* Fluid cubic-bezier parameters drive responsive physical deceleration curves */
    transition: opacity 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                bottom 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                visibility 0.35s;
}

/* NATIVE PORTRAIT VIEWPORTS: Slides up fluidly relative to real phone display bounds */
.toast-hidden {
    opacity: 0 !important;
    bottom: 30px !important;
    visibility: hidden !important;
}

.toast-visible {
    opacity: 1 !important;
    bottom: 95px !important; /* Elevates beautifully right above standard sticky footer profiles */
    visibility: visible !important;
}


/* Specialized Top-Right Corner Eclipse Indicator Flag CSS */
.corner-eclipse-flag {
position: absolute;
    top: -2px;
    right: -2px;
    width: 38px;
    height: 38px;
    background: #4a154b; /* Royal temple purple */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    z-index: 100;
    cursor: pointer;
    padding-left: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    animation: eclipsePulse 2s infinite ease-in-out;
}

@keyframes eclipsePulse {
0% {
filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.2)); background: #4a154b; }

    50% {
filter: drop-shadow(-2px 2px 6px #7b1fa2); background: #d11a2a; }

    100% {
filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.2)); background: #4a154b; }

}

/* 📱 Sticky Mobile Bottom Footer Design Styling rules */
#mobile-sticky-footer-menu {
position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #2c2520; /* Deep Obsidian Charcoal color match background */
    border-top: 2px solid var(--d-crimson);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 2000;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
}

.footer-nav-btn {
background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #a89f96;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: sans-serif;
    padding: 4px 0;
}

.footer-nav-btn .nav-icon {
font-size: 20px;
    margin-bottom: 2px;
}

.footer-nav-btn .nav-label {
font-size: 11px;
    font-weight: bold;
}

/* Highlighted Active Bottom Navigation Tab State */
.footer-nav-btn.active {
color: #ffffff;
    background: var(--v-pink); /* Traditional Dynamic color sync mapping */
}

/* 🚀 FIX 2: Enhanced Readability for Faint Headings */
/*.section-headline {
font-size: 16px; font-weight: bold; background: var(--v-pink); color: #5e4636; margin: 14px 0 6px 0; border-bottom: 2px solid #5e4636; padding-bottom: 2px;
}

*/
.section-headline {
}

.section-headline {
font-size: 18px !important;
    font-weight: 800 !important;
	background: var(--v-pink);
	color: #fbfbfb !important;
    margin: 2px 0 10px 0 !important;
    border-bottom: 2px solid #a89382 !important;
    //padding-bottom: 4px !important;
    //text-shadow: 0 1px 0px rgba(255,255,255,0.8);
	text-align: center;
	border-radius: 4px;
	padding: 10px 0px 0px 0px !important;
}

/* Ensure the shared bottom dashboard area wraps its items nicely */
.bottom-row-dashboard {
width: 100% !important;
    padding: 12px 0 !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
    display: block !important; /* Allows natural scrolling rows stack layout */
}

#swipe-deck-zone,
.slip-viewport-wrapper {
width: 100%;
    position: relative;
    overflow: visible !important; /* Lets cards fly off-screen cleanly */
    height: auto !important;
}

.viewport-panel {
	will-change: transform, opacity;
	display: none;
    width: 94%;
    margin: 0 auto;
    position: relative;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* 🛡️ Static Active State: Clean, centered layout with no animation properties */
.viewport-panel.active {
display: block;
    opacity: 1;
    transform: rotate(0deg) translateX(0) translateY(0);
}
.viewport-panel.panel-transitioning {
	opacity: 0 !important;
    //transform-origin: top center; 
    //transition: transform 0.5s ease, opacity 0.4s ease, background-color 0.3s ease; 
	transform: translateZ(0); /* keeps on GPU layer — faster opacity apply */
    pointer-events: none;
}

/* 📥 INCOMING DROP: Your clean top-to-bottom drop trajectory */
.viewport-panel.active.trigger-entrance {
/* Extended to 0.55s with a standard clean ease-out curve */
    animation: leafFallEntrance 0.60s ease forwards;
	//transform-origin: top center; 
    //transition: transform 0.5s ease, opacity 0.4s ease, background-color 0.3s ease; 
    
	/*transition: transform 0.5s ease, opacity 0.4s ease, background-color 0.3s ease; */
}

/* 💥 OUTGOING THROW NEXT: Clean sweep to the bottom-left corner */
.viewport-panel.rip-off-next {
display: block !important;
    /* Extended to 0.75s to allow for a slow, premium throw */
    animation: unifiedRipNext 0.65s ease-out forwards;
    pointer-events: none !important;
}

/* 💥 OUTGOING THROW PREV: Clean sweep to the bottom-right corner */
.viewport-panel.rip-off-prev {
display: block !important;
    /* Extended to 0.75s to allow for a slow, premium throw */
    animation: unifiedRipPrev 0.65s ease-out forwards;
    pointer-events: none !important;
}

@keyframes unifiedRipNext {
0% {
transform: rotate(0deg) translateX(0) translateY(0); 
        opacity: 1; }

    100% {
transform: rotate(-15deg) translateX(-650px) translateY(100px); 
        opacity: 0; }

}

@keyframes unifiedRipPrev {
0% {
transform: rotate(0deg) translateX(0) translateY(0); 
        opacity: 1; }

    100% {
transform: rotate(15deg) translateX(650px) translateY(100px); 
        opacity: 0; }

}

@keyframes leafFallEntrance {
    0%   { transform: translateY(-25px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}


/* ==========================================
   🚨 EMERGENCY MONKEY PATCH: UNIFIED SCROLL 
   ========================================== */

/* 1. Force the parent container to become the single primary scroll window */
body .app-container {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 40px) !important; /* Adjust 40px to match your clock panel height if needed */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}

/* 2. Break the rigid 44% flex basis constraint and let the swipe deck stack naturally */
body .app-container .top-row-deck {
    flex: 0 0 auto !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
}

/* 3. Retain horizontal overflow for flying animations, but disable vertical sizing limits */
body .app-container #swipe-deck-zone {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* 4. Kill the dashboard's internal scrollbar and force it to grow infinitely with its content */
body .app-container .bottom-row-dashboard {
    flex: 1 0 auto !important; /* Forces it to stay expanded, never shrinking */
    height: auto !important;
    overflow-y: visible !important; /* Stops it from trapping its own scrollbar */
    display: block !important;
    padding-bottom: 10px !important; /* 100px Safety cushion so content clears your sticky footer */
}

/* 5. Guard rails: Ensure sticky elements don't get swept into the scroll container stream */
body .live-clock-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 210 !important;
}

body #mobile-sticky-footer-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 150 !important;
}

/* End of MONKEY PATCH: */


/* Group label above muhurta rows */
.muhurat-group-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #c7c7c7;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 2px 2px 2px;
    margin-top: 6px;
}

/* Sub-line below a detail-line-node (for endsAt etc.) */
.detail-sub-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 6px 20px;
    font-size: 0.82rem;
    color: #546e7a;
    border-bottom: 1px dashed #e0e0e0;
    flex-wrap: wrap;
}
.sub-label  { color: #78909c; font-size: 0.78rem; }
.sub-value  { font-weight: 500; color: #37474f; }
.sub-sep    { color: #b0bec5; }

/* Divider between logical groups inside panel-3 */
.panchang-section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #cfd8dc, transparent);
    margin: 8px 4px;
}

/* Transition badge shown on ayana/ritu change days */
.transition-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
    margin-left: 6px;
}

/* Tithi/Karana status badge */
.status-badge {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    margin-left: 4px;
}
.status-badge.warn { background: #fff8e1; color: #f57f17; border-color: #ffe082; }
.status-badge.alert { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

.dashboard-embedded-reminders-holder {
	margin: 10px !important ;
}

.collapsible-broadcast-accordion  {
	margin: 10px !important ;
}


#toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 360px);
    background: #1a1a2e;
    color: #f0f0f0;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    z-index: 9999;
    line-height: 1.6;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#toast-notification.toast-fadeout {
    opacity: 0;
}

/* Hide panel content while fetch is in flight — preserves layout, shows no stale data */
.viewport-panel.panel-awaiting-data > * {
    opacity: 0 !important;
    transition: none !important;
}

/* When entrance animation fires, content fades in as part of the animation */
.viewport-panel.active.trigger-entrance > * {
    animation: contentReveal 0.25s ease forwards;
    animation-delay: 0.1s;
    opacity: 0; /* start hidden, animation brings it in */
}

@keyframes contentReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Loading overlay — sits over panel content */
.panel-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: var(--panel-bg, #faf6ee);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    opacity: 0;
    animation: overlayFadeIn 0.15s ease forwards;
}

.panel-loading-overlay.hide-node {
    display: none;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Simple pulsing dot — unobtrusive for elders */
.panel-loading-spinner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b01043;
    animation: spinnerPulse 0.8s ease-in-out infinite;
}

@keyframes spinnerPulse {
    0%, 100% { transform: scale(1);   opacity: 0.4; }
    50%       { transform: scale(1.6); opacity: 1;   }
}


/* Container block */
.astro-widget-container {
    background: #0f111a;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 24px;
    border-radius: 12px;
    //max-width: 500px;
    border: 1px solid #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	margin-bottom: 100px !important ;
}

/* Header section styling */
.astro-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
}

.astro-widget-title {
    margin: 0;
    color: #38bdf8;
    font-size: 1.15rem;
    font-weight: 600;
}

.astro-widget-nav-btn {
    background: linear-gradient(135deg, #0284c7, #4f46e5);
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: opacity 0.2s;
}

.astro-widget-nav-btn:hover {
    opacity: 0.9;
}

/* Informative dynamic event alert banner */
.astro-alert-banner {
    background: #1e1b4b;
    border-left: 4px solid #6366f1;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 18px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Banner color modifier states */
.astro-alert-banner.alert-info {
    background: #1e1b4b;
    border-color: #6366f1;
}
.astro-alert-banner.alert-info .astro-alert-title {
    color: #818cf8;
}

.astro-alert-banner.alert-warning {
    background: #451a03;
    border-color: #f59e0b;
}
.astro-alert-banner.alert-warning .astro-alert-title {
    color: #fbbf24;
}

.astro-alert-banner.alert-success {
    background: #064e3b;
    border-color: #10b981;
}
.astro-alert-banner.alert-success .astro-alert-title {
    color: #34d399;
}

.astro-alert-title {
    display: block;
    margin-bottom: 2px;
    font-weight: bold;
}

.astro-alert-desc {
    color: #cbd5e1;
}

/* Moon display block */
.astro-moon-box {
    background: #141724;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    border: 1px solid #1e293b;
}

.astro-moon-icon {
    font-size: 2rem;
}

.astro-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 8px;
}

.astro-moon-phase {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.astro-moon-illum {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Planet List Layouts */
.astro-planets-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.astro-planet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #141724;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #1e293b;
}

.astro-planet-name {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: bold;
}

.astro-planet-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 1px;
}

.astro-direction-highlight {
    color: #38bdf8;
    font-weight: 500;
}

.astro-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.astro-badge-prime {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.astro-badge-twilight {
    color: #64748b;
    background: rgba(100, 116, 139, 0.15);
}

.astro-no-data {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
    background: #141724;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}


/* ── DESKTOP: MOBILE CONTAINER ── */
@media (min-width: 600px) and (hover: hover) and (pointer: fine)  {
  html {
    background: #d4c5a9 !important;
  }

  body {
    background: #d4c5a9 !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 100vh !important;
    width: 100% !important;
  }

  body .app-container {
    width: 390px !important;
    max-width: 390px !important;
    min-width: 390px !important;
    margin: 0 auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5) !important;
	
  }

  body #mobile-sticky-footer-menu {
    width: 390px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  body .app-notification-slot {
	width: 390px !important;
	margin: 0 auto !important;
	left: auto !important;
	right: auto !important;
  }

  body .live-clock-panel {
	width: 390px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
  }
  
  body .app-container::-webkit-scrollbar {
    display: none !important;
  }
  body .app-container {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }
  
  body #mobile-toast-container {
        position: fixed !important; /* Fixed viewport reference prevents scroll window escapes */
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Pins container exactly over the base of your 390px mockup emulator preview framework */
        bottom: 105px !important; 
    }
}

/* =============================================================================
   MOBILE VIEWPPORT SPECIFIC INTERACTION PATCH (< 600px)
   ============================================================================= */
@media (max-width: 600px) {
    /* 1. Lift the base container out of trapped hardware stacking tracks */
    #user-reminder-bell-strip {
        position: relative !important;
        z-index: 50 !important;
        pointer-events: auto !important;
    }

    /* 2. Make the touch target large and easy to hit on small screens */
    .dynamic-bell-touch-pill {
        //padding: 6px 16px !important; /* Larger touch target for thumbs */
        //background: rgba(255, 255, 255, 0.12) !important; /* Slightly more visible on mobile background */
        //box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        touch-action: manipulation !important; /* Eliminates the mobile 300ms click delay cycle */
    }
    
    /* 3. Guard Layer: Prevent your parent swipe panel system from eating the click event */
    .slip-bottom-strip {
        position: relative !important;
        z-index: 40 !important;
        pointer-events: auto !important;
    }
}