/* =========================================
   CAMPUS MARKETPLACE
   ACTUAL MARKETPLACE PAGE
   Mobile-first design
========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --blue: #1457d9;
    --blue-dark: #0e43ad;
    --blue-light: #edf4ff;

    --text: #101828;
    --text-secondary: #667085;
    --text-light: #98a2b3;

    --border: #e4e7ec;
    --background: #ffffff;
    --surface: #f8fafc;

    --green: #159447;
    --green-light: #eaf8ef;

    --orange: #f59e0b;

    --danger: #e63946;

    --nav-height: 76px;

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 24px;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background: #eef1f6;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

.hidden {
    display: none !important;
}


/* =========================================
   APP CONTAINER
========================================= */

.app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;

    background: var(--background);

    position: relative;

    padding-bottom:
        calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px);
}


/* =========================================
   HEADER
========================================= */

.top-header {
    height: 82px;

    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;

    padding: 0 16px;

    background: #ffffff;
}

.page-title {
    text-align: center;

    font-size: 24px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.5px;
}

.icon-button {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--text);
}

.icon-button:hover {
    background: var(--surface);
}

.icon-button svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-button {
    position: relative;
}

.cart-count {
    position: absolute;

    top: 3px;
    right: 1px;

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    border-radius: 999px;

    background: var(--blue);
    color: white;

    display: grid;
    place-items: center;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================
   SEARCH
========================================= */

.search-section {
    padding: 0 16px 20px;
}

.search-row {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 10px;
}

.search-box {
    height: 58px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border: 1px solid var(--border);

    border-radius: 19px;

    background: #fbfcfe;
}

.search-box:focus-within {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(20, 87, 217, 0.08);
}

.search-box svg {
    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    margin-right: 13px;

    fill: none;
    stroke: #667085;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-box input {
    min-width: 0;
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 16px;
}

.search-box input::placeholder {
    color: #7d889b;
}

.clear-search {
    display: none;

    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #e8edf5;

    color: #475467;

    font-size: 19px;
    line-height: 20px;
}

.clear-search.visible {
    display: grid;
    place-items: center;
}

.filter-button {
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);

    border-radius: 19px;

    background: #fbfcfe;
}

.filter-button:hover {
    border-color: var(--blue);
}

.filter-button svg {
    width: 29px;
    height: 29px;

    fill: none;
    stroke: #344054;
    stroke-width: 1.8;

    stroke-linecap: round;
}


/* =========================================
   CATEGORIES
========================================= */

.categories-section {
    padding: 0 16px 27px;

    overflow: hidden;
}

.category-list {
    display: flex;

    gap: 14px;

    overflow-x: auto;

    padding: 1px 1px 7px;

    scrollbar-width: none;
}

.category-list::-webkit-scrollbar {
    display: none;
}

.category-item {
    flex: 0 0 74px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    color: #101828;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}

.category-icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);

    border-radius: 17px;

    background: #ffffff;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.category-icon svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: var(--blue);
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-item.active .category-icon {
    border-color: transparent;

    background: var(--blue-light);
}

.category-item.active {
    color: var(--blue);

    font-weight: 600;
}

.category-item:active .category-icon {
    transform: scale(0.95);
}

.more-dots {
    color: #111827;

    font-size: 25px;
    line-height: 1;

    letter-spacing: 1px;
}


/* =========================================
   MAIN CONTENT
========================================= */

.marketplace-content {
    padding: 0 16px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border);
}

.section-heading h2 {
    font-size: 24px;
    line-height: 1.1;

    letter-spacing: -0.5px;
}

.section-heading > div {
    display: flex;
    align-items: baseline;

    gap: 8px;
}

.section-heading span {
    color: var(--text-light);

    font-size: 11px;
}

.section-heading > button {
    color: var(--blue);

    font-size: 16px;
    font-weight: 600;
}

.section-heading > button:hover {
    text-decoration: underline;
}


/* =========================================
   PRODUCT LIST
========================================= */

.product-list {
    display: flex;
    flex-direction: column;
}

.product-card {
    position: relative;

    display: grid;
    grid-template-columns: 171px minmax(0, 1fr);
    gap: 24px;

    padding: 11px 8px;

    border-bottom: 1px solid var(--border);

    background: white;

    transition: background 0.18s ease;
}

.product-card:hover {
    background: #fcfdff;
}

.product-image-wrap {
    position: relative;

    width: 171px;
    height: 165px;

    overflow: hidden;

    border-radius: 15px;

    background: #f1f3f6;
}

.product-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.product-image.fallback {
    object-fit: contain;

    padding: 25px;
}

.favorite-button {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 2px 8px rgba(16, 24, 40, 0.08);
}

.favorite-button svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: #667085;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.favorite-button.active svg {
    fill: #1457d9;
    stroke: #1457d9;
}

.favorite-button:hover {
    transform: scale(1.05);
}

.product-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding-top: 8px;

    cursor: pointer;
}

.product-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
}

.product-price {
    margin-top: 8px;

    color: var(--blue);

    font-size: 22px;
    line-height: 1.1;

    font-weight: 700;
}

.product-location {
    margin-top: 10px;

    color: #667085;

    font-size: 16px;
    line-height: 1.25;
}

.product-rating {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: auto;
    padding-top: 12px;

    font-size: 16px;
}

.star {
    color: #fbb516;

    font-size: 22px;
    line-height: 1;
}

.rating-number {
    color: #101828;

    font-weight: 500;
}

.product-condition {
    align-self: flex-start;

    margin-top: 8px;
    padding: 5px 9px;

    border-radius: 999px;

    background: var(--green-light);
    color: var(--green);

    font-size: 11px;
    font-weight: 700;
}

.product-condition.new {
    background: #edf4ff;
    color: var(--blue);
}

.product-condition.reserved {
    background: #fff4db;
    color: #b77900;
}

.product-condition.sold {
    background: #fcebec;
    color: #c5303b;
}


/* =========================================
   EMPTY STATE
========================================= */

.empty-state {
    min-height: 390px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 35px 20px;
}

.empty-icon {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--blue-light);
}

.empty-icon svg {
    width: 32px;
    height: 32px;

    fill: none;
    stroke: var(--blue);
    stroke-width: 1.8;

    stroke-linecap: round;
}

.empty-state h3 {
    font-size: 21px;
}

.empty-state p {
    margin-top: 7px;

    color: var(--text-secondary);

    font-size: 14px;
}

.empty-state .primary-button {
    margin-top: 22px;
}


/* =========================================
   BUTTONS
========================================= */

.primary-button,
.secondary-button {
    min-height: 50px;

    padding: 0 20px;

    border-radius: 14px;

    font-weight: 650;
}

.primary-button {
    background: var(--blue);
    color: white;
}

.primary-button:hover {
    background: var(--blue-dark);
}

.secondary-button {
    border: 1px solid var(--border);

    background: white;
    color: var(--text);
}

.secondary-button:hover {
    background: var(--surface);
}


/* =========================================
   BOTTOM NAVIGATION
========================================= */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 100%;
    max-width: 430px;

    height: var(--nav-height);

    padding:
        7px 10px
        calc(7px + env(safe-area-inset-bottom));

    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr;
    align-items: center;

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid #e8ebf0;

    box-shadow:
        0 -4px 18px rgba(16, 24, 40, 0.04);

    z-index: 50;
}

.nav-item {
    height: 62px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    color: #667085;

    font-size: 11px;
    font-weight: 500;
}

.nav-item svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item.active {
    color: var(--blue);

    font-weight: 650;
}

.sell-button {
    width: 58px;
    height: 58px;

    justify-self: center;

    margin-top: -25px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);
    color: white;

    box-shadow:
        0 5px 14px rgba(20, 87, 217, 0.28);
}

.sell-button span {
    font-size: 38px;
    font-weight: 300;

    line-height: 1;

    transform: translateY(-2px);
}

.sell-button:hover {
    background: var(--blue-dark);
}


/* =========================================
   OVERLAYS
========================================= */

.overlay {
    position: fixed;

    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: rgba(16, 24, 40, 0.42);

    z-index: 100;

    padding: 0;
}

.bottom-sheet,
.cart-sheet {
    width: 100%;
    max-width: 430px;

    max-height: 88vh;

    overflow-y: auto;

    padding: 10px 18px 24px;

    border-radius: 26px 26px 0 0;

    background: white;
}

.sheet-handle {
    width: 42px;
    height: 4px;

    margin: 2px auto 17px;

    border-radius: 999px;

    background: #d0d5dd;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}

.sheet-header h2 {
    font-size: 22px;
}

.sheet-header button {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #f2f4f7;

    font-size: 25px;
    color: #475467;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group > label {
    display: block;

    margin-bottom: 11px;

    font-size: 14px;
    font-weight: 650;
}

.filter-options {
    display: flex;
    gap: 9px;
}

.filter-chip {
    padding: 10px 16px;

    border: 1px solid var(--border);

    border-radius: 999px;

    color: #475467;

    font-size: 13px;
}

.filter-chip.active {
    border-color: var(--blue);

    background: var(--blue-light);
    color: var(--blue);
}

#sortSelect {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    border: 1px solid var(--border);

    border-radius: 13px;

    outline: none;

    background: white;
}

.sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;

    gap: 10px;

    margin-top: 30px;
}


/* =========================================
   PRODUCT DETAILS MODAL
========================================= */

.product-modal {
    position: relative;

    width: 100%;
    max-width: 430px;

    max-height: 92vh;

    overflow-y: auto;

    border-radius: 26px 26px 0 0;

    background: white;
}

.modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 5;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

    color: #475467;

    font-size: 25px;

    box-shadow:
        0 2px 8px rgba(16, 24, 40, 0.08);
}

.details-image {
    width: 100%;
    height: 285px;

    object-fit: cover;

    display: block;

    background: #f2f4f7;
}

.details-content {
    padding: 22px 20px 28px;
}

.details-category {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--blue-light);
    color: var(--blue);

    font-size: 11px;
    font-weight: 700;
}

.details-title {
    margin-top: 11px;

    font-size: 25px;
    line-height: 1.2;
}

.details-price {
    margin-top: 9px;

    color: var(--blue);

    font-size: 26px;
    font-weight: 750;
}

.details-meta {
    display: grid;
    gap: 8px;

    margin-top: 17px;

    color: #667085;

    font-size: 14px;
}

.details-seller {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 21px;

    padding-top: 18px;

    border-top: 1px solid var(--border);
}

.seller-avatar {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue-light);
    color: var(--blue);

    font-weight: 700;
}

.seller-name {
    font-size: 14px;
    font-weight: 700;
}

.seller-label {
    margin-top: 2px;

    color: var(--text-secondary);

    font-size: 11px;
}

.details-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 22px;
}


/* =========================================
   CART
========================================= */

.cart-sheet {
    min-height: 320px;
}

.cart-empty {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.cart-empty-icon {
    font-size: 45px;

    margin-bottom: 10px;
}

.cart-empty p {
    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 14px;
}

.cart-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 11px 0;

    border-bottom: 1px solid var(--border);
}

.cart-item img {
    width: 65px;
    height: 65px;

    object-fit: cover;

    border-radius: 12px;
}

.cart-item-info {
    min-width: 0;
    flex: 1;
}

.cart-item-info strong {
    display: block;

    font-size: 14px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-info span {
    display: block;

    margin-top: 4px;

    color: var(--blue);

    font-size: 14px;
    font-weight: 700;
}

.remove-cart-item {
    color: #c5303b;

    font-size: 12px;
}

.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;

    font-size: 18px;
    font-weight: 700;
}


/* =========================================
   TOAST
========================================= */

.toast {
    position: fixed;

    left: 50%;
    bottom: calc(var(--nav-height) + 17px);

    transform:
        translate(-50%, 20px);

    width: max-content;
    max-width: calc(100vw - 40px);

    padding: 12px 17px;

    border-radius: 999px;

    background: #101828;
    color: white;

    font-size: 13px;
    font-weight: 550;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    z-index: 200;
}

.toast.show {
    opacity: 1;

    transform:
        translate(-50%, 0);
}


/* =========================================
   SIDE MENU
========================================= */

.side-menu {
    position: relative;

    align-self: stretch;

    width: 300px;
    max-width: 85vw;

    padding: 70px 22px 30px;

    background: white;

    box-shadow:
        10px 0 30px rgba(16, 24, 40, 0.12);
}

.side-menu .modal-close {
    top: 17px;
    right: 17px;
}

.menu-brand {
    display: flex;
    flex-direction: column;

    font-size: 22px;
    line-height: 0.95;

    margin-bottom: 35px;
}

.menu-brand strong {
    color: var(--blue);
}

.menu-brand span {
    color: var(--text);
}

.menu-links {
    display: grid;
    gap: 8px;
}

.menu-links button {
    padding: 15px;

    border-radius: 12px;

    text-align: left;

    color: #344054;

    font-size: 15px;
}

.menu-links button:hover {
    background: var(--blue-light);

    color: var(--blue);
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 700px) {

    body {
        padding: 25px 0;
    }

    .app {
        min-height: calc(100vh - 50px);

        border-radius: 26px;

        /* clip (not hidden) so the sticky header still sticks */
        overflow: hidden;
        overflow: clip;

        box-shadow:
            0 10px 50px rgba(16, 24, 40, 0.12);
    }

    .bottom-nav {
        bottom: 25px;

        border-radius: 0 0 26px 26px;
    }

    .toast {
        bottom: 120px;
    }

}
/* =========================================================
   SHARED MOBILE APP SHELL — PHASE 2 FOUNDATION
   Exact nav sizing shared with the Home screen.
   ========================================================= */
.app {
    width: 100%;
    max-width: 430px;
}

.bottom-nav {
    width: 100%;
    max-width: 430px;
    height: 76px;
    min-height: 76px;
    grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
}

.bottom-nav .nav-item {
    height: 62px;
    gap: 4px;
    font-size: 11px;
}

.bottom-nav .nav-item svg {
    width: 27px;
    height: 27px;
}

.bottom-nav .sell-button {
    width: 58px;
    height: 58px;
    margin-top: -25px;
}

.bottom-nav .sell-button span {
    font-size: 38px;
}

@media (min-width: 431px) {
    body {
        padding: 12px 0;
    }

    .app {
        min-height: calc(100vh - 24px);
        border-radius: 22px;
        overflow: hidden;
        overflow: clip; /* not hidden: keeps the sticky header working */
        box-shadow: 0 12px 40px rgba(16,24,40,.10);
    }
}

@media (max-width: 430px) {
    body {
        background: #ffffff;
    }

    .app {
        border-radius: 0;
        box-shadow: none;
    }
}

/* =========================================================
   SHARED RESPONSIVE NAVIGATION — DESKTOP SIDEBAR / MOBILE BAR
   ========================================================= */
@media (min-width: 769px) {
    body { padding: 0 !important; background: #f4f6fa !important; }
    .app {
        max-width: none !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 40px 40px 260px !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .bottom-nav {
        left: 0 !important; top: 0 !important; bottom: 0 !important;
        transform: none !important; width: 220px !important; max-width: 220px !important;
        height: 100vh !important; padding: 92px 14px 28px !important;
        display: grid !important; grid-template-columns: 1fr !important;
        grid-template-rows: repeat(5, minmax(52px, 1fr)) !important; gap: 8px !important;
        border: 0 !important; border-right: 1px solid #e7eaf0 !important;
        border-radius: 0 !important; box-shadow: 4px 0 20px rgba(16,24,40,.04) !important;
        background: #fff !important;
    }
    .bottom-nav .nav-item {
        width: 100% !important; height: 58px !important; flex-direction: row !important;
        justify-content: flex-start !important; gap: 13px !important; padding: 0 18px !important;
        border-radius: 13px !important; font-size: 13px !important; font-weight: 600 !important;
    }
    .bottom-nav .nav-item:hover { background: #f5f7fb !important; color: var(--blue) !important; }
    .bottom-nav .nav-item.active { background: #edf4ff !important; color: var(--blue) !important; }
    .bottom-nav .nav-item svg { width: 22px !important; height: 22px !important; flex: 0 0 auto; stroke-width: 1.9 !important; }
    .bottom-nav .sell-button {
        width: calc(100% - 10px) !important; height: 50px !important; margin: 8px 5px !important;
        border-radius: 13px !important; box-shadow: 0 8px 20px rgba(20,87,217,.18) !important;
    }
    .bottom-nav .sell-button span { font-size: 15px !important; font-weight: 700 !important; }
    .bottom-nav .sell-button span::after { content: "  Post an item"; }
}


/* =========================================================
   CAMPUS MARKETPLACE — SHARED NAVIGATION & ICON SYSTEM
   One icon language across every screen. Desktop sidebar,
   tablet/mobile bottom bar.
   ========================================================= */
.bottom-nav, .bottom-navigation {
  --nav-blue:#1457d9; --nav-ink:#344054; --nav-muted:#667085;
  box-sizing:border-box;
}
.bottom-nav .nav-item, .bottom-navigation .nav-item {
  position:relative; border:1px solid transparent; color:var(--nav-muted);
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.bottom-nav .nav-item svg, .bottom-navigation .nav-item svg {
  fill:none !important; stroke:currentColor !important;
  stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
}
.bottom-nav .nav-item:hover, .bottom-navigation .nav-item:hover {
  color:var(--nav-blue) !important; background:#f7f9fc !important;
}
.bottom-nav .nav-item.active, .bottom-navigation .nav-item.active {
  color:var(--nav-blue) !important; background:#edf4ff !important;
  border-color:#dbe8ff !important; font-weight:700 !important;
}
.bottom-nav .nav-item.active svg, .bottom-navigation .nav-item.active svg { stroke-width:2 !important; }
.bottom-nav .nav-item:active, .bottom-navigation .nav-item:active { transform:scale(.97); }
.sell-button {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--nav-blue) !important; color:#fff !important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.sell-button:hover { background:#0e43ad !important; transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,87,217,.24) !important; }
.sell-plus { font-weight:400; line-height:1; }
.sell-label { display:none; }

/* Marketplace category chips: familiar, readable, touch-friendly */
.category-list { align-items:stretch !important; gap:12px !important; }
.category-item {
  min-width:92px !important; min-height:86px !important; padding:10px 9px 9px !important;
  border:1px solid #e6eaf0 !important; border-radius:16px !important;
  background:#fff !important; color:#344054 !important;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.category-item:hover { transform:translateY(-2px); border-color:#c9d9f7 !important; box-shadow:0 7px 18px rgba(20,87,217,.08); }
.category-item.active { background:#f4f8ff !important; border-color:#bcd1f5 !important; color:#1457d9 !important; box-shadow:0 6px 16px rgba(20,87,217,.08); }
.category-icon {
  width:42px !important; height:42px !important; border-radius:13px !important;
  display:grid !important; place-items:center !important; margin-bottom:7px !important;
  background:#f4f6f9 !important; color:#475467 !important;
}
.category-item.active .category-icon { background:#e3efff !important; color:#1457d9 !important; }
.category-icon svg { width:23px !important; height:23px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.7 !important; stroke-linecap:round; stroke-linejoin:round; }
.category-item > span:last-child { font-size:11px !important; font-weight:650 !important; white-space:nowrap; }

@media (max-width:768px) {
  .bottom-nav, .bottom-navigation { height:78px !important; min-height:78px !important; padding:7px 10px calc(7px + env(safe-area-inset-bottom)) !important; }
  .bottom-nav .nav-item, .bottom-navigation .nav-item { height:62px !important; gap:4px !important; border-radius:13px !important; font-size:10.5px !important; }
  .bottom-nav .nav-item svg, .bottom-navigation .nav-item svg { width:24px !important; height:24px !important; }
  .bottom-nav .sell-button, .bottom-navigation .add-button { width:58px !important; height:58px !important; border-radius:18px !important; margin-top:-20px !important; }
  .sell-plus { font-size:35px; }
  .category-list { overflow-x:auto !important; padding-bottom:4px !important; scrollbar-width:none; }
  .category-list::-webkit-scrollbar { display:none; }
}
@media (min-width:769px) {
  .bottom-nav, .bottom-navigation { width:236px !important; max-width:236px !important; padding:94px 16px 28px !important; gap:9px !important; }
  .bottom-nav .nav-item, .bottom-navigation .nav-item { height:56px !important; padding:0 16px !important; gap:13px !important; border-radius:13px !important; font-size:13px !important; }
  .bottom-nav .nav-item svg, .bottom-navigation .nav-item svg { width:21px !important; height:21px !important; flex:0 0 auto; }
  .bottom-nav .sell-button, .bottom-navigation .add-button { width:100% !important; height:48px !important; margin:8px 0 !important; border-radius:13px !important; }
  .bottom-nav .sell-plus { font-size:0; }
  .bottom-nav .sell-plus::before { content:'＋'; font-size:19px; }
  .bottom-nav .sell-label { display:inline !important; font-size:13px; font-weight:700; margin-left:7px; }
}
@media (min-width: 769px) {
  .app { padding-left: 284px !important; }
}


/* =========================================================
   CATEGORY ICONS — FRIENDLY, COLORFUL & CONSISTENT
   ========================================================= */
.category-list {
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 2px 2px 10px !important;
}

.category-item {
    flex: 0 0 88px !important;
    min-width: 88px !important;
    min-height: 96px !important;
    padding: 9px 7px 10px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    border: 1px solid #e8ebf0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 2px 7px rgba(16,24,40,.035) !important;
    color: #344054 !important;
}

.category-item:hover {
    transform: translateY(-2px);
    border-color: #d5dff0 !important;
    box-shadow: 0 7px 16px rgba(16,24,40,.08) !important;
}

.category-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 15px !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
    box-shadow: none !important;
    transition: transform .18s ease !important;
}

.category-item:hover .category-icon {
    transform: scale(1.06);
}

.category-item > span:last-child {
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    color: #344054 !important;
}

.category-all { background: #e9f2ff !important; }
.category-books { background: #fff0df !important; }
.category-electronics { background: #e9f7ee !important; }
.category-uniforms { background: #f2eaff !important; }
.category-supplies { background: #fff6d9 !important; }
.category-more {
    background: #f0f2f5 !important;
    color: #475467 !important;
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    font-weight: 800 !important;
}

.category-item.active {
    background: #f7faff !important;
    border-color: #bcd1f5 !important;
    color: var(--blue) !important;
    box-shadow: 0 5px 14px rgba(20,87,217,.08) !important;
}

.category-item.active > span:last-child { color: var(--blue) !important; }

@media (max-width:430px) {
    .category-list { gap: 11px !important; }
    .category-item {
        flex-basis: 84px !important;
        min-width: 84px !important;
        min-height: 94px !important;
    }
    .category-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 24px !important;
    }
}

@media (min-width:769px) {
    .category-list {
        gap: 14px !important;
        overflow-x: visible !important;
    }
    .category-item {
        flex: 0 0 100px !important;
        min-width: 100px !important;
        min-height: 104px !important;
        padding: 10px 8px !important;
    }
    .category-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        font-size: 27px !important;
    }
    .category-item > span:last-child { font-size: 12px !important; }
}


/* =========================================================
   CATEGORY ICONS — one line-icon set in one brand color
   (matches the Home categories)
   ========================================================= */
.category-item .category-icon {
    border: 1px solid #dbe6fb !important;
    background: var(--blue-light) !important;
    color: var(--blue) !important;
}

.category-item .category-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.9 !important;
}

.category-item:hover .category-icon,
.category-item.active .category-icon {
    border-color: var(--blue) !important;
    background: var(--blue) !important;
    color: #ffffff !important;
}


/* =========================================================
   MESSAGE SELLER — beside the seller's name in item details
   ========================================================= */
.message-seller-button {
    margin-left: auto;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid var(--blue);
    border-radius: 999px;
    background: #ffffff;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}

.message-seller-button:hover {
    background: var(--blue);
    color: #ffffff;
}

.message-seller-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.details-actions .primary-button:disabled {
    background: #c7d3ea;
    cursor: default;
}


/* =========================================================
   CHECKOUT — purchase request sent to the seller
   ========================================================= */
.checkout-intro {
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.checkout-items {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.checkout-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 650;
}

.checkout-items li + li {
    border-top: 1px solid var(--border);
}

.checkout-items small {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.checkout-items b {
    color: var(--blue);
    white-space: nowrap;
}

.checkout-note {
    display: block;
    margin-top: 16px;
}

.checkout-note span {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.checkout-note textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.checkout-note textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(20, 87, 217, 0.1);
}

.checkout-button {
    width: 100%;
    margin-top: 10px;
}

.checkout .cart-total + .checkout-button {
    margin-top: 16px;
}

.checkout-button:disabled {
    opacity: 0.7;
    cursor: wait;
}

.checkout-done {
    padding: 8px 0 2px;
    text-align: center;
}

.checkout-done-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green);
    font-size: 28px;
    font-weight: 800;
}

.checkout-done-icon.failed {
    background: #fdecec;
    color: var(--danger);
}

.checkout-done h3 {
    font-size: 20px;
}

.checkout-done p {
    margin: 7px 0 16px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.checkout-failed {
    margin-bottom: 12px;
    padding: 10px 14px;
    list-style: none;
    border-radius: 12px;
    background: #fdecec;
    color: #9b1c1c;
    font-size: 12px;
    text-align: left;
}


/* Shown while listings load from the server. */
.loading-items {
    padding: 40px 0;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    grid-column: 1 / -1;
}


/* Seller avatar + name: opens their public profile. */
.seller-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -6px;
    padding: 6px 10px 6px 6px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}
.seller-link:hover { background: var(--surface); }
.seller-link:hover .seller-name { text-decoration: underline; }
.seller-link:focus-visible { outline: 3px solid rgba(20, 87, 217, .3); outline-offset: 2px; }
.seller-link .seller-avatar { flex: 0 0 auto; }
.seller-link .seller-label { color: var(--blue); font-weight: 600; }
:root[data-theme="dark"] .seller-link:hover { background: #222935; }
:root[data-theme="dark"] .seller-link .seller-label { color: #6796f1; }
:root[data-theme="dark"] .seller-link .seller-name { color: #e4e8ef; }

/* Cards have no date row: keep the condition badge at the bottom so badges line up across a row. */
.product-info > .product-location { margin-bottom: 10px; font-size: 13px; }

/* One line; long spot names end with "…" */
.product-info > .product-location { max-width: 100%; }
.product-info > .product-location > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 768px) {
    .product-info > .product-location { font-size: 12px; }
}
.product-info > .product-condition { margin-top: auto; align-self: flex-end; }
.product-info > .product-price { margin-bottom: 8px; }   /* keeps the condition off the price */

/* Item name on one line; a long name ends with "…" */
.product-card .product-name {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Condition: coloured text only, no background (light and dark) */
.product-condition,
.product-condition.new,
.product-condition.reserved,
.product-condition.sold,
:root[data-theme="dark"] .product-condition,
:root[data-theme="dark"] .product-condition.new,
:root[data-theme="dark"] .product-condition.reserved,
:root[data-theme="dark"] .product-condition.sold { padding: 0; border-radius: 0; background: none !important; }

/* Line icons (CampusIcons) in cards, item details and the cart. */
.product-rating > svg.ui-icon { opacity: .7; }

.details-meta .icon-text { align-items: flex-start; }
.details-meta .icon-text > svg.ui-icon { margin-top: .12em; }

.details-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.cart-empty-icon svg.ui-icon { stroke-width: 1.6; opacity: .55; }
.checkout-done-icon svg.ui-icon { stroke-width: 2.6; }


/* ===== DARK THEME (generated by tools/dark-theme.py — do not edit by hand) ===== */
:root[data-theme="dark"] { --blue: #1457d9; --blue--fg: #6796f1; --blue--bd: #1457d9; --blue-dark: #0e43ad; --blue-dark--fg: #6b98f3; --blue-dark--bd: #2052b6; --blue-light: #1a273b; --blue-light--fg: #edf4ff; --blue-light--bd: #213657; --text: #2d3a54; --text--fg: #ced5e2; --text--bd: #3d5c99; --text-secondary: #4f5767; --text-secondary--fg: #9ba3b2; --text-secondary--bd: #9ba3b2; --text-light: #404b63; --text-light--fg: #77849b; --text-light--bd: #49566e; --border: #2a3242; --border--fg: #e4e7ec; --border--bd: #2b3240; --background: #171b24; --background--fg: #ffffff; --background--bd: #181d25; --surface: #1d232e; --surface--fg: #f8fafc; --surface--bd: #1c212b; --green: #159447; --green--fg: #74eba3; --green--bd: #20b65b; --green-light: #1d402a; --green-light--fg: #eaf8ef; --green-light--bd: #225936; --orange: #f59e0b; --orange--fg: #f2be64; --orange--bd: #f59e0b; --danger: #e63946; --danger--fg: #ec6872; --danger--bd: #e63946; }
:root[data-theme="dark"] body { background-color: #0e1118; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] button { border-color: currentColor; background-color: transparent; background-image: none; }
:root[data-theme="dark"] .app { background-color: var(--background); background-image: none; }
:root[data-theme="dark"] .top-header { background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .icon-button { color: var(--text--fg); }
:root[data-theme="dark"] .icon-button:hover { background-color: var(--surface); background-image: none; }
:root[data-theme="dark"] .icon-button svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .cart-count { background-color: var(--blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .search-box { border-color: var(--border--bd); background-color: #1a1f29; background-image: none; }
:root[data-theme="dark"] .search-box:focus-within { border-color: var(--blue--bd); box-shadow: 0 0 0 3px rgba(20, 87, 217, 0.16); }
:root[data-theme="dark"] .search-box svg { fill: none; stroke: #9ba3b2; }
:root[data-theme="dark"] .search-box input { border-color: currentColor; outline-color: currentColor; background-color: transparent; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .search-box input::placeholder { color: #8c95a6; }
:root[data-theme="dark"] .clear-search { background-color: #262d3b; background-image: none; color: #adb7c6; }
:root[data-theme="dark"] .filter-button { border-color: var(--border--bd); background-color: #1a1f29; background-image: none; }
:root[data-theme="dark"] .filter-button:hover { border-color: var(--blue--bd); }
:root[data-theme="dark"] .filter-button svg { fill: none; stroke: #bac3d1; }
:root[data-theme="dark"] .category-item { color: #ced5e2; }
:root[data-theme="dark"] .category-icon { border-color: var(--border--bd); background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .category-icon svg { fill: none; stroke: var(--blue--fg); }
:root[data-theme="dark"] .category-item.active .category-icon { border-color: transparent; background-color: var(--blue-light); background-image: none; }
:root[data-theme="dark"] .category-item.active { color: var(--blue--fg); }
:root[data-theme="dark"] .more-dots { color: #d8dce5; }
:root[data-theme="dark"] .section-heading { border-bottom-color: var(--border--bd); }
:root[data-theme="dark"] .section-heading span { color: var(--text-light--fg); }
:root[data-theme="dark"] .section-heading > button { color: var(--blue--fg); }
:root[data-theme="dark"] .product-card { border-bottom-color: var(--border--bd); background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .product-card:hover { background-color: #191d27; background-image: none; }
:root[data-theme="dark"] .product-image-wrap { background-color: #232936; background-image: none; }
:root[data-theme="dark"] .favorite-button { background-color: rgba(23, 27, 36, 0.95); background-image: none; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.184); }
:root[data-theme="dark"] .favorite-button svg { fill: none; stroke: #9ba3b2; }
:root[data-theme="dark"] .favorite-button.active svg { fill: #6796f1; stroke: #6796f1; }
:root[data-theme="dark"] .product-price { color: var(--blue--fg); }
:root[data-theme="dark"] .product-location { color: #9ba3b2; }
:root[data-theme="dark"] .star { color: #f2c663; }
:root[data-theme="dark"] .rating-number { color: #ced5e2; }
:root[data-theme="dark"] .product-condition { background-color: var(--green-light); background-image: none; color: var(--green--fg); }
:root[data-theme="dark"] .product-condition.new { background-color: #1a273b; background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .product-condition.reserved { background-color: #45391f; background-image: none; color: #f3c56b; }
:root[data-theme="dark"] .product-condition.sold { background-color: #3e1c1e; background-image: none; color: #de7981; }
:root[data-theme="dark"] .empty-icon { background-color: var(--blue-light); background-image: none; }
:root[data-theme="dark"] .empty-icon svg { fill: none; stroke: var(--blue--fg); }
:root[data-theme="dark"] .empty-state p { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .primary-button { background-color: var(--blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .primary-button:hover { background-color: var(--blue-dark); background-image: none; }
:root[data-theme="dark"] .secondary-button { border-color: var(--border--bd); background-color: #171b24; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .secondary-button:hover { background-color: var(--surface); background-image: none; }
:root[data-theme="dark"] .bottom-nav { background-color: rgba(23, 27, 36, 0.98); background-image: none; border-top-color: #282e3c; box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.112); }
:root[data-theme="dark"] .nav-item { color: #9ba3b2; }
:root[data-theme="dark"] .nav-item svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .nav-item.active { color: var(--blue--fg); }
:root[data-theme="dark"] .sell-button { background-color: var(--blue); background-image: none; color: #ffffff; box-shadow: 0 5px 14px rgba(20, 87, 217, 0.28); }
:root[data-theme="dark"] .sell-button:hover { background-color: var(--blue-dark); background-image: none; }
:root[data-theme="dark"] .overlay { background-color: rgba(16, 24, 40, 0.42); background-image: none; }
:root[data-theme="dark"] .bottom-sheet, :root[data-theme="dark"] .cart-sheet { background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .sheet-handle { background-color: #343e51; background-image: none; }
:root[data-theme="dark"] .sheet-header button { background-color: #222935; background-image: none; color: #adb7c6; }
:root[data-theme="dark"] .filter-chip { border-color: var(--border--bd); color: #adb7c6; }
:root[data-theme="dark"] .filter-chip.active { border-color: var(--blue--bd); background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] #sortSelect { border-color: var(--border--bd); outline-color: currentColor; background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .product-modal { background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .modal-close { background-color: rgba(23, 27, 36, 0.92); background-image: none; color: #adb7c6; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.184); }
:root[data-theme="dark"] .details-image { background-color: #222935; background-image: none; }
:root[data-theme="dark"] .details-category { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .details-price { color: var(--blue--fg); }
:root[data-theme="dark"] .details-meta { color: #9ba3b2; }
:root[data-theme="dark"] .details-seller { border-top-color: var(--border--bd); }
:root[data-theme="dark"] .seller-avatar { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .seller-label { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .cart-empty p { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .cart-item { border-bottom-color: var(--border--bd); }
:root[data-theme="dark"] .cart-item-info span { color: var(--blue--fg); }
:root[data-theme="dark"] .remove-cart-item { color: #de7981; }
:root[data-theme="dark"] .toast { background-color: #2d3a54; background-image: none; color: #ffffff; }
:root[data-theme="dark"] .side-menu { background-color: #171b24; background-image: none; box-shadow: 10px 0 30px rgba(16, 24, 40, 0.256); }
:root[data-theme="dark"] .menu-brand strong { color: var(--blue--fg); }
:root[data-theme="dark"] .menu-brand span { color: var(--text--fg); }
:root[data-theme="dark"] .menu-links button { color: #bac3d1; }
:root[data-theme="dark"] .menu-links button:hover { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
@media (min-width: 700px) {
  :root[data-theme="dark"] .app { box-shadow: 0 10px 50px rgba(16, 24, 40, 0.256); }
}
@media (min-width: 431px) {
  :root[data-theme="dark"] .app { box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22); }
}
@media (max-width: 430px) {
  :root[data-theme="dark"] body { background-color: #0e1118; background-image: none; }
  :root[data-theme="dark"] .app { box-shadow: none; }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] body { background-color: #0e1118 !important; background-image: none !important; }
  :root[data-theme="dark"] .app { background-color: #171b24 !important; background-image: none !important; }
  :root[data-theme="dark"] .bottom-nav { border-color: currentColor !important; border-right-color: #282f3c !important; box-shadow: 4px 0 20px rgba(16, 24, 40, 0.112) !important; background-color: #171b24 !important; background-image: none !important; }
  :root[data-theme="dark"] .bottom-nav .nav-item:hover { background-color: #202631 !important; background-image: none !important; color: var(--blue--fg) !important; }
  :root[data-theme="dark"] .bottom-nav .nav-item.active { background-color: #1a273b !important; background-image: none !important; color: var(--blue--fg) !important; }
  :root[data-theme="dark"] .bottom-nav .sell-button { box-shadow: 0 8px 20px rgba(20, 87, 217, 0.18) !important; }
}
:root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .bottom-navigation { --nav-blue: #1457d9; --nav-blue--fg: #6796f1; --nav-blue--bd: #1457d9; --nav-ink: #3a465e; --nav-ink--fg: #bac3d1; --nav-ink--bd: #bac3d1; --nav-muted: #4f5767; --nav-muted--fg: #9ba3b2; --nav-muted--bd: #9ba3b2; }
:root[data-theme="dark"] .bottom-nav .nav-item, :root[data-theme="dark"] .bottom-navigation .nav-item { border-color: transparent; color: var(--nav-muted--fg); }
:root[data-theme="dark"] .bottom-nav .nav-item svg, :root[data-theme="dark"] .bottom-navigation .nav-item svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .bottom-nav .nav-item:hover, :root[data-theme="dark"] .bottom-navigation .nav-item:hover { color: var(--nav-blue--fg) !important; background-color: #1e232f !important; background-image: none !important; }
:root[data-theme="dark"] .bottom-nav .nav-item.active, :root[data-theme="dark"] .bottom-navigation .nav-item.active { color: var(--nav-blue--fg) !important; background-color: #1a273b !important; background-image: none !important; border-color: #23375c !important; }
:root[data-theme="dark"] .sell-button { background-color: var(--nav-blue) !important; background-image: none !important; color: #ffffff !important; }
:root[data-theme="dark"] .sell-button:hover { background-color: #0e43ad !important; background-image: none !important; box-shadow: 0 8px 20px rgba(20, 87, 217, 0.24) !important; }
:root[data-theme="dark"] .category-item { border-color: #282f3d !important; background-color: #171b24 !important; background-image: none !important; color: #bac3d1 !important; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.103); }
:root[data-theme="dark"] .category-item:hover { border-color: #263b63 !important; box-shadow: 0 7px 18px rgba(20, 87, 217, 0.08); }
:root[data-theme="dark"] .category-item.active { background-color: #182235 !important; background-image: none !important; border-color: #273f68 !important; color: #6796f1 !important; box-shadow: 0 6px 16px rgba(20, 87, 217, 0.08); }
:root[data-theme="dark"] .category-icon { background-color: #212734 !important; background-image: none !important; color: #adb7c6 !important; }
:root[data-theme="dark"] .category-item.active .category-icon { background-color: #1d2c40 !important; background-image: none !important; color: #6796f1 !important; }
:root[data-theme="dark"] .category-icon svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .category-item { border-color: #282e3c !important; background-color: #171b24 !important; background-image: none !important; box-shadow: 0 2px 7px rgba(16, 24, 40, 0.103) !important; color: #bac3d1 !important; }
:root[data-theme="dark"] .category-item:hover { border-color: #2f3747 !important; box-shadow: 0 7px 16px rgba(16, 24, 40, 0.184) !important; }
:root[data-theme="dark"] .category-icon { border-color: currentColor !important; box-shadow: none !important; }
:root[data-theme="dark"] .category-item > span:last-child { color: #bac3d1 !important; }
:root[data-theme="dark"] .category-all { background-color: #1b293d !important; background-image: none !important; }
:root[data-theme="dark"] .category-books { background-color: #43311e !important; background-image: none !important; }
:root[data-theme="dark"] .category-electronics { background-color: #1d412a !important; background-image: none !important; }
:root[data-theme="dark"] .category-uniforms { background-color: #281b3d !important; background-image: none !important; }
:root[data-theme="dark"] .category-supplies { background-color: #463d1f !important; background-image: none !important; }
:root[data-theme="dark"] .category-more { background-color: #232a37 !important; background-image: none !important; color: #adb7c6 !important; }
:root[data-theme="dark"] .category-item.active { background-color: #162031 !important; background-image: none !important; border-color: #273f68 !important; color: var(--blue--fg) !important; box-shadow: 0 5px 14px rgba(20, 87, 217, 0.08) !important; }
:root[data-theme="dark"] .category-item.active > span:last-child { color: var(--blue--fg) !important; }
:root[data-theme="dark"] .category-item .category-icon { border-color: #23375d !important; background-color: var(--blue-light) !important; background-image: none !important; color: var(--blue--fg) !important; }
:root[data-theme="dark"] .category-item:hover .category-icon, :root[data-theme="dark"] .category-item.active .category-icon { border-color: var(--blue--bd) !important; background-color: var(--blue) !important; background-image: none !important; color: #ffffff !important; }
:root[data-theme="dark"] .message-seller-button { border-color: var(--blue--bd); background-color: #171b24; background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .message-seller-button:hover { background-color: var(--blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .message-seller-button svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .details-actions .primary-button:disabled { background-color: #343d51; background-image: none; }
:root[data-theme="dark"] .checkout-intro { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .checkout-items { border-color: var(--border--bd); }
:root[data-theme="dark"] .checkout-items li + li { border-top-color: var(--border--bd); }
:root[data-theme="dark"] .checkout-items small { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .checkout-items b { color: var(--blue--fg); }
:root[data-theme="dark"] .checkout-note textarea { border-color: var(--border--bd); color: var(--text--fg); }
:root[data-theme="dark"] .checkout-note textarea:focus { outline-color: currentColor; border-color: var(--blue--bd); box-shadow: 0 0 0 3px rgba(20, 87, 217, 0.2); }
:root[data-theme="dark"] .checkout-done-icon { background-color: var(--green-light); background-image: none; color: var(--green--fg); }
:root[data-theme="dark"] .checkout-done-icon.failed { background-color: #3d1b1b; background-image: none; color: var(--danger--fg); }
:root[data-theme="dark"] .checkout-done p { color: var(--text-secondary--fg); }
:root[data-theme="dark"] .checkout-failed { background-color: #3d1b1b; background-image: none; color: #e77777; }
:root[data-theme="dark"] .loading-items { color: var(--text-secondary--fg); }
/* ===== END DARK THEME ===== */