:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef5ff;
    --line: #dde5ef;
    --text: #111827;
    --muted: #6b7280;
    --primary: #1264e6;
    --primary-hover: #0b50c7;
    --accent: #f97316;
    --accent-soft: #fff3e8;
    --cyan-soft: #e9f8f6;
    --danger: #b42318;
    --success: #138a4e;
    --shadow: 0 14px 34px rgba(17, 24, 39, 0.09);
    --soft-shadow: 0 8px 22px rgba(17, 24, 39, 0.07);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #edf5ff 0, var(--bg) 210px);
    color: var(--text);
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.45;
}

.chat-pin-chip {
    align-self: center;
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
}

.chat-pin-chip.active {
    background: #eff6ff;
    border-color: #60a5fa;
    font-weight: 700;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    outline: none;
}

input,
select {
    height: 40px;
    padding: 0 12px;
}

textarea {
    resize: vertical;
    padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 115, 95, 0.12);
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

h1,
h2,
p {
    margin: 0;
}

h1 {
    font-size: 20px;
    letter-spacing: 0;
}

h2 {
    font-size: 18px;
    letter-spacing: 0;
}

.hidden {
    display: none !important;
}

.phone-shell {
    min-height: 100vh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 150px),
        var(--bg);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 8px 14px;
    background: rgba(245, 247, 251, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(221, 229, 239, 0.78);
}

.app-header h1 {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #14a38d);
    font-size: 17px;
    box-shadow: 0 8px 18px rgba(18, 100, 230, 0.22);
}


.eyebrow {
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.view {
    padding: 12px;
}

.visitor-badge {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.10), rgba(20, 163, 141, 0.10)),
        #fff;
    box-shadow: var(--soft-shadow);
}

.visitor-badge > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #14a38d);
    font-size: 14px;
    font-weight: 900;
}

.visitor-badge strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visitor-badge em {
    color: var(--primary);
    font-style: normal;
}

.home-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    margin: -2px 0 12px;
}

.home-quick-links::-webkit-scrollbar {
    display: none;
}

.home-quick-links button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 8px;
    color: #0f3f7a;
    background: linear-gradient(180deg, #fff, #f7fbff);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    box-shadow: var(--soft-shadow);
}

.home-quick-links button span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.search-bar {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--soft-shadow);
}

.home-search-link {
    color: inherit;
    text-decoration: none;
}

.search-bar input {
    border-color: transparent;
    border-radius: 999px;
    background: #f3f7fb;
}

.home-search-placeholder {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 999px;
    color: var(--muted);
    background: #f3f7fb;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-bar button {
    border-radius: 999px;
}

.search-link-button {
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: 999px;
    font-weight: 800;
}

.search-page-topbar {
    position: sticky;
    top: 51px;
    z-index: 4;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: -2px -2px 12px;
    padding: 8px 2px;
    background: rgba(245, 247, 251, 0.92);
    backdrop-filter: blur(12px);
}

.search-page-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    min-width: 0;
}

.search-page-form input {
    min-width: 0;
    border-color: transparent;
    border-radius: 999px;
    background: #eef4fb;
}

.search-page-form button {
    border-radius: 999px;
}

.search-panel {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(221, 229, 239, 0.92);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.search-section-title h2 {
    font-size: 16px;
}

.search-section-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.search-section-title .small-button {
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
}

.search-history-list {
    display: grid;
    gap: 8px;
}

.search-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.history-keyword {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(221, 229, 239, 0.95);
    border-radius: 999px;
    color: var(--text);
    background: #f8fbff;
}

.history-keyword span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.history-keyword small {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.history-remove {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--muted);
    background: #f1f5f9;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.result-topbar {
    position: sticky;
    top: 51px;
    z-index: 4;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: -2px -2px 10px;
    padding: 8px 2px;
    background: rgba(245, 247, 251, 0.90);
    backdrop-filter: blur(12px);
}

.result-back-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 999px;
    color: var(--primary);
    background: #fff;
    box-shadow: var(--soft-shadow);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.result-topbar strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 900;
}

.result-topbar span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.result-filter {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fff, #f9fbff);
    box-shadow: var(--soft-shadow);
}

.result-search-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 64px;
    gap: 8px;
}

.result-search-main input {
    min-width: 0;
    border-color: transparent;
    border-radius: 999px;
    background: #eef4fb;
}

.result-search-main button {
    border-radius: 999px;
}

.filter-toggle-button.active {
    color: #fff;
    background: var(--primary);
}

.result-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 8px;
}

.price-quick-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.price-quick-row button {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 999px;
    color: #174ea6;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 800;
}

.filter-select,
.price-filter label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 38px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.filter-select select,
.price-filter input {
    min-width: 0;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

.filter-select select:focus,
.price-filter input:focus {
    box-shadow: none;
}

.price-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.result-sort-tabs {
    display: flex;
    gap: 8px;
    margin: 0 -2px 12px;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
}

.result-sort-tabs::-webkit-scrollbar {
    display: none;
}

.result-sort-tabs button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: #eef3f7;
}

.result-sort-tabs button.active {
    border-color: rgba(18, 100, 230, 0.22);
    color: var(--primary);
    background: #eef5ff;
}

.carousel-section,
.recommend-section,
.featured-block,
.category-block,
.list-result-panel,
.forum-panel {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(221, 229, 239, 0.88);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.section-head h2 {
    font-size: 17px;
    font-weight: 900;
}

.section-head span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.carousel-banner {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.20), rgba(249, 115, 22, 0.16)),
        #eef5ff;
}

.carousel-slide {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 168px;
    overflow: hidden;
    padding: 0;
    color: #fff;
    background: #172133;
    text-align: left;
}

.carousel-slide img,
.carousel-cover-empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-cover-empty {
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.75), rgba(249, 115, 22, 0.48)),
        #172133;
}

.carousel-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.08));
}

.carousel-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: 6px;
    width: min(74%, 286px);
    height: 100%;
    padding: 17px;
}

.carousel-copy small {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.9;
}

.carousel-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 21px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.carousel-copy em {
    color: #ffd7a0;
    font-style: normal;
    font-size: 16px;
    font-weight: 900;
}

.carousel-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 38px;
    transform: translateY(-50%);
    border-radius: 8px;
    color: #fff;
    background: rgba(17, 24, 39, 0.42);
    font-size: 24px;
}

.carousel-control.prev {
    left: 8px;
}

.carousel-control.next {
    right: 8px;
}

.carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.carousel-dots button {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}

.carousel-dots button.active {
    width: 18px;
    background: #fff;
}

.carousel-empty {
    display: grid;
    min-height: 156px;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.featured-scroller {
    display: grid;
    grid-auto-columns: 138px;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
}

.featured-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 202px;
    padding: 8px;
    border: 1px solid #f1d7c0;
    border-radius: 8px;
    color: var(--text);
    background: #fffaf6;
    text-align: left;
    scroll-snap-align: start;
}

.featured-card img,
.featured-card span {
    width: 100%;
    aspect-ratio: 1 / 0.78;
    border-radius: 6px;
    object-fit: cover;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.18), rgba(249, 115, 22, 0.16)),
        #eef5ff;
}

.featured-card strong {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.featured-card small {
    color: var(--muted);
    font-size: 12px;
}

.featured-card em {
    color: var(--accent);
    font-style: normal;
    font-weight: 800;
}

.featured-empty {
    grid-column: 1 / -1;
    padding: 18px 8px;
    color: var(--muted);
    text-align: center;
}

.category-block {
    display: grid;
    gap: 8px;
}

.category-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -2px -2px 10px;
    padding: 10px 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.category-top strong {
    display: block;
    font-size: 20px;
    font-weight: 900;
}

.category-top span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.category-all-products-entry {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid rgba(18, 100, 230, 0.14);
    border-radius: 10px;
    color: #102a43;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.08), rgba(22, 163, 74, 0.08)),
        #fff;
    text-align: left;
    box-shadow: var(--soft-shadow);
}

.category-all-products-entry strong,
.category-all-products-entry small {
    display: block;
    min-width: 0;
}

.category-all-products-entry strong {
    font-size: 15px;
    font-weight: 900;
}

.category-all-products-entry small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.category-all-products-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #0f766e);
    font-size: 18px;
    font-weight: 900;
}

.category-all-products-entry em {
    color: var(--primary);
    font-style: normal;
    font-size: 22px;
    font-weight: 900;
}

.category-browser {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: calc(100vh - 166px);
    overflow: hidden;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.category-rail {
    display: grid;
    align-content: start;
    overflow-y: auto;
    border-right: 1px solid rgba(221, 229, 239, 0.9);
    background: #f4f7fb;
}

.category-rail button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 78px;
    padding: 9px 6px;
    border-left: 3px solid transparent;
    color: var(--text);
    background: transparent;
    line-height: 1.25;
    text-align: center;
    font-size: 12px;
}

.category-rail button em {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #eaf3ff;
    font-style: normal;
    font-weight: 900;
}

.category-rail button span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 800;
}

.category-rail button small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.category-rail button.active {
    border-left-color: var(--primary);
    color: var(--primary);
    background: linear-gradient(90deg, #fff, #f8fbff);
    font-weight: 800;
}

.category-rail button.active em {
    color: #fff;
    background: var(--primary);
}

.category-rail button.active small {
    color: rgba(18, 100, 230, 0.72);
}

.category-content {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    background:
        linear-gradient(180deg, #fbfdff, #fff);
}

.category-content::before {
    content: "";
    display: block;
    height: 3px;
    width: 36px;
    border-radius: 999px;
    background: var(--primary);
}

.category-content-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(221, 229, 239, 0.82);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.08), rgba(20, 184, 166, 0.08)),
        #fff;
}

.category-content-head > div {
    min-width: 0;
}

.category-content-head h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 900;
}

.category-content-head span {
    color: var(--muted);
    font-size: 12px;
}

.category-content-head b {
    display: grid;
    max-width: 100px;
    min-width: 44px;
    height: 30px;
    place-items: center;
    padding: 0 9px;
    border-radius: 999px;
    overflow: hidden;
    color: var(--primary);
    background: #eaf3ff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-all-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(249, 115, 22, 0.24);
    border-radius: 8px;
    color: var(--text);
    background: linear-gradient(135deg, #fff7ed, #fff);
    text-align: left;
}

.category-all-card i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #f59e0b);
    font-style: normal;
    font-weight: 900;
}

.category-all-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.category-all-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.category-all-card small {
    color: var(--muted);
    font-size: 12px;
}

.category-all-card em {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    font-size: 22px;
    font-style: normal;
    line-height: 1;
}

.child-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.child-category-grid button {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 9px;
    min-height: 104px;
    padding: 10px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    text-align: left;
    box-shadow: var(--soft-shadow);
}

.child-category-grid button em {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: #eaf3ff;
    font-style: normal;
    font-weight: 900;
}

.child-category-grid button span {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

.child-category-grid button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.child-category-grid button small {
    color: var(--muted);
    font-size: 11px;
}

.child-category-grid button.active {
    border-color: var(--primary);
    color: var(--primary);
    background: #eef5ff;
    font-weight: 800;
}

.child-category-grid button.active em {
    color: #fff;
    background: var(--primary);
}

.category-layout {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
}

.category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.category-layout .primary-tabs {
    max-height: 420px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.category-layout .child-tabs {
    align-content: start;
    flex-wrap: wrap;
    overflow-x: visible;
}

.category-tabs button,
.mode-tabs button {
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    background: #fff;
    white-space: nowrap;
}

.primary-tabs button.active,
.mode-tabs button.active {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.child-tabs {
    min-height: 34px;
}

.child-tabs button {
    border-color: #f1d7c0;
    color: #8a4b0f;
    background: #fff8ed;
}

.child-tabs button.active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}

.child-tabs span {
    display: inline-flex;
    align-items: center;
    height: 34px;
    color: var(--muted);
    font-size: 13px;
}

.product-list,
.stack-list,
.comment-list,
.chat-list {
    display: grid;
    gap: 12px;
}

.product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-card,
.stack-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
}

.product-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    text-align: left;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.product-card:active {
    transform: scale(0.985);
    border-color: rgba(18, 100, 230, 0.24);
}

.engagement-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.engagement-card-wrap {
    position: relative;
    display: grid;
    min-width: 0;
}

.engagement-card-wrap .product-card {
    width: 100%;
    height: 100%;
}

.engagement-remove {
    position: absolute;
    right: 7px;
    top: 7px;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(17, 24, 39, 0.72);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 800;
}

.product-cover-wrap {
    position: relative;
    overflow: hidden;
    background: #eef5ff;
}

.product-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.18), rgba(249, 115, 22, 0.14)),
        #eef5ff;
    object-fit: cover;
}

.product-cover-badge {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(17, 24, 39, 0.72);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 800;
}

.product-info {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 11px;
}

.product-info strong {
    display: -webkit-box;
    min-height: 42px;
    overflow: hidden;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
}

#productListView .product-list {
    grid-template-columns: 1fr;
    gap: 10px;
}

#productListView .product-card {
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 132px;
}

#productListView .product-cover-wrap {
    min-height: 132px;
}

#productListView .product-cover {
    height: 100%;
    min-height: 132px;
    aspect-ratio: auto;
}

#productListView .product-cover-badge {
    left: 6px;
    bottom: 6px;
}

#productListView .product-info {
    padding: 12px;
}

#productListView .product-info strong {
    min-height: auto;
}

.product-info p,
.stack-card p,
.comment-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.product-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
}

.product-meta-row span {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2f6fb;
    color: #526071;
}

.skeleton-card {
    pointer-events: none;
}

.skeleton-block,
.skeleton-line {
    display: block;
    overflow: hidden;
    position: relative;
    background: #edf2f0;
}

.skeleton-line {
    height: 12px;
    border-radius: 999px;
}

.skeleton-line.wide {
    width: 92%;
}

.skeleton-line.short {
    width: 48%;
}

.skeleton-block::after,
.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.70), transparent);
    animation: skeleton-shine 1.3s infinite;
}

@keyframes skeleton-shine {
    to {
        transform: translateX(100%);
    }
}

.price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.price {
    color: var(--accent);
    font-size: 19px;
    font-weight: 900;
}

.origin-price {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
    text-decoration: line-through;
}

.tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #9a4a00;
    background: var(--accent-soft);
    font-size: 12px;
    font-weight: 800;
}

.promo-tag {
    color: #b42318;
    background: #fff1f0;
}

.primary,
.ghost,
.small-button,
.full-button,
.back-button {
    height: 40px;
    border-radius: 8px;
    padding: 0 14px;
    white-space: nowrap;
}

.primary {
    color: #fff;
    background: var(--primary);
}

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

.danger-bg {
    background: var(--danger);
}

.danger-bg:hover {
    background: #8f1c14;
}

.ghost {
    border: 1px solid var(--line);
    color: var(--text);
    background: #fff;
}

.small-button {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
}

.full-button {
    width: 100%;
}

.back-button {
    margin-bottom: 12px;
}

.detail-content {
    display: grid;
    gap: 12px;
}

#detailView {
    padding-bottom: 76px;
}

.detail-hero {
    width: 100%;
    aspect-ratio: 16 / 9.5;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(22, 115, 95, 0.22), rgba(163, 93, 32, 0.18)),
        #edf4f1;
    object-fit: cover;
    box-shadow: var(--soft-shadow);
}

.detail-hero-button,
.detail-image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
}

.detail-hero-button {
    position: relative;
}

.detail-hero-button::after,
.detail-image-button::after {
    content: "点击查看大图";
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.48);
    font-size: 11px;
}

.detail-image-button {
    position: relative;
}

.detail-panel,
.comment-section {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.detail-panel h2 {
    font-size: 20px;
    line-height: 1.35;
}

.detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 2px;
}

.sku-selector {
    display: grid;
    gap: 11px;
    padding: 12px;
    border: 1px solid #f2d7bc;
    border-radius: 8px;
    background: linear-gradient(180deg, #fffaf5, #fff);
}

.sku-selector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sku-selector-head span {
    color: var(--muted);
    font-size: 12px;
}

.sku-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sku-options button {
    display: grid;
    gap: 4px;
    min-height: 62px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: left;
}

.sku-options button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.16);
}

.sku-options strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sku-options span {
    color: var(--accent);
    font-weight: 800;
}

.sku-price-stack {
    display: grid;
    gap: 1px;
}

.sku-price-stack em {
    color: var(--accent);
    font-style: normal;
    font-weight: 900;
}

.sku-price-stack small {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
    text-decoration: line-through;
}

.detail-promo-note {
    margin-top: -4px;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
}

.detail-sticky-bar {
    position: fixed;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 104px;
    gap: 8px;
    align-items: center;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 10px 12px;
    border-top: 1px solid rgba(221, 229, 239, 0.88);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.detail-sticky-bar.hidden {
    display: none;
}

.detail-sticky-bar span {
    color: var(--accent);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 900;
}

.detail-sticky-bar button {
    height: 38px;
    border-radius: 999px;
}

.comment-section {
    margin-top: 12px;
}

.rich-section {
    margin-top: 12px;
}

.comment-card,
.chat-item {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.comment-form {
    display: grid;
    gap: 10px;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.inline-check input {
    width: 16px;
    height: 16px;
}

.star-picker {
    display: flex;
    gap: 4px;
}

.star-picker button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #c7ccd4;
    background: #fff6e8;
    font-size: 24px;
    line-height: 1;
}

.star-picker button.active {
    color: #f59e0b;
}

.comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stars {
    color: #f59e0b;
    white-space: nowrap;
}

.sort-tabs {
    display: flex;
    gap: 8px;
}

.sort-tabs button {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--muted);
    background: #eef3f7;
}

.sort-tabs button.active {
    color: #fff;
    background: var(--primary);
}

.full-comments {
    margin-top: 0;
}

.stack-card {
    display: grid;
    gap: 8px;
    padding: 13px;
}

.status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status.on {
    color: #075e3d;
    background: #dff7ea;
}

.status.off {
    color: #8b271d;
    background: #fee4df;
}

.status.wait {
    color: #8a4b0f;
    background: #fff1d6;
}

.message-center {
    display: grid;
    gap: 12px;
}

.message-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.92), rgba(22, 115, 95, 0.90)),
        var(--primary);
    box-shadow: 0 12px 26px rgba(18, 100, 230, 0.18);
}

.message-hero strong {
    display: block;
    font-size: 20px;
}

.message-hero span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.message-hero em {
    display: grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-style: normal;
    font-weight: 900;
}

.message-hero em.active {
    color: var(--accent);
    background: #fff;
}

.message-summary,
.message-filter-tabs {
    display: flex;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.message-summary::-webkit-scrollbar,
.message-filter-tabs::-webkit-scrollbar {
    display: none;
}

.message-summary-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #d9e3ec;
    border-radius: 8px;
    color: #445363;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.message-summary-pill b {
    margin-left: 5px;
    color: var(--text);
}

.message-summary-pill.active,
.message-summary-pill.unread {
    border-color: rgba(18, 100, 230, 0.24);
    color: var(--primary);
    background: #eef5ff;
}

.message-summary-pill.waiting {
    border-color: rgba(19, 138, 78, 0.22);
    color: var(--success);
    background: #eefbf5;
}

.message-summary-pill.risk {
    border-color: rgba(180, 35, 24, 0.18);
    color: var(--danger);
    background: #fff5f4;
}

.message-summary-pill.attention {
    border-color: rgba(245, 158, 11, 0.28);
    color: #9a5a09;
    background: #fff7e8;
}

.message-filter-tabs {
    padding-bottom: 2px;
}

.message-filter-tabs button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #d9e3ec;
    border-radius: 8px;
    color: #52616f;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}

.message-filter-tabs button.active {
    border-color: rgba(18, 100, 230, 0.28);
    color: var(--primary);
    background: #eef5ff;
}

.chat-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-color: rgba(221, 229, 239, 0.9);
    box-shadow: var(--soft-shadow);
    text-align: left;
    color: var(--text);
}

.chat-item > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background:
        linear-gradient(135deg, var(--primary), #3b82f6);
    font-style: normal;
    font-weight: 900;
}

.chat-item-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.chat-item-main strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-item-main strong span,
.chat-item-main p,
.chat-item-main b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-main strong small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.chat-item-main p {
    color: var(--muted);
}

.chat-item-main b {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.chat-item-tags {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px;
}

.chat-item-tags small {
    padding: 2px 6px;
    border-radius: 6px;
    color: #475569;
    background: #eef3f7;
    font-size: 11px;
    font-weight: 800;
}

.chat-item.stale {
    border-color: rgba(245, 158, 11, 0.35);
    background: #fffbeb;
}

.chat-item.needs-reply {
    border-color: rgba(18, 100, 230, 0.24);
    box-shadow: inset 3px 0 0 var(--primary), var(--soft-shadow);
}

.chat-item.reply-risk {
    border-color: rgba(180, 35, 24, 0.18);
    background: #fff7f6;
    box-shadow: inset 3px 0 0 var(--danger), var(--soft-shadow);
}

.chat-item.customer-unread {
    border-color: rgba(249, 115, 22, 0.2);
    box-shadow: inset 3px 0 0 var(--accent), var(--soft-shadow);
}

.chat-item.platform-attention {
    border-color: rgba(245, 158, 11, 0.28);
    background: #fffaf0;
    box-shadow: inset 3px 0 0 #f59e0b, var(--soft-shadow);
}

.chat-item-tags small.needs-reply {
    color: var(--primary);
    background: #eef5ff;
}

.chat-item-tags small.reply-risk {
    color: var(--danger);
    background: #fff0ee;
}

.chat-item-tags small.customer-unread {
    color: #9a4f07;
    background: #fff2df;
}

.chat-item-tags small.platform-attention,
.chat-dialog-meta span.platform-attention {
    color: #9a5a09;
    background: #fff2df;
}

.chat-item.closed {
    opacity: 0.72;
}

.chat-item.active {
    border-color: var(--primary);
    background: #eef5ff;
}

.message-empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: #fff;
}

.chat-box {
    margin-top: 12px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

#chatDialogView .chat-box {
    margin-top: 0;
}

.chat-header {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(221, 229, 239, 0.9);
    background: #fff;
    font-weight: 800;
}

.chat-back-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--primary);
    background: var(--surface-2);
    font-size: 22px;
    line-height: 1;
}

#chatHeaderTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dialog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(221, 229, 239, 0.9);
    background: #fbfdff;
}

.chat-dialog-meta span {
    padding: 3px 7px;
    border-radius: 6px;
    color: #475569;
    background: #eef3f7;
    font-size: 11px;
    font-weight: 800;
}

.chat-dialog-meta span.needs-reply {
    color: var(--primary);
    background: #eef5ff;
}

.chat-dialog-meta span.reply-risk {
    color: var(--danger);
    background: #fff0ee;
}

.chat-dialog-meta span.customer-unread {
    color: #9a4f07;
    background: #fff2df;
}

#chatReopenButton {
    margin: 10px 12px 0;
    width: calc(100% - 24px);
}

.chat-messages {
    min-height: 280px;
    max-height: 420px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 12px;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fbff, #fbfdfc);
}

.chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-message-row.mine {
    flex-direction: row-reverse;
}

.chat-message-row > i {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.chat-message-row.mine > i {
    background: var(--primary);
}

.chat-message-row.system {
    justify-content: center;
}

.chat-message-row.system > i {
    display: none;
}

.bubble {
    max-width: 82%;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: normal;
}

.bubble p {
    margin: 0;
    white-space: normal;
}

.bubble.mine {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.bubble.system {
    width: fit-content;
    min-width: min(260px, 100%);
    max-width: 92%;
    text-align: center;
    color: var(--muted);
    background: #eef3f7;
}

.bubble small {
    display: block;
    margin-top: 4px;
    opacity: 0.75;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
}

.bubble.system small {
    white-space: nowrap;
}

.chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--line);
}

.profile-panel {
    display: grid;
    gap: 14px;
}

.profile-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, #1264e6, #16735f);
    box-shadow: 0 12px 26px rgba(18, 100, 230, 0.18);
}

.profile-hero .eyebrow,
.profile-hero p {
    color: rgba(255, 255, 255, 0.78);
}

.profile-hero h2 {
    margin-top: 3px;
    font-size: 21px;
}

.profile-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 22px;
    font-weight: 900;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.profile-stats div {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.profile-stats strong {
    color: var(--primary);
    font-size: 19px;
}

.profile-stats span {
    color: var(--muted);
    font-size: 12px;
}

.profile-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.profile-edit-page {
    margin: 0 0 14px;
}

.profile-form.hidden {
    display: none;
}

.profile-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-form-head h3 {
    margin-top: 3px;
    font-size: 16px;
}

.profile-form-head span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #0f6b5c;
    background: #e4f3ef;
    font-size: 12px;
    font-weight: 800;
}

.profile-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.profile-form input,
.profile-form select {
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: #fbfdfc;
    font: inherit;
}

.avatar-upload-panel {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 8px;
    background: #f6f9ff;
}

.profile-avatar-preview {
    width: 66px;
    height: 66px;
    border: 1px solid rgba(18, 100, 230, 0.18);
    color: var(--primary);
    background-color: #fff;
}

.avatar-upload-panel div:last-child {
    display: grid;
    gap: 6px;
}

.avatar-upload-panel strong {
    font-size: 14px;
}

.avatar-upload-panel span,
.composer-tip {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.composer-guide {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(18, 100, 230, 0.14);
    border-radius: 8px;
    background: #f5f9ff;
}

.composer-guide strong {
    color: var(--text);
    font-size: 13px;
}

.composer-guide span,
.composer-guide small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
}

.profile-region-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 420px) {
    .profile-form-grid,
    .profile-region-grid {
        grid-template-columns: 1fr;
    }
}

.profile-actions {
    display: grid;
    gap: 10px;
}

.profile-visitor-card {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(18, 100, 230, 0.14);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(18, 100, 230, 0.08), rgba(249, 115, 22, 0.08)), #fff;
    box-shadow: var(--soft-shadow);
}

.profile-visitor-card span,
.profile-visitor-card small {
    color: var(--muted);
    font-size: 12px;
}

.profile-visitor-card strong {
    font-size: 18px;
}

.profile-visitor-card em {
    color: var(--primary);
    font-style: normal;
}

.profile-entry {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background:
        linear-gradient(180deg, #fff, #fbfdfc);
    text-align: left;
    box-shadow: var(--soft-shadow);
}

.profile-entry i {
    grid-row: span 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: #e4f3ef;
    font-style: normal;
    font-weight: 900;
}

.profile-entry span {
    font-weight: 800;
}

.profile-entry strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.profile-entry.disabled {
    opacity: 0.55;
}

.community-entry i {
    color: #0f766e;
    background: #dff8ef;
}

.my-community-page {
    display: grid;
    gap: 12px;
    padding-bottom: 96px;
}

.my-community-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 14px;
    background: linear-gradient(135deg, #f7fbff, #f2fbf7);
    box-shadow: var(--soft-shadow);
}

.my-community-hero h2 {
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.35;
}

.my-community-hero button {
    flex: 0 0 auto;
}

.my-community-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.my-community-summary span {
    display: grid;
    gap: 3px;
    min-height: 58px;
    align-content: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.my-community-summary b {
    color: var(--primary);
    font-size: 17px;
}

.my-community-summary small {
    color: var(--muted);
    font-size: 12px;
}

.my-community-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.my-community-tabs button {
    min-height: 36px;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.my-community-tabs button.active {
    color: #fff;
    background: var(--primary);
}

.my-community-list {
    display: grid;
    gap: 10px;
}

.my-community-card,
.my-community-note {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.055);
}

.my-community-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
}

.my-community-card p,
.my-community-card small,
.my-community-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.my-community-card .forum-post-top em.muted {
    color: #64748b;
    background: #eef2f7;
}

.my-community-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
}

.my-community-meta span {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-community-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.my-community-actions button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.my-community-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.my-community-note {
    border-style: dashed;
    background: #fbfdff;
}

.my-community-note strong {
    color: var(--text);
}

@media (max-width: 380px) {
    .my-community-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-community-hero {
        align-items: stretch;
        flex-direction: column;
    }
}

.entry-badge,
.nav-badge,
.message-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: #e11d48;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.entry-badge {
    position: absolute;
    right: 10px;
    top: 10px;
}

.message-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
}

.forum-shell,
.forum-detail {
    display: grid;
    gap: 12px;
}

.forum-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 100, 230, 0.12), rgba(249, 115, 22, 0.10)),
        #fff;
    box-shadow: var(--shadow);
}

.forum-hero h2 {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.35;
}

.forum-hero p:last-child {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.forum-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.forum-tabs button {
    height: 38px;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    font-weight: 800;
}

.forum-tabs button.active {
    color: #fff;
    background: var(--primary);
}

.forum-tab-panel {
    display: grid;
    gap: 12px;
}

.forum-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.forum-chip-row::-webkit-scrollbar {
    display: none;
}

.forum-chip-row button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    background: #fff;
    white-space: nowrap;
}

.forum-chip-row button.active {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
    font-weight: 800;
}

.forum-more-channel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.forum-more-channel select {
    width: 116px;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}

.forum-feed {
    display: grid;
    gap: 11px;
}

.forum-post-card,
.survey-card,
.forum-detail-card,
.forum-reply-card,
.survey-question {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.forum-post-card {
    text-align: left;
}

.forum-post-card h3,
.survey-card h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.forum-post-card p,
.survey-card p,
.forum-detail-card p,
.forum-reply-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.forum-detail-card p {
    color: var(--text);
    white-space: pre-wrap;
}

.forum-rich-content {
    display: grid;
    gap: 10px;
}

.forum-rich-content p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
}

.forum-inline-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface-2);
}

.forum-inline-image-button {
    display: inline-block;
    max-width: 100%;
}

.forum-post-top,
.forum-meta-row,
.forum-detail-actions,
.forum-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.forum-post-top span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.forum-post-top em {
    padding: 3px 7px;
    border-radius: 999px;
    color: #8a4b0f;
    background: #fff1d6;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.forum-meta-row {
    color: var(--muted);
    font-size: 12px;
}

.forum-meta-row button,
.forum-detail-actions button {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--muted);
    background: #eef3f7;
}

.forum-meta-row button.active,
.forum-detail-actions button.active {
    color: #fff;
    background: var(--accent);
}

.forum-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.forum-image-grid img,
.forum-detail-images img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
}

.forum-image-grid img {
    aspect-ratio: 1 / 1;
}

.forum-detail-images {
    display: grid;
    gap: 8px;
}

.forum-detail-images img {
    max-height: 360px;
}

.forum-detail-image-button img {
    width: 100%;
    max-height: 360px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--surface-2);
}

.forum-author {
    color: var(--muted);
    font-size: 12px;
}

.forum-replies,
.forum-reply-form,
.survey-form {
    display: grid;
    gap: 10px;
}

.survey-composer-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
}

.survey-composer-toolbar span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.survey-composer-question-list {
    display: grid;
    gap: 10px;
}

.survey-composer-question {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 8px;
    background: #f8fbff;
}

.survey-composer-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.survey-required-check {
    align-self: end;
    min-height: 42px;
    align-items: center;
}

.forum-section-title h2 {
    font-size: 16px;
}

.forum-section-title span,
.survey-question h3 span {
    color: var(--accent);
    font-size: 12px;
}

.survey-card {
    cursor: pointer;
}

.survey-status {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #8a4b0f;
    background: #fff1d6;
    font-size: 12px;
    font-weight: 800;
}

.survey-status.done {
    color: #075e3d;
    background: #dff7ea;
}

.survey-question h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.survey-options {
    display: grid;
    gap: 8px;
}

.survey-option {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: #fbfdff;
}

.survey-option input {
    width: 16px;
    height: 16px;
}

.survey-question.readonly {
    background: #f8fafc;
}

.survey-readonly-note {
    padding: 12px;
    border: 1px solid rgba(15, 102, 116, 0.18);
    border-radius: 8px;
    background: #eaf7f7;
    color: #0f6674;
    font-size: 13px;
    line-height: 1.55;
}

.survey-result-panel {
    display: grid;
    gap: 10px;
}

.survey-result-question {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(35, 182, 157, 0.16);
    border-radius: 12px;
    background: #f8fffc;
}

.survey-result-question h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
}

.survey-result-question blockquote {
    margin: 0;
    padding: 10px;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: #334155;
    line-height: 1.7;
}

.survey-result-options {
    display: grid;
    gap: 8px;
}

.survey-result-option {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 10px;
    background: #fff;
}

.survey-result-option div {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.survey-result-option strong {
    color: var(--text);
    font-size: 13px;
}

.survey-result-option span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.survey-result-option i {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(35, 182, 157, 0.18), rgba(18, 100, 230, 0.10));
}

.survey-result-option.mine {
    border-color: rgba(35, 182, 157, 0.55);
}

.readonly-option {
    display: inline-flex;
    width: fit-content;
}

.forum-composer {
    max-height: min(86vh, 720px);
    overflow-y: auto;
}

.post-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -2px;
}

.post-rich-toolbar button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(18, 100, 230, 0.14);
    border-radius: 999px;
    color: #0f3f7a;
    background: #f7fbff;
    font-size: 12px;
    font-weight: 800;
}

.forum-composer-page {
    display: grid;
    gap: 12px;
    padding-bottom: 96px;
}

.forum-composer-page.hidden {
    display: none;
}

.forum-composer-page-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.forum-composer-page .forum-composer {
    max-height: none;
    overflow: visible;
}

.composer-page-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.composer-page-head h2 {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
}

.composer-page-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.post-content-editor {
    min-height: 320px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--text);
    line-height: 1.7;
    outline: 0;
}

.post-content-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
}

.post-content-editor p {
    margin: 0;
}

.post-editor-image {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 12px;
    background: #fff;
}

.post-editor-image > button,
.forum-inline-image-button,
.forum-detail-image-button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

.post-editor-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    background: var(--surface-2);
    object-fit: contain;
}

.post-editor-image figcaption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.post-editor-image input {
    width: 88px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
}

.post-editor-image figcaption button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: #b42318;
    background: #fff2f0;
    font-size: 12px;
    font-weight: 800;
}

.post-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.post-image-preview-empty {
    padding: 10px 12px;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.6;
}

.post-image-preview-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.post-image-preview-card img {
    width: 100%;
    aspect-ratio: 1.3 / 1;
    border-radius: 7px;
    background: #eef2f7;
    object-fit: cover;
}

.post-image-preview-card strong,
.post-image-preview-card span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-image-preview-card strong {
    color: var(--text);
    font-size: 12px;
}

.post-image-preview-card span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.post-image-preview-card button {
    min-height: 30px;
    border-radius: 7px;
    color: #fff;
    background: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.post-live-preview {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 8px;
    background: #f8fbff;
}

.post-live-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.post-live-preview-head strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.post-live-preview-head span,
.post-live-empty {
    color: var(--muted);
    font-size: 12px;
}

.post-live-preview-body {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
}

.forum-post-preview-page {
    display: grid;
    gap: 12px;
    padding-bottom: 20px;
}

.forum-post-preview-page.hidden {
    display: none;
}

.forum-post-preview-panel {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.forum-post-preview-panel h2 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.35;
}

.preview-page-actions {
    position: sticky;
    bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.detail-rich {
    display: grid;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.detail-rich p {
    color: var(--text);
    line-height: 1.7;
}

.forum-inline-heading {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.forum-inline-quote {
    margin: 0;
    padding: 9px 10px;
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    color: #334155;
    background: #f8fafc;
    line-height: 1.65;
}

.forum-inline-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--line);
}

.detail-inline-image {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.image-preview-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 18px;
}

.image-preview-mask {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(7, 16, 28, 0.86);
}

.image-preview-img {
    position: relative;
    max-width: min(100%, 760px);
    max-height: 84vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.image-preview-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 22px;
}

.order-actions,
.pay-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pay-actions {
    grid-template-columns: 1fr;
}

.order-center {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.order-confirm {
    display: grid;
    gap: 12px;
}

.order-confirm-content {
    display: grid;
    gap: 12px;
}

.order-confirm-card,
.order-confirm-actions {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.order-confirm-card h2 {
    font-size: 18px;
}

.order-guide-card {
    border-color: rgba(18, 100, 230, 0.18);
    background: linear-gradient(180deg, #f7fbff, #fff);
}

.order-guide-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.order-guide-steps div,
.order-step {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.order-guide-steps i,
.order-step i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.order-guide-steps span,
.order-step span {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.order-guide-steps small,
.order-step small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.confirm-pay-select {
    display: grid;
    gap: 7px;
}

.confirm-pay-select span {
    color: var(--muted);
    font-size: 13px;
}

.confirm-pay-select select:disabled {
    color: var(--muted);
    background: #f3f5f8;
}

.order-filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.order-filter-tabs button {
    height: 34px;
    border-radius: 999px;
    color: var(--muted);
    background: #eef3f7;
    font-size: 13px;
}

.order-filter-tabs button.active {
    color: #fff;
    background: var(--primary);
}

.order-card {
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.order-card-head,
.order-money-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-card-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-money-row {
    color: var(--muted);
    font-size: 13px;
}

.order-next-step {
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #1d4f91;
    background: #f3f8ff;
    font-size: 12px;
    line-height: 1.55;
}

.order-detail {
    display: grid;
    gap: 12px;
}

.order-status-panel,
.order-detail-card,
.order-detail-actions {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.order-status-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.order-status-panel h2 {
    font-size: 22px;
}

.order-progress-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(18, 100, 230, 0.18);
    border-radius: 8px;
    background: #f7fbff;
    box-shadow: var(--shadow);
}

.order-progress-title,
.order-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-progress-title span {
    color: var(--muted);
    font-size: 13px;
}

.order-progress {
    align-items: stretch;
}

.order-step {
    position: relative;
    flex: 1 1 0;
    min-height: 88px;
}

.order-step.done {
    border-color: rgba(7, 94, 61, 0.24);
    background: #effbf4;
}

.order-step.current {
    border-color: rgba(18, 100, 230, 0.32);
    background: #fff;
}

.order-step.locked {
    color: var(--muted);
    background: #f8fafc;
}

.order-step.done i {
    background: #168557;
}

.order-step.current i {
    background: #1264e6;
}

.order-step.locked i {
    background: #98a2b3;
}

.order-detail-card {
    display: grid;
    gap: 10px;
}

.order-detail-card p {
    color: var(--muted);
    font-size: 13px;
}

.order-detail-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: baseline;
}

.order-detail-grid span {
    color: var(--muted);
    font-size: 13px;
}

.order-detail-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.order-delivery-card {
    border-color: rgba(18, 100, 230, 0.22);
    background:
        linear-gradient(180deg, #f6faff, #fff);
}

.order-delivery-card.locked {
    border-color: rgba(249, 115, 22, 0.24);
    background:
        linear-gradient(180deg, #fff7ed, #fff);
}

.order-delivery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.order-delivery-head h2 {
    font-size: 17px;
}

.order-delivery-head span {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--primary);
    background: #eaf3ff;
    font-size: 12px;
    font-weight: 800;
}

.order-delivery-card.locked .order-delivery-head span {
    color: #9a4a0f;
    background: #ffedd5;
}

.order-delivery-content {
    padding: 12px;
    border: 1px dashed rgba(18, 100, 230, 0.24);
    border-radius: 8px;
    background: #fff;
}

.order-delivery-content pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    font-family: inherit;
    line-height: 1.65;
}

.order-delivery-content p {
    margin: 0;
}

.order-service-loop {
    border-color: rgba(19, 138, 78, 0.2);
    background: linear-gradient(180deg, #f5fff9, #fff);
}

.service-loop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.order-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.order-detail-actions button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.pay-reserved-notice {
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #8a4b0f;
    background: #fff7ed;
    font-size: 13px;
    line-height: 1.6;
}

.my-comment-card {
    display: grid;
    gap: 10px;
}

.danger-text {
    color: var(--danger);
}

.payment-content,
.pay-summary {
    display: grid;
    gap: 10px;
}

.pay-summary {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fbff;
}

.pay-summary p {
    color: var(--muted);
}

.pay-notice {
    padding: 12px;
    border: 1px solid rgba(7, 94, 61, 0.16);
    border-radius: 8px;
    color: #075e3d;
    background: #def7ea;
    font-size: 13px;
    line-height: 1.6;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 30;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    background: rgba(17, 24, 39, 0.92);
    box-shadow: var(--shadow);
    font-size: 14px;
    text-align: center;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(221, 229, 239, 0.88);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.bottom-nav button {
    position: relative;
    display: grid;
    height: 48px;
    align-content: center;
    justify-items: center;
    gap: 3px;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
}

.nav-icon {
    position: relative;
    display: block;
    width: 19px;
    height: 19px;
}

.nav-icon::before,
.nav-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.nav-home::before {
    inset: 3px 2px 2px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.nav-home::after {
    left: 5px;
    top: 0;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
}

.nav-category::before {
    inset: 1px;
    background:
        linear-gradient(currentColor 0 0) 0 0 / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 12px 0 / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 0 12px / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 12px 12px / 7px 7px no-repeat;
    border-radius: 4px;
}

.nav-message::before {
    inset: 2px 1px 4px;
    border: 2px solid currentColor;
    border-radius: 6px;
}

.nav-message::after {
    left: 5px;
    bottom: 1px;
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skew(-18deg);
}

.nav-forum::before {
    inset: 2px 1px 4px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.nav-forum::after {
    left: 5px;
    bottom: 1px;
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-10deg);
}

.nav-profile::before {
    left: 6px;
    top: 1px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 999px;
}

.nav-profile::after {
    left: 2px;
    bottom: 1px;
    width: 16px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 5px 5px;
}

.nav-badge {
    position: absolute;
    right: 12px;
    top: 4px;
}

.bottom-nav button.active {
    color: var(--primary);
    background: #eef5ff;
}

.sheet {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 14px;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: #fff;
}

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

.icon-button {
    width: 40px;
    padding: 0;
    font-size: 20px;
}

.mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.captcha-row {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 8px;
}

#authSmsLabel .captcha-row {
    grid-template-columns: minmax(0, 1fr) 96px;
}

#authSmsLabel .captcha-row button {
    min-width: 0;
    padding: 0 10px;
}

.captcha-image {
    width: 120px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.message {
    min-height: 18px;
    color: var(--danger);
    font-size: 13px;
}

.empty {
    display: grid;
    gap: 8px;
    justify-items: center;
    color: var(--muted);
    text-align: center;
    padding: 24px 8px;
}

.empty::before {
    content: "";
    display: block;
    width: 44px;
    height: 32px;
    border: 2px solid #d8e4de;
    border-radius: 10px;
    background:
        radial-gradient(circle at 28px 10px, #f59e0b 0 4px, transparent 5px),
        linear-gradient(135deg, #e9f4ef, #fff);
}

.empty.compact {
    padding: 14px 8px;
    font-size: 13px;
}

@media (min-width: 720px) {
    .phone-shell {
        width: 430px;
        min-height: 100vh;
        margin: 0 auto;
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
        background: var(--bg);
    }

    .bottom-nav {
        width: 430px;
        margin: 0 auto;
    }

    .detail-sticky-bar {
        width: 430px;
    }
}

@media (max-width: 680px) {
    .result-filter-row {
        grid-template-columns: 1fr;
    }

    #productListView .product-card {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 124px;
    }

    #productListView .product-cover-wrap {
        min-height: 124px;
    }

    #productListView .product-cover {
        min-height: 124px;
    }
}

@media (max-width: 360px) {
    .product-list {
        grid-template-columns: 1fr;
    }

    .category-browser {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .category-rail button {
        min-height: 72px;
        padding: 8px 5px;
    }

    .category-content {
        padding: 10px;
    }

    .child-category-grid {
        grid-template-columns: 1fr;
    }

    .order-filter-tabs,
    .order-detail-actions {
        grid-template-columns: 1fr 1fr;
    }

    .order-guide-steps,
    .order-progress {
        grid-template-columns: 1fr;
    }

    .order-progress {
        display: grid;
    }
}

@media (max-width: 430px) {
    .result-search-main {
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    .price-filter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .result-search-main {
        grid-template-columns: 1fr;
    }

    #productListView .product-card {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 112px;
    }

    #productListView .product-cover-wrap {
        min-height: 112px;
    }

    #productListView .product-cover {
        min-height: 112px;
    }

    .sku-options {
        grid-template-columns: 1fr;
    }
}

.search-suggestions {
    display: flex;
    gap: 8px;
    margin: -6px 0 14px;
    overflow-x: auto;
    padding: 1px 0 4px;
    scrollbar-width: none;
}

.search-suggestions::-webkit-scrollbar {
    display: none;
}

.search-suggestions button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 999px;
    color: var(--text);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--soft-shadow);
}

.search-suggestions span {
    color: var(--primary);
    font-size: 11px;
}

.search-panel .search-suggestions {
    flex-wrap: wrap;
    margin: 0;
    overflow: visible;
    padding: 0;
}

.product-attrs {
    display: grid;
    gap: 9px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(221, 229, 239, 0.9);
    border-radius: 8px;
    background: #f8fbff;
}

.product-attrs h3 {
    margin: 0;
    font-size: 15px;
}

.product-attrs dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.product-attrs div {
    min-width: 0;
    padding: 8px;
    border-radius: 6px;
    background: #fff;
}

.product-attrs dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.product-attrs dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 800;
}

.related-section {
    margin-bottom: 86px;
}

.related-product-list {
    display: grid;
    gap: 10px;
}

.survey-chip-row {
    margin: 0 0 12px;
}

.survey-composer select {
    width: 100%;
}

.auth-form-guide,
.profile-completion-guide,
.chat-context-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1.6;
}

.auth-form-guide strong,
.profile-completion-guide strong,
.chat-context-card strong {
    color: #0f172a;
    font-size: 13px;
}

.profile-completion-guide div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-completion-guide em {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    font-style: normal;
}

.profile-completion-guide em.done {
    color: #047857;
    background: #ecfdf5;
}

.profile-completion-guide small {
    font-size: 10px;
    color: inherit;
}

#profileCompleteness.complete {
    color: #047857;
}

#profileCompleteness.partial {
    color: #b45309;
}

#profileCompleteness.todo {
    color: #be123c;
}

.chat-context-card {
    margin: 0 16px 8px;
    background: #eef6ff;
    border-color: #bfdbfe;
}

.message-product-card {
    display: grid;
    gap: 5px;
    min-width: 190px;
    padding: 10px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
}

.message-product-card span {
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
}

.message-product-card strong {
    font-size: 14px;
}

.message-product-card small,
.message-product-card p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.v03-h5-decision-card,
.v03-h5-chat-assist,
.v03-h5-forum-command {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.v03-h5-decision-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.v03-h5-decision-card strong,
.v03-h5-chat-assist strong,
.v03-h5-forum-command strong {
    color: var(--text);
    font-size: 14px;
}

.v03-h5-decision-card span,
.v03-h5-chat-assist span,
.v03-h5-forum-command span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.v03-h5-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.v03-h5-decision-grid span {
    display: grid;
    gap: 3px;
    min-height: 54px;
    padding: 9px;
    border-radius: 10px;
    background: #f8fafc;
}

.v03-h5-decision-grid b {
    color: var(--primary);
    font-size: 13px;
}

.v03-h5-service-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.v03-h5-service-actions button {
    min-height: 36px;
}

.v03-h5-chat-assist {
    margin: 0 16px 8px;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.v03-h5-chat-assist.platform {
    background: #eef6ff;
    border-color: #bfdbfe;
}

.v03-h5-chat-assist em {
    color: #475569;
    font-size: 12px;
    font-style: normal;
}

.v03-h5-forum-command {
    grid-template-columns: 1fr 1fr;
    margin: 12px 0;
}

.v03-h5-forum-command button {
    display: grid;
    gap: 4px;
    min-height: 66px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    padding: 10px;
    background: #f8fbff;
    text-align: left;
}

@media (max-width: 380px) {
    .bubble.system small {
        white-space: normal;
    }

    .product-attrs dl {
        grid-template-columns: 1fr;
    }

    .v03-h5-decision-grid,
    .v03-h5-service-actions,
    .v03-h5-forum-command {
        grid-template-columns: 1fr;
    }
}

.refund-summary-card {
    border-color: rgba(35, 182, 157, 0.22);
    background: linear-gradient(135deg, #f8fffc, #ffffff);
}

.refund-summary-card h2 {
    margin: 4px 0 6px;
    color: #0f766e;
    font-size: 18px;
}

.refund-summary-card p {
    margin: 0;
    color: #607084;
    line-height: 1.6;
}

#paymentStatusNotice strong {
    display: block;
    margin-bottom: 6px;
    color: #172033;
}

#paymentStatusNotice p {
    margin: 0 0 10px;
    color: #607084;
    line-height: 1.6;
}

.v038-filter-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.v038-filter-summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v038-filter-summary button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    background: #172033;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.price-quick-row button.active {
    border-color: rgba(35, 182, 157, 0.42);
    background: #e9fbf7;
    color: #168a76;
    box-shadow: 0 0 0 2px rgba(35, 182, 157, 0.08);
}

.v038-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.v038-detail-actions button {
    min-height: 42px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 900;
}

.v038-detail-actions .v038-action-primary {
    border-color: #172033;
    background: #172033;
    color: #fff;
}

.v038-detail-actions .v038-action-cart {
    border-color: rgba(35, 182, 157, 0.36);
    background: #23b69d;
    color: #fff;
}

.v038-detail-actions .v038-action-secondary {
    border-color: rgba(15, 23, 42, 0.1);
    background: #f8fafc;
    color: #334155;
}

.detail-sticky-bar #stickyCartButton {
    border-color: rgba(35, 182, 157, 0.26);
    background: #e9fbf7;
    color: #168a76;
}

/* v0.3-dev: H5 commerce/profile polish and address management. */
.profile-stats,
.detail-sticky-bar,
.v037-cart-fab {
    display: none !important;
}

.v043-profile-orders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
}

.v043-profile-orders button {
    display: grid;
    gap: 4px;
    min-height: 64px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 9px 4px;
    background: #fff;
    color: #172033;
    text-align: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.v043-profile-orders span {
    font-size: 12px;
    font-weight: 900;
}

.v043-profile-orders em {
    color: var(--primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
}

#profileCartEntry {
    order: 2;
    margin-bottom: 8px;
}

.v043-address-entry {
    order: 4;
}

.address-book-page,
.address-form,
.address-list {
    display: grid;
    gap: 12px;
}

.address-card,
.address-form {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 13px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.address-card {
    display: grid;
    gap: 10px;
}

.address-card strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #172033;
    font-size: 15px;
}

.address-card strong em {
    border-radius: 999px;
    padding: 2px 7px;
    background: #e9fbf7;
    color: #168a76;
    font-size: 11px;
    font-style: normal;
}

.address-card span,
.address-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.address-form label {
    display: grid;
    gap: 6px;
    color: #526071;
    font-size: 12px;
    font-weight: 800;
}

.address-form input,
.address-form select {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    padding: 0 11px;
    background: #fff;
    color: #172033;
    font-size: 13px;
}

.v043-avatar-cropper,
.v043-card-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: end center;
}

.v043-avatar-cropper.hidden,
.v043-card-sheet.hidden {
    display: none;
}

.v043-avatar-card,
.v043-card-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    border-radius: 18px 18px 0 0;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.18);
}

#avatarCropCanvas {
    display: block;
    width: 260px;
    height: 260px;
    margin: 8px auto 12px;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 0 8px #f1f5f9;
}

.v043-avatar-card label {
    display: grid;
    gap: 8px;
    color: #526071;
    font-size: 12px;
    font-weight: 800;
}

.v043-card-panel p {
    margin: 0 0 12px;
    color: #64748b;
    line-height: 1.55;
}

.v043-card-list {
    display: grid;
    gap: 8px;
    max-height: 310px;
    margin-bottom: 12px;
    overflow: auto;
}

.v043-card-list button {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 10px;
    background: #f8fafc;
    text-align: left;
}

.v043-card-list strong {
    color: #172033;
    font-size: 14px;
}

.v043-card-list span {
    color: #64748b;
    font-size: 12px;
}

.result-sort-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
}

.result-sort-tabs button {
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
}

.sort-price-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.sort-price-toggle span {
    display: grid;
    gap: 0;
    font-size: 8px;
    line-height: 8px;
}

.sort-price-toggle i {
    color: #a7b2c1;
    font-style: normal;
}

.sort-price-toggle i.active {
    color: var(--primary);
}

.product-sort-more {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 12px;
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 10px;
    background: #f8fbff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.product-sort-more button {
    min-width: 0;
    white-space: nowrap;
}

.product-sort-more.hidden {
    display: none;
}

.v038-detail-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px;
}

.v038-detail-actions button {
    min-height: 34px;
    border-radius: 10px;
    padding: 0 4px;
    font-size: 11px;
    white-space: nowrap;
}

.sku-selector {
    padding: 10px;
    border-radius: 12px;
    background: #f8fafc;
}

.sku-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sku-options button {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
}

.sku-options strong {
    font-size: 13px;
    text-align: center;
}

.sku-price-stack {
    display: none !important;
}

.v043-related-section {
    padding: 10px;
}

.v043-related-section .related-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.v043-related-section .product-info {
    padding: 8px;
}

.v043-related-section .product-info strong {
    min-height: 34px;
    font-size: 12px;
}

.v043-related-section .product-info p,
.v043-related-section .product-meta-row {
    display: none;
}

.v043-related-section .price {
    font-size: 15px;
}

.v037-store-sort {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
}

.v037-store-sort button {
    min-width: 0;
    height: 34px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
}

.v038-store-profile {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.v038-store-profile div {
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 10px 6px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.v038-store-profile strong {
    display: block;
    overflow: hidden;
    color: #172033;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v038-store-profile span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
}

#cartCheckout:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

#cartContinueBrowse {
    width: 100%;
    margin-top: 10px;
}

.v037-profile-cart,
.v038-profile-browse {
    grid-template-columns: 1fr auto !important;
}

.v038-profile-browse {
    border-color: rgba(23, 32, 51, 0.12) !important;
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
}

.v037-profile-cart span,
.v038-profile-browse span {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .v038-store-profile {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v038-filter-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .v038-filter-summary span {
        white-space: normal;
    }
}

.message-product-card.v034-card {
    display: grid;
    gap: 8px;
    border-color: rgba(24, 82, 157, 0.18);
    background: linear-gradient(135deg, #ffffff, #f6fbff);
}

.message-product-card.v034-card.order-card {
    border-color: rgba(22, 121, 74, 0.18);
    background: linear-gradient(135deg, #ffffff, #f5fff9);
}

.message-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.message-card-grid small {
    width: auto;
    padding: 4px 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
}

.message-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-card-actions button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: #1f4f8f;
    color: #fff;
    font-size: 12px;
}

.v035-chat-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.v035-chat-context-actions button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: #eef6ff;
    color: #1f4f8f;
    font-size: 12px;
    font-weight: 800;
}

.v035-chat-context-actions button:first-child {
    background: #1f4f8f;
    color: #fff;
}

.v035-service-reserved {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    align-items: end;
    background: rgba(15, 23, 42, 0.42);
}

.v035-service-reserved.hidden {
    display: none;
}

.v035-service-reserved-card {
    position: relative;
    display: grid;
    gap: 12px;
    width: min(100%, 520px);
    margin: 0 auto;
    border-radius: 22px 22px 0 0;
    padding: 22px 18px 18px;
    background: #fff;
    box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.18);
}

.v035-service-reserved-card [data-v035-close-service] {
    position: absolute;
    top: 10px;
    right: 12px;
}

.v035-service-reserved-card strong {
    padding-right: 36px;
    color: #0f172a;
    font-size: 18px;
}

.v035-service-reserved-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.v035-service-reserved-steps {
    display: grid;
    gap: 8px;
}

.v035-service-reserved-steps span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 12px;
    padding: 8px 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.v035-service-reserved-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1f4f8f;
    color: #fff;
    font-size: 12px;
}

.v037-cart-fab {
    position: fixed;
    right: max(16px, calc((100vw - 520px) / 2 + 16px));
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 35;
    display: none;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    padding: 10px 13px;
    background: #172033;
    color: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
    font-size: 12px;
    font-weight: 900;
}

.v037-cart-fab em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    background: #23b69d;
    color: #fff;
    font-style: normal;
    font-size: 11px;
}

.v037-cart-fab:not(.has-items) em {
    background: rgba(255, 255, 255, 0.22);
}

.v037-store-view,
.v037-cart-view {
    padding-bottom: 112px;
}

.v037-store-hero,
.v037-cart-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 8px 0 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(135deg, #ffffff, #f5fbff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.v037-cart-head {
    grid-template-columns: 1fr auto;
}

.v037-store-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #172033;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.v037-store-hero h2,
.v037-cart-head h2 {
    margin: 3px 0 4px;
    color: #172033;
    font-size: 18px;
    line-height: 1.2;
}

.v037-store-hero span {
    color: #64748b;
    font-size: 12px;
}

.v041-store-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 8px;
    margin: 10px 0;
}

.v041-store-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
}

.v041-store-search input,
.v041-store-category select {
    width: 100%;
    height: 38px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    padding: 0 11px;
    background: #fff;
    color: #172033;
    font-size: 13px;
}

.v041-store-category {
    display: grid;
    gap: 4px;
}

.v041-store-category span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.v037-store-sort {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 12px;
    overflow: visible;
}

.v037-store-sort button {
    min-width: 0;
    height: 34px;
    padding: 0;
    font-size: 12px;
    line-height: 34px;
    white-space: nowrap;
}

.v037-store-products,
.v037-cart-list {
    display: grid;
    gap: 10px;
}

.v037-store-product,
.v037-cart-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.v037-store-product > button {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 10px;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

.v037-store-product img,
.v037-cart-item img,
.v037-cover-empty {
    width: 86px;
    height: 86px;
    border-radius: 14px;
    object-fit: cover;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.v037-store-product strong,
.v037-cart-main strong {
    display: -webkit-box;
    overflow: hidden;
    color: #172033;
    font-size: 14px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.v037-store-product p,
.v037-cart-main p {
    margin: 5px 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.v037-store-product span,
.v037-cart-main em {
    color: #de4f4f;
    font-style: normal;
    font-size: 14px;
    font-weight: 900;
}

.v037-store-product > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.v037-cart-item {
    display: grid;
    grid-template-columns: auto 78px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.v037-cart-item img,
.v037-cart-item .v037-cover-empty {
    width: 78px;
    height: 78px;
}

.v037-cart-item > input {
    width: 16px;
    height: 16px;
    accent-color: #23b69d;
}

.v037-cart-main {
    min-width: 0;
}

.v037-cart-tools {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.v037-cart-tools button {
    min-width: 30px;
    height: 28px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}

.v037-cart-tools button:last-child {
    padding: 0 10px;
    color: #b42318;
}

.v037-cart-bar {
    position: fixed;
    right: max(12px, calc((100vw - 520px) / 2 + 12px));
    bottom: calc(66px + env(safe-area-inset-bottom));
    left: max(12px, calc((100vw - 520px) / 2 + 12px));
    z-index: 36;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.v037-cart-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.v037-cart-bar > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v037-cart-bar span {
    color: #172033;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.v037-profile-cart {
    border-color: rgba(35, 182, 157, 0.18) !important;
    background: linear-gradient(135deg, #ffffff, #f2fffb) !important;
}

.detail-sticky-bar #stickyCartButton {
    min-width: 58px;
}

@media (max-width: 380px) {
    .v037-store-hero {
        grid-template-columns: auto 1fr;
    }

    .v037-store-hero #storeConsultButton {
        grid-column: 1 / -1;
    }

    .v041-store-tools {
        grid-template-columns: 1fr;
    }

    .v037-cart-item {
        grid-template-columns: auto 64px minmax(0, 1fr);
    }

    .v037-cart-item img,
    .v037-cart-item .v037-cover-empty {
        width: 64px;
        height: 64px;
    }

    .v037-cart-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .v037-cart-bar > div {
        justify-content: space-between;
    }
}

.v044-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.v044-address-card h2 {
    margin: 2px 0 0;
}

.v044-address-line {
    margin: 10px 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

.v044-address-line.muted {
    color: #64748b;
}

.v044-address-select {
    margin-top: 10px;
}

.v044-after-sale-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
}

.v044-after-sale-panel {
    position: absolute;
    right: max(0px, calc((100vw - 520px) / 2));
    bottom: 0;
    left: max(0px, calc((100vw - 520px) / 2));
    display: grid;
    gap: 12px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.18);
}

.v044-after-sale-panel label {
    display: grid;
    gap: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.v044-after-sale-panel input,
.v044-after-sale-panel textarea {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    padding: 11px 12px;
    background: #f8fafc;
    color: #172033;
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
}

.v044-after-sale-panel textarea {
    resize: vertical;
}

.v044-after-sale-panel small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.v044-evidence-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 8px;
}

.v044-evidence-preview a {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    aspect-ratio: 1;
}

.v044-evidence-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v044-order-address-snapshot p,
.v044-refund-row p {
    margin: 6px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.v044-refund-row {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 12px;
    background: #f8fafc;
}

.v044-refund-row + .v044-refund-row {
    margin-top: 10px;
}

.v044-refund-row strong {
    color: #172033;
    font-size: 13px;
}

.v044-refund-row span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
}

.v046-order-card .order-card-head {
    align-items: flex-start;
    gap: 12px;
}

.v046-order-badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.v046-review-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.v046-review-chip.done {
    color: #047857;
    background: #d1fae5;
}

.v046-review-chip.pending {
    color: #92400e;
    background: #fef3c7;
}

.v046-order-card .order-actions {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

/* 2026-06-06: keep H5 chat/detail work areas above the fixed bottom nav. */
#chatDialogView {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

#chatDialogView .chat-box {
    display: flex;
    flex-direction: column;
    height: min(720px, calc(100dvh - 138px - env(safe-area-inset-bottom)));
    min-height: 360px;
}

#chatDialogView .chat-header,
#chatDialogView .chat-dialog-meta,
#chatDialogView #chatReopenButton,
#chatDialogView .chat-form {
    flex: 0 0 auto;
}

#chatDialogView .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

#chatDialogView .chat-form {
    background: #fff;
}

/* 2026-06-12: product brand icon */
.app-brand-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.app-brand-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(221, 229, 239, 0.92);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(18, 100, 230, 0.16);
    object-fit: cover;
}

.app-brand-title h1 {
    min-width: 0;
    padding: 0;
    color: #111827;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2026-06-12: H5 profile module polish */
#profileView {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

#profileView .profile-panel {
    gap: 12px;
}

#profileView .profile-hero {
    position: relative;
    overflow: hidden;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 104px;
    border: 0;
    border-radius: 22px;
    padding: 18px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.52), transparent 26%),
        linear-gradient(135deg, #1264e6 0%, #14a38d 58%, #f59e0b 140%);
    box-shadow: 0 20px 42px rgba(18, 100, 230, 0.18);
}

#profileView .profile-hero::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -24px;
    width: 128px;
    height: 128px;
    background: url("./product-icon.png?v=20260612-product-icon") center / cover no-repeat;
    opacity: 0.16;
    pointer-events: none;
}

#profileView .profile-hero > * {
    position: relative;
    z-index: 1;
}

#profileView .profile-avatar {
    width: 64px;
    height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.56);
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
}

#profileView .profile-hero .eyebrow {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.8);
}

#profileView .profile-hero h2 {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileView .profile-hero p:last-child {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileView .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#profileView .profile-visitor-card,
#profileView #profileCartEntry,
#profileView .v043-profile-orders {
    grid-column: 1 / -1;
}

#profileView .profile-visitor-card {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 14px 14px 68px;
    border: 1px solid rgba(18, 100, 230, 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(18, 100, 230, 0.07), rgba(20, 163, 141, 0.08)), #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

#profileView .profile-visitor-card::before {
    content: "访";
    position: absolute;
    left: 14px;
    top: 50%;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #1264e6, #14a38d);
    box-shadow: 0 10px 22px rgba(18, 100, 230, 0.18);
    font-size: 15px;
    font-weight: 900;
    transform: translateY(-50%);
}

#profileView .profile-visitor-card span {
    color: #64748b;
    font-weight: 800;
}

#profileView .profile-visitor-card strong {
    display: block;
    margin-top: 2px;
    color: #111827;
    font-size: 17px;
    line-height: 1.3;
}

#profileView .v043-profile-orders {
    position: relative;
    gap: 8px;
    margin: 0;
    padding: 42px 10px 10px;
    border: 1px solid rgba(221, 229, 239, 0.92);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

#profileView .v043-profile-orders::before {
    content: "订单服务";
    position: absolute;
    top: 14px;
    left: 14px;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

#profileView .v043-profile-orders button {
    min-height: 68px;
    border: 1px solid rgba(18, 100, 230, 0.09);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: none;
}

#profileView .v043-profile-orders button::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eaf2ff, #e6fbf6);
}

#profileView .v043-profile-orders button:nth-child(1)::before { content: "付"; }
#profileView .v043-profile-orders button:nth-child(2)::before { content: "收"; }
#profileView .v043-profile-orders button:nth-child(3)::before { content: "退"; }
#profileView .v043-profile-orders button:nth-child(4)::before { content: "评"; }

#profileView .v043-profile-orders button::before {
    display: grid;
    place-items: center;
    color: #1264e6;
    font-size: 12px;
    font-weight: 900;
}

#profileView .profile-entry {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 10px;
    min-height: 92px;
    border-color: rgba(221, 229, 239, 0.92);
    border-radius: 18px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

#profileView .profile-entry::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 14px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    transform: rotate(45deg);
}

#profileView .profile-entry i {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: linear-gradient(135deg, #eef5ff, #e9fbf7);
    color: #1264e6;
    font-size: 15px;
}

#profileView .profile-entry span {
    padding-right: 16px;
    overflow: hidden;
    color: #172033;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileView .profile-entry strong {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#profileView .profile-entry em {
    position: absolute;
    right: 12px;
    bottom: 10px;
    border-radius: 999px;
    padding: 2px 7px;
    color: #1264e6;
    background: #eef5ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

#profileView #profileCartEntry {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 76px;
    border-color: rgba(20, 163, 141, 0.18);
    background: linear-gradient(135deg, rgba(20, 163, 141, 0.1), rgba(18, 100, 230, 0.06)), #fff;
}

#profileView #profileCartEntry i {
    background: linear-gradient(135deg, #dff8ef, #eaf2ff);
    color: #0f766e;
}

#profileView #profileAllProductsButton i {
    background: linear-gradient(135deg, #eaf2ff, #fff7ed);
    color: #1d4ed8;
}

#profileView #profilePlatformServiceButton i {
    background: #eef5ff;
    color: #1264e6;
}

#profileView .community-entry i {
    background: #dff8ef;
    color: #0f766e;
}

#profileView #profileFavoritesButton i {
    background: #fff1f2;
    color: #e11d48;
}

#profileView #profileHistoryButton i {
    background: #fff7ed;
    color: #c2410c;
}

#profileView #profilePasswordButton,
#profileView #logoutButton {
    min-height: 46px;
    border-radius: 16px;
    font-weight: 900;
}

#profileView #profilePasswordButton {
    border-color: rgba(18, 100, 230, 0.16);
    background: #f8fbff;
    color: #1264e6;
}

#profileView #logoutButton {
    border-color: rgba(225, 29, 72, 0.16);
    color: #e11d48;
    background: #fff7f8;
}

@media (max-width: 374px) {
    #profileView .profile-actions {
        grid-template-columns: 1fr;
    }

    #profileView .v043-profile-orders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 2026-06-12: H5 profile module grouped workspace */
#profileView .profile-panel {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#profileView .profile-section-title {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 2px 0;
    color: #0f172a;
}

#profileView .profile-section-title span {
    font-size: 15px;
    font-weight: 900;
}

#profileView .profile-section-title small {
    min-width: 0;
    overflow: hidden;
    color: #8a94a6;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileView #profileSettingsTitle {
    margin: 2px 2px 0;
}

#profileView .profile-actions {
    align-items: stretch;
    gap: 10px;
}

#profileView .profile-visitor-card,
#profileView #profileCartEntry,
#profileView .v043-profile-orders {
    border-radius: 20px;
}

#profileView .profile-entry {
    align-content: center;
    min-height: 86px;
    padding: 13px 34px 13px 12px;
    border: 1px solid rgba(217, 226, 239, 0.94);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

#profileView .profile-entry:active {
    transform: translateY(1px);
}

#profileView .profile-entry.disabled {
    opacity: 0.68;
}

#profileView .profile-order-entry,
#profileView .v045-profile-products {
    min-height: 78px;
}

#profileView .profile-order-entry i {
    color: #1d4ed8;
    background: linear-gradient(135deg, #eaf2ff, #eff6ff);
}

#profileView .account-entry i {
    color: #0f766e;
    background: linear-gradient(135deg, #e0fbf4, #ecfdf5);
}

#profileView .service-entry i {
    color: #7c3aed;
    background: linear-gradient(135deg, #f1e8ff, #f8f5ff);
}

#profileView .social-entry i {
    color: #e11d48;
    background: linear-gradient(135deg, #fff1f2, #fff7ed);
}

#profileView #profileCartEntry {
    padding-right: 54px;
}

#profileView #profileCartEntry em {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

#profileView .v043-profile-orders {
    padding: 44px 10px 10px;
}

#profileView .v043-profile-orders button {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 9px 2px;
}

#profileView .v043-profile-orders span {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileView #profilePasswordButton,
#profileView #logoutButton {
    width: 100%;
    margin: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

/* 2026-06-14: H5 final polish for commerce, forum and profile flows. */
.phone-shell {
    background: #f5f7fb;
}

.view {
    min-width: 0;
}

.search-bar,
.home-search-link,
.search-page-topbar,
.result-search-main,
.category-browser,
.forum-hero,
.forum-tabs,
.forum-post-card,
.survey-card,
.forum-detail-card,
.forum-reply-card,
.survey-question,
.detail-panel,
.order-card,
.order-detail-card,
.profile-entry,
#profileView .profile-visitor-card,
#profileView #profileCartEntry,
#profileView .v043-profile-orders {
    border-color: rgba(221, 229, 239, 0.96) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.home-search-link,
.search-page-form,
.result-search-main {
    min-height: 46px !important;
    gap: 8px !important;
}

.search-page-topbar,
.result-search-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
}

.search-page-form input,
.result-search-main input {
    min-width: 0 !important;
    font-size: 14px !important;
}

.search-page-form button,
.result-search-main button,
.search-link-button {
    flex: 0 0 auto !important;
    min-width: 62px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.search-history-list,
.search-suggestions,
.result-sort-tabs,
.forum-chip-row,
.message-filter-tabs,
.order-filter-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
}

.search-history-list::-webkit-scrollbar,
.search-suggestions::-webkit-scrollbar,
.result-sort-tabs::-webkit-scrollbar,
.forum-chip-row::-webkit-scrollbar,
.message-filter-tabs::-webkit-scrollbar,
.order-filter-tabs::-webkit-scrollbar {
    display: none;
}

.result-sort-tabs button,
.forum-chip-row button,
.message-filter-tabs button,
.order-filter-tabs button,
.survey-chip-row button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.category-browser {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    min-height: 440px !important;
    overflow: hidden !important;
}

.category-rail {
    overflow-y: auto !important;
}

.category-rail button {
    min-height: 54px !important;
    padding: 10px 9px !important;
}

.category-rail button span,
.category-rail button small,
.child-category-grid button span,
.child-category-grid button small {
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

.category-content {
    min-width: 0 !important;
    overflow: hidden !important;
}

.child-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.child-category-grid button,
.category-all-card,
.category-all-products-entry {
    min-width: 0 !important;
    border-radius: 14px !important;
}

#detailView {
    padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
}

.detail-actions,
.v038-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.detail-actions button,
.v038-detail-actions button {
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.detail-sticky-bar {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: auto auto auto minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
}

.detail-sticky-bar span {
    min-width: 0 !important;
    font-size: 14px !important;
}

.detail-sticky-bar button {
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}

.recommend-section .product-list,
.category-product-list,
.profile-grid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.forum-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
}

.forum-hero h2,
.forum-hero p,
.forum-post-card h3,
.survey-card h3,
.forum-detail-card h2,
.forum-rich-content p {
    overflow-wrap: anywhere !important;
}

.forum-tabs {
    padding: 4px !important;
    background: #fff !important;
}

.forum-tabs button {
    min-height: 38px !important;
    border-radius: 10px !important;
}

.forum-post-card,
.survey-card,
.forum-detail-card,
.forum-reply-card {
    padding: 14px !important;
}

.forum-detail {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.forum-reply-form,
.survey-form {
    position: relative !important;
    z-index: 2 !important;
}

.survey-options {
    gap: 8px !important;
}

.survey-option {
    min-height: 42px !important;
    border-radius: 12px !important;
}

#profileView .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#profileView .profile-entry {
    min-height: 68px !important;
    padding: 12px !important;
}

#profileView .v043-profile-orders {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#profileView .v043-profile-orders button {
    min-width: 0 !important;
    min-height: 64px !important;
}

.chat-box,
#chatDialogView .chat-box {
    height: min(720px, calc(100dvh - 132px - env(safe-area-inset-bottom))) !important;
}

.chat-messages,
#chatDialogView .chat-messages {
    min-height: 0 !important;
    overflow-y: auto !important;
}

.bottom-nav {
    border-radius: 18px 18px 0 0 !important;
}

.bottom-nav button {
    min-width: 0 !important;
    gap: 3px !important;
    font-size: 11px !important;
}

@media (max-width: 390px) {
    .category-browser {
        grid-template-columns: 104px minmax(0, 1fr) !important;
    }

    .detail-sticky-bar {
        grid-template-columns: repeat(3, auto) minmax(0, 1fr) !important;
    }

    .detail-sticky-bar button {
        padding: 0 8px !important;
        font-size: 12px !important;
    }
}
.hidden-file-input {
    display: none !important;
}

.chat-inline-image-button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.chat-inline-image {
    display: block;
    max-width: min(280px, 72vw);
    max-height: 320px;
    border-radius: 10px;
    object-fit: contain;
}
.notification-view-v047 {
    padding: 16px;
}

.notification-list-v047 {
    display: grid;
    gap: 12px;
}

.notification-card-v047 {
    position: relative;
    padding: 14px;
    border: 1px solid rgba(18, 100, 230, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.notification-card-v047.unread::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.notification-card-head-v047 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #667085;
    font-size: 12px;
}

.notification-card-head-v047 span {
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: #1264e6;
    font-weight: 700;
}

.notification-card-v047 h3 {
    margin: 0;
    padding-right: 18px;
    color: #101828;
    font-size: 15px;
}

.notification-card-v047 p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
}