:root {
    --primary: #014A85;
    --primary-dark: #002543;
    --secondary: #02B9FF;
    --accent: #FF6B1B;
    --dark: #333333;
    --training-navy: #071634;
    --training-blue: #0b2a5c;
    --training-cyan: #21d4fd;
    --training-purple: #8b5cf6;
    --training-gold: #facc15;
    --training-green: #34d399;
    --training-red: #fb7185;
    --training-card: rgba(12, 31, 69, 0.80);
    --training-card-solid: #0b1e43;
    --training-border: rgba(125, 211, 252, 0.24);
    --training-text: #ffffff;
    --training-muted: #d8e8ff;
    --training-soft: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Prompt", "Noto Sans Thai", sans-serif;
    line-height: 1.65;
    background: #061020;
    color: var(--training-text);
    overflow-x: hidden;
}

body:has(.training-page) .floating-messenger,
.training-page .floating-messenger,
.training-page a[href*="m.me/"],
.training-page .fb-customerchat,
.training-page #fb-root {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.training-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(33, 212, 253, 0.20), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(139, 92, 246, 0.20), transparent 24rem),
        linear-gradient(180deg, #071634 0%, #0b1430 55%, #061020 100%);
    color: var(--training-text);
    overflow-x: hidden;
}

.training-page a { color: inherit; }
.training-page strong { color: #ffffff; }

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
    background: rgba(0, 37, 67, 0.95);
    backdrop-filter: blur(10px);
}

.nav-container {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo img { max-height: 40px; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; padding: 0; margin: 0; }
.nav-links > li { position: relative; }
.nav-links a { color: #ffffff; text-decoration: none; font-weight: 500; transition: 0.3s; display: block; padding: 0.5rem 0; }
.nav-links a:hover { color: var(--secondary); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; min-width: 250px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; z-index: 1001; padding: 0; margin: 0; }
.nav-links li:hover .dropdown-menu { display: block; animation: fadeIn 0.3s ease; }
.dropdown-menu li { list-style: none; border-bottom: 1px solid #eeeeee; }
.dropdown-menu li:last-child { border-bottom: none; }
.dropdown-menu a { display: block; color: #333333; padding: 12px 20px; font-weight: 400; font-size: 0.95rem; }
.dropdown-menu a:hover { background: #f0f9ff; color: var(--primary); padding-left: 25px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.training-hero { padding: 120px 0 46px; }
.training-hero__inner,
.training-section { width: 85%; max-width: 1400px; margin: 0 auto; }
.training-hero__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.82fr); gap: 34px; align-items: center; }
.breadcrumb { margin-bottom: 14px; color: rgba(255,255,255,0.76); font-size: 0.92rem; }
.breadcrumb a { color: rgba(255,255,255,0.96); text-decoration: none; }
.eyebrow { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(250, 204, 21, 0.45); border-radius: 999px; color: var(--training-gold); background: rgba(250, 204, 21, 0.08); font-weight: 800; }
.training-hero h1 { margin: 18px 0 16px; max-width: 840px; color: #ffffff; font-size: clamp(2.35rem, 5vw, 4.45rem); line-height: 1.08; letter-spacing: -0.04em; }
.hero-lead { max-width: 820px; margin: 0; color: rgba(255,255,255,0.92); font-size: clamp(1.03rem, 2.4vw, 1.28rem); line-height: 1.85; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.hero-stats div,
.topic-grid article,
.check-card,
.timeline-grid article,
.ai-grid article,
.prompt-card,
.tool-columns > div,
.progress-panel,
.workshop-checklist label,
.worksheet-grid article,
.assessment-table,
.feature-box,
.ai-warning,
.lab-card,
.summary-card,
.decision-item,
.checkbox-chip,
.final-summary-box {
    background: var(--training-card);
    border: 1px solid var(--training-border);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}
.hero-stats div { min-height: 96px; padding: 16px; }
.hero-stats strong { display: block; color: var(--training-gold); font-size: 2rem; line-height: 1; }
.hero-stats span { display: block; margin-top: 8px; color: var(--training-muted); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.training-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 16px; border: 1px solid rgba(125, 211, 252, 0.38); border-radius: 10px; color: #ffffff !important; background: rgba(255, 255, 255, 0.08); text-decoration: none; font-weight: 800; cursor: pointer; font-family: inherit; }
.training-btn:hover { border-color: rgba(33, 212, 253, 0.72); background: rgba(33, 212, 253, 0.12); }
.training-btn--primary { border-color: rgba(250, 204, 21, 0.65); color: #08111f !important; background: linear-gradient(135deg, #fde047, #f59e0b); }
.training-btn--small { min-height: 38px; padding: 8px 12px; font-size: 0.9rem; }
.hero-poster { margin: 0; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.hero-poster img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; border-radius: 12px; background: #10264f; }
.hero-poster figcaption { padding: 10px 4px 2px; color: var(--training-muted); font-size: 0.9rem; text-align: center; }

.anchor-nav { position: sticky; top: 72px; z-index: 800; display: flex; gap: 8px; overflow-x: auto; padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: rgba(6, 16, 32, 0.92); border-block: 1px solid rgba(125, 211, 252, 0.14); backdrop-filter: blur(12px); }
.anchor-nav a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(125, 211, 252, 0.24); border-radius: 999px; color: #ffffff !important; text-decoration: none; font-weight: 800; font-size: 0.92rem; }
.anchor-nav a.is-active { color: #071634 !important; background: var(--training-cyan); }
.training-section { scroll-margin-top: 130px; padding: 58px 0; }
.section-heading { max-width: 940px; margin-bottom: 24px; }
.section-heading span { color: var(--training-cyan); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; }
.section-heading h2 { margin: 8px 0 12px; color: #ffffff; font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.25; }
.section-heading p { margin: 0; color: var(--training-muted); line-height: 1.85; font-size: 1.03rem; }
.topic-grid,
.outcome-grid,
.timeline-grid,
.ai-grid,
.prompt-grid,
.worksheet-grid { display: grid; gap: 14px; }
.topic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.topic-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.topic-grid article,
.ai-grid article,
.prompt-card,
.worksheet-grid article { padding: 20px; }
.topic-grid i,
.ai-grid i { color: var(--training-cyan); font-size: 1.55rem; }
.topic-grid h3,
.ai-grid h3,
.prompt-card h3,
.worksheet-grid h3,
.feature-box h3,
.ai-warning h2 { margin: 12px 0 8px; color: #ffffff; line-height: 1.35; }
.topic-grid p,
.ai-grid p,
.prompt-card p,
.worksheet-grid li,
.feature-box li,
.ai-warning p,
.timeline-grid p,
.timeline-grid small,
.check-card span { color: var(--training-muted); line-height: 1.75; }
.feature-box { margin-top: 18px; padding: 24px; background: linear-gradient(135deg, rgba(33, 212, 253, 0.12), rgba(139, 92, 246, 0.10)); }
.feature-box ul,
.worksheet-grid ul { margin: 0; padding-left: 20px; }
.feature-box ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }

.lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }
.lab-main { display: grid; gap: 18px; }
.lab-card { padding: 22px; }
.lab-card__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.lab-card__head h3 { margin: 0; color: #ffffff; font-size: 1.3rem; }
.lab-card__head p { margin: 4px 0 0; color: var(--training-muted); }
.step-badge { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; color: #071634; background: var(--training-gold); font-weight: 900; }
.field-grid { display: grid; gap: 14px; }
.field-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lab-card label,
.prompt-toolbar label,
.auth-card label,
.submission-modal label { display: grid; gap: 6px; color: #ffffff; font-weight: 700; }
.lab-card input,
.lab-card select,
.lab-card textarea,
.prompt-toolbar input,
.auth-card input,
.submission-modal input,
.submission-modal textarea,
.final-summary-box textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font: inherit;
    outline: none;
}
.lab-card .desired-gp-field {
    padding: 12px;
    border-radius: 12px;
    color: #071634;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    border: 1px solid rgba(250, 204, 21, 0.88);
    box-shadow: 0 14px 34px rgba(245, 158, 11, 0.18);
}
.lab-card .desired-gp-field input {
    color: #071634;
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(7, 22, 52, 0.18);
}
.investment-result-grid strong {
    font-size: 1.35rem;
}
.lab-card textarea,
.submission-modal textarea,
.final-summary-box textarea { resize: vertical; }
.lab-card select option,
.lab-card select optgroup {
    color: #071634;
    background: #ffffff;
}
.lab-card input:focus,
.lab-card select:focus,
.lab-card textarea:focus,
.prompt-toolbar input:focus,
.auth-card input:focus,
.submission-modal input:focus,
.submission-modal textarea:focus,
.final-summary-box textarea:focus { border-color: var(--training-cyan); box-shadow: 0 0 0 3px rgba(33, 212, 253, 0.12); }
.formula-box { display: grid; gap: 6px; margin-bottom: 16px; padding: 14px; border-radius: 12px; background: rgba(250, 204, 21, 0.10); border: 1px solid rgba(250, 204, 21, 0.28); color: #ffffff; }
.formula-box span { color: var(--training-muted); }
.finance-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.finance-result-grid div { padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(125,211,252,0.2); }
.finance-result-grid span,
.finance-result-grid small { display: block; color: var(--training-muted); }
.finance-result-grid strong { display: block; margin: 6px 0; color: var(--training-gold); font-size: 1.65rem; line-height: 1.1; }
.channel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr); gap: 18px; }
.channel-layout h4 { margin: 0 0 14px; color: var(--training-cyan); }
.business-map { width: 100%; height: 330px; margin: 12px 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(125,211,252,0.3); background: #0b1e43; }
.hint { display: block; color: var(--training-muted); margin-bottom: 8px; }
.online-channel-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.channel-option { display: flex !important; align-items: center; gap: 10px !important; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(125,211,252,0.2); cursor: pointer; }
.channel-option input { width: 20px; height: 20px; min-height: unset; accent-color: var(--training-cyan); }
.channel-option span { color: #ffffff; }
.lab-summary { position: relative; }
.summary-card { padding: 20px; }
.summary-card--sticky { position: sticky; top: 136px; }
.summary-label { color: var(--training-cyan); font-weight: 800; }
.summary-card h3 { margin: 8px 0 14px; color: #ffffff; font-size: 1.25rem; }
.gp-meter { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.12); margin-bottom: 14px; }
.gp-meter div { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--training-red), var(--training-gold), var(--training-green)); transition: width 0.25s ease; }
.summary-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(125,211,252,0.14); }
.summary-metric span { color: var(--training-muted); }
.summary-metric strong { color: var(--training-gold); }
.gate-stack { display: grid; gap: 8px; margin: 16px 0; }
.gate-item { padding: 10px 12px; border-radius: 10px; font-weight: 800; border: 1px solid rgba(255,255,255,0.12); }
.gate-wait { color: var(--training-muted); background: rgba(255,255,255,0.06); }
.gate-pass { color: #052e16; background: #86efac; }
.gate-caution { color: #422006; background: #fde68a; }
.gate-risk { color: #450a0a; background: #fca5a5; }

.prompt-toolbar { display: flex; gap: 12px; align-items: end; margin-bottom: 16px; flex-wrap: wrap; }
.prompt-toolbar label { min-width: min(100%, 520px); flex: 1; }
.prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prompt-card { padding: 18px; }
.prompt-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.prompt-card__top span { color: var(--training-gold); font-weight: 800; }
.copy-prompt { min-height: 38px; border: 0; border-radius: 8px; padding: 8px 12px; color: #071634; background: var(--training-cyan); font-weight: 800; cursor: pointer; font-family: inherit; }
.prompt-preview { max-height: 210px; overflow: auto; white-space: pre-wrap; margin: 0; padding: 12px; border-radius: 10px; color: #ffffff; background: rgba(0,0,0,0.18); border: 1px solid rgba(125,211,252,0.18); font-family: "Noto Sans Thai", sans-serif; font-size: 0.92rem; line-height: 1.7; }
.final-summary-box { margin-top: 18px; padding: 20px; }
.final-summary-box h3 { margin: 0 0 12px; color: #ffffff; }
.final-summary-box textarea { margin-bottom: 12px; }

.decision-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.decision-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; cursor: pointer; }
.decision-item input { margin-top: 5px; width: 20px; height: 20px; accent-color: var(--training-green); }
.decision-item span { color: #ffffff; font-weight: 700; }
.progress-panel { display: grid; gap: 12px; padding: 18px; margin-bottom: 16px; }
.progress-info { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.progress-info strong { color: var(--training-gold); font-size: 2rem; }
.progress-info span { color: var(--training-muted); }
.progress-track { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.progress-track div { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--training-cyan), var(--training-gold)); transition: width 0.25s ease; }

.timeline-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline-grid article { min-height: 265px; padding: 20px; display: flex; flex-direction: column; }
.timeline-grid span { color: var(--training-gold); font-weight: 800; }
.timeline-grid h3 { margin: 10px 0; color: #ffffff; }
.timeline-grid strong { margin-top: auto; color: var(--training-cyan); }
.total-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.total-summary div { padding: 18px; border-radius: 12px; background: linear-gradient(135deg, rgba(250, 204, 21, 0.16), rgba(33, 212, 253, 0.10)); border: 1px solid rgba(250, 204, 21, 0.26); }
.total-summary strong,
.total-summary span { display: block; }
.total-summary strong { color: var(--training-gold); font-size: 1.5rem; }
.total-summary span { color: var(--training-muted); }

.training-alerts { display: grid; gap: 10px; margin-bottom: 16px; }
.training-alert { padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.training-alert--success { color: #064e3b; background: #d1fae5; border: 1px solid #34d399; }
.training-alert--error { color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5; }
.training-userbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 6px; }
.training-userbar strong,
.training-userbar span { display: block; }
.training-userbar span { color: var(--training-muted); font-size: 0.92rem; }
.training-auth-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.auth-card { display: grid; gap: 12px; padding: 20px; background: var(--training-card); border: 1px solid var(--training-border); border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); }
.auth-card h3,
.auth-card p { margin: 0; color: #ffffff; }
.auth-card small { color: var(--training-muted); }
.workshop-checklist { display: grid; grid-template-columns: 1fr; gap: 12px; }
.checklist-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; min-height: 86px; padding: 16px; background: var(--training-card); border: 1px solid var(--training-border); border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); }
.checklist-item.is-done { border-color: rgba(74, 222, 128, 0.45); background: rgba(15, 58, 63, 0.74); }
.checklist-check input { width: 22px; height: 22px; accent-color: #22c55e; }
.checklist-body { min-width: 0; }
.checklist-body h3 { margin: 8px 0 4px; color: #ffffff; font-size: 1.08rem; }
.checklist-body p { margin: 0; color: var(--training-muted); line-height: 1.7; }
.day-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; color: #071634; background: var(--training-gold); font-size: 0.82rem; font-weight: 800; }
.submission-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; color: var(--training-muted); font-size: 0.9rem; }
.submission-meta a { color: var(--training-cyan); font-weight: 800; text-decoration: none; }
.status-submitted,
.status-reviewed,
.status-approved,
.status-rejected { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border-radius: 999px; color: #071634; font-weight: 800; }
.status-submitted { background: #93c5fd; }
.status-reviewed { background: #c4b5fd; }
.status-approved { background: #86efac; }
.status-rejected { background: #fca5a5; }
.submission-modal { position: fixed; inset: 0; z-index: 1400; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(2, 6, 23, 0.68); }
.submission-modal.is-open { display: flex; }
.submission-modal__dialog { position: relative; width: min(640px, 100%); max-height: min(760px, 92vh); overflow-y: auto; padding: 24px; border-radius: 14px; color: var(--training-text); background: #0b1e43; border: 1px solid var(--training-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.submission-modal__dialog form { display: grid; gap: 14px; }
.submission-modal__dialog h3 { margin: 0; color: #ffffff; }
.submission-modal__dialog small { color: var(--training-muted); }
.submission-modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #ffffff; background: rgba(255, 255, 255, 0.12); font-size: 1.5rem; cursor: pointer; }
.submission-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
.worksheet-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.worksheet-grid article { padding: 20px; }
.worksheet-grid ul { margin: 0; }
.print-btn { margin-bottom: 16px; }
footer { background: var(--primary-dark); color: rgba(255,255,255,0.84); padding: 3rem 5%; text-align: center; font-size: 0.9rem; }
footer p { margin: 0 0 0.5rem; }
footer strong { color: #ffffff; }
.footer-admin-link { color: rgba(255,255,255,0.25); font-size: 0.8rem; text-decoration: none; margin-top: 15px; display: inline-block; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 1200; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 12px 16px; border-radius: 10px; color: #071634; background: var(--training-gold); font-weight: 800; transition: 0.25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.save-plan-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
}
.save-plan-overlay.is-visible { display: flex; }
.save-plan-overlay__panel {
    width: min(360px, 100%);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    border-radius: 14px;
    color: #ffffff;
    background: #0b1e43;
    border: 1px solid rgba(125, 211, 252, 0.34);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
    text-align: center;
}
.save-plan-overlay__panel strong { font-size: 1.08rem; }
.save-plan-overlay__panel span { color: var(--training-muted); font-size: 0.92rem; }
.save-plan-overlay__spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--training-cyan);
    border-radius: 50%;
    animation: saveSpin 0.8s linear infinite;
}
@keyframes saveSpin {
    to { transform: rotate(360deg); }
}
.back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 1100; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #071634; background: var(--training-cyan); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); cursor: pointer; }
.back-to-top.is-visible { display: inline-flex; }

@media (max-width: 1180px) {
    .field-grid--four,
    .topic-grid,
    .topic-grid--four,
    .timeline-grid,
    .worksheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-layout,
    .channel-layout { grid-template-columns: 1fr; }
    .summary-card--sticky { position: static; }
}

@media (max-width: 1080px) {
    .nav-links { display: none; }
    .nav-container { justify-content: center; }
    .training-hero__inner { grid-template-columns: 1fr; }
    .hero-poster { max-width: 720px; }
    .prompt-grid,
    .training-auth-panel,
    .decision-checklist,
    .location-types-grid--compact { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .training-hero { padding-top: 104px; }
    .training-hero__inner,
    .training-section { width: min(100% - 24px, 1180px); }
    .hero-stats,
    .field-grid--two,
    .field-grid--four,
    .finance-result-grid,
    .topic-grid,
    .topic-grid--four,
    .timeline-grid,
    .worksheet-grid,
    .total-summary { grid-template-columns: 1fr; }
    .checklist-item { grid-template-columns: auto minmax(0, 1fr); }
    .checklist-actions { grid-column: 1 / -1; }
    .feature-box ul { grid-template-columns: 1fr; }
    .anchor-nav { top: 72px; padding-inline: 12px; }
    .training-section { padding: 42px 0; }
    .business-map { height: 260px; }
    .training-userbar { align-items: flex-start; flex-direction: column; }
}

@media print {
    body { background: #ffffff; color: #111827; }
    .navbar,
    .anchor-nav,
    .training-hero,
    footer,
    .toast,
    .back-to-top,
    .print-btn,
    .lab-section,
    #prompts,
    #gates,
    #submit { display: none !important; }
    .training-page { background: #ffffff; color: #111827; }
    .training-section { width: 100%; padding: 0; }
    .training-section:not(.printable) { display: none; }
    .section-heading h2,
    .worksheet-grid h3,
    .worksheet-grid li,
    .section-heading p { color: #111827; }
    .worksheet-grid { display: block; }
    .worksheet-grid article { break-inside: avoid; margin-bottom: 18px; border: 1px solid #d1d5db; box-shadow: none; background: #ffffff; }
}

/* ========= Phase 2B: AI Helpers + Upload Widgets ========= */

.field-with-helper {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.field-with-helper > input,
.field-with-helper > textarea,
.field-with-helper > select {
    flex: 1 1 auto;
    min-width: 200px;
}

.ai-helper-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.ai-helper-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}
.ai-helper-btn--block {
    display: flex;
    margin-top: 6px;
    width: fit-content;
}

.upload-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.upload-field > label {
    font-weight: 600;
    color: #1f2937;
}
.upload-preview {
    background: #f3f4f6;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}
.upload-preview.has-image {
    border-style: solid;
    border-color: #6366f1;
    background: #fff;
}
.upload-preview img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
}
.upload-empty {
    color: #6b7280;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.upload-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #4f46e5;
    color: #fff;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.upload-btn:hover { background: #4338ca; }
.upload-btn input[type=file] {
    display: none;
}
.upload-remove {
    font-size: 0.85rem;
    color: #b91c1c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* AI Helper Modal */
.ai-helper-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9500;       /* above item-builder-modal (9000) */
    padding: 16px;
}
.ai-helper-modal.is-open {
    display: flex;
}
.ai-helper-modal__dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    padding: 24px;
    position: relative;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.ai-helper-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #6b7280;
    cursor: pointer;
}
.ai-helper-modal__dialog h3 {
    margin: 0 0 4px;
    color: #1f2937;
}
.ai-helper-modal__hint {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 12px;
}
.ai-helper-modal__text {
    flex: 1;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 280px;
    color: #1f2937;
    background: #f9fafb;
}
.ai-helper-modal__actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ========= Phase 2C: Visibility fixes + Item builder ========= */

/* Fix dark labels on dark bg */
.upload-field > label,
.finance-field > label,
.upload-empty {
    color: #ffffff !important;
}
.upload-empty {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Group helper button with input as a unified card */
.field-with-helper {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
    padding: 10px;
    margin-top: 4px;
}
.field-with-helper > input,
.field-with-helper > textarea,
.field-with-helper > select {
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
}
.field-with-helper .ai-helper-btn {
    width: 100%;
    justify-content: center;
}
.field-with-helper .ai-helper-btn--block {
    margin-top: 0;
}

/* Group upload widget */
.upload-field {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
    padding: 14px;
}
.upload-field .hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* Finance field with builder button */
.finance-field {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
    padding: 12px 14px;
}
.finance-field > label {
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.field-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--training-cyan);
    cursor: help;
    font-size: 0.9rem;
}
.channel-cost-grid { margin-top: 14px; }
.finance-field__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.finance-field__row > input {
    flex: 1 1 160px;
    min-width: 140px;
}
.finance-builder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.finance-builder-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}
.count-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 800;
    margin-left: 2px;
}
.finance-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-top: 6px;
    display: block;
}

/* Item Builder Modal */
.item-builder-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 16px;
}
.item-builder-modal.is-open { display: flex; }

.item-builder-modal__dialog {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 880px;
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    position: relative;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
    color: #1f2937;
}
.item-builder-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #6b7280;
    cursor: pointer;
}
.item-builder-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-right: 30px;
}
.item-builder-modal__title {
    margin: 0;
    color: #1f2937;
    font-size: 1.4rem;
}
.item-builder-modal__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.item-builder-modal__empty {
    padding: 28px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
}

.item-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.item-row__fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    flex: 1;
}
.item-row__fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
}
.item-row__fields input,
.item-row__fields select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #1f2937;
    background: #ffffff;
    font: inherit;
    min-height: 38px;
}
.item-row__fields select option {
    color: #1f2937;
    background: #ffffff;
}
.item-row__del {
    width: 38px;
    height: 38px;
    background: #fee2e2;
    color: #b91c1c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.item-row__del:hover { background: #fecaca; }

.item-builder-modal__add {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}
.item-builder-modal__summary {
    margin: 14px 0;
    padding: 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    color: #78350f;
    font-size: 1rem;
}
.item-builder-modal__total {
    color: #1f2937;
    font-weight: 800;
    font-size: 1.2rem;
}
.item-builder-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Presentation box */
.presentation-box {
    margin-top: 24px;
    padding: 22px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(14, 165, 233, 0.10));
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 14px;
}
.presentation-box h3 {
    color: #ffffff;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.presentation-box > p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 14px;
}
.presentation-assets {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.presentation-assets h4 {
    color: #ffffff;
    margin: 0 0 10px;
    font-size: 0.95rem;
}
.asset-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: #ffffff;
}
.asset-row--empty {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.asset-label {
    font-weight: 700;
}
.asset-link {
    color: #7dd3fc;
    word-break: break-all;
    flex: 1;
    min-width: 200px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}
.presentation-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.presentation-tip {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

/* Mobile tweaks */
@media (max-width: 720px) {
    .item-row { flex-direction: column; align-items: stretch; }
    .item-row__fields { grid-template-columns: 1fr; }
    .item-row__del { align-self: flex-end; }
    .finance-field__row { flex-direction: column; align-items: stretch; }
}

/* ========= Phase 2D: Sales Assumption + Floating Actions ========= */

/* Sales Assumption section */
.sales-share-block,
.sales-conv-block {
    margin-top: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
}
.sales-share-block h4,
.sales-conv-block h4 {
    color: #ffffff;
    margin: 0 0 12px;
    font-size: 1rem;
}
.sales-share-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 12px;
    align-items: end;
}
.sales-share-grid label {
    display: grid;
    gap: 6px;
}
.sales-share-grid input[type=range] {
    height: 38px;
    accent-color: #06b6d4;
}

.sales-calc-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.sales-calc {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 10px;
    padding: 12px 14px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sales-calc span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
}
.sales-calc strong {
    font-size: 1.6rem;
    color: #ffffff;
    font-weight: 800;
}
.sales-calc small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

/* Floating Actions Panel */
.floating-actions {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    background: rgba(7, 22, 52, 0.94);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    min-width: 160px;
    user-select: none;
}
.floating-actions.is-dragging {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-color: rgba(250, 204, 21, 0.5);
}
.floating-actions__handle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    align-self: center;
    padding: 4px 8px;
    cursor: grab;
    font-size: 1.1rem;
}
.floating-actions__handle:active {
    cursor: grabbing;
    color: #fde047;
}
.floating-actions__btn {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    min-height: 42px;
    padding: 8px 14px;
    font-size: 0.95rem;
}
.floating-actions__btn--warn {
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #fecaca !important;
}
.floating-actions__btn--warn:hover {
    background: rgba(248, 113, 113, 0.15) !important;
}

@media (max-width: 720px) {
    .floating-actions {
        right: 8px;
        top: auto;
        bottom: 16px;
        transform: none;
        flex-direction: row;
        min-width: 0;
        padding: 8px;
    }
    .floating-actions__btn { font-size: 0.8rem; padding: 6px 10px; min-height: 38px; }
    .floating-actions__btn span { display: none; }   /* mobile: icon only */
    .sales-share-grid { grid-template-columns: 1fr; }
}

/* Fix upload-btn to single line (icon + text inline) */
.upload-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    min-height: 40px;
    border: none;
}
.upload-btn > i {
    flex-shrink: 0;
}
.upload-actions {
    align-items: stretch;
}

/* ========= Fix: cancel button visibility in light modals ========= */
.item-builder-modal__cancel,
.ai-helper-modal__cancel {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}
.item-builder-modal__cancel:hover,
.ai-helper-modal__cancel:hover {
    background: #e5e7eb !important;
}

/* ========= Phase 2E Round 1: Layout + Modals + Multi-select ========= */

/* Form full width — aside removed */
.lab-layout {
    display: block !important;
}
.lab-main {
    width: 100%;
}

/* Multi-select location types */
.multi-select-block {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
    padding: 14px;
    margin-top: 8px;
}
.multi-select-label {
    color: #ffffff;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}
.multi-select-label small {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
    margin-left: 6px;
}
.location-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.92rem;
    transition: background 0.15s, border-color 0.15s;
}
.checkbox-option:has(input:checked) {
    background: rgba(33, 212, 253, 0.18);
    border-color: rgba(33, 212, 253, 0.55);
}
.checkbox-option input { accent-color: #21d4fd; }

/* Channel links (LINE, Website) */
.channel-links {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
    flex-wrap: wrap;
}
.channel-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(33, 212, 253, 0.16);
    border: 1px solid rgba(33, 212, 253, 0.45);
    border-radius: 999px;
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.channel-link-btn:hover {
    background: rgba(33, 212, 253, 0.32);
}

/* Business Health Modal */
.health-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9200;
    padding: 16px;
    backdrop-filter: blur(6px);
}
.health-modal.is-open { display: flex; }
.health-modal__dialog {
    background: linear-gradient(180deg, #0b1e43, #071634);
    color: #ffffff;
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.health-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}
.health-modal__dialog .summary-label,
.health-modal__dialog .summary-metric span {
    color: rgba(255, 255, 255, 0.7);
}
.health-modal__dialog .summary-metric {
    color: #ffffff;
}
.health-modal__dialog h3 {
    color: #ffffff;
    margin: 6px 0 14px;
}

/* AI Tools FAB (left side) */
.ai-tools-fab {
    position: fixed;
    left: 16px;
    bottom: 22px;
    z-index: 750;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.45);
    font-family: inherit;
}
.ai-tools-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.6);
}

/* AI Tools Modal */
.ai-tools-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9300;
    padding: 16px;
    backdrop-filter: blur(6px);
}
.ai-tools-modal.is-open { display: flex; }
.ai-tools-modal__dialog {
    background: #ffffff;
    color: #1f2937;
    border-radius: 16px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    position: relative;
}
.ai-tools-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #6b7280;
    cursor: pointer;
}
.ai-tools-modal__dialog h3 {
    margin: 0 0 4px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-tools-modal__dialog h4 {
    margin: 18px 0 10px;
    color: #4f46e5;
    font-size: 1rem;
}
.ai-tools-modal__hint {
    color: #6b7280;
    margin: 0 0 12px;
    font-size: 0.9rem;
}
.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.ai-tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.15s;
}
.ai-tool-card:hover {
    background: #f0f9ff;
    border-color: #0ea5e9;
    transform: translateY(-1px);
}
.ai-tool-card strong {
    color: #1e293b;
    font-weight: 700;
}
.ai-tool-card small {
    color: #64748b;
    font-size: 0.78rem;
}
.ai-tool-card--feature {
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    border-color: #f59e0b;
}
.ai-tool-card--feature strong { color: #78350f; }
.ai-tool-card--feature small { color: #92400e; }

/* Floating Business Health button */
.floating-actions__btn--health {
    border-color: rgba(244, 114, 182, 0.5) !important;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(168, 85, 247, 0.2)) !important;
}
.floating-actions__btn--health:hover {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.35), rgba(168, 85, 247, 0.35)) !important;
}

/* Mobile: AI fab smaller */
@media (max-width: 720px) {
    .ai-tools-fab { padding: 10px 14px; font-size: 0.85rem; bottom: 80px; }
    .ai-tools-fab span { display: none; }
    .ai-tools-modal__dialog { padding: 18px; }
}

/* Copy Prompt button — dark on light modal */
.ai-helper-modal__copy {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.3);
}
.ai-helper-modal__copy:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
    transform: translateY(-1px);
}

/* ========= Phase 2F: Compact multi-select chips + helper inline button ========= */

.multi-select-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ai-helper-btn--inline {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.location-types-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.lab-card .checkbox-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.25;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lab-card .checkbox-chip input {
    flex: 0 0 auto;
    margin-top: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--training-green);
}
.lab-card .checkbox-chip span {
    min-width: 0;
    color: #ffffff;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checkbox-chip:has(input:checked) {
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 18px 60px rgba(34, 197, 94, 0.14);
}
#locationOtherInput {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.4);
    border-radius: 8px;
    color: #ffffff;
    padding: 8px 12px;
    width: 100%;
}

#districtList option {
    color: #1f2937;
}

/* ========= Phase 2H: Collaboration indicators ========= */

.collab-presence {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(34, 197, 94, 0.18));
    border: 1px solid rgba(52, 211, 153, 0.5);
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
}
.collab-presence small {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 0.72rem;
}
.collab-presence i { color: #34d399; }
.collab-presence--solo {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
}
.collab-presence--solo i { color: rgba(255, 255, 255, 0.5); }

/* Field highlight when synced from another device */
.collab-just-synced {
    box-shadow: 0 0 0 2px #34d399, 0 0 12px rgba(52, 211, 153, 0.6);
    transition: box-shadow 0.3s;
    border-radius: 12px;
}

/* Field highlight when another device is editing */
.collab-other-editing {
    position: relative;
    box-shadow: 0 0 0 2px #38bdf8;
    border-radius: 12px;
}
.collab-other-editing::after {
    content: '👤 อีกเครื่องกำลังพิมพ์';
    position: absolute;
    top: -10px;
    right: 6px;
    z-index: 5;
    padding: 2px 8px;
    background: #38bdf8;
    color: #051a2e;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 999px;
    pointer-events: none;
}

/* ========= Shared FABs (training + x10) ========= */

.login-fab {
    position: fixed;
    left: 16px;
    bottom: 78px;   /* sits ABOVE ai-tools-fab */
    z-index: 750;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    color: #08111f;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    font-weight: 800;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.42);
    transition: transform 0.15s, box-shadow 0.15s;
}
.login-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.55);
}
.login-fab--active {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.45);
}
.login-fab--active:hover {
    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.6);
}

/* Auth Modal (shared) */
.auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9400;
    padding: 16px;
    backdrop-filter: blur(6px);
}
.auth-modal.is-open { display: flex; }
.auth-modal__dialog {
    background: #ffffff;
    color: #1f2937;
    border-radius: 16px;
    max-width: 460px;
    width: 100%;
    padding: 24px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.auth-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #6b7280;
    cursor: pointer;
}
.auth-modal h3 {
    margin: 0 0 16px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}
.auth-modal h3 i { color: #4f46e5; }

.auth-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    margin-bottom: 14px;
}
.auth-user-card i { font-size: 2rem; color: #059669; }
.auth-user-card__name { font-weight: 800; font-size: 1.05rem; }
.auth-user-card__sub { font-size: 0.85rem; color: #047857; }

.auth-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}
.auth-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    color: #6b7280;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
}
.auth-tab.is-active {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.auth-form { display: none; flex-direction: column; gap: 10px; }
.auth-form.is-active { display: flex; }
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
}
.auth-form input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #1f2937;
    background: #ffffff;
    font: inherit;
    min-height: 40px;
}
.auth-form input:focus {
    outline: 2px solid #4f46e5;
    outline-offset: -1px;
    border-color: transparent;
}
.auth-error {
    padding: 10px 12px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 0;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 4px;
}
.auth-btn--primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
}
.auth-btn--primary:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
}
.auth-btn--danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    width: 100%;
}
.auth-btn--danger:hover { background: #fecaca; }

@media (max-width: 720px) {
    .login-fab { padding: 8px 14px; font-size: 0.82rem; bottom: 66px; }
    .login-fab span { display: none; }
}

/* ========= Login hint when not logged in (replaces inline auth forms) ========= */
.training-auth-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(245, 158, 11, 0.10));
    border: 1px dashed rgba(250, 204, 21, 0.55);
    border-radius: 14px;
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 8px 0 24px;
}
.training-auth-empty i {
    color: #fde047;
    font-size: 1.4rem;
    animation: hint-bounce 1.4s ease-in-out infinite;
}
.training-auth-empty strong { color: #fde047; }

@keyframes hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}