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, .input-panel, .report-card { background: #111827; border: 1px solid rgba(250,204,21,0.2); border-radius: 24px; padding: 1.35rem; box-shadow: 0 18px 45px rgba(0,0,0,0.3); margin-bottom: 1rem; }
.hero-panel { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.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: 820px; }
.print-btn, .generate-btn { background: #facc15; color: #020617; border: 0; border-radius: 12px; padding: 0.72rem 1rem; font-weight: 950; cursor: pointer; }
.input-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 860px) { .input-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.input-grid label { color: #94a3b8; font-size: 0.8rem; font-weight: 800; display: grid; gap: 0.35rem; }
.input-grid input, .input-grid select { width: 100%; padding: 0.68rem 0.78rem; }
.generate-btn { width: 100%; margin-top: 1rem; font-size: 1rem; }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; 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; }
.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; }
.conclusion-grid, .dimension-grid, .quarter-grid, .month-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 760px) { .conclusion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quarter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 980px) { .dimension-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.conclusion-card, .dimension-card, .quarter-card, .month-card { background: #020617; border: 1px solid rgba(148,163,184,0.15); border-radius: 16px; padding: 1rem; }
.conclusion-card { border-left: 5px solid #facc15; color: #cbd5e1; line-height: 1.65; }
.dimension-card { border-left: 5px solid #facc15; }
.dimension-card.green { border-left-color: #34d399; }
.dimension-card.rose { border-left-color: #fb7185; }
.dimension-card.blue { border-left-color: #60a5fa; }
.dimension-card.purple { border-left-color: #a78bfa; }
.dimension-card.cyan { border-left-color: #22d3ee; }
.dimension-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dimension-head span { color: #f8fafc; font-weight: 950; }
.dimension-head strong { color: #facc15; font-size: 1.5rem; }
.bar { height: 8px; background: #111827; border-radius: 999px; margin: 0.75rem 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #facc15, #34d399); border-radius: 999px; }
.dimension-card p, .quarter-card p, .month-card p { color: #cbd5e1; line-height: 1.6; font-size: 0.88rem; }
.section-title { color: #facc15; font-size: 1.08rem; font-weight: 950; margin: 1.2rem 0 0.7rem; }
.quarter-card strong { color: #f8fafc; }
.month-card { min-height: 132px; }
.month-card div { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.month-card strong { color: #f8fafc; }
.month-card span { color: #020617; background: #facc15; border-radius: 999px; padding: 2px 8px; font-size: 0.72rem; font-weight: 950; white-space: nowrap; }
.month-card.good { border-left: 5px solid #34d399; }
.month-card.neutral { border-left: 5px solid #60a5fa; }
.month-card.risk { border-left: 5px solid #fb7185; }
.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, .input-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,
    .report-card,
    .conclusion-card,
    .dimension-card,
    .quarter-card,
    .month-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,
    .section-title,
    .eyebrow,
    .dimension-head strong {
        color: #a7640b !important;
    }

    .hero-panel p,
    .report-head p,
    .dimension-card p,
    .quarter-card p,
    .month-card p,
    .input-grid label {
        color: #654b34 !important;
    }

    .report-head h2,
    .dimension-head span,
    .quarter-card strong,
    .month-card strong {
        color: #2b2118 !important;
    }

    .bar {
        background: #f3dfc8 !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;
    }

    .generate-btn,
    .print-btn,
    .month-card span {
        background: #d99a21 !important;
        color: #2b2118 !important;
    }

    .dimension-card.green,
    .month-card.good {
        border-left-color: #22c55e !important;
    }

    .dimension-card.rose,
    .month-card.risk {
        border-left-color: #ef4444 !important;
    }

    .dimension-card.blue,
    .month-card.neutral {
        border-left-color: #3b82f6 !important;
    }
}
@media print {
    body { background: #fff !important; color: #000 !important; }
    .no-print { display: none !important; }
    .hero-panel, .report-card, .conclusion-card, .dimension-card, .quarter-card, .month-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, strong, b { color: #000 !important; }
    .report-card { break-inside: auto !important; page-break-inside: auto !important; padding: 12px !important; }
    .dimension-card, .quarter-card, .month-card, .conclusion-card { 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, .conclusion-card strong {
        color: #b45309 !important;
    }
    .dimension-card { border-left-color: #f59e0b !important; }
    .dimension-card.green, .month-card.good { border-left-color: #22c55e !important; }
    .dimension-card.rose, .month-card.risk { border-left-color: #ef4444 !important; }
    .dimension-card.blue, .month-card.neutral { border-left-color: #3b82f6 !important; }
    .dimension-card.purple { border-left-color: #a855f7 !important; }
    .dimension-card.cyan { border-left-color: #06b6d4 !important; }
    .dimension-card.green h3, .month-card.good strong { color: #15803d !important; }
    .dimension-card.rose h3, .month-card.risk strong { color: #b91c1c !important; }
    .dimension-card.blue h3, .month-card.neutral strong { color: #1d4ed8 !important; }
    .dimension-card.purple h3 { color: #7e22ce !important; }
    .dimension-card.cyan h3 { color: #0e7490 !important; }
    .month-card span {
        background: #fff7ed !important;
        color: #b45309 !important;
        border: 1px solid #f59e0b !important;
    }
}