body { background: #060709; color: #f1f5f9; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
input, select, option { background: #000 !important; color: #fff !important; color-scheme: dark; border: 1px solid #374151 !important; border-radius: 12px; }
input:focus, select:focus { border-color: #facc15 !important; outline: none; box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22); }
.hero-panel { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; background: #111827; border: 1px solid rgba(250, 204, 21, 0.22); border-radius: 24px; padding: 1.4rem; margin-bottom: 1rem; box-shadow: 0 18px 45px rgba(0,0,0,0.28); }
.eyebrow { color: #93c5fd; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; }
h1 { color: #facc15; font-size: clamp(1.75rem, 4vw, 2.55rem); font-weight: 950; margin-top: 0.3rem; }
.hero-panel p, .report-head p { color: #94a3b8; line-height: 1.65; margin-top: 0.45rem; max-width: 760px; }
.print-btn, .analyze-btn { background: #facc15; color: #020617; border: 0; border-radius: 12px; padding: 0.72rem 1rem; font-weight: 950; cursor: pointer; }
.input-panel { background: #0f172a; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 20px; padding: 1rem; margin-bottom: 1rem; }
.mode-tabs { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; margin-bottom: 1rem; }
@media (min-width: 760px) { .mode-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mode-tabs button { background: #020617; color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 12px; padding: 0.76rem 0.8rem; font-weight: 900; cursor: pointer; }
.mode-tabs button.active, .mode-tabs button:hover { background: #facc15; color: #020617; border-color: #facc15; }
.people-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 860px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person-card { background: #020617; border: 1px solid rgba(148, 163, 184, 0.15); border-left: 5px solid #facc15; border-radius: 18px; padding: 1rem; display: grid; gap: 0.75rem; }
.person-card h2 { color: #facc15; font-weight: 950; font-size: 1.08rem; }
.person-card label { color: #94a3b8; font-size: 0.8rem; font-weight: 800; display: grid; gap: 0.35rem; }
.person-card input, .person-card select { width: 100%; padding: 0.68rem 0.78rem; }
.analyze-btn { width: 100%; margin-top: 1rem; font-size: 1rem; }
.result-panel { margin-top: 1rem; }
.report-card { background: #111827; border: 1px solid rgba(250, 204, 21, 0.2); border-radius: 24px; padding: 1.25rem; box-shadow: 0 18px 45px rgba(0,0,0,0.3); }
.report-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(148, 163, 184, 0.16); padding-bottom: 1rem; margin-bottom: 1rem; }
.report-head h2 { color: #f8fafc; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 950; }
.score-orb { min-width: 132px; min-height: 132px; border-radius: 999px; background: radial-gradient(circle, #facc15, #b45309); color: #020617; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(250,204,21,0.25); }
.score-orb div { font-size: 2.35rem; font-weight: 950; line-height: 1; }
.score-orb span { font-size: 0.78rem; font-weight: 950; margin-top: 0.4rem; }
.profile-grid, .analysis-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 860px) { .profile-grid, .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-mini, .analysis-card, .strategy-card { background: #020617; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 16px; padding: 1rem; }
.profile-mini h3, .analysis-card h3, .strategy-card h3 { color: #facc15; font-weight: 950; font-size: 1.04rem; margin-bottom: 0.65rem; }
.profile-mini p, .analysis-card p, .strategy-card p { color: #cbd5e1; line-height: 1.65; font-size: 0.9rem; margin-top: 0.4rem; }
.profile-mini span, .strategy-card span, .palace-lines span { display: inline-block; min-width: 48px; color: #020617; background: #facc15; border-radius: 999px; text-align: center; padding: 2px 8px; margin-right: 8px; font-size: 0.72rem; font-weight: 950; }
.analysis-card.good { border-left: 5px solid #34d399; }
.analysis-card.risk { border-left: 5px solid #fb7185; }
.strategy-card { border-left: 5px solid #93c5fd; }
.insight-key { color: #facc15; font-weight: 900; }
.text-metal { color: #fbbf24; }
.text-wood { color: #4ade80; }
.text-water { color: #60a5fa; }
.text-fire { color: #f87171; }
.text-earth { color: #a78bfa; }
.error-card { background: #450a0a; color: #fecaca; border: 1px solid #991b1b; border-radius: 16px; padding: 1rem; }
@media (max-width: 640px) {
    .hero-panel, .report-card { border-radius: 18px; padding: 1rem; }
}

@media screen {
    body {
        background:
            radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.92), transparent 34%),
            linear-gradient(180deg, #f9eee4 0%, #fffaf2 54%, #f9eee4 100%) !important;
        color: #2b2118 !important;
    }

    .hero-panel,
    .input-panel,
    .person-card,
    .report-card,
    .profile-mini,
    .analysis-card,
    .strategy-card {
        background: rgba(255, 255, 255, 0.86) !important;
        background-image: none !important;
        color: #2b2118 !important;
        border-color: rgba(185, 127, 46, 0.22) !important;
        box-shadow: 0 18px 42px rgba(95, 58, 22, 0.09) !important;
    }

    .hero-panel {
        background: linear-gradient(135deg, #fffaf2, #fff7df) !important;
    }

    input,
    select,
    option {
        background: #fffaf2 !important;
        color: #2b2118 !important;
        color-scheme: light !important;
        border-color: rgba(185, 127, 46, 0.28) !important;
    }

    input:focus,
    select:focus {
        border-color: #d99a21 !important;
        box-shadow: 0 0 0 3px rgba(217, 154, 33, 0.18) !important;
    }

    h1,
    .eyebrow,
    .person-card h2,
    .profile-mini h3,
    .analysis-card h3,
    .strategy-card h3,
    .insight-key {
        color: #a7640b !important;
    }

    .hero-panel p,
    .report-head p,
    .person-card label,
    .profile-mini p,
    .analysis-card p,
    .strategy-card p {
        color: #654b34 !important;
    }

    .report-head h2 {
        color: #2b2118 !important;
    }

    .mode-tabs button {
        background: #fffaf2 !important;
        color: #654b34 !important;
        border-color: rgba(185, 127, 46, 0.22) !important;
    }

    .mode-tabs button.active,
    .mode-tabs button:hover,
    .analyze-btn,
    .print-btn,
    .profile-mini span,
    .strategy-card span,
    .palace-lines span {
        background: #d99a21 !important;
        color: #2b2118 !important;
        border-color: #d99a21 !important;
    }

    .score-orb {
        background: radial-gradient(circle, #fae5a6, #d99a21) !important;
        color: #2b2118 !important;
        box-shadow: 0 18px 38px rgba(156, 93, 8, 0.18) !important;
    }

    .analysis-card.good {
        border-left-color: #22c55e !important;
        background: linear-gradient(135deg, #ecfdf5, #fffaf2 62%) !important;
    }

    .analysis-card.risk {
        border-left-color: #ef4444 !important;
        background: linear-gradient(135deg, #fff1f2, #fffaf2 62%) !important;
    }

    .strategy-card {
        border-left-color: #3b82f6 !important;
    }

    .text-wood {
        color: #15803d !important;
    }

    .text-fire {
        color: #b91c1c !important;
    }

    .text-water {
        color: #1d4ed8 !important;
    }

    .text-earth {
        color: #7e22ce !important;
    }
}
@media print {
    body { background: #fff !important; color: #000 !important; }
    .no-print { display: none !important; }
    .hero-panel, .report-card, .profile-mini, .analysis-card, .strategy-card { background: #fff !important; background-image: none !important; color: #000 !important; border-color: #999 !important; box-shadow: none !important; }
    p, span, h1, h2, h3, div, b { color: #000 !important; }
    .report-card { break-inside: auto !important; page-break-inside: auto !important; padding: 12px !important; }
    .profile-mini, .analysis-card, .strategy-card, .score-orb { break-inside: avoid !important; page-break-inside: avoid !important; }
    .score-orb {
        background: #fff7ed !important;
        color: #92400e !important;
        border: 2px solid #f59e0b !important;
        box-shadow: none !important;
    }
    .score-orb div, .score-orb span, .insight-key, .profile-mini h3, .analysis-card h3, .strategy-card h3 {
        color: #b45309 !important;
    }
    .analysis-card.good { border-left-color: #22c55e !important; }
    .analysis-card.risk { border-left-color: #ef4444 !important; }
    .strategy-card { border-left-color: #3b82f6 !important; }
    .analysis-card.good h3, .analysis-card.good b { color: #15803d !important; }
    .analysis-card.risk h3, .analysis-card.risk b { color: #b91c1c !important; }
    .strategy-card h3 { color: #1d4ed8 !important; }
    .profile-mini span, .strategy-card span, .palace-lines span {
        background: #fff7ed !important;
        color: #b45309 !important;
        border: 1px solid #f59e0b !important;
    }
}