/* =========================================
   ASHTAKAVARGA STYLES
========================================= */
.ks-av-module {
    width: 100%; 
    height: 100%; /* THE FIX: Forces height to sync with adjacent columns */
    display: flex;
    flex-direction: column;
    background: var(--ks-bg);
    border: 1px solid var(--ks-border); 
    border-radius: 6px;
    box-shadow: var(--ks-shadow); 
    overflow: hidden;
    margin-bottom: 20px; 
    font-family: 'Poppins', sans-serif;
}

.ks-av-header {
    background: var(--ks-panel-bg); padding: 12px 20px;
    border-bottom: 1px solid var(--ks-border);
}

.ks-av-container { 
    flex-grow: 1; /* THE FIX: Fills available space */
    display: flex;
    justify-content: center;
    align-items: center; /* THE FIX: Centers the grid vertically */
    padding: 15px; 
}

/* THE 3x3 MASTER GRID */
.ks-av-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* THE FIX: Tighter gap for a more compact look */
    width: 100%;
    max-width: 440px; /* THE FIX: Prevents the squares from growing too tall */
    margin: 0 auto;
}

/* INDIVIDUAL SOUTH INDIAN CHART STRUCTURE */
.ks-av-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    aspect-ratio: 1; 
    background: var(--ks-border);
    gap: 1px; 
    border: 1px solid var(--ks-border);
    border-radius: 4px;
    overflow: hidden;
}

.ks-av-cell {
    background: var(--ks-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; /* THE FIX: Slightly smaller font to fit the compact grid */
    font-weight: bold;
    color: var(--ks-text);
    position: relative;
}

.ks-av-highlight { background-color: rgba(212, 175, 55, 0.2); }

/* THE CENTER LABEL BOX */
.ks-av-center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: var(--ks-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px; /* THE FIX: Reduced from 20px */
    font-weight: bold;
    color: var(--ks-border); 
    text-transform: uppercase;
    text-align: center;
}
.ks-av-center-sub {
    font-size: 9px;
    opacity: 0.7;
    color: var(--ks-text);
    margin-top: 2px;
}

/* Map the 12 signs */
.ks-av-cell-11 { grid-column: 1; grid-row: 1; } 
.ks-av-cell-0  { grid-column: 2; grid-row: 1; } 
.ks-av-cell-1  { grid-column: 3; grid-row: 1; } 
.ks-av-cell-2  { grid-column: 4; grid-row: 1; } 
.ks-av-cell-3  { grid-column: 4; grid-row: 2; } 
.ks-av-cell-4  { grid-column: 4; grid-row: 3; } 
.ks-av-cell-5  { grid-column: 4; grid-row: 4; } 
.ks-av-cell-6  { grid-column: 3; grid-row: 4; } 
.ks-av-cell-7  { grid-column: 2; grid-row: 4; } 
.ks-av-cell-8  { grid-column: 1; grid-row: 4; } 
.ks-av-cell-9  { grid-column: 1; grid-row: 3; } 
.ks-av-cell-10 { grid-column: 1; grid-row: 2; } 

@media (max-width: 900px) { .ks-av-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; } }
@media (max-width: 600px) { .ks-av-grid { grid-template-columns: 1fr; max-width: 300px; } }