/* ==========================================================================
   Dixith.com Jeevana Sutra Support Suite - Master Stylesheet v3.1
   Description: Demystified UI, Advanced Breathing Animations, Compact Footer
   ========================================================================== */

:root {
    --dx-primary: #8C2111; 
    --dx-heading-bright: #B71C1C;
    --dx-dark: #3A1108;    
    --dx-gold: #D4AF37;    
    --dx-teal: #2A7065;    
    --dx-blue: #2B4C7E;    
    --dx-text-main: #2C1B18;
    --dx-text-muted: #5D4A46;
    --dx-border: #D8CCC9;
    --dx-border-light: #EBE5E4;
    --dx-bg-page: #FFFFFF;
    --dx-bg-card: #FAF8F5; 
}

/* NUCLEAR RESET */
html body #dx-core-app#dx-core-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    width: 100% !important; max-width: 900px !important; margin: 0 auto !important;
    color: var(--dx-text-main) !important; line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased !important; box-sizing: border-box !important;
    background: #fff !important; border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; position: relative !important;
}
html body #dx-core-app#dx-core-app * { box-sizing: border-box !important; }

/* Font Protection */
html body #dx-core-app#dx-core-app p, html body #dx-core-app#dx-core-app ol, html body #dx-core-app#dx-core-app ul, 
html body #dx-core-app#dx-core-app li, html body #dx-core-app#dx-core-app details, html body #dx-core-app#dx-core-app summary, 
html body #dx-core-app#dx-core-app a, html body #dx-core-app#dx-core-app span, html body #dx-core-app#dx-core-app strong, 
html body #dx-core-app#dx-core-app em, html body #dx-core-app#dx-core-app div, html body #dx-core-app#dx-core-app .dx-body-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Headings (Merriweather) */
html body #dx-core-app#dx-core-app .dx-serif { font-family: 'Merriweather', Georgia, serif !important; }
html body #dx-core-app#dx-core-app .dx-heading-lg { font-family: 'Merriweather', Georgia, serif !important; font-size: 24px !important; font-weight: 900 !important; color: var(--dx-heading-bright) !important; margin: 28px 0 14px 0 !important; line-height: 1.3 !important; }
html body #dx-core-app#dx-core-app .dx-heading-md { font-family: 'Merriweather', Georgia, serif !important; font-size: 19px !important; font-weight: 700 !important; color: var(--dx-dark) !important; margin: 24px 0 10px 0 !important; line-height: 1.4 !important; }
html body #dx-core-app#dx-core-app .dx-heading-sm { font-family: 'Merriweather', Georgia, serif !important; font-size: 16px !important; font-weight: 700 !important; color: var(--dx-dark) !important; margin: 16px 0 8px 0 !important; }
html body #dx-core-app#dx-core-app p { margin-top: 0 !important; margin-bottom: 16px !important; font-size: 16px !important; line-height: 1.6 !important; }

/* Header */
html body #dx-core-app#dx-core-app .dx-header {
    background: linear-gradient(135deg, rgba(58, 17, 8, 0.95) 0%, rgba(140, 33, 17, 0.98) 100%) !important;
    color: #fff !important; padding: 40px 25px !important; border-radius: 8px 8px 0 0 !important; text-align: center !important; border-bottom: 4px solid var(--dx-gold) !important;
}
html body #dx-core-app#dx-core-app .dx-title { font-family: 'Merriweather', Georgia, serif !important; margin: 0 0 6px 0 !important; font-size: 32px !important; font-weight: 900 !important; color: #ffffff !important; display: block !important; line-height: 1.2 !important; }
html body #dx-core-app#dx-core-app .dx-subtitle { font-size: 16px !important; color: var(--dx-gold) !important; font-weight: 400 !important; font-style: italic !important; }
html body #dx-core-app#dx-core-app .dx-body { padding: 32px !important; border: 1px solid var(--dx-border-light) !important; border-top: none !important; border-radius: 0 0 8px 8px !important; position: static !important; }

/* Tabs */
html body #dx-core-app#dx-core-app .dx-tabs { display: flex !important; background: #FAF8F5 !important; border-left: 1px solid var(--dx-border-light) !important; border-right: 1px solid var(--dx-border-light) !important; padding: 6px 6px 0 !important; gap: 3px !important; }
html body #dx-core-app#dx-core-app .dx-tab { padding: 12px 18px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dx-text-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; border-radius: 6px 6px 0 0 !important; cursor: pointer !important; transition: all 0.2s !important; }
html body #dx-core-app#dx-core-app .dx-tab:focus-visible { outline: 2px solid var(--dx-primary) !important; outline-offset: -2px !important; }
html body #dx-core-app#dx-core-app .dx-tab.active { color: var(--dx-primary) !important; background: #fff !important; border-color: var(--dx-border-light) !important; font-weight: 700 !important; }
html body #dx-core-app#dx-core-app .dx-panel { display: none !important; }
html body #dx-core-app#dx-core-app .dx-panel.active { display: block !important; animation: fadeIn 0.3s ease-in-out !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Inputs & Golden Form Box */
html body #dx-core-app#dx-core-app .dx-ux-intro { 
    background-color: #FFF9C4 !important; border: 1px solid #FBC02D !important; border-radius: 8px !important; 
    padding: 18px 20px !important; margin-bottom: 28px !important; font-size: 15.5px !important; color: var(--dx-dark) !important; line-height: 1.6 !important;
}
html body #dx-core-app#dx-core-app .dx-highlight { color: var(--dx-primary) !important; font-weight: 700 !important; border-bottom: 2px solid var(--dx-gold) !important; padding-bottom: 1px !important; }
html body #dx-core-app#dx-core-app .dx-field { margin-bottom: 26px !important; width: 100% !important; }
html body #dx-core-app#dx-core-app .dx-label { display: block !important; margin-bottom: 10px !important; font-weight: 500 !important; color: var(--dx-dark) !important; font-size: 16px !important; }

html body #dx-core-app#dx-core-app .dx-select { 
    width: 100% !important; padding: 14px 40px 14px 16px !important; border: 1px solid #BCAAA4 !important; 
    border-radius: 6px !important; font-size: 15.5px !important; font-weight: 400 !important; 
    color: var(--dx-text-main) !important; background-color: #FAFAFA !important; transition: all 0.2s !important; cursor: pointer !important;
    appearance: none !important; -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233A1108' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important;
}
html body #dx-core-app#dx-core-app .dx-select:focus { outline: none !important; border-color: var(--dx-primary) !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(140, 33, 17, 0.1) !important; }

/* Inline Validation UI */
html body #dx-core-app#dx-core-app .dx-input-error { border-color: #D32F2F !important; background-color: #FFEBEE !important; }
html body #dx-core-app#dx-core-app .dx-validation-msg { display: none; background: #FFEBEE !important; color: #D32F2F !important; border: 1px solid #D32F2F !important; padding: 12px 16px !important; border-radius: 6px !important; margin-bottom: 20px !important; font-weight: 600 !important; font-size: 14px !important; text-align: center !important; }

html body #dx-core-app#dx-core-app .dx-btn-primary { padding: 18px 24px !important; border: none !important; border-radius: 6px !important; font-size: 18px !important; font-weight: 700 !important; cursor: pointer !important; color: #fff !important; display: block !important; width: 100% !important; text-align: center !important; background: linear-gradient(135deg, var(--dx-primary), var(--dx-dark)) !important; box-shadow: 0 4px 8px rgba(140, 33, 17, 0.2) !important; transition: transform 0.1s, box-shadow 0.2s !important; margin-top: 10px !important; }
html body #dx-core-app#dx-core-app .dx-btn-primary:hover { background: linear-gradient(135deg, var(--dx-heading-bright), var(--dx-primary)) !important; box-shadow: 0 6px 12px rgba(140, 33, 17, 0.3) !important;}

/* ==========================================================================
   THE PRANAYAMA PACER (With Synchronized Text)
   ========================================================================== */
html body #dx-core-app#dx-core-app .dx-pacer-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(255,255,255,0.98) !important; z-index: 10000 !important; display: none; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; padding: 40px !important;
}
html body #dx-core-app#dx-core-app .dx-pacer-header { font-family: 'Merriweather', serif !important; font-size: 22px !important; color: var(--dx-dark) !important; text-align: center !important; margin-bottom: 60px !important; font-style: italic !important;}
html body #dx-core-app#dx-core-app .dx-circle-container { position: relative !important; width: 220px !important; height: 220px !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 50px !important;}
html body #dx-core-app#dx-core-app .dx-breathing-circle {
    width: 60px !important; height: 60px !important; border-radius: 50% !important; background: var(--dx-gold) !important; opacity: 0.8 !important;
    animation: dx-breathe 12s infinite ease-in-out !important; /* 0-33 scale up, 33-66 hold, 66-100 scale down */
}
@keyframes dx-breathe { 
    0% { transform: scale(1); opacity: 0.5; } 
    33.33% { transform: scale(3.5); opacity: 0.9; } 
    66.66% { transform: scale(3.5); opacity: 0.9; } 
    100% { transform: scale(1); opacity: 0.5; } 
}

/* Synchronized Breathing Text */
html body #dx-core-app#dx-core-app .dx-pacer-text {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    font-family: -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #3A1108 !important;
    white-space: nowrap !important; opacity: 0; pointer-events: none !important; z-index: 10 !important;
}
html body #dx-core-app#dx-core-app .dx-text-inhale { animation: dx-fade-inhale 12s infinite !important; }
html body #dx-core-app#dx-core-app .dx-text-hold { animation: dx-fade-hold 12s infinite !important; }
html body #dx-core-app#dx-core-app .dx-text-exhale { animation: dx-fade-exhale 12s infinite !important; }

@keyframes dx-fade-inhale { 0%, 100% { opacity:0; } 5% { opacity:1; } 28% { opacity:1; } 33.33% { opacity:0; } }
@keyframes dx-fade-hold { 0%, 33.33%, 100% { opacity:0; } 38% { opacity:1; } 61% { opacity:1; } 66.66% { opacity:0; } }
@keyframes dx-fade-exhale { 0%, 66.66%, 100% { opacity:0; } 71% { opacity:1; } 95% { opacity:1; } }

/* Subtle Skip Button */
html body #dx-core-app#dx-core-app .dx-pacer-skip { 
    font-size: 14px !important; color: var(--dx-text-muted) !important; text-decoration: underline !important; 
    cursor: pointer !important; background: transparent !important; border: none !important; padding: 10px !important;
    opacity: 0.6 !important; transition: opacity 0.3s ease !important; margin-top: 10px !important; box-shadow: none !important; width: auto !important;
}
html body #dx-core-app#dx-core-app .dx-pacer-skip:hover { opacity: 1 !important; color: var(--dx-dark) !important; }

/* ==========================================================================
   RESULT BOX & COLOR THERAPY
   ========================================================================== */
html body #dx-core-app#dx-core-app .dx-result-box { padding: 35px !important; border-radius: 8px !important; margin-top: 35px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important; transition: all 0.5s ease !important; background-color: #ffffff !important; border: 1px solid var(--dx-border-light) !important; border-top: 5px solid var(--dx-heading-bright) !important; }
html body #dx-core-app#dx-core-app .dx-archetype-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; margin-bottom: 20px !important; gap: 12px !important;}
html body #dx-core-app#dx-core-app .dx-archetype-title { font-family: 'Merriweather', serif !important; font-size: 26px !important; color: var(--dx-primary) !important; font-weight: 900 !important; text-align: center !important; margin: 0 !important;}
html body #dx-core-app#dx-core-app .dx-sangha-mirror { text-align: center !important; font-size: 14px !important; color: var(--dx-text-muted) !important; font-style: italic !important; margin-bottom: 35px !important; padding-bottom: 25px !important; border-bottom: 1px solid var(--dx-border-light) !important;}

html body #dx-core-app#dx-core-app .dx-audio-toggle { background: rgba(0,0,0,0.05) !important; border: 1px solid rgba(0,0,0,0.1) !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 13.5px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--dx-dark) !important; font-weight: 600 !important; transition: all 0.2s !important; }
html body #dx-core-app#dx-core-app .dx-audio-toggle:hover { background: rgba(0,0,0,0.08) !important; }

/* Color Therapy Overrides */
html body #dx-core-app#dx-core-app [data-energy-theme="tamasic"] { background-color: #FFF9F2 !important; border-color: #FFE0B2 !important; border-top: 5px solid #E65100 !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="rajasic"] { background-color: #F4FAFC !important; border-color: #B3E5FC !important; border-top: 5px solid #0277BD !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="sattvic"] { background-color: #FAFAFF !important; border-color: #D1C4E9 !important; border-top: 5px solid #6A1B9A !important; }

/* Physical Actions Box */
html body #dx-core-app#dx-core-app .dx-somatic-box { background: #fff !important; border: 1px solid var(--dx-border) !important; border-left: 4px solid var(--dx-primary) !important; padding: 20px !important; border-radius: 6px !important; margin: 25px 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;}
html body #dx-core-app#dx-core-app .dx-safety-note { display: block !important; font-size: 14px !important; color: var(--dx-text-muted) !important; font-style: italic !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed var(--dx-border-light) !important; }

/* Shloka Typography */
html body #dx-core-app#dx-core-app .dx-shloka-container { background: #fff !important; border: 1px solid var(--dx-border-light) !important; border-radius: 6px !important; padding: 18px !important; margin: 16px 0 20px 0 !important; text-align: left !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;}
html body #dx-core-app#dx-core-app .dx-devanagari { font-size: 20px !important; color: var(--dx-text-main) !important; margin-bottom: 6px !important; font-weight: 400 !important; }
html body #dx-core-app#dx-core-app .dx-transliteration { font-family: 'Merriweather', Georgia, serif !important; font-size: 16px !important; font-style: italic !important; color: var(--dx-text-main) !important; margin-bottom: 6px !important; font-weight: 400 !important; line-height: 1.5 !important;}
html body #dx-core-app#dx-core-app .dx-shloka-ref { font-size: 14px !important; color: var(--dx-text-muted) !important; font-weight: 600 !important; margin-bottom: 0 !important; display: block !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;}

/* Suggested Action Plan */
html body #dx-core-app#dx-core-app .dx-dual-paths { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 24px !important; margin-top: 24px !important; }
html body #dx-core-app#dx-core-app .dx-advice-box { padding: 24px !important; border-radius: 8px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important; background: #ffffff !important; border: 1px solid var(--dx-border) !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="tamasic"] .dx-advice-philo { border-left: 4px solid #FFCC80 !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="tamasic"] .dx-advice-pragmatic { border-left: 4px solid #EF9A9A !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="rajasic"] .dx-advice-philo { border-left: 4px solid #81D4FA !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="rajasic"] .dx-advice-pragmatic { border-left: 4px solid #A5D6A7 !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="sattvic"] .dx-advice-philo { border-left: 4px solid #B39DDB !important; }
html body #dx-core-app#dx-core-app [data-energy-theme="sattvic"] .dx-advice-pragmatic { border-left: 4px solid #FFF59D !important; }

/* ==========================================================================
   INTEGRATION TOOLBOX
   ========================================================================== */
html body #dx-core-app#dx-core-app .dx-toolbox { margin-top: 45px !important; border-top: 2px solid var(--dx-border-light) !important; padding-top: 35px !important; }
html body #dx-core-app#dx-core-app .dx-toolbox-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
html body #dx-core-app#dx-core-app .dx-tool-btn { background: #F9F9F9 !important; border: 1px solid var(--dx-border) !important; border-radius: 6px !important; padding: 16px !important; text-align: left !important; cursor: pointer !important; font-size: 16px !important; font-weight: 600 !important; color: var(--dx-dark) !important; transition: all 0.2s !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
html body #dx-core-app#dx-core-app .dx-tool-btn:hover { background: #fff !important; border-color: var(--dx-primary) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; transform: translateY(-1px) !important;}
html body #dx-core-app#dx-core-app .dx-tool-btn.dx-tool-active { background: #fff !important; border-color: var(--dx-primary) !important; box-shadow: 0 4px 12px rgba(140, 33, 17, 0.08) !important; }
html body #dx-core-app#dx-core-app .dx-tool-content { display: none; background: #fff !important; border: 1px solid var(--dx-border) !important; padding: 24px !important; border-radius: 6px !important; margin-top: 16px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; grid-column: 1 / -1 !important;}
html body #dx-core-app#dx-core-app .dx-textarea { width: 100% !important; padding: 16px !important; border: 1px solid var(--dx-border) !important; border-radius: 6px !important; font-size: 16px !important; font-family: inherit !important; resize: vertical !important; min-height: 120px !important; margin-bottom: 16px !important; }
html body #dx-core-app#dx-core-app .dx-textarea:focus { outline: none !important; border-color: var(--dx-primary) !important; box-shadow: 0 0 0 3px rgba(140, 33, 17, 0.1) !important;}
html body #dx-core-app#dx-core-app .dx-dissolve-anim { animation: dx-smoke 3.5s forwards !important; } 
@keyframes dx-smoke { 0% { opacity: 1; filter: blur(0); transform: translateY(0); } 100% { opacity: 0; filter: blur(12px); transform: translateY(-30px); } }

/* ==========================================================================
   TAB 2: FLUSH-LEFT ALIGNMENT FIX (Bullet override)
   ========================================================================== */
html body #dx-core-app#dx-core-app .dx-source-list { 
    list-style: none !important; 
    padding-left: 0 !important; 
    margin-left: 0 !important; 
}
html body #dx-core-app#dx-core-app .dx-source-list li { 
    list-style: none !important;
    list-style-type: none !important;
    margin-left: 0 !important;
    margin-bottom: 24px !important; 
    padding-bottom: 20px !important; 
    padding-left: 18px !important; 
    border-left: 3px solid var(--dx-gold) !important; 
    border-bottom: 1px solid var(--dx-border-light) !important; 
}
/* Strip theme custom pseudo-elements just in case */
html body #dx-core-app#dx-core-app .dx-source-list li::before,
html body #dx-core-app#dx-core-app .dx-source-list li::after { display: none !important; content: none !important; }
html body #dx-core-app#dx-core-app .dx-source-list li:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important;}
html body #dx-core-app#dx-core-app .dx-source-desc { font-weight: 400 !important; font-size: 15.5px !important; color: var(--dx-text-main) !important; display: block !important; margin-top: 6px !important;}

/* ==========================================================================
   COMPACT FOOTER & DISCLAIMERS
   ========================================================================== */
html body #dx-core-app#dx-core-app .dx-fixed-box { background: var(--dx-bg-card) !important; border-top: 1px solid var(--dx-border-light) !important; padding: 20px !important; font-size: 14.5px !important; color: var(--dx-text-muted) !important; line-height: 1.6 !important; margin-top: 20px !important; border-radius: 6px !important; }
html body #dx-core-app#dx-core-app .dx-copyright-box { 
    background: #FAF8F5 !important; border: 1px solid var(--dx-border-light) !important; 
    margin-top: 10px !important; padding: 12px 16px !important; border-radius: 6px !important; 
    display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important;
}
html body #dx-core-app#dx-core-app .dx-c-left { display: flex !important; align-items: center !important; gap: 12px !important; }
html body #dx-core-app#dx-core-app .dx-c-icon { background: var(--dx-primary) !important; color: var(--dx-gold) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: bold !important; flex-shrink: 0 !important;}
html body #dx-core-app#dx-core-app .dx-c-title { color: var(--dx-dark) !important; font-weight: 700 !important; font-size: 14px !important; margin: 0 !important; line-height:1.2 !important; }
html body #dx-core-app#dx-core-app .dx-c-sub { font-size: 12px !important; color: var(--dx-text-muted) !important; margin: 2px 0 0 0 !important; line-height:1.3 !important; }
html body #dx-core-app#dx-core-app .dx-c-text { display: flex !important; flex-direction: column !important; justify-content: center !important; }

html body #dx-core-app#dx-core-app .dx-bookmark-btn { 
    display: inline-block !important; padding: 6px 12px !important; background: transparent !important; 
    border: 1px solid var(--dx-primary) !important; border-radius: 4px !important; color: var(--dx-primary) !important; 
    font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; 
    cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; align-self: center !important; 
}
html body #dx-core-app#dx-core-app .dx-bookmark-btn:hover { background: var(--dx-primary) !important; color: #fff !important; }

/* Responsive adjustments */
@media(max-width: 640px) {
    html body #dx-core-app#dx-core-app .dx-header { padding: 30px 20px !important; }
    html body #dx-core-app#dx-core-app .dx-body { padding: 24px 20px !important; }
    html body #dx-core-app#dx-core-app .dx-result-box { padding: 24px 20px !important; }
    html body #dx-core-app#dx-core-app .dx-toolbox-grid { grid-template-columns: 1fr !important; }
    html body #dx-core-app#dx-core-app .dx-copyright-box { flex-direction: column !important; align-items: flex-start !important; }
    html body #dx-core-app#dx-core-app .dx-bookmark-btn { align-self: flex-start !important; }
}