/* Vaultix Security — Bootstrap 5 brand theme overlay
 * Loaded after bootstrap.min.css. Overrides Bootstrap CSS variables
 * with the navy/ember palette and tightens typography + spacing.
 */

:root,
[data-bs-theme="dark"] {
    /* Brand palette */
    --vx-navy-950: #06111f;
    --vx-navy-900: #0a1830;
    --vx-navy-800: #102340;
    --vx-navy-700: #17304f;
    --vx-ember: #ff7a1a;
    --vx-ember-dark: #f45d01;
    --vx-text: #eef6ff;
    --vx-muted: #9fb1c7;
    --vx-line: rgba(255, 255, 255, .1);

    /* Bootstrap variable overrides */
    --bs-body-bg: var(--vx-navy-950);
    --bs-body-color: var(--vx-text);
    --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.65;

    --bs-primary: var(--vx-ember);
    --bs-primary-rgb: 255, 122, 26;
    --bs-secondary: var(--vx-navy-700);
    --bs-secondary-rgb: 23, 48, 79;
    --bs-success-rgb: 38, 196, 133;
    --bs-info-rgb: 90, 168, 255;

    --bs-link-color: var(--vx-text);
    --bs-link-hover-color: var(--vx-ember);
    --bs-link-color-rgb: 238, 246, 255;
    --bs-link-hover-color-rgb: 255, 122, 26;

    --bs-border-color: var(--vx-line);
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;

    --bs-heading-color: #ffffff;
}

html, body { background: var(--vx-navy-950); }

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Typography — strong hierarchy for SEO + scan-ability */
h1, .h1 { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; }
h2, .h2 { font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; }
h3, .h3 { font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
h4, .h4 { font-weight: 700; font-size: 1.1rem; }
.lead   { color: var(--vx-muted); font-size: 1.125rem; font-weight: 400; }
.text-muted, p.muted, .muted { color: var(--vx-muted) !important; }
.eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700; color: var(--vx-ember); margin-bottom:.5rem; }

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--vx-ember);
    --bs-btn-border-color: var(--vx-ember);
    --bs-btn-color: var(--vx-navy-950);
    --bs-btn-hover-bg: var(--vx-ember-dark);
    --bs-btn-hover-border-color: var(--vx-ember-dark);
    --bs-btn-hover-color: var(--vx-navy-950);
    --bs-btn-active-bg: var(--vx-ember-dark);
    --bs-btn-active-border-color: var(--vx-ember-dark);
    --bs-btn-active-color: var(--vx-navy-950);
    font-weight: 700;
}
.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--vx-line);
    --bs-btn-bg: rgba(255,255,255,.04);
    --bs-btn-hover-bg: rgba(255,255,255,.08);
    --bs-btn-hover-border-color: rgba(255,255,255,.25);
    --bs-btn-hover-color: #fff;
    font-weight: 600;
}
.btn { border-radius: var(--bs-border-radius); padding: .7rem 1.15rem; }
.btn-lg { padding: .9rem 1.5rem; font-size: 1rem; }

/* Header */
.vx-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(6,17,31,.85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--vx-line);
}
.vx-brand { display:inline-flex; align-items:center; gap:.7rem; font-weight:800; color:#fff; text-decoration:none; }
.vx-brand .mark { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:.55rem; background:var(--vx-ember); color:var(--vx-navy-950); font-weight:900; }
.vx-nav a { color: var(--vx-muted); font-weight:600; font-size:.95rem; }
.vx-nav a:hover, .vx-nav a.active { color: #fff; }

/* Hero & sections */
.vx-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.vx-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.vx-section-alt { background: linear-gradient(180deg, var(--vx-navy-900) 0%, var(--vx-navy-950) 100%); border-top: 1px solid var(--vx-line); border-bottom: 1px solid var(--vx-line); }

/* Cards */
.vx-card {
    background: linear-gradient(180deg, var(--vx-navy-900) 0%, var(--vx-navy-800) 100%);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.75rem;
    color: var(--vx-text);
    height: 100%;
    transition: transform .25s ease, border-color .25s ease;
}
.vx-card:hover { transform: translateY(-3px); border-color: rgba(255,122,26,.4); }
.vx-card.featured { border-color: rgba(255,122,26,.55); box-shadow: 0 12px 40px -16px rgba(255,122,26,.45); }
.vx-card h3 { color:#fff; margin-bottom:.5rem; }
.vx-card .price { font-size: 1.5rem; font-weight: 800; color: var(--vx-ember); margin:.25rem 0 1rem; }
.vx-card ul { list-style:none; padding:0; margin:1rem 0; color: var(--vx-muted); }
.vx-card ul li { padding:.35rem 0; }

.vx-badge { display:inline-block; background:var(--vx-ember); color:var(--vx-navy-950); font-weight:700; font-size:.72rem; padding:.25rem .55rem; border-radius:.4rem; letter-spacing:.06em; text-transform:uppercase; }

/* Stats */
.vx-stats { display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.75rem; }
.vx-stats .stat strong { display:block; font-size:1.5rem; color:#fff; font-weight:800; }
.vx-stats .stat span { color: var(--vx-muted); font-size:.85rem; }

/* Testimonials */
.vx-testimonial { background: var(--vx-navy-900); border:1px solid var(--vx-line); border-radius: var(--bs-border-radius-lg); padding:1.5rem; height:100%; }
.vx-testimonial .quote-mark { font-size:2.5rem; line-height:1; color:var(--vx-ember); font-family: Georgia, serif; }
.vx-testimonial blockquote { font-size:1.02rem; color:#fff; margin:.5rem 0 1rem; }
.vx-testimonial figcaption { display:flex; align-items:center; gap:.75rem; color:var(--vx-muted); font-size:.9rem; }
.vx-testimonial .avatar { width:36px; height:36px; border-radius:50%; background:var(--vx-ember); color:var(--vx-navy-950); display:grid; place-items:center; font-weight:800; }

/* Forms */
.form-control, .form-select {
    background: var(--vx-navy-900);
    border: 1px solid var(--vx-line);
    color: var(--vx-text);
    border-radius: var(--bs-border-radius);
    padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus {
    background: var(--vx-navy-900);
    color: var(--vx-text);
    border-color: var(--vx-ember);
    box-shadow: 0 0 0 .2rem rgba(255,122,26,.18);
}
.form-control::placeholder { color: rgba(159,177,199,.6); }
.form-label { color: #fff; font-weight: 600; font-size: .9rem; margin-bottom:.4rem; }

/* Footer */
.vx-footer { background: var(--vx-navy-900); border-top: 1px solid var(--vx-line); padding: 2.5rem 0; color: var(--vx-muted); }
.vx-footer a { color: var(--vx-muted); }
.vx-footer a:hover { color: #fff; }

/* Admin shell */
.vx-admin-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

/* Sidebar */
.vx-admin-sidebar {
    background: linear-gradient(180deg, var(--vx-navy-900) 0%, var(--vx-navy-950) 100%);
    border-right: 1px solid var(--vx-line);
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.vx-admin-sidebar .vx-brand {
    padding: .25rem .5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}
.vx-admin-sidebar .vx-brand .mark { width: 36px; height: 36px; }

.vx-admin-nav {
    flex: 1;
    flex-wrap: nowrap;
    overflow-y: auto;
    margin: 0 -.25rem;
    padding: 0 .25rem;
    min-height: 0; /* allow flex child to shrink so overflow:auto works */
}
.vx-admin-nav::-webkit-scrollbar { width: 6px; }
.vx-admin-nav::-webkit-scrollbar-thumb { background: var(--vx-navy-700); border-radius: 3px; }

.vx-admin-group {
    padding: 1rem .75rem .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(159,177,199,.55);
    font-weight: 700;
}
.vx-admin-group:first-child { padding-top: 0; }

.vx-admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--vx-muted);
    border-radius: var(--bs-border-radius);
    padding: .55rem .75rem;
    margin: .1rem 0;
    font-size: .92rem;
    font-weight: 500;
    position: relative;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.vx-admin-sidebar .nav-link .vx-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vx-admin-sidebar .nav-link:hover {
    background: rgba(255,255,255,.04);
    color: #fff;
}
.vx-admin-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(255,122,26,.16) 0%, rgba(255,122,26,.04) 100%);
    color: #fff;
}
.vx-admin-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--vx-ember);
}
.vx-admin-sidebar .nav-link.active .vx-icon { color: var(--vx-ember); }

.vx-admin-sidebar .nav-link .vx-badge-count {
    margin-left: auto;
    background: var(--vx-ember);
    color: var(--vx-navy-950);
    font-size: .68rem;
    font-weight: 800;
    padding: .1rem .45rem;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

/* User card at sidebar bottom */
.vx-admin-userbox {
    margin-top: 1rem;
    padding: .85rem;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius);
    display: flex;
    align-items: center;
    gap: .65rem;
}
.vx-admin-userbox .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vx-ember) 0%, var(--vx-ember-dark) 100%);
    color: var(--vx-navy-950);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
}
.vx-admin-userbox .meta { min-width: 0; flex: 1; }
.vx-admin-userbox .meta strong { display: block; color: #fff; font-size: .85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-admin-userbox .meta small { color: var(--vx-muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vx-admin-userbox .logout-btn {
    background: transparent;
    border: 0;
    color: var(--vx-muted);
    padding: .4rem;
    border-radius: .35rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.vx-admin-userbox .logout-btn:hover { background: rgba(255,255,255,.06); color: var(--vx-ember); }
.vx-admin-userbox .logout-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Main area */
.vx-admin-main { padding: 2rem clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.vx-admin-card { background: var(--vx-navy-900); border:1px solid var(--vx-line); border-radius: var(--bs-border-radius-lg); padding: 1.5rem; }
.vx-admin-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--vx-line); }
.vx-admin-topbar h1 { font-size: 1.65rem; }
.vx-admin-topbar .eyebrow { margin-bottom: .15rem; font-size: .7rem; }

.alert-success { background: rgba(38,196,133,.12); border: 1px solid rgba(38,196,133,.35); color: #c2f5dd; }
.alert-danger  { background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.35); color: #f8c9ce; }

/* Tables */
.table { color: var(--vx-text); --bs-table-bg: transparent; --bs-table-color: var(--vx-text); --bs-table-border-color: var(--vx-line); }
.table > :not(caption) > * > * { padding: .85rem .9rem; }

/* === Auth (login) layout === */
.vx-auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,122,26,.10) 0%, transparent 38%),
        radial-gradient(circle at 88% 82%, rgba(255,122,26,.06) 0%, transparent 42%),
        linear-gradient(135deg, var(--vx-navy-950) 0%, var(--vx-navy-900) 100%);
}
.vx-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
}
.vx-auth-card {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: var(--vx-navy-900);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}

/* Left — IT Artificer info */
.vx-auth-left {
    position: relative;
    padding: 2.5rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,122,26,.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--vx-navy-900) 0%, var(--vx-navy-800) 100%);
    border-right: 1px solid var(--vx-line);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.vx-auth-brand { padding-bottom: 1rem; border-bottom: 1px solid var(--vx-line); }
.vx-auth-left-body { display: flex; flex-direction: column; }
.vx-ita-logo {
    width: 52px; height: 52px;
    border-radius: .65rem;
    object-fit: contain;
    background: rgba(255,255,255,.04);
    padding: .35rem;
}
.vx-ita-monogram {
    width: 52px; height: 52px;
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--vx-ember) 0%, var(--vx-ember-dark) 100%);
    color: var(--vx-navy-950);
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 1rem;
}
.vx-ita-about {
    color: var(--vx-muted);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.vx-ita-contacts {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vx-line);
}
.vx-ita-contacts li {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.vx-ita-ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,122,26,.10);
    color: var(--vx-ember);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.vx-ita-contacts li small {
    display: block;
    color: var(--vx-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: .1rem;
}
.vx-ita-contacts li a {
    color: var(--vx-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    word-break: break-word;
}
.vx-ita-contacts li a:hover { color: var(--vx-ember); }

/* Right — login form */
.vx-auth-right {
    padding: clamp(2rem, 4vw, 3.25rem);
    display: flex;
    align-items: center;
    background: var(--vx-navy-950);
}
.vx-auth-form-wrap { width: 100%; max-width: 380px; margin: 0 auto; }
.vx-auth-form-wrap code {
    background: rgba(255,255,255,.06);
    color: var(--vx-text);
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .8rem;
}

/* Responsive: stack on tablet / phone */
@media (max-width: 767.98px) {
    .vx-auth-card { grid-template-columns: 1fr; }
    .vx-auth-left { border-right: 0; border-bottom: 1px solid var(--vx-line); padding: 2rem 1.5rem; }
    .vx-auth-right { padding: 2rem 1.5rem; }
    .vx-auth-shell { padding: 0; }
    .vx-auth-card { border-radius: 0; max-width: none; box-shadow: none; }
}

/* === Inquiries CRM === */
.vx-inq-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}
.vx-stat-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .25rem;
    padding: 1rem 1.1rem;
    background: var(--vx-navy-900);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    min-height: 86px;
    position: relative;
}
.vx-stat-tile:hover { border-color: rgba(255,122,26,.4); color: inherit; }
.vx-stat-tile.is-active { background: linear-gradient(135deg, rgba(255,122,26,.16) 0%, transparent 100%); border-color: rgba(255,122,26,.55); }
.vx-stat-tile .vx-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--vx-muted); font-weight: 700; }
.vx-stat-tile strong { font-size: 1.7rem; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vx-stat-tile::after { content:''; position:absolute; top: 1rem; right: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-muted); opacity: .5; }
.vx-stat-tile.vx-stat-info::after    { background: #5aa8ff; opacity: 1; }
.vx-stat-tile.vx-stat-purple::after  { background: #a78bfa; opacity: 1; }
.vx-stat-tile.vx-stat-warning::after { background: #f5b454; opacity: 1; }
.vx-stat-tile.vx-stat-ember::after   { background: var(--vx-ember); opacity: 1; }
.vx-stat-tile.vx-stat-success::after { background: #26c485; opacity: 1; }
.vx-stat-tile.vx-stat-this-week { background: linear-gradient(135deg, var(--vx-navy-800) 0%, var(--vx-navy-900) 100%); cursor: default; }

/* Bulk action bar */
.vx-bulk-bar {
    background: rgba(255,122,26,.06);
    border: 1px solid rgba(255,122,26,.25);
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
}

/* Sortable column links */
.vx-sort-link {
    color: var(--vx-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vx-sort-link:hover { color: #fff; }
.vx-sort-link.is-active { color: var(--vx-ember); }

/* Status select / pill colors */
.vx-status-select {
    border-left: 3px solid var(--vx-muted);
    font-weight: 600;
}
.vx-status-info    { border-left-color: #5aa8ff; }
.vx-status-purple  { border-left-color: #a78bfa; }
.vx-status-warning { border-left-color: #f5b454; }
.vx-status-ember   { border-left-color: var(--vx-ember); }
.vx-status-success { border-left-color: #26c485; }

.vx-status-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--vx-line);
}
.vx-status-pill.vx-status-info    { background: rgba(90,168,255,.12);  color: #b5d5ff; border-color: rgba(90,168,255,.35); }
.vx-status-pill.vx-status-purple  { background: rgba(167,139,250,.12); color: #dccfff; border-color: rgba(167,139,250,.35); }
.vx-status-pill.vx-status-warning { background: rgba(245,180,84,.12);  color: #ffdfa3; border-color: rgba(245,180,84,.35); }
.vx-status-pill.vx-status-ember   { background: rgba(255,122,26,.14);  color: #ffd6b8; border-color: rgba(255,122,26,.4); }
.vx-status-pill.vx-status-success { background: rgba(38,196,133,.12);  color: #b8f0d6; border-color: rgba(38,196,133,.35); }

/* Archived row dimming */
.vx-inq-archived { opacity: .55; }
.vx-inq-archived:hover { opacity: .85; }

/* Detail page meta grid */
.vx-inq-meta-grid > div { padding: .65rem .8rem; background: rgba(255,255,255,.02); border-radius: .5rem; }
.vx-inq-meta-grid small { display: block; color: var(--vx-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .15rem; }
.vx-inq-meta-grid strong { color: #fff; font-weight: 600; font-size: .9rem; }

/* === Brand variants === */
.vx-brand-lg { gap: 1rem; }
.vx-brand-lg .mark { width: 56px; height: 56px; border-radius: .75rem; font-size: 1.6rem; }
.vx-brand-lg { font-size: 1.35rem; }

/* === Image upload field === */
.vx-image-field {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.vx-image-preview {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: var(--bs-border-radius);
    border: 1px dashed var(--vx-line);
    background: var(--vx-navy-950);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .5rem;
}
.vx-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vx-image-preview.is-empty span { color: var(--vx-muted); font-size: .75rem; text-align: center; padding: 0 .5rem; }

/* === IT Artificer panel on admin dashboard === */
.vx-itartificer-panel {
    background: linear-gradient(135deg, var(--vx-navy-900) 0%, var(--vx-navy-800) 100%);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}
.vx-itartificer-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(255,122,26,.08) 0%, transparent 55%);
    pointer-events: none;
}
.vx-itartificer-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.vx-itartificer-logo {
    width: 56px; height: 56px;
    border-radius: .65rem;
    object-fit: contain;
    background: rgba(255,255,255,.03);
    padding: .35rem;
}
.vx-itartificer-monogram {
    width: 56px; height: 56px;
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--vx-ember) 0%, var(--vx-ember-dark) 100%);
    color: var(--vx-navy-950);
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -.02em;
}
.vx-itartificer-about {
    color: var(--vx-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    position: relative;
    max-width: 760px;
}
.vx-itartificer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vx-line);
    position: relative;
}
.vx-itartificer-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--vx-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: color .15s ease;
}
.vx-itartificer-link:hover { color: var(--vx-ember); }
.vx-itartificer-link svg { color: var(--vx-ember); }
.vx-itartificer-edit {
    color: var(--vx-muted);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
}
.vx-itartificer-edit:hover { color: var(--vx-ember); }

/* === Footer credit === */
.vx-credit { color: var(--vx-muted); }
.vx-credit a { color: var(--vx-text); font-weight: 600; text-decoration: none; }
.vx-credit a:hover { color: var(--vx-ember); }

/* === Blog === */
.vx-link-reset { color: inherit; text-decoration: none; }
.vx-link-reset:hover { color: var(--vx-ember); }

/* Category chips */
.vx-blog-chips { margin-top: 1.5rem; }
.vx-chip {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--vx-line);
    color: var(--vx-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vx-chip:hover { background: rgba(255,122,26,.08); color: #fff; border-color: rgba(255,122,26,.4); }
.vx-chip.active { background: var(--vx-ember); color: var(--vx-navy-950); border-color: var(--vx-ember); }

/* Featured post */
.vx-featured-post {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: linear-gradient(180deg, var(--vx-navy-900) 0%, var(--vx-navy-800) 100%);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-xl);
    padding: 0;
    overflow: hidden;
}
.vx-featured-media {
    position: relative;
    display: block;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
}
.vx-featured-media img,
.vx-featured-media .vx-placeholder-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vx-featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--vx-ember);
    color: var(--vx-navy-950);
    font-weight: 800;
    font-size: .72rem;
    padding: .35rem .7rem;
    border-radius: .4rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vx-featured-body { padding: 2.5rem 2.5rem 2.5rem 0; }
.vx-featured-body h3 { line-height: 1.15; margin-bottom: 1rem; }

/* Post cards */
.vx-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vx-navy-900);
    border: 1px solid var(--vx-line);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vx-post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,122,26,.4);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,.55);
}
.vx-post-media {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--vx-navy-800);
}
.vx-post-media img,
.vx-post-media .vx-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.vx-post-card:hover .vx-post-media img { transform: scale(1.04); }
.vx-post-category {
    position: absolute;
    top: .8rem;
    left: .8rem;
    background: rgba(6,17,31,.85);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .3rem .6rem;
    border-radius: .35rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vx-post-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.vx-post-body h3 { margin-bottom: .6rem; color: #fff; }
.vx-post-body p { font-size: .92rem; }

/* Post meta row */
.vx-post-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    color: var(--vx-muted);
}
.vx-post-meta-lg { font-size: .95rem; gap: .8rem; margin-top: 1rem; }
.vx-meta-dot { color: rgba(159,177,199,.5); }
.vx-avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vx-ember) 0%, var(--vx-ember-dark) 100%);
    color: var(--vx-navy-950);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .75rem;
    flex-shrink: 0;
}
.vx-avatar-lg { width: 42px; height: 42px; font-size: 1rem; }

/* Image placeholder */
.vx-placeholder,
.vx-placeholder-large {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.vx-placeholder-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.vx-placeholder-letter {
    position: relative;
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -.02em;
    opacity: .9;
}
.vx-placeholder-large .vx-placeholder-letter { font-size: 7rem; }

/* Article hero / body */
.vx-article-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.vx-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--vx-muted); }
.vx-breadcrumb a { color: var(--vx-muted); text-decoration: none; }
.vx-breadcrumb a:hover { color: var(--vx-ember); }

.vx-article-image-wrap { margin-bottom: clamp(2rem, 4vw, 3rem); }
.vx-article-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/8;
    object-fit: cover;
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
}
.vx-article-placeholder { background: var(--vx-navy-800); }

.vx-article-body { padding-bottom: clamp(2rem, 4vw, 3rem); }
.vx-article-body p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--vx-text);
    margin-bottom: 1.25rem;
}
.vx-article-body p:first-child::first-letter {
    font-size: 3.2rem;
    font-weight: 800;
    float: left;
    line-height: 1;
    margin: .1rem .7rem 0 0;
    color: var(--vx-ember);
}

/* Responsive */
@media (max-width: 991.98px) {
    .vx-admin-shell { grid-template-columns: 1fr; }
    .vx-admin-sidebar { border-right: 0; border-bottom: 1px solid var(--vx-line); position: relative; height: auto; }
    .vx-featured-post { grid-template-columns: 1fr; gap: 0; }
    .vx-featured-media { min-height: 240px; }
    .vx-featured-body { padding: 1.5rem; }
}
@media (max-width: 575.98px) {
    .vx-placeholder-letter { font-size: 3rem; }
    .vx-placeholder-large .vx-placeholder-letter { font-size: 5rem; }
}