/* ===== ธีม "MuteLuna" — ส้มอำพัน (ความหวัง/พลังงาน) + เขียวมรกตอุ่น (ไว้ใจได้/มั่นคง) =====
   เหตุผลที่ปรับจากเขียวเข้มเดิม: เขียวเข้ม+ทอง ให้ความรู้สึก "องค์กรการเงิน/เป็นทางการ"
   ซึ่งอาจดูห่างเหินสำหรับคนที่กำลังกังวลเรื่องเงินไม่พอใช้ — โทนใหม่นี้ใช้ส้มอำพันเป็นสีหลัก
   (ให้ความรู้สึกอบอุ่น มีความหวัง กระตุ้นให้ลงมือทำ) คู่กับเขียวมรกตที่ลดความเข้มลง
   (ให้ความรู้สึกไว้ใจได้ ไม่แข็งกระด้างเกินไป) เข้ากับโทนอารมณ์ "เพื่อนที่ช่วยหาทางออก"
   มากกว่า "ธนาคาร/สถาบันการเงิน" ===== */
:root{
    --forest:        #143a34;   /* พื้นหลังหัว/ท้ายเว็บ เขียวเข้มอุ่น (ไม่ดำสนิท) */
    --primary:       #e2793a;   /* ส้มอำพัน — สีหลัก ปุ่ม CTA ให้ความรู้สึกกระตือรือร้น */
    --primary-dark:  #b85f27;
    --primary-soft:  #fdf0e4;
    --teal:          #1f8a72;   /* เขียวมรกตอุ่น — ใช้กับสถานะสำเร็จ/ไว้ใจได้ */
    --teal-soft:     #e7f5f1;
    --gold:          #d9a62c;
    --gold-soft:     #fbf2de;
    --bg:            #fbf9f6;
    --ink:           #241d15;
    --muted:         #7a7168;
    --line:          #ece5db;
    --card:          #ffffff;
    --danger:        #c0392b;
    --danger-soft:   #fdecea;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font-family:'Noto Sans Thai', sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
}
h1,h2,h3{
    font-family:'Noto Serif Thai', serif;
    color:var(--primary-dark);
    margin:0 0 12px;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== หัวเว็บ ===== */
.site-header{
    background:var(--forest);
    padding:14px 20px;
}
.header-inner{
    max-width:1080px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px;
}
.site-title{
    color:#fff; font-family:'Noto Serif Thai', serif;
    font-size:22px; font-weight:800; display:flex; align-items:center; gap:8px;
}
.coin-badge{
    background:var(--gold); color:var(--forest);
    width:30px; height:30px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800;
}
.site-nav{ display:flex; gap:16px; flex-wrap:wrap; }
.site-nav a{ color:#dfeee5; font-weight:600; font-size:14.5px; }
.site-nav a.active, .site-nav a:hover{ color:var(--gold); text-decoration:none; }

/* ===== เนื้อหา ===== */
.container{ max-width:1080px; margin:0 auto; padding:30px 20px 60px; }

.card{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:24px; margin-bottom:20px; box-shadow:0 1px 3px rgba(15,61,46,0.06);
}
.hero{
    background:linear-gradient(135deg, var(--primary-dark), var(--primary));
    color:#fff; border-radius:16px; padding:40px 30px; margin-bottom:26px;
}
.hero h1{ color:#fff; font-size:30px; }
.hero p{ color:#e7f5ec; font-size:16px; max-width:640px; }
.btn{
    display:inline-block; background:var(--gold); color:var(--forest);
    font-weight:700; padding:12px 22px; border-radius:10px; border:none;
    cursor:pointer; font-size:15px; font-family:inherit;
}
.btn:hover{ background:#b8862a; text-decoration:none; }
.btn-outline{
    background:transparent; color:#fff; border:2px solid #fff;
    padding:10px 20px; border-radius:10px; font-weight:700;
}
.btn-secondary{
    background:var(--primary-soft); color:var(--primary-dark); border:1px solid var(--primary);
}

/* ===== ฟอร์ม ===== */
label{ display:block; font-weight:600; margin:14px 0 6px; font-size:14.5px; }
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], select, textarea{
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px;
    font-family:inherit; font-size:15px; background:#fff; color:var(--ink);
}
textarea{ min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.checkbox-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
@media (max-width:640px){ .checkbox-grid{ grid-template-columns:repeat(2,1fr); } }
.checkbox-item{ display:flex; align-items:center; gap:8px; font-weight:400; }
.checkbox-item input{ width:auto; }

/* ===== ผลลัพธ์ตัวเลข ===== */
.result-box{
    background:var(--primary-soft); border:1px solid var(--primary);
    border-radius:12px; padding:22px; margin-top:20px; text-align:center;
}
.result-box.danger{ background:var(--danger-soft); border-color:var(--danger); }
.result-number{ font-size:34px; font-weight:800; color:var(--primary-dark); font-family:'Noto Serif Thai', serif; }
.result-box.danger .result-number{ color:var(--danger); }
.result-label{ color:var(--muted); font-size:14px; }

/* ===== การ์ดอาชีพ ===== */
.occ-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:720px){ .occ-grid{ grid-template-columns:1fr; } }
.occ-card{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px;
}
.occ-card h3{ font-size:18px; margin-bottom:6px; }
.occ-tag{
    display:inline-block; background:var(--gold-soft); color:#8a660f;
    font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; margin:2px 4px 2px 0;
}
.occ-meta{ font-size:13.5px; color:var(--muted); margin:6px 0; }
.stars{ color:var(--gold); letter-spacing:1px; }

/* ===== ตัวกรอง ===== */
.filter-bar{
    display:flex; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:16px; margin-bottom:20px;
}
.filter-bar select, .filter-bar input{ width:auto; min-width:150px; }

/* ===== ตาราง ===== */
table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:14.5px; }
th{ color:var(--muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.3px; }

/* ===== progress bar (dashboard) ===== */
.progress-track{ background:var(--line); border-radius:999px; height:16px; overflow:hidden; }
.progress-fill{ background:var(--primary); height:100%; border-radius:999px; }

/* ===== ข้อความแจ้งเตือน ===== */
.alert{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14.5px; }
.alert-success{ background:var(--teal-soft); color:var(--teal); }
.alert-error{ background:var(--danger-soft); color:var(--danger); }
.alert-info{ background:var(--gold-soft); color:#7a5a10; }

/* ===== ท้ายเว็บ ===== */
.site-footer{ background:var(--forest); color:#cfe6d8; margin-top:40px; padding:34px 20px; }
.footer-inner{ max-width:1080px; margin:0 auto; text-align:center; }
.footer-brand{ font-family:'Noto Serif Thai', serif; font-size:20px; font-weight:800; color:#fff; margin-bottom:6px; }
.footer-nav{ display:flex; gap:16px; justify-content:center; margin:14px 0; flex-wrap:wrap; }
.footer-nav a{ color:#cfe6d8; font-size:14px; }
.footer-copy{ font-size:12.5px; color:#93ab9d; margin-top:10px; }

.step-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%; background:var(--gold);
    color:var(--forest); font-weight:800; margin-right:8px; font-size:14px;
}

/* ===== ปุ่มขึ้นด้านบน ===== */
#backToTop{
    position:fixed; bottom:22px; right:22px; width:46px; height:46px; border-radius:50%;
    background:var(--forest); color:#fff; border:none; font-size:20px; cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,0.25); opacity:0; visibility:hidden;
    transition:opacity .2s, visibility .2s, transform .2s; z-index:100;
}
#backToTop.show{ opacity:1; visibility:visible; }
#backToTop:hover{ transform:translateY(-3px); background:var(--primary); }

/* ===== แถบแชร์ ===== */
.share-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:20px 0;
}
.share-label{ font-weight:700; font-size:14px; color:var(--muted); margin-right:2px; }
.share-btn{
    display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px;
    font-size:14px; font-weight:700; border:1px solid var(--line); cursor:pointer; background:#fff; color:var(--ink);
}
.share-btn.fb{ background:#1877F2; color:#fff; border-color:#1877F2; }
.share-btn.line{ background:#06C755; color:#fff; border-color:#06C755; }
.share-btn.copy{ background:#fff; color:var(--ink); }
.share-btn.native{ background:var(--gold-soft); color:#7a5a10; border-color:var(--gold); }