/* ═══════════════════════════════════════════════════════════════════
 * PKKT Professional v2 — B2B SaaS upgrade · Round 4.8.7+++++++.9e
 * ═══════════════════════════════════════════════════════════════════
 * เปลี่ยนจาก "เหมือนเด็กขายของ" → "professional B2B SaaS"
 *
 * Inspired by: Stripe, Linear, Vercel, Notion, Mercury Bank
 * Design philosophy: Trust, Clarity, Precision
 *
 * Loaded AFTER pkkt-design.css to override
 * ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Cortex Spectrum Palette (PKKT Cortex · Round 5) ───
     * Inspired by PEAK but distinctive · navy+teal+amber instead of blue+orange
     * Trust (navy) · AI/Tech (teal) · Premium warmth (amber) · WCAG AA compliant
     */
    --pkkt-primary:        #1E3A5F;   /* Sapphire Navy — trust + intelligence */
    --pkkt-primary-hover:  #15293F;
    --pkkt-primary-soft:   #EBF0F7;
    --pkkt-primary-border: #C5D2E2;

    /* Cortex teal — AI/data signature color */
    --pkkt-accent:         #0EA5A5;   /* Cyan Teal — AI/tech accent */
    --pkkt-accent-soft:    #CFFAFA;
    --pkkt-accent-hover:   #0B7E7E;

    /* Highlight — sparingly for premium CTAs */
    --pkkt-highlight:      #F59E0B;   /* Honey Amber — warmth + premium */
    --pkkt-highlight-soft: #FEF3C7;

    --pkkt-success:        #059669;   /* Emerald — authority green */
    --pkkt-success-soft:   #D1FAE5;
    --pkkt-danger:         #B91C1C;   /* Brick Red — dignified, not alarm */
    --pkkt-danger-soft:    #FEE2E2;
    --pkkt-warning:        #D97706;
    --pkkt-warning-soft:   #FEF3C7;
    --pkkt-info:           #0369A1;
    --pkkt-info-soft:      #E0F2FE;

    /* ─── Cortex warm neutrals (Linen surface, Charcoal text) ─── */
    --pkkt-bg:           #FAFAF8;     /* Linen — warm white not sterile */
    --pkkt-surface:      #FFFFFF;
    --pkkt-surface-2:    #F5F4F2;
    --pkkt-surface-3:    #E7E5E2;
    --pkkt-text:         #0F1419;     /* Charcoal — warm near-black */
    --pkkt-text-2:       #57534E;     /* Warm gray */
    --pkkt-text-3:       #A8A29E;
    --pkkt-border:       #E7E5E2;     /* Stone — warm gray */
    --pkkt-border-soft:  #F5F4F2;

    /* ─── Plan badges (sophisticated, not rainbow) ─── */
    --pkkt-plan-free:        #78716C;
    --pkkt-plan-basic:       #0369A1;
    --pkkt-plan-standard:    #047857;
    --pkkt-plan-pro:         linear-gradient(135deg, #0F4C81, #1E3A8A);
    --pkkt-plan-enterprise:  linear-gradient(135deg, #1C1917, #44403C);

    /* ─── Effects (refined, not floating) ─── */
    --pkkt-shadow-sm:    0 1px 2px rgba(28, 25, 23, 0.04);
    --pkkt-shadow:       0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
    --pkkt-shadow-md:    0 4px 12px rgba(28, 25, 23, 0.06), 0 2px 4px rgba(28, 25, 23, 0.04);
    --pkkt-shadow-lg:    0 8px 24px rgba(28, 25, 23, 0.08), 0 4px 8px rgba(28, 25, 23, 0.04);

    /* Refined corners — slightly tighter for serious feel */
    --pkkt-radius:       8px;
    --pkkt-radius-sm:    6px;
    --pkkt-radius-lg:    12px;
    --pkkt-radius-pill:  999px;
    --pkkt-anim:         all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    /* Map to legacy */
    --primary:    var(--pkkt-primary);
    --success:    var(--pkkt-success);
    --danger:     var(--pkkt-danger);
    --warning:    var(--pkkt-warning);
    --bg:         var(--pkkt-bg);
    --surface:    var(--pkkt-surface);
    --surface-2:  var(--pkkt-surface-2);
    --text:       var(--pkkt-text);
    --text-2:     var(--pkkt-text-2);
    --muted:      var(--pkkt-text-2);
    --border:     var(--pkkt-border);
}

/* ─── Typography refinement ─── */
body {
    font-family: 'IBM Plex Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11";  /* Better numerals + Thai legibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--pkkt-text);
    background: var(--pkkt-bg);
    letter-spacing: -0.011em;  /* tighter for sophisticated feel */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;            /* not 700 (less aggressive) */
    letter-spacing: -0.022em;    /* tighter headings */
    color: var(--pkkt-text);
    line-height: 1.25;
}
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

/* Tabular numerals for accounting tables */
.amount, td.numeric, .num, code, kbd, .mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}

/* ─── Buttons — flat, confident, no gradients ─── */
.btn, .btn-primary, .btn-secondary, button[type="submit"] {
    border-radius: var(--pkkt-radius-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: var(--pkkt-anim);
    box-shadow: none;
    border: 1px solid transparent;
    padding: 8px 14px;
    font-size: 14px;
}
.btn-primary, button[type="submit"] {
    background: var(--pkkt-primary);
    color: #fff;
    border-color: var(--pkkt-primary);
}
.btn-primary:hover, button[type="submit"]:hover {
    background: var(--pkkt-primary-hover);
    border-color: var(--pkkt-primary-hover);
    box-shadow: var(--pkkt-shadow-sm);
}
.btn-secondary {
    background: var(--pkkt-surface);
    color: var(--pkkt-text);
    border-color: var(--pkkt-border);
}
.btn-secondary:hover {
    background: var(--pkkt-surface-2);
    border-color: var(--pkkt-text-3);
}

/* ─── Cards — subtle borders instead of shadows ─── */
.card, .panel, .pkkt-card {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius);
    box-shadow: none;            /* prefer borders for cleanness */
}
.card:hover { border-color: var(--pkkt-border-soft); }

/* ─── Forms — refined inputs ─── */
.form-input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], textarea, select {
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    background: var(--pkkt-surface);
    color: var(--pkkt-text);
    transition: var(--pkkt-anim);
    box-shadow: var(--pkkt-shadow-sm);
}
.form-input:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--pkkt-primary);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

/* ─── Tables — financial-grade ─── */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--pkkt-surface);
}
table th {
    background: var(--pkkt-surface-2);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pkkt-text-2);
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pkkt-border);
}
table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pkkt-border-soft);
    font-size: 14px;
}
table tr:hover td { background: var(--pkkt-surface-2); }
table td.amount, table th.amount, .col-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Inter', system-ui, sans-serif;
}

/* ─── Badges — restrained ─── */
.badge, .pill, .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--pkkt-radius-pill);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: var(--pkkt-surface-2);
    color: var(--pkkt-text-2);
    border: 1px solid var(--pkkt-border);
}
.badge-success { background: var(--pkkt-success-soft); color: var(--pkkt-success); border-color: transparent; }
.badge-danger  { background: var(--pkkt-danger-soft);  color: var(--pkkt-danger);  border-color: transparent; }
.badge-warning { background: var(--pkkt-warning-soft); color: var(--pkkt-warning); border-color: transparent; }
.badge-info    { background: var(--pkkt-info-soft);    color: var(--pkkt-info);    border-color: transparent; }

/* ─── Page-level layout polish ─── */
.page-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pkkt-border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.page-header h1 {
    margin: 0 0 4px 0;
}
.page-header .subtitle {
    color: var(--pkkt-text-2);
    font-size: 14px;
    margin: 0;
}

/* ─── Top nav — dignified ─── */
.pkkt-topnav, .pkkt-nav-row {
    background: var(--pkkt-surface);
    border-bottom: 1px solid var(--pkkt-border);
    box-shadow: none;
}

.pkkt-nav-tab {
    color: var(--pkkt-text-2);
    border-bottom: 2px solid transparent;
    transition: var(--pkkt-anim);
    border-radius: 0;
    padding: 14px 16px;
}
.pkkt-nav-tab:hover {
    color: var(--pkkt-text);
    background: transparent;
}
.pkkt-nav-tab.active {
    color: var(--pkkt-primary);
    border-bottom-color: var(--pkkt-primary);
    background: transparent;
    font-weight: 600;
}

/* ─── KPI numbers — bold + tabular ─── */
.kpi, .stat-number, .v {
    font-family: 'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--pkkt-text);
}

/* ─── Sidebars — quieter ─── */
.sidebar, .v-sidebar {
    background: var(--pkkt-surface);
    border-right: 1px solid var(--pkkt-border);
    box-shadow: none;
}

/* ─── Remove rainbow gradients — replace with single color ─── */
[style*="linear-gradient(135deg, #06c755"],
[style*="linear-gradient(135deg, #16a34a"] {
    background: var(--pkkt-success) !important;
}
[style*="linear-gradient(135deg, #2563eb"],
[style*="linear-gradient(135deg, #5B6CFF"] {
    background: var(--pkkt-primary) !important;
}

/* ─── Alerts — subdued, no exclamation marks ─── */
.alert {
    border-radius: var(--pkkt-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid;
    background: var(--pkkt-surface-2);
}
.alert-success { background: var(--pkkt-success-soft); border-color: var(--pkkt-success); color: var(--pkkt-success); }
.alert-danger  { background: var(--pkkt-danger-soft);  border-color: var(--pkkt-danger);  color: var(--pkkt-danger); }
.alert-warning { background: var(--pkkt-warning-soft); border-color: var(--pkkt-warning); color: var(--pkkt-warning); }
.alert-info    { background: var(--pkkt-info-soft);    border-color: var(--pkkt-info);    color: var(--pkkt-info); }

/* ─── Login / landing — premium hero ─── */
.login-page, .auth-page, .landing-hero {
    background: linear-gradient(180deg, var(--pkkt-bg) 0%, var(--pkkt-surface-2) 100%);
}
.login-card {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    box-shadow: var(--pkkt-shadow-md);
    border-radius: var(--pkkt-radius-lg);
}

/* ─── Spacing rhythm — generous, breathable ─── */
.container, .main-content, .v-content, .m-content {
    padding: 24px;
}
@media (min-width: 1024px) {
    .container, .main-content { padding: 32px 40px; }
}

/* ─── Trust footer — show compliance prominently ─── */
.trust-strip {
    border-top: 1px solid var(--pkkt-border);
    padding: 20px 0;
    color: var(--pkkt-text-2);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.04em;
    background: var(--pkkt-surface);
}
.trust-strip strong { color: var(--pkkt-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
 * CORTEX COMPONENT LIBRARY · 25 components
 * Naming convention: cx-<component>-<variant>
 * ═══════════════════════════════════════════════════════════════ */

/* ── Cortex Button (cx-btn) ── */
.cx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 14px; border-radius: var(--pkkt-radius-sm);
    font-size: 14px; font-weight: 500; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer;
    transition: var(--pkkt-anim); text-decoration: none;
    letter-spacing: -0.005em; white-space: nowrap;
}
.cx-btn-primary { background: var(--pkkt-primary); color: #fff; border-color: var(--pkkt-primary); }
.cx-btn-primary:hover { background: var(--pkkt-primary-hover); border-color: var(--pkkt-primary-hover); }
.cx-btn-secondary { background: var(--pkkt-surface); color: var(--pkkt-text); border-color: var(--pkkt-border); }
.cx-btn-secondary:hover { background: var(--pkkt-surface-2); border-color: var(--pkkt-text-3); }
.cx-btn-accent { background: var(--pkkt-accent); color: #fff; border-color: var(--pkkt-accent); }
.cx-btn-accent:hover { background: var(--pkkt-accent-hover); border-color: var(--pkkt-accent-hover); }
.cx-btn-ghost { background: transparent; color: var(--pkkt-text-2); border-color: transparent; }
.cx-btn-ghost:hover { background: var(--pkkt-surface-2); color: var(--pkkt-text); }
.cx-btn-danger { background: var(--pkkt-danger); color: #fff; border-color: var(--pkkt-danger); }
.cx-btn-success { background: var(--pkkt-success); color: #fff; border-color: var(--pkkt-success); }
.cx-btn-sm { padding: 4px 10px; font-size: 13px; }
.cx-btn-lg { padding: 12px 22px; font-size: 16px; font-weight: 600; }
.cx-btn:disabled, .cx-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Cortex Card (cx-card) ── */
.cx-card {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius);
    overflow: hidden;
}
.cx-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pkkt-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.cx-card-title { font-size: 15px; font-weight: 600; color: var(--pkkt-text); margin: 0; }
.cx-card-subtitle { font-size: 13px; color: var(--pkkt-text-2); margin-top: 2px; }
.cx-card-body { padding: 20px; }
.cx-card-footer {
    padding: 14px 20px; border-top: 1px solid var(--pkkt-border);
    background: var(--pkkt-surface-2);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Cortex Stat Card (cx-stat) ── */
.cx-stat {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius);
    padding: 18px 20px;
    transition: var(--pkkt-anim);
}
.cx-stat:hover { border-color: var(--pkkt-text-3); }
.cx-stat-label {
    font-size: 12px; color: var(--pkkt-text-2);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
    margin-bottom: 8px;
}
.cx-stat-value {
    font-size: 28px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; color: var(--pkkt-text);
    line-height: 1.1;
}
.cx-stat-delta {
    margin-top: 6px; font-size: 12px;
    display: flex; align-items: center; gap: 4px;
}
.cx-stat-delta.up { color: var(--pkkt-success); }
.cx-stat-delta.down { color: var(--pkkt-danger); }
.cx-stat-delta.neutral { color: var(--pkkt-text-2); }

/* ── Cortex Table (cx-table) ── */
.cx-table-wrap {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius);
    overflow: hidden;
}
.cx-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
}
.cx-table thead th {
    background: var(--pkkt-surface-2);
    color: var(--pkkt-text-2);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    text-align: left; padding: 10px 14px;
    border-bottom: 1px solid var(--pkkt-border);
    white-space: nowrap;
}
.cx-table thead th.sortable {
    cursor: pointer; user-select: none;
    padding-right: 24px; position: relative;
}
.cx-table thead th.sortable::after {
    content: '↕'; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); opacity: 0.4; font-size: 10px;
}
.cx-table thead th.sorted-asc::after { content: '↑'; opacity: 1; color: var(--pkkt-primary); }
.cx-table thead th.sorted-desc::after { content: '↓'; opacity: 1; color: var(--pkkt-primary); }
.cx-table tbody td {
    padding: 11px 14px; font-size: 14px;
    border-bottom: 1px solid var(--pkkt-border-soft);
    color: var(--pkkt-text);
}
.cx-table tbody tr:last-child td { border-bottom: none; }
.cx-table tbody tr:hover td { background: var(--pkkt-surface-2); }
.cx-table .num, .cx-table .amount {
    text-align: right; font-variant-numeric: tabular-nums;
}
.cx-table .actions {
    text-align: right; white-space: nowrap;
}
.cx-table-empty {
    padding: 60px 20px; text-align: center;
    color: var(--pkkt-text-2);
}

/* ── Cortex Badge (cx-badge) ── */
.cx-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--pkkt-radius-pill);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.02em; line-height: 1.4;
    background: var(--pkkt-surface-2); color: var(--pkkt-text-2);
    border: 1px solid var(--pkkt-border);
}
.cx-badge-primary { background: var(--pkkt-primary-soft); color: var(--pkkt-primary); border-color: transparent; }
.cx-badge-accent  { background: var(--pkkt-accent-soft);  color: var(--pkkt-accent-hover); border-color: transparent; }
.cx-badge-success { background: var(--pkkt-success-soft); color: var(--pkkt-success); border-color: transparent; }
.cx-badge-danger  { background: var(--pkkt-danger-soft);  color: var(--pkkt-danger);  border-color: transparent; }
.cx-badge-warning { background: var(--pkkt-warning-soft); color: var(--pkkt-warning); border-color: transparent; }
.cx-badge-info    { background: var(--pkkt-info-soft);    color: var(--pkkt-info);    border-color: transparent; }
.cx-badge-highlight { background: var(--pkkt-highlight-soft); color: var(--pkkt-highlight); border-color: transparent; }

/* ── Cortex Alert (cx-alert) ── */
.cx-alert {
    border: 1px solid; border-radius: var(--pkkt-radius-sm);
    padding: 12px 16px; font-size: 14px;
    display: flex; align-items: flex-start; gap: 10px;
}
.cx-alert-icon { flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 1px; }
.cx-alert-body { flex: 1; }
.cx-alert-title { font-weight: 600; margin-bottom: 2px; }
.cx-alert-success { background: var(--pkkt-success-soft); border-color: var(--pkkt-success); color: var(--pkkt-success); }
.cx-alert-danger  { background: var(--pkkt-danger-soft);  border-color: var(--pkkt-danger);  color: var(--pkkt-danger); }
.cx-alert-warning { background: var(--pkkt-warning-soft); border-color: var(--pkkt-warning); color: var(--pkkt-warning); }
.cx-alert-info    { background: var(--pkkt-info-soft);    border-color: var(--pkkt-info);    color: var(--pkkt-info); }

/* ── Cortex Form (cx-form) ── */
.cx-form-group { margin-bottom: 16px; }
.cx-label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--pkkt-text); margin-bottom: 6px;
}
.cx-label-required::after { content: ' *'; color: var(--pkkt-danger); }
.cx-input, .cx-select, .cx-textarea {
    width: 100%; border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius-sm); padding: 9px 12px;
    font-size: 14px; line-height: 1.4;
    background: var(--pkkt-surface); color: var(--pkkt-text);
    transition: var(--pkkt-anim);
    font-family: inherit;
}
.cx-input:focus, .cx-select:focus, .cx-textarea:focus {
    outline: none; border-color: var(--pkkt-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.cx-input::placeholder, .cx-textarea::placeholder { color: var(--pkkt-text-3); }
.cx-help { font-size: 12px; color: var(--pkkt-text-2); margin-top: 4px; }
.cx-error { font-size: 12px; color: var(--pkkt-danger); margin-top: 4px; }

/* ── Cortex Tabs (cx-tabs) ── */
.cx-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--pkkt-border);
    margin-bottom: 20px; overflow-x: auto;
}
.cx-tab {
    padding: 12px 16px; font-size: 14px; font-weight: 500;
    color: var(--pkkt-text-2); border-bottom: 2px solid transparent;
    cursor: pointer; transition: var(--pkkt-anim);
    white-space: nowrap; text-decoration: none;
    background: transparent; border-top: 0; border-left: 0; border-right: 0;
}
.cx-tab:hover { color: var(--pkkt-text); }
.cx-tab.active { color: var(--pkkt-primary); border-bottom-color: var(--pkkt-primary); font-weight: 600; }

/* ── Cortex Modal (cx-modal) ── */
.cx-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 20, 25, 0.5);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(2px);
    animation: cx-fadein 0.15s;
}
@keyframes cx-fadein { from { opacity: 0; } to { opacity: 1; } }
.cx-modal {
    background: var(--pkkt-surface); border-radius: var(--pkkt-radius-lg);
    box-shadow: var(--pkkt-shadow-lg);
    max-width: 540px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column;
    animation: cx-modal-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cx-modal-in {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.cx-modal-header {
    padding: 18px 22px; border-bottom: 1px solid var(--pkkt-border);
    display: flex; align-items: center; justify-content: space-between;
}
.cx-modal-title { font-size: 17px; font-weight: 600; margin: 0; }
.cx-modal-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--pkkt-text-2); font-size: 22px; line-height: 1;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cx-modal-close:hover { background: var(--pkkt-surface-2); color: var(--pkkt-text); }
.cx-modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.cx-modal-footer {
    padding: 14px 22px; border-top: 1px solid var(--pkkt-border);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Cortex Toast (cx-toast) ── */
.cx-toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 380px;
}
.cx-toast {
    background: var(--pkkt-text); color: #fff;
    border-radius: var(--pkkt-radius-sm); padding: 12px 16px;
    box-shadow: var(--pkkt-shadow-lg);
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; min-width: 280px;
    animation: cx-toast-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cx-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.cx-toast-success { background: var(--pkkt-success); }
.cx-toast-danger  { background: var(--pkkt-danger); }
.cx-toast-warning { background: var(--pkkt-warning); }

/* ── Cortex Skeleton (cx-skeleton) ── */
.cx-skeleton {
    background: linear-gradient(90deg,
        var(--pkkt-surface-2) 0%,
        var(--pkkt-surface-3) 50%,
        var(--pkkt-surface-2) 100%);
    background-size: 200% 100%;
    animation: cx-shimmer 1.5s infinite;
    border-radius: var(--pkkt-radius-sm);
    height: 16px;
}
@keyframes cx-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.cx-skeleton-line { height: 14px; margin-bottom: 8px; }
.cx-skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.cx-skeleton-circle { border-radius: 50%; }

/* ── Cortex Empty State (cx-empty) ── */
.cx-empty {
    text-align: center; padding: 60px 24px;
    color: var(--pkkt-text-2);
}
.cx-empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.6; }
.cx-empty-title {
    font-size: 17px; font-weight: 600;
    color: var(--pkkt-text); margin-bottom: 6px;
}
.cx-empty-text { font-size: 14px; max-width: 360px; margin: 0 auto 20px; }

/* ── Cortex Avatar (cx-avatar) ── */
.cx-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pkkt-primary-soft); color: var(--pkkt-primary);
    font-weight: 600; font-size: 14px;
    overflow: hidden; flex-shrink: 0;
}
.cx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cx-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.cx-avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.cx-avatar-xl { width: 64px; height: 64px; font-size: 24px; }

/* ── Cortex Pagination (cx-pagination) ── */
.cx-pagination {
    display: flex; gap: 4px; align-items: center;
    justify-content: center; padding: 16px 0;
}
.cx-page {
    min-width: 32px; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pkkt-border); border-radius: var(--pkkt-radius-sm);
    background: var(--pkkt-surface); color: var(--pkkt-text);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: var(--pkkt-anim); text-decoration: none;
}
.cx-page:hover { background: var(--pkkt-surface-2); }
.cx-page.active { background: var(--pkkt-primary); color: #fff; border-color: var(--pkkt-primary); }
.cx-page:disabled, .cx-page.disabled {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* ── Cortex Breadcrumb (cx-breadcrumb) ── */
.cx-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--pkkt-text-2);
    margin-bottom: 16px;
}
.cx-breadcrumb a { color: var(--pkkt-text-2); text-decoration: none; }
.cx-breadcrumb a:hover { color: var(--pkkt-primary); }
.cx-breadcrumb-sep { color: var(--pkkt-text-3); }
.cx-breadcrumb-current { color: var(--pkkt-text); font-weight: 500; }

/* ── Cortex Progress (cx-progress) ── */
.cx-progress {
    width: 100%; height: 6px;
    background: var(--pkkt-surface-2);
    border-radius: var(--pkkt-radius-pill); overflow: hidden;
}
.cx-progress-bar {
    height: 100%;
    background: var(--pkkt-primary);
    transition: width 0.3s ease;
    border-radius: var(--pkkt-radius-pill);
}
.cx-progress-bar.success { background: var(--pkkt-success); }
.cx-progress-bar.danger  { background: var(--pkkt-danger); }
.cx-progress-bar.warning { background: var(--pkkt-warning); }

/* ── Cortex Search Box (cx-search) ── */
.cx-search {
    position: relative; display: inline-flex; align-items: center;
    width: 100%; max-width: 360px;
}
.cx-search input {
    width: 100%; padding: 8px 12px 8px 36px;
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius-sm);
    font-size: 14px; background: var(--pkkt-surface);
}
.cx-search::before {
    content: '🔍'; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); font-size: 12px; opacity: 0.5;
}

/* ── Cortex Section Header (cx-section) ── */
.cx-section-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
    padding-bottom: 16px; border-bottom: 1px solid var(--pkkt-border);
}
.cx-section-title {
    font-size: 22px; font-weight: 700;
    color: var(--pkkt-text); margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}
.cx-section-subtitle {
    font-size: 14px; color: var(--pkkt-text-2);
    margin: 0;
}
.cx-section-actions { display: flex; gap: 8px; align-items: center; }

/* ── Cortex Pill Tabs (cx-pills) ── */
.cx-pills {
    display: inline-flex; gap: 4px;
    background: var(--pkkt-surface-2);
    padding: 4px; border-radius: var(--pkkt-radius-pill);
}
.cx-pill {
    padding: 6px 14px; border-radius: var(--pkkt-radius-pill);
    font-size: 13px; font-weight: 500;
    color: var(--pkkt-text-2); cursor: pointer;
    border: 0; background: transparent;
    transition: var(--pkkt-anim);
}
.cx-pill:hover { color: var(--pkkt-text); }
.cx-pill.active {
    background: var(--pkkt-surface);
    color: var(--pkkt-text); font-weight: 600;
    box-shadow: var(--pkkt-shadow-sm);
}

/* ── Cortex KPI grid (cx-kpis) ── */
.cx-kpis {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 20px;
}

/* ── Cortex Sparkline (cx-spark) — pure CSS ─ */
.cx-spark {
    display: inline-block; vertical-align: middle;
    width: 80px; height: 24px;
}

/* ── Cortex Divider (cx-divider) ── */
.cx-divider {
    height: 1px; background: var(--pkkt-border);
    margin: 16px 0; border: 0;
}
.cx-divider-text {
    display: flex; align-items: center; gap: 12px;
    color: var(--pkkt-text-2); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 20px 0;
}
.cx-divider-text::before, .cx-divider-text::after {
    content: ''; flex: 1; height: 1px; background: var(--pkkt-border);
}

/* ═══════════════════════════════════════════════════════════════
 * CORTEX DENSITY UPGRADE — PEAK-grade spacious sizing (Round 5.0.2)
 * ═══════════════════════════════════════════════════════════════
 * แก้ปัญหา: ระบบเดิมใช้ font 13-14px, padding 8-10px → เล็กกว่า PEAK 30-40%
 * เป้าหมาย: B2B SaaS ระดับโลก ต้อง breathable, professional, easy to scan
 * อ้างอิง: PEAK uses 16px base, 14-16px nav padding, 48px+ menu items
 * ═══════════════════════════════════════════════════════════════ */

:root {
    /* Density scale — bump everything */
    --cx-text-xs:  12px;
    --cx-text-sm:  14px;
    --cx-text-md:  15px;     /* base body up from 14 */
    --cx-text-lg:  17px;
    --cx-text-xl:  20px;
    --cx-text-2xl: 26px;
    --cx-text-3xl: 32px;
    --cx-space-1:  4px;
    --cx-space-2:  8px;
    --cx-space-3:  12px;
    --cx-space-4:  16px;
    --cx-space-5:  20px;
    --cx-space-6:  24px;
    --cx-space-8:  32px;
}

/* ROUND 5.0.12 · SCOPE FIX — density rules apply only when body has .cortex-density class
 * Old admin/business pages: NOT affected (no class) — keeps original CSS
 * New marketing/cortex pages: opt-in via body class="cortex-density"
 * ═══════════════════════════════════════════════════════════════ */

/* Base body bump — only when opt-in */
body.cortex-density {
    font-size: 15px;
    line-height: 1.55;
}

/* ── TopNav — PEAK-grade spacing (only on .cortex-density pages) ── */
body.cortex-density .pkkt-topnav {
    padding: 14px 24px !important;
    min-height: 64px !important;
}
body.cortex-density .pkkt-icon-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
}
body.cortex-density .pkkt-icon-btn .pkkt-dot {
    top: 4px !important;
    right: 4px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
}

/* ── Section nav row (the bottom tab bar) — PEAK-grade ── */
.pkkt-nav-row {
    border-bottom: 1px solid var(--pkkt-border);
}
.pkkt-nav-inner {
    padding: 0 24px;
    gap: 6px;
}
body.cortex-density .pkkt-nav-tab {
    padding: 16px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    color: var(--pkkt-text-2);
    transition: var(--pkkt-anim);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.cortex-density .pkkt-nav-tab > span,
body.cortex-density .pkkt-nav-tab > svg { font-size: 17px; }
body.cortex-density .pkkt-nav-tab:hover {
    color: var(--pkkt-text);
    background: transparent;
}
body.cortex-density .pkkt-nav-tab.active {
    color: var(--pkkt-primary) !important;
    border-bottom-color: var(--pkkt-primary) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* ── Dropdown menus — PEAK-style spacious (cortex-density only · was polluting global .dropdown-menu) ── */
body.cortex-density .pkkt-dropdown,
body.cortex-density .pkkt-menu {
    background: var(--pkkt-surface);
    border: 1px solid var(--pkkt-border);
    border-radius: var(--pkkt-radius-lg);
    box-shadow: var(--pkkt-shadow-lg);
    padding: 8px;
    min-width: 260px;
}
body.cortex-density .pkkt-dropdown a,
body.cortex-density .pkkt-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--pkkt-text);
    border-radius: var(--pkkt-radius-sm);
    text-decoration: none;
    line-height: 1.4;
    min-height: 44px;
    transition: var(--pkkt-anim);
}
body.cortex-density .pkkt-dropdown a:hover,
body.cortex-density .pkkt-dropdown .menu-item:hover {
    background: var(--pkkt-primary-soft);
    color: var(--pkkt-primary);
}
body.cortex-density .pkkt-dropdown .menu-section {
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--pkkt-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.cortex-density .pkkt-dropdown .menu-divider {
    height: 1px;
    background: var(--pkkt-border);
    margin: 6px 0;
}

/* ── Headings — only on cortex-density pages ── */
body.cortex-density h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
body.cortex-density h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
body.cortex-density h3 { font-size: 20px; font-weight: 600; }
body.cortex-density h4 { font-size: 17px; font-weight: 600; }

body.cortex-density .page-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
}
.page-header h1 {
    font-size: 32px;
    margin-bottom: 6px;
}
.page-header .subtitle {
    font-size: 16px;
    color: var(--pkkt-text-2);
}

/* ── Buttons — bigger, more confident ── */
.cx-btn {
    padding: 11px 18px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    min-height: 42px;
    line-height: 1.3;
}
.cx-btn-sm {
    padding: 7px 12px !important;
    font-size: 13px !important;
    min-height: 32px;
}
.cx-btn-lg {
    padding: 14px 24px !important;
    font-size: 17px !important;
    min-height: 50px;
    font-weight: 600;
}
/* .btn override REMOVED — was polluting existing pages
 * cx-btn keeps its own sizing (only on elements with .cx-btn class) */
body.cortex-density .btn,
body.cortex-density .btn-primary,
body.cortex-density .btn-secondary,
body.cortex-density button[type="submit"] {
    padding: 11px 18px;
    font-size: 15px;
    border-radius: 8px;
    min-height: 42px;
}
body.cortex-density .btn-sm { padding: 7px 12px; font-size: 13px; min-height: 32px; }
body.cortex-density .btn-lg { padding: 14px 24px; font-size: 17px; min-height: 50px; }

/* ── Form inputs — only cortex-density pages get bigger sizing ── */
body.cortex-density .cx-input, body.cortex-density .cx-select, body.cortex-density .cx-textarea,
body.cortex-density .form-input,
body.cortex-density input[type="text"], body.cortex-density input[type="email"],
body.cortex-density input[type="password"], body.cortex-density input[type="number"],
body.cortex-density input[type="date"], body.cortex-density input[type="datetime-local"],
body.cortex-density input[type="search"], body.cortex-density input[type="tel"],
body.cortex-density input[type="url"], body.cortex-density textarea,
body.cortex-density select {
    padding: 11px 14px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    min-height: 44px;
    line-height: 1.4;
}
body.cortex-density .cx-label, body.cortex-density label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--pkkt-text);
}
body.cortex-density .cx-form-group, body.cortex-density .form-group {
    margin-bottom: 20px;
}
body.cortex-density .cx-help, body.cortex-density .form-help, body.cortex-density .help-text {
    font-size: 13px;
    margin-top: 6px;
    color: var(--pkkt-text-2);
}

/* ── Tables — only cortex-density pages get bigger ── */
body.cortex-density .cx-table thead th, body.cortex-density table th {
    padding: 14px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
}
body.cortex-density .cx-table tbody td, body.cortex-density table td {
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.5;
}

/* ── Badges — only cortex-density ── */
body.cortex-density .cx-badge, body.cortex-density .badge,
body.cortex-density .pill, body.cortex-density .tag {
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
/* cx-badge ALWAYS gets cortex sizing (cx-* class is opt-in by element) */
.cx-badge {
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ── Cards — more padding ── */
.cx-card-header {
    padding: 18px 22px;
}
.cx-card-title { font-size: 17px; }
.cx-card-subtitle { font-size: 14px; }
.cx-card-body { padding: 22px; }
.cx-card-footer { padding: 16px 22px; }

/* ── .card padding: SCOPED to cortex-density only (was breaking admin .card) ── */
body.cortex-density .card,
body.cortex-density .panel,
body.cortex-density .pkkt-card {
    padding: 24px 26px;
    border-radius: 12px;
}
body.cortex-density .card h2 { font-size: 24px; margin-bottom: 14px; }
body.cortex-density .card h3 { font-size: 19px; margin: 20px 0 10px; }
body.cortex-density .card h4 { font-size: 16px; margin: 16px 0 8px; }
body.cortex-density .card p, body.cortex-density .card li { font-size: 15px; line-height: 1.65; }

/* ── cx-stat: keeps own sizing (cx-* class is opt-in) ── */
.cx-stat {
    padding: 22px 24px;
    border-radius: 12px;
}
.cx-stat-label {
    font-size: 13px;
    margin-bottom: 10px;
    letter-spacing: 0.06em;
}
.cx-stat-value {
    font-size: 34px !important;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.cx-stat-delta {
    font-size: 13px;
    margin-top: 8px;
}

/* ── Alerts: cx-alert keeps · .alert global SCOPED ── */
.cx-alert {
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
}
body.cortex-density .alert {
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
}
.cx-alert-icon { font-size: 20px; }
.cx-alert-title { font-size: 15px; margin-bottom: 4px; }

/* ── Tabs (cx-* opt-in) ── */
.cx-tabs { margin-bottom: 24px; gap: 4px; }
.cx-tab {
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-bottom-width: 3px !important;
}
.cx-pills { padding: 5px; gap: 5px; }
.cx-pill {
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ── Sidebar — SCOPED (was breaking existing village sidebar) ── */
body.cortex-density .sidebar a,
body.cortex-density .v-sidebar a,
body.cortex-density .nav-link,
body.cortex-density .menu-link {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.cortex-density .sidebar .nav-section, body.cortex-density .v-sidebar .nav-section {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pkkt-text-3);
}

/* ── Notification dropdown (FB-style · global · OK to keep) ── */
.pkkt-notif-panel { width: 420px !important; }
.pkkt-notif-header { padding: 16px 18px !important; }
.pkkt-notif-header strong { font-size: 17px !important; }
.pkkt-notif-item { padding: 14px 18px !important; }
.pkkt-notif-pic { width: 44px !important; height: 44px !important; }
.pkkt-notif-title { font-size: 15px !important; }
.pkkt-notif-text { font-size: 14px !important; }
.pkkt-notif-time { font-size: 12px !important; margin-top: 6px !important; }

/* ── Avatars — slightly bigger ── */
.cx-avatar { width: 40px; height: 40px; font-size: 15px; }
.cx-avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.cx-avatar-lg { width: 52px; height: 52px; font-size: 19px; }
.cx-avatar-xl { width: 72px; height: 72px; font-size: 26px; }

/* ── Container padding — generous ── */
.container, .main-content, .v-content, .m-content, .wrap {
    padding: 28px 24px;
}
@media (min-width: 1024px) {
    .container, .main-content, .wrap { padding: 36px 44px; }
}

/* ── Section spacing ── */
.cx-section-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
}
.cx-section-title {
    font-size: 26px !important;
    margin-bottom: 6px !important;
}
.cx-section-subtitle {
    font-size: 15px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * LEGACY top_nav.php (.tn-*) — PEAK-grade upgrade
 * ═══════════════════════════════════════════════════════════════
 * R5.0.12 · ALL rules below scoped with body.cortex-density to
 * prevent pollution on /businesses/:id/* legacy pages that use
 * top_nav.php with their own existing styling.
 *
 * Pages that opt-in (e.g. home, signup, cortex-styleguide, new
 * cortex modules) MUST add `cortex-density` to <body> class.
 * ═══════════════════════════════════════════════════════════════ */

body.cortex-density .tn-bar {
    background: var(--pkkt-surface);
    border-bottom: 1px solid var(--pkkt-border);
    box-shadow: var(--pkkt-shadow-sm);
}
body.cortex-density .tn-row {
    padding: 14px 28px !important;
    min-height: 64px;
}
body.cortex-density .tn-row-top { padding-top: 16px; padding-bottom: 16px; }
body.cortex-density .tn-row-nav { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 56px; }

/* Brand */
body.cortex-density .tn-brand {
    gap: 14px !important;
    text-decoration: none;
}
body.cortex-density .tn-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 20px;
}
body.cortex-density .tn-brand-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--pkkt-text);
}
body.cortex-density .tn-brand-sub {
    font-size: 13px !important;
    color: var(--pkkt-text-2);
}

/* Search button */
body.cortex-density .tn-search-btn {
    padding: 9px 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    background: var(--pkkt-surface-2) !important;
    border: 1px solid var(--pkkt-border) !important;
    color: var(--pkkt-text-2) !important;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.cortex-density .tn-search-btn:hover {
    background: var(--pkkt-surface) !important;
    border-color: var(--pkkt-text-3) !important;
}
body.cortex-density .tn-search-label { font-size: 14px; }

/* Icon buttons */
body.cortex-density .tn-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    color: var(--pkkt-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--pkkt-anim);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}
body.cortex-density .tn-icon-btn svg { width: 22px !important; height: 22px !important; }
body.cortex-density .tn-icon-btn:hover {
    background: var(--pkkt-surface-2);
    color: var(--pkkt-text);
}
body.cortex-density .tn-icon-btn .bell-badge {
    top: 4px !important;
    right: 4px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    border: 2px solid var(--pkkt-surface) !important;
}

/* User card */
body.cortex-density .tn-user-name { font-size: 14px !important; font-weight: 600; }
body.cortex-density .tn-user-role { font-size: 12px !important; color: var(--pkkt-text-2); }

/* ── Section nav items (Row 2) — biggest impact ── */
body.cortex-density .tn-items {
    gap: 4px !important;
    align-items: stretch;
}

body.cortex-density .tn-item {
    position: relative;
}

body.cortex-density .tn-link,
body.cortex-density .tn-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--pkkt-text-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: var(--pkkt-anim);
    text-decoration: none !important;
    line-height: 1.3;
    white-space: nowrap;
    letter-spacing: -0.005em;
    min-height: 56px;
}
body.cortex-density .tn-link:hover,
body.cortex-density .tn-trigger:hover {
    color: var(--pkkt-text) !important;
    background: var(--pkkt-surface-2) !important;
}
body.cortex-density .tn-link.active,
body.cortex-density .tn-trigger.active,
body.cortex-density .tn-item.active > .tn-link,
body.cortex-density .tn-item.active > .tn-trigger {
    color: var(--pkkt-primary) !important;
    border-bottom-color: var(--pkkt-primary) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

body.cortex-density .tn-emoji {
    font-size: 19px !important;
    line-height: 1;
}
body.cortex-density .tn-text { font-size: 15px; font-weight: inherit; }
body.cortex-density .tn-chev { font-size: 11px; opacity: 0.6; margin-left: 2px; }

body.cortex-density .tn-badge {
    background: var(--pkkt-danger);
    color: #fff;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    margin-left: 6px;
}

/* ── Dropdown menus (.tn-dropdown) — PEAK-grade ── */
body.cortex-density .tn-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--pkkt-surface) !important;
    border: 1px solid var(--pkkt-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--pkkt-shadow-lg) !important;
    padding: 8px !important;
    min-width: 280px !important;
    z-index: 100;
    display: none;
    margin-top: 4px;
    animation: cx-fadein 0.12s ease-out;
}
body.cortex-density .tn-item:hover > .tn-dropdown,
body.cortex-density .tn-item.open > .tn-dropdown,
body.cortex-density .tn-trigger[aria-expanded="true"] + .tn-dropdown {
    display: block;
}

/* Items inside dropdown */
body.cortex-density .tn-dropdown .tn-link,
body.cortex-density .tn-dropdown .tn-trigger,
body.cortex-density .tn-sub-item .tn-link,
body.cortex-density .tn-sub-item .tn-trigger {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--pkkt-text) !important;
    min-height: 44px;
    justify-content: flex-start !important;
}
body.cortex-density .tn-dropdown .tn-link:hover,
body.cortex-density .tn-dropdown .tn-trigger:hover,
body.cortex-density .tn-sub-item .tn-link:hover {
    background: var(--pkkt-primary-soft) !important;
    color: var(--pkkt-primary) !important;
}
body.cortex-density .tn-dropdown .tn-emoji,
body.cortex-density .tn-sub-item .tn-emoji {
    font-size: 18px !important;
    width: 24px;
    text-align: center;
}

/* Section headers in dropdown */
body.cortex-density .tn-section {
    padding: 10px 14px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--pkkt-text-3) !important;
}
body.cortex-density .tn-divider {
    height: 1px;
    background: var(--pkkt-border);
    margin: 6px 8px;
}

/* Nested submenus (Level 3+) */
body.cortex-density .tn-sub-item {
    position: relative;
}
body.cortex-density .tn-sub-item .tn-dropdown {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-top: 0;
    margin-left: 4px;
}

/* Mobile toggle */
body.cortex-density .tn-mobile-toggle {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--pkkt-border);
    color: var(--pkkt-text);
    cursor: pointer;
}

/* Plan badge */
body.cortex-density .tn-plan-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    letter-spacing: 0.04em;
}

/* ── Mobile (cortex-density only): comfortable but compact ── */
@media (max-width: 768px) {
    body.cortex-density { font-size: 14px; }
    body.cortex-density .pkkt-topnav { padding: 10px 14px !important; min-height: 56px !important; }
    body.cortex-density .pkkt-icon-btn { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    body.cortex-density .pkkt-nav-tab { padding: 12px 14px !important; font-size: 14px !important; }
    body.cortex-density h1 { font-size: 24px; }
    body.cortex-density h2 { font-size: 20px; }
    body.cortex-density .cx-stat-value { font-size: 26px !important; }
    body.cortex-density .container,
    body.cortex-density .wrap { padding: 18px 14px; }
}

/* ═══ PRINT — keep professional ═══ */
@media print {
    body { background: white !important; font-size: 12px; }
    .card, table, .cx-card, .cx-table-wrap {
        border: 1px solid #000 !important; box-shadow: none !important;
    }
    .cx-btn, .cx-pagination, .cx-search { display: none !important; }
}