/* ==========================================
   เก็บงานพรีเมียม (impeccable polish) บนสีเดิมของเว็บ
   โหลดต่อท้าย styles.css: ถอดไฟล์นี้ = กลับหน้าตาเดิม
   ========================================== */

/* ส่วนที่เบราว์เซอร์วาดเอง: ไฮไลต์ข้อความ เคอร์เซอร์ สกรอลบาร์ ให้เป็นสีเดียวกับเว็บ */
::selection { background: rgba(37, 99, 235, 0.18); color: var(--text-main); }
input, textarea { caret-color: var(--color-primary); }
:root { accent-color: var(--color-success); scrollbar-color: rgba(15, 23, 42, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.20); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 23, 42, 0.34); }
::-webkit-scrollbar-track { background: transparent; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* เกรนบางมากบนพื้นหลัง ให้กระจกมีมิติเหมือนวัสดุจริง */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ตัวอักษร: หัวข้อตัดบรรทัดสมดุล ตัวเลขกว้างเท่ากันให้อ่านเทียบง่าย */
h1, h2, h3, .question-text, .category-title { text-wrap: balance; }
.hero-desc, .score-desc, .gap-feedback-box, .advisor-quote { text-wrap: pretty; }
.score-val, .val-bold, .step-counter, .gap-status-text, .advisor-stats strong, .stat-tile strong, .pay-amount, .adm-amount { font-variant-numeric: tabular-nums; }

/* ไอคอนเส้นชุดเดียวกันทั้งเว็บ แทนอีโมจิ */
.ic { display: block; flex-shrink: 0; }
.dim .ic { width: 24px; height: 24px; color: var(--color-primary); margin-bottom: 4px; }
.dim { padding: 16px 8px 14px; gap: 6px; font-weight: 500; }
.gap-card-icon { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04); }
.gap-card-icon.red { color: #e11d48; }
.gap-card-icon.blue { color: #2563eb; }
.gap-card-icon.orange { color: #ea580c; }
.gap-card-icon.purple { color: #7c3aed; }
.gap-card-icon.green { color: #059669; }
.gap-card-icon.yellow { color: #ca8a04; background: #fef9c3; }
.agent-contact-details .ic { display: inline-block; width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; color: var(--text-light); }
.sp-emoji { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; color: var(--color-primary); background: rgba(37, 99, 235, 0.08); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14); margin-bottom: 6px; }

/* เครื่องหมายถูกเป็นไอคอนวาด แทนตัวอักษร ✓ */
.hero-trust li { display: flex; align-items: center; gap: 7px; }
.hero-trust li::before,
.sp-feature-list li::before {
    content: "";
    width: 16px; height: 16px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.sp-feature-list li::before { width: 22px; height: 22px; top: 2px; background-size: 12px; }

/* คำแนะนำใต้คำถาม: ไอคอนข้อมูลแทนหลอดไฟอีโมจิ */
.question-hint:empty { display: none; }
.question-hint { position: relative; padding-left: 38px; border: 1px solid rgba(37, 99, 235, 0.10); }
.question-hint::before {
    content: "";
    position: absolute; left: 12px; top: 12px;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ป้ายหมวดซ้ำกับแถบความคืบหน้าด้านบน ("หมวดที่ x/6") จึงซ่อนไว้ ให้หัวข้อหมวดเด่นเอง */
.category-badge { display: none; }
.category-title { font-size: clamp(20px, 5.2vw, 24px); letter-spacing: -0.01em; }

/* แทนแถบสีด้านซ้าย: ใช้กรอบบางรอบด้าน/เส้นคั่นบนแทน */
.custom-input-group label { border-left: none; padding-left: 0; }
.gap-feedback-box {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--border-radius-md);
}
.tax-saving-box { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.18); }
.advisor-quote {
    border-left: none;
    padding: 14px 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* ปุ่ม: กดแล้วยุบเล็กน้อยให้รู้สึกตอบสนอง */
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }

/* การ์ด: ไฮไลต์ขอบบนเหมือนกระจกโดนแสง */
.card, .modal-card { position: relative; }
.card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 22%);
    mix-blend-mode: soft-light;
}

/* กราฟใยแมงมุม: ไม่เหลือที่ว่างบน-ล่างเกินบนจอเล็ก (ไม่กระทบตอนพิมพ์) */
@media screen and (max-width: 640px) {
    #radarChart { height: auto; aspect-ratio: 450 / 300; }
}

/* แถบปุ่มย้อนกลับ/ถัดไปบนมือถือ: ติดขอบล่างจอเสมอ แม้คำถามสั้น */
@media (max-width: 640px) {
    #viewQuiz .quiz-wrapper { padding-bottom: 96px; }
    #viewQuiz .quiz-navigation {
        position: fixed; left: 0; right: 0; bottom: 0;
        margin: 0;
        box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, 0.25);
    }
}

/* ลดการเคลื่อนไหวตามการตั้งค่าเครื่อง */
@media (prefers-reduced-motion: reduce) {
    .btn:active:not(:disabled) { transform: none; }
}

/* พิมพ์ PDF: ไม่เอาเกรน/ไฮไลต์กระจกติดไป */
@media print {
    body::before, .card::after { display: none !important; }
}