:root {
    --ttpd-navy: #1A1A1A;
    --ttpd-navy-2: #2B2B2B;
    --ttpd-red: #D32F2F;
    --ttpd-orange: #D32F2F;
    --ttpd-blue: #D32F2F;
    --ttpd-ink: #1A1A1A;
    --ttpd-muted: #627084;
    --ttpd-line: #d9e1ea;
    --ttpd-bg: #eef4f8;
    --ttpd-panel: #ffffff;
    --ttpd-green: #D32F2F;
}

* { box-sizing: border-box; }

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body.portal-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ttpd-ink);
    background: linear-gradient(135deg, #f4f8fb 0%, #e7eff5 100%);
}

.portal-shell { min-height: 100vh; display: flex; flex-direction: column; }

.portal-topbar {
    min-height: 64px;
    background: linear-gradient(90deg, var(--ttpd-navy), var(--ttpd-navy-2));
    color: #fff;
    display: grid;
    grid-template-columns: 280px minmax(200px, 680px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 0 24px 0 0;
    box-shadow: 0 4px 18px rgba(16,43,73,.22);
    position: sticky;
    top: 0;
    z-index: 20;
}
.portal-topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 24px;
}
.portal-logo {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.portal-logo span { color: var(--ttpd-orange); }
.portal-search { position: relative; min-width: 0; }
.portal-search-spacer { min-width: 0; }
.portal-search input {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    padding: 0 14px 0 42px;
    font-size: 15px;
    color: var(--ttpd-ink);
    background: #f8fbfd;
}
.portal-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: min(100%, 560px);
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--ttpd-line);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .22);
    padding: 6px;
}
.portal-search-suggestions::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 28px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid var(--ttpd-line);
    border-top: 1px solid var(--ttpd-line);
    transform: rotate(45deg);
}
.portal-search-suggestions button {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ttpd-ink);
    padding: 9px 12px 9px 36px;
    text-align: left;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-search-suggestions button::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #77869a;
}
.portal-search-suggestions button:hover,
.portal-search-suggestions button.is-active {
    background: #fff1f1;
    color: var(--ttpd-blue);
}
.portal-search i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #718096;
}
.portal-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}
.portal-cart {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.portal-cart:hover { background: rgba(211,47,47,.9); }
.portal-cart i { font-size: 18px; }
.portal-notif {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    transition: background .15s;
}
.portal-notif:hover { background: rgba(255,255,255,.18); color: #fff; }
.portal-notif i { font-size: 18px; }
.portal-notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--ttpd-red);
    color: #fff;
    border: 2px solid var(--ttpd-navy);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.portal-cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--ttpd-red);
    color: #fff;
    border: 2px solid var(--ttpd-navy);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}
.portal-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: #e8eef4;
    white-space: nowrap;
    min-width: 0;
    max-width: 220px;
}
.portal-user-name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.portal-user > .fa-circle-user { font-size: 26px; color: #cfd8e2; flex-shrink: 0; }
/* Sidebar user card */
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    margin-bottom: 6px;
}
.sidebar-user-avatar {
    font-size: 34px;
    color: rgba(255,255,255,.65);
    line-height: 1;
    flex-shrink: 0;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-info strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-role-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
    white-space: nowrap;
    letter-spacing: .3px;
}
.portal-login-link {
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}
.portal-login-link:hover { color: #fff; text-decoration: underline; }

/* ── User menu dropdown ─────────────────────────────────────── */
.user-menu-wrap { position: relative; }
.user-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.user-menu-caret {
    font-size: 10px;
    opacity: .55;
    transition: transform .2s;
    flex-shrink: 0;
}
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    z-index: 300;
    overflow: hidden;
    animation: umdIn .16s ease;
    max-width: calc(100vw - 16px);
}
@keyframes umdIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.umd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #2B2B2B, #1A1A1A);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.umd-avatar {
    font-size: 40px;
    color: rgba(255,255,255,.75);
    line-height: 1;
    flex-shrink: 0;
}
.umd-info strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.umd-info span {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: block;
}
.umd-role-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 5px;
    letter-spacing: .3px;
    white-space: nowrap;
}
.umd-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}
.umd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
    line-height: 1.4;
}
.umd-item:hover { background: var(--ttpd-red); color: #fff; text-decoration: none; }
.umd-item:hover > i { color: #fff; }
.umd-item > i { width: 18px; text-align: center; color: #6b7280; font-size: 14px; flex-shrink: 0; transition: color .12s; }
.umd-item > span { flex: 1; }
.umd-item-danger { color: #dc2626; }
.umd-item-danger > i { color: #dc2626; }
.umd-item-danger:hover { background: var(--ttpd-red); color: #fff; }

.portal-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-weight: 800;
}
.app-frame {
    flex: 1;
    max-width: none;
    width: 100%;
    margin: 0;
    background: rgba(255,255,255,.72);
    border: 0;
    border-radius: 0;
    box-shadow: 0 20px 50px rgba(35,53,70,.14);
    overflow: hidden;
}
.layout-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100%; }
.portal-sidebar {
    background: linear-gradient(180deg, #2B2B2B, #1A1A1A);
    color: #d8e4ef;
    padding: 14px 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
}
.portal-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 7px;
    color: #b8ccd8;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .14s, color .14s;
    position: relative;
}
/* Hover — subtle, distinct from active */
.portal-nav a:hover:not(.active) {
    background: rgba(255,255,255,.07);
    color: #e2edf4;
}
/* Active — solid red with left accent line */
.portal-nav a.active {
    background: var(--ttpd-red);
    color: #fff;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.35);
}
.portal-nav a.active i { color: #fff; }
/* Active badge — only show on flat (non-group) items */
.portal-active-badge,
.portal-nav .badge { display: none; }
/* Sidebar mobile header (drawer brand + close button) */
.sidebar-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.sidebar-brand-text {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    letter-spacing: -.5px;
}
.sidebar-brand-text em { color: var(--ttpd-red); font-style: normal; }
.sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 6px;
    color: #d8e4ef;
    cursor: pointer;
    transition: background .15s;
}
.sidebar-close:hover { background: rgba(255,255,255,.2); }
/* ── Collapsible nav groups ──────────────────────────────────── */
.portal-nav-group {
    border-radius: 8px;
    overflow: hidden;
}
/* Section header (summary) */
.portal-nav-group > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    color: #7a96aa;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
    border-radius: 7px;
    transition: background .14s, color .14s;
    user-select: none;
    list-style: none;
}
.portal-nav-group > summary::-webkit-details-marker { display: none; }
.portal-nav-group > summary:hover {
    background: rgba(255,255,255,.07);
    color: #b8ccd8;
}
.portal-nav-group > summary > i {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: .7;
}
.portal-nav-group > summary > span { flex: 1; }
/* Chevron */
.portal-nav-group > summary::after {
    content: '\f054';          /* fa-chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    transition: transform .22s ease;
    flex-shrink: 0;
    opacity: .5;
}
.portal-nav-group[open] > summary::after { transform: rotate(90deg); opacity: .8; }
/* Open state — summary slightly elevated */
.portal-nav-group[open] > summary {
    color: #c0d4e2;
    background: rgba(255,255,255,.05);
    border-radius: 7px 7px 0 0;
}
/* Group containing the active page — highlight summary */
.portal-nav-group:has(> a.active) > summary {
    color: #f9a8a8;
    background: rgba(211,47,47,.14);
}
.portal-nav-group:has(> a.active) > summary > i { opacity: 1; }
/* Sub-items */
.portal-nav-group > a {
    padding-left: 36px;
    font-size: 13px;
    min-height: 38px;
    border-radius: 0;
}
.portal-nav-group > a:last-child { border-radius: 0 0 7px 7px; }
/* Sub-items container background */
.portal-nav-group[open] { background: rgba(255,255,255,.03); }
/* Items animate in when group opens */
.portal-nav-group[open] > a {
    animation: navItemIn .18s ease both;
}
@keyframes navItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Stagger animation for each item */
.portal-nav-group > a:nth-child(2)  { animation-delay: .02s; }
.portal-nav-group > a:nth-child(3)  { animation-delay: .04s; }
.portal-nav-group > a:nth-child(4)  { animation-delay: .06s; }
.portal-nav-group > a:nth-child(5)  { animation-delay: .08s; }
.portal-nav-group > a:nth-child(6)  { animation-delay: .10s; }
.portal-nav-group > a:nth-child(7)  { animation-delay: .12s; }
.portal-nav-group > a:nth-child(8)  { animation-delay: .14s; }
.portal-nav-group > a:nth-child(9)  { animation-delay: .16s; }
.portal-nav-group > a:nth-child(10) { animation-delay: .18s; }
/* "Limited" access badge on section headers */
.portal-nav-limited {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
    margin-left: 2px;
    flex-shrink: 0;
}
.portal-main { padding: 28px 32px 42px; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(240,246,250,.92)); }
/* ── Save to Wishlist button ────────────────────────────────── */
.btn-save-part {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--ttpd-line, #d9e1ea);
    background: var(--ttpd-bg, #eef4f8);
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all .15s;
}
.btn-save-part:hover        { background: #fff7ed; border-color: #fb923c; color: #ea580c; }
.btn-save-part.is-saved     { background: #fff7ed; border-color: #fb923c; color: #ea580c; }
.btn-save-part.is-saved i   { font-weight: 900; }
/* PDP save button */
.pdp-save-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--ttpd-line, #d9e1ea);
    background: var(--ttpd-bg, #eef4f8);
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all .15s;
}
.pdp-save-btn:hover    { background: #fff7ed; border-color: #fb923c; color: #ea580c; transform: scale(1.05); }
.pdp-save-btn.pdp-saved { background: #fff7ed; border-color: #fb923c; color: #ea580c; }

/* ── Invoicing ───────────────────────────────────────────────── */
.inv-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inv-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px; }
.inv-kpi > i { font-size: 24px; flex-shrink: 0; }
.inv-kpi-num   { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.inv-kpi-label { display: block; font-size: 11.5px; font-weight: 600; opacity: .75; margin-top: 3px; }
.inv-kpi-danger  { background: #fef2f2; color: #b91c1c; }
.inv-kpi-dark    { background: #1a2e45; color: #fff; }
.inv-kpi-success { background: #f0fdf4; color: #15803d; }
.inv-section-head {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 20px; font-size: 13.5px; font-weight: 800;
    border-bottom: 1px solid var(--ttpd-line);
}
.inv-head-danger  { background: #fef2f2; color: #b91c1c; }
.inv-head-success { background: #f0fdf4; color: #15803d; }
.inv-count-pill { margin-left: auto; background: rgba(0,0,0,.1); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
@media (max-width: 760px) { .inv-summary-row { grid-template-columns: 1fr; } }

/* ── Tax Exempt ──────────────────────────────────────────────── */
.te-status-banner { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.te-status-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.06); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.te-status-title { display: block; font-size: 15px; font-weight: 900; }
.te-status-sub   { display: block; font-size: 13px; margin-top: 3px; opacity: .8; }
.te-status-meta  { text-align: right; flex-shrink: 0; }
.te-status-meta span  { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.te-status-meta strong { font-size: 13.5px; }
.te-upload-zone {
    position: relative; border: 2px dashed #d1d5db; border-radius: 12px;
    padding: 36px; text-align: center; cursor: pointer; background: #f9fafb;
    transition: border-color .15s, background .15s;
}
.te-upload-zone:hover, .te-drag-over { border-color: var(--ttpd-red); background: #fff5f5; }
.te-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.te-upload-icon { font-size: 32px; color: #d1d5db; display: block; margin-bottom: 10px; }
.te-upload-label { font-size: 14px; font-weight: 700; color: #374151; margin: 0 0 4px; }
.te-browse-link { color: var(--ttpd-red); text-decoration: underline; }
.te-upload-hint { font-size: 12px; color: #9ca3af; }
.te-file-selected { display: flex; align-items: center; gap: 10px; justify-content: center; }

/* ── Credit Increase ─────────────────────────────────────────── */
.ci-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.ci-form-card { overflow: hidden; }
.ci-form-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 24px; background: linear-gradient(135deg, #1a2e45, #223d5e);
}
.ci-form-header > i { font-size: 22px; color: rgba(255,255,255,.8); flex-shrink: 0; }
.ci-form-header strong { display: block; font-size: 15px; font-weight: 900; color: #fff; }
.ci-form-header span   { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ci-section-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af;
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--ttpd-line);
}
.ci-prefilled-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; background: #eff6ff; color: #1d4ed8;
    text-transform: none; letter-spacing: 0;
}
.ci-prefilled-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--ttpd-line); border-radius: 8px; overflow: hidden;
}
.ci-prefilled-item {
    padding: 10px 14px;
    border-right: 1px solid var(--ttpd-line);
    border-bottom: 1px solid var(--ttpd-line);
    background: #fafbfc;
}
.ci-prefilled-item:nth-child(even) { border-right: none; }
.ci-pf-label { display: block; font-size: 10.5px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.ci-pf-value { display: block; font-size: 13px; font-weight: 600; color: #374151; word-break: break-word; }
.ci-aside { display: flex; flex-direction: column; gap: 0; }
@media (max-width: 1100px) { .ci-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .ci-prefilled-grid { grid-template-columns: 1fr; }
    .ci-prefilled-item { border-right: none; } }

/* ── Core Charge Tracker ────────────────────────────────────── */
.cct-page { display: flex; flex-direction: column; gap: 18px; }
.cct-hero { display: flex; align-items: center; gap: 16px; padding: 4px 0 6px; }
.cct-hero-icon {
    width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(135deg, #1a2e45, #2b4a6f);
    color: #fff; display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26,46,69,.3);
}
.cct-hero-title { font-size: 24px; font-weight: 900; color: var(--ttpd-ink); margin: 0 0 3px; }
.cct-hero-sub   { font-size: 13.5px; color: #6b7280; margin: 0; }
/* KPI row */
.cct-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cct-kpi {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 12px;
}
.cct-kpi-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.cct-kpi-num   { display: block; font-size: 20px; font-weight: 900; line-height: 1; }
.cct-kpi-label { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; opacity: .75; }
.cct-kpi-danger  { background: #fef2f2; color: #b91c1c; }
.cct-kpi-danger .cct-kpi-icon  { background: #fee2e2; color: #dc2626; }
.cct-kpi-warning { background: #fffbeb; color: #92400e; }
.cct-kpi-warning .cct-kpi-icon { background: #fef3c7; color: #d97706; }
.cct-kpi-success { background: #f0fdf4; color: #15803d; }
.cct-kpi-success .cct-kpi-icon { background: #dcfce7; color: #16a34a; }
.cct-kpi-dark    { background: #1a2e45; color: #fff; }
.cct-kpi-dark .cct-kpi-icon    { background: rgba(255,255,255,.12); color: #fff; }
.cct-kpi-refund  { background: #f5f3ff; color: #6d28d9; }
.cct-kpi-refund .cct-kpi-icon  { background: #ede9fe; color: #7c3aed; }
/* Sections */
.cct-section { overflow: hidden; }
.cct-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--ttpd-line);
    font-size: 13.5px; gap: 12px;
}
.cct-section-head-left { display: flex; align-items: center; gap: 10px; }
.cct-section-head-left > i { font-size: 16px; flex-shrink: 0; }
.cct-section-head strong { display: block; font-size: 14px; font-weight: 800; }
.cct-section-head span   { display: block; font-size: 12px; opacity: .7; }
.cct-head-danger  { background: #fef2f2; color: #b91c1c; }
.cct-head-warning { background: #fffbeb; color: #92400e; }
.cct-head-success { background: #f0fdf4; color: #15803d; }
.cct-count-pill { border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.cct-pill-danger  { background: #dc2626; color: #fff; }
.cct-pill-warning { background: #d97706; color: #fff; }
.cct-pill-success { background: #16a34a; color: #fff; }
/* Cards */
.cct-card { border-bottom: 1px solid var(--ttpd-line); }
.cct-card:last-child { border-bottom: none; }
.cct-card-returned { opacity: .75; }
.cct-card-inner {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: start; gap: 20px; padding: 18px 20px;
}
.cct-card-danger .cct-card-inner { background: #fffafa; }
.cct-card-part { display: flex; align-items: flex-start; gap: 12px; }
.cct-part-icon {
    width: 38px; height: 38px; border-radius: 9px;
    background: #f3f4f6; color: #6b7280;
    display: grid; place-items: center; font-size: 15px; flex-shrink: 0;
}
.cct-part-num  { display: block; font-family: monospace; font-size: 13px; font-weight: 800; color: var(--ttpd-red); }
.cct-part-desc { display: block; font-size: 13px; color: #374151; margin-top: 2px; }
.cct-order-link { display: block; font-size: 11.5px; color: #6b7280; text-decoration: none; margin-top: 4px; }
.cct-order-link:hover { color: var(--ttpd-red); }
.cct-card-amounts { text-align: right; min-width: 160px; }
.cct-amount-row { margin-bottom: 4px; }
.cct-amount-label { font-size: 11px; color: #9ca3af; font-weight: 600; text-transform: uppercase; margin-right: 6px; }
.cct-amount-val   { font-size: 13px; font-weight: 600; color: #374151; }
.cct-amount-val strong { color: var(--ttpd-ink); }
.cct-refund-val { color: #15803d; font-weight: 700; }
.cct-fee-val    { color: #b91c1c; }
.cct-card-deadline { min-width: 180px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cct-status-pill  { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.cct-deadline-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cct-deadline-label { font-size: 10.5px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cct-deadline-date  { font-size: 13px; font-weight: 700; color: #374151; }
.cct-overdue-date   { color: #b91c1c; }
.cct-days-left    { font-size: 12px; font-weight: 700; color: #374151; }
.cct-days-urgent  { color: #b45309; }
.cct-days-overdue { color: #b91c1c; }
.cct-progress-bar { width: 160px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.cct-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.cct-progress-ok   { background: #16a34a; }
.cct-progress-warn { background: #d97706; }
.cct-progress-danger { background: #dc2626; }
/* Instructions expand */
.cct-instructions { padding: 12px 20px; border-top: 1px dashed var(--ttpd-line); background: #f9fafb; }
.cct-instructions summary { font-size: 12.5px; font-weight: 700; color: #374151; cursor: pointer; }
.cct-instructions p { font-size: 13px; color: #374151; margin: 8px 0 0; }
/* Empty state */
.cct-empty { padding: 56px 24px; text-align: center; }
.cct-empty-icon { font-size: 44px; color: #d1d5db; display: block; margin-bottom: 16px; }
.cct-empty h3 { font-size: 18px; font-weight: 900; color: #374151; margin-bottom: 8px; }
.cct-empty p  { font-size: 13.5px; color: #6b7280; max-width: 380px; margin: 0 auto 20px; }
@media (max-width: 1100px) { .cct-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  {
    .cct-kpi-row { grid-template-columns: 1fr 1fr; }
    .cct-card-inner { grid-template-columns: 1fr; }
    .cct-card-amounts, .cct-card-deadline { text-align: left; align-items: flex-start; }
    .cct-progress-bar { width: 100%; }
}

/* ── Wishlist ────────────────────────────────────────────────── */
.wl-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.wl-stat {
    background: #fff;
    border: 1px solid var(--ttpd-line);
    border-radius: 10px;
    padding: 16px 18px;
    text-align: center;
}
.wl-stat-num   { display: block; font-size: 22px; font-weight: 900; color: var(--ttpd-red); }
.wl-stat-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-top: 3px; }
.wl-list-header {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 800;
    color: #374151;
    border-bottom: 1px solid var(--ttpd-line);
    background: #f9fafb;
}
.wl-list-count {
    background: var(--ttpd-red);
    color: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}
.wl-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: background .12s, color .12s, border-color .12s;
}
.wl-archive-btn { color: #6b7280; }
.wl-archive-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.wl-remove-btn  { color: #6b7280; }
.wl-remove-btn:hover  { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
@media (max-width: 760px) { .wl-summary-bar { grid-template-columns: 1fr 1fr; } }

/* ── VIN Decoder page ───────────────────────────────────────── */
.vin-page { display: flex; flex-direction: column; gap: 20px; }
/* Hero */
.vin-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 0 6px;
}
.vin-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ttpd-red), #b71c1c);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(211,47,47,.3);
}
.vin-hero-title { font-size: 26px; font-weight: 900; color: var(--ttpd-ink); margin: 0 0 3px; }
.vin-hero-sub   { font-size: 14px; color: #6b7280; margin: 0; }
/* Search card */
.vin-search-card { padding: 22px 24px 16px !important; }
.vin-search-row  {
    display: grid;
    grid-template-columns: 1fr minmax(180px,.55fr) auto;
    gap: 12px;
    align-items: center;
}
.vin-input-wrap  { position: relative; }
.vin-input-icon  {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
}
.vin-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 0 48px 0 42px;
    font-size: 15px;
    font-family: monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #f9fafb;
    color: var(--ttpd-ink);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.vin-input:focus { border-color: var(--ttpd-red); box-shadow: 0 0 0 3px rgba(211,47,47,.12); background: #fff; }
.vin-input-success { border-color: #16a34a !important; background: #f0fdf4 !important; }
.vin-input-filter { font-family: inherit; letter-spacing: 0; text-transform: none; }
.vin-char-counter {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    pointer-events: none;
}
.vin-counter-full { color: #16a34a; }
.vin-clear-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}
.vin-clear-btn:hover { color: var(--ttpd-red); }
.vin-filter-wrap { position: relative; }
.vin-decode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    background: var(--ttpd-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}
.vin-decode-btn:hover { background: #b71c1c; transform: translateY(-1px); }
.vin-hints {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 11.5px;
    color: #9ca3af;
}
.vin-hints i { margin-right: 5px; }
/* Result grid */
.vin-result-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 16px;
    align-items: start;
}
/* Vehicle card */
.vin-vehicle-card { overflow: hidden; }
.vin-vehicle-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 18px;
    background: linear-gradient(135deg, #1a2e45 0%, #2b4a6f 100%);
}
.vin-vehicle-truck-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.vin-vehicle-year  { display: block; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 600; }
.vin-vehicle-name  { font-size: 20px; font-weight: 900; color: #fff; margin: 2px 0 4px; }
.vin-vehicle-vin-code {
    font-size: 11px;
    font-family: monospace;
    letter-spacing: .08em;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
    padding: 2px 7px;
    border-radius: 4px;
}
.vin-source-chip {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.15);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.vin-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.vin-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-right: 1px solid var(--ttpd-line);
    border-bottom: 1px solid var(--ttpd-line);
}
.vin-spec-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fff1f1;
    color: var(--ttpd-red);
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.vin-spec-label { display: block; font-size: 10px; color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.vin-spec-value { font-size: 13px; font-weight: 700; color: var(--ttpd-ink); display: block; margin-top: 2px; }
.vin-card-footer {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    font-size: 11.5px;
    color: #9ca3af;
    border-top: 1px solid var(--ttpd-line);
}
/* Parts summary card */
.vin-parts-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 20px !important;
    gap: 10px;
}
.vin-parts-count-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vin-parts-count-num  { font-size: 56px; font-weight: 900; color: var(--ttpd-red); line-height: 1; }
.vin-parts-count-label { font-size: 13px; font-weight: 700; color: #374151; }
.vin-parts-engine-label { font-size: 12px; color: #6b7280; }
.vin-active-filter {
    font-size: 12px;
    color: #374151;
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vin-filter-clear { color: #9ca3af; text-decoration: none; }
.vin-filter-clear:hover { color: var(--ttpd-red); }
/* Parts table */
.vin-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ttpd-line);
}
.vin-table-title { font-size: 15px; font-weight: 800; color: var(--ttpd-ink); margin: 0; }
.vin-inline-filter { display: flex; gap: 8px; align-items: center; }
.vin-filter-btn {
    height: 38px;
    width: 38px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .15s, color .15s;
}
.vin-filter-btn:hover { border-color: var(--ttpd-red); color: var(--ttpd-red); }
.vin-parts-table .vin-part-num {
    font-weight: 800;
    font-family: monospace;
    color: var(--ttpd-red);
    text-decoration: none;
    font-size: 13px;
}
.vin-parts-table .vin-part-num:hover { text-decoration: underline; }
.vin-core-badge {
    display: inline-block;
    font-size: 10px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 600;
}
.vin-part-price { font-size: 15px; font-weight: 800; color: var(--ttpd-ink); }
.vin-part-engine { font-size: 12px; color: #6b7280; }
.vin-stock { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; }
.vin-stock.in-stock  { background: #f0fdf4; color: #15803d; }
.vin-stock.low-stock { background: #fffbeb; color: #b45309; }
.vin-stock.out-of-stock { background: #fef2f2; color: #b91c1c; }
.vin-add-btn { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 6px; }
/* Empty state */
.vin-empty-parts {
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
}
.vin-empty-parts i { font-size: 36px; opacity: .3; display: block; margin-bottom: 12px; }
.vin-empty-parts p { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #374151; }
.vin-empty-parts span { font-size: 13px; }
/* Landing state */
.vin-landing {
    padding: 52px 24px;
    text-align: center;
    color: #6b7280;
}
.vin-landing-icon { font-size: 52px; color: #d1d5db; margin-bottom: 16px; }
.vin-landing h3   { font-size: 20px; font-weight: 900; color: #374151; margin-bottom: 8px; }
.vin-landing p    { font-size: 14px; max-width: 420px; margin: 0 auto 28px; }
.vin-landing-steps { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.vin-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.vin-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ttpd-red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
}
/* Alerts */
.alert-banner { display: flex; align-items: center; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.alert-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
/* Responsive */
@media (max-width: 1100px) {
    .vin-result-grid { grid-template-columns: 1fr; }
    .vin-parts-summary { flex-direction: row; padding: 18px 20px !important; }
    .vin-parts-count-block { flex-direction: row; align-items: center; gap: 10px; }
    .vin-parts-count-num { font-size: 36px; }
}
@media (max-width: 760px) {
    .vin-search-row  { grid-template-columns: 1fr; }
    .vin-decode-btn  { width: 100%; justify-content: center; }
    .vin-hints       { flex-direction: column; gap: 6px; }
    .vin-specs       { grid-template-columns: 1fr; }
    .vin-table-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .vin-landing-steps { flex-direction: column; align-items: center; }
}
.portal-main,
.portal-content { min-width: 0; }
.portal-content { width: 100%; }
.portal-footer {
    margin-top: auto;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 28px;
    background: var(--ttpd-navy);
    border-top: 3px solid var(--ttpd-red);
    color: #d8e4ef;
}
.portal-footer-logo {
    color: #fff;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}
.portal-footer-logo span { color: var(--ttpd-red); }
.portal-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}
.portal-footer-links a {
    color: #d8e4ef;
    font-weight: 700;
    text-decoration: none;
}
.portal-footer-links a:hover { color: #fff; text-decoration: underline; }
.portal-footer-copy {
    color: #b9c5d2;
    font-size: 13px;
    white-space: nowrap;
}
.dashboard-section[hidden] { display: none !important; }
.tool-card { max-width: 720px; padding: 22px; }
.empty-state { padding: 24px; color: var(--ttpd-muted); }
.search-landing { padding: 24px; }
.search-landing h2 {
    margin: 0 0 8px;
    color: var(--ttpd-ink);
    font-size: 20px;
    font-weight: 900;
}
.search-landing p {
    margin: 0 0 18px;
    color: var(--ttpd-muted);
}
.quick-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.quick-searches a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--ttpd-line);
    border-radius: 6px;
    background: #f8fbfd;
    color: var(--ttpd-red);
    font-weight: 800;
    text-decoration: none;
}
.quick-searches a:hover {
    border-color: var(--ttpd-red);
    background: #fff1f1;
}
.saved-parts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.saved-part-card { border: 1px solid var(--ttpd-line); border-radius: 8px; padding: 16px; background: #fff; }
.saved-part-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 900; }
.btn-remove-saved, .action-btn {
    border: 0;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    background: #eef4f8;
    color: var(--ttpd-ink);
}
.mobile-nav-toggle { display: none; }
.portal-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--ttpd-muted);
    font-size: 14px;
    font-weight: 700;
    flex-wrap: wrap;
}
.portal-breadcrumb a {
    color: var(--ttpd-blue);
    text-decoration: none;
}
.portal-breadcrumb a:hover { text-decoration: underline; }
.portal-breadcrumb span::before,
.portal-breadcrumb strong::before {
    content: ">";
    margin-right: 8px;
    color: #8b98a8;
}
.portal-breadcrumb strong {
    color: var(--ttpd-ink);
    font-weight: 800;
}
.page-kicker { margin: 0 0 4px; color: var(--ttpd-muted); font-size: 15px; }
.page-title { margin: 0; color: var(--ttpd-ink); font-size: 30px; line-height: 1.1; font-weight: 900; }
.surface { background: var(--ttpd-panel); border: 1px solid var(--ttpd-line); border-radius: 8px; box-shadow: 0 8px 20px rgba(30,45,60,.06); overflow: hidden; }
.metric-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(220px,.65fr); gap: 18px; margin: 18px 0; }
.credit-card { min-height: 138px; display: flex; align-items: center; justify-content: center; text-align: center; }
.credit-card .label { color: var(--ttpd-ink); font-weight: 900; font-size: 17px; }
.credit-card .amount { color: var(--ttpd-ink); font-size: 46px; font-weight: 900; line-height: 1; }
.credit-card .subline { margin-top: 6px; color: #111827; font-size: 15px; }
.credit-progress {
    width: min(420px, 100%);
    height: 10px;
    margin: 12px auto 2px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.credit-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ttpd-red);
}
.current, .status-good { color: var(--ttpd-red); font-weight: 800; }
.agent-card { min-height: 138px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; }
.agent-avatar, .agent-photo {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin: 10px 0;
}
.agent-avatar { background: linear-gradient(135deg,#dce6ef,#9fb3c7); display: grid; place-items: center; color: var(--ttpd-navy); font-size: 24px; }
.agent-photo { object-fit: cover; border: 2px solid #dce6ef; }
.section-caption { padding: 12px 18px; font-weight: 900; font-size: 18px; color: var(--ttpd-ink); gap: 10px; flex-wrap: wrap; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
.data-table th { background: #f1f4f7; color: #1d2939; padding: 10px 18px; font-weight: 800; border-top: 1px solid var(--ttpd-line); border-bottom: 1px solid var(--ttpd-line); }
.data-table td { padding: 14px 18px; border-bottom: 1px solid #eef2f5; }
.empty-table-cell { color: var(--ttpd-muted); text-align: center; font-weight: 700; }
.search-page { display: grid; grid-template-columns: 245px minmax(0,1fr); }
.search-page.search-page-full { grid-template-columns: minmax(0, 1fr); }
.filter-panel { padding: 18px; border-right: 1px solid var(--ttpd-line); background: rgba(255,255,255,.72); }
.filter-title { margin: 0 0 18px; color: var(--ttpd-muted); font-size: 15px; }
.filter-group { border: 1px solid var(--ttpd-line); border-radius: 8px; background: #fff; overflow: hidden; }
.filter-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--ttpd-line); font-weight: 800; }
.filter-items { padding: 2px 14px 12px; color: #1f2937; line-height: 1.9; }
.search-workspace { padding: 18px 22px 28px; min-width: 0; }
.search-workspace-standalone { padding: 0; }
.search-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.search-summary h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 900; }
.search-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}
.search-filter-bar label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--ttpd-ink);
    font-size: 13px;
    font-weight: 900;
}
.search-filter-bar input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--ttpd-line);
    border-radius: 6px;
    background: #f8fbfd;
    color: var(--ttpd-ink);
    padding: 0 10px;
    font: inherit;
    font-weight: 600;
}
.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-actions .btn-quote { height: 38px; padding: 0 14px; white-space: nowrap; }
.filter-clear {
    color: var(--ttpd-red);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
.filter-clear:hover { text-decoration: underline; }
.select-pill { height: 36px; border: 1px solid var(--ttpd-line); border-radius: 6px; background: #fff; padding: 0 12px; font-weight: 700; }
.parts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.part-card { background: #fff; border: 1px solid var(--ttpd-line); border-radius: 8px; overflow: hidden; min-height: 390px; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(30,45,60,.05); }
.part-art { height: 154px; display: grid; place-items: center; background: linear-gradient(180deg,#fff,#f3f6f8); }
.part-art-brake { background: linear-gradient(135deg, rgba(26,26,26,.1), rgba(211,47,47,.06)), #f7fafc; }
.part-art-filter { background: linear-gradient(135deg, rgba(211,47,47,.08), rgba(26,26,26,.06)), #f7fafc; }
.part-art-electrical { background: linear-gradient(135deg, rgba(211,47,47,.12), rgba(26,26,26,.07)), #f8fbfd; }
.part-art-fluid { background: linear-gradient(135deg, rgba(26,26,26,.08), rgba(211,47,47,.08)), #f7fafc; }
.part-art-powertrain { background: linear-gradient(135deg, rgba(26,26,26,.12), rgba(211,47,47,.06)), #f8fbfd; }
.part-image {
    width: min(78%, 190px);
    height: 132px;
    object-fit: contain;
    display: block;
}
.part-placeholder {
    width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    background: transparent;
    color: var(--ttpd-ink);
}
.no-image-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(211,47,47,.1);
    color: var(--ttpd-red);
}
.no-image-mark i { font-size: 18px; }
.part-placeholder strong {
    max-width: 150px;
    text-align: center;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
    color: #4d5a6a;
}
.part-placeholder > span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ttpd-muted);
}
.part-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.part-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.part-category,
.stock-pill {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}
.part-category {
    color: var(--ttpd-red);
    background: #fff1f1;
}
.stock-pill {
    color: #fff;
    background: var(--ttpd-navy);
}
.part-title { margin: 0 0 6px; font-size: 17px; line-height: 1.12; font-weight: 900; color: #0f172a; }
.part-meta { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 700; color: #111827; }
.part-price {
    margin-top: 10px;
    padding: 12px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fff8f8, #f4f7fa);
    border: 1px solid #edf1f5;
    display: grid;
    gap: 3px;
}
.part-price .price-label {
    color: var(--ttpd-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 900;
}
.part-price strong {
    color: var(--ttpd-red);
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}
.part-price small { color: var(--ttpd-muted); text-decoration: line-through; }
.part-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.portal-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
    font-weight: 800;
}
.btn-quote, .btn-buy, .btn-primary-portal {
    border: 0;
    border-radius: 6px;
    color: #fff;
    min-height: 36px;
    padding: 8px 12px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.btn-quote, .btn-primary-portal { background: var(--ttpd-navy); }
.btn-buy { background: var(--ttpd-red); }
.btn-add-cart {
    gap: 8px;
    transition: background .16s ease, transform .16s ease;
}
.btn-add-cart:hover { background: #b92525; }
.btn-add-cart.is-added { background: var(--ttpd-navy); }
.application-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 24px 42px; }
.application-title { max-width: 760px; margin: 0 0 0 0; }
.application-grid { display: grid; grid-template-columns: 760px minmax(240px, 300px); gap: 18px; margin-top: 16px; align-items: start; }
.application-form { width: 100%; padding: 22px 46px 28px; }
.legal-wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 24px 42px; }
.legal-panel { padding: 28px 34px; }
.legal-lead { margin: 14px 0 24px; color: var(--ttpd-muted); font-size: 16px; line-height: 1.65; max-width: 760px; }
.legal-section { border-top: 1px solid var(--ttpd-line); padding-top: 18px; margin-top: 18px; }
.legal-section h2 { margin: 0 0 8px; color: var(--ttpd-ink); font-size: 18px; font-weight: 900; }
.legal-section p { margin: 0; color: var(--ttpd-muted); line-height: 1.65; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 auto 26px; max-width: 560px; position: relative; }
.steps::before { content: ""; position: absolute; top: 17px; left: 16%; right: 16%; height: 3px; background: #c7d1dc; }
.step { position: relative; z-index: 1; text-align: center; font-weight: 800; color: #1f2937; }
.step-number { width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #c7d1dc; color: #7a8796; }
.step.active .step-number { background: var(--ttpd-red); border-color: var(--ttpd-red); color: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portal-field { margin-bottom: 18px; }
.portal-field label { display: block; margin-bottom: 7px; color: #111827; font-weight: 800; }
.portal-field input, .portal-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #bac7d4;
    border-radius: 6px;
    background: #edf2f6;
    padding: 9px 12px;
    color: #17283d;
    font: inherit;
}
.trust-card { padding: 18px; }
.trust-card h2 { font-size: 18px; margin: 0 0 18px; font-weight: 900; }
.trust-item { display: flex; align-items: center; gap: 14px; color: #1f2937; font-weight: 700; }
.trust-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff1f1; color: var(--ttpd-red); }
.portal-agreement { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; margin-bottom: 10px; color: #1f2937; font-weight: 700; line-height: 1.45; }
.portal-agreement input { width: 18px; height: 18px; margin-top: 2px; }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 14;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .portal-topbar { grid-template-columns: 240px minmax(0,1fr) minmax(0, auto); gap: 14px; padding: 0 16px 0 0; }
    .portal-topbar-brand { padding-left: 16px; }
    .portal-logo { font-size: 30px; }
    .layout-grid { grid-template-columns: 240px minmax(0, 1fr); }
    .portal-nav a { padding: 8px 12px; font-size: 13px; }
    .parts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .search-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-actions { grid-column: 1 / -1; }
    .metric-grid { grid-template-columns: 1fr; }
    .application-wrap { max-width: 820px; }
    .application-grid { grid-template-columns: 1fr; }
    .application-title { max-width: none; }
    /* Show hamburger on tablet (it lives inside .portal-topbar-brand) */
    .portal-menu-toggle { display: inline-flex; }
    /* Section summaries on tablet */
    .portal-nav-group > summary { font-size: 10.5px; padding: 8px 12px; }
    /* Collapsed sidebar on tablet */
    .portal-shell.sidebar-off .layout-grid { grid-template-columns: 0 minmax(0,1fr); }
    .portal-shell.sidebar-off .portal-sidebar {
        width: 0;
        padding: 0;
        overflow: hidden;
        min-width: 0;
    }
}
@media (max-width: 760px) {
    .portal-topbar {
        height: auto;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 10px 14px;
        gap: 10px;
    }
    .portal-logo { font-size: 28px; }
    .portal-topbar-brand { gap: 8px; padding-left: 0; }
    .portal-menu-toggle { display: inline-flex; width: 40px; padding: 0; }
    .portal-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .portal-search-suggestions { width: 100%; max-height: 230px; }
    .portal-actions {
        grid-column: 3;
        grid-row: 1;
        gap: 8px;
    }
    .portal-cart { width: 38px; height: 38px; }
    .portal-user-name { display: none; }
    .portal-user > .fa-circle-user { font-size: 26px; }
    .portal-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 18px 14px;
    }
    .portal-footer-copy { white-space: normal; }
    .app-frame { width: 100%; margin: 0; }
    .layout-grid { display: block; }
    .search-page, .parts-grid, .form-row { grid-template-columns: 1fr; }
    /* Left-side sliding drawer */
    .portal-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 288px;
        max-height: none;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-110%);
        transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
        z-index: 50;
        border-right: 1px solid rgba(255,255,255,.08);
    }
    .portal-shell.nav-open .portal-sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 32px rgba(0,0,0,.45);
    }
    .portal-shell.nav-open .nav-backdrop {
        display: block;
        z-index: 49;
    }
    .sidebar-mobile-header { display: flex; }
    .portal-nav {
        flex-direction: column;
        gap: 4px;
        overflow: visible;
        padding: 8px 10px 24px;
    }
    .portal-nav a {
        min-width: 0;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
    }
    .portal-nav-group > summary { font-size: 11px; padding: 10px 14px; }
    .portal-nav-group > a { min-height: 42px; font-size: 14px; padding-left: 42px; }
    .portal-main, .application-wrap, .legal-wrap { padding: 16px; }
    .page-title { font-size: 26px; overflow-wrap: anywhere; }
    .page-kicker { font-size: 14px; }
    .metric-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 14px 0;
    }
    .credit-card,
    .agent-card {
        min-height: auto;
        padding: 18px 14px;
    }
    .credit-card .amount { font-size: 38px; }
    .section-caption { padding: 12px 14px; font-size: 16px; }
    .btn-primary-portal, .btn-quote, .btn-buy { width: auto; min-width: 0; white-space: normal; text-align: center; }
    .application-form { padding: 18px; }
    .steps { gap: 4px; max-width: none; }
    .step { font-size: 13px; }
    .step-number { width: 30px; height: 30px; }
    .steps::before { top: 15px; left: 18%; right: 18%; }
    .search-summary { align-items: flex-start; flex-direction: column; }
    .search-summary h1 { font-size: 24px; overflow-wrap: anywhere; }
    .search-filter-bar { grid-template-columns: 1fr; }
    .filter-actions { grid-column: auto; }
    .filter-panel {
        border-right: 0;
        border-bottom: 1px solid var(--ttpd-line);
        padding: 14px;
    }
    .filter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filter-row, .filter-items {
        border-bottom: 1px solid var(--ttpd-line);
    }
    .filter-items {
        grid-column: 1 / -1;
    }
    .search-workspace { padding: 16px; }
    .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
    .data-table thead { display: none; }
    .data-table tr { margin: 0 12px 12px; border: 1px solid var(--ttpd-line); border-radius: 8px; background: #fff; overflow: hidden; }
    .data-table td { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; text-align: left !important; }
    .data-table td::before { content: attr(data-label); color: var(--ttpd-muted); font-weight: 900; }
    .data-table td[colspan] {
        display: block;
        text-align: center !important;
    }
    .data-table td[colspan]::before { content: none; }
    .modal-dialog { margin: 12px; }
}

@media (max-width: 480px) {
    .portal-topbar { top: 0; }
    .portal-logo { font-size: 28px; }
    .portal-user span { max-width: 160px; }
    .portal-search-suggestions button { white-space: normal; }
    .portal-main, .application-wrap, .legal-wrap, .search-workspace { padding: 12px; }
    .legal-panel { padding: 22px 18px; }
    .legal-actions { flex-direction: column; }
    .credit-card, .agent-card { min-height: 120px; padding: 16px 12px; }
    .credit-card .amount { font-size: 34px; }
    .data-table tr { margin: 0 0 12px; }
    .data-table td { grid-template-columns: 104px minmax(0, 1fr); padding: 12px; font-size: 14px; }
    .parts-grid { gap: 12px; }
    .part-actions { grid-template-columns: 1fr; }
    .part-card { min-height: auto; }
    .part-price strong { font-size: 24px; }
    .filter-group { grid-template-columns: 1fr; }
    .application-form { padding: 16px 14px; }
    .steps { grid-template-columns: 1fr; gap: 10px; }
    .steps::before { display: none; }
    .step {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        text-align: left;
    }
    .step-number { margin: 0; }
}