/* ═══════════════════════════════════════════════
   AstroHealing Thailand — Main Stylesheet
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ── "Elemental Hope" Palette ─────────────────────
       Primary:    #9CAF88  Healing Sage  (ธาตุลม)
       Secondary:  #A3B8C8  Serene Water  (ธาตุน้ำ)
       Accent CTA: #E8A87C  Sunset Amber  (ธาตุไฟ)
       Accent 2:   #D4C4B5  Earth Sand    (ธาตุดิน)
       Background: #F9F7F2  Soft Parchment
       Text:       #2F3632  Deep Ebony
    ────────────────────────────────────────────────── */
    --primary: #9CAF88;
    --primary-d: #7a9068;
    --primary-pale: rgba(156,175,136,.15);
    --accent: #A3B8C8;
    --accent-d: #8ca8bc;
    --accent-pale: rgba(163,184,200,.18);
    --cta: #E8A87C;
    --cta-d: #d4905e;
    --cta-pale: rgba(232,168,124,.15);
    --earth: #D4C4B5;
    --earth-d: #b8a898;
    --earth-pale: rgba(212,196,181,.18);
    --success: #9CAF88;
    --error: #c0392b;
    --bg: #F9F7F2;
    --card-bg: #ffffff;
    --border: #D4C4B5;
    --text: #2F3632;
    --muted: #6b7570;
    --radius: 10px;
    --shadow: 0 4px 18px rgba(156,175,136,.15);
    --shadow-md: 0 6px 28px rgba(47,54,50,.10);
    /* ── สมุฎฐานเจ้าเรือน — Jaoruen palette ─────────── */
    --jaoruen-bg: #f0f4f0; /* Healing Sage pale */
    --jaoruen-border: #9CAF88; /* Healing Sage */
    --jaoruen-step-bg: rgba(156,175,136,.15);
    --jaoruen-step-text: #3a5232;
    --jaoruen-op-bg: rgba(163,184,200,.25);
    --jaoruen-op-text: #2a5470;
    --jaoruen-cell-bg: linear-gradient(135deg, #9CAF88, #A3B8C8);
    --jaoruen-lunar-bg: #2F3632;
    --jaoruen-lunar-text: #e8f0e8;
    /* ── Dosha palette aligned to elements ──────────── */
    --dosha-pitta-bg: rgba(232,168,124,.15); /* Sunset Amber (ไฟ) */
    --dosha-pitta-bdr: #E8A87C;
    --dosha-pitta-text: #8b4a1a;
    --dosha-vata-bg: rgba(156,175,136,.15); /* Healing Sage (ลม) */
    --dosha-vata-bdr: #9CAF88;
    --dosha-vata-text: #3a5232;
    --dosha-sema-bg: rgba(163,184,200,.18); /* Serene Water (น้ำ) */
    --dosha-sema-bdr: #A3B8C8;
    --dosha-sema-text: #2a5470;
}

body {
    font-family: 'Sarabun', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: clip; /* ป้องกัน horizontal scroll ของ page แต่ไม่บล็อก overflow ของ child */
}

/* ── Navbar ─────────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    /* Healing Sage → Serene Water */
    color: #fff;
    padding: .75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    position: relative; /* จำเป็นสำหรับ dropdown mobile */
}

.nav-brand {
    font-size: 1.1rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-user {
    font-size: .9rem;
    opacity: .9;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    background: rgba(255,255,255,.22);
    padding: .3rem .85rem;
    border-radius: 20px;
    transition: background .2s;
}

    .nav-link:hover {
        background: rgba(255,255,255,.38);
    }

    .nav-link.active {
        background: rgba(255,255,255,.90);
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        color: var(--primary-d); /* #7a9068 — Healing Sage Dark */
    }

/* ── Hamburger button ────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile navbar ───────────────────────────── */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 10px;
        z-index: 999;
        background: linear-gradient(160deg, var(--primary), var(--accent));
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links .nav-link,
    .nav-links .nav-user {
        padding: 12px 20px;
        border-radius: 0 !important;
        font-size: 1rem;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .nav-links .nav-link:hover {
        background: rgba(255,255,255,.15) !important;
    }

    .nav-links .nav-link.active {
        background: rgba(255,255,255,.25) !important;
        color: #fff;
        font-weight: 700;
    }

    .nav-links .nav-user {
        color: rgba(255,255,255,.8);
        font-size: .9rem;
    }
}

/* ── Page / Card ─────────────────────────────── */
.page-container {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.form-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.form-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    /* Healing Sage → Serene Water */
    color: #fff;
    padding: 1.5rem 2rem;
}

    .form-header h1 {
        font-size: 1.4rem;
        margin-bottom: .25rem;
    }

    .form-header p {
        font-size: .9rem;
        opacity: .85;
    }

/* ── Alerts ─────────────────────────────────── */
.alert-success {
    background: rgba(156,175,136,.15);
    border-left: 4px solid var(--success);
    color: #3a5232;
    padding: .85rem 1.2rem;
    margin: 1.2rem 1.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.alert-error {
    background: rgba(192,57,43,.08);
    border-left: 4px solid var(--error);
    color: #8b2318;
    padding: .85rem 1.2rem;
    margin: 1.2rem 1.5rem;
    border-radius: 6px;
}

/* ── Form rows ───────────────────────────────── */
.form-row {
    display: flex;
    align-items: center;
    padding: .9rem 2rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    flex-wrap: wrap;
}

    .form-row.align-top {
        align-items: flex-start;
    }

.field-label {
    min-width: 180px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}

.field-value {
    flex: 1;
}

.note-num {
    color: var(--primary);
    font-weight: 700;
}

/* ── Inputs & selects ────────────────────────── */
.text-input, .sel, .coord-input, .search-input {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: .45rem .75rem;
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}

    .text-input:focus, .sel:focus, .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(156,175,136,.20);
    }

.text-input {
    width: 100%;
    max-width: 420px;
}

.sel-day {
    width: 70px;
}

.sel-month {
    width: 190px;
}

.sel-year {
    width: 140px;
}

.sel-time {
    width: 75px;
}

.sel-province {
    width: 200px;
}

.sel-district {
    width: 200px;
}

.coord-input {
    width: 110px;
    background: rgba(249,247,242,.8);
    color: var(--muted);
}

.coord-tz {
    width: 90px;
}

.datetime-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* กลุ่มวันเดือนปี */
.date-group {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* กลุ่มเวลา */
.time-group {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.time-colon {
    font-weight: 700;
    color: var(--muted);
    font-size: 1rem;
}

.time-sep, .unit-label {
    font-size: .85rem;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* ── Page container ── */
    .page-container {
        margin: .5rem auto;
        padding: 0 .4rem;
    }

    /* ── Form card ── */
    .form-card {
        border-radius: 8px;
    }

    /* ── Form rows ── */
    .form-row {
        flex-direction: column;
        align-items: flex-start;
        padding: .8rem .9rem;
        gap: .45rem;
    }

    .field-label {
        min-width: unset;
        font-size: .85rem;
        color: var(--muted);
    }

    .form-header {
        padding: .9rem 1rem;
    }

    .form-header h1 {
        font-size: 1.1rem;
    }

    .form-header p {
        font-size: .8rem;
    }

    .form-footer {
        background: none;
        border: none;
        box-shadow: none;
    }

    .section-divider {
        margin: 0 .9rem;
    }

    /* ── Inputs ── */
    .text-input {
        max-width: 100%;
        width: 100%;
        font-size: 1rem; /* ป้องกัน iOS zoom */
    }

    .sel {
        font-size: 1rem; /* ป้องกัน iOS zoom */
    }

    /* ── Date group: วัน + เดือน + ปี ── */
    .datetime-row {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
    }

    .date-group {
        display: grid;
        grid-template-columns: 56px 1fr 1fr;
        gap: .4rem;
        width: 100%;
    }

    .sel-day   { width: 100%; }
    .sel-month { width: 100%; }
    .sel-year  { width: 100%; }

    /* ── Time group: เวลา ชม:นาที น. ── */
    .time-group {
        display: flex;
        align-items: center;
        gap: .35rem;
        width: 100%;
    }

    .sel-time {
        flex: 1;
        width: auto;
    }

    .time-sep {
        font-size: .85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .unit-label {
        flex-shrink: 0;
    }

    /* ── BirthType select ── */
    select[name="BirthType"] {
        width: 100% !important;
        font-size: 1rem;
    }

    /* ── Location selects ── */
    .location-block {
        width: 100%;
    }

    .location-selects {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
    }

    .sel-province,
    .sel-district {
        width: 100%;
        max-width: 100%;
    }

    .map-btn {
        width: 100%;
        justify-content: center;
        padding: .55rem;
    }

    /* ── Coord row ── */
    .coord-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .35rem .4rem;
        align-items: center;
        width: 100%;
    }

    .coord-label {
        font-size: .78rem;
        text-align: right;
        white-space: nowrap;
    }

    .coord-input {
        width: 100%;
        min-width: 0;
    }

    .coord-tz {
        width: 100%;
    }

    .abroad-check {
        grid-column: 1 / -1;
        margin-top: .1rem;
    }

    /* ── Submit button ── */
    .btn-submit {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: .75rem;
    }
}
.location-block {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.location-selects {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.coord-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.coord-label {
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

.abroad-check {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    cursor: pointer;
}

/* ── Map button ─────────────────────────────── */
.map-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: .85rem;
    transition: background .2s, opacity .2s;
}

    .map-btn:hover {
        background: var(--accent-d);
    }

/* ── Divider ─────────────────────────────────── */
.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: 0 2rem;
}

/* ── Footer ──────────────────────────────────── */


.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.6rem;
    background: linear-gradient(135deg, var(--cta), var(--cta-d));
    /* Sunset Amber — ให้ความรู้สึก "มีความหวัง" */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(232,168,124,.35);
    transition: opacity .2s, transform .1s, box-shadow .2s;
}

    .btn-submit:hover {
        opacity: .93;
        transform: translateY(-2px);
        box-shadow: 0 6px 22px rgba(232,168,124,.50);
    }

    .btn-submit:active {
        transform: translateY(0);
    }

.form-footer {
    background: none;
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: flex-end;
}
.me-desc-box > div,
.me-desc-box > div p {
    min-width: 0;
    white-space: pre-line;
}
.btn-submit {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
}

    .btn-submit img {
        display: block;
    }

/* ── Modal overlay ───────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(47,54,50,.60); /* Deep Ebony tint */
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background: #fff;
    border-radius: var(--radius);
    width: min(680px,95vw);
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
}

    .modal-header h3 {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
    }

.modal-close {
    background: rgba(255,255,255,.22);
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover {
        background: rgba(255,255,255,.40);
    }

.modal-search {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
}

.search-input {
    flex: 1;
}

.search-btn {
    padding: .45rem 1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
}

    .search-btn:hover {
        background: var(--primary-d);
    }

.search-results {
    max-height: 160px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}

.search-result-item {
    padding: .55rem 1rem;
    cursor: pointer;
    font-size: .88rem;
    border-bottom: 1px solid #f0f0f0;
}

    .search-result-item:hover {
        background: var(--bg);
    }

.search-loading {
    padding: .55rem 1rem;
    color: var(--muted);
    font-size: .88rem;
}

.modal-coords {
    display: flex;
    gap: 1.5rem;
    padding: .6rem 1rem;
    background: rgba(163,184,200,.15); /* Serene Water 15% */
    border-top: 1px solid var(--border);
    font-size: .85rem;
}

    .modal-coords strong {
        color: var(--primary);
    }

.modal-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: .85rem 1rem;
    border-top: 1px solid var(--border);
}

.btn-cancel {
    padding: .5rem 1.1rem;
    background: var(--earth);
    color: var(--text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .2s;
}

    .btn-cancel:hover {
        opacity: .8;
    }

.btn-confirm {
    padding: .5rem 1.1rem;
    background: linear-gradient(135deg, var(--cta), var(--cta-d));
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(232,168,124,.35);
    transition: opacity .2s, transform .1s;
}

    .btn-confirm:hover {
        opacity: .92;
        transform: translateY(-1px);
    }

/* ── Login page ──────────────────────────────── */
.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 60px);
    padding: 3rem 1rem;
}

.login-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.login-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    padding: 1.75rem 2rem;
    text-align: center;
}

    .login-header h1 {
        font-size: 1.3rem;
        margin-bottom: .4rem;
    }

    .login-header p {
        font-size: .85rem;
        opacity: .85;
    }

.login-card form {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    .form-group label {
        font-weight: 600;
        font-size: .9rem;
    }

    .form-group .text-input {
        max-width: 100%;
        width: 100%;
    }

.remember-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.forgot-link {
    font-size: .85rem;
    color: var(--primary-d);
    text-decoration: none;
}

    .forgot-link:hover {
        text-decoration: underline;
    }

.text-danger {
    color: var(--error);
    font-size: .8rem;
}

/* ── Location block ──────────────────────────── */
.result-container {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
    animation: fadeIn .5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.result-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    /* Healing Sage → Serene Water */
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem 2rem;
}

    .result-header h2 {
        font-size: 1.2rem;
        margin-bottom: .3rem;
    }

    .result-header p {
        font-size: .88rem;
        opacity: .85;
    }

/* ── Element summary bar ── */
.element-summary {
    display: flex;
    gap: .75rem;
    padding: 1.2rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.element-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(249,247,242,.8);
    border-radius: 8px;
    padding: .55rem .9rem;
    border: 2px solid transparent;
    flex: 1;
    min-width: 180px;
    transition: border-color .2s;
}

.element-dominant {
    border-color: var(--primary);
    background: rgba(156,175,136,.12);
}

.element-icon {
    font-size: 1.3rem;
}

.element-name {
    font-weight: 700;
    font-size: .9rem;
    min-width: 65px;
}

.element-dots {
    display: flex;
    gap: 3px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--earth);
}

.dot-filled {
    background: var(--primary);
}

.element-status {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 12px;
}

.status-กำเริบ {
    background: rgba(192,57,43,.12);
    color: #8b2318;
}

.status-พอดี {
    background: rgba(156,175,136,.22);
    color: #3a5232;
}

.status-หย่อน {
    background: rgba(212,196,181,.35);
    color: #5a4535;
}

/* ── 4-card grid ── */
.samut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: var(--bg);
}

.samut-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 8px rgba(156,175,136,.10);
    border-top: 3px solid var(--primary);
}

.samut-card-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .65rem;
    color: var(--primary-d);
}

.samut-row {
    display: flex;
    font-size: .82rem;
    margin-bottom: .3rem;
    gap: .5rem;
}

.sl {
    color: var(--muted);
    min-width: 90px;
    flex-shrink: 0;
}

.sv {
    font-weight: 600;
}

.samut-desc {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .5rem;
    line-height: 1.5;
    border-top: 1px dashed var(--border);
    padding-top: .4rem;
}

/* ── Diagnosis box ── */
.diagnosis-box {
    background: #fff;
    margin: 0 1.5rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}

.diagnosis-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    background: rgba(249,247,242,.9); /* Soft Parchment */
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 1rem;
}

.dhatu-badge {
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
}
/* ธาตุดิน — Earth Sand */
.dhatu-ดิน {
    background: rgba(212,196,181,.35);
    color: #5a4535;
}
/* ธาตุน้ำ — Serene Water */
.dhatu-น้ำ {
    background: rgba(163,184,200,.30);
    color: #2a5470;
}
/* ธาตุลม — Healing Sage */
.dhatu-ลม {
    background: rgba(156,175,136,.25);
    color: #3a5232;
}
/* ธาตุไฟ — Sunset Amber */
.dhatu-ไฟ {
    background: rgba(232,168,124,.25);
    color: #8b4a1a;
}

.diag-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

@media(max-width:640px) {
    .diag-columns {
        grid-template-columns: 1fr;
    }
}

.diag-col {
    padding: 1rem 1.25rem;
}

    .diag-col:first-child {
        border-right: 1px solid var(--border);
    }

.diag-col-title {
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: .6rem;
    color: var(--text);
}

.diag-list {
    padding-left: 1.1rem;
    list-style: disc;
}

    .diag-list li {
        font-size: .83rem;
        line-height: 1.6;
        color: var(--text);
    }

.remedy-list li {
    color: var(--primary-d);
}

/* ── Summary ── */
.summary-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 1.5rem 1.5rem;
    background: rgba(212,196,181,.18); /* Earth Sand 18% — ความมั่นคง */
    border: 1px solid var(--earth);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.summary-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.summary-box p {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--text);
}

/* ── Result Tabs ──────────────────────────────── */
/* ── Result Tabs — Desktop: wrap, Mobile: scroll ── */
.result-tabs {
    display: flex;
    flex-wrap: wrap;          /* PC: tab ขึ้นบรรทัดใหม่เมื่อเต็ม */
    gap: .45rem;
    padding: .75rem 1.25rem;
    border-bottom: 2px solid var(--border);
    background: var(--card-bg);
}

.result-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    font-size: .85rem;
    font-family: 'Sarabun', 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.result-tab:hover {
    background: var(--primary-pale);
    color: var(--primary-d);
    border-color: var(--primary);
}

.result-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-d);
    box-shadow: 0 2px 8px rgba(156,175,136,.35);
}

.tab-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Tab panel wrapper */
.tab-panel-wrap {
    padding: 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ── Mobile: เปลี่ยนเป็น scroll แนวนอน ──────── */
@media (max-width: 700px) {
    .result-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .6rem;
        gap: .35rem;
        scrollbar-width: none;
    }
    .result-tabs::-webkit-scrollbar {
        display: none;
    }
    .result-tab {
        flex-shrink: 0;
        font-size: .8rem;
        padding: .4rem .7rem;
    }
}

/* ── ธาตุเจ้าเรือน (me-desc) ──────────────────── */
.me-section {
    padding: 1.2rem 1.5rem;
    background: var(--bg);
}

.me-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.me-title-icon { font-size: 1.3rem; flex-shrink: 0; }
.me-title      { font-size: 1.1rem; font-weight: 700; color: var(--primary-d); }
.me-subtitle   { font-size: .82rem; color: var(--muted); }

.me-cards-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.me-card {
    flex: 1;
    min-width: 100px;
    border-radius: var(--radius);
    padding: .75rem .9rem;
    text-align: center;
    border: 2px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}

.me-card-inactive {
    background: rgba(249,247,242,.8);
    border-color: var(--border);
    opacity: .6;
}

.me-card-active   { border-color: var(--primary); box-shadow: 0 2px 10px rgba(156,175,136,.25); }
.me-card-ไฟ.me-card-active  { background: rgba(232,168,124,.12); border-color: #E8A87C; }
.me-card-ลม.me-card-active  { background: rgba(156,175,136,.12); border-color: var(--primary); }
.me-card-น้ำ.me-card-active { background: rgba(163,184,200,.12); border-color: var(--accent); }
.me-card-ดิน.me-card-active { background: rgba(212,196,181,.18); border-color: var(--earth-d); }

.me-el-icon    { font-size: 1.6rem; margin-bottom: .25rem; }
.me-el-name    { font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }
.me-el-months  { font-size: .78rem; color: var(--muted); }
.me-el-period  { font-size: .72rem; color: var(--muted); }
.me-el-badge   {
    display: inline-block;
    margin-top: .4rem;
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 12px;
}

.me-desc-box {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border-radius: .75rem;
    padding: .8rem 1rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text);
}

/* ── ทุก <div> ลูกใน me-desc-box ขึ้นบรรทัดใหม่ตาม \n ── */
.me-desc-box > div {
    min-width: 0;
    white-space: pre-line;
}

.me-desc-icon  { font-size: 1.4rem; flex-shrink: 0; }
.me-desc-ไฟ   { background: rgba(232,100,60,.08);  border-left: 4px solid rgba(220,100,60,.5); }
.me-desc-ลม   { background: rgba(156,175,136,.1);  border-left: 4px solid var(--primary); }
.me-desc-น้ำ  { background: rgba(100,160,220,.08); border-left: 4px solid rgba(80,140,200,.5); }
.me-desc-ดิน  { background: rgba(160,130,80,.08);  border-left: 4px solid rgba(140,110,60,.5); }

@media (max-width: 640px) {
    .me-section { padding: .9rem .9rem; }
    .me-cards-row { gap: .45rem; }
    .me-card { min-width: 70px; padding: .55rem .5rem; }
    .me-el-icon { font-size: 1.3rem; }
    .me-el-name { font-size: .82rem; }
    .me-desc-box { font-size: .83rem; }
}