/* ============================================================
   cc-calc.css  —  Shared Calculator Module Styles
   CalculatorCafe.com  •  v1.0
   
   Uses CSS vars from calculator.php:
     --ac       (accent color)
     --ac-dk    (accent dark)
     --ac-bg    (accent light bg)
   
   Dark mode vars from header.php:
     --bg, --bg2, --bg3, --text, --text2, --muted, --border
   ============================================================ */

/* ----------------------------------------------------------
   1. BASE / RESET
   ---------------------------------------------------------- */
.cc{font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1a1a2e;max-width:100%}
.cc *{box-sizing:border-box;margin:0;padding:0}
.cc label{font-size:14px;color:#2d3748;display:block;margin-bottom:6px;font-weight:600}

/* ----------------------------------------------------------
   2. LAYOUT GRIDS
   ---------------------------------------------------------- */
.cc .cc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;page-break-inside:avoid;break-inside:avoid}
.cc .cc-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px}

/* ----------------------------------------------------------
   3. PILL TOGGLE
   ---------------------------------------------------------- */
.cc .cc-pills{display:flex;background:#edf2f7;border-radius:12px;padding:4px;width:100%}
.cc .cc-pill{flex:1;padding:11px 0;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;background:0;color:#a0aec0;transition:.2s;text-align:center}
.cc .cc-pill.on{background:#fff;color:#2d3748;box-shadow:0 2px 8px #0001}

/* ----------------------------------------------------------
   4. FORM ELEMENTS
   ---------------------------------------------------------- */
.cc .cc-input{width:100%;padding:12px 16px;background:#fff;border:2px solid #cbd5e0;border-radius:12px;color:#1a1a2e;font-size:16px;font-weight:500;outline:0;transition:.2s}
.cc .cc-input:focus{border-color:var(--ac,#4299e1);box-shadow:0 0 0 4px rgba(var(--ac-rgb,66,153,225),.08)}
.cc .cc-input::placeholder{color:#cbd5e0}
.cc select.cc-input{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3 4.5l3 3.5 3-3.5' stroke='%23a0aec0' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center #fff;padding-right:36px}

/* Calculate button — calculator.php overrides color via !important */
.cc .cc-btn{width:100%;padding:15px;border:0;border-radius:14px;cursor:pointer;font:700 16px/1 sans-serif;background:linear-gradient(135deg,var(--ac,#4299e1),var(--ac-dk,#3182ce));color:#fff;transition:.2s}
.cc .cc-btn:hover{box-shadow:0 8px 28px rgba(0,0,0,.15);transform:translateY(-1px)}

/* ----------------------------------------------------------
   5. OUTPUT CONTAINER  (hidden until .show)
   ---------------------------------------------------------- */
.cc .cc-out{margin-top:36px;display:none}
.cc .cc-out.show{display:block;animation:ccFadeUp .5s ease}
@keyframes ccFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ----------------------------------------------------------
   6. HERO PANEL
   ---------------------------------------------------------- */
/* Full-width hero (BMI, mortgage, etc.) */
.cc .cc-hero{display:flex;align-items:center;gap:32px;padding:28px 32px;border-radius:24px;margin-bottom:28px;border:2px solid #e2e8f0;background:#fff}
/* Compact / split hero (zodiac, tip, astro) */
.cc .cc-hero-left{text-align:center;min-width:140px}
.cc .cc-hero-right{flex:1}

.cc .cc-hero-num{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--ac,#4299e1);text-align:center;min-width:150px}
.cc .cc-hero-sub{font-size:14px;font-weight:700;color:var(--ac,#4299e1);margin-top:4px}
.cc .cc-hero-text{font-size:15px;color:#4a5568;line-height:1.8;margin-top:14px}
.cc .cc-hero-text strong{color:#1a1a2e}
.cc .cc-hero-glyph{font-size:72px;line-height:1}
.cc .cc-hero-sign{font-size:32px;font-weight:800;color:var(--ac,#a21caf);margin-top:4px}
.cc .cc-hero-desc{font-size:14px;color:#4a5568;line-height:1.8}

/* Hero badge (BMI style) */
.cc .cc-hero-badge{display:inline-block;margin-top:12px;padding:7px 20px;border-radius:24px;font-size:15px;font-weight:700}

/* ----------------------------------------------------------
   7. GAUGE BAR
   ---------------------------------------------------------- */
.cc .cc-gauge{position:relative;height:32px;border-radius:16px;overflow:hidden;margin-bottom:8px}
.cc .cc-gauge-fill{height:100%;border-radius:16px;background:linear-gradient(90deg,#4299e1 0%,#63b3ed 14%,#48bb78 22%,#38a169 42%,#ecc94b 55%,#ed8936 68%,#e53e3e 80%,#9b2c2c 100%)}
.cc .cc-gauge-ptr{position:absolute;top:-3px;bottom:-3px;width:8px;background:#1a1a2e;border-radius:4px;box-shadow:0 0 0 3px #fff,0 2px 12px #0004;transition:left .7s cubic-bezier(.34,1.56,.64,1)}
.cc .cc-gauge-labels{display:flex;justify-content:space-between;font-size:12px;color:#a0aec0;font-weight:600}

/* ----------------------------------------------------------
   8. BIG STAT CARDS  (grid layout)
   ---------------------------------------------------------- */
.cc .cc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:28px}
.cc .cc-card{border-radius:16px;padding:20px 22px;transition:transform .15s}
.cc .cc-card:hover{transform:translateY(-2px)}
.cc .cc-card-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:8px;opacity:.7}
.cc .cc-card-val{font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.cc .cc-card-sub{font-size:13px;margin-top:6px;opacity:.6;font-weight:500}

/* ----------------------------------------------------------
   9. MINI CARDS  (grid layout — all modules except zodiac use grid)
   ---------------------------------------------------------- */
.cc .cc-mini-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:28px}
.cc .cc-mini{border-radius:16px;padding:16px 14px;text-align:center;border:2px solid}
.cc .cc-mini-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;opacity:.7}
.cc .cc-mini-val{font-size:22px;font-weight:800;margin-top:4px}

/* Zodiac-style inline-block mini cards (override when needed) */
.cc .cc-mini-cards.cc-mini-inline{display:block;font-size:0;margin-bottom:28px}
.cc .cc-mini-inline .cc-mini{display:inline-block;vertical-align:top;width:calc(33.33% - 8px);margin:4px;font-size:14px}

/* ----------------------------------------------------------
   10. TABS
   ---------------------------------------------------------- */
.cc .cc-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.cc .cc-tab{padding:11px 22px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;font-size:14px;font-weight:600;color:#a0aec0;border-radius:12px;transition:.2s;white-space:nowrap}
/* calculator.php overrides .on color via !important */
.cc .cc-tab.on{background:var(--ac,#4299e1);color:#fff;border-color:var(--ac,#4299e1);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.cc .cc-tab:hover:not(.on){border-color:var(--ac,#4299e1);color:var(--ac,#4299e1)}

/* Tab panels */
.cc .cc-panel{display:none}
.cc .cc-panel.show{display:block;animation:ccFadeUp .35s ease}

/* ----------------------------------------------------------
   11. SECTION BOX
   ---------------------------------------------------------- */
.cc .cc-section{background:#fff;border-radius:20px;padding:28px 32px;border:2px solid #e2e8f0;margin-bottom:18px}
.cc .cc-section h3{font-size:18px;font-weight:700;margin-bottom:20px}

/* ----------------------------------------------------------
   12. RISK BAR
   ---------------------------------------------------------- */
.cc .cc-risk{margin-bottom:14px}
.cc .cc-risk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cc .cc-risk-name{font-size:15px;color:#2d3748;font-weight:600}
.cc .cc-risk-val{font-size:13px;font-weight:700;padding:4px 12px;border-radius:8px}
.cc .cc-risk-bar{height:10px;background:#edf2f7;border-radius:5px;overflow:hidden}
.cc .cc-risk-fill{height:100%;border-radius:5px;transition:width 1s}

/* ----------------------------------------------------------
   13. RECOMMENDATION BOX
   ---------------------------------------------------------- */
.cc .cc-rec{border-radius:20px;padding:28px 32px;margin-bottom:18px;background:linear-gradient(135deg,#ebf8ff,#e6fffa);border:2px solid #90cdf4}
.cc .cc-rec h3{font-size:18px;font-weight:700;color:#2b6cb0;margin-bottom:14px}
.cc .cc-rec p{font-size:15px;line-height:1.9;color:#2d3748}
.cc .cc-rec strong{color:#1a202c}

/* ----------------------------------------------------------
   14. INFO / WARNING BOXES
   ---------------------------------------------------------- */
.cc .cc-info{font-size:14px;color:#2b6cb0;background:#ebf8ff;padding:14px 20px;border-radius:14px;line-height:1.7;margin-bottom:24px;border-left:4px solid #4299e1}
.cc .cc-info-yellow{font-size:14px;background:#fffff0;border:2px solid #ecc94b;padding:14px 20px;border-radius:14px;line-height:1.7;margin-bottom:18px;color:#744210}

/* ----------------------------------------------------------
   15. HIGHLIGHT PANEL (.ep)
   ---------------------------------------------------------- */
.cc .cc-highlight{background:linear-gradient(135deg,#fffaf0,#fef3c7);border:2px solid #f6ad55;border-radius:16px;padding:20px 24px;margin-bottom:18px}
.cc .cc-highlight h3{color:#c05621;font-size:16px;margin-bottom:12px}
.cc .cc-highlight p{font-size:15px;color:#4a5568;line-height:1.8}
.cc .cc-highlight strong{color:#1a1a2e}

/* ----------------------------------------------------------
   16. TRAIT TAGS (astrology)
   ---------------------------------------------------------- */
.cc .cc-trait{display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;margin:3px}

/* ----------------------------------------------------------
   17. LUCKY GRID
   ---------------------------------------------------------- */
.cc .cc-lucky{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.cc .cc-lucky-item{text-align:center;padding:14px 10px;border-radius:14px;background:#f7fafc;border:1px solid #e2e8f0}
.cc .cc-lucky-icon{font-size:24px;margin-bottom:4px}
.cc .cc-lucky-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;opacity:.7}
.cc .cc-lucky-val{font-size:16px;font-weight:700;margin-top:2px}

/* ----------------------------------------------------------
   18. HUB LINKS
   ---------------------------------------------------------- */
.cc .cc-hub{font-size:0;margin-top:28px}
.cc .cc-hub-link{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:4px;padding:14px 18px;border-radius:14px;border:2px solid #e2e8f0;text-decoration:none;color:#1a1a2e;font-size:14px;background:#fff}
.cc .cc-hub-link:hover{border-color:var(--ac,#4299e1);background:#f7fafc}
.cc .cc-hub-icon{font-size:28px}
.cc .cc-hub-txt{font-size:14px;font-weight:600}
.cc .cc-hub-sub{font-size:12px;color:#a0aec0}

/* ----------------------------------------------------------
   19. STEPS
   ---------------------------------------------------------- */
.cc .cc-step{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #edf2f7}
.cc .cc-step:last-child{border-bottom:0}
.cc .cc-step-num{width:32px;height:32px;border-radius:50%;background:var(--ac,#4299e1);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc .cc-step-txt{font-size:14px;line-height:1.7;color:#4a5568}
.cc .cc-step-txt strong{color:#1a1a2e}

/* ----------------------------------------------------------
   20. FORMULA LABEL
   ---------------------------------------------------------- */
.cc .cc-formula{font-size:13px;font-family:monospace;background:#f7fafc;padding:10px 16px;border-radius:10px;border:1px solid #e2e8f0;margin-bottom:14px;color:#4a5568;overflow-x:auto}

/* ----------------------------------------------------------
   21. TABLE
   ---------------------------------------------------------- */
.cc .cc-table-wrap{max-height:400px;overflow-y:auto;border-radius:12px;border:1px solid #e2e8f0}
.cc table{width:100%;border-collapse:collapse;font-size:13px}
.cc th{background:#f7fafc;padding:10px 12px;text-align:left;font-weight:700;color:#4a5568;border-bottom:2px solid #e2e8f0;position:sticky;top:0}
.cc td{padding:8px 12px;border-bottom:1px solid #edf2f7}
.cc tr:hover td{background:#f7fafc}

/* ----------------------------------------------------------
   22. DISCLAIMER
   ---------------------------------------------------------- */
.cc .cc-disclaimer{font-size:13px;color:#a0aec0;line-height:1.6;margin-top:14px}

/* ----------------------------------------------------------
   22b. JOURNEY RESULT
   ---------------------------------------------------------- */
.cc .cc-journey-result{font-size:15px;line-height:1.9;color:#2d3748;padding:18px 22px;background:linear-gradient(135deg,#f0fff4,#e6fffa);border-radius:14px;border:2px solid #9ae6b4}
.cc .cc-journey-result strong{color:#1a202c}

/* ----------------------------------------------------------
   22c. CATEGORY TABLE (BMI category list)
   ---------------------------------------------------------- */
.cc .cc-cat-list{margin-bottom:18px}
.cc .cc-cat-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;margin-bottom:5px;border:2px solid transparent;font-size:15px}
.cc .cc-cat-item:hover{background:#f7fafc}
.cc .cc-cat-item.hi{background:#f0fff4;border-color:#68d391}
.cc .cc-cat-item .cc-dot{width:12px;height:12px;border-radius:50%;margin-right:12px;flex-shrink:0}
.cc .cc-cat-item .cc-cat-name{color:#4a5568;font-weight:500}
.cc .cc-cat-item.hi .cc-cat-name{color:#1a1a2e;font-weight:700}
.cc .cc-cat-item .cc-cat-val{color:#a0aec0;font-weight:600;font-size:14px}

/* ----------------------------------------------------------
   22d. BMI-SPECIFIC: child alert, pregnancy note
   ---------------------------------------------------------- */
.cc .child-alert{padding:18px 22px;border-radius:14px;background:linear-gradient(135deg,#fefcbf,#fef3c7);border:2px solid #f6e05e;margin-bottom:18px;font-size:14px;line-height:1.8;color:#744210}
.cc .child-alert strong{color:#92400e}
.cc .preg-note{padding:14px 20px;border-radius:14px;background:linear-gradient(135deg,#fce7f3,#fbcfe8);border:2px solid #f9a8d4;margin-bottom:18px;font-size:14px;line-height:1.8;color:#831843}
.cc .preg-chk{display:flex;align-items:center;gap:8px;margin-top:8px}
.cc .preg-chk input{width:18px;height:18px;accent-color:#ec4899}
.cc .preg-chk label{font-size:14px;color:#4a5568;margin:0}

/* ----------------------------------------------------------
   23. COMPATIBILITY / SIGN GRID (zodiac-specific)
   ---------------------------------------------------------- */
.cc .cc-compat-row{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:4px;padding:10px 12px;border-radius:14px;border:2px solid #e2e8f0;font-size:14px;page-break-inside:avoid}
.cc .cc-compat-row:hover{border-color:var(--ac,#f0abfc)}
.cc .cc-compat-bar{height:8px;background:#edf2f7;border-radius:4px;overflow:hidden;margin-top:4px}
.cc .cc-compat-fill{height:100%;border-radius:4px;display:block}

.cc .cc-sign-grid{font-size:0;margin-bottom:20px}
.cc .cc-sign{display:inline-block;vertical-align:top;width:calc(25% - 8px);margin:4px;font-size:14px;padding:16px 10px;border-radius:16px;text-align:center;border:2px solid #e2e8f0;cursor:pointer;transition:.15s}
.cc .cc-sign:hover{border-color:var(--ac,#d946ef);background:#fdf4ff}
.cc .cc-sign.on{border-color:var(--ac,#d946ef);background:#fdf4ff;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.cc .cc-sign-glyph{font-size:32px}
.cc .cc-sign-name{font-size:13px;font-weight:700;margin-top:4px;color:#1a1a2e}
.cc .cc-sign-date{font-size:10px;color:#a0aec0;margin-top:2px}

/* Strength rows (astro) */
.cc .cc-strength-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;margin-bottom:6px;border:2px solid #f3e8ff;background:#faf5ff;page-break-inside:avoid}
.cc .cc-str-icon{font-size:24px;min-width:32px;text-align:center}
.cc .cc-str-label{font-size:14px;font-weight:700;color:#6b21a8}
.cc .cc-str-bar{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.cc .cc-str-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac,#d946ef),#a21caf)}
.cc .cc-str-pct{font-size:14px;font-weight:800;color:var(--ac,#a21caf);min-width:36px;text-align:right}

/* ----------------------------------------------------------
   24. MISCELLANEOUS SHARED PATTERNS
   ---------------------------------------------------------- */
/* Category item rows (BMI etc.) */
.cc .cc-cat-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;margin-bottom:5px;border:2px solid transparent;font-size:15px}
.cc .cc-cat-item:hover{background:#f7fafc}
.cc .cc-cat-item.hi{background:#f0fff4;border-color:#68d391}
.cc .cc-cat-item .cc-dot{width:12px;height:12px;border-radius:50%;margin-right:12px}

/* Journey/slider controls */
.cc .cc-slider-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cc .cc-slider-row label{font-size:14px;color:#4a5568;font-weight:600;min-width:110px;margin:0}
.cc .cc-slider-row input[type=range]{flex:1;accent-color:var(--ac,#4299e1)}
.cc .cc-slider-row span{font-size:16px;font-weight:700;min-width:65px;text-align:right}

/* Donut chart legend */
.cc .cc-donut-legend{display:flex;align-items:center;gap:32px;justify-content:center;flex-wrap:wrap}
.cc .cc-donut-legend-item{font-size:14px;line-height:2.8;color:#4a5568}
.cc .cc-donut-legend-item i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:10px;vertical-align:middle;font-style:normal}
.cc .cc-donut-legend-item strong{color:#1a1a2e}

/* Side-by-side stat */
.cc .cc-side-stats{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.cc .cc-side-stat{font-size:15px;color:#4a5568;line-height:2.2;max-width:260px}
.cc .cc-side-stat strong{color:#1a1a2e;font-size:16px}

/* Add/remove button (GPA rows, etc.) */
.cc .cc-add-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;border:2px dashed #cbd5e0;background:none;cursor:pointer;font-size:14px;font-weight:600;color:#a0aec0;transition:.2s}
.cc .cc-add-btn:hover{border-color:var(--ac,#4299e1);color:var(--ac,#4299e1)}

/* WHtR (BMI specific) */
.cc .cc .wh-bar{height:18px;background:#edf2f7;border-radius:9px;overflow:hidden;margin:12px 0}
.cc .cc .wh-fill{height:100%;border-radius:9px;transition:width .6s}
.cc .cc .wh-zones{display:flex;gap:6px;margin-top:12px}
.cc .cc .wh-zone{flex:1;text-align:center;padding:10px 8px;border-radius:12px;font-size:13px;font-weight:700}
.cc .cc .wh-zone.hi{box-shadow:0 0 0 2px currentColor}
.cc .cc .wh-info{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.cc .cc .wh-card{padding:16px;border-radius:14px;border:2px solid #e2e8f0}
.cc .cc .wh-card h4{font-size:15px;font-weight:700;margin-bottom:8px}
.cc .cc .wh-card p{font-size:14px;line-height:1.7;color:#4a5568}

/* ----------------------------------------------------------
   25. DARK MODE
   ---------------------------------------------------------- */
html.dark .cc{color:var(--text,#e2e8f0)}
html.dark .cc label{color:var(--text2,#94a3b8)}

/* Inputs */
html.dark .cc .cc-input{background:var(--bg,#0f172a);border-color:var(--bg3,#334155);color:var(--text,#e2e8f0)}
html.dark .cc .cc-input::placeholder{color:var(--muted,#475569)}
html.dark .cc select.cc-input{background-color:var(--bg,#0f172a)}

/* Pills */
html.dark .cc .cc-pills{background:var(--bg3,#334155)}
html.dark .cc .cc-pill{color:var(--text2,#94a3b8)}
html.dark .cc .cc-pill.on{background:var(--bg,#0f172a);color:var(--text,#e2e8f0)}

/* Tabs */
html.dark .cc .cc-tab{border-color:var(--bg3,#334155);background:var(--bg,#0f172a);color:var(--text2,#94a3b8)}

/* Hero */
html.dark .cc .cc-hero{background:var(--bg2,#1e293b);border-color:var(--bg3,#334155)}
html.dark .cc .cc-hero-text{color:var(--text2,#94a3b8)}
html.dark .cc .cc-hero-text strong{color:var(--text,#e2e8f0)}
html.dark .cc .cc-hero-desc{color:var(--text2,#94a3b8)}

/* Section */
html.dark .cc .cc-section{background:var(--bg2,#1e293b);border-color:var(--bg3,#334155)}
html.dark .cc .cc-section h3{color:var(--text,#e2e8f0)}

/* Cards */
html.dark .cc .cc-card{background:var(--bg2,#1e293b)}
html.dark .cc .cc-mini{background:var(--bg2,#1e293b)}

/* Rec */
html.dark .cc .cc-rec{background:linear-gradient(135deg,rgba(43,108,176,.1),rgba(56,161,105,.1));border-color:var(--bg3,#334155)}
html.dark .cc .cc-rec h3{color:var(--text,#e2e8f0)}
html.dark .cc .cc-rec p{color:var(--text2,#94a3b8)}

/* Info boxes */
html.dark .cc .cc-info{background:rgba(66,153,225,.1);border-color:rgba(66,153,225,.3);color:var(--text2,#94a3b8)}
html.dark .cc .cc-info-yellow{background:rgba(236,201,75,.1);border-color:rgba(236,201,75,.3);color:var(--text2,#94a3b8)}
html.dark .cc .cc-highlight{background:rgba(246,173,85,.1);border-color:rgba(246,173,85,.3)}
html.dark .cc .cc-highlight h3{color:var(--text,#e2e8f0)}
html.dark .cc .cc-highlight p{color:var(--text2,#94a3b8)}

/* Table */
html.dark .cc th{background:var(--bg,#0f172a);color:var(--text2,#94a3b8);border-color:var(--bg3,#334155)}
html.dark .cc td{border-color:var(--bg3,#334155);color:var(--text2,#94a3b8)}
html.dark .cc tr:hover td{background:var(--bg2,#1e293b)}
html.dark .cc .cc-table-wrap{border-color:var(--bg3,#334155)}

/* Risk */
html.dark .cc .cc-risk-bar{background:var(--bg3,#334155)}
html.dark .cc .cc-risk-name{color:var(--text,#e2e8f0)}

/* Misc */
html.dark .cc .cc-disclaimer{color:var(--muted,#475569)}
html.dark .cc .cc-hub-link{background:var(--bg2,#1e293b);border-color:var(--bg3,#334155);color:var(--text,#e2e8f0)}
html.dark .cc .cc-formula{background:var(--bg,#0f172a);border-color:var(--bg3,#334155);color:var(--text2,#94a3b8)}
html.dark .cc .cc-cat-item:hover{background:var(--bg2,#1e293b)}
html.dark .cc .cc-cat-item.hi{background:rgba(104,211,145,.1);border-color:rgba(104,211,145,.3)}
html.dark .cc .cc-lucky-item{background:var(--bg,#0f172a);border-color:var(--bg3,#334155)}
html.dark .cc .cc-strength-row{background:rgba(250,245,255,.05);border-color:var(--bg3,#334155)}
html.dark .cc .cc-compat-row{border-color:var(--bg3,#334155)}
html.dark .cc .cc-sign{border-color:var(--bg3,#334155);color:var(--text,#e2e8f0)}
html.dark .cc .cc-sign:hover,.cc .cc-sign.on{background:rgba(var(--ac-rgb,217,70,239),.08)}
html.dark .cc .cc .wh-card{border-color:var(--bg3,#334155)}
html.dark .cc .cc .wh-card p{color:var(--text2,#94a3b8)}
html.dark .cc .cc-donut-legend-item{color:var(--text2,#94a3b8)}
html.dark .cc .cc-donut-legend-item strong{color:var(--text,#e2e8f0)}
html.dark .cc .cc-side-stat{color:var(--text2,#94a3b8)}
html.dark .cc .cc-side-stat strong{color:var(--text,#e2e8f0)}
html.dark .cc .cc-sign-name{color:var(--text,#e2e8f0)}

/* Journey result */
html.dark .cc .cc-journey-result{background:rgba(56,161,105,.1);border-color:rgba(154,230,180,.2);color:var(--text2,#94a3b8)}
html.dark .cc .cc-journey-result strong{color:var(--text,#e2e8f0)}

/* Category list */
html.dark .cc .cc-cat-item:hover{background:var(--bg2,#1e293b)}
html.dark .cc .cc-cat-item.hi{background:rgba(104,211,145,.1);border-color:rgba(104,211,145,.3)}
html.dark .cc .cc-cat-item .cc-cat-name{color:var(--text2,#94a3b8)}
html.dark .cc .cc-cat-item.hi .cc-cat-name{color:var(--text,#e2e8f0)}
html.dark .cc .cc-cat-item .cc-cat-val{color:var(--muted,#475569)}

/* Child/pregnancy alerts */
html.dark .cc .child-alert{background:rgba(246,224,94,.1);border-color:rgba(246,224,94,.3);color:var(--text2,#94a3b8)}
html.dark .cc .preg-note{background:rgba(249,168,212,.1);border-color:rgba(249,168,212,.3);color:var(--text2,#94a3b8)}

/* ==========================================================
   MODULE-SPECIFIC PATTERNS
   ========================================================== */

/* M1. Food/Exercise items (calorie, macro, tdee) */
.cc .food-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f7fafc;border-radius:12px;margin-bottom:8px;border:1px solid #edf2f7}
.cc .food-icon{font-size:28px;width:40px;text-align:center}
.cc .food-name{flex:1;font-weight:600;font-size:14px;color:#2d3748}
.cc .food-cal,.cc .food-val,.cc .food-eq{font-size:14px;color:#a0aec0;font-weight:600}
.cc .ex-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f7fafc;border-radius:12px;margin-bottom:8px;border:1px solid #edf2f7}
.cc .ex-icon{font-size:24px;width:36px;text-align:center}
.cc .ex-name{flex:1;font-weight:600;font-size:15px;color:#2d3748}
.cc .ex-dur{font-size:20px;font-weight:800;color:#38a169}
.cc .ex-unit{font-size:12px;color:#a0aec0}
.cc .diet-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;margin-bottom:6px}
.cc .cat-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:6px;background:#f7fafc;border:1px solid #edf2f7}

/* M2. Calendar (ovulation, period-tracker) */
.cc .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:20px}
.cc .cal-h{text-align:center;font-size:12px;font-weight:700;color:#a0aec0;padding:8px 0}
.cc .cal-d{text-align:center;padding:10px 4px;border-radius:10px;font-size:13px;font-weight:600;border:2px solid transparent;cursor:default}
.cc .cal-d.period{background:#fce7f3;color:#be185d;border-color:#f9a8d4}
.cc .cal-d.fertile{background:#ecfdf5;color:#059669;border-color:#6ee7b7}
.cc .cal-d.ovulation{background:#059669;color:#fff;border-color:#059669;font-weight:800}
.cc .cal-d.pms{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.cc .cal-d.today{border-color:#1a1a2e;font-weight:800}
.cc .legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cc .leg{display:flex;align-items:center;gap:6px;font-size:13px}
.cc .leg-dot{width:14px;height:14px;border-radius:7px}

/* M3. Zone (heart-rate) */
.cc .zone{border-radius:16px;padding:20px;margin-bottom:12px;border:2px solid;display:flex;align-items:center;gap:16px}
.cc .zone-num{font-size:36px;font-weight:800;min-width:50px;text-align:center}
.cc .zone-info{flex:1}.cc .zone-name{font-size:16px;font-weight:800}
.cc .zone-range{font-size:22px;font-weight:800;margin-top:2px}
.cc .zone-desc{font-size:13px;opacity:.8;margin-top:4px;line-height:1.6}
.cc .zone-bpm{min-width:100px;text-align:right}.cc .zone-bpm-val{font-size:14px;font-weight:700}
.cc .zone-bar{height:12px;background:#edf2f7;border-radius:6px;margin-top:20px;overflow:hidden;display:flex}
.cc .zone-seg{height:100%}

/* M4. Drink row (BAC) */
.cc .drink-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;margin-bottom:8px;border:2px solid #e2e8f0;cursor:pointer;transition:.15s}
.cc .drink-row:hover{border-color:var(--ac,#059669);background:#f0fdf4}
.cc .drink-row.on{border-color:var(--ac,#059669);background:#ecfdf5}

/* M5. Room row (square-footage) */
.cc .shape-svg{display:flex;justify-content:center;margin-bottom:18px}
.cc .shape-svg svg{max-width:180px;max-height:120px}
.cc .room-hdr{display:grid;grid-template-columns:70px 1fr 1fr 1fr 36px;gap:8px;font-size:12px;font-weight:700;color:#a0aec0;margin-bottom:6px}
.cc .room-row{display:grid;grid-template-columns:70px 1fr 1fr 1fr 36px;gap:8px;align-items:center;margin-bottom:8px}

/* M6. Remove button (GPA, square-footage) */
.cc .rm-btn{width:36px;height:36px;border:none;background:#fff5f5;color:#e53e3e;border-radius:10px;cursor:pointer;font-size:18px;font-weight:700;transition:.15s}
.cc .rm-btn:hover{background:#fed7d7}

/* M7. Time card (sleep) */
.cc .time-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;margin-bottom:10px;border:2px solid;cursor:default;transition:.15s}
.cc .time-card:hover{transform:translateY(-1px)}

/* M8. Tip option (tip calculator) */
.cc .tip-opt{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;margin-bottom:8px;border:2px solid;cursor:pointer;transition:.15s}
.cc .tip-opt:hover{transform:translateY(-1px)}

/* M9. Gauge arc (BAC, body-fat — SVG-based) */
.cc .gauge{margin:20px auto;text-align:center}
.cc .gauge-bg{fill:none;stroke:#edf2f7;stroke-width:12}
.cc .gauge-lbl{font-size:11px;fill:#a0aec0;font-weight:600}
.cc .gauge-pin{transition:transform .7s cubic-bezier(.34,1.56,.64,1)}

/* M10. Planet row (birth-chart) */
.cc .planet-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;margin-bottom:6px;border:2px solid #e2e8f0;background:#fff}

/* M11. Formula name/val (various) */
.cc .fm-name{font-size:14px;font-weight:700;color:#2d3748;margin-bottom:4px}
.cc .fm-val{font-family:monospace;font-size:13px;background:#f7fafc;padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0}

/* M12. Week row (period-tracker) */
.cc .wk-row{display:flex;gap:4px;margin-bottom:4px}
.cc .wk-day{flex:1;height:32px;border-radius:6px;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:600}

/* M13. Goal card (weight-loss, calorie) */
.cc .goal-card{border-radius:16px;padding:18px;border:2px solid #e2e8f0;margin-bottom:12px;background:#fff}

/* M14. Nums grid (numerology, gematria) */
.cc .nums{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}

/* M15. Pair (love-calculator) */
.cc .pair{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}

/* M16. Progress bars (calorie, macro, salary, tdee) */
.cc .bw{margin-bottom:16px}
.cc .bl{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:6px}
.cc .bt{height:28px;background:#edf2f7;border-radius:14px;overflow:hidden}
.cc .bf{height:100%;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;min-width:40px;transition:width .8s}

/* M17. Meal row (calorie) */
.cc .mr{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #edf2f7;font-size:15px}
.cc .mr:last-child{border:0}
.cc .mi{font-size:28px;width:44px;text-align:center}
.cc .mn{flex:1;font-weight:600;color:#2d3748}
.cc .mc{font-size:22px;font-weight:800;color:#1a1a2e}
.cc .mp{font-size:13px;color:#a0aec0;font-weight:600}

/* M18. Macro slider (calorie, tdee) */
.cc .ms{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cc .ms label{min-width:90px;margin:0}
.cc .ms input[type=range]{flex:1;accent-color:var(--ac,#38a169)}
.cc .ms span{font-size:15px;font-weight:700;min-width:40px;text-align:right}

/* M19. Range bar (a1c, ascvd) */
.cc .range-bar{height:28px;border-radius:14px;display:flex;overflow:hidden;margin-bottom:12px;position:relative}
.cc .range-seg{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.cc .range-marker{position:absolute;top:-8px;width:4px;height:44px;background:#1a1a2e;border-radius:2px;z-index:2}

/* M20. Fun facts (age) */
.cc .fun{display:flex;gap:12px;padding:14px 16px;background:#f7fafc;border-radius:12px;margin-bottom:8px;border:1px solid #edf2f7;font-size:16px;color:#4a5568;line-height:1.7}
.cc .fun-icon{font-size:24px;min-width:32px;text-align:center}

/* M21. Course row (GPA) */
.cc .cr{display:grid;grid-template-columns:1fr 1fr 1fr 80px 36px;gap:8px;align-items:center;margin-bottom:8px}

/* M22. Ms-row (moon-sign, birth-chart) */
.cc .ms-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;margin-bottom:6px;border:2px solid #e2e8f0}

/* Dark mode for new patterns */
html.dark .cc .bt{background:var(--bg3,#334155)}
html.dark .cc .mr{border-color:var(--bg3,#334155)}
html.dark .cc .mn{color:var(--text,#e2e8f0)}
html.dark .cc .mc{color:var(--text,#e2e8f0)}
html.dark .cc .fun{background:var(--bg,#0f172a);border-color:var(--bg3,#334155);color:var(--text2,#94a3b8)}
html.dark .cc .range-marker{background:var(--text,#e2e8f0)}
html.dark .cc .cr{color:var(--text,#e2e8f0)}
html.dark .cc .ms-row{border-color:var(--bg3,#334155)}

/* M16. Dark mode for module-specific */
html.dark .cc .food-item,html.dark .cc .ex-item,html.dark .cc .cat-row{background:var(--bg,#0f172a);border-color:var(--bg3,#334155)}
html.dark .cc .food-name,html.dark .cc .ex-name{color:var(--text,#e2e8f0)}
html.dark .cc .zone{background:var(--bg,#0f172a)}
html.dark .cc .drink-row{border-color:var(--bg3,#334155)}
html.dark .cc .drink-row:hover{background:rgba(var(--ac-rgb,5,150,105),.08)}
html.dark .cc .drink-row.on{background:rgba(var(--ac-rgb,5,150,105),.1)}
html.dark .cc .rm-btn{background:rgba(229,62,62,.1)}
html.dark .cc .time-card{background:var(--bg,#0f172a)}
html.dark .cc .planet-row{background:var(--bg,#0f172a);border-color:var(--bg3,#334155)}
html.dark .cc .fm-val{background:var(--bg,#0f172a);border-color:var(--bg3,#334155);color:var(--text2,#94a3b8)}
html.dark .cc .cal-d.today{border-color:var(--text,#e2e8f0)}
html.dark .cc .gauge-bg{stroke:var(--bg3,#334155)}
html.dark .cc .goal-card{background:var(--bg,#0f172a);border-color:var(--bg3,#334155)}
html.dark .cc .room-row{color:var(--text,#e2e8f0)}
html.dark .cc .room-hdr{color:var(--muted,#475569)}

/* ----------------------------------------------------------
   26. RESPONSIVE
   ---------------------------------------------------------- */
@media(max-width:640px){
  .cc .cc-hero{flex-direction:column;gap:16px;padding:20px;text-align:center}
  .cc .cc-hero-num{font-size:40px;min-width:auto}
  .cc .cc-row{grid-template-columns:1fr}
  .cc .cc-row-3{grid-template-columns:1fr}
  .cc .cc-cards{grid-template-columns:1fr 1fr}
  .cc .cc-card-val{font-size:22px}
  .cc .cc-mini-cards{grid-template-columns:1fr 1fr}
  .cc .cc-mini-inline .cc-mini{width:calc(50% - 8px)}
  .cc .cc-tabs{gap:6px}
  .cc .cc-tab{padding:9px 14px;font-size:13px}
  .cc .cc-section{padding:20px 22px}
  .cc .cc-rec{padding:20px 22px}
  .cc .cc-side-stats{flex-direction:column;text-align:center}
  .cc .cc-hub-link{width:100%}
  .cc .cc-sign{width:calc(33.33% - 8px)}
  .cc .cc-compat-row{width:100%}
  .cc .wh-info{grid-template-columns:1fr}
  .cc .wh-zones{flex-wrap:wrap}
  .cc table{font-size:11px}
  .cc th,.cc td{padding:6px 8px}
  /* Module-specific responsive */
  .cc .cal-d{padding:6px 2px;font-size:11px}
  .cc .zone{flex-direction:column;text-align:center}
  .cc .room-row,.cc .room-hdr{grid-template-columns:50px 1fr 1fr 1fr 32px;gap:4px;font-size:13px}
  .cc .time-card{flex-wrap:wrap;gap:10px}
}

/* M23. Flex card wrapper (astrology — cards use inline styles) */
.cc .cc-cards-flex{display:flex;flex-wrap:wrap;gap:0;margin-bottom:28px;font-size:0}

/* M24. Fraction calculator */
.cc .cc-frac-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin-bottom:18px}
.cc .frac{display:flex;flex-direction:column;align-items:center;gap:2px}
.cc .frac-line{width:80%;height:3px;background:#1a1a2e;border-radius:2px}
.cc .op{font-size:28px;font-weight:800;color:var(--ac,#8b5cf6);display:flex;align-items:center;justify-content:center}
.cc .bar-vis{margin:20px 0}
.cc .bar-outer{height:32px;background:#edf2f7;border-radius:16px;overflow:hidden;display:flex}
.cc .bar-a{height:100%;background:#8b5cf6;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.cc .bar-b{height:100%;background:#f59e0b;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
html.dark .cc .frac-line{background:var(--text,#e2e8f0)}
html.dark .cc .bar-outer{background:var(--bg3,#334155)}
.cc .frac .cc-input{text-align:center;padding:10px 14px}