@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap');

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes questionFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes questionFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes progressAnim {
    from { width: 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in { animation: fadeIn 0.4s ease-out; }
.question-fade-in { animation: questionFadeIn 0.25s ease-out; }
.question-fade-out { animation: questionFadeOut 0.18s ease-in; }
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-scale-in { animation: scaleIn 0.5s ease-out; }

.dim-bar {
    transition: width 1s ease-out;
}

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.option-card {
    transition: all 0.25s ease;
    cursor: pointer;
}
.option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.option-card:active {
    transform: translateY(0);
}
.option-card.selected {
    border-width: 2px;
    border-color: #0f172a;
}

.surface-glass {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
}

.premium-panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.poster-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(560px 220px at 12% 14%, rgba(34, 211, 238, 0.16), transparent 62%),
        radial-gradient(460px 240px at 88% 18%, rgba(148, 163, 184, 0.16), transparent 56%),
        linear-gradient(145deg, #0f172a 0%, #111827 48%, #172033 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 34px 120px rgba(15, 23, 42, 0.20);
}

.poster-hero::before,
.poster-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(6px);
}

.poster-hero::before {
    width: 220px;
    height: 220px;
    right: -40px;
    top: -60px;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 72%);
}

.poster-hero::after {
    width: 280px;
    height: 280px;
    left: -90px;
    bottom: -140px;
    background: radial-gradient(circle, rgba(34,211,238,0.12) 0%, rgba(34,211,238,0) 72%);
}

.poster-kicker {
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 11px;
}

.poster-symbol-frame {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(241,245,249,0.92) 100%);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
}

.poster-symbol-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    border: 1px solid rgba(148, 163, 184, 0.20);
}

.poster-meta-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(226, 232, 240, 0.90);
    backdrop-filter: blur(10px);
}

.result-info-strip {
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
}

.result-stat-label {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 10px;
}

.result-section-title {
    letter-spacing: -0.02em;
}

.result-card-soft {
    position: relative;
    overflow: hidden;
}

.result-card-soft::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,182,212,0.16), rgba(148,163,184,0));
}

.scientific-bg {
    background:
        radial-gradient(1200px 420px at 10% -10%, rgba(34, 211, 238, 0.09), transparent 60%),
        radial-gradient(900px 380px at 90% 0%, rgba(15, 23, 42, 0.06), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #f4f8fb 100%);
}

.progress-fill {
    transition: width 0.5s ease-out;
}

.print-area {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.share-btn {
    transition: all 0.2s ease;
}
.share-btn:hover {
    transform: translateY(-2px);
}

.advanced-fold summary {
    list-style: none;
    cursor: pointer;
}

.advanced-fold summary::-webkit-details-marker {
    display: none;
}

.advanced-fold .expanded-text {
    display: none;
}

.advanced-fold[open] .expanded-text {
    display: inline;
}

.advanced-fold[open] .collapsed-text {
    display: none;
}

.advanced-fold .advanced-fold-summary {
    outline: none;
}

[type="button"], [type="submit"] {
    transition: all 0.2s ease;
}
[type="button"]:hover, [type="submit"]:hover {
    transform: translateY(-1px);
}

body {
    font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .animate-fade-in-up,
    .animate-fade-in,
    .question-fade-in,
    .question-fade-out {
        animation-duration: 0.2s;
    }

    .surface-glass {
        backdrop-filter: blur(6px);
    }

    .poster-hero {
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
    }

    .poster-symbol-frame::before {
        inset: 8px;
        border-radius: 20px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .card-hover:hover,
    .option-card:hover,
    .share-btn:hover,
    [type="button"]:hover,
    [type="submit"]:hover {
        transform: none;
        box-shadow: none;
    }
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}