/* =========================================
   CSS VARIABLES & RESET
   ========================================= */
:root { 
    --gold: #c5a059; 
    --silver: #a6a6a6; 
    --dark: #0a0a0a; 
    --card-bg: #111; 
    --border: #222; 
    --premium-font: 'Georgia', serif; 
    --wood: #4CAF50; 
    --fire: #FF5722; 
    --earth: #FFC107; 
    --metal: #9E9E9E; 
    --water: #2196F3; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background: var(--dark); 
    color: #fff; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
    line-height: 1.6; 
    padding: 20px; 
    overflow-x: hidden; 
}

/* =========================================
   TYPOGRAPHY & UTILITIES
   ========================================= */
.text-gold { color: var(--gold); }
.text-silver { color: var(--silver); }
.text-white { color: #fff; }
.text-gray { color: #666; }
.text-gray-sm { color: #666; font-size: 0.8rem; }
.text-muted { color: #888; }
.text-muted-sm { color: #888; font-size: 0.8rem; }
.text-white-md { color: #fff; font-size: 1.1rem; margin-top: 5px; }
.text-gold-bold { color: var(--gold); font-size: 1.1rem; font-weight: bold; margin-top: 5px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-xs { font-size: 0.7rem; color: #666; margin-bottom: 5px; }
.text-xs-gray { font-size: 0.7rem; color: #666; }
.text-xxs-gray { font-size: 0.6rem; color: #555; }
.text-sm-muted { color: #888; font-size: 0.78rem; }
.text-light-gray { color: #999; }
.text-lighter { color: #ccc; }
.text-light { font-size: 0.9rem; color: #ccc; }
.text-red { color: #FF5722; }
.text-blue { color: #2196F3; }
.text-green { color: #4CAF50; }
.text-orange { color: #FF9800; }
.float-right-gold { color: var(--gold); float: right; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mt-10 { margin-top: 10px; }
.opacity-60 { opacity: 0.6; }
.lh-2 { line-height: 2; }
.hidden { display: none; }

.section-title { 
    font-family: var(--premium-font); 
    color: var(--gold); 
    font-size: 1.5rem; 
    margin-bottom: 25px; 
    padding-bottom: 10px; 
    border-bottom: 2px solid var(--gold); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}
.section-title-sm { font-size: 1.1rem; margin-bottom: 15px; }
.section-title-md { font-size: 1.2rem; }
.section-title-lg { font-size: 1.3rem; margin-bottom: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }

.strategy-total-badge {
    font-size: 0.9rem;
    background: var(--gold);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-weight: bold;
}

/* =========================================
   LAYOUT & CONTAINERS
   ========================================= */
.bazi-container { max-width: 1200px; margin: 0 auto; }

.header { 
    text-align: center; 
    margin-bottom: 40px; 
    padding: 30px; 
    background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); 
    border: 1px solid var(--gold); 
    border-radius: 15px; 
}
.header h1 { 
    font-family: var(--premium-font); 
    color: var(--gold); 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
}
.header .subtitle { color: #666; font-size: 1rem; font-style: italic; }
.header .datetime { 
    margin-top: 20px; 
    padding: 15px; 
    background: rgba(197,160,89,0.1); 
    border-radius: 8px; 
    display: inline-block; 
}

.info-box { background: var(--card-bg); border: 1px solid var(--gold); border-radius: 12px; padding: 20px; margin-bottom: 30px; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.elements-section, .analysis-card, .stars-section, .interactions-section, .dayun-section, .bagua-section { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 25px; 
    margin-bottom: 30px; 
}

/* =========================================
   PILLARS (Четыре Столпа)
   ========================================= */
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.pillar { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 15px; 
    text-align: center; 
    position: relative; 
    display: flex;
    flex-direction: column;
}
.pillar.day { border-color: var(--gold); }
.pillar-name { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.pillar-name-lg { font-size: 1.1rem; }
.palace-god { color: #888; font-size: 0.72rem; margin-bottom: 6px; min-height: 20px; }
.palace-stem-el { color: #aaa; font-size: 0.7rem; margin-bottom: 2px; }
.stem-chinese { font-size: 2.6rem; font-weight: bold; font-family: var(--premium-font); line-height: 1.1; }
.stem-chinese-lg { font-size: 1.8rem; }
.branch-chinese { font-size: 2.2rem; font-weight: bold; color: #fff; font-family: var(--premium-font); line-height: 1.2; }
.branch-chinese-lg { font-size: 1.6rem; }
.palace-animal { color: #888; font-size: 0.68rem; margin: 4px 0; min-height: 26px; }
.nayin-box { background: rgba(197,160,89,0.1); border: 1px solid rgba(197,160,89,0.3); border-radius: 8px; padding: 6px; margin-top: 8px; font-size: 0.72rem; color: var(--gold); }
.palace-stages { color: var(--silver); font-size: 0.68rem; border-top: 1px dashed #333; border-bottom: 1px dashed #333; padding: 4px 0; margin: 8px 0; }
.hex-box { background: rgba(0,0,0,0.4); border: 1px solid #333; border-radius: 8px; padding: 8px; margin-top: 8px; }
.hex-line { letter-spacing: 2px; font-weight: bold; line-height: 1.4; }
.hex-line.yang { color: var(--gold); }
.hex-line.yin { color: var(--silver); }
.hex-nums { display: flex; justify-content: space-between; font-size: 0.68rem; color: #888; margin-top: 4px; }
.palace-hexname { color: var(--gold); font-weight: bold; font-size: 0.8rem; margin-top: 4px; font-family: var(--premium-font); }
.palace-hexru { color: #888; font-size: 0.6rem; line-height: 1.3; }
.palace-hidden { border-top: 1px dashed #333; padding-top: 4px; margin: 8px 0 6px; text-align: left; }
.palace-hidden span { display: block; color: #ccc; font-size: 0.62rem; line-height: 1.45; margin-bottom: 3px; }
.pillar-stars { text-align: left; border-top: 1px solid #333; padding-top: 4px; margin-top: auto; }
.palace-stars-align { text-align: left; margin-top: auto; }
.pillar-star-item { font-size: 0.66rem; padding: 2px 6px; margin: 2px; border-radius: 4px; display: inline-block; }
.star-auspicious { background: rgba(76,175,80,0.2); color: #4CAF50; border: 1px solid #4CAF50; }
.star-dangerous { background: rgba(255,87,34,0.2); color: #FF5722; border: 1px solid #FF5722; }
.star-powerful { background: rgba(197,160,89,0.2); color: var(--gold); border: 1px solid var(--gold); }
.star-neutral { background: rgba(166,166,166,0.2); color: var(--silver); border: 1px solid var(--silver); }
.star-unfavorable { background: rgba(100,100,100,0.2); color: #888; border: 1px solid #555; }
.strength-num { position: absolute; top: 6px; right: 10px; font-size: 0.75rem; font-weight: bold; }
.kongwang { opacity: 0.4; border-style: dashed !important; }
.kongwang-text { margin-top: 8px; color: #ff4444; font-size: 0.72rem; font-weight: bold; }
.percent-badge { color: var(--gold); font-size: 0.75rem; margin-left: 4px; opacity: 0.8; }
.no-stars-small { color: #444; font-size: 0.6rem; font-style: italic; }

/* =========================================
   ELEMENTS (У Син)
   ========================================= */
.elements-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 20px; }
.element-card { text-align: center; padding: 20px; border-radius: 10px; border: 2px solid; position: relative; }
.element-icon { font-size: 2.5rem; margin-bottom: 10px; }
.element-name { font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; }
.element-count { font-size: 1.5rem; font-weight: bold; color: var(--gold); }
.element-strength { font-size: 0.7rem; font-weight: bold; margin-top: 5px; }
.element-bar { height: 8px; background: #222; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.element-bar-fill { height: 100%; border-radius: 4px; }

.element-wood { border-color: var(--wood); } .element-wood .element-name { color: var(--wood); } .element-wood .element-bar-fill { background: var(--wood); }
.element-fire { border-color: var(--fire); } .element-fire .element-name { color: var(--fire); } .element-fire .element-bar-fill { background: var(--fire); }
.element-earth { border-color: var(--earth); } .element-earth .element-name { color: var(--earth); } .element-earth .element-bar-fill { background: var(--earth); }
.element-metal { border-color: var(--metal); } .element-metal .element-name { color: var(--metal); } .element-metal .element-bar-fill { background: var(--metal); }
.element-water { border-color: var(--water); } .element-water .element-name { color: var(--water); } .element-water .element-bar-fill { background: var(--water); }

/* Wuxing Circle */
.wuxing-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 15px; text-align: center; }
.wuxing-svg-wrapper { max-width: 700px; margin: 30px auto; position: relative; }
.wuxing-svg-wrapper svg { width: 100%; height: auto; }
.wuxing-legend { display: flex; justify-content: center; gap: 30px; margin-top: 20px; flex-wrap: wrap; }
.wuxing-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.wuxing-icon-title { font-weight: bold; margin-bottom: 8px; }
.gods-analysis-box { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; text-align: left; }
.h4-gold { color: var(--gold); margin-bottom: 15px; }
.gods-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; font-size: 0.85rem; }
.gods-list { color: #ccc; line-height: 1.5; }

/* =========================================
   ANALYSIS & STRATEGY
   ========================================= */
.analysis-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.strength-circle { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: bold; margin: 20px auto; }
.strength-strong { background: linear-gradient(135deg, var(--gold) 0%, #d4af37 100%); color: #000; }
.strength-weak { background: linear-gradient(135deg, var(--silver) 0%, #888 100%); color: #000; }
.text-center-mt { text-align: center; margin-top: 15px; }
.support-percent { font-size: 2.5rem; color: var(--gold); font-weight: bold; margin: 10px 0; }
.analysis-text { margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; color: #888; font-size: 0.85rem; line-height: 1.6; }

.life-strategy-card { grid-column: 1 / -1; border: 1px solid var(--gm-color, #333); background: rgba(0,0,0,0.5); padding: 25px; border-radius: 16px; }
.strategy-metaphor { color: #aaa; font-size: 0.9rem; font-style: italic; margin-bottom: 20px; border-left: 3px solid var(--gm-color, var(--gold)); padding-left: 12px; }
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 25px; }
.strategy-do, .strategy-avoid, .strategy-attract { padding: 15px; border-radius: 12px; }
.strategy-do { background: rgba(76, 175, 80, 0.05); border: 1px solid rgba(76, 175, 80, 0.3); }
.strategy-avoid { background: rgba(255, 87, 34, 0.05); border: 1px solid rgba(255, 87, 34, 0.3); }
.strategy-attract { background: rgba(197, 160, 89, 0.05); border: 1px solid rgba(197, 160, 89, 0.3); }
.strategy-header { font-weight: bold; font-size: 1rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.strategy-do .strategy-header { color: #4CAF50; }
.strategy-avoid .strategy-header { color: #FF5722; }
.strategy-attract .strategy-header { color: var(--gold); }
.strategy-text { color: #ddd; font-size: 0.88rem; line-height: 1.6; }

/* Math & Methodology Details */
.details-block { margin-top: 15px; border-top: 1px solid #333; padding-top: 15px; }
.details-summary { cursor: pointer; color: #888; font-weight: bold; font-size: 0.85rem; letter-spacing: 0.5px; }
.math-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 15px; }
.math-label { color: #666; font-size: 0.75rem; }
.math-value { font-size: 1.3rem; color: var(--gold); font-weight: bold; }
.math-max { font-size: 0.7rem; color: #444; }
.math-total { font-size: 1.8rem; font-weight: bold; }
.math-logs-grid { margin-top: 15px; font-size: 0.8rem; color: #777; line-height: 1.7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.methodology-details { margin-top: 20px; border-top: 1px dashed #444; padding-top: 15px; }
.methodology-summary { cursor: pointer; color: var(--silver); font-weight: bold; font-size: 0.95rem; }
.methodology-box { margin-top: 15px; font-size: 0.82rem; color: #aaa; line-height: 1.7; background: rgba(0,0,0,0.25); padding: 15px; border-radius: 8px; border: 1px solid #222; }
.methodology-step { color: var(--gold); margin: 0 0 10px 0; font-size: 0.95rem; border-bottom: 1px solid #333; padding-bottom: 5px; }
.bazi-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 0.78rem; }
.bazi-table th { text-align: left; padding: 6px; border-bottom: 1px solid #444; color: #ccc; }
.bazi-table td { padding: 6px; border-bottom: 1px solid #222; }
.warning-box { color: #FF5722; margin-bottom: 15px; background: rgba(255,87,34,0.05); padding: 8px; border-radius: 4px; }
.follower-warning { margin-top: 15px; padding: 10px; background: rgba(156,39,176,0.1); border-left: 3px solid #9C27B0; border-radius: 4px; color: #ce93d8; }
.total-score { font-size: 1.2rem; border-bottom: 2px solid var(--gold); }

/* =========================================
   STARS & INTERACTIONS (RESTORED & FIXED)
   ========================================= */
.star-standard { display: block; font-size: 0.7rem; color: #888; font-weight: normal; font-style: italic; margin-top: 2px; }
.star-source { display: block; font-size: 0.65rem; color: #6a8f6a; margin-top: 3px; }
.star-source-sm { display: block; font-size: 0.55rem; color: #6a8f6a; font-style: italic; }
.duplicate-pillar { background: rgba(76,175,80,0.15); border-color: #4CAF50; color: #4CAF50; }
.interactions-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 20px; }

.stars-list-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 15px; }
.star-card { background: rgba(0,0,0,0.35); border-radius: 10px; padding: 15px; border-left: 4px solid var(--star-color, #888); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.2s, box-shadow 0.2s; }
.star-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.star-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.star-card-title { font-size: 1.05rem; font-weight: bold; color: var(--star-color, #fff); line-height: 1.3; }
.star-card-cn { font-size: 0.85rem; color: #888; white-space: nowrap; }
.star-card-pillars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #333; }
.star-pillar-chip { background: rgba(255,255,255,0.06); border: 1px solid #444; color: #ccc; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; }
.star-pillar-chip.duplicate { background: rgba(197,160,89,0.15); border-color: var(--gold); color: var(--gold); font-weight: bold; }
.star-short-desc { font-size: 0.85rem; color: #bbb; line-height: 1.5; margin-bottom: 8px; }
.star-details { margin-top: 8px; }
.star-details summary { cursor: pointer; color: var(--star-color, var(--gold)); font-size: 0.82rem; font-weight: bold; user-select: none; padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; list-style: none; }
.star-details summary::-webkit-details-marker { display: none; }
.star-details summary::before { content: '▸'; font-size: 0.7rem; transition: transform 0.2s; }
.star-details[open] summary::before { transform: rotate(90deg); }
.star-details summary:hover { background: rgba(255,255,255,0.08); border-color: var(--star-color, var(--gold)); }
.star-details-content { margin-top: 12px; padding: 12px 14px; background: rgba(0,0,0,0.3); border-left: 3px solid var(--star-color, var(--gold)); border-radius: 0 8px 8px 0; font-size: 0.82rem; color: #ccc; line-height: 1.7; animation: fadeSlide 0.3s ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.star-details-content b { color: #fff; font-weight: bold; }
.group-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px dashed currentColor; opacity: 0.85; }
.group-header h4 { margin: 0; font-size: 1.1rem; }
.group-count { font-size: 0.75rem; padding: 2px 8px; background: currentColor; color: #000; border-radius: 10px; font-weight: bold; }

.interaction-cards { display:grid; grid-template-columns:1fr; gap:20px; margin-top:15px; }
@media (min-width:900px){ .interaction-cards { grid-template-columns:1fr 1fr; } }
.interaction-card { border-radius:12px; padding:18px; border:1px solid #333; background:rgba(0,0,0,0.35); }
.interaction-card.interaction-clash { border-color:#FF5722; background:rgba(255,87,34,0.06); }
.interaction-card.interaction-combine { border-color:#4CAF50; background:rgba(76,175,80,0.06); }
.interaction-card.interaction-harm { border-color:#9C27B0; background:rgba(156,39,176,0.07); }
.interaction-card.interaction-destruction { border-color:#795548; background:rgba(121,85,72,0.08); }
.interaction-card.interaction-punishment_full, .interaction-card.interaction-punishment_pride, .interaction-card.interaction-punishment_rude, .interaction-card.interaction-punishment_self { border-color:#F44336; background:rgba(244,67,54,0.06); }
.interaction-card.interaction-full_sanhe { border-color:var(--gold); background:rgba(197,160,89,0.08); box-shadow:0 0 18px rgba(197,160,89,0.15); }
.interaction-card.interaction-partial_sanhe { border-color:var(--gold); background:rgba(197,160,89,0.05); }
.interaction-card.interaction-full_sanhui { border-color:#2196F3; background:rgba(33,150,243,0.07); box-shadow:0 0 18px rgba(33,150,243,0.15); }
.interaction-card.interaction-partial_sanhui { border-color:#2196F3; background:rgba(33,150,243,0.05); }
.ic-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ic-title { font-size:1.05rem; color:#fff; }
.ic-cn { color:#888; font-size:0.85rem; margin-left:6px; }
.ic-animals { display:flex; gap:8px; flex-wrap:wrap; }
.ic-animal { background:rgba(255,255,255,0.06); border:1px solid #333; padding:3px 10px; border-radius:14px; font-size:0.8rem; color:#ddd; }
.ic-note { font-style:italic; color:#ccc; font-size:0.85rem; border-left:3px solid currentColor; padding:6px 10px; margin-bottom:12px; background:rgba(255,255,255,0.03); border-radius:0 6px 6px 0; }
.ic-grid { display:grid; gap:10px; }
.ic-block { font-size:0.82rem; color:#bbb; line-height:1.55; background:rgba(255,255,255,0.02); border-radius:8px; padding:10px 12px; }
.ic-label { font-weight:bold; color:#fff; font-size:0.78rem; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.ic-pros .ic-label { color:#4CAF50; }
.ic-cons .ic-label { color:#FF5722; }
.ic-advice .ic-label { color:var(--gold); }
.ic-advice { border:1px dashed rgba(197,160,89,0.4); }
.ic-sphere { font-size: 0.8rem; color: #aaa; margin-bottom: 10px; padding: 6px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; line-height: 1.5; }
.interaction-details { margin-top: 12px; }
.interaction-details summary { cursor: pointer; color: var(--gold); font-size: 0.82rem; font-weight: bold; user-select: none; padding: 6px 14px; background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.25); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; list-style: none; }
.interaction-details summary::-webkit-details-marker { display: none; }
.interaction-details summary::before { content: '▸'; font-size: 0.7rem; transition: transform 0.2s; }
.interaction-details[open] summary::before { transform: rotate(90deg); }
.interaction-details summary:hover { background: rgba(197,160,89,0.18); border-color: var(--gold); }
.interaction-details[open] summary { margin-bottom: 4px; }
.interaction-details .ic-grid { margin-top: 10px; animation: icFadeSlide 0.3s ease; }
@keyframes icFadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   DAYUN (Такты) & TRANSIT
   ========================================= */
.dayun-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 20px; }
.dayun-item { background: rgba(0,0,0,0.5); border: 1px solid #333; border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.2s; }
.dayun-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.dayun-active { border-color: var(--gold) !important; background: rgba(197,160,89,0.12) !important; box-shadow: 0 0 15px rgba(197,160,89,0.25); }
.dayun-age { font-size: 0.7rem; color: #666; margin-bottom: 8px; }
.dayun-stem { font-size: 1.5rem; font-weight: bold; color: var(--gold); font-family: var(--premium-font); }
.dayun-branch { font-size: 1.3rem; color: var(--silver); font-family: var(--premium-font); margin-top: 5px; }
.dayun-animal { font-size: 1.2rem; margin-top: 5px; }

.dayun-panel { margin-top: 25px; border: 1px solid var(--gold); border-radius: 12px; padding: 20px; background: rgba(0,0,0,0.35); animation: dyFade .25s ease; }
@keyframes dyFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dayun-panel-head { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; border-bottom: 1px dashed #333; padding-bottom: 15px; margin-bottom: 15px; }
.dayun-head-flex { display: flex; align-items: center; gap: 12px; }
.dayun-pillar-text { font-size: 2.6rem; color: var(--gold); font-family: var(--premium-font); font-weight: bold; }
.dayun-title { font-size: 1.05rem; color: #fff; }
.dayun-subtitle { font-size: 0.75rem; color: #888; }
.dayun-panel-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.dayun-col { background: rgba(255,255,255,0.02); border: 1px solid #222; border-radius: 8px; padding: 12px; font-size: 0.8rem; }
.dayun-col h5 { color: var(--gold); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.dayun-star { font-size: 0.68rem; line-height: 1.3; margin-bottom: 4px; border-left: 2px solid var(--star-clr, #888); padding-left: 6px; cursor: pointer; color: var(--star-clr, #ccc); }
.no-stars { color: #444; font-style: italic; font-size: 0.8rem; }
.star-source-small { color: #6a8f6a; font-style: italic; font-size: 0.58rem; }
.liunian-title { color: var(--gold); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 18px; }
.liunian-wrap { overflow-x: auto; margin-top: 15px; padding-bottom: 8px; }
.liunian-grid { display: grid; grid-template-columns: repeat(10, 96px); gap: 8px; width: max-content; }
.liunian-chip { background: rgba(0,0,0,0.4); border: 1px solid #333; border-radius: 8px; padding: 8px 6px; text-align: center; font-size: 0.7rem; }
.liunian-chip.now { border-color: var(--gold); background: rgba(197,160,89,0.15); }
.liunian-chip .ln-year { color: #888; font-size: 0.65rem; }
.liunian-chip .ln-pillar { color: var(--gold); font-weight: bold; font-size: 0.95rem; font-family: var(--premium-font); }
.liunian-chip .ln-god { color: #ccc; font-size: 0.62rem; margin-top: 3px; }

/* Transit Section */
.transit-section { background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%); border: 1px solid var(--gold); border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: 0 0 30px rgba(197, 160, 89, 0.1); }
.transit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.transit-label { color: #888; font-size: 0.8rem; }
.transit-value { color: #fff; font-size: 1.1rem; margin-top: 4px; }
.transit-term { color: var(--gold); font-size: 1.1rem; margin-top: 4px; font-weight: bold; }
.pillar.transit { border-color: #6c757d; background: rgba(108, 117, 125, 0.08); }
.pillar.transit .pillar-name::before { content: '\1F504\0000A0'; }
.active-dayun { background: rgba(197, 160, 89, 0.1); border: 2px solid var(--gold); border-radius: 12px; padding: 20px; margin: 20px 0; text-align: center; }
.active-dayun .age-badge { display: inline-block; background: var(--gold); color: #000; padding: 4px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-left: 10px; }
.transit-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
.active-dayun-label { color: #888; font-size: 0.85rem; margin-bottom: 10px; }
.active-dayun-flex { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.active-dayun-pillar { font-size: 2.5rem; color: var(--gold); font-family: var(--premium-font); font-weight: bold; }
.active-dayun-info { font-size: 1.3rem; color: #ccc; }
.active-dayun-note { color: #888; font-size: 0.8rem; margin-top: 10px; font-style: italic; }

/* =========================================
   YEARLY FORECAST
   ========================================= */
.yearly-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 25px; margin-bottom: 30px; }
.yearly-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 15px; }
.yearly-tip-box { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 3px solid var(--gold); }
.yearly-tip-title { color: var(--gold); font-weight: bold; margin-bottom: 8px; }
.yearly-tip-text { color: #ccc; font-size: 0.85rem; line-height: 1.6; }
.yearly-legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.weather-box { border: 1px solid rgba(144,202,249,0.25); border-radius: 10px; padding: 12px 15px; background: rgba(144,202,249,0.04); }
.weather-title { color: #90CAF9; font-weight: bold; font-size: 0.9rem; margin-bottom: 6px; }
.weather-text { color: #aaa; font-size: 0.78rem; line-height: 1.5; }
.weather-hack { color: #90CAF9; font-size: 0.72rem; font-style: italic; margin-top: 8px; }
.alchemy-box { border: 1px solid rgba(197,160,89,0.3); border-radius: 10px; padding: 12px 15px; background: rgba(197,160,89,0.04); }
.alchemy-title { color: var(--gold); font-weight: bold; font-size: 0.9rem; margin-bottom: 6px; }
.alchemy-text { color: #aaa; font-size: 0.78rem; line-height: 1.5; }
.alchemy-hack { color: var(--gold); font-size: 0.72rem; font-style: italic; margin-top: 8px; }

.years-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.year-card { background: rgba(0, 0, 0, 0.4); border: 1px solid #333; border-radius: 10px; padding: 14px; text-align: center; transition: all 0.2s; cursor: pointer; position: relative; }
.year-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15); }
.year-card.current { border-color: var(--gold); background: rgba(197, 160, 89, 0.1); box-shadow: 0 0 20px rgba(197, 160, 89, 0.2); }
.year-card.current::before { content: 'СЕЙЧАС'; position: absolute; top: -8px; right: -8px; background: var(--gold); color: #000; font-size: 0.65rem; font-weight: bold; padding: 3px 8px; border-radius: 10px; }
.year-card .year-num { font-size: 1.3rem; font-weight: bold; color: var(--gold); font-family: var(--premium-font); margin-bottom: 8px; }
.year-card .year-stem { font-size: 1.8rem; font-weight: bold; color: var(--gold); font-family: var(--premium-font); line-height: 1; }
.year-card .year-branch { font-size: 1.5rem; color: var(--silver); font-family: var(--premium-font); margin: 4px 0; }
.year-card .year-animal { font-size: 1.3rem; margin-bottom: 6px; }
.year-card .year-god { font-size: 0.72rem; color: #ccc; margin: 6px 0; padding: 4px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; line-height: 1.3; }
.year-card .year-nayin { font-size: 0.65rem; color: #888; font-style: italic; margin-top: 4px; }

.yearly-stars-box { margin-top: 8px; border-top: 1px dashed #444; padding-top: 6px; }
.yearly-palaces-label { color: #666; font-size: 0.58rem; margin-bottom: 6px; }
.arrival-color { color: #FFC107; }
.clash-color { color: #FF5722; }
.yearly-group-title { font-size: 0.64rem; font-weight: bold; margin-bottom: 3px; }
.yearly-star-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; margin-bottom: 2px; cursor: pointer; }
.yearly-star-name { font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; }
.yearly-star-hits { font-size: 0.68rem; font-weight: bold; letter-spacing: 1.5px; flex-shrink: 0; }

/* =========================================
   I CHING
   ========================================= */
.iching-section { background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%); border: 1px solid var(--gold); border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: 0 0 30px rgba(197, 160, 89, 0.1); }
.iching-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 20px; }
.iching-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.iching-card { background: rgba(0,0,0,0.4); border: 1px solid #333; border-radius: 10px; padding: 15px; }
.iching-card h4 { color: var(--gold); font-size: 0.85rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.iching-hex { font-weight: bold; line-height: 1.5; text-align: center; margin: 8px 0; font-size: 1.2rem; letter-spacing: 4px; }
.iching-scroll { max-height: 220px; overflow-y: auto; font-size: 0.78rem; color: #bbb; line-height: 1.6; padding-right: 6px; }
.iching-scroll::-webkit-scrollbar { width: 4px; }
.iching-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.relation-badge { display: inline-block; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.8rem; font-weight: bold; margin: 6px 0; }
.hex-qi { text-align: center; font-size: 0.7rem; color: #888; margin-top: 4px; }
.hex-relation-text { font-size: 0.78rem; color: #bbb; text-align: center; margin-bottom: 8px; }

.meihua-box { background: rgba(197,160,89,0.08); border: 2px solid var(--gold); border-radius: 12px; padding: 20px; margin-bottom: 25px; }
.meihua-title { color: var(--gold); font-size: 1.1rem; margin-bottom: 15px; }
.meihua-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 20px; align-items: start; }
.meihua-trigram { text-align: center; margin: 10px 0; }
.trigram-symbol { font-size: 1.5rem; color: var(--gold); margin-bottom: 5px; }
.trigram-label { font-size: 0.75rem; color: #888; }
.moving-line { color: #FF5722 !important; text-shadow: 0 0 10px rgba(255,87,34,0.8); }
.moving-label { font-size: 0.6rem; color: #FF5722; }
.hex-name { text-align: center; color: var(--gold); font-weight: bold; font-family: var(--premium-font); font-size: 1.2rem; margin-top: 10px; }
.transformed-trigram { font-size: 1.5rem; color: #4CAF50; margin-bottom: 5px; }
.transformed-hex-name { text-align: center; color: #4CAF50; font-weight: bold; font-family: var(--premium-font); font-size: 1.2rem; margin-top: 10px; }
.meihua-arrow { text-align: center; padding-top: 80px; }
.arrow-icon { font-size: 3rem; color: var(--gold); }
.arrow-label { font-size: 0.7rem; color: #888; margin-top: 5px; }
.iching-tip-box { margin-top: 20px; padding: 15px; background: rgba(0,0,0,0.4); border-radius: 8px; border-left: 3px solid var(--gold); }
.iching-tip-text { font-size: 0.85rem; color: #ccc; line-height: 1.6; }

/* =========================================
   BAGUA & COMPASS
   ========================================= */
.bagua-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; }
.bagua-label { color: #888; font-size: 0.85rem; margin-bottom: 8px; }
.bagua-number { font-size: 4rem; font-weight: bold; color: var(--gold); font-family: var(--premium-font); }
.bagua-group { font-size: 0.9rem; color: #ccc; margin-top: 5px; }
.bagua-divider { text-align: center; border-left: 1px solid #333; border-right: 1px solid #333; padding: 20px; }
.bagua-sublabel { color: #888; font-size: 0.85rem; margin-bottom: 10px; }
.bagua-value { font-size: 2rem; color: #fff; font-family: var(--premium-font); }
.bagua-note { font-size: 0.75rem; color: #666; margin-top: 5px; }
.bagua-gender { font-size: 2rem; color: #fff; }
.bagua-tip-box { margin-top: 20px; padding: 15px; background: rgba(197,160,89,0.05); border-radius: 8px; border-left: 3px solid var(--gold); }
.bagua-tip-text { font-size: 0.85rem; color: #ccc; line-height: 1.6; }

.compass-container { display: flex; justify-content: center; margin: 40px 0; }
.compass { position: relative; width: 400px; height: 400px; border: 3px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, rgba(26,26,26,1) 0%, rgba(10,10,10,1) 100%); box-shadow: 0 0 40px rgba(197,160,89,0.2), inset 0 0 60px rgba(0,0,0,0.5); }
.compass::before { content: ''; position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; border: 1px solid rgba(197,160,89,0.2); border-radius: 50%; transform: translate(-50%, -50%); }
.compass-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 20px 30px; background: rgba(0,0,0,0.7); border: 2px solid var(--gold); border-radius: 50%; min-width: 100px; }
.compass-number { font-size: 2.5rem; color: var(--gold); }
.compass-label { font-size: 0.7rem; color: #888; margin-top: 5px; }
.compass-direction { position: absolute; background: var(--dir-bg); border: 1px solid var(--dir-color); padding: 8px 12px; border-radius: 8px; text-align: center; min-width: 90px; color: var(--dir-color); }
.compass-n { top: 10px; left: 50%; transform: translateX(-50%); }
.compass-ne { top: 40px; right: 40px; }
.compass-e { top: 50%; right: 10px; transform: translateY(-50%); }
.compass-se { bottom: 40px; right: 40px; }
.compass-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.compass-sw { bottom: 40px; left: 40px; }
.compass-w { top: 50%; left: 10px; transform: translateY(-50%); }
.compass-nw { top: 40px; left: 40px; }
.compass-dir-label { font-size: 0.75rem; color: #666; margin-bottom: 3px; }
.compass-dir-title { font-size: 0.85rem; font-weight: bold; color: var(--dir-color); }
.compass-dir-sublabel { font-size: 0.7rem; color: #888; margin-top: 2px; }

.bagua-lists-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.auspicious-list { background: rgba(76,175,80,0.05); border: 1px solid #4CAF50; border-radius: 10px; padding: 20px; }
.list-title { color: #4CAF50; margin-bottom: 15px; }
.list-item { padding: 12px; margin-bottom: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; border-left: 3px solid #4CAF50; }
.list-item-flex { display: flex; justify-content: space-between; align-items: center; }
.list-item-title { font-weight: bold; color: #4CAF50; }
.list-item-subtitle { font-size: 0.75rem; color: #666; }
.list-item-dir { font-size: 1.5rem; font-weight: bold; color: #fff; background: rgba(76,175,80,0.2); padding: 5px 12px; border-radius: 6px; }
.list-item-desc { font-size: 0.8rem; color: #aaa; margin-top: 8px; }
.unfavorable-list { background: rgba(255,87,34,0.05); border: 1px solid #FF5722; border-radius: 10px; padding: 20px; }
.list-title-red { color: #FF5722; margin-bottom: 15px; }
.list-item-red { padding: 12px; margin-bottom: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; border-left: 3px solid #FF5722; }
.list-item-title-red { font-weight: bold; color: #FF5722; }
.list-item-dir-red { font-size: 1.5rem; font-weight: bold; color: #fff; background: rgba(255,87,34,0.2); padding: 5px 12px; border-radius: 6px; }

.code-reference-table { display: grid; gap: 0; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
.code-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #222; background: rgba(0,0,0,0.3); }
.code-label { color: #ccc; font-size: 0.9rem; }
.code-values { display: flex; gap: 25px; align-items: center; }
.code-value { text-align: right; }
.code-value-label { color: #666; font-size: 0.7rem; }
.code-value-day { color: var(--gold); font-size: 1.05rem; }
.code-value-year { text-align: right; min-width: 70px; }
.code-value-year-val { color: #4CAF50; font-size: 1.05rem; }
.code-gua { font-size: 1.3rem; }
.code-hour-note { color: #666; font-size: 0.75rem; }

.palaces-wrap { overflow-x: auto; padding-bottom: 12px; width: 100%; }
.palaces-grid { display: grid; grid-template-columns: repeat(12, 158px); gap: 10px; width: max-content; min-width: 100%; }
.palace-card { background: rgba(0,0,0,0.4); border: 1px solid #333; border-radius: 8px; padding: 10px; text-align: center; font-size: 0.75rem; display: flex; flex-direction: column; }
.palace-name { font-weight: bold; color: var(--gold); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.5px; border-bottom: 1px solid #333; padding-bottom: 6px; margin-bottom: 6px; min-height: 34px; display: flex; align-items: center; justify-content: center; }
.palace-star { font-size: 0.62rem; line-height: 1.3; margin-bottom: 3px; border-left: 2px solid var(--star-clr, #888); padding-left: 4px; cursor: pointer; color: var(--star-clr, #ccc); }

/* =========================================
   GLOBAL TOOLTIP MODAL (REPLACES CSS ::after)
   ========================================= */
.has-tooltip { cursor: pointer; } /* Indicates clickable */

.tooltip-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.tooltip-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.tooltip-modal-content {
    background: #151515;
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    color: #eee;
    font-size: 1rem;
    line-height: 1.7;
    box-shadow: 0 15px 50px rgba(197,160,89,0.4);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.tooltip-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    background: none; border: none;
    color: var(--gold);
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
}
.tooltip-modal-close:hover { transform: rotate(90deg); }
.tooltip-modal-text b { color: var(--gold); font-weight: bold; }

/* =========================================
   DETAILS & ACCORDIONS
   ========================================= */
details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: var(--gold);
}
details[open] summary::before {
    transform: rotate(180deg);
}

/* =========================================
   RESPONSIVE (TABLETS & PHONES)
   ========================================= */
@media (max-width: 900px) {
    .info-grid { grid-template-columns: repeat(2, 1fr); }
    .meihua-grid { grid-template-columns: 1fr; gap: 10px; }
    .meihua-arrow { padding-top: 20px; transform: rotate(90deg); }
    .bagua-info-grid { grid-template-columns: 1fr; }
    .bagua-lists-grid { grid-template-columns: 1fr; }
    .math-logs-grid { grid-template-columns: 1fr; }
    .yearly-legend-grid { grid-template-columns: 1fr; }
    .compass { width: 300px; height: 300px; }
    .dayun-panel-grid { grid-template-columns: 1fr; }
    .iching-grid { grid-template-columns: 1fr; }
    .stars-list-compact { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .compass { width: 280px; height: 280px; }
    .compass-direction { font-size: 0.7rem; padding: 5px 8px; min-width: 70px; }
    .pillars-grid { grid-template-columns: 1fr 1fr; }
    .elements-grid { grid-template-columns: repeat(2, 1fr); }
    .analysis-section { grid-template-columns: 1fr; }
    .dayun-grid { grid-template-columns: repeat(4, 1fr); }
    .transit-pillars-grid { grid-template-columns: 1fr 1fr; }
    .years-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    body { padding: 10px; }
    .header h1 { font-size: 1.8rem; letter-spacing: 1px; }
    .info-grid { grid-template-columns: 1fr; }
    .pillars-grid { grid-template-columns: 1fr; }
    .elements-grid { grid-template-columns: 1fr; }
    .dayun-grid { grid-template-columns: repeat(2, 1fr); }
    .transit-grid { grid-template-columns: 1fr 1fr; }
    .transit-pillars-grid { grid-template-columns: 1fr; }
    .years-grid { grid-template-columns: 1fr; }
    .compass { width: 250px; height: 250px; }
    .compass-direction { min-width: 60px; padding: 4px 6px; font-size: 0.65rem; }
    .compass-n, .compass-s { left: 50%; transform: translateX(-50%); }
    .compass-e, .compass-w { top: 50%; transform: translateY(-50%); }
    .bagua-info-grid { gap: 10px; }
    .bagua-divider { border: none; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 10px 0; }
    .section-title-lg { flex-direction: column; align-items: flex-start; gap: 10px; }
}



/* =========================================
   VISUAL INDICATOR FOR TOOLTIPS (v2)
   ========================================= */
.has-tooltip, [data-tip] {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.has-tooltip:hover, [data-tip]:hover {
    border-bottom-color: var(--gold);
}

/* Маленький значок ⓘ после текста (по умолчанию) */
.has-tooltip::after, [data-tip]::after {
    content: 'ⓘ';
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.55;
    margin-left: 3px;
    vertical-align: super;
}
.has-tooltip:hover::after, [data-tip]:hover::after {
    opacity: 1;
    color: var(--gold);
}

/* --- Боги дворцов/столпов: значок в правом углу, а не переносом --- */
.palace-god.has-tooltip::after, .palace-god[data-tip]::after {
    position: absolute;
    top: 0; right: 0;
    margin: 0;
    vertical-align: baseline;
    font-size: 0.7rem;
}

/* --- Гексаграммы: значок в углу блока + золотая подсветка при наведении --- */
.hex-box.has-tooltip, .hex-box[data-tip] {
    border-bottom: 1px solid #333; /* сохраняем родную рамку блока */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hex-box.has-tooltip:hover, .hex-box[data-tip]:hover {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(197,160,89,0.25);
}
.hex-box.has-tooltip::after, .hex-box[data-tip]::after {
    position: absolute;
    top: 4px; right: 6px;
    margin: 0;
    vertical-align: baseline;
    font-size: 0.85rem;
    color: var(--gold);
}

/* --- Карточки годов: значок 👆 в углу, без подчеркивания --- */
.year-card.has-tooltip, .year-card[data-tip] { border-bottom: none; }
.year-card.has-tooltip::after, .year-card[data-tip]::after {
    content: '👆';
    position: absolute;
    top: 6px; right: 8px;
    margin: 0;
    vertical-align: baseline;
    font-size: 0.9rem;
    opacity: 0.45;
}
.year-card.has-tooltip:hover::after, .year-card[data-tip]:hover::after { opacity: 0.9; }

/* --- Строки звёзд (Дворцы, Столпы, Такты, Года): разделитель + мелкий значок --- */
.palace-star.has-tooltip, .palace-star[data-tip],
.dayun-star.has-tooltip, .dayun-star[data-tip],
.yearly-star-row.has-tooltip, .yearly-star-row[data-tip] {
    border-bottom: 1px dashed rgba(255,255,255,0.12);
    padding-bottom: 3px;
}
.palace-star.has-tooltip::after, .palace-star[data-tip]::after,
.dayun-star.has-tooltip::after, .dayun-star[data-tip]::after,
.yearly-star-row.has-tooltip::after, .yearly-star-row[data-tip]::after {
    font-size: 0.6em;
    opacity: 0.5;
}
/* =========================================
HIDDEN STEM INTERACTIONS (Цан Гань) в прогнозе
========================================= */
.yearly-hidden-box {
    margin-top: 8px;
    border-top: 1px dashed #444;
    padding-top: 6px;
}
.yearly-hidden-title {
    font-size: 0.64rem;
    font-weight: bold;
    margin-bottom: 4px;
    color: #B39DDB;
    letter-spacing: 0.3px;
}
.yearly-hidden-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 0.68rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}
.yearly-hidden-row:hover {
    background: rgba(179, 157, 219, 0.08);
}
.yearly-hidden-row.hidden-clash {
    border-left: 2px solid #FF5722;
}
.yearly-hidden-row.hidden-combine {
    border-left: 2px solid #2196F3;
}
.yearly-hidden-icon {
    font-size: 0.62rem;
    flex-shrink: 0;
}
.yearly-hidden-pillar {
    color: #aaa;
    font-size: 0.66rem;
    flex-shrink: 0;
}
.yearly-hidden-stems {
    color: #fff;
    font-weight: bold;
    font-family: var(--premium-font);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.yearly-hidden-god {
    color: #888;
    font-size: 0.62rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   ЦЗЭ ЖИ — КАЛЬКУЛЯТОР ПЕРСОНАЛЬНЫХ ДАТ (v2 — фикс)
   ============================================================================ */
.zeri-section {
    margin: 40px 0;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,215,0,0.15);
}

/* Легенда */
.zeri-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 15px 0 20px;
    font-size: 0.85rem;
    color: #bbb;
}
.zeri-leg-item { display: flex; align-items: center; gap: 6px; }
.zeri-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.zeri-dot.zeri-excellent { background: #4CAF50; }
.zeri-dot.zeri-good      { background: #8BC34A; }
.zeri-dot.zeri-neutral   { background: #666; }
.zeri-dot.zeri-caution   { background: #FF9800; }
.zeri-dot.zeri-bad       { background: #f44336; }

/* Лента дней */
.zeri-scroll {
    display: flex;
    align-items: flex-start;   /* открытая карточка не растягивает соседние */
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.zeri-scroll::-webkit-scrollbar { height: 6px; }
.zeri-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.zeri-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* Карточка дня */
.zeri-card {
    min-width: 118px;
    max-width: 118px;
    flex-shrink: 0;            /* карточки не сжимаются в ленте */
    scroll-snap-align: start;
    border-radius: 12px;
    border: 2px solid #444;
    background: rgba(0,0,0,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.zeri-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.zeri-card[open] { min-width: 300px; max-width: 340px; }

.zeri-excellent { border-color: #4CAF50; }
.zeri-good      { border-color: #8BC34A; }
.zeri-neutral   { border-color: #555; }
.zeri-caution   { border-color: #FF9800; }
.zeri-bad       { border-color: #f44336; }

.zeri-today { outline: 2px solid var(--gold); outline-offset: 2px; }
.zeri-today-badge {
    display: inline-block;
    font-size: 0.6rem;
    background: var(--gold);
    color: #000;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: bold;
    vertical-align: middle;
}

/* ─── КЛЮЧЕВОЙ ФИКС: перебиваем глобальные правила details summary ─── */
.zeri-card summary.zeri-summary {
    display: block;            /* глобально было display:flex — это ломало карточки */
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.zeri-card summary.zeri-summary::-webkit-details-marker { display: none; }
.zeri-card summary.zeri-summary::before { content: none; }  /* убираем глобальный ▼ */
.zeri-card summary.zeri-summary::after  { content: none; }

.zeri-date { font-size: 1.05rem; font-weight: bold; color: #fff; margin-bottom: 2px; }
.zeri-weekday { font-size: 0.75rem; color: #999; margin-bottom: 6px; }
.zeri-gz {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin-bottom: 6px;
    white-space: nowrap;
}
.zeri-stem { color: var(--gold); font-weight: bold; }
.zeri-branch { color: #ccc; }

.zeri-score-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.zeri-excellent .zeri-score-badge { background: rgba(76,175,80,0.25); color: #4CAF50; }
.zeri-good .zeri-score-badge      { background: rgba(139,195,74,0.25); color: #8BC34A; }
.zeri-neutral .zeri-score-badge   { background: rgba(100,100,100,0.25); color: #999; }
.zeri-caution .zeri-score-badge   { background: rgba(255,152,0,0.25); color: #FF9800; }
.zeri-bad .zeri-score-badge       { background: rgba(244,67,54,0.25); color: #f44336; }

.zeri-label { font-size: 0.7rem; color: #aaa; margin-top: 2px; }

/* Раскрытая часть */
.zeri-details {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: left;
}
.zeri-gz-full { font-size: 0.8rem; color: #bbb; margin-bottom: 10px; text-align: center; }
.zeri-factor { font-size: 0.78rem; line-height: 1.5; margin-bottom: 4px; padding-left: 4px; }
.zeri-pro { color: #81C784; }
.zeri-con { color: #EF9A9A; }

.zeri-use-cases {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}
.zeri-use { font-size: 0.7rem; padding: 3px 8px; border-radius: 6px; font-weight: bold; }
.zeri-use-yes { background: rgba(76,175,80,0.2); color: #4CAF50; border: 1px solid #4CAF50; }
.zeri-use-no  { background: rgba(244,67,54,0.15); color: #EF5350; border: 1px solid #EF5350; opacity: 0.6; }

.zeri-tip-box {
    margin-top: 20px;
    padding: 15px 20px;
    background: rgba(255,215,0,0.06);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #ddd;
    line-height: 1.6;
}

/* Адаптив */
@media (max-width: 768px) {
    .zeri-card { min-width: 96px; max-width: 96px; }
    .zeri-card[open] { min-width: 250px; max-width: 280px; }
    .zeri-section { padding: 20px 10px; }
    .zeri-legend { font-size: 0.75rem; gap: 8px 12px; }
}

/* Печать: калькулятор дат — интерактивный инструмент, в PDF-отчёте не нужен */
@media print {
    .zeri-section { display: none; }
}

/* =========================================
MONTHLY FORECAST ACCORDION
========================================= */
.monthly-toggle {
width: 100%;
margin-top: 10px;
padding: 8px 12px;
background: rgba(197, 160, 89, 0.1);
border: 1px solid var(--gold);
border-radius: 6px;
color: var(--gold);
font-size: 0.85rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}

.monthly-toggle:hover {
background: rgba(197, 160, 89, 0.2);
box-shadow: 0 2px 8px rgba(197, 160, 89, 0.3);
}

.monthly-toggle.active {
background: rgba(197, 160, 89, 0.3);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.monthly-forecast {
margin-top: 0;
padding: 15px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--gold);
border-top: none;
border-radius: 0 0 8px 8px;
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.monthly-title {
color: var(--gold);
font-size: 1.1rem;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.monthly-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}

.month-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
padding: 12px;
transition: all 0.2s ease;
cursor: help;
}

.month-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.month-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.month-term {
font-size: 0.95rem;
font-weight: bold;
color: #fff;
}

.month-pillar {
font-family: var(--premium-font);
font-size: 1.3rem;
font-weight: bold;
color: var(--gold);
}

.month-stem {
margin-right: 4px;
}

.month-animal {
font-size: 0.8rem;
color: #888;
margin-bottom: 6px;
}

.month-god {
font-size: 0.85rem;
font-weight: bold;
margin-bottom: 8px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
display: inline-block;
}

.month-theme {
font-size: 0.9rem;
font-weight: bold;
color: #fff;
margin-bottom: 6px;
line-height: 1.4;
}

.month-advice {
font-size: 0.8rem;
color: #aaa;
line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
.monthly-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.monthly-forecast {
padding: 10px;
}

.month-card {
padding: 10px;
}
}

/* === Monthly Forecast Date Header === */
.month-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(197, 160, 89, 0.25);
}
.month-number {
    font-family: var(--premium-font);
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
    line-height: 1;
    min-width: 45px;
    text-align: center;
}
.month-number .month-label {
    display: block;
    font-size: 0.55rem;
    color: #888;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
.month-date-info {
    flex: 1;
}
.month-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}
.month-dates {
    font-size: 0.78rem;
    color: var(--gold);
    font-family: var(--premium-font);
    letter-spacing: 0.5px;
}
.month-current {
    border-color: var(--gold) !important;
    background: rgba(197, 160, 89, 0.08) !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.15);
    position: relative;
}
.month-current::before {
    content: 'СЕЙЧАС';
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gold);
    color: #000;
    font-size: 0.55rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}


/* =========================================
MODULE 1: DAY MASTER ARCHETYPE
========================================= */
.archetype-section {
    background: linear-gradient(135deg, rgba(197,160,89,0.08) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid var(--gold);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.archetype-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(197,160,89,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.archetype-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.archetype-cn {
    font-size: 4rem;
    font-family: var(--premium-font);
    color: var(--gold);
    line-height: 1;
    opacity: 0.9;
}
.archetype-title-block {
    flex: 1;
}
.archetype-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 5px;
}
.archetype-metaphor {
    font-size: 1.8rem;
    font-family: var(--premium-font);
    color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
}
.archetype-element-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}
.el-wood { background: rgba(76,175,80,0.2); color: #4CAF50; border: 1px solid #4CAF50; }
.el-fire { background: rgba(255,87,34,0.2); color: #FF5722; border: 1px solid #FF5722; }
.el-earth { background: rgba(255,193,7,0.2); color: #FFC107; border: 1px solid #FFC107; }
.el-metal { background: rgba(158,158,158,0.2); color: #9E9E9E; border: 1px solid #9E9E9E; }
.el-water { background: rgba(33,150,243,0.2); color: #2196F3; border: 1px solid #2196F3; }

.archetype-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.archetype-card {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 20px;
    border-left: 3px solid var(--gold);
}
.archetype-card.shadow {
    border-left-color: #FF5722;
}
.archetype-card.superpower {
    border-left-color: #4CAF50;
    grid-column: 1 / -1;
    background: rgba(76,175,80,0.05);
}
.archetype-card-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.archetype-text {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.7;
}
.archetype-text strong {
    color: #fff;
}

@media (max-width: 768px) {
    .archetype-grid {
        grid-template-columns: 1fr;
    }
    .archetype-cn {
        font-size: 3rem;
    }
    .archetype-metaphor {
        font-size: 1.4rem;
    }
}


/* =========================================
ANATOMY OF THE CHART (4 PILLARS PSYCHOLOGY)
========================================= */
.anatomy-section {
    background: linear-gradient(135deg, rgba(197,160,89,0.04) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}
.anatomy-intro {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Vertical Axis (Top/Bottom) */
.anatomy-axis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.axis-block {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid;
    position: relative;
}
.axis-top {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.1);
}
.axis-bottom {
    background: rgba(197,160,89,0.03);
    border-color: rgba(197,160,89,0.2);
}
.axis-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.axis-title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}
.axis-desc {
    font-size: 0.88rem;
    color: #aaa;
    line-height: 1.6;
}
.axis-insight {
    margin-top: 12px;
    padding: 10px;
    background: rgba(197,160,89,0.08);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    color: #ddd;
}

/* Horizontal Axis (4 Pillars Grid) */
.anatomy-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.anatomy-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, border-color 0.2s;
}
.anatomy-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}
.anatomy-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #333;
}
.anatomy-emoji {
    font-size: 1.8rem;
}
.anatomy-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.anatomy-card-subtitle {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}
.anatomy-card-text {
    font-size: 0.85rem;
    color: #bbb;
    line-height: 1.6;
}

/* Specific card accents */
.anatomy-year { border-top: 3px solid #9C27B0; }
.anatomy-month { border-top: 3px solid #4CAF50; }
.anatomy-day { border-top: 3px solid #FF5722; background: rgba(255,87,34,0.03); }
.anatomy-hour { border-top: 3px solid #2196F3; }

/* Conclusion Block */
.anatomy-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: 12px;
    padding: 20px;
}
.conclusion-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.conclusion-text {
    font-size: 0.92rem;
    color: #ddd;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 900px) {
    .anatomy-axis { grid-template-columns: 1fr; }
    .anatomy-pillars-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .anatomy-pillars-grid { grid-template-columns: 1fr; }
    .anatomy-conclusion { flex-direction: column; align-items: center; text-align: center; }
}

/* =========================================
PILLAR ANATOMY DECODER (РЕНТГЕН СТОЛПА)
========================================= */
.anatomy-decoder {
    background: linear-gradient(135deg, rgba(33,150,243,0.03) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid rgba(33,150,243,0.2);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.anatomy-decoder::before {
    content: '🔬';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 8rem;
    opacity: 0.03;
    pointer-events: none;
}
.decoder-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(33,150,243,0.3);
    padding-bottom: 15px;
}
.decoder-title {
    font-size: 1.3rem;
    color: #2196F3;
    font-family: var(--premium-font);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.decoder-subtitle {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}
.decoder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.decoder-row {
    display: grid;
    grid-template-columns: 60px 1fr 2fr;
    gap: 20px;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid #222;
    border-radius: 12px;
    padding: 15px;
    transition: border-color 0.3s;
}
.decoder-row:hover {
    border-color: #2196F3;
}
.decoder-icon {
    font-size: 2rem;
    text-align: center;
    filter: grayscale(0.2);
}
.decoder-meta {
    border-left: 2px solid #2196F3;
    padding-left: 12px;
}
.decoder-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2196F3;
    margin-bottom: 4px;
    font-weight: bold;
}
.decoder-value {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
    font-family: var(--premium-font);
}
.decoder-value-sub {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}
.decoder-explanation {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.6;
}
.decoder-explanation strong {
    color: #fff;
}
.decoder-explanation .highlight {
    color: #2196F3;
    font-weight: bold;
}

@media (max-width: 768px) {
    .decoder-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .decoder-meta {
        border-left: none;
        border-top: 1px dashed #333;
        border-bottom: 1px dashed #333;
        padding: 10px 0;
    }
}

/* =========================================
DECODER SECTION (Глубинный Декодер Столпов)
========================================= */
.decoder-section {
    background: linear-gradient(135deg, rgba(33,150,243,0.03) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid rgba(33,150,243,0.2);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}
.decoder-intro {
    color: #ccc;
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.decoder-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.decoder-pillar-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.2s, border-color 0.2s;
}
.decoder-pillar-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}
.decoder-pillar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #444;
}
.decoder-pillar-icon {
    font-size: 1.8rem;
}
.decoder-pillar-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.decoder-pillar-sub {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}

/* Levels (Top / Bottom) */
.decoder-level {
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid;
}
.decoder-top {
    background: rgba(255,255,255,0.02);
    border-left-color: var(--gold);
}
.decoder-bottom {
    background: rgba(197,160,89,0.03);
    border-left-color: #2196F3;
}
.decoder-level-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.decoder-level-label span {
    color: #ccc;
}
.decoder-char-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.decoder-char-cn {
    font-size: 2rem;
    font-family: var(--premium-font);
    font-weight: bold;
    line-height: 1;
}
.decoder-char-ru {
    font-size: 0.85rem;
    color: #aaa;
}
.decoder-meaning-text {
    font-size: 0.82rem;
    color: #ccc;
    line-height: 1.6;
    text-align: left;
}

/* Responsive */
@media (max-width: 1024px) {
    .decoder-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .decoder-pillars-grid { grid-template-columns: 1fr; }
}

/* =========================================
MODULE 3: 10 GODS (ДИРЕКТОРА ПСИХИКИ)
========================================= */
.tengod-section {
    background: linear-gradient(135deg, rgba(156,39,176,0.04) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid rgba(156,39,176,0.2);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}
.tengod-intro {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
.tengod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.tengod-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.tengod-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}
.tengod-card.tengod-absent {
    opacity: 0.6;
    border-style: dashed;
}
.tengod-head {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px dashed #444;
    padding-bottom: 12px;
}
.tengod-icon {
    font-size: 2.5rem;
    filter: grayscale(0.2);
}
.tengod-titles {
    flex: 1;
}
.tengod-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.tengod-cn {
    font-size: 0.9rem;
    color: var(--gold);
    font-family: var(--premium-font);
}
.tengod-archetype {
    font-size: 0.85rem;
    color: var(--gold);
    font-style: italic;
    margin-top: 2px;
}

/* Status Badges */
.tengod-status-block {
    background: rgba(255,255,255,0.02);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}
.tengod-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 6px;
}
.tengod-status-badge.visible {
    background: rgba(33,150,243,0.15);
    color: #64B5F6;
    border: 1px solid #2196F3;
}
.tengod-status-badge.hidden {
    background: rgba(156,39,176,0.15);
    color: #BA68C8;
    border: 1px solid #9C27B0;
}
.tengod-status-badge.absent {
    background: rgba(100,100,100,0.15);
    color: #888;
    border: 1px solid #555;
}
.tengod-status-text {
    font-size: 0.82rem;
    color: #aaa;
    line-height: 1.5;
    margin-top: 6px;
}

/* Body Blocks */
.tengod-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tengod-block {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
}
.tengod-block.role { border-left: 3px solid #fff; }
.tengod-block.superpower { border-left: 3px solid #4CAF50; background: rgba(76,175,80,0.03); }
.tengod-block.shadow { border-left: 3px solid #FF5722; background: rgba(255,87,34,0.03); }
.tengod-block.advice { border-left: 3px solid var(--gold); background: rgba(197,160,89,0.05); }

.tengod-block-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 5px;
    font-weight: bold;
}
.tengod-block.role .tengod-block-title { color: #fff; }
.tengod-block.superpower .tengod-block-title { color: #4CAF50; }
.tengod-block.shadow .tengod-block-title { color: #FF5722; }
.tengod-block.advice .tengod-block-title { color: var(--gold); }

.tengod-block-text {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .tengod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .tengod-head { flex-direction: column; align-items: flex-start; }
    .tengod-icon { font-size: 2rem; }
}


/* =========================================
MODULE 3: 10 GODS POSITIONS (КООРДИНАТЫ БОГА)
========================================= */
.tengod-positions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #333;
}
.tengod-positions-title {
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tengod-pos-item {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid;
    transition: background 0.2s;
}
.tengod-pos-item:hover {
    background: rgba(255,255,255,0.04);
}
.tengod-pos-item.pos-visible {
    border-left-color: #2196F3;
}
.tengod-pos-item.pos-hidden {
    border-left-color: #9C27B0;
}
.tengod-pos-badge {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pos-visible .tengod-pos-badge {
    color: #64B5F6;
}
.pos-hidden .tengod-pos-badge {
    color: #BA68C8;
}
.tengod-pos-text {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.6;
}


/* =========================================
МОДУЛЬ 4: СКРЫТЫЕ СТВОЛЫ (ПОДВАЛ) — ГОРИЗОНТАЛЬНАЯ ВЕРСИЯ
========================================= */
.basement-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.basement-intro {
    margin-bottom: 30px;
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.6;
}

.basement-intro p {
    margin-bottom: 10px;
}

.basement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* Комната подвала — ГОРИЗОНТАЛЬНАЯ */
.basement-room {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.room-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.room-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.room-info {
    flex: 1;
}

.room-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 4px;
}

.room-subtitle {
    font-size: 0.85rem;
    color: #888;
}

.room-desc {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 10px;
    background: rgba(197, 160, 89, 0.05);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
}

/* Слои Ци — ГОРИЗОНТАЛЬНОЕ РАСПОЛОЖЕНИЕ */
.qi-layers {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: wrap;
    align-items: stretch;
}

.qi-layer {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
}

.qi-layer:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.15);
}

.qi-layer.qi-main {
    border-color: var(--gold);
    background: rgba(197, 160, 89, 0.08);
}

.qi-layer.qi-medium {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.qi-layer.qi-residual {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.05);
}

.qi-layer.qi-empty {
    border-color: #555;
    background: rgba(255, 255, 255, 0.01);
    opacity: 0.6;
}

.layer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #444;
}

.layer-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.layer-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    flex: 1;
}

.layer-percent {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--gold);
    background: rgba(197, 160, 89, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.layer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.layer-stem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.stem-cn {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--gold);
    font-family: var(--premium-font);
    flex-shrink: 0;
}

.stem-ru {
    font-size: 0.85rem;
    color: #ccc;
    flex: 1;
}

.stem-god {
    font-size: 0.75rem;
    color: var(--gold);
    background: rgba(197, 160, 89, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.layer-psych {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.6;
    flex: 1;
}

.layer-psych.empty-text {
    font-style: italic;
    color: #666;
    text-align: center;
    padding: 10px;
}

/* Синтез */
.basement-synthesis {
    background: rgba(197, 160, 89, 0.05);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 10px;
    padding: 20px;
}

.synthesis-title {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.synthesis-text p {
    margin-bottom: 12px;
    color: #aaa;
    line-height: 1.6;
}

/* Адаптив */
@media (max-width: 1024px) {
    .qi-layers {
        flex-direction: column;
    }
    
    .qi-layer {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .room-header {
        flex-direction: column;
        text-align: center;
    }
    
    .room-icon {
        font-size: 2rem;
    }
    
    .qi-layer {
        min-width: 100%;
    }
    
    .layer-stem {
        flex-direction: column;
        text-align: center;
    }
    
    .stem-cn {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .basement-room {
        padding: 15px;
    }
    
    .room-title {
        font-size: 1rem;
    }
    
    .layer-header {
        flex-wrap: wrap;
    }
    
    .layer-title {
        font-size: 0.8rem;
    }
    
    .layer-percent {
        font-size: 0.75rem;
    }
}


/* =========================================
MODULE 5: 12 PHASES OF QI (RHYTHMS)
========================================= */
.phases-section {
    background: linear-gradient(135deg, rgba(156,39,176,0.04) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid rgba(156,39,176,0.2);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}
.phases-intro {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
/* Level 1: Summary Grid (4 Pillars) */
.phases-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
.phase-summary-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}
.phase-summary-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}
.phase-summary-pillar {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
}
.phase-summary-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}
.phase-summary-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 4px;
}
.phase-summary-metaphor {
    font-size: 0.8rem;
    color: #aaa;
    font-style: italic;
}

/* Level 2 & 3: Detailed Accordions */
.phases-details-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.phase-detail-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid #222;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.phase-detail-card[open] {
    border-color: rgba(156,39,176,0.5);
}
.phase-detail-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.phase-detail-summary::-webkit-details-marker { display: none; }
.phase-detail-summary:hover { background: rgba(255,255,255,0.05); }
.phase-detail-summary::before {
    content: '▸';
    font-size: 1rem;
    color: var(--gold);
    transition: transform 0.3s;
}
.phase-detail-card[open] .phase-detail-summary::before {
    transform: rotate(90deg);
}
.phase-detail-head-icon { font-size: 1.8rem; }
.phase-detail-head-text { flex: 1; }
.phase-detail-head-name { font-size: 1.1rem; color: #fff; font-weight: bold; }
.phase-detail-head-meta { font-size: 0.8rem; color: #888; margin-top: 2px; }

.phase-detail-content {
    padding: 20px;
    border-top: 1px dashed #333;
    animation: phaseSlide 0.3s ease;
}
@keyframes phaseSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pyramid Level 2: Essence & Pillars */
.phase-essence {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(156,39,176,0.05);
    border-left: 3px solid #9C27B0;
    border-radius: 0 8px 8px 0;
}
.phase-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}
.phase-pillar-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
}
.phase-pillar-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 8px;
    font-weight: bold;
}
.phase-pillar-text {
    font-size: 0.82rem;
    color: #bbb;
    line-height: 1.5;
}

/* Pyramid Level 3: Spheres */
.phase-spheres-title {
    font-size: 0.9rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.phase-spheres-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.phase-sphere-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border-left: 3px solid;
}
.phase-sphere-item.wealth { border-left-color: #FFC107; }
.phase-sphere-item.career { border-left-color: #4CAF50; }
.phase-sphere-item.love { border-left-color: #FF5722; }
.phase-sphere-item.health { border-left-color: #2196F3; }

.phase-sphere-icon { font-size: 1.5rem; flex-shrink: 0; }
.phase-sphere-content { flex: 1; }
.phase-sphere-name { font-size: 0.8rem; font-weight: bold; color: #fff; margin-bottom: 4px; }
.phase-sphere-text { font-size: 0.8rem; color: #aaa; line-height: 1.5; }

/* Pyramid Level 4: Advice */
.phase-advice {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.2);
    border-radius: 8px;
}
.phase-advice-icon { font-size: 1.5rem; flex-shrink: 0; }
.phase-advice-text { font-size: 0.85rem; color: #ddd; line-height: 1.6; }
.phase-advice-text strong { color: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
    .phases-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .phase-pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .phase-spheres-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .phases-summary-grid { grid-template-columns: 1fr; }
    .phase-pillars-grid { grid-template-columns: 1fr; }
}


/* =========================================
MODULE 5: PERSONAL PHASES GRID (НОВЫЙ ДИЗАЙН)
========================================= */
.phases-personal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.phase-personal-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.2s, border-color 0.2s;
}

.phase-personal-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}

.phase-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #444;
}

.phase-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.phase-title-block {
    flex: 1;
}

.phase-sphere-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.phase-sphere-subtitle {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.4;
}

.phase-current-state {
    background: rgba(197, 160, 89, 0.05);
    border-left: 3px solid var(--gold);
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
}

.phase-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.phase-personal-meaning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.meaning-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.meaning-text {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
}

.phase-action-advice {
    background: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-top: auto; /* Прижимает к низу карточки */
}

.advice-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.advice-text {
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.6;
    font-style: italic;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .phases-personal-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
MODULE 5: 12 PHASES (PERSONALIZED)
========================================= */
.phases-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.phases-intro {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.phases-logic-box {
    background: rgba(255, 87, 34, 0.05);
    border-left: 4px solid #FF5722;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 15px;
}

.logic-title {
    color: #FF5722;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 8px;
}

.phases-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.phase-summary-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.phase-summary-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
}

.phase-summary-pillar {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 40px;
}

.phase-summary-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.phase-summary-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    font-family: var(--premium-font);
}

.phase-summary-metaphor {
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}

/* Details Accordion */
.phase-detail-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.phase-detail-summary {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s;
}

.phase-detail-summary:hover {
    background: rgba(255,255,255,0.03);
}

.phase-detail-summary::-webkit-details-marker { display: none; }

.phase-detail-head-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.phase-detail-head-text { flex: 1; }

.phase-detail-head-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

.phase-detail-head-meta {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

.phase-detail-content {
    padding: 0 20px 20px;
    border-top: 1px dashed #333;
}

.phase-essence {
    background: rgba(197, 160, 89, 0.05);
    border-left: 3px solid var(--gold);
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    margin: 15px 0;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
}

/* НОВЫЙ БЛОК: Персонализация по Дворцу */
.phase-pillar-context {
    background: rgba(33, 150, 243, 0.05);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 15px 20px;
    margin: 15px 0;
}

.phase-context-title {
    color: #2196F3;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-context-text {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.7;
}

.phase-advice {
    display: flex;
    gap: 12px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px dashed rgba(76, 175, 80, 0.4);
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
}

.phase-advice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.phase-advice-text {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
}

.phase-advice-text strong {
    color: #4CAF50;
}

/* =========================================
MODULE 6: SHEN-SHA (КОМПАКТ + МОДАЛКИ) v2
========================================= */
.shensha-module { background: var(--card-bg); border: 1px solid var(--gold); border-radius: 16px; padding: 25px; margin-bottom: 30px; }
.shensha-intro { color: #bbb; font-size: .9rem; line-height: 1.65; background: rgba(197,160,89,.06); border-left: 3px solid var(--gold); padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }
.shensha-intro b { color: var(--gold); }

/* Сводка-счётчики */
.shensha-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.shensha-sum { border: 2px solid; border-radius: 12px; text-align: center; padding: 14px 10px; }
.shensha-sum .num { font-size: 2.1rem; font-weight: bold; font-family: var(--premium-font); line-height: 1; }
.shensha-sum .lbl { font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: #999; margin-top: 6px; }
.shensha-sum.cheat { border-color: #4CAF50; background: rgba(76,175,80,.07); }
.shensha-sum.cheat .num { color: #4CAF50; }
.shensha-sum.flag { border-color: #FF5722; background: rgba(255,87,34,.07); }
.shensha-sum.flag .num { color: #FF5722; }
.shensha-sum.neutral { border-color: #555; background: rgba(255,255,255,.03); }
.shensha-sum.neutral .num { color: #ccc; }

/* Группы-аккордеоны */
.shensha-group { margin-bottom: 12px; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25); }
.shensha-group > summary { padding: 12px 16px; background: rgba(255,255,255,.03); font-weight: bold; font-size: .95rem; color: #fff; }
.shensha-group > summary:hover { background: rgba(255,255,255,.06); }
.ss-group-title { color: var(--ss-clr, #fff); }
.ss-group-count { font-size: .72rem; padding: 2px 9px; background: var(--ss-clr, #888); color: #000; border-radius: 10px; font-weight: bold; }
.ss-group-sub { padding: 8px 16px 0; color: #888; font-size: .78rem; font-style: italic; }

/* Сетка карточек: 3–4 в ряд на десктопе */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 12px 14px 16px; }

/* Компактная карточка звезды */
.ss-card { background: rgba(0,0,0,.4); border: 1px solid #2a2a2a; border-left: 3px solid var(--ss-clr, #888); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ss-card:hover { transform: translateY(-2px); border-color: var(--ss-clr, #888); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
/* Гасим глобальные тултип-индикаторы на карточках */
.ss-card.has-tooltip, .ss-card[data-tip] { border-bottom: 1px solid #2a2a2a; }
.ss-card.has-tooltip::after, .ss-card[data-tip]::after { content: none; }
.ss-card.has-tooltip:hover, .ss-card[data-tip]:hover { border-bottom-color: var(--ss-clr, #888); }

.ss-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ss-name { font-weight: bold; font-size: .84rem; color: #fff; line-height: 1.3; }
.ss-cn { color: #666; font-size: .68rem; white-space: nowrap; }
.ss-pillars { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-pill { font-size: .6rem; padding: 1px 7px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid #3a3a3a; color: #bbb; }
/* Описание — максимум 2 строки, карточки одной высоты */
.ss-desc { font-size: .72rem; color: #999; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-more { margin-top: auto; padding-top: 6px; border-top: 1px dashed #2e2e2e; font-size: .68rem; font-weight: bold; color: var(--ss-clr, var(--gold)); }

/* Маркеры источников (д)/(г) в заголовке карточки звезды */
.ss-markers {
    color: #999;
    font-size: 0.72em;
    font-weight: normal;
    letter-spacing: 1px;
    white-space: nowrap;
}


/* Температура карты */
.temperature-block {
    margin-top: 25px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.temperature-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.temperature-icon {
    font-size: 1.5rem;
}

.temperature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FF9800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.temperature-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 15px;
}

.temperature-hint {
    font-size: 0.85rem;
    color: #aaa;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 6px;
    border-left: 2px solid #FF9800;
}



/* ==================================================================== */
/* 🔗 ИНДИКАТОРЫ ВЗАИМОДЕЙСТВИЙ В КАРТОЧКАХ СТОЛПОВ                     */
/* ==================================================================== */
.pillar-links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    justify-content: center;
}

.pillar-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
}

.pillar-link-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    filter: brightness(1.2);
}

.pillar-link-badge .plb-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.pillar-link-badge .plb-text {
    text-transform: uppercase;
    font-size: 0.65rem;
    opacity: 0.9;
}

/* Специфичная анимация для Столкновений (привлекает внимание) */
.pillar-link-badge[style*="#FF5722"] {
    animation: pulse-clash 2.5s infinite;
}

@keyframes pulse-clash {
    0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(255, 87, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}



/* ================================================================ */
/* МОДУЛЬ 3: 10 БОГОВ — АККОРДЕОН                                  */
/* ================================================================ */
.tengod-section {
    margin: 40px 0;
}
.tengod-intro {
    background: rgba(197,160,89,0.06);
    border-left: 3px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 22px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d0d0d0;
}
.tengod-accordion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* --- Аккордеон --- */
.tengod-accordion {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid var(--tg-clr, #888);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tengod-accordion:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
    border-left-color: var(--tg-clr, #888);
}
.tengod-accordion[open] {
    background: rgba(255,255,255,0.035);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* --- Summary (свёрнутая строка) --- */
.tengod-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    outline: none;
}
.tengod-summary::-webkit-details-marker { display: none; }

.tg-sum-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.tg-sum-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.tg-sum-info {
    min-width: 0;
    flex: 1;
}
.tg-sum-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tg-sum-cn {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
}
.tg-sum-archetype {
    font-size: 0.82rem;
    color: #aaa;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-sum-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.tg-sum-badge {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.tg-sum-subtitle {
    font-size: 0.78rem;
    color: #bbb;
    font-style: italic;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-sum-chevron {
    color: #888;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    margin-left: 4px;
}
.tengod-accordion[open] .tg-sum-chevron {
    transform: rotate(180deg);
}

/* --- Детали (раскрытая часть) --- */
.tengod-details {
    padding: 6px 20px 22px 20px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: tgFadeIn 0.3s ease;
}
@keyframes tgFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Плашка статуса */
.tg-detail-status {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #d8d8d8;
}
.tg-detail-status-label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.tg-detail-status-text > div { margin-top: 3px; }

/* Роль */
.tg-detail-role {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #e0e0e0;
}
.tg-detail-role-label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Двойная сетка: Суперсила / Тень */
.tg-detail-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tg-detail-box {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #d8d8d8;
}
.tg-superpower {
    background: rgba(76,175,80,0.06);
    border-left: 3px solid #4CAF50;
}
.tg-shadow {
    background: rgba(255,87,34,0.06);
    border-left: 3px solid #FF5722;
}
.tg-detail-box-title {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.tg-superpower .tg-detail-box-title { color: #4CAF50; }
.tg-shadow .tg-detail-box-title { color: #FF5722; }

/* Позиции */
.tg-detail-positions {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 14px 16px;
}
.tg-detail-positions-title {
    font-weight: 600;
    color: var(--gold);
    font-size: 0.92rem;
    margin-bottom: 10px;
}
.tg-pos-item {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #d8d8d8;
}
.tg-pos-item:last-child { margin-bottom: 0; }
.tg-pos-visible {
    background: rgba(197,160,89,0.06);
    border-left: 3px solid #c5a059;
}
.tg-pos-hidden {
    background: rgba(158,158,158,0.06);
    border-left: 3px solid #9E9E9E;
}
.tg-pos-badge {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fff;
}
.tg-pos-text { color: #d0d0d0; }

/* Матрица */
.tg-detail-matrix {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px;
}
.tg-detail-matrix-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.tg-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tg-matrix-item {
    background: rgba(255,255,255,0.025);
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 2px solid #555;
}
.tg-matrix-item .tm-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
    color: #aaa;
}
.tg-matrix-item .tm-text {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #d0d0d0;
}
.tg-essence { border-left-color: #c5a059; }
.tg-context { border-left-color: #2196F3; }
.tg-task { border-left-color: #9C27B0; }
.tg-pros { border-left-color: #4CAF50; }
.tg-cons { border-left-color: #FF5722; }
.tg-advice { border-left-color: #FFC107; grid-column: 1 / -1; background: rgba(255,193,7,0.06); }

/* Базовый совет */
.tg-detail-base-advice {
    background: linear-gradient(135deg, rgba(197,160,89,0.08) 0%, rgba(197,160,89,0.03) 100%);
    border: 1px dashed rgba(197,160,89,0.3);
    border-radius: 8px;
    padding: 12px 16px;
}
.tg-detail-base-advice-label {
    font-weight: 600;
    color: var(--gold);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.tg-detail-base-advice-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #e0e0e0;
}

/* Подсказка */
.tengod-hint {
    margin-top: 18px;
    padding: 12px 16px;
    background: rgba(197,160,89,0.05);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #b0b0b0;
}





/* --- Адаптив --- */
@media (max-width: 720px) {
    .tg-sum-archetype { display: none; }
    .tg-sum-subtitle { display: none; }
    .tg-sum-icon { width: 38px; height: 38px; font-size: 1.3rem; }
    .tg-sum-name { font-size: 0.95rem; }
    .tg-detail-dual-grid,
    .tg-matrix-grid {
        grid-template-columns: 1fr;
    }
    .tg-detail-positions,
    .tg-detail-matrix { padding: 12px; }
}



/* ── МОДУЛЬ 4: АККОРДЕОН (внешний) ───────────────────────────── */
.basement-accordion{background:rgba(255,255,255,.02);border:1px solid #333;border-radius:10px;overflow:hidden;margin-bottom:20px;}
.basement-accordion-summary{padding:15px 20px;cursor:pointer;display:flex;align-items:center;gap:15px;background:rgba(0,0,0,.3);font-weight:bold;color:var(--gold);list-style:none;}
.basement-accordion-summary::-webkit-details-marker{display:none;}
.acc-icon{font-size:1.4rem;}
.acc-title{flex:1;font-size:1.05rem;}
.acc-arrow{transition:transform .3s;}
.basement-accordion[open] .acc-arrow{transform:rotate(180deg);}
.basement-accordion-content{padding:20px;}

/* ── ВНУТРИ: ПОДВАЛЫ 2×2, СЛОИ ЦИ — ГОРИЗОНТАЛЬНО (КАК БЫЛО) ── */
.basement-accordion-content .basement-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch;
}
.basement-accordion-content .basement-room{
    display:flex;flex-direction:column;gap:12px;height:100%;margin:0;
}
.basement-accordion-content .qi-layers{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:stretch;flex:1;
}
.basement-accordion-content .qi-layer{
    display:flex;flex-direction:column;gap:8px;margin:0;min-width:0;height:100%;
}
.basement-accordion-content .layer-header{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:bold;color:#ccc;}
.basement-accordion-content .layer-title{flex:1;min-width:0;}
.basement-accordion-content .layer-stem{font-size:.8rem;color:var(--gold);line-height:1.4;}
.basement-accordion-content .layer-psych{font-size:.75rem;color:#aaa;line-height:1.45;}
.basement-accordion-content .qi-empty{opacity:.45;border-style:dashed;}
.basement-accordion-content .matrix-deep-dive{margin-top:auto;}

/* Вложенный аккордеон длинных текстов */
.matrix-deep-dive{background:rgba(255,255,255,.03);border-radius:6px;border:1px solid #333;}
.matrix-deep-dive summary{padding:10px;cursor:pointer;font-size:.88rem;color:var(--gold);font-weight:bold;list-style:none;}
.matrix-deep-dive summary::-webkit-details-marker{display:none;}
.matrix-texts{padding:10px;font-size:.85rem;line-height:1.6;color:#ccc;border-top:1px dashed #333;}
.matrix-texts p{margin-bottom:10px;}

/* Адаптив */
@media (max-width:1100px){ .basement-accordion-content .basement-grid{grid-template-columns:1fr;} }
@media (max-width:700px){ .basement-accordion-content .qi-layers{grid-template-columns:1fr;} }

.phases-section { margin-top: 40px; }
.lifecycle-scale-wrapper {
    background: rgba(0,0,0,0.4);
    border-radius: 15px;
    padding: 25px 15px 15px;
    margin-bottom: 30px;
    border: 1px solid rgba(197,160,89,0.2);
    overflow-x: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.lifecycle-scale-wrapper::-webkit-scrollbar { height: 6px; }
.lifecycle-scale-wrapper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

.macro-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: #aaa;
}
.macro-item { display: flex; align-items: center; gap: 6px; }
.macro-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.lifecycle-scale {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 850px;
    position: relative;
    padding-top: 45px;
}
.lifecycle-scale::before {
    content: '';
    position: absolute;
    top: 65px;
    left: 2%;
    right: 2%;
    height: 6px;
    background: linear-gradient(90deg, #4CAF50 0%, #FFC107 30%, #FF5722 65%, #2196F3 100%);
    z-index: 1;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
.scale-node {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}
.scale-icon {
    width: 44px;
    height: 44px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 1.3rem;
    transition: all 0.3s;
    color: #666;
}
.scale-node.active .scale-icon {
    background: var(--gold);
    border-color: #fff;
    box-shadow: 0 0 20px rgba(197,160,89,0.8);
    transform: scale(1.25);
    color: #000;
}
.scale-name {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}
.scale-node.active .scale-name {
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    text-shadow: 0 0 5px rgba(197,160,89,0.5);
}
.scale-markers {
    font-size: 1.1rem;
    margin-top: 5px;
    background: rgba(197,160,89,0.15);
    border: 1px solid var(--gold);
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(197,160,89,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(197,160,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(197,160,89,0); }
}

.strength-link-box {
    border-left: 5px solid;
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.strength-link-box h4 {
    margin-bottom: 12px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.phases-details-grid {
    display: grid;
    gap: 20px;
}
.phase-detail-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}
.phase-detail-card[open] {
    border-color: var(--gold);
    background: rgba(197,160,89,0.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.phase-detail-summary {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    position: relative;
}
.phase-detail-summary::-webkit-details-marker { display: none; }
.phase-detail-summary::after {
    content: '▼';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    transition: transform 0.3s;
}
.phase-detail-card[open] .phase-detail-summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.phase-detail-head-icon {
    font-size: 2rem;
    width: 55px;
    height: 55px;
    background: rgba(197,160,89,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.phase-detail-head-name {
    font-size: 1.15rem;
    font-weight: bold;
    color: #fff;
}
.phase-detail-head-meta {
    font-size: 0.9rem;
    color: var(--gold);
    margin-top: 4px;
}
.phase-detail-content {
    padding: 0 25px 25px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.phase-essence, .phase-pillar-context, .phase-advice {
    margin-top: 18px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #ccc;
}
.phase-pillar-context h5 {
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(197,160,89,0.2);
    padding-bottom: 5px;
}
.phase-advice {
    background: rgba(76, 175, 80, 0.08);
    border-left: 3px solid #4CAF50;
    padding: 15px;
    border-radius: 6px;
    color: #e0e0e0;
}


/* ================================================================ */
/* МОДУЛЬ 8: ДЕРЕВО РОДСТВЕННИКОВ                                   */
/* ================================================================ */
.relatives-section {
    margin: 30px 0;
    background: linear-gradient(135deg, rgba(76,175,80,0.04) 0%, rgba(17,17,17,1) 100%);
    border: 1px solid rgba(76,175,80,0.15);
    border-radius: 16px;
    padding: 30px;
}
.relatives-intro {
    background: rgba(197,160,89,0.06);
    border-left: 3px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 22px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d0d0d0;
}
.relatives-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.relatives-accordion {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid var(--rel-clr, #888);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.relatives-accordion:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
}
.relatives-accordion[open] {
    background: rgba(255,255,255,0.035);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.relatives-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    outline: none;
}
.relatives-summary::-webkit-details-marker { display: none; }
.relatives-summary::before { content: none; }
.rel-sum-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.rel-sum-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.rel-sum-info { min-width: 0; flex: 1; }
.rel-sum-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rel-sum-cn {
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 400;
}
.rel-sum-god {
    font-size: 0.82rem;
    color: #aaa;
    margin-top: 3px;
    line-height: 1.4;
}
.rel-sum-god b { color: #d0d0d0; }
.rel-sum-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.rel-sum-badge {
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.rel-sum-chevron {
    color: #888;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    margin-left: 4px;
}
.relatives-accordion[open] .rel-sum-chevron {
    transform: rotate(180deg);
}
.relatives-details {
    padding: 8px 22px 24px 22px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: relFadeIn 0.3s ease;
}
@keyframes relFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rel-classic {
    font-size: 0.82rem;
    color: #999;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    border: 1px dashed rgba(255,255,255,0.06);
}
.rel-intro {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #d0d0d0;
}
.rel-positions {
    background: rgba(0,0,0,0.3);
    padding: 12px;
    border-radius: 8px;
}
.rel-positions-title {
    font-weight: 600;
    color: var(--gold);
    font-size: 0.92rem;
    margin-bottom: 10px;
}
.rel-pos-item {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #d8d8d8;
}
.rel-pos-item:last-child { margin-bottom: 0; }
.rel-pos-visible {
    background: rgba(197,160,89,0.06);
    border-left: 3px solid #c5a059;
}
.rel-pos-hidden {
    background: rgba(156,39,176,0.06);
    border-left: 3px solid #9C27B0;
}
.rel-pos-absent {
    background: rgba(100,100,100,0.06);
    border-left: 3px solid #555;
    color: #999;
}
.rel-pos-badge {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #fff;
}
.rel-pos-text { color: #bbb; font-size: 0.85rem; }
.rel-portrait {
    padding: 14px 18px;
    border-radius: 8px;
}
.rel-portrait-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rel-portrait-stem {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: 400;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px;
}
.rel-portrait-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #d8d8d8;
}
.rel-triple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.rel-triple-box {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #d8d8d8;
}
.rel-gift {
    background: rgba(76,175,80,0.06);
    border-left: 3px solid #4CAF50;
}
.rel-wound {
    background: rgba(255,87,34,0.06);
    border-left: 3px solid #FF5722;
}
.rel-task {
    background: rgba(255,193,7,0.06);
    border-left: 3px solid #FFC107;
}
.rel-triple-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.rel-gift .rel-triple-title { color: #4CAF50; }
.rel-wound .rel-triple-title { color: #FF5722; }
.rel-task .rel-triple-title { color: #FFC107; }
.rel-triple-text { color: #ccc; }
.rel-state {
    padding: 14px 18px;
    border-radius: 8px;
}
.rel-state-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.rel-state-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #d8d8d8;
}
.rel-state-technical {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-size: 0.8rem;
    color: #888;
}
.relatives-hint {
    margin-top: 20px;
    padding: 14px 18px;
    background: rgba(197,160,89,0.05);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #b0b0b0;
}
.relatives-hint b { color: var(--gold); }

@media (max-width: 900px) {
    .rel-triple-grid { grid-template-columns: 1fr; }
}

/* МОДУЛЬ 8 v2: СХЕМА ДЕРЕВА */
.reltree{margin:0 0 22px;display:flex;flex-direction:column;gap:10px;align-items:center;}
.reltree-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center;}
.reltree-couple{display:flex;align-items:center;gap:8px;}
.reltree-heart{font-size:.9rem;opacity:.85;}
.reltree-node{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:10px;
 background:rgba(255,255,255,.03);border:1px solid var(--rel-clr,#888);color:#fff;cursor:pointer;
 transition:transform .2s,box-shadow .2s;font:inherit;}
.reltree-node:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.35);}
.reltree-node .rt-cn{font-size:1.25rem;font-weight:700;color:var(--rel-clr,#fff);}
.reltree-node .rt-lbl{font-size:.68rem;color:#aaa;letter-spacing:.4px;text-transform:uppercase;text-align:center;}
.reltree-self{border-color:var(--gold);background:rgba(197,160,89,.10);}
.reltree-self .rt-cn{color:var(--gold);}
@media(max-width:720px){.reltree-row{gap:8px;}.reltree-node{padding:6px 8px;}.reltree-node .rt-cn{font-size:1rem;}.reltree-node .rt-lbl{font-size:.58rem;}}

.palaces-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.palaces-grid-v2 .palace-card{width:auto;min-width:0;margin:0;}
@media(max-width:980px){.palaces-grid-v2{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.palaces-grid-v2{grid-template-columns:1fr;}}
.scale-num-badge{font-size:0.65rem;color:#888;border:1px solid #444;border-radius:8px;padding:0 5px;margin-bottom:2px;display:inline-block;}
.palace-more-btn{margin-top:10px;text-align:center;cursor:pointer;background:rgba(197,160,89,0.12);border:1px solid rgba(197,160,89,0.45);color:var(--gold);border-radius:8px;padding:7px 10px;font-size:0.85rem;font-weight:bold;}
.palace-more-btn:hover{background:rgba(197,160,89,0.25);}


@media (max-width: 720px) {
    .rel-sum-god { display: none; }
    .rel-sum-icon { width: 40px; height: 40px; font-size: 1.3rem; }
    .rel-sum-name { font-size: 1rem; }
    .relatives-section { padding: 18px; }
    .relatives-details { padding: 8px 14px 18px 14px; }
}
@media (max-width: 480px) {
    .rel-sum-badge { display: none; }
    .rel-triple-grid { grid-template-columns: 1fr; }
}

/* МОДУЛЬ 8 v2: ДЕРЕВО РОДСТВЕННИКОВ */
.relatives-section{margin:30px 0;padding:24px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;}
.rel-row{margin-bottom:22px;}
.rel-row-title{font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;text-align:center;}
.rel-row-couples{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;}
.rel-couple{display:flex;align-items:center;gap:8px;}
.rel-heart{font-size:1.1rem;}
.rel-node{width:230px;}
.rel-self{border-left-color:var(--gold)!important;background:rgba(197,160,89,.06);}
.rel-stem-cn{font-size:1.4rem;color:var(--gold);font-weight:700;}
.rel-stem-line{color:#fff;font-size:.9rem;margin-bottom:6px;}
.rel-role-line{color:#aaa;font-size:.82rem;margin-bottom:10px;line-height:1.5;}
.rel-portrait{font-size:.86rem;color:#d0d0d0;line-height:1.6;margin-bottom:10px;}
@media(max-width:720px){.rel-row-couples{gap:12px;}.rel-node{width:100%;}}

/* ========================================== */
/* МОДУЛЬ 11: ВЗАИМОДЕЙСТВИЯ ТАКТОВ УДАЧИ     */
/* ========================================== */
.dayun-interactions-box {
    grid-column: 1 / -1;
    margin: 20px 0 15px;
    padding: 18px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(197,160,89,0.25);
    border-radius: 12px;
}
.dayun-int-title {
    color: var(--gold);
    margin: 0 0 15px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
    letter-spacing: 0.5px;
}
.dayun-int-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.dayun-int-card {
    background: rgba(0,0,0,0.35);
    border-left: 4px solid var(--int-clr);
    padding: 14px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.dayun-int-card:hover {
    transform: translateY(-3px);
    background: rgba(0,0,0,0.5);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
.dayun-int-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--int-clr);
    font-size: 0.95rem;
}
.dayun-int-icon { font-size: 1.2rem; }
.dayun-int-pos {
    margin-left: auto;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.08);
    padding: 3px 8px;
    border-radius: 4px;
    color: #ccc;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dayun-int-desc {
    font-size: 0.88rem;
    color: #d1d1d1;
    line-height: 1.5;
}
.dayun-int-calm {
    border: 1px solid rgba(76,175,80,0.3);
    background: rgba(76,175,80,0.05);
    border-left: 4px solid #4CAF50;
}


/* ========================================== */
/* ТЕХНИЧЕСКИЙ ПАСПОРТ КАРТЫ                  */
/* ========================================== */
.technical-passport { margin-top:30px; padding:20px; background:rgba(0,0,0,0.35); border:1px solid rgba(197,160,89,0.3); border-radius:12px; }
.tech-intro { color:#aaa; line-height:1.6; margin-bottom:15px; font-size:0.9rem; }
.tech-dashboard { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:18px; }
.dash-card { background:rgba(255,255,255,0.04); border-left:3px solid var(--gold); padding:10px 12px; border-radius:8px; }
.dash-label { font-size:0.7rem; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.dash-value { font-size:1.05rem; color:var(--gold); font-weight:bold; }
.dash-sub { font-size:0.75rem; color:#aaa; margin-top:3px; }
/* Аккордеон */
.code-accordion { margin:14px 0; border:1px solid rgba(197,160,89,0.25); border-radius:10px; background:rgba(0,0,0,0.25); overflow:hidden; }
.code-accordion-summary { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; list-style:none; background:rgba(197,160,89,0.06); transition:background .2s; }
.code-accordion-summary:hover { background:rgba(197,160,89,0.12); }
.code-accordion-summary::-webkit-details-marker { display:none; }
.code-accordion-summary .acc-icon { font-size:1.1rem; }
.code-accordion-summary .acc-title { color:var(--gold); font-weight:bold; font-size:0.95rem; }
.code-accordion-summary .acc-hint { color:#888; font-size:0.75rem; margin-left:auto; text-align:right; }
.code-accordion-summary .acc-arrow { color:var(--gold); font-size:0.8rem; transition:transform .25s; }
.code-accordion[open] .acc-arrow { transform:rotate(180deg); }
.code-accordion-content { padding:16px; }
/* Секции техники */
.tech-block { margin-bottom:22px; }
.tech-block-title { color:var(--gold); font-weight:bold; margin-bottom:10px; font-size:0.95rem; border-bottom:1px dashed rgba(197,160,89,0.3); padding-bottom:6px; }
.tech-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.tech-table th, .tech-table td { border:1px solid #333; padding:7px 8px; text-align:center; vertical-align:top; }
.tech-table th { background:rgba(197,160,89,0.1); color:var(--gold); }
.tech-table td.tech-day { background:rgba(197,160,89,0.07); }
.tech-cn { font-size:1.15rem; color:var(--gold); }
.tech-sub { font-size:0.7rem; color:#999; margin-top:3px; }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.tech-cell { background:rgba(255,255,255,0.03); border:1px solid #333; border-radius:8px; padding:10px; font-size:0.82rem; color:#ccc; line-height:1.5; }
.tech-cell b { color:#fff; }
.tech-cell .absent { color:#666; }
.tech-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin:6px 0; overflow:hidden; }
.tech-bar > div { height:100%; }
.int-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:rgba(255,255,255,0.03); border-left:3px solid #888; padding:8px 10px; border-radius:6px; margin-bottom:6px; font-size:0.82rem; color:#ccc; }
.dy-strip { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; }
.dy-chip { min-width:88px; text-align:center; background:rgba(255,255,255,0.04); border:1px solid #333; border-radius:8px; padding:8px 6px; font-size:0.75rem; color:#aaa; flex:0 0 auto; }
.dy-chip.now { border-color:var(--gold); background:rgba(197,160,89,0.12); }
.dy-chip .gz { font-size:1.05rem; color:var(--gold); margin:3px 0; }
/* Карточки направлений (Ба Чжай) */
.dir-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.dir-card { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:8px; background:rgba(255,255,255,0.03); border:1px solid #333; }
.dir-good { border-left:4px solid #4CAF50; }
.dir-bad  { border-left:4px solid #FF5722; }
.dir-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dir-icon { font-size:1.05rem; }
.dir-name { color:#fff; font-weight:bold; font-size:0.95rem; }
.dir-cn { color:#888; font-size:0.8rem; }
.dir-direction { margin-left:auto; color:var(--gold); font-weight:bold; font-size:0.8rem; background:rgba(197,160,89,0.12); border:1px solid rgba(197,160,89,0.35); padding:2px 10px; border-radius:20px; white-space:nowrap; }
.dir-desc { color:#bbb; font-size:0.83rem; line-height:1.5; }


.med-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.med-organ-card { background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid #333; padding: 20px; display: flex; flex-direction: column; transition: all 0.3s; position: relative; overflow: hidden; }
.med-organ-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.med-organ-card.status-critical_deficit { border-left: 4px solid #E91E63; background: rgba(233,30,99,0.03); }
.med-organ-card.status-deficit { border-left: 4px solid #2196F3; background: rgba(33,150,243,0.03); }
.med-organ-card.status-excess { border-left: 4px solid #FF5722; background: rgba(255,87,34,0.03); }
.med-organ-card.status-balanced { border-left: 4px solid #4CAF50; }
.med-organ-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.med-organ-title { display: flex; gap: 12px; align-items: center; }
.med-icon { font-size: 2.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.med-name { font-size: 1.15rem; font-weight: bold; color: #fff; }
.med-cn { font-size: 0.9rem; color: #888; margin-left: 6px; }
.med-polarity { font-size: 0.8rem; color: #aaa; margin-top: 4px; letter-spacing: 0.5px; }
.med-percent { font-size: 1.5rem; font-weight: bold; font-family: monospace; }
.med-organ-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 15px; width: fit-content; border: 1px solid currentColor; }
.med-section { margin-bottom: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08); }
.med-section:last-child { border-bottom: none; margin-bottom: 0; }
.med-label { font-size: 0.78rem; font-weight: bold; color: #ccc; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.med-text { font-size: 0.9rem; color: #ddd; line-height: 1.65; }
.med-advice { background: rgba(76,175,80,0.06); padding: 12px; border-radius: 8px; border-left: 3px solid #4CAF50; margin-top: 10px; }
.med-advice .med-label { color: #81C784; }

.clock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; margin-top: 20px; }
.clock-card { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 18px; border: 1px solid #333; position: relative; overflow: hidden; }
.clock-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--el-clr); }
.clock-time { font-size: 1.1rem; font-weight: bold; color: #FFC107; margin-bottom: 8px; font-family: monospace; }
.clock-desc { font-size: 0.85rem; color: #ccc; line-height: 1.5; }

.sources-box { background: rgba(197,160,89,0.04); border: 1px dashed rgba(197,160,89,0.3); border-radius: 12px; padding: 25px; margin-top: 40px; }
.sources-title { color: var(--gold); font-weight: bold; margin-bottom: 15px; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.sources-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
.sources-list li { font-size: 0.85rem; color: #aaa; line-height: 1.6; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; border-left: 3px solid rgba(197,160,89,0.5); }
.sources-list li b { color: #fff; display: block; margin-bottom: 4px; font-size: 0.9rem; }

/* --- Аккордеоны ТКМ --- */
.tcm-acc { background: rgba(0,0,0,0.25); border: 1px solid #333; border-radius: 12px; margin-bottom: 15px; overflow: hidden; }
.tcm-acc-summary { cursor: pointer; padding: 16px 20px; font-weight: bold; color: var(--gold); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; list-style: none; user-select: none; transition: background .2s; }
.tcm-acc-summary::-webkit-details-marker { display: none; }
.tcm-acc-summary:hover { background: rgba(197,160,89,0.07); }
.tcm-acc-arrow { transition: transform .3s; color: #888; font-size: 0.8rem; }
.tcm-acc[open] .tcm-acc-arrow { transform: rotate(180deg); }
.tcm-acc-content { padding: 5px 20px 20px; }
/* --- Карточки органов --- */
.med-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.med-organ-card { background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid #333; padding: 20px; display: flex; flex-direction: column; transition: all 0.3s; }
.med-organ-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.med-organ-card.status-critical_deficit { border-left: 4px solid #E91E63; background: rgba(233,30,99,0.03); }
.med-organ-card.status-deficit { border-left: 4px solid #2196F3; background: rgba(33,150,243,0.03); }
.med-organ-card.status-excess { border-left: 4px solid #FF5722; background: rgba(255,87,34,0.03); }
.med-organ-card.status-balanced { border-left: 4px solid #4CAF50; }
.med-organ-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.med-organ-title { display: flex; gap: 12px; align-items: center; }
.med-icon { font-size: 2.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.med-name { font-size: 1.15rem; font-weight: bold; color: #fff; }
.med-cn { font-size: 0.9rem; color: #888; margin-left: 6px; }
.med-polarity { font-size: 0.8rem; color: #aaa; margin-top: 4px; letter-spacing: 0.5px; }
.med-percent { font-size: 1.5rem; font-weight: bold; font-family: monospace; }
.med-organ-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 15px; width: fit-content; border: 1px solid currentColor; }
.med-section { margin-bottom: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08); }
.med-label { font-size: 0.78rem; font-weight: bold; color: #ccc; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.med-text { font-size: 0.9rem; color: #ddd; line-height: 1.65; }
.med-advice { background: rgba(76,175,80,0.06); padding: 12px; border-radius: 8px; border-left: 3px solid #4CAF50; margin-top: 10px; }
.med-advice .med-label { color: #81C784; }
/* --- Циркадные часы --- */
.clock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; margin-top: 20px; }
.clock-card { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 18px; border: 1px solid #333; position: relative; overflow: hidden; }
.clock-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--el-clr); }
.clock-time { font-size: 1.1rem; font-weight: bold; color: #FFC107; font-family: monospace; }
.clock-desc { font-size: 0.85rem; color: #ccc; line-height: 1.5; }
/* --- Источники --- */
.sources-box { margin-top: 10px; }
.sources-list { list-style: none; padding: 0; margin: 15px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
.sources-list li { font-size: 0.85rem; color: #aaa; line-height: 1.6; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; border-left: 3px solid rgba(197,160,89,0.5); }
.sources-list li b { color: #fff; display: block; margin-bottom: 4px; font-size: 0.9rem; }

html { scroll-behavior: smooth; }
#report-nav, [id^="sec-"] { scroll-margin-top: 30px; }
.nav-card {
    display: block; background: rgba(255,255,255,0.03); padding: 20px;
    border-radius: 10px; border-left: 4px solid var(--nc-clr);
    text-decoration: none; transition: all .25s ease; position: relative;
}
.nav-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.nav-card:hover .nav-card-title { text-decoration: underline; }
.nav-card-title { font-weight: bold; color: var(--nc-clr); font-size: 1.05rem; }
.nav-card-num { position: absolute; top: 14px; right: 16px; font-size: .75rem; color: #666; font-family: monospace; }
.nav-card-text { font-size: 0.85rem; color: #ccc; line-height: 1.6; }
.nav-card-text b { color: #ddd; }
.fab-nav {
    position: fixed; right: 22px; bottom: 22px; z-index: 9990;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #c5a059, #8a6d3b);
    color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
    text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: transform .2s;
}
.fab-nav:hover { transform: scale(1.12); }
.back-to-nav-btn {
    display: inline-block; margin: 10px auto 0; padding: 14px 34px;
    background: rgba(197,160,89,0.15); border: 1px solid var(--gold);
    color: var(--gold); border-radius: 30px; text-decoration: none;
    font-weight: bold; letter-spacing: .5px; transition: all .25s;
}
.back-to-nav-btn:hover { background: var(--gold); color: #000; }

/* === ЦЗЭ ЖИ: КОМПАКТНАЯ УПАКОВКА v2 === */
.zg-head{font-weight:bold;font-size:.95rem;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zsrc{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#aaa;font-size:.62rem;padding:1px 7px;border-radius:10px;cursor:help;vertical-align:middle;letter-spacing:.5px;white-space:nowrap;}
.zlist{margin:0;padding-left:18px;color:#ccc;font-size:.83rem;line-height:1.6;}
.zlist li{margin-bottom:7px;}
.zcell{background:rgba(255,255,255,.04);border-left:2px solid var(--c,#888);padding:8px 10px;border-radius:6px;font-size:.8rem;color:#ccc;line-height:1.45;}
.zsph{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.z-duo{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;}
.ztime{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.12);font-size:.82rem;color:#ccc;}
.zmore summary{cursor:pointer;color:#888;font-size:.73rem;margin-top:4px;list-style:none;}
.zmore summary::-webkit-details-marker{display:none;}
.zmore[open] summary{color:#FFC107;}
.zmore>div{margin-top:6px;font-size:.78rem;color:#bbb;line-height:1.5;background:rgba(0,0,0,.25);padding:8px 10px;border-radius:6px;}
.zalt{color:#81C784 !important;margin-top:5px;}
.zalmanac>div{margin-bottom:10px;font-size:.85rem;color:#ddd;line-height:1.55;}
.zdeep>summary{cursor:pointer;color:#CE93D8;font-weight:bold;font-size:.9rem;padding:10px 15px;background:rgba(156,39,176,.06);border:1px dashed rgba(156,39,176,.3);border-radius:8px;}
@media(max-width:640px){.z-duo,.zsph{grid-template-columns:1fr;}}


/* === ЦЗЭ ЖИ: КОМПАКТНАЯ ЛЕНТА ДНЕЙ v3 (тонкий тикер) === */
.zsum{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;cursor:pointer;}
.zsum-date{display:flex;align-items:baseline;gap:6px;min-width:78px;}
.zsum-date b{font-size:1.05rem;color:#fff;letter-spacing:.5px;}
.zsum-date span{font-size:.68rem;color:#888;text-transform:uppercase;}
.zsum-today{background:var(--gold);color:#000;font-style:normal;font-size:.58rem;padding:1px 6px;border-radius:4px;font-weight:bold;}
.zsum-gz{font-size:.9rem;color:#ccc;white-space:nowrap;}
.zsum-gz .zsum-stem{color:var(--gold);font-weight:bold;}
.zsum-animal{font-size:1.05rem;margin-left:4px;}
.zsum-icons{display:flex;gap:5px;flex-wrap:wrap;}
.zsum-icons span{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:6px;font-size:.85rem;cursor:help;transition:background .2s;}
.zsum-icons span:hover{background:rgba(255,255,255,.16);}
.zsum-score{margin-left:auto;min-width:46px;text-align:center;padding:4px 10px;border-radius:14px;font-weight:bold;font-size:.82rem;}
.zsum-resonance{background:rgba(76,175,80,.2);color:#4CAF50;}
.zsum-flow{background:rgba(33,150,243,.2);color:#2196F3;}
.zsum-neutral{background:rgba(156,39,176,.2);color:#CE93D8;}
.zsum-turbulence{background:rgba(255,193,7,.2);color:#FFC107;}
.zsum-friction{background:rgba(255,87,34,.2);color:#FF5722;}
@media(max-width:480px){.zsum-score{margin-left:0;}}

	.zfilter-btn {
		padding: 6px 14px;
		border-radius: 16px;
		border: 1px solid;
		background: transparent;
		font-size: .8rem;
		cursor: pointer;
		font-weight: 600;
		transition: all 0.2s ease;
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.zfilter-btn:hover {
		opacity: 0.85;
		transform: translateY(-1px);
	}
	.zfilter-btn.active {
		font-weight: bold;
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	}
	
	
@media (max-width: 768px) { .shensha-summary { grid-template-columns: 1fr; } }
@media print {
    .shensha-module { background: transparent; border: 1px solid #ccc; }
    .ss-card { background: transparent; border: 1px solid #999; }
    .ss-desc { display: block; -webkit-line-clamp: unset; }
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    body { background: #fff; color: #000; padding: 0; font-size: 10pt; }
    .bazi-container { max-width: 100%; margin: 0; }
    
    .header, .info-box, .elements-section, .analysis-card, .stars-section, .interactions-section, 
    .dayun-section, .bagua-section, .transit-section, .yearly-section, .iching-section, .meihua-box, 
    .compass-container, .code-reference-table, .palaces-wrap, .dayun-panel, .interaction-card, .star-card, .year-card {
        background: transparent !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .text-gold, .text-gold-bold, .section-title, .palace-hexname, .year-card .year-num, .year-card .year-stem, 
    .dayun-stem, .bagua-number, .compass-number, .hex-name, .transformed-hex-name, .meihua-title, .list-title, .list-title-red, .strategy-total-badge {
        color: #000 !important;
    }
    .strategy-total-badge { background: #eee !important; border: 1px solid #000; }
    
    /* Force open all details/hidden panels for printing */
    details, details[open] { display: block !important; }
    details > summary { display: none !important; }
    details > *:not(summary) { display: block !important; }
    .hidden, .dayun-panel { display: block !important; }
    
    .year-card:hover { transform: none; box-shadow: none; }
    .compass { box-shadow: none; background: #fff; border: 2px solid #000; }
    .compass-direction { background: transparent !important; border: 1px solid #000 !important; color: #000 !important; }
    .compass-direction div { color: #000 !important; }
    
    .tooltip-modal-overlay { display: none !important; }
    .transit-section, .iching-section, .yearly-section { background: #fff !important; }
    
    .strategy-do, .strategy-avoid, .strategy-attract, .weather-box, .alchemy-box, .auspicious-list, .unfavorable-list {
        background: transparent !important;
        border: 1px solid #000 !important;
    }
    
    a { text-decoration: none; color: #000; }
	.has-tooltip, [data-tip] { border-bottom: none !important; }
    .has-tooltip::after, [data-tip]::after { content: none !important; }
}