/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root {
    --bg-primary: #080c14;
    --bg-secondary: #0f172a;
    --bg-card: rgba(22, 28, 45, 0.6);
    --border-color: rgba(255, 255, 255, 0.06);
    --border-focus: rgba(139, 92, 246, 0.5);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #74839a;
    
    --color-asset: #10b981;
    --color-asset-glow: rgba(16, 185, 129, 0.15);
    --color-liability: #f43f5e;
    --color-liability-glow: rgba(244, 63, 94, 0.15);
    --color-networth: #8b5cf6;
    --color-networth-glow: rgba(139, 92, 246, 0.15);
    --color-info: #3b82f6;
    --color-info-glow: rgba(59, 130, 246, 0.15);
    --color-warning: #f59e0b;
    --color-warning-glow: rgba(245, 158, 11, 0.15);

    /* gradient แบรนด์ทางการ (ม่วง --color-networth → ฟ้า --color-info) — อ้างผ่าน var
       เพื่อให้ธีมสว่างได้คู่สีเข้มที่ผ่าน contrast อัตโนมัติ */
    --gradient-brand: linear-gradient(135deg, var(--color-networth) 0%, var(--color-info) 100%);

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 70px;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Fluid typography (v50) — เฉพาะชั้น display (≥2rem หรือที่เคยหักขั้นด้วย breakpoint)
       สเกลไล่ตาม viewport: anchor 375→1200px (view-title ใช้ 600→1200 ตามขั้นเดิม)
       ค่า max = ขนาด desktop เดิมเป๊ะ · min ≥1rem เสมอ (ไม่ชนกฎพื้น 12px)
       Body/Title/Label ต่ำกว่านี้คงที่ตามเดิม — ไม่ fluid */
    --fs-fluid-score-lg: clamp(2.75rem, 2.18rem + 2.42vw, 4rem);
    --fs-fluid-score: clamp(2.5rem, 2.05rem + 1.94vw, 3.5rem);
    --fs-fluid-display: clamp(2.25rem, 1.91rem + 1.45vw, 3rem);
    --fs-fluid-headline: clamp(1.6rem, 1.3rem + 1.26vw, 2.25rem);
    --fs-fluid-title-lg: clamp(1.4rem, 1.13rem + 1.16vw, 2rem);
    --fs-fluid-view-title: clamp(1rem, 0.5rem + 1.33vw, 1.5rem);

    --bg-header: rgba(8, 12, 20, 0.8);
    --bg-item: rgba(255, 255, 255, 0.02);
    --bg-item-hover: rgba(255, 255, 255, 0.04);
    --bg-input: rgba(255, 255, 255, 0.03);
    --bg-input-focus: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(5, 8, 16, 0.85);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --bg-table-hover: rgba(255, 255, 255, 0.01);
}

body.light-theme {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.8);
    --border-color: rgba(15, 23, 42, 0.08);
    --border-focus: rgba(139, 92, 246, 0.4);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* สี semantic เวอร์ชันพื้นสว่าง — ต้องผ่าน WCAG AA เมื่อเป็นตัวอักษร (≥4.5:1 บนขาว)
       ค่าสดของธีมมืดอยู่ที่ :root · chart ใน app.js ใช้ hex ตรงจึงคงสีสดเดิม */
    --color-asset: #047857;
    --color-liability: #be123c;
    --color-networth: #7c3aed;
    --color-info: #2563eb;
    --color-warning: #b45309;
    /* ต้องประกาศซ้ำที่นี่ — var() ใน custom property ถูก resolve ณ จุดประกาศ (:root)
       ถ้าไม่ประกาศซ้ำ ธีมสว่างจะได้ gradient ค่ามืดจาก html แทนค่าบน body */
    --gradient-brand: linear-gradient(135deg, var(--color-networth) 0%, var(--color-info) 100%);

    --bg-header: rgba(248, 250, 252, 0.8);
    --bg-item: rgba(15, 23, 42, 0.02);
    --bg-item-hover: rgba(15, 23, 42, 0.04);
    --bg-input: rgba(15, 23, 42, 0.02);
    --bg-input-focus: rgba(15, 23, 42, 0.04);
    --bg-overlay: rgba(15, 23, 42, 0.45);
    --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --bg-table-hover: rgba(15, 23, 42, 0.01);
    
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.06);
    
    --color-asset-glow: rgba(16, 185, 129, 0.1);
    --color-liability-glow: rgba(244, 63, 94, 0.1);
    --color-networth-glow: rgba(139, 92, 246, 0.1);
    --color-info-glow: rgba(59, 130, 246, 0.1);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Glassmorphism utility */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal);
}

.glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Layout Container */
.app-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: transform var(--transition-normal), width var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}

.brand-section {
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-logo i {
    font-size: 1.5rem;
    color: var(--color-networth);
    background: unset;
    -webkit-text-fill-color: initial;
}

.nav-links {
    list-style: none;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-item a:hover {
    color: var(--text-primary);
    background-color: var(--bg-item-hover);
}

.nav-item.active a {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08);
}

body.light-theme .nav-item.active a {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.03) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.nav-item a i {
    font-size: 1.1rem;
    width: 24px;
    display: flex;
    justify-content: center;
}

.sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--sidebar-width));
    transition: margin-left var(--transition-normal), width var(--transition-normal);
}

/* Header */
header {
    height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: sticky;
    top: 0;
    background-color: var(--bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 90;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.header-title h1 {
    font-size: var(--fs-fluid-view-title);
    font-weight: 600;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.header-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.current-date-time {
    margin-right: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

#themeToggleBtn {
    margin-right: 8px;
}

/* Primary Content Wrap */
.content-body {
    padding: 40px;
    flex-grow: 1;
}

.view-section {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.view-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary {
    /* v44: คู่เข้มของ gradient แบรนด์ — ขาวบนปุ่มผ่าน AA (#7c3aed 5.7:1 · #2563eb 5.2:1) ทั้งสองธีม */
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.btn-secondary {
    background-color: var(--bg-item-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--bg-input-focus);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: var(--bg-item);
}

body.light-theme .btn-outline:hover {
    border-color: rgba(15, 23, 42, 0.2);
}

.btn-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-asset);
    border-color: rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    background-color: var(--color-asset);
    color: #ffffff;
}

.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
}

#themeToggleBtn i {
    font-size: 1.1rem;
    transition: transform var(--transition-normal);
}

#themeToggleBtn:hover i {
    transform: rotate(30deg);
}

/* Card Grids & Dashboard Layout */
.source-sync-banner,
.source-sync-pill {
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.10);
    color: var(--color-info);
}

.source-sync-banner[hidden],
.source-sync-pill[hidden] {
    display: none;
}

.source-sync-banner {
    display: flex;
    max-width: 1180px;
    margin: 0 auto 18px;
    padding: 12px 14px;
    border-radius: 12px;
}

.source-sync-banner i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.14);
    flex: 0 0 auto;
}

.source-sync-banner strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.source-sync-banner span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 2px;
}

.source-sync-pill {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ป้าย "ข้อมูลตัวอย่าง" — โทนเตือนเหลือง แยกจากป้าย starter (ฟ้า) */
.source-sync-banner.demo-data-notice,
.source-sync-pill.demo-data-notice {
    border-color: rgba(245, 158, 11, 0.30);
    background: var(--color-warning-glow);
    color: var(--color-warning);
}

.source-sync-banner.demo-data-notice i {
    background: rgba(245, 158, 11, 0.16);
}

.source-sync-pill.demo-data-notice {
    white-space: normal;
    text-align: left;
}

.starter-source-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    padding: 28px 18px;
    color: var(--text-secondary);
}

.starter-source-empty > i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.12);
}

.starter-source-empty strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.starter-source-empty p {
    max-width: 520px;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.9rem;
}

.starter-source-empty div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.info-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}

.info-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
    z-index: 1;
}

.info-card.networth::after { background-color: var(--color-networth); }
.info-card.cashflow::after { background-color: var(--color-info); }
.info-card.assets::after { background-color: var(--color-asset); }
.info-card.liabilities::after { background-color: var(--color-liability); }

.card-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.card-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.networth .card-icon-wrap {
    background-color: var(--color-networth-glow);
    color: var(--color-networth);
}
.cashflow .card-icon-wrap {
    background-color: var(--color-info-glow);
    color: var(--color-info);
}
.assets .card-icon-wrap {
    background-color: var(--color-asset-glow);
    color: var(--color-asset);
}
.liabilities .card-icon-wrap {
    background-color: var(--color-liability-glow);
    color: var(--color-liability);
}

.card-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 12px;
    letter-spacing: -0.5px;
}

.card-footer-info {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.trend-up { color: var(--color-asset); }
.trend-down { color: var(--color-liability); }

/* Dashboard Visualization Grid */
.vis-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.chart-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

.chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 280px;
}

.chart-empty-state[hidden] {
    display: none;
}

.chart-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}

.chart-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--color-info-glow);
    color: var(--color-info);
    font-size: 1.1rem;
}

.chart-empty-state strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.chart-empty-state p {
    max-width: 280px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Recent Activity Panel */
.recent-activity-panel {
    padding: 24px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Lists and Tables */
.item-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background-color: var(--bg-item);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-normal);
}

.list-item:hover {
    background-color: var(--bg-item-hover);
    transform: translateX(4px);
}

.item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background-color: var(--bg-item-hover);
    color: var(--text-secondary);
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.item-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.item-amount {
    font-weight: 700;
    font-size: 1rem;
}

.amount-income { color: var(--color-asset); }
.amount-expense { color: var(--color-liability); }
.amount-neutral { color: var(--text-primary); }

.item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.list-item:hover .item-actions {
    opacity: 1;
}

.btn-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-action:hover {
    background-color: var(--bg-item-hover);
    color: var(--text-primary);
}

.btn-action.delete:hover {
    background-color: rgba(244, 63, 94, 0.1);
    color: var(--color-liability);
    border-color: rgba(244, 63, 94, 0.2);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-overlay);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* v45: visibility กัน keyboard/screen reader เข้าถึงปุ่มใน modal ที่ปิดอยู่
       — ตอนปิด delay ให้ fade จบก่อนค่อย hidden (ตอนเปิดดู .active: flip ทันทีให้ focus เข้าได้) */
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility 0s linear var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: opacity var(--transition-normal), visibility 0s;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    padding: 32px;
    border-radius: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-modal);
    transform: translateY(20px);
    transition: transform var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    /* v43: กล่องแตะขั้นต่ำ 36px */
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color var(--transition-fast);
}

.close-modal:hover {
    color: var(--text-primary);
}

/* Form Controls */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-normal);
}

.form-control:focus {
    outline: none;
    border-color: var(--border-focus);
    background-color: var(--bg-input-focus);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Custom Segmented Control */
.segmented-control {
    display: flex;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
    margin-bottom: 20px;
}

.segment-btn {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    border: none;
    background: transparent;
}

.segment-btn:hover {
    color: var(--text-primary);
}

.segment-btn.active[data-type="income"] {
    background-color: var(--color-asset);
    color: #ffffff;
}

.segment-btn.active[data-type="expense"] {
    background-color: var(--color-liability);
    color: #ffffff;
}

.segment-btn.active[data-type="asset"] {
    background-color: var(--color-asset);
    color: #ffffff;
}

.segment-btn.active[data-type="liability"] {
    background-color: var(--color-liability);
    color: #ffffff;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

/* History and Filtering layout */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Transactions Table View */
.table-container {
    overflow-x: auto;
    width: 100%;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.custom-table th {
    padding: 16px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-table td {
    padding: 16px 20px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.custom-table tr:last-child td {
    border-bottom: none;
}

.custom-table tr {
    transition: background-color var(--transition-fast);
}

.custom-table tbody tr:hover {
    background-color: var(--bg-table-hover);
}

/* Asset / Liability Split Layout */
.double-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.panel-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.panel-header-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 250px;
    animation: slideIn var(--transition-fast) forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-success i { color: var(--color-asset); }
.toast-error i { color: var(--color-liability); }
.toast-info i { color: var(--color-info); }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .double-panel-grid {
        grid-template-columns: 1fr;
    }
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
        width: 100%;
    }
    header {
        padding: 0 20px;
        gap: 12px;
    }
    .header-title {
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-actions {
        gap: 8px;
    }
    .current-date-time {
        display: none;
    }
    #themeToggleBtn {
        margin-right: 0;
    }
    .content-body {
        padding: 20px;
    }
    .menu-toggle {
        display: block !important;
    }
}

@media (max-width: 600px) {
    header {
        padding: 0 12px;
        gap: 6px;
    }
    .header-title {
        gap: 4px;
    }
    .header-actions {
        gap: 5px;
    }
    .menu-toggle,
    header .btn-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        display: grid;
        place-items: center;
        border-radius: 10px;
    }
    .menu-toggle {
        display: grid !important;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }
}

.menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    font-size: 1.25rem;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
}

/* Category Badge Styling */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* v43: สีตัวอักษร badge ชี้ผ่าน semantic var เท่าที่ map ได้ — ธีมสว่างได้ค่าเข้มผ่าน AA อัตโนมัติ
   (พื้นหลัง tint คงเฉด hue สดเดิม) · สีนอกชุด token (ชมพู/ฟ้าน้ำทะเล/เหลืองทอง) มี override ในบล็อก light ด้านล่าง */
.badge-food { background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge-travel { background-color: rgba(59, 130, 246, 0.15); color: var(--color-info); }
.badge-bills { background-color: rgba(244, 63, 94, 0.15); color: var(--color-liability); }
.badge-shopping { background-color: rgba(236, 72, 153, 0.15); color: #ec4899; }
.badge-entertainment { background-color: rgba(139, 92, 246, 0.15); color: var(--color-networth); }
.badge-health { background-color: rgba(16, 185, 129, 0.15); color: var(--color-asset); }
.badge-salary { background-color: rgba(16, 185, 129, 0.15); color: var(--color-asset); }
.badge-investment { background-color: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.badge-bonus { background-color: rgba(234, 179, 8, 0.15); color: #eab308; }
.badge-other { background-color: rgba(100, 116, 139, 0.15); color: #64748b; }

.badge-cash { background-color: rgba(16, 185, 129, 0.15); color: var(--color-asset); }
.badge-bank { background-color: rgba(59, 130, 246, 0.15); color: var(--color-info); }
.badge-loan { background-color: rgba(244, 63, 94, 0.15); color: var(--color-liability); }
.badge-card { background-color: rgba(236, 72, 153, 0.15); color: #ec4899; }
.badge-realestate { background-color: rgba(139, 92, 246, 0.15); color: var(--color-networth); }
.badge-warning { background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge-danger { background-color: rgba(244, 63, 94, 0.15); color: var(--color-liability); }

body.light-theme .badge-shopping, body.light-theme .badge-card { color: #be185d; }
body.light-theme .badge-investment { color: #0369a1; }
body.light-theme .badge-bonus { color: #a16207; }

/* Financial Health Checkup Wizard Styles */
.health-wizard-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.wizard-step-indicator {
    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.wizard-step-indicator.active {
    color: var(--color-info) !important;
}

.wizard-step-indicator.active .step-num {
    background-color: var(--color-info) !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px var(--color-info-glow);
}

.wizard-step-pane {
    animation: fadeIn var(--transition-normal);
}

.habit-options-grid label {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    border: 1px solid var(--border-color);
}

.habit-options-grid label:hover {
    border-color: var(--color-info) !important;
    background-color: var(--bg-item-hover) !important;
}

.habit-options-grid label:has(input[type="radio"]:checked) {
    border-color: var(--color-info) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    box-shadow: var(--shadow-sm);
}

#healthRecommendations .rec-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--bg-item);
    border-left: 4px solid var(--color-info);
}

#healthRecommendations .rec-item.warning {
    border-left-color: var(--color-liability);
}

#healthRecommendations .rec-item.success {
    border-left-color: var(--color-asset);
}

/* Responsive Overrides for Assets & Liabilities and Cash Flow views */
@media (max-width: 900px) {
    #alChartsSection, #cfChartsSection {
        grid-template-columns: 1fr !important;
    }
    #alRatiosGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    #alRatiosGrid {
        grid-template-columns: 1fr !important;
    }
}

/* Print Stylesheet for Financial Reports */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .sidebar, header, .filter-bar, .panel-header-btn button, .item-actions, .toast-container, .modal-overlay, #themeToggleBtn, .no-print {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .content-body {
        padding: 0 !important;
    }
    /* Hide all views except the active one during print */
    .view-section {
        display: none !important;
    }
    .view-section.active {
        display: block !important;
    }
    .glass-panel {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        color: #000000 !important;
        page-break-inside: avoid;
    }
    /* Ensure texts stand out in black-and-white print */
    .card-value, #alNetWorthVal, #alTotalAssetsVal, #alTotalLiabilitiesVal {
        color: #000000 !important;
    }
    .progress-bar-container {
        border: 1px solid #cbd5e1 !important;
        background: #f1f5f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .progress-bar-container div {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    canvas {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   LANDING PAGE STYLES
   ========================================================================== */
body.landing-mode .sidebar {
    transform: translateX(-100%) !important;
    pointer-events: none;
}

body.landing-mode .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

body.landing-mode header {
    display: none !important;
}

body.landing-mode .content-body {
    padding: 0 !important;
}

/* Landing Navbar */
.landing-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background-color: var(--bg-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.landing-nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-logo i {
    font-size: 1.5rem;
    color: var(--color-networth);
    background: unset;
    -webkit-text-fill-color: initial;
}

.landing-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
}

.landing-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 0;
    position: relative;
    transition: color var(--transition-fast);
}

.landing-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-networth), var(--color-info));
    transition: width var(--transition-fast);
}

.landing-nav-link:hover::after,
.landing-nav-link.active-link::after {
    width: 100%;
}

.landing-nav-link:hover,
.landing-nav-link.active-link {
    color: var(--text-primary);
}

.landing-nav-links .nav-cta {
    padding: 8px 18px;
    font-size: 0.85rem;
    border-radius: 8px;
}

.landing-theme-toggle {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-item);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.landing-theme-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-item-hover);
    border-color: var(--border-focus);
}

.landing-theme-toggle i {
    font-size: 1.05rem;
    transition: transform var(--transition-normal);
}

.landing-theme-toggle:hover i {
    transform: rotate(30deg);
}

/* Hero Section */
.landing-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    min-height: calc(100vh - 80px);
    align-items: center;
    padding: 140px 24px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.hero-title {
    font-size: var(--fs-fluid-display);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.hero-title .highlight-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-actions .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-lbl {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-card {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), var(--shadow-glow);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .preview-card {
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), var(--shadow-glow);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.preview-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.preview-dot.red { background-color: #f43f5e; }
.preview-dot.yellow { background-color: #f59e0b; }
.preview-dot.green { background-color: #10b981; }

.preview-title {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.preview-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.preview-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preview-stat .lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.preview-stat .val {
    font-size: 1.1rem;
    font-weight: 700;
}

.preview-stat .text-purple { color: var(--color-networth); }
.preview-stat .text-green { color: var(--color-asset); }

.preview-chart-wrap {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    height: 120px;
    display: flex;
    align-items: flex-end;
}

.mock-bar-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    gap: 12px;
}

.mock-bar-chart .bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    animation: barGrow 1.5s ease-out forwards;
}

.mock-bar-chart .bar.green {
    background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.1) 100%);
}

.mock-bar-chart .bar.purple {
    background: linear-gradient(180deg, #8b5cf6 0%, rgba(139, 92, 246, 0.1) 100%);
}

@keyframes barGrow {
    from { height: 0; }
}

.preview-footer-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

/* Sections Common */
.landing-section {
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    scroll-margin-top: 80px;
}

.landing-section.bg-darker {
    background-color: var(--bg-secondary);
    border-radius: 32px;
    padding: 80px 48px;
    border: 1px solid var(--border-color);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-tag {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* v43: ตัวเล็ก 0.8rem ใช้ gradient แล้ว contrast ตก AA — เปลี่ยนเป็นโซลิดม่วงต่อธีม */
    color: #a78bfa;
    display: inline-block;
    margin-bottom: 12px;
}

body.light-theme .section-tag {
    color: var(--color-networth);
}

.section-title {
    font-size: var(--fs-fluid-headline);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.feature-card {
    padding: 36px;
    border-radius: 20px;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-glow);
}

.feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
}

/* สีไอคอนฟีเจอร์ผูก token ต่อธีม (เดิม color ขาวเดี่ยว + bg-* ไม่มีนิยาม = ล่องหนบนธีมสว่าง) */
.feature-icon.bg-purple { background: var(--color-networth-glow); color: var(--color-networth); }
.feature-icon.bg-green { background: var(--color-asset-glow); color: var(--color-asset); }
.feature-icon.bg-blue { background: var(--color-info-glow); color: var(--color-info); }
.feature-icon.bg-red { background: var(--color-liability-glow); color: var(--color-liability); }

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.feature-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-networth);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap var(--transition-fast);
}

.feature-card:hover .feature-link {
    gap: 12px;
}

/* Principles */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.principle-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    padding-left: 20px;
}

.principle-number {
    font-size: var(--fs-fluid-display);
    font-weight: 800;
    line-height: 1;
    opacity: 0.15;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: -10px;
}

.principle-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.principle-item p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Products */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card {
    padding: 32px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.product-badge {
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    color: #ffffff;
}

.product-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

.product-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Info Split Grid (Planners & Training) */
.info-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.info-text-card {
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.info-text-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-text-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.info-text-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-text-card ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.info-text-card button {
    align-self: flex-start;
    margin-top: 10px;
}

/* Contact Us Form */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
}

.contact-info {
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.contact-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.contact-info p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-detail-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-detail-item i {
    font-size: 1.25rem;
    margin-top: 4px;
}

.contact-detail-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-detail-item span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.contact-detail-item strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.contact-form-wrap {
    padding: 40px;
    border-radius: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group-landing {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-group-landing label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group-landing input,
.form-group-landing textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    color: var(--text-primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.form-group-landing input:focus,
.form-group-landing textarea:focus {
    border-color: var(--border-focus);
    background-color: var(--bg-input-focus);
    outline: none;
}

/* Landing Footer */
.landing-footer {
    border-top: 1px solid var(--border-color);
    padding: 40px 24px;
    background-color: var(--bg-primary);
    width: 100%;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* Landing Responsive Adjustments */
@media (max-width: 900px) {
    .landing-navbar {
        height: 70px;
    }
    .landing-menu-toggle {
        display: block;
    }
    .landing-nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        transform: translateY(-150%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition-normal), opacity var(--transition-normal);
        box-shadow: var(--shadow-lg);
    }
    .landing-nav-links.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    .landing-hero {
        grid-template-columns: 1fr;
        padding-top: 110px;
        padding-bottom: 50px;
        text-align: center;
        gap: 36px;
    }
    .hero-content {
        align-items: center;
        text-align: center;
    }
    .hero-subtitle {
        max-width: 100%;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-stats {
        justify-content: center;
        gap: 24px;
    }
    .features-grid,
    .principles-grid,
    .products-grid,
    .info-split-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .landing-section.bg-darker {
        padding: 40px 24px;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* Small Button Styling for Sidebar footer */
.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    gap: 4px !important;
}

/* Inline Balance Sheet Editing Styling */
.al-row {
    transition: background-color var(--transition-fast);
    border-radius: 8px;
}
.al-row:hover {
    background-color: var(--bg-item-hover);
}

.inline-name-input {
    outline: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.inline-name-input:focus {
    border-color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.inline-value-input {
    outline: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.inline-value-input:focus {
    border-color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.pct-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pct-dots {
    flex-grow: 1;
    border-bottom: 1px dotted var(--border-color);
    margin-bottom: 2px;
}

/* Light Theme overrides for input fields */
body.light-theme .inline-name-input {
    color: #1e293b !important;
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .inline-value-input {
    color: #1e293b !important;
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .inline-name-input:focus,
body.light-theme .inline-value-input:focus {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
}
body.light-theme .pct-value {
    color: #1e293b !important;
}




/* ============================================================
   KNOWLEDGE / LEARN VIEW (merged from learn/) — scoped #view-learn
   ใช้ตัวแปรสี/ธีมเดิมของแอป จึงปรับ light/dark ตามแอปอัตโนมัติ
   ============================================================ */
#view-learn{
  --kb-warn:#f59e0b; --kb-warn-glow:rgba(245,158,11,0.15);
  --kb-bstrong:rgba(255,255,255,0.1);
}
body.light-theme #view-learn{
  --kb-warn:#b45309;
  --kb-warn-glow:rgba(245,158,11,0.10);
  --kb-bstrong:rgba(15,23,42,0.14);
}
#view-learn .kb-root{max-width:980px;margin:0 auto;padding:4px 4px 30px}
#view-learn h3,#view-learn h4,#view-learn p,#view-learn ul,#view-learn ol,#view-learn li,#view-learn table{margin:0;padding:0}

/* intro */
#view-learn .kb-intro{padding:8px 0 22px}
#view-learn .kb-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:0.8rem;font-weight:600;color:var(--color-networth);background:var(--color-networth-glow);border:1px solid var(--kb-bstrong);margin-bottom:16px}
#view-learn .kb-h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;line-height:1.2;letter-spacing:-.3px;color:var(--text-primary)}
#view-learn .kb-grad{background:linear-gradient(120deg,var(--color-networth),var(--color-info) 55%,var(--color-asset));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#view-learn .kb-lead{margin-top:14px;font-size:1.05rem;color:var(--text-secondary);max-width:680px;line-height:1.7}

/* chips */
#view-learn .kb-chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 26px;position:sticky;top:0;z-index:5;padding:10px 0;background:var(--bg-secondary)}
#view-learn .kb-chips a{font-size:0.85rem;font-weight:600;padding:8px 14px;border-radius:999px;color:var(--text-secondary);background:var(--bg-item);border:1px solid var(--border-color);transition:background-color .2s ease, border-color .2s ease, color .2s ease}
#view-learn .kb-chips a:hover{color:var(--text-primary);background:var(--color-networth-glow);border-color:var(--kb-bstrong)}

/* grids */
#view-learn .kb-grid{display:grid;gap:16px}
#view-learn .kb-g2{grid-template-columns:repeat(2,1fr)}
#view-learn .kb-g3{grid-template-columns:repeat(3,1fr)}
#view-learn .kb-g4{grid-template-columns:repeat(4,1fr)}

/* cards */
#view-learn .kb-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:20px;backdrop-filter:blur(12px);box-shadow:var(--shadow-md);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#view-learn .kb-card:hover{transform:translateY(-3px);border-color:var(--kb-bstrong);box-shadow:var(--shadow-lg)}
#view-learn .kb-pillar{position:relative}
#view-learn .kb-tag{position:absolute;top:16px;right:18px;font-size:0.75rem;font-weight:700;color:var(--text-muted)}
#view-learn .kb-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;margin-bottom:13px}
#view-learn .kb-green{background:var(--color-asset-glow);color:var(--color-asset)}
#view-learn .kb-red{background:var(--color-liability-glow);color:var(--color-liability)}
#view-learn .kb-purple{background:var(--color-networth-glow);color:var(--color-networth)}
#view-learn .kb-blue{background:var(--color-info-glow);color:var(--color-info)}
#view-learn .kb-amber{background:var(--kb-warn-glow);color:var(--kb-warn)}
#view-learn .kb-big{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
#view-learn .kb-unit{font-size:.85rem;font-weight:600;color:var(--text-muted)}
#view-learn .kb-lbl{font-size:0.9rem;color:var(--text-secondary);margin-top:5px}
#view-learn .kb-ds{font-size:0.8rem;color:var(--text-muted);margin-top:4px;line-height:1.5}
#view-learn .kb-ct{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}
#view-learn .kb-cp{font-size:.9rem;color:var(--text-secondary);line-height:1.6}

/* status colors */
#view-learn .kb-good{color:var(--color-asset)}
#view-learn .kb-bad{color:var(--color-liability)}
#view-learn .kb-warn{color:var(--kb-warn)}
#view-learn .kb-info{color:var(--color-info)}
#view-learn .kb-nw{color:var(--color-networth)}
#view-learn .kb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:currentColor}

/* section blocks */
#view-learn .kb-sec{padding:34px 0;border-top:1px solid var(--border-color);scroll-margin-top:90px}
#view-learn .kb-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#view-learn .kb-sec-num{font-size:0.8rem;font-weight:700;color:var(--color-networth);background:var(--color-networth-glow);padding:5px 10px;border-radius:8px;letter-spacing:1px}
#view-learn .kb-sec-title{font-size:1.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-.2px}
#view-learn .kb-sec-sub{color:var(--text-secondary);margin-bottom:18px;font-size:1rem}
#view-learn .kb-p{color:var(--text-secondary);font-size:0.95rem;line-height:1.75;margin-bottom:8px}
#view-learn .kb-p strong,#view-learn .kb-cp strong{color:var(--text-primary);font-weight:600}
#view-learn .kb-blk{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:26px 0 14px;display:flex;align-items:center;gap:9px}
#view-learn .kb-blk i{color:var(--color-networth);font-size:1rem}

/* equation */
#view-learn .kb-eq{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;background:var(--bg-item);border:1px solid var(--kb-bstrong);border-radius:12px;padding:12px 16px;font-weight:600;font-size:0.95rem;color:var(--text-primary);margin:4px 0}
#view-learn .kb-eqsm{font-size:0.85rem;padding:9px 13px;margin:10px 0}
#view-learn .kb-op{color:var(--text-muted);font-weight:500}

/* lists */
#view-learn .kb-ul{list-style:none;display:grid;gap:8px;margin-top:4px}
#view-learn .kb-ul li{position:relative;padding-left:20px;font-size:0.9rem;color:var(--text-secondary);line-height:1.55}
#view-learn .kb-ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:1px;color:var(--color-asset);font-size:0.75rem}
#view-learn .kb-steps{counter-reset:kbs;display:grid;gap:11px;margin-top:4px}
#view-learn .kb-steps li{list-style:none;display:flex;gap:13px;align-items:flex-start}
#view-learn .kb-steps li::before{counter-increment:kbs;content:counter(kbs);flex:none;width:29px;height:29px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:0.85rem;color:var(--color-networth);background:var(--color-networth-glow)}
#view-learn .kb-steps li b{color:var(--text-primary)}
#view-learn .kb-steps li div{font-size:0.95rem;color:var(--text-secondary);line-height:1.5;padding-top:3px}

/* ratio card */
#view-learn .kb-ratio{border-left:3px solid var(--kb-accent,var(--color-networth))}
#view-learn .kb-rh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:5px}
#view-learn .kb-crit{font-size:0.75rem;font-weight:700;white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--bg-item);border:1px solid var(--border-color)}
#view-learn .kb-q{font-size:0.85rem;color:var(--text-muted);font-style:italic;margin-bottom:10px}

/* tables */
#view-learn .kb-tbl{width:100%;border-collapse:collapse;font-size:0.9rem;margin-top:8px}
#view-learn .kb-tbl th,#view-learn .kb-tbl td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--border-color)}
#view-learn .kb-tbl th{background:var(--bg-item);font-weight:600;color:var(--text-primary);font-size:.8rem}
#view-learn .kb-tbl td{color:var(--text-secondary)}
#view-learn .kb-tbl tr:last-child td{border-bottom:none}
#view-learn .kb-tbl .kb-lvl{font-weight:700;white-space:nowrap}
#view-learn .kb-tbl2{margin-top:12px}

/* health bands */
#view-learn .kb-bands{display:grid;gap:9px;margin-top:6px}
#view-learn .kb-band{display:flex;align-items:center;gap:15px;padding:13px 16px;border-radius:12px;background:var(--bg-item);border:1px solid var(--border-color)}
#view-learn .kb-rng{font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums;min-width:88px}
#view-learn .kb-meta b{display:block;font-size:0.95rem}
#view-learn .kb-meta span{font-size:0.85rem;color:var(--text-muted)}

/* note */
#view-learn .kb-note{display:flex;gap:13px;padding:15px 17px;border-radius:12px;background:var(--color-info-glow);border:1px solid var(--kb-bstrong);font-size:0.9rem;color:var(--text-secondary);margin-top:16px;line-height:1.6}
#view-learn .kb-note i{color:var(--color-info);font-size:1rem;margin-top:2px;flex:none}
#view-learn .kb-warnote{background:var(--kb-warn-glow)}
#view-learn .kb-warnote i{color:var(--kb-warn)}

/* glossary */
#view-learn .kb-gloss{display:grid;gap:1px;background:var(--border-color);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;margin-top:6px}
#view-learn .kb-row{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:16px;padding:12px 16px;background:var(--bg-secondary)}
#view-learn .kb-row b{color:var(--text-primary);font-weight:600;font-size:.9rem}
#view-learn .kb-row span{color:var(--text-secondary);font-size:0.9rem;line-height:1.5}

#view-learn .kb-disclaimer{margin-top:30px;padding-top:18px;border-top:1px solid var(--border-color);font-size:0.8rem;color:var(--text-muted);text-align:center}

/* responsive */
@media(max-width:1180px){#view-learn .kb-g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  #view-learn .kb-g3{grid-template-columns:1fr}
  #view-learn .kb-g2{grid-template-columns:1fr}
}
@media(max-width:560px){
  #view-learn .kb-g4{grid-template-columns:1fr}
  #view-learn .kb-row{grid-template-columns:1fr;gap:3px}
  #view-learn .kb-chips{gap:7px}
  #view-learn .kb-chips a{font-size:.8rem;padding:7px 12px}
}

/* ============================================================
   LANDING — premium polish (Linear/Stripe inspired)
   ============================================================ */
/* eyebrow tag → subtle pill (อ่านคมกว่า gradient text) */
.section-tag{
  background: var(--color-networth-glow);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  /* มืด: ม่วงอ่อนให้ผ่าน AA บนพื้นทึบ · สว่าง: override เป็น var(--color-networth) ที่ 1807 */
  color: #a78bfa;
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: none;
  font-size: 0.8rem;
}
/* hero title — line-height สบายตาสำหรับไทย, ลด negative tracking */
.hero-title{ line-height: 1.3; letter-spacing: -0.2px; }

/* trust / about section */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.trust-card{ padding:32px; border-radius:20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform var(--transition-normal), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.trust-card:hover{ transform:translateY(-6px); border-color:var(--border-focus); box-shadow:var(--shadow-lg); }
.trust-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.4rem; margin-bottom:6px; }
.trust-ic.ic-green{ background:var(--color-asset-glow); color:var(--color-asset); }
.trust-ic.ic-blue{ background:var(--color-info-glow); color:var(--color-info); }
.trust-ic.ic-purple{ background:var(--color-networth-glow); color:var(--color-networth); }
.trust-card h3{ font-size:1.1rem; font-weight:700; }
.trust-card p{ color:var(--text-secondary); font-size:0.9rem; line-height:1.6; }
.contact-note{ text-align:center; margin-top:28px; color:var(--text-muted); font-size:0.85rem; }
.contact-note i{ color:var(--color-info); margin-right:6px; }

/* footer privacy note */
.footer-note{ display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-size:0.8rem; }
.footer-note i{ color:var(--color-asset); }

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

/* ============================================================
   TOOLTIP ช่วยมือใหม่ (.fh-tip) — hover บนเดสก์ท็อป / แตะ(focus)บนมือถือ
   ============================================================ */
.fh-tip{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  /* v43: กล่องแตะ 29px (เกณฑ์ ≥24px) — margin ลบชดเชยให้ layout กินที่เท่าไอคอน 17px เดิม */
  width:29px; height:29px; margin:-6px -6px -6px -1px; padding:6px; vertical-align:middle;
  border:none; background:transparent; color:var(--text-muted);
  cursor:help; font-size:0.8rem; line-height:1; -webkit-tap-highlight-color:transparent;
}
.fh-tip:hover, .fh-tip:focus-visible, .fh-tip:focus{ color:var(--color-info); outline:none; }
.fh-tip::after{
  content: attr(data-tip);
  position:absolute; bottom:150%; left:50%; transform:translateX(-50%) translateY(5px);
  width:max-content; max-width:230px; text-align:left; white-space:normal;
  background:var(--bg-secondary); color:var(--text-secondary);
  border:1px solid var(--border-color); border-radius:10px;
  padding:9px 12px; font-size:0.75rem; font-weight:400; line-height:1.55;
  box-shadow:var(--shadow-lg); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.fh-tip::before{
  content:""; position:absolute; bottom:150%; left:50%;
  transform:translateX(-50%) translateY(50%) rotate(45deg);
  width:8px; height:8px; background:var(--bg-secondary);
  border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
  opacity:0; transition:opacity .15s ease; z-index:61;
}
.fh-tip:hover::after, .fh-tip:focus::after,
.fh-tip:hover::before, .fh-tip:focus::before{ opacity:1; transform:translateX(-50%) translateY(0); }
.fh-tip:hover::before, .fh-tip:focus::before{ transform:translateX(-50%) translateY(50%) rotate(45deg); }

/* tooltip stacking fix — ยกการ์ดที่มี tooltip กำลังแสดงให้ลอยเหนือการ์ดอื่น
   (กัน backdrop-filter สร้าง stacking context แล้วกล่องคำอธิบายถูกบัง) */
.glass-panel:has(.fh-tip:hover), .glass-panel:has(.fh-tip:focus),
.info-card:has(.fh-tip:hover),  .info-card:has(.fh-tip:focus){
  position: relative;
  z-index: 90;
}

/* tooltip v2: render กล่องที่ระดับ body (หลุดทุก stacking context = ไม่มีอะไรบังได้)
   ปิดกล่องแบบ ::after/::before เดิม ใช้ .fh-tooltip-pop แทน */
.fh-tip::after, .fh-tip::before{ content: none !important; }
.fh-tooltip-pop{
  position: absolute; z-index: 99999; max-width: 240px;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: 10px;
  padding: 9px 12px; font-size: 0.8rem; line-height: 1.55; font-weight: 400;
  box-shadow: var(--shadow-lg); text-align: left;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.fh-tooltip-pop.below{ transform: translateY(-4px); }
.fh-tooltip-pop.show{ opacity: 1; transform: translateY(0); }

/* ============================================================
   TOOL-VIEW premium polish — badge / table / card / scrollbar
   (append override; ใช้ตัวแปรเดิม → ตามธีม light/dark อัตโนมัติ)
   ============================================================ */
/* Badges — เส้นขอบสีตัวเองบาง ๆ ให้คมและพรีเมียมขึ้น */
.badge{
  gap: 5px;
  padding: 4px 11px;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.2px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* Tables — header band บาง ๆ + เน้นแถวเมื่อชี้ */
.custom-table th{ background: var(--bg-item); font-size: 0.75rem; }
.custom-table tbody tr:hover{ background: var(--bg-table-hover); }

/* info-card — hover เนียน (เส้นขอบ+เงา ไม่ขยับ เพราะไม่ใช่ปุ่ม) */
.info-card{ transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.info-card:hover{ border-color: rgba(255,255,255,0.10); box-shadow: var(--shadow-lg); }
body.light-theme .info-card:hover{ border-color: rgba(15,23,42,0.12); }

/* Premium scrollbar (เนียนแบบ Linear) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--text-muted); background-clip: padding-box; }

/* ============================================================
   PREMIUM POLISH v2 — "UI คลีน + สวยมาก" (append-only, theme-aware)
   เลเยอร์ override ท้ายไฟล์ · ไม่แตะโครงสร้างเดิม · ย้อนกลับง่ายผ่าน git
   ใช้ CSS variables เดิมทั้งหมด → ปรับตาม light/dark อัตโนมัติ
   ============================================================ */

/* 1) เรนเดอร์ตัวอักษรให้คมและเนียน (ดีกับทั้งไทย/อังกฤษ) */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* 2) ความลึกพื้นหลังแบบพรีเมียม (Linear/Stripe) — แสงนุ่ม ม่วง→ฟ้า→เขียว
   อยู่หลังเนื้อหาทั้งหมด (fixed, z-index:-1) ไม่รบกวนการคลิก */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 560px at 8% -10%, rgba(139,92,246,0.13), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgba(59,130,246,0.10), transparent 55%),
    radial-gradient(680px 600px at 50% 118%, rgba(16,185,129,0.05), transparent 60%);
}
body.light-theme::before{
  background:
    radial-gradient(900px 560px at 8% -10%, rgba(139,92,246,0.08), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgba(59,130,246,0.06), transparent 55%),
    radial-gradient(680px 600px at 50% 118%, rgba(16,185,129,0.04), transparent 60%);
}

/* 3) ตัวเลขการเงินเรียงหลักสวย (tabular-nums) อ่านง่าย/มือโปร */
.card-value, .item-amount, .stat-num, .preview-stat .val,
#alNetWorthVal, #alTotalAssetsVal, #alTotalLiabilitiesVal,
.custom-table td, #view-learn .kb-big, #view-learn .kb-rng{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 4) การ์ดแก้ว — มุมโค้งนุ่มขึ้น + ไฮไลต์ขอบบนบาง ๆ ให้มีมิติ + เงา hover */
.glass-panel{ border-radius:18px; }
body:not(.light-theme) .glass-panel{
  background-image: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);
}
.glass-panel:hover{ box-shadow: var(--shadow-lg); }

/* 5) แถบบนกระจก (header/navbar) — เพิ่ม saturate ให้สีหลังกระจกสด สไตล์พรีเมียม */
header, .landing-navbar{
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* 6) ปุ่มหลัก — ไล่สีอิ่มขึ้นเล็กน้อย + state ครบ (hover/active) */
.btn-primary{ background-image: linear-gradient(135deg, #7c3aed 0%, #4f46e5 45%, #2563eb 100%); }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(139,92,246,0.25); }

/* 7) โฟกัสชัดเจน เข้าถึงง่าย (accessibility) + ดูพรีเมียม */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .nav-item a:focus-visible{
  outline: 2px solid var(--color-networth);
  outline-offset: 2px;
  border-radius: 10px;
}

/* 8) ไฮไลต์ข้อความตามแบรนด์ */
::selection{ background: rgba(139,92,246,0.30); color:#fff; }
body.light-theme ::selection{ background: rgba(139,92,246,0.20); color:#0f172a; }

/* 9) sidebar — แถบ accent ซ้ายของเมนูที่เลือก (สไตล์ Linear) */
.nav-item a{ position:relative; }
.nav-item.active a::after{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:58%; border-radius:0 3px 3px 0;
  background: linear-gradient(180deg, var(--color-networth), var(--color-info));
}

/* 10) เลื่อนหน้าแบบนุ่ม (ลิงก์ภายใน/แท็บความรู้/landing) */
html{ scroll-behavior: smooth; }

/* 11) เคารพผู้ใช้ที่ตั้งค่าปิดอนิเมชัน */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   FINANCIAL COACH / TRUST LEDGER VIEW
   ============================================================ */
#view-coach .coach-root{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#view-coach .coach-topbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#view-coach .coach-top-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#view-coach .coach-eyebrow,
#view-coach .coach-section-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-networth);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

#view-coach .coach-eyebrow{
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--color-networth-glow);
}

#view-coach .coach-topbar h2{
  font-size: var(--fs-fluid-title-lg);
  line-height: 1.25;
  font-weight: 800;
  color: var(--text-primary);
}

#view-coach .coach-topbar p{
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 680px;
  margin-top: 8px;
}

#view-coach .coach-flow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

#view-coach .coach-flow-step{
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-item);
}

#view-coach .coach-flow-step span{
  display: block;
  color: var(--color-info);
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 8px;
}

#view-coach .coach-flow-step strong{
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
}

#view-coach .coach-flow-step small{
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 4px;
}

#view-coach .coach-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 20px;
  align-items: stretch;
}

#view-coach .coach-layout-secondary{
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
}

#view-coach .coach-panel{
  padding: 24px;
}

#view-coach .coach-panel-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

#view-coach .coach-panel-header h3{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

#view-coach .coach-source-note{
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

#view-coach .coach-metrics{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#view-coach .coach-metric{
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-item);
}

#view-coach .coach-metric span{
  color: var(--text-secondary);
  font-size: 0.8rem;
}

#view-coach .coach-metric strong{
  display: block;
  color: var(--text-primary);
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

#view-coach .coach-metric small{
  color: var(--text-muted);
  font-size: 0.75rem;
}

#view-coach .coach-shortcuts{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

#view-coach .coach-diagnose-panel{
  border-color: rgba(139, 92, 246, 0.22);
}

#view-coach .coach-diagnose-panel h2,
#view-coach .coach-commit-panel h2{
  color: var(--text-primary);
  font-size: 1.4rem;
  line-height: 1.35;
  font-weight: 800;
  margin-bottom: 10px;
}

#view-coach .coach-diagnose-panel p,
#view-coach .coach-disclaimer{
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 0.9rem;
}

#view-coach .coach-evidence-list{
  display: grid;
  gap: 10px;
  list-style: none;
  margin-top: 18px;
}

#view-coach .coach-evidence-list li{
  position: relative;
  padding: 11px 12px 11px 34px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-item);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

#view-coach .coach-evidence-list li::before{
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--color-info);
}

#view-coach .coach-table-wrap{
  overflow-x: auto;
}

#view-coach .coach-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 0.9rem;
}

#view-coach .coach-table th,
#view-coach .coach-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

#view-coach .coach-table th{
  background: var(--bg-item);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

#view-coach .coach-table td{
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

#view-coach .coach-table tr:last-child td{
  border-bottom: none;
}

#view-coach .coach-confidence{
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid currentColor;
}

#view-coach .coach-confidence-high{ color: var(--color-asset); background: var(--color-asset-glow); }
#view-coach .coach-confidence-medium{ color: var(--color-warning); background: rgba(245, 158, 11, 0.12); }
#view-coach .coach-confidence-low{ color: var(--color-liability); background: var(--color-liability-glow); }

#view-coach .coach-commit-icon{
  color: var(--color-info);
  font-size: 1.25rem;
}

#view-coach .coach-action-stack{
  display: grid;
  gap: 10px;
  margin: 16px 0 18px;
}

#view-coach .coach-action-stack div{
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-item);
}

#view-coach .coach-action-stack span{
  display: block;
  color: var(--color-info);
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 5px;
}

#view-coach .coach-action-stack p{
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

#view-coach .coach-action-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#view-coach .coach-disclaimer{
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media(max-width:1100px){
  #view-coach .coach-layout,
  #view-coach .coach-layout-secondary{
    grid-template-columns: 1fr;
  }
}

@media(max-width:760px){
  #view-coach .coach-topbar{
    flex-direction: column;
  }
  #view-coach .coach-top-actions{
    justify-content: flex-start;
  }
  #view-coach .coach-flow{
    grid-template-columns: repeat(2, 1fr);
  }
  #view-coach .coach-metrics{
    grid-template-columns: 1fr;
  }
  #view-coach .coach-panel{
    padding: 20px;
  }
}

@media(max-width:520px){
  #view-coach .coach-flow{
    grid-template-columns: 1fr;
  }
  #view-coach .coach-panel-header{
    flex-direction: column;
  }
#view-coach .coach-source-note{
    white-space: normal;
  }
}

/* ============================================================
   PHASE 1 STARTER PLANNER — one-page worksheet
   ============================================================ */
#view-starter {
  --starter-page: #f4f6fa;
  --starter-paper: #ffffff;
  --starter-soft: #f7f9fc;
  --starter-line: #e3e8f0;
  --starter-line-strong: #cbd5e1;
  --starter-ink: #1d2433;
  --starter-muted: #64708a;
  --starter-accent: #5a9bd5;
  --starter-accent-soft: #eaf3fb;
  --starter-accent-line: #cfe0f3;
  --starter-shadow: 0 16px 36px -24px rgba(22, 40, 90, 0.34);
  color: var(--starter-ink);
}

#view-starter .starter-root {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--starter-line);
  border-radius: 16px;
  background: var(--starter-page);
  box-shadow: var(--starter-shadow);
}

#view-starter .starter-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

#view-starter .starter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-info);
  background: var(--starter-accent-soft);
  border: 1px solid var(--starter-accent-line);
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 10px;
}

#view-starter .starter-topbar h2 {
  margin: 0;
  color: var(--starter-ink);
  /* snap เข้า token กลาง (เดิม clamp(1.55rem,3vw,2.25rem) — min ต่าง 0.05rem ตาเปล่าไม่เห็น) */
  font-size: var(--fs-fluid-headline);
  line-height: 1.15;
}

#view-starter .starter-topbar p {
  margin: 8px 0 0;
  color: var(--starter-muted);
  line-height: 1.6;
}

#view-starter .starter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

#view-starter .starter-actions .btn {
  border-radius: 10px;
  color: var(--starter-ink);
  background: var(--starter-paper);
  border-color: var(--starter-line);
  box-shadow: none;
}

#view-starter .starter-actions .btn:hover {
  background: var(--starter-soft);
  border-color: var(--starter-line-strong);
}

#view-starter .starter-summary-grid {
  display: grid;
  /* minmax(0,1fr) กันตัวเลขยาว (เช่น ฿3,652,000.00) floor ความกว้างขั้นต่ำจนดันกรอบตกขอบ */
  /* v68: ผลรวมย้ายไปท้าย section — งบกระแสเงินสดเหลือ 3 ใบ · ความมั่งคั่งสุทธิแยกไปท้ายงบดุล */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#view-starter .starter-summary-grid.starter-summary-networth {
  grid-template-columns: 1fr;
}

#view-starter .starter-stat {
  padding: 16px;
  border: 1px solid var(--starter-line);
  border-radius: 12px;
  background: var(--starter-paper);
  box-shadow: var(--shadow-sm);
}

#view-starter .starter-stat span {
  display: block;
  color: var(--starter-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}

#view-starter .starter-stat strong {
  display: block;
  color: var(--starter-ink);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#view-starter .starter-stat.good strong { color: var(--color-asset); }
#view-starter .starter-stat.bad strong { color: var(--color-liability); }
#view-starter .starter-stat.neutral strong { color: var(--starter-ink); }

#view-starter .starter-layout {
  display: grid;
  /* v37: เรียงเต็มความกว้างตาม reference การเงินฉบับพกพา — งบดุลต่อใต้งบกระแสเงินสด (mike เคาะ 12 ก.ค. 2026) */
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

#view-starter .starter-panel,
#view-starter .starter-ratio-panel {
  padding: 20px;
  border-radius: 12px;
  background: var(--starter-paper);
  border: 1px solid var(--starter-line);
  box-shadow: 0 10px 28px -22px rgba(22, 40, 90, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#view-starter .starter-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--starter-line);
}

#view-starter .starter-panel-num {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-networth), var(--color-info));
  font-weight: 800;
}

#view-starter .starter-panel-head h3 {
  margin: 0;
  color: var(--starter-ink);
  font-size: 1.05rem;
}

#view-starter .starter-panel-head p {
  margin: 4px 0 0;
  color: var(--starter-muted);
  font-size: 0.85rem;
}

#view-starter .starter-groups {
  display: grid;
  gap: 14px;
}

/* v70: งบดุลแบ่งครึ่งตาม reference — ซ้ายสินทรัพย์ ขวาหนี้สิน + แถบรวมท้ายคอลัมน์ */
#view-starter .starter-balance-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

#view-starter .starter-balance-col {
  display: grid;
  gap: 14px;
  align-content: start;
}

#view-starter .starter-col-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 56px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
}

#view-starter .starter-col-total em {
  font-style: normal;
  text-align: right;
}

#view-starter .starter-col-total.starter-tone-asset { background: var(--color-asset); }
#view-starter .starter-col-total.starter-tone-liability { background: var(--color-liability); }

#view-starter .starter-group {
  border: 1px solid var(--starter-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--starter-paper);
}

#view-starter .starter-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
}

#view-starter .starter-tone-income .starter-group-title { background: var(--color-info); }
#view-starter .starter-tone-saving .starter-group-title,
#view-starter .starter-tone-asset .starter-group-title { background: var(--color-asset); }
#view-starter .starter-tone-fixed .starter-group-title,
#view-starter .starter-tone-liability .starter-group-title { background: var(--color-liability); }
#view-starter .starter-tone-variable .starter-group-title { background: var(--color-warning); }

#view-starter .starter-row,
#view-starter .starter-group-total {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(112px, 140px) minmax(72px, 86px) 34px;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--starter-line);
}

#view-starter .starter-row-head {
  color: var(--starter-muted);
  background: var(--starter-soft);
  font-size: 0.75rem;
  font-weight: 800;
}

#view-starter .starter-name-input,
#view-starter .starter-amount-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 9px;
  color: var(--starter-ink);
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
}

#view-starter .starter-amount-input {
  text-align: right;
  background: var(--starter-soft);
  border-color: var(--starter-line);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#view-starter .starter-name-input:hover {
  background: var(--starter-soft);
  border-color: var(--starter-line);
}

#view-starter .starter-name-input:focus,
#view-starter .starter-amount-input:focus {
  outline: none;
  border-color: var(--starter-accent);
  background: var(--starter-paper);
  box-shadow: 0 0 0 3px var(--starter-accent-soft);
}

#view-starter .starter-row-pct {
  color: var(--starter-muted);
  text-align: right;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#view-starter .starter-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  margin-top: 4px;
  margin-left: auto;
  background: var(--color-info);
  transition: width var(--transition-fast);
}

#view-starter .starter-tone-saving .starter-bar,
#view-starter .starter-tone-asset .starter-bar { background: var(--color-asset); }
#view-starter .starter-tone-fixed .starter-bar,
#view-starter .starter-tone-liability .starter-bar { background: var(--color-liability); }
#view-starter .starter-tone-variable .starter-bar { background: var(--color-warning); }

#view-starter .starter-row-delete {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  color: var(--starter-muted);
  background: transparent;
  cursor: pointer;
}

#view-starter .starter-row-delete:hover:not(:disabled) {
  color: var(--color-liability);
  background: var(--color-liability-glow);
}

#view-starter .starter-row-delete:disabled {
  cursor: default;
  opacity: 0.42;
}

#view-starter .starter-group-total {
  background: var(--starter-soft);
  color: var(--starter-ink);
  font-weight: 800;
  border-bottom: none;
}

#view-starter .starter-group-total strong,
#view-starter .starter-group-total em {
  text-align: right;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

#view-starter .starter-add-row {
  margin: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--starter-line);
  border-radius: 10px;
  background: transparent;
  color: var(--color-info);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

#view-starter .starter-add-row:hover {
  border-color: var(--starter-accent);
  background: var(--starter-accent-soft);
}

#view-starter .starter-ratio-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

#view-starter .starter-ratio-card {
  padding: 15px;
  border: 1px solid var(--starter-line);
  border-radius: 12px;
  background: var(--starter-paper);
}

#view-starter .starter-ratio-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

#view-starter .starter-ratio-top h4 {
  margin: 0;
  color: var(--starter-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

#view-starter .starter-ratio-top span {
  display: block;
  color: var(--starter-muted);
  font-size: 0.75rem;
  margin-top: 4px;
}

#view-starter .starter-ratio-top strong {
  flex: none;
  color: var(--starter-ink);
  font-size: 1.1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

#view-starter .starter-ratio-card.good .starter-ratio-top strong { color: var(--color-asset); }
#view-starter .starter-ratio-card.warn .starter-ratio-top strong { color: var(--color-warning); }
#view-starter .starter-ratio-card.bad .starter-ratio-top strong { color: var(--color-liability); }

#view-starter .starter-ratio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--starter-soft);
  color: var(--starter-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

#view-starter .starter-ratio-card.good .starter-ratio-badge { color: var(--color-asset); background: var(--color-asset-glow); }
#view-starter .starter-ratio-card.warn .starter-ratio-badge { color: var(--color-warning); background: var(--color-warning-glow); }
#view-starter .starter-ratio-card.bad .starter-ratio-badge { color: var(--color-liability); background: var(--color-liability-glow); }

#view-starter .starter-ratio-card p {
  margin: 10px 0 0;
  color: var(--starter-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

#view-starter .starter-gauge {
  height: 7px;
  margin-top: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--starter-soft);
}

#view-starter .starter-gauge i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-info);
  transition: width var(--transition-fast);
}

#view-starter .starter-ratio-card.good .starter-gauge i { background: var(--color-asset); }
#view-starter .starter-ratio-card.warn .starter-gauge i { background: var(--color-warning); }
#view-starter .starter-ratio-card.bad .starter-gauge i { background: var(--color-liability); }

@media(max-width:1180px){
  #view-starter .starter-ratio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:980px){
  #view-starter .starter-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #view-starter .starter-balance-cols {
    grid-template-columns: 1fr;
  }
}

@media(max-width:680px){
  #view-starter .starter-root {
    padding: 14px;
    border-radius: 12px;
  }
  #view-starter .starter-topbar {
    flex-direction: column;
  }
  #view-starter .starter-actions {
    justify-content: flex-start;
  }
  #view-starter .starter-summary-grid,
  #view-starter .starter-ratio-grid {
    grid-template-columns: 1fr;
  }
  #view-starter .starter-panel,
  #view-starter .starter-ratio-panel {
    padding: 14px;
  }
  #view-starter .starter-row:not(.starter-row-head) {
    grid-template-columns: minmax(0, 1fr) 86px 34px;
    grid-template-areas:
      "name name action"
      "amount pct action";
    gap: 5px;
    padding: 6px;
  }
  #view-starter .starter-row:not(.starter-row-head) .starter-name-input { grid-area: name; }
  #view-starter .starter-row:not(.starter-row-head) .starter-amount-input { grid-area: amount; }
  #view-starter .starter-row:not(.starter-row-head) .starter-row-pct { grid-area: pct; }
  #view-starter .starter-row:not(.starter-row-head) .starter-row-delete { grid-area: action; align-self: stretch; height: auto; min-height: 42px; }
  #view-starter .starter-row-head,
  #view-starter .starter-group-total {
    grid-template-columns: minmax(0, 1fr) 92px 62px;
    gap: 5px;
    padding: 6px;
  }
  #view-starter .starter-row-head > :last-child,
  #view-starter .starter-group-total > :last-child {
    display: none;
  }
  #view-starter .starter-name-input,
  #view-starter .starter-amount-input {
    font-size: 0.8rem;
    padding: 7px 6px;
  }
}

/* ============================================================
   RETIREMENT PLANNER (view วางแผนเกษียณ) — v26
   ============================================================ */
.retire-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.retire-head-copy { max-width: 680px; }
.retire-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.retire-grad {
    background: linear-gradient(120deg, var(--color-networth), var(--color-info));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.retire-lead {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}
.retire-head-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* --- timeline --- */
.retire-timeline-panel { padding: 22px 26px; margin-bottom: 16px; }
.retire-age-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.retire-age-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.retire-age-chip label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.retire-age-chip input {
    width: 92px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 10px;
    font-family: inherit;
}
.retire-age-chip input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
}
.retire-age-chip-main input {
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.18);
    color: var(--color-networth);
}
.retire-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    border: none;
    background: var(--color-info);
    margin: 20px 0 10px;
    cursor: pointer;
}
.retire-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-networth);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: grab;
}
.retire-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-networth);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: grab;
}
.retire-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.retire-phase-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 600;
}
.retire-phase-collect { color: var(--color-info); }
.retire-phase-spend { color: var(--color-asset); }

/* --- assumptions --- */
.retire-assumptions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.retire-assume-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}
.retire-assume-item input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}
.retire-assume-item input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
}

/* --- need cards --- */
.retire-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.retire-card { padding: 20px 22px; }
.retire-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.retire-card-head h3 { font-size: 1rem; font-weight: 700; }
.retire-card-en {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
}
.retire-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.retire-icon-basic { background: var(--color-info-glow); color: var(--color-info); }
.retire-icon-health { background: var(--color-liability-glow); color: var(--color-liability); }
.retire-icon-lifestyle { background: var(--color-warning-glow); color: var(--color-warning); }
.retire-card-need {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.retire-card-need span { font-size: 0.75rem; color: var(--text-secondary); }
.retire-card-need strong { font-size: 1.25rem; font-weight: 700; }
.retire-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-item-hover);
    overflow: hidden;
    margin-bottom: 6px;
}
.retire-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-networth), var(--color-info));
    transition: width 0.25s ease;
}
.retire-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.retire-field { margin-bottom: 12px; }
.retire-field label { font-size: 0.8rem; }
.retire-field-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}
.retire-field-row input[type="number"] {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
}
.retire-field input[type="number"]:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
}
.retire-card .retire-field input[type="number"] {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
}

/* --- bottom: prepared + summary --- */
.retire-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 16px;
    margin-bottom: 24px;
}
.retire-prepared-panel { padding: 20px 22px; }
.retire-prepared-panel h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.retire-prepared-panel h3 i { color: var(--color-networth); }
.retire-fv-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 12px;
}
.retire-fv-note strong { color: var(--color-asset); }
.retire-summary-panel {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.retire-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.retire-summary-row > strong,
.retire-summary-row > span:last-child { color: var(--text-primary); font-weight: 600; }
.retire-summary-main { font-size: 0.9rem; }
.retire-summary-main strong {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--color-networth), var(--color-info));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.retire-save-highlight {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--color-networth-glow);
    border: 1px solid rgba(139, 92, 246, 0.25);
}
.retire-save-highlight > span:first-child {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.retire-save-highlight strong { font-size: 1.5rem; font-weight: 700; color: var(--color-networth); }
.retire-save-sub { font-size: 0.75rem; color: var(--text-muted); }
.retire-status-note {
    font-size: 0.8rem;
    line-height: 1.6;
    border-radius: 10px;
    padding: 10px 12px;
}
.retire-status-good { background: var(--color-asset-glow); color: var(--color-asset); }
.retire-status-info { background: var(--color-info-glow); color: var(--color-info); }
.retire-empty-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}

/* --- responsive --- */
@media (max-width: 1080px) {
    .retire-cards { grid-template-columns: 1fr; }
    .retire-assumptions { grid-template-columns: repeat(2, 1fr); }
    .retire-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .retire-assumptions { grid-template-columns: 1fr; }
    .retire-age-row { justify-content: center; }
    .retire-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   RETIREMENT PLANNER v2 — รายการทรัพย์สิน + chart + teaser (v27)
   ============================================================ */
.retire-prepared-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.retire-items-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}
.retire-item-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 34px;
    gap: 8px;
    align-items: center;
}
.retire-item-row input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
}
.retire-item-row input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
}
.retire-item-amount { text-align: right; font-weight: 600; }
.retire-item-del {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.retire-item-del:hover {
    color: var(--color-liability);
    border-color: rgba(244, 63, 94, 0.35);
    background: var(--color-liability-glow);
}
.retire-prepared-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.retire-prepared-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-item);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}
.retire-prepared-total span { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.retire-prepared-total strong { font-size: 1.05rem; font-weight: 700; color: var(--color-networth); }
.retire-chart-wrap {
    position: relative;
    height: 220px;
    margin-bottom: 12px;
}

/* teaser บนแดชบอร์ด */
.retire-teaser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-top: 24px;
}
.retire-teaser-copy {
    display: flex;
    align-items: center;
    gap: 14px;
}
.retire-teaser-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-networth-glow);
    color: var(--color-networth);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.retire-teaser h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
.retire-teaser p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 560px) {
    .retire-item-row { grid-template-columns: 1.2fr 1fr 34px; }
    .retire-teaser { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RETIREMENT v3 — step-up ออม + depletion curve "เงินจะพอถึงอายุเท่าไหร่" (v28)
   ============================================================ */
.retire-stepup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 2px;
}
.retire-stepup-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.retire-stepup-input {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.retire-stepup-input input {
    width: 62px;
    text-align: right;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}
.retire-stepup-input input:focus { outline: none; border-color: var(--color-networth); }
.retire-stepup-input span { font-size: 0.8rem; color: var(--text-muted); }

.retire-depletion-panel { padding: 20px 22px; margin-bottom: 24px; }
.retire-depletion-head { margin-bottom: 14px; }
.retire-depletion-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.retire-depletion-head h3 i { color: var(--color-networth); }
.retire-depletion-sub {
    font-size: 0.85rem;
    line-height: 1.6;
    border-radius: 10px;
    padding: 10px 12px;
}
.retire-depletion-sub:empty { display: none; }
.retire-runout-warn { background: var(--color-liability-glow); color: var(--color-liability); }
.retire-runout-good { background: var(--color-asset-glow); color: var(--color-asset); }
.retire-depletion-chart {
    position: relative;
    height: 300px;
    margin-bottom: 10px;
}
.retire-depletion-legend-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.6;
}
@media (max-width: 560px) {
    .retire-depletion-chart { height: 260px; }
}

/* ==========================================================================
   BUDGET VS ACTUAL (v30) — งบประมาณรายเดือนต่อหมวด ในหน้างบกระแสเงินสด
   สีสถานะ: ok เขียว (ตามแผน) · near เหลือง (≥80%) · over แดง (เกินงบ) · idle เทา (เดือนว่าง)
   ========================================================================== */
.cf-budget-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px 20px;
}
.cf-budget-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 22px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}
.cf-budget-empty .btn { margin-top: 12px; }
.cf-budget-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background-color: var(--bg-item);
    border-radius: 10px;
}
.cf-budget-row-head,
.cf-budget-row-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.cf-budget-cat {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.cf-budget-cat i { color: var(--color-networth); font-size: 0.8rem; }
.cf-budget-nums { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.cf-budget-spent { font-size: 0.9rem; }
.cf-budget-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}
.cf-budget-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.cf-budget-state { font-size: 0.75rem; font-weight: 600; }
.cf-budget-pct { font-size: 0.75rem; color: var(--text-muted); }
.cf-budget-spent.ok, .cf-budget-state.ok { color: var(--color-asset); }
.cf-budget-spent.near, .cf-budget-state.near { color: var(--color-warning); }
.cf-budget-spent.over, .cf-budget-state.over { color: var(--color-liability); }
.cf-budget-spent.idle, .cf-budget-state.idle { color: var(--text-muted); font-weight: 500; }
.cf-budget-bar-fill.ok { background: var(--color-asset); }
.cf-budget-bar-fill.near { background: var(--color-warning); }
.cf-budget-bar-fill.over { background: var(--color-liability); }
.cf-budget-bar-fill.idle { background: var(--text-muted); }
.cf-budget-total {
    grid-column: 1 / -1;
    border: 1px dashed var(--border-color);
    background: transparent;
}
.cf-budget-total .cf-budget-cat { color: var(--text-primary); }

/* modal: label + ช่องกรอกเรียงแถวเดียว อ่านไล่หมวดง่าย */
#budgetModalFields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
#budgetModalFields .cf-budget-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}
#budgetModalFields .cf-budget-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
#budgetModalFields .cf-budget-field label i { color: var(--color-networth); width: 16px; text-align: center; }
#budgetModalFields .cf-budget-field input { text-align: right; }
@media (max-width: 560px) {
    .cf-budget-list { grid-template-columns: 1fr; }
    #budgetModalFields .cf-budget-field { grid-template-columns: minmax(0, 1fr) 120px; }
}

/* ==========================================================================
   RECURRING TRANSACTIONS (v31) — banner เสนอเติม + badge รายการประจำ + checkbox ใน modal
   ========================================================================== */
.cf-recurring-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.03) 100%);
}
.cf-recurring-banner[hidden] { display: none; }
.cf-recurring-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    min-width: 0;
}
.cf-recurring-text i { color: var(--color-info); flex-shrink: 0; }
.cf-recurring-text strong { color: var(--text-primary); }

.tx-recurring-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    white-space: nowrap;
    vertical-align: middle;
}
.tx-recurring-badge i { font-size: 0.55rem; }

.fh-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.45;
}
.fh-check-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-info);
    cursor: pointer;
}
@media (max-width: 560px) {
    .cf-recurring-banner { align-items: stretch; flex-direction: column; }
    .cf-recurring-banner .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   v32 — starter: section nav + ratio card สูตรเศษส่วน/คำแปลผล (อ้างอิง worksheet การเงินฉบับพกพา)
   ========================================================================== */

#view-starter .starter-secnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  position: sticky;
  top: var(--header-height);
  z-index: 8;
  padding: 10px 0;
  background: var(--bg-secondary);
}

#view-starter .starter-secnav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--starter-line);
  border-radius: 999px;
  background: var(--starter-paper);
  color: var(--starter-ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

#view-starter .starter-secnav button:hover {
  border-color: var(--starter-accent);
  background: var(--starter-accent-soft);
}

#view-starter .starter-secnav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--starter-accent-soft);
  color: var(--color-info);
  font-size: 0.75rem;
  font-weight: 900;
}

#starterSecCashflow,
#starterSecBalance,
#starterSecRatios {
  scroll-margin-top: calc(var(--header-height) + 62px);
}

#view-starter .starter-frac {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--starter-soft);
}

#view-starter .starter-frac-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#view-starter .starter-frac-num,
#view-starter .starter-frac-den {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.75rem;
}

#view-starter .starter-frac-num {
  border-bottom: 2px solid var(--starter-line);
  padding-bottom: 5px;
}

#view-starter .starter-frac-den {
  padding-top: 5px;
}

#view-starter .starter-frac em {
  font-style: normal;
  color: var(--starter-muted);
  font-weight: 600;
}

#view-starter .starter-frac b {
  color: var(--starter-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-starter .starter-frac-eq {
  color: var(--starter-muted);
  font-weight: 900;
}

#view-starter .starter-frac-result {
  font-size: 0.95rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--starter-ink);
  white-space: nowrap;
}

#view-starter .starter-ratio-card.good .starter-frac-result { color: var(--color-asset); }
#view-starter .starter-ratio-card.warn .starter-frac-result { color: var(--color-warning); }
#view-starter .starter-ratio-card.bad .starter-frac-result { color: var(--color-liability); }

#view-starter .starter-ratio-note {
  margin: 10px 0 0;
  color: var(--starter-muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  #view-starter .starter-secnav button {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
  }
}

/* ==========================================================================
   v33 — sidebar: หัวข้อคั่นกลุ่มเมนู เล่าเรื่องสองขั้น (เริ่มต้นเร็ว → บันทึกละเอียด)
   ========================================================================== */

.nav-links .nav-section {
  margin: 14px 0 -2px;
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  user-select: none;
}

.nav-links .nav-section:first-of-type {
  margin-top: 10px;
}

/* ==========================================================================
   v34 — starter: กันลูกของ root grid ดันกรอบ (ตัวเลขยาวทำตกขอบที่จอกว้าง) + ค่าใน stat ยอมตัดบรรทัด
   ========================================================================== */

#view-starter .starter-root > * {
  min-width: 0;
}

#view-starter .starter-stat strong {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   v41 — sidebar พับเป็นแถบไอคอน (desktop) คืนพื้นที่จอหลัก
   - ปุ่ม toggle ที่หัว sidebar · จำค่าใน money_mgmt_sidebar (UI pref เหมือนธีม)
   - hover-peek: กางเต็มชั่วคราวเป็น overlay (ไม่ดันเนื้อหา)
   - จอเล็ก (≤900px) ไม่แตะ: ยังเป็น overlay drawer ใช้ ☰ ใน header (scope min-width:901px)
   ========================================================================== */

.sidebar-collapse-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sidebar-collapse-toggle:hover {
  background-color: var(--bg-item-hover);
  color: var(--text-primary);
}

@media (min-width: 901px) {
  /* --- พับ: ย่อความกว้าง sidebar + เลื่อน main content มาชิด --- */
  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
  }
  body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
  }

  /* ซ่อน label/ข้อความ เหลือเฉพาะไอคอน */
  body.sidebar-collapsed .sidebar .brand-logo span,
  body.sidebar-collapsed .sidebar .nav-item a span,
  body.sidebar-collapsed .sidebar .nav-section span {
    display: none;
  }
  body.sidebar-collapsed .sidebar .brand-logo,
  body.sidebar-collapsed .sidebar .sidebar-footer {
    display: none;
  }

  /* จัดไอคอน nav ให้อยู่กลางแถบแคบ */
  body.sidebar-collapsed .sidebar .nav-item a {
    justify-content: center;
    gap: 0;
    padding: 12px 0;
  }

  /* section ที่พับ → เส้นคั่นสั้น ยังเห็นการแบ่งกลุ่ม */
  body.sidebar-collapsed .sidebar .nav-links .nav-section {
    margin: 10px auto;
    padding: 0;
    width: 24px;
    height: 0;
    border-top: 1px solid var(--border-color);
  }

  /* พับ → โลโก้ซ่อน เหลือปุ่ม toggle ชิดซ้าย (ตำแหน่งคงที่ทุกสถานะ กัน peek ทำปุ่มขยับหนีเมาส์) */
  body.sidebar-collapsed .sidebar-collapse-toggle i {
    transform: rotate(180deg);
  }

  /* v42 (mike: "ไม่อยากให้ซ้อนทับ"): ตัด hover-peek ออก — พับแล้วเป็น rail นิ่ง
     ไม่กางทับเนื้อหาตอน hover · อยากดูเมนูเต็มให้กดปุ่มกาง (ดัน content ไม่ทับ)
     · hover ไอคอนเห็นชื่อผ่าน title tooltip (ตั้งใน app.js) แทน */
}

/* จอเล็ก: ไม่ใช้ปุ่มพับ (ใช้ ☰ ใน header แทน) — กัน collapse ไปกวน drawer overlay */
@media (max-width: 900px) {
  .sidebar-collapse-toggle {
    display: none;
  }
}

/* ============================================================
   v45: skip link — ทางลัดคีย์บอร์ดข้ามไปเนื้อหาหลัก
   ซ่อนสนิทจนกว่าจะโฟกัสด้วยคีย์บอร์ด (Tab แรกของหน้า)
   ============================================================ */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1200;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-focus);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transform: translateY(-72px);
    opacity: 0;
    pointer-events: none;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    outline: none;
}
#mainContent:focus { outline: none; }