/* =====================================================================
   ORYNX Cloud — Design System
   ไฟล์เดียว จบทุกสี ทุกคอมโพเนนต์ (เลิกก๊อป :root ใส่ทุกหน้า)
   โทน: ส้มอบอุ่น + อำพัน (ไม่ใช้เหลืองจัด)
   ===================================================================== */

/* ---------- Fonts (self-hosted, path อ้างจากไฟล์ CSS นี้) ---------- */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_Rg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_Bd.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_XBd.ttf') format('truetype');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
    /* --- Brand ramp: ส้มอบอุ่น --- */
    --brand-50:  #fff8f1;
    --brand-100: #ffedd9;
    --brand-200: #fed7aa;
    --brand-300: #fdba74;
    --brand-400: #fb923c;
    --brand-500: #f97316;   /* primary */
    --brand-600: #ea580c;   /* hover */
    --brand-700: #c2410c;   /* active / เข้ม */

    /* --- Accent: อำพัน (นวลตา ไม่แสบตา) --- */
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;

    /* --- Aliases (คงชื่อเดิมไว้ ไฟล์เก่าไม่พัง) --- */
    --brand-primary: var(--brand-500);
    --brand-hover:   var(--brand-600);
    --brand-active:  var(--brand-700);
    --brand-light:   var(--brand-50);
    --brand-tint:    var(--brand-100);

    /* --- Neutrals: warm stone ให้เข้ากับส้ม --- */
    --surface-bg:      #fbfaf9;
    --surface-bg-alt:  #f6f4f1;
    --card-bg:         #ffffff;
    --card-bg-subtle:  #fdfcfb;
    --text-main:       #1c1917;
    --text-strong:     #0c0a09;
    --text-muted:      #78716c;
    --text-faint:      #a8a29e;
    --border-light:    #ebe7e3;
    --border-strong:   #d9d4ce;

    /* --- Status --- */
    --ok-bg: #ecfdf5;  --ok-fg: #059669;  --ok-border: #a7f3d0;
    --warn-bg: #fffbeb; --warn-fg: #d97706; --warn-border: #fde68a;
    --bad-bg: #fef2f2;  --bad-fg: #dc2626;  --bad-border: #fecaca;
    --info-bg: #eff6ff; --info-fg: #2563eb; --info-border: #bfdbfe;

    /* --- Radius scale: โทนเหลี่ยม คมขึ้น ไม่กลมมน --- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-pill: 999px;   /* สงวนไว้ให้ scrollbar / avatar เท่านั้น */

    /* --- Elevation: เงาอุ่น ไม่ใช่เงาดำ --- */
    --sh-xs: 0 1px 2px rgba(28, 25, 23, .05);
    --sh-sm: 0 1px 2px rgba(28, 25, 23, .04), 0 2px 6px rgba(28, 25, 23, .04);
    --sh-md: 0 2px 4px rgba(28, 25, 23, .04), 0 8px 20px rgba(28, 25, 23, .06);
    --sh-lg: 0 4px 8px rgba(28, 25, 23, .04), 0 18px 40px rgba(28, 25, 23, .08);
    --sh-brand: 0 6px 18px rgba(249, 115, 22, .22);
    --sh-brand-lg: 0 12px 30px rgba(249, 115, 22, .28);

    /* --- Motion --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .15s;
    --t-base: .22s;

    --ring: 0 0 0 3px rgba(249, 115, 22, .28);
    --font-sans: 'LINE Seed Sans TH', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Bootstrap bridge --- */
    --bs-primary: var(--brand-500);
    --bs-primary-rgb: 249, 115, 22;
    --bs-link-color: var(--brand-600);
    --bs-link-hover-color: var(--brand-700);
    --bs-body-color: var(--text-main);
    --bs-body-bg: var(--surface-bg);
    --bs-border-color: var(--border-light);
    --bs-body-font-family: var(--font-sans);
    --bs-border-radius: var(--r-md);
    --bs-focus-ring-color: rgba(249, 115, 22, .25);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--surface-bg);
    background-image: none;
    font-family: var(--font-sans);
    color: var(--text-main);
    letter-spacing: -.005em;
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    color: var(--text-strong);
    letter-spacing: -.02em;
    line-height: 1.25;
}

/* บนพื้นสีเข้ม หัวข้อต้องรับสีจาก parent ไม่ใช่บังคับเป็นดำ */
.balance-card-bg, .balance-panel, .on-dark { color: #fff; }
.balance-card-bg h1, .balance-card-bg h2, .balance-card-bg h3,
.balance-card-bg h4, .balance-card-bg h5, .balance-card-bg h6,
.balance-panel h1, .balance-panel h2, .balance-panel h3,
.balance-panel h4, .balance-panel h5, .balance-panel h6,
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6 {
    color: inherit;
}
/* กัน utility ของ Bootstrap/ธีมมาทับสีบนพื้นเข้ม */
.balance-card-bg .text-dark, .balance-card-bg .text-muted,
.balance-panel .text-dark, .balance-panel .text-muted,
.on-dark .text-dark, .on-dark .text-muted {
    color: #fff !important;
}

.dropdown-item, .nav-link, .btn, .form-control, .form-select,
.badge, th, td, label, .modal-title, .modal-body {
    font-family: var(--font-sans);
}

a { text-decoration: none; }

/* ไอคอน FontAwesome ต้องไม่ถูกฟอนต์ไทยทับ */
.fa, .fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-brands, .fa-light {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.fa-regular { font-weight: 400; }
.fa-brands  { font-family: 'Font Awesome 6 Brands'; font-weight: 400; }

/* Focus ที่มองเห็นได้ (accessibility) */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.btn:focus-visible, .form-control:focus, .form-select:focus {
    box-shadow: var(--ring);
    outline: none;
}

::selection { background: var(--brand-200); color: var(--text-strong); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* =====================================================================
   3. TEXT UTILITIES
   ===================================================================== */
.text-main    { color: var(--text-main) !important; }
.text-dark    { color: var(--text-strong) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-faint   { color: var(--text-faint) !important; }
.text-brand   { color: var(--brand-600) !important; }
/* เดิมชี้ไปสีอำพัน ทำให้หัวข้อออกเหลือง — ย้ายมาใช้ส้มแบรนด์ */
.text-warning { color: var(--brand-600) !important; }

/* หัวข้อ: สีทึบเข้ม ไม่ใช้ gradient ส้ม/เหลืองอีกแล้ว
   (คงชื่อคลาสไว้ เพราะหน้าเก่ายังเรียกใช้อยู่) */
.text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-strong);
}
/* ไอคอนในหัวข้อ ใช้ส้มได้ แต่เป็นสีทึบ */
i.text-gradient, .fa.text-gradient, .fas.text-gradient, .fa-solid.text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--brand-600);
}
/* บนพื้นเข้ม หัวข้อที่ยังติดคลาสนี้ต้องเป็นขาว */
.balance-card-bg .text-gradient,
.balance-panel .text-gradient,
.on-dark .text-gradient { color: #fff; }

.ls-1 { letter-spacing: .05em; }
.mono {
    font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Consolas, monospace;
    font-feature-settings: 'zero' 1;
}

/* Eyebrow / chip เล็กเหนือหัวข้อ — เหลี่ยม โทนกลาง ไม่ใช้ส้ม */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: var(--surface-bg-alt);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* =====================================================================
   4. SURFACES
   ===================================================================== */
.card,
.dash-card,
.surface {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.card { overflow: hidden; }
.dash-card { overflow: hidden; }

.surface-subtle {
    background: var(--card-bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
}

/* การ์ดที่กดได้ / hover ยกขึ้น */
.card-hover,
.card-history,
.addon-card,
.demo-card,
.card-role {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.card-hover:hover,
.card-history:hover,
.addon-card:hover,
.demo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: var(--brand-200);
}

.demo-card, .addon-card { overflow: hidden; }
.demo-card { height: 100%; display: flex; flex-direction: column; }
.demo-body { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }

/* หัวเรื่องของหน้า */
.page-header,
.page-header-minimal {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-header-minimal { padding: 24px; margin-bottom: 28px; }
.page-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
    letter-spacing: -.02em;
}

.user-profile-section {
    background: var(--card-bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 16px;
}

/* กล่องไอคอนสี่เหลี่ยมมน */
.icon-box {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: transform var(--t-base) var(--ease);
}
.icon-box-brand { background: var(--brand-50); color: var(--brand-600); }
.icon-box-ok    { background: var(--ok-bg);    color: var(--ok-fg); }
.icon-box-info  { background: var(--info-bg);  color: var(--info-fg); }
.icon-box-bad   { background: var(--bad-bg);   color: var(--bad-fg); }
a:hover > .icon-box, .card-hover:hover .icon-box { transform: scale(1.06); }

/* =====================================================================
   5. HERO / BALANCE PANEL
   ===================================================================== */
.balance-card-bg {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--r-xl);
    color: #fff;
    /* ส้มทึบ ไม่ผสมเหลือง */
    background: var(--brand-600);
    box-shadow: var(--sh-brand-lg);
}
/* ลายจุดบางๆ ให้ไม่แบน */
.balance-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
    pointer-events: none;
}
.balance-card-bg .card-content { position: relative; z-index: 2; }

.deco-circle {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(.5px);
}
.card-content { position: relative; z-index: 2; }

/* =====================================================================
   6. BUTTONS
   ===================================================================== */
.btn {
    --btn-radius: var(--r-md);
    border-radius: var(--btn-radius);
    font-weight: 600;
    letter-spacing: -.01em;
    padding: 10px 18px;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn-lg { padding: 13px 26px; font-size: 1rem; border-radius: var(--r-lg); }
.btn-sm { padding: 7px 14px; font-size: .85rem; border-radius: var(--r-sm); }

/* ปุ่มหลัก — สีทึบ ไม่ใช้ gradient */
.btn-main,
.btn-sync {
    background-color: var(--brand-500);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: var(--sh-brand);
}
.btn-main:hover,
.btn-sync:hover:not(:disabled) {
    background-color: var(--brand-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sh-brand-lg);
}
.btn-main:active, .btn-sync:active:not(:disabled) { background-color: var(--brand-700); }
.btn-main:disabled, .btn-main.disabled,
.btn-sync:disabled {
    background: var(--surface-bg-alt);
    color: var(--text-faint);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    border-color: var(--border-light);
}
.btn-sync { width: 100%; padding: 12px; border-radius: var(--r-md); }

/* ปุ่มรอง — เส้นขอบ 1px ไม่ใช่ 2px */
.btn-outline-main {
    background: transparent;
    border: 1px solid var(--brand-300);
    color: var(--brand-700);
    box-shadow: none;
}
.btn-outline-main:hover {
    background-color: var(--brand-50);
    border-color: var(--brand-500);
    color: var(--brand-700);
    transform: translateY(-2px);
}

/* ปุ่มเงียบ */
.btn-soft {
    background: var(--surface-bg-alt);
    border: 1px solid var(--border-light);
    color: var(--text-main);
}
.btn-soft:hover { background: var(--border-light); color: var(--text-strong); }

.btn-maintenance,
.btn-maintenance:hover {
    background: var(--surface-bg-alt);
    border: 1px solid var(--border-light);
    color: var(--text-faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ปุ่มไอคอนกลม/มน */
.action-btn,
.btn-icon-soft {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-muted);
    text-decoration: none;
    transition: all var(--t-base) var(--ease);
}
.action-btn { margin-left: 4px; }
.action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300);
    color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: var(--sh-sm);
}
.btn-delete:hover {
    color: var(--bad-fg);
    border-color: var(--bad-border);
    background: var(--bad-bg);
}

.btn-icon-soft { border-color: transparent; }
.btn-icon-soft.orange { background: var(--brand-50);  color: var(--brand-700); }
.btn-icon-soft.orange:hover { background: var(--brand-500); color: #fff; }
.btn-icon-soft.green  { background: var(--ok-bg);  color: var(--ok-fg); }
.btn-icon-soft.green:hover  { background: var(--ok-fg);  color: #fff; }
.btn-icon-soft.red    { background: var(--bad-bg); color: var(--bad-fg); }
.btn-icon-soft.red:hover    { background: var(--bad-fg); color: #fff; }
.btn-icon-soft:hover { transform: translateY(-2px); }

/* Bootstrap primary ให้ตรงแบรนด์ */
.btn-primary {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.btn-outline-dark {
    border-color: var(--border-strong);
    color: var(--text-main);
}
.btn-outline-dark:hover {
    background: var(--text-strong);
    border-color: var(--text-strong);
    color: #fff;
}
.btn-light { background: var(--card-bg); border-color: var(--border-light); color: var(--text-main); }
.btn-light:hover { background: var(--surface-bg-alt); border-color: var(--border-strong); }

/* =====================================================================
   7. FORMS
   ===================================================================== */
.form-control,
.form-select {
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background-color: var(--card-bg);
    color: var(--text-main);
    padding: 11px 14px;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-400);
    background-color: var(--card-bg);
    box-shadow: var(--ring);
}
.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text-main);
    margin-bottom: 6px;
}
.form-text { color: var(--text-muted); }
.input-group-text {
    background: var(--surface-bg-alt);
    border-color: var(--border-strong);
    color: var(--text-muted);
    border-radius: var(--r-md);
}
.form-check-input:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand-400); }

/* รายการเลือกเว็บไซต์ (radio card) */
.website-list-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 6px;
}
.modern-web-label {
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
}
.modern-web-label:hover { background: var(--surface-bg-alt); border-color: var(--border-strong); }
.modern-web-input:checked + .modern-web-label {
    border-color: var(--brand-400);
    background: var(--brand-50);
    box-shadow: var(--ring);
}
.modern-web-input:checked + .modern-web-label .check-icon { opacity: 1; color: var(--brand-600); }
.modern-web-input:focus-visible + .modern-web-label { box-shadow: var(--ring); }
.check-icon { opacity: 0; transition: opacity var(--t-base) var(--ease); font-size: 1.15rem; }

/* การ์ดเลือกแพ็กเกจ */
.pkg-card {
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    background: var(--card-bg);
    transition: all var(--t-base) var(--ease);
}
.pkg-card:hover { border-color: var(--brand-300); transform: translateY(-3px); box-shadow: var(--sh-md); }
.pkg-card.selected {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: var(--ring);
}

/* =====================================================================
   8. NAV / TABS
   ===================================================================== */
.navbar {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 0;
    box-shadow: none;
    transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.navbar.is-scrolled {
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--sh-sm);
}
.navbar-brand { font-weight: 800; letter-spacing: -.03em; color: var(--text-strong); }
.navbar-brand:hover { color: var(--text-strong); }
.navbar .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: color var(--t-base) var(--ease);
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--brand-600); }
.navbar-toggler {
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    color: var(--text-main);
}
.navbar-toggler:focus { box-shadow: var(--ring); }

/* กล่องยอดเงินบน navbar — เหลี่ยม โทนกลาง ไม่ใช้ส้ม */
.balance-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    background: var(--surface-bg-alt);
    border: 1px solid var(--border-light);
}
.balance-pill small { color: var(--text-muted); font-size: .68rem; }
.balance-pill strong { color: var(--text-strong); font-size: .95rem; }

/* ปุ่มโปรไฟล์ — เหลี่ยม */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--r-sm);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--sh-xs);
    transition: all var(--t-base) var(--ease);
}
.user-chip:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.user-chip::after { color: var(--text-faint); }

.dropdown-menu {
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 8px;
    margin-top: 10px;
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-weight: 500;
    color: var(--text-main);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--brand-50);
    color: var(--brand-700);
}
.dropdown-item.text-danger:hover { background: var(--bad-bg); color: var(--bad-fg) !important; }
.dropdown-item i { width: 18px; text-align: center; margin-right: 6px; }
.dropdown-divider { border-color: var(--border-light); margin: 6px 4px; }

/* Tabs แบบ pill */
.nav-pills .nav-link {
    color: var(--text-muted);
    background: transparent;
    border-radius: var(--r-md);
    font-weight: 600;
    padding: 10px 18px;
    transition: all var(--t-base) var(--ease);
}
.nav-pills .nav-link:hover:not(.active) { background: var(--surface-bg-alt); color: var(--text-main); }
.nav-pills .nav-link.active {
    background: var(--brand-500);
    color: #fff;
    box-shadow: var(--sh-brand);
}

/* Sidebar (admin) */
.sidebar {
    background: var(--card-bg);
    min-height: 100vh;
    border-right: 1px solid var(--border-light);
    box-shadow: none;
    z-index: 10;
}

/* =====================================================================
   9. TABLES
   ===================================================================== */
.table {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    margin-bottom: 0;
}
.table > :not(caption) > * > * { border-bottom-color: var(--border-light); }
.table thead th {
    background: var(--card-bg-subtle);
    color: var(--text-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border-light);
    padding: 14px 20px;
    white-space: nowrap;
}
.table tbody td { padding: 16px 20px; vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table-hover tbody tr:hover { background: var(--brand-50); }

.modern-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.modern-table th {
    background: var(--card-bg-subtle);
    color: var(--text-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}
.modern-table td {
    padding: 18px 24px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light);
}
.modern-table tbody tr:last-child td { border-bottom: none; }
.modern-table tbody tr { transition: background var(--t-fast) var(--ease); }
.modern-table tbody tr:hover { background: var(--surface-bg-alt); }

.project-info { display: flex; flex-direction: column; gap: 4px; }

/* =====================================================================
   10. BADGES / PILLS
   ===================================================================== */
.badge { font-weight: 600; border-radius: var(--r-sm); padding: .42em .75em; }

.pill,
.status-badge,
.quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    width: fit-content;
}
.quota-badge { background: var(--surface-bg-alt); color: var(--text-main); border-color: var(--border-light); }
.pill-ok,   .badge-unlocked { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-border); }
.pill-warn                  { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.pill-bad                   { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-border); }
.pill-muted, .badge-locked  { background: var(--surface-bg-alt); color: var(--text-muted); border-color: var(--border-light); }

.bg-orange-soft {
    background-color: var(--surface-bg-alt) !important;
    color: var(--text-main) !important;
}
.bg-brand-tint { background-color: var(--surface-bg-alt) !important; }

/* Badge แปะมุมการ์ด */
.addon-badge,
.demo-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-main);
    font-size: .78rem;
    font-weight: 700;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border-light);
}

/* จุดแจ้งเตือน */
.update-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    background: var(--bad-fg);
    border-radius: 50%;
    border: 2px solid #fff;
    animation: pulse-dot 2s infinite;
}

/* =====================================================================
   11. MEDIA THUMBNAILS
   ===================================================================== */
.addon-cover {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    background: var(--surface-bg-alt);
    border-bottom: 1px solid var(--border-light);
}
.demo-img-wrapper {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: var(--surface-bg-alt);
    border-bottom: 1px solid var(--border-light);
}
.demo-img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease-out);
}
.demo-card:hover .demo-img-wrapper img { transform: scale(1.04); }

/* =====================================================================
   12. LIST ROWS
   ===================================================================== */
.role-item,
.list-row {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    transition: all var(--t-base) var(--ease);
}
.role-item:hover,
.list-row:hover {
    background: var(--card-bg-subtle);
    border-color: var(--brand-200);
    box-shadow: var(--sh-sm);
}

/* =====================================================================
   13. MODALS
   ===================================================================== */
.modal-content {
    border: 1px solid var(--border-light);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.modal-header {
    background: var(--card-bg-subtle);
    border-bottom: 1px solid var(--border-light);
    padding: 18px 24px;
}
.modal-title { font-weight: 700; letter-spacing: -.02em; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 16px 24px; }
.btn-close:focus { box-shadow: var(--ring); }

/* =====================================================================
   14. CODE / TOKEN BOX
   ===================================================================== */
.api-key-mini {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    background: var(--surface-bg-alt);
    padding: 7px 12px;
    border-radius: var(--r-sm);
    font-size: .8rem;
    color: var(--text-main);
    border: 1px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.token-text {
    display: inline-block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   15. LAYOUT
   ===================================================================== */
.main-content {
    flex: 1;
    margin-top: 78px;
    padding-bottom: 64px;
}
.section-gap { padding-top: 40px; padding-bottom: 40px; }

footer { background: var(--card-bg); border-top: 1px solid var(--border-light); }

/* เส้นคั่นบางๆ */
hr { border-color: var(--border-light); opacity: 1; }

/* =====================================================================
   16. ANIMATIONS
   ===================================================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-rise  { animation: rise-in .5s var(--ease-out) both; }
.delay-1 { animation-delay: .06s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card-hover:hover, .card-history:hover,
    .addon-card:hover, .demo-card:hover { transform: none; }
}

/* =====================================================================
   17. RESPONSIVE
   ===================================================================== */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--card-bg);
        border: 1px solid var(--border-light);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-md);
        padding: 14px;
        margin-top: 12px;
    }
    .balance-pill { width: 100%; align-items: flex-start; }
    .user-chip { width: 100%; justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    .main-content { margin-top: 70px; }
    .page-header { flex-direction: column; align-items: flex-start; }

    /* ตารางกลายเป็นการ์ดบนมือถือ */
    .modern-table thead { display: none; }
    .modern-table tbody tr { display: block; }
    .modern-table td {
        display: block;
        width: 100%;
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-light);
    }
    .modern-table tbody tr td:last-child {
        border-bottom: 10px solid var(--surface-bg);
    }
    .token-text { max-width: 150px; }
    .mobile-token-wrapper { margin-top: 10px; }
    .mobile-actions { margin-top: 14px; display: flex; gap: 8px; }
    .mobile-actions .action-btn,
    .action-btn.is-mobile {
        width: auto;
        flex: 1;
        height: 42px;
        padding: 0 15px;
        font-size: .82rem;
        margin-left: 0;
    }
    .mobile-actions .action-btn i { margin-right: 8px; }
}

/* =====================================================================
   18. PRINT
   ===================================================================== */
@media print {
    .navbar, footer, .btn { display: none !important; }
    body { background: #fff; }
}