/* ═══════════════════════════════════════════════════════════════════════
   Hindu Horoscope Pro — hh-style.css
   Covers: frontend widgets, admin panel, all themes, responsive layout
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Theme Tokens) ──────────────────────────── */
:root {
    --hh-primary:       #FF6B35;
    --hh-primary-dark:  #e55a25;
    --hh-primary-light: #fff3ee;
    --hh-accent:        #FFD166;
    --hh-text:          #1a1a2e;
    --hh-text-muted:    #6c6c80;
    --hh-bg:            #ffffff;
    --hh-bg-soft:       #fafafa;
    --hh-border:        #e8e0d5;
    --hh-border-radius: 14px;
    --hh-shadow:        0 4px 24px rgba(0,0,0,0.08);
    --hh-shadow-hover:  0 8px 32px rgba(0,0,0,0.14);
    --hh-font:          inherit;
    --hh-transition:    0.22s ease;
}

/* ── Theme Variants ─────────────────────────────────────────────────── */
.hh-theme-saffron  { --hh-primary: #FF6B35; --hh-primary-dark: #e55a25; --hh-primary-light: #fff3ee; --hh-accent: #FFD166; }
.hh-theme-ocean    { --hh-primary: #0077B6; --hh-primary-dark: #005f99; --hh-primary-light: #e8f4fb; --hh-accent: #90E0EF; }
.hh-theme-forest   { --hh-primary: #2D6A4F; --hh-primary-dark: #1b4332; --hh-primary-light: #d8f3dc; --hh-accent: #95D5B2; }
.hh-theme-royal    { --hh-primary: #6B2D8B; --hh-primary-dark: #4a1f62; --hh-primary-light: #f3e8ff; --hh-accent: #C77DFF; }
.hh-theme-rose     { --hh-primary: #C9184A; --hh-primary-dark: #a4133c; --hh-primary-light: #fff0f3; --hh-accent: #FFCCD5; }
.hh-theme-midnight { --hh-primary: #1A237E; --hh-primary-dark: #0d1b6e; --hh-primary-light: #e8eaf6; --hh-accent: #7986CB; }

/* ── Reset / Base ───────────────────────────────────────────────────── */
.hh-widget,
.hh-all-widget,
.hh-panchang-widget,
.hh-rashi-selector,
.hh-today-strip,
.hh-preview-card {
    box-sizing:  border-box;
    font-family: var(--hh-font);
    color:       var(--hh-text);
    line-height: 1.65;
}

.hh-widget *,
.hh-all-widget *,
.hh-panchang-widget * {
    box-sizing: border-box;
}

/* Accessibility */
.hh-sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0,0,0,0);
    border:   0;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET SHELL
   ═══════════════════════════════════════════════════════════════════════ */
.hh-widget {
    background:    var(--hh-bg);
    border:        1px solid var(--hh-border);
    border-radius: var(--hh-border-radius);
    box-shadow:    var(--hh-shadow);
    overflow:      hidden;
    margin-bottom: 2rem;
}

/* ── Sign Header ────────────────────────────────────────────────────── */
.hh-sign-header {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    padding:         1.25rem 1.5rem;
    background:      linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-dark) 100%);
    color:           #fff;
}

.hh-sign-symbol {
    font-size:   3rem;
    line-height: 1;
    flex-shrink: 0;
    filter:      drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.hh-sign-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.hh-sign-name {
    margin:      0;
    font-size:   1.5rem;
    font-weight: 700;
    color:       #fff;
    line-height: 1.2;
}

.hh-sign-lord,
.hh-sign-element {
    font-size:   0.85rem;
    opacity:     0.88;
    font-weight: 500;
}

/* ── Type Tabs ──────────────────────────────────────────────────────── */
.hh-type-tabs {
    display:          flex;
    background:       var(--hh-bg-soft);
    border-bottom:    1px solid var(--hh-border);
    overflow-x:       auto;
    scrollbar-width:  none;
}
.hh-type-tabs::-webkit-scrollbar { display: none; }

.hh-tab-btn {
    flex:            1;
    min-width:       80px;
    padding:         0.65rem 1rem;
    border:          none;
    background:      transparent;
    color:           var(--hh-text-muted);
    font-size:       0.88rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      all var(--hh-transition);
    border-bottom:   3px solid transparent;
    white-space:     nowrap;
}

.hh-tab-btn:hover {
    color:      var(--hh-primary);
    background: var(--hh-primary-light);
}

.hh-tab-btn.hh-tab-active,
.hh-tab-btn[aria-selected="true"] {
    color:        var(--hh-primary);
    border-color: var(--hh-primary);
    background:   var(--hh-primary-light);
}

/* ── Calendar Navigation ────────────────────────────────────────────── */
.hh-calendar-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.6rem 1.2rem;
    background:      var(--hh-bg-soft);
    border-bottom:   1px solid var(--hh-border);
    gap:             0.5rem;
}

.hh-nav-period {
    flex:        1;
    text-align:  center;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--hh-text);
    padding:     0 0.5rem;
}

.hh-nav-btn {
    padding:          0.4rem 0.85rem;
    border:           1px solid var(--hh-border);
    border-radius:    8px;
    background:       var(--hh-bg);
    color:            var(--hh-primary);
    font-size:        0.82rem;
    font-weight:      600;
    cursor:           pointer;
    transition:       all var(--hh-transition);
    white-space:      nowrap;
}

.hh-nav-btn:hover {
    background:  var(--hh-primary);
    color:       #fff;
    border-color:var(--hh-primary);
}

.hh-nav-today {
    background:   var(--hh-primary-light);
    border-color: var(--hh-primary);
}

/* ── Widget Body ────────────────────────────────────────────────────── */
.hh-body {
    padding: 1.4rem 1.5rem;
}

/* ── Period Label ───────────────────────────────────────────────────── */
.hh-period-label {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    margin-bottom: 0.85rem;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--hh-text-muted);
}

.hh-period-icon { font-size: 1rem; }

/* ── Panchang Strip ─────────────────────────────────────────────────── */
.hh-panchang-strip {
    display:          flex;
    flex-wrap:        wrap;
    gap:              0.5rem 1.2rem;
    padding:          0.6rem 0.9rem;
    background:       var(--hh-primary-light);
    border-radius:    8px;
    margin-bottom:    1rem;
    font-size:        0.82rem;
    color:            var(--hh-text);
    border-left:      3px solid var(--hh-primary);
}

.hh-panchang-strip span {
    white-space: nowrap;
}

/* ── Horoscope Text ─────────────────────────────────────────────────── */
.hh-horoscope-text {
    font-size:     1rem;
    line-height:   1.85;
    color:         var(--hh-text);
    margin:        0 0 1.1rem;
    padding:       1rem 1.2rem;
    background:    var(--hh-bg-soft);
    border-radius: 10px;
    border:        1px solid var(--hh-border);
}

/* ── Rahu Kaal Strip ────────────────────────────────────────────────── */
.hh-rahu-strip {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    font-size:     0.8rem;
    color:         var(--hh-text-muted);
    padding:       0.5rem 0.8rem;
    background:    #fff8e1;
    border-radius: 8px;
    border-left:   3px solid #f9a825;
    flex-wrap:     wrap;
}

.hh-rahu-icon { color: #f9a825; font-size: 1rem; }

/* ── Quality Badge ──────────────────────────────────────────────────── */
.hh-quality-badge {
    display:       inline-block;
    padding:       0.2rem 0.65rem;
    border-radius: 20px;
    font-size:     0.75rem;
    font-weight:   700;
    letter-spacing:0.03em;
    text-transform:uppercase;
}

.hh-q-positive    { background: #d1fae5; color: #065f46; }
.hh-q-neutral     { background: #fef3c7; color: #92400e; }
.hh-q-challenging { background: #fee2e2; color: #991b1b; }

/* ── Error State ────────────────────────────────────────────────────── */
.hh-error {
    display:       flex;
    align-items:   flex-start;
    gap:           0.6rem;
    padding:       1rem 1.2rem;
    background:    #fff1f2;
    border:        1px solid #fecdd3;
    border-radius: 10px;
    color:         #be123c;
    font-size:     0.9rem;
}

.hh-error-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ── Loading Spinner ────────────────────────────────────────────────── */
.hh-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.8rem;
    padding:         2rem;
    color:           var(--hh-text-muted);
    font-size:       0.9rem;
}

.hh-spinner {
    width:         28px;
    height:        28px;
    border:        3px solid var(--hh-border);
    border-top:    3px solid var(--hh-primary);
    border-radius: 50%;
    animation:     hh-spin 0.8s linear infinite;
    flex-shrink:   0;
}

@keyframes hh-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ALL HOROSCOPES WIDGET
   ═══════════════════════════════════════════════════════════════════════ */
.hh-all-widget {
    background:    var(--hh-bg);
    border:        1px solid var(--hh-border);
    border-radius: var(--hh-border-radius);
    box-shadow:    var(--hh-shadow);
    overflow:      hidden;
    margin-bottom: 2rem;
}

/* ── Rashi Grid (selector) ──────────────────────────────────────────── */
.hh-rashi-grid {
    display:               grid;
    gap:                   0.5rem;
    padding:               1rem;
    background:            var(--hh-bg-soft);
    border-bottom:         1px solid var(--hh-border);
}

.hh-cols-2 { grid-template-columns: repeat(2,  1fr); }
.hh-cols-3 { grid-template-columns: repeat(3,  1fr); }
.hh-cols-4 { grid-template-columns: repeat(4,  1fr); }

.hh-rashi-tab {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.25rem;
    padding:         0.6rem 0.4rem;
    border:          1px solid var(--hh-border);
    border-radius:   10px;
    background:      var(--hh-bg);
    cursor:          pointer;
    transition:      all var(--hh-transition);
    text-align:      center;
}

.hh-rashi-tab:hover {
    border-color: var(--hh-primary);
    background:   var(--hh-primary-light);
    transform:    translateY(-2px);
    box-shadow:   0 4px 12px rgba(0,0,0,0.08);
}

.hh-rashi-tab.hh-rashi-active,
.hh-rashi-tab[aria-selected="true"] {
    border-color: var(--hh-primary);
    background:   var(--hh-primary);
    color:        #fff;
    box-shadow:   0 4px 16px rgba(0,0,0,0.15);
}

.hh-rashi-tab .hh-rashi-symbol {
    font-size:   1.6rem;
    line-height: 1;
}

.hh-rashi-tab .hh-rashi-name {
    font-size:   0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ── Rashi Panel ────────────────────────────────────────────────────── */
.hh-rashi-panel {
    display:  none;
    padding:  1.4rem 1.5rem;
}

.hh-rashi-panel.hh-panel-active {
    display: block;
}

.hh-panel-header {
    display:       flex;
    align-items:   center;
    gap:           0.8rem;
    margin-bottom: 1rem;
    flex-wrap:     wrap;
}

.hh-panel-header .hh-sign-symbol {
    font-size: 2rem;
    line-height: 1;
}

.hh-panel-header h3 {
    margin:      0;
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--hh-primary);
}

.hh-panel-header .hh-sign-lord {
    font-size:   0.82rem;
    color:       var(--hh-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   PANCHANG TABLE
   ═══════════════════════════════════════════════════════════════════════ */
.hh-panchang-widget {
    background:    var(--hh-bg);
    border:        1px solid var(--hh-border);
    border-radius: var(--hh-border-radius);
    box-shadow:    var(--hh-shadow);
    padding:       1.4rem 1.5rem;
    margin-bottom: 2rem;
}

.hh-panchang-heading {
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--hh-primary);
    margin:        0 0 1.2rem;
    padding-bottom:0.6rem;
    border-bottom: 2px solid var(--hh-primary-light);
}

.hh-panchang-table-wrap {
    overflow-x: auto;
}

.hh-panchang-table,
.hh-planets-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.88rem;
    margin-bottom:   1.2rem;
}

.hh-panchang-table caption,
.hh-planets-table caption {
    font-size:     0.82rem;
    font-weight:   700;
    color:         var(--hh-primary);
    text-align:    left;
    margin-bottom: 0.4rem;
    padding:       0.4rem 0;
    caption-side:  top;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.hh-panchang-table th,
.hh-panchang-table td,
.hh-planets-table th,
.hh-planets-table td {
    padding:     0.55rem 0.8rem;
    border:      1px solid var(--hh-border);
    text-align:  left;
    vertical-align: top;
}

.hh-panchang-table thead th,
.hh-planets-table thead th {
    background:  var(--hh-primary);
    color:       #fff;
    font-weight: 700;
    font-size:   0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hh-panchang-table .hh-row-label {
    background:  var(--hh-bg-soft);
    font-weight: 600;
    color:       var(--hh-text);
    width:       42%;
    white-space: nowrap;
}

.hh-panchang-table .hh-row-pancha .hh-row-label {
    border-left: 3px solid var(--hh-primary);
}

.hh-panchang-table .hh-row-timing .hh-row-label {
    border-left: 3px solid #f9a825;
}

.hh-panchang-table tbody tr:nth-child(even) td,
.hh-panchang-table tbody tr:nth-child(even) th {
    background: var(--hh-bg-soft);
}

.hh-planet-name   { font-weight: 600; color: var(--hh-primary); }
.hh-planet-rashi  { color: var(--hh-text); }
.hh-planet-deg    { color: var(--hh-text-muted); font-family: monospace; }

/* ═══════════════════════════════════════════════════════════════════════
   TODAY STRIP
   ═══════════════════════════════════════════════════════════════════════ */
.hh-today-strip {
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    gap:              0.4rem 1rem;
    padding:          0.6rem 1.2rem;
    background:       linear-gradient(90deg, var(--hh-primary-light) 0%, var(--hh-bg) 100%);
    border:           1px solid var(--hh-border);
    border-radius:    8px;
    font-size:        0.82rem;
    color:            var(--hh-text);
    margin-bottom:    1rem;
}

.hh-today-item { white-space: nowrap; }
.hh-today-sep  { color: var(--hh-border); }
.hh-rahu-item  { color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════════
   RASHI SELECTOR
   ═══════════════════════════════════════════════════════════════════════ */
.hh-rashi-selector {
    margin-bottom: 1.5rem;
}

/* Buttons style */
.hh-selector-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.hh-rashi-btn {
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
    padding:       0.45rem 0.85rem;
    border:        1px solid var(--hh-border);
    border-radius: 8px;
    background:    var(--hh-bg);
    cursor:        pointer;
    font-size:     0.85rem;
    font-weight:   600;
    color:         var(--hh-text);
    transition:    all var(--hh-transition);
}

.hh-rashi-btn:hover {
    border-color: var(--hh-primary);
    color:        var(--hh-primary);
    background:   var(--hh-primary-light);
}

.hh-rashi-btn.hh-rashi-active,
.hh-rashi-btn[aria-pressed="true"] {
    background:   var(--hh-primary);
    color:        #fff;
    border-color: var(--hh-primary);
    box-shadow:   0 2px 8px rgba(0,0,0,0.12);
}

.hh-rashi-btn .hh-rashi-symbol { font-size: 1.1rem; }

/* Dropdown style */
.hh-rashi-dropdown {
    width:         100%;
    max-width:     320px;
    padding:       0.5rem 0.8rem;
    border:        1px solid var(--hh-border);
    border-radius: 8px;
    background:    var(--hh-bg);
    font-size:     0.9rem;
    color:         var(--hh-text);
    cursor:        pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIGN BADGE (inline)
   ═══════════════════════════════════════════════════════════════════════ */
.hh-sign-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    padding:       0.15rem 0.55rem;
    background:    var(--hh-primary-light);
    border:        1px solid var(--hh-border);
    border-radius: 6px;
    font-size:     0.85rem;
    font-weight:   600;
    color:         var(--hh-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   DATE DISPLAY
   ═══════════════════════════════════════════════════════════════════════ */
.hh-date-display {
    font-weight: 600;
    color:       var(--hh-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION TITLE / SUBTITLE
   ═══════════════════════════════════════════════════════════════════════ */
.hh-section-title {
    font-size:     1.8rem;
    font-weight:   800;
    color:         var(--hh-primary);
    margin-bottom: 0.5rem;
    line-height:   1.2;
}

.hh-section-subtitle {
    font-size:     1rem;
    color:         var(--hh-text-muted);
    margin-bottom: 1.5rem;
}

.hh-align-left   { text-align: left;   }
.hh-align-center { text-align: center; }
.hh-align-right  { text-align: right;  }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .hh-sign-header { padding: 1rem 1.1rem; }
    .hh-sign-symbol { font-size: 2.2rem; }
    .hh-sign-name   { font-size: 1.2rem; }
    .hh-body        { padding: 1rem 1.1rem; }

    .hh-cols-3,
    .hh-cols-4 { grid-template-columns: repeat(3, 1fr); }

    .hh-panchang-strip { flex-direction: column; gap: 0.3rem; }
    .hh-calendar-nav   { flex-wrap: wrap; gap: 0.4rem; }
    .hh-nav-period     { order: -1; width: 100%; }

    .hh-today-strip { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .hh-today-sep   { display: none; }
}

@media (max-width: 480px) {

    .hh-sign-header { flex-direction: column; text-align: center; }
    .hh-sign-info   { align-items: center; }

    .hh-type-tabs { flex-wrap: wrap; }
    .hh-tab-btn   { flex: 0 0 50%; font-size: 0.8rem; }

    .hh-cols-2,
    .hh-cols-3,
    .hh-cols-4 { grid-template-columns: repeat(2, 1fr); }

    .hh-section-title { font-size: 1.4rem; }

    .hh-rashi-selector.hh-selector-buttons { gap: 0.35rem; }
    .hh-rashi-btn { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    .hh-widget,
    .hh-all-widget,
    .hh-panchang-widget {
        --hh-bg:      #1e1e2e;
        --hh-bg-soft: #27273a;
        --hh-border:  #3a3a52;
        --hh-text:    #e8e8f0;
        --hh-text-muted: #9898b0;
        border-color: var(--hh-border);
    }

    .hh-horoscope-text { background: var(--hh-bg-soft); }
    .hh-rahu-strip     { background: #2a2410; }
    .hh-panchang-strip { background: rgba(255,255,255,0.05); }
    .hh-nav-btn        { background: var(--hh-bg-soft); color: var(--hh-primary); }
    .hh-rashi-tab      { background: var(--hh-bg-soft); color: var(--hh-text); }
    .hh-tab-btn        { color: var(--hh-text-muted); }

    .hh-panchang-table .hh-row-label,
    .hh-panchang-table tbody tr:nth-child(even) th {
        background: var(--hh-bg-soft);
        color:      var(--hh-text);
    }

    .hh-panchang-table tbody tr:nth-child(even) td {
        background: rgba(255,255,255,0.03);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    .hh-type-tabs,
    .hh-calendar-nav,
    .hh-rashi-grid,
    .hh-nav-btn,
    .hh-loading { display: none !important; }

    .hh-widget,
    .hh-rashi-panel { box-shadow: none; border: 1px solid #ccc; }
    .hh-sign-header { background: #f5f5f5 !important; color: #000 !important; }
    .hh-sign-name   { color: #000 !important; }
    .hh-rashi-panel { display: block !important; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN PANEL STYLES
   ═══════════════════════════════════════════════════════════════════════ */
.hh-admin-wrap { max-width: 960px; }

.hh-admin-title {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   1.6rem !important;
    color:       #FF6B35 !important;
}

.hh-admin-info-bar {
    display:       flex;
    flex-wrap:     wrap;
    gap:           1rem 2rem;
    padding:       0.7rem 1.2rem;
    background:    #fff8f5;
    border:        1px solid #ffdccf;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size:     0.85rem;
    color:         #6c3a1e;
}

.hh-admin-sections { display: flex; flex-direction: column; gap: 0; }

.hh-admin-section {
    background:    #fff;
    border:        1px solid #e8e0d5;
    border-radius: 10px;
    padding:       1.4rem 1.6rem;
    margin-bottom: 1.2rem;
}

.hh-admin-section h2 {
    margin-top:    0;
    font-size:     1.05rem;
    color:         #FF6B35;
    border-bottom: 1px solid #fde8dd;
    padding-bottom:0.5rem;
    margin-bottom: 1rem;
}

.hh-admin-section h3 {
    font-size:  0.95rem;
    color:      #333;
    margin-top: 1rem;
}

/* Theme swatches */
.hh-theme-swatches {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.6rem;
}

.hh-swatch-label {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           0.3rem;
    cursor:        pointer;
    padding:       0.5rem;
    border:        2px solid transparent;
    border-radius: 8px;
    transition:    all 0.2s ease;
}

.hh-swatch-label:hover,
.hh-swatch-label.hh-swatch-active {
    border-color: #FF6B35;
    background:   #fff8f5;
}

.hh-swatch-radio { display: none; }

.hh-swatch {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    display:       block;
    box-shadow:    0 2px 8px rgba(0,0,0,0.18);
    transition:    transform 0.2s;
}

.hh-swatch-label.hh-swatch-active .hh-swatch {
    transform: scale(1.15);
    box-shadow:0 3px 12px rgba(0,0,0,0.25);
}

.hh-swatch-name {
    font-size:   0.72rem;
    font-weight: 600;
    color:       #555;
    text-align:  center;
    max-width:   60px;
    line-height: 1.2;
}

/* Cache TTL list */
.hh-cache-ttl-list {
    margin:     0;
    padding:    0 0 0 1.2rem;
    list-style: disc;
    font-size:  0.88rem;
    color:      #555;
    line-height:2;
}

/* Shortcode reference grid */
.hh-shortcode-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   0.8rem;
}

.hh-sc-card {
    background:    #fafafa;
    border:        1px solid #e8e0d5;
    border-radius: 8px;
    padding:       0.8rem 1rem;
}

.hh-sc-code {
    display:       block;
    background:    #1e1e2e;
    color:         #79dcaa;
    padding:       0.5rem 0.7rem;
    border-radius: 6px;
    font-size:     0.78rem;
    word-break:    break-all;
    margin-bottom: 0.4rem;
    white-space:   pre-wrap;
}

.hh-sc-desc {
    font-size: 0.82rem;
    color:     #666;
    margin:    0;
}

/* Rashi slugs */
.hh-rashi-slugs { background: #f9f9f9; }
.hh-slug-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   0.4rem;
    font-size:             0.82rem;
}

.hh-slug-item {
    padding:       0.35rem 0.6rem;
    border:        1px solid #e8e0d5;
    border-radius: 6px;
    background:    #fff;
    line-height:   1.5;
}

/* Preview page */
.hh-preview-form .form-table th { width: 140px; }

.hh-preview-result { margin-top: 2rem; }

.hh-preview-card {
    padding:       1.5rem;
    border:        1px solid #e8e0d5;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow:    0 2px 12px rgba(0,0,0,0.06);
}

.hh-preview-debug {
    background:    #fafafa;
    border:        1px solid #e8e0d5;
    border-radius: 10px;
    padding:       1.2rem 1.4rem;
}

.hh-debug-table { font-size: 0.85rem; }
.hh-debug-overall td,
.hh-debug-overall th { background: #fff8f5 !important; }

.hh-planet-house-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin:    0.8rem 0 1rem;
}

.hh-ph-badge {
    padding:       0.3rem 0.65rem;
    background:    #f0f0ff;
    border:        1px solid #d0d0f0;
    border-radius: 8px;
    font-size:     0.8rem;
    color:         #333;
}

.hh-ph-badge strong {
    color:        #6B2D8B;
    margin-right: 0.3rem;
}

/* Cache stats */
.hh-cache-stats {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
    margin:    1.5rem 0;
}

.hh-stat-card {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    padding:       1.2rem 1.8rem;
    background:    #fff;
    border:        1px solid #e8e0d5;
    border-radius: 10px;
    box-shadow:    0 2px 8px rgba(0,0,0,0.05);
    min-width:     140px;
    flex:          1;
}

.hh-stat-number {
    font-size:   2rem;
    font-weight: 800;
    color:       #FF6B35;
    line-height: 1;
}

.hh-stat-label {
    font-size:   0.78rem;
    color:       #888;
    text-align:  center;
    margin-top:  0.3rem;
    line-height: 1.3;
}

.hh-cache-info { margin-bottom: 1.5rem; }

/* Panchang test */
.hh-ptest-result { margin-top: 2rem; }

.hh-ptest-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1.2rem;
    margin-bottom:         1.5rem;
}

.hh-ptest-section {
    background:    #fafafa;
    border:        1px solid #e8e0d5;
    border-radius: 10px;
    padding:       1rem 1.2rem;
}

.hh-ptest-section h3 {
    font-size:     0.9rem;
    margin-top:    0;
    color:         #FF6B35;
    border-bottom: 1px solid #fde8dd;
    padding-bottom:0.4rem;
    margin-bottom: 0.7rem;
}

/* Admin responsive */
@media (max-width: 782px) {
    .hh-admin-wrap    { max-width: 100%; }
    .hh-shortcode-grid{ grid-template-columns: 1fr; }
    .hh-ptest-grid    { grid-template-columns: 1fr; }
    .hh-cache-stats   { flex-direction: column; }
    .hh-stat-card     { flex-direction: row; justify-content: space-between; }
    .hh-theme-swatches{ gap: 0.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATION UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
.hh-fade-in {
    animation: hh-fadeIn 0.35s ease forwards;
}

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

.hh-slide-in {
    animation: hh-slideIn 0.3s ease forwards;
}

@keyframes hh-slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0);     }
}