/* zhanghaopf front visual polish. Keep business markup and scripts untouched. */
:root {
    --visual-bg: #f4f7fb;
    --visual-surface: #ffffff;
    --visual-surface-soft: #f8fafc;
    --visual-border: #e6edf5;
    --visual-text: #172033;
    --visual-muted: #64748b;
    --visual-green: #16a06b;
    --visual-blue: #2b6fed;
    --visual-pink: #ff6f8f;
    --visual-shadow: 0 12px 32px rgba(16, 24, 40, .06);
    --visual-shadow-hover: 0 16px 36px rgba(16, 24, 40, .10);
}

html {
    font-size: 14px;
}

body {
    min-height: 100vh;
    color: var(--visual-text);
    background:
        linear-gradient(180deg, #f8fbff 0%, var(--visual-bg) 45%, #f7f8fb 100%) !important;
}

.navbar-acg {
    position: sticky;
    top: 0;
    padding: 11px 0;
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(222, 230, 240, .9);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
    z-index: 50;
}

.navbar-acg .container,
main.container {
    max-width: 1320px;
}

.navbar-acg .brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(122, 140, 255, .22);
}

.navbar-acg .navbar-brand span {
    color: var(--visual-green) !important;
    font-size: 1.18rem;
    letter-spacing: 0;
}

.navbar-acg .nav-clean {
    gap: 4px;
    margin-left: 22px;
}

.navbar-acg .nav-clean .nav-link {
    color: #263247;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 650;
}

.navbar-acg .nav-clean .nav-link:hover,
.navbar-acg .nav-clean .nav-link.active {
    color: var(--visual-blue);
    background: #eef5ff;
}

.navbar-acg .nav-clean .nav-link.active::after {
    display: none;
}

.search-input {
    max-width: 310px;
}

.search-input .input-group {
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    overflow: hidden;
}

.search-input .input-group-text,
.search-input .form-control {
    height: 36px;
    border: 0;
    background: transparent;
}

.search-input .form-control {
    font-size: 13px;
}

.user-info-box .dropdown-toggle {
    min-height: 40px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3eaf4;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

main.container {
    padding-top: 22px !important;
    padding-bottom: 34px !important;
}

.panel {
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid var(--visual-border);
    border-radius: 14px;
    box-shadow: var(--visual-shadow);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.panel + .panel {
    margin-top: 18px;
}

.panel-header {
    min-height: 48px;
    margin: 0;
    padding: 14px 18px;
    gap: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--visual-border);
    box-shadow: none;
}

.panel-header .icon {
    width: 28px;
    height: 28px;
    color: #2563eb;
    background: #eef5ff;
}

.panel-title {
    font-size: 15px;
    font-weight: 800;
    color: #172033;
}

.panel-body {
    padding: 18px !important;
}

main.container > .panel:first-of-type .panel-body {
    padding: 28px 30px 26px !important;
    background:
        linear-gradient(90deg, rgba(244, 248, 255, .98), rgba(255, 255, 255, .92));
}

main.container > .panel:first-of-type .panel-body > div {
    max-width: 780px;
    padding-left: 4px;
}

main.container > .panel:first-of-type .panel-body a {
    color: var(--visual-blue) !important;
    text-underline-offset: 3px;
}

.chip-list {
    gap: 10px;
    padding: 0;
}

.chip {
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid #e0e7f0;
    background: #fff;
    color: #5c667a;
    border-radius: 999px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
    font-size: 14px;
    font-weight: 650;
}

.chip:hover {
    color: var(--visual-blue);
    border-color: #c8d8f5;
    transform: translateY(-1px);
}

.chip.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #4f8cff, #18b983);
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(43, 111, 237, .18);
}

.chip-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 5px;
}

.item-list {
    row-gap: 12px;
}

.item-list > a {
    margin-bottom: 0 !important;
}

.item-list > a .acg-card {
    min-height: 104px !important;
    padding: 14px 16px !important;
    border: 1px solid #e9eef6;
    border-radius: 13px;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

.item-list > a .acg-card:hover {
    border-color: #d4e2f5;
    box-shadow: var(--visual-shadow-hover);
    transform: translateY(-2px);
}

.item-list > a .acg-thumb {
    width: 94px !important;
    min-width: 94px !important;
    height: 70px !important;
    flex-basis: 94px !important;
    margin-right: 16px !important;
    border-radius: 10px !important;
    background-color: #f4f7fb !important;
    border: 1px solid #edf2f7;
}

.item-list > a .acg-card > .p-3 {
    min-height: 70px !important;
    padding-right: 132px !important;
}

.item-list > a .goods-title {
    max-width: calc(100% - 6px);
    color: #1b2333 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

.item-list > a .tags {
    top: 7px !important;
    right: 0 !important;
}

.badge-soft {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-soft-success {
    color: #10935f;
    background: #eafaf2;
    border: 1px solid #bfead3;
}

.badge-soft-primary {
    color: #2563eb;
    background: #eef5ff;
    border: 1px solid #cfe0ff;
}

.item-list > a .stat-row {
    margin-top: 10px !important;
}

.item-list > a .stat-bottom,
.item-list > a .stat-bottom .stock-text {
    color: var(--visual-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.item-list > a .price {
    right: 0 !important;
    bottom: 8px !important;
    color: var(--visual-pink) !important;
    font-size: 24px !important;
    font-weight: 850 !important;
    letter-spacing: 0;
}

.item-list > a .price .unit {
    color: #ff8aa2 !important;
    font-size: 15px !important;
}

.acg-card.soldout {
    opacity: .64;
}

.soldout-ribbon {
    background: rgba(100, 116, 139, .82) !important;
}

@media (max-width: 991.98px) {
    .navbar-acg .nav-clean {
        margin-left: 0;
        padding-top: 10px;
    }

    main.container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 768px) {
    main.container > .panel:first-of-type .panel-body {
        padding: 22px 18px !important;
    }

    .panel-body {
        padding: 14px !important;
    }

    .chip-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .item-list > a .acg-card {
        min-height: 96px !important;
        padding: 12px !important;
    }

    .item-list > a .acg-thumb {
        width: 74px !important;
        min-width: 74px !important;
        height: 58px !important;
        flex-basis: 74px !important;
        margin-right: 12px !important;
    }

    .item-list > a .acg-card > .p-3 {
        min-height: 62px !important;
        padding-right: 92px !important;
    }

    .item-list > a .goods-title {
        font-size: 13px !important;
        line-height: 1.42 !important;
    }

    .item-list > a .tags {
        top: 2px !important;
    }

    .badge-soft {
        padding: 3px 7px;
        font-size: 11px;
    }

    .item-list > a .price {
        bottom: 3px !important;
        font-size: 20px !important;
    }
}