:root {
    --ink: #101832;
    --muted: #667085;
    --line: #e7e9f3;
    --purple: #4f35e8;
    --purple-2: #6b4cff;
    --orange: #ff940f;
    --green: #12a66a;
    --blue: #2f6fec;
    --surface: #ffffff;
    --soft: #f7f8fc;
    --shadow: 0 18px 45px rgba(32, 40, 76, .09);
    --radius: 8px;
    --container: 1410px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; color: var(--ink); background: #fff; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; }
main { width: 100%; max-width: 100%; min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 30px; font-weight: 900; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 4px solid var(--orange); border-radius: 50%; color: var(--orange); font-weight: 900; }
.main-nav { display: flex; justify-content: center; align-items: center; gap: 29px; font-weight: 800; font-size: 13px; }
.main-nav a { position: relative; padding: 34px 0 28px; }
.main-nav a.active, .main-nav a:hover { color: var(--purple); }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 15px; height: 3px; background: var(--purple); border-radius: 99px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.round-icon { position: relative; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: #0d1535; font-size: 22px; }
.round-icon:hover { background: #f2f0ff; }
.badge::after { content: attr(data-count); position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: var(--purple); color: #fff; font-size: 10px; font-weight: 900; }
.post-btn { min-height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 8px; color: #fff; background: var(--purple); font-weight: 900; box-shadow: 0 10px 22px rgba(79, 53, 232, .24); }
.user-menu { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.18; font-weight: 700; }
.user-menu strong { display: block; color: var(--ink); }
.mini-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #243447; font-weight: 900; }

.hero {
    width: min(var(--container), calc(100% - 40px));
    min-height: 610px;
    margin: 0 auto 44px;
    padding: 72px 74px 48px;
    display: grid;
    grid-template-columns: 640px 1fr;
    gap: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(106deg, #f4f1ff 0%, #fbfaff 50%, #fff1e1 100%);
}
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 14%, rgba(108, 76, 255, .12), transparent 24%), radial-gradient(circle at 91% 55%, rgba(255, 148, 15, .13), transparent 24%); pointer-events: none; }
.hero-copy, .hero-scene { position: relative; z-index: 1; min-width: 0; }
.hero h1 { max-width: 590px; margin: 0 0 18px; font-size: 52px; line-height: 1.08; font-weight: 900; letter-spacing: 0; }
.hero h1 span { color: var(--purple); }
.hero p { max-width: 590px; margin: 0 0 30px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-bottom: 34px; }
.hero-stats div, .trust-bar div { display: grid; grid-template-columns: 42px auto; column-gap: 10px; align-items: center; }
.hero-stats b, .trust-bar b { font-size: 17px; font-weight: 900; }
.hero-stats small, .trust-bar small { grid-column: 2; color: var(--muted); font-size: 12px; }
.stat-icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
.stat-icon.purple { background: #eeeaff; color: var(--purple); }
.stat-icon.orange { background: #fff0dc; color: var(--orange); }
.stat-icon.green { background: #e8fbf2; color: var(--green); }
.stat-icon.blue { background: #eaf0ff; color: var(--blue); }
.search-panel { width: 820px; max-width: 100%; min-height: 70px; display: grid; grid-template-columns: 1fr 190px 190px 105px; align-items: center; padding: 8px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.search-panel label { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-width: 0; color: #7a8197; }
.search-panel input, .search-panel select { width: 100%; min-width: 0; height: 54px; border: 0; outline: none; border-right: 1px solid var(--line); background: transparent; color: #26314d; font-weight: 700; }
.search-panel button { height: 54px; border: 0; border-radius: 8px; background: var(--purple); color: #fff; font-weight: 900; cursor: pointer; }
.trend-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: 12px; }
.trend-row a { padding: 8px 16px; border-radius: 99px; color: var(--purple); background: #fff; font-weight: 800; box-shadow: 0 7px 18px rgba(28, 32, 70, .05); }

.hero-scene { min-height: 455px; }
.scene-stage { position: absolute; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #fff, #f4f5fb); box-shadow: 0 28px 55px rgba(31, 43, 88, .16); }
.scene-emoji { font-size: 102px; filter: drop-shadow(0 8px 7px rgba(30, 40, 70, .12)); }
.car-stage { left: 10px; top: 146px; width: 350px; height: 170px; }
.sofa-stage { right: 132px; top: 144px; width: 300px; height: 150px; }
.fridge-stage { right: 4px; top: 83px; width: 182px; height: 260px; border-radius: 8px; }
.fridge-stage .scene-emoji { font-size: 116px; color: #8b929f; }
.swap-arrow { position: absolute; z-index: 3; font-size: 148px; font-weight: 900; line-height: 1; filter: drop-shadow(0 15px 16px rgba(0,0,0,.12)); }
.purple-arrow { top: 18px; left: 230px; color: var(--purple-2); transform: rotate(-35deg); }
.orange-arrow { left: 360px; bottom: 42px; color: var(--orange); transform: rotate(145deg); }
.video-box { position: absolute; right: 48px; bottom: 6px; width: 280px; min-height: 86px; display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.video-box span { grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: var(--purple); font-size: 22px; }
.video-box b { font-size: 14px; }
.video-box small { color: var(--muted); }

.category-section, .listings-section, .how-section, .trust-bar, .cta-banner, .site-footer, .copyright, .breadcrumb, .profile-layout {
    width: min(1230px, calc(100% - 96px));
    margin-left: auto;
    margin-right: auto;
}
.category-section, .listings-section { margin-top: 42px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-heading h2, .profile-section-head h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.section-heading a, .profile-section-head a { color: var(--purple); font-weight: 900; font-size: 13px; }
.category-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(32, 40, 76, .04); }
.category-item { min-height: 124px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 16px 10px; text-align: center; border-right: 1px solid var(--line); }
.category-item:last-child { border-right: 0; }
.category-icon { font-size: 42px; line-height: 1; font-weight: 900; }
.color-1, .color-3, .color-6 { color: var(--purple); }
.color-2, .color-5 { color: var(--green); }
.color-4 { color: #fb5a36; }
.category-item b { font-size: 13px; }
.category-item small { color: var(--muted); }

.listing-grid, .profile-listings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.listing-card, .small-listing {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(32, 40, 76, .05);
}
.listing-card img, .listing-card .card-placeholder { width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #eef1f8, #fff4df); font-size: 58px; }
.listing-card .label, .small-listing .status { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 9px; border-radius: 6px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; }
.listing-card button { position: absolute; top: 9px; right: 9px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.25); font-size: 18px; }
.listing-card div:last-child, .small-listing div:last-child { padding: 13px; }
.listing-card h3, .small-listing h3 { min-height: 36px; margin: 0 0 8px; font-size: 14px; line-height: 1.28; }
.listing-card p, .small-listing p { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.listing-card strong { display: block; margin: 6px 0; font-size: 12px; color: #26314d; }
.listing-card small { display: inline-flex; padding: 6px 9px; border-radius: 99px; background: #f2efff; color: var(--purple); font-size: 12px; font-weight: 900; }

.how-section { margin-top: 58px; text-align: center; }
.how-section h2 { margin: 0 0 30px; font-size: 31px; }
.how-grid { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr; align-items: center; gap: 10px; }
.how-grid div { display: grid; justify-items: center; gap: 10px; }
.bubble { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; font-size: 42px; font-weight: 900; }
.bubble.violet { background: #eee8ff; color: var(--purple); }
.bubble.amber { background: #fff0dc; color: var(--orange); }
.bubble.mint { background: #ddf7ea; color: var(--green); }
.bubble.blue { background: #e7edff; color: var(--purple); }
.how-grid i { color: #c5c8df; font-size: 38px; font-style: normal; }
.how-grid b { font-size: 17px; }
.how-grid p { max-width: 190px; margin: 0; color: var(--muted); font-size: 13px; }
.primary-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 44px; margin-top: 28px; border-radius: 8px; background: var(--purple); color: #fff; font-weight: 900; }
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; padding: 24px 28px; border-radius: 8px; background: #f5f3ff; }
.trust-bar div { border-right: 1px solid #e4ddff; padding-left: 16px; }
.trust-bar div:last-child { border-right: 0; }
.trust-bar b { font-size: 25px; }

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.article-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(32,40,76,.04); }
.article-img { height: 150px; background-size: cover; background-position: center; }
.img-1 { background: linear-gradient(135deg, #d9b58a, #f6e5cf); }
.img-2 { background: linear-gradient(135deg, #bfe0ff, #f5f8ff); }
.img-3 { background: linear-gradient(135deg, #303846, #d8dce4); }
.img-4 { background: linear-gradient(135deg, #dfe9f3, #ffffff); }
.article-grid time, .article-grid h3, .article-grid p, .article-grid a { display: block; margin-left: 18px; margin-right: 18px; }
.article-grid time { margin-top: 14px; color: var(--muted); font-size: 12px; }
.article-grid h3 { margin-top: 7px; margin-bottom: 7px; font-size: 16px; }
.article-grid p { margin-top: 0; color: var(--muted); }
.article-grid a { margin-bottom: 18px; color: var(--purple); font-weight: 900; }
.cta-banner { display: grid; grid-template-columns: 1fr 330px; align-items: center; min-height: 170px; margin-top: 42px; padding: 32px 62px; border-radius: 8px; color: #fff; background: linear-gradient(110deg, #674cff, #3724bd); overflow: hidden; }
.cta-banner h2 { margin: 0 0 8px; font-size: 31px; }
.cta-banner p { margin: 0 0 20px; color: rgba(255,255,255,.86); }
.cta-banner a { display: inline-flex; align-items: center; justify-content: center; min-width: 130px; min-height: 43px; margin-right: 12px; border-radius: 8px; background: #fff; color: var(--purple); font-weight: 900; }
.cta-banner a + a { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.phone-art { justify-self: end; display: grid; gap: 10px; width: 180px; padding: 24px 20px; border-radius: 24px; color: var(--ink); background: #fff; transform: rotate(-4deg); box-shadow: var(--shadow); }
.phone-art span { font-weight: 900; color: var(--orange); }
.phone-art b, .phone-art small { padding: 10px; border-radius: 8px; background: #f0edff; color: var(--purple); }

.breadcrumb { margin-top: 14px; color: var(--muted); font-size: 13px; }
.profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 34px; margin-top: 28px; }
.profile-sidebar { display: grid; align-content: start; gap: 18px; }
.profile-card, .level-mini, .side-menu, .mobile-card, .welcome-card, .offer-table, .message-list, .rank-panel, .stats-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(32,40,76,.05);
}
.profile-card { display: grid; justify-items: center; padding: 34px 24px 24px; text-align: center; }
.avatar-photo, .large-avatar { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #eef1f8, #d7dfec); color: #1f2a44; font-weight: 900; }
.avatar-photo { width: 95px; height: 95px; margin-bottom: 16px; font-size: 36px; }
.large-avatar { width: 112px; height: 112px; color: var(--purple); background: #fff; font-size: 42px; }
.profile-card h2 { margin: 0 0 4px; font-size: 18px; }
.profile-card h2 span { color: var(--purple); font-size: 11px; }
.profile-card p { margin: 2px 0; color: var(--muted); }
.level-mini { padding: 18px 24px; background: #f7f5ff; }
.level-mini b { display: block; color: var(--purple); }
.level-mini small { color: var(--muted); }
.side-menu { display: grid; padding: 15px; }
.side-menu a { padding: 14px 16px; border-radius: 8px; color: #24304d; font-weight: 800; }
.side-menu a.active, .side-menu a:hover { color: var(--purple); background: #f1eeff; }
.mobile-card { padding: 22px; color: #fff; background: linear-gradient(135deg, #7659ff, #4f35e8); }
.mobile-card p { color: rgba(255,255,255,.82); }
.mobile-card div { display: flex; gap: 9px; }
.mobile-card span { padding: 9px 11px; border-radius: 7px; color: #fff; background: #111827; font-size: 12px; font-weight: 900; }
.profile-main { min-width: 0; }
.welcome-card { position: relative; padding: 38px 34px 34px; color: #fff; background: linear-gradient(135deg, #6d51ff, #3c25d4); }
.welcome-info { display: flex; gap: 26px; align-items: center; }
.welcome-card h1 { margin: 0 0 10px; font-size: 34px; }
.welcome-card p { margin: 0; color: rgba(255,255,255,.86); }
.edit-profile { position: absolute; right: 36px; top: 52px; padding: 14px 24px; border-radius: 8px; color: var(--purple); background: #fff; font-weight: 900; }
.profile-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 36px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.35); }
.profile-summary div { display: grid; grid-template-columns: 42px auto; align-items: center; column-gap: 10px; padding: 18px 18px; color: var(--ink); background: rgba(255,255,255,.94); }
.profile-summary span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--purple); background: #f0edff; font-weight: 900; }
.profile-summary b { font-size: 24px; }
.profile-summary small { color: var(--muted); }
.profile-section-head { display: flex; justify-content: space-between; align-items: center; margin: 38px 0 18px; }
.profile-listings { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.small-listing img, .small-listing .card-placeholder { width: 100%; aspect-ratio: 1.26 / 1; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #eef1f8, #fff4df); font-size: 50px; }

.section {
    width: min(var(--container), calc(100% - 40px));
    margin: 24px auto 0;
    min-width: 0;
}

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

.section-head > * {
    min-width: 0;
}

.detail-title {
    margin: 8px 0 6px;
    font-size: 32px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.detail-layout,
.detail-panel,
.detail-list,
.ui-page-title,
.ui-page-subtitle {
    min-width: 0;
}

.detail-layout .ui-page-title,
.detail-layout .ui-page-subtitle,
.detail-list span,
.detail-list strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.section-head a,
.section-head p,
.detail-panel,
.detail-panel p,
.alert,
.btn,
.badge,
.muted {
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
    min-width: 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    min-width: 0;
}

.gallery img,
.gallery .placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: #eef1f8;
}

.gallery .placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 44px;
}

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

.detail-panel {
    padding: 18px;
    min-width: 0;
}

.detail-panel .price {
    margin: 12px 0;
}

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

.detail-list > div {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.detail-list span,
.detail-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.renew-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.renew-form .btn {
    width: 100%;
}

.small-listing .status { background: var(--green); }
.small-listing .status.pending { background: var(--orange); }
.small-listing p, .small-listing small, .small-listing em { display: block; color: var(--muted); font-size: 12px; font-style: normal; }
.offer-table { overflow: hidden; }
.offer-head, .offer-row { display: grid; grid-template-columns: 1.35fr 1.35fr 1fr .78fr .78fr; gap: 12px; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.offer-head { color: var(--muted); background: #f8f9fc; font-weight: 900; }
.offer-row:last-child { border-bottom: 0; }
.pill { justify-self: start; padding: 7px 12px; border-radius: 99px; background: #e9fbf2; color: var(--green); font-size: 12px; }
.pill.pending { background: #fff1df; color: var(--orange); }
.pill.rejected { background: #feecec; color: #e54848; }
.message-list { display: grid; }
.message-list div { position: relative; min-height: 76px; padding: 18px 190px 18px 72px; border-bottom: 1px solid var(--line); }
.message-list div:last-child { border-bottom: 0; }
.msg-avatar { position: absolute; left: 22px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #1f2a44; font-weight: 900; }
.message-list b { display: block; }
.message-list p { margin: 3px 0 0; color: var(--muted); }
.message-list time { position: absolute; right: 22px; top: 24px; color: var(--muted); font-size: 12px; }
.dashboard-bottom { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; margin-top: 34px; }
.rank-panel, .stats-panel { padding: 30px 34px; }
.rank-panel h2, .stats-panel h2 { margin: 0 0 22px; }
.medal { display: grid; place-items: center; width: 90px; height: 90px; margin-bottom: 18px; border: 7px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 42px; }
.rank-panel p { color: var(--muted); }
.progress { height: 10px; margin: 22px 0 10px; overflow: hidden; border-radius: 99px; background: #e9eaf2; }
.progress span { display: block; height: 100%; background: var(--purple); }
.rank-panel small { display: flex; justify-content: space-between; color: var(--muted); }
.rank-panel a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 26px; padding: 0 28px; border: 1px solid var(--purple); border-radius: 8px; color: var(--purple); font-weight: 900; }
.panel-title { display: flex; justify-content: space-between; align-items: start; }
.panel-title button { padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #33405f; font-weight: 800; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 54px; margin-top: 20px; }
.stats-grid div { display: grid; grid-template-columns: 46px auto auto; align-items: center; column-gap: 12px; }
.stats-grid span { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--purple); background: #f0edff; }
.stats-grid b { font-size: 26px; }
.stats-grid small { grid-column: 2; color: var(--muted); }
.stats-grid em { color: var(--green); font-style: normal; font-weight: 900; }
.stats-grid em.down { color: #e54848; }

.site-footer { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 46px; margin-top: 78px; padding: 42px 0; border-top: 1px solid var(--line); }
.site-footer > div { display: grid; align-content: start; gap: 11px; }
.site-footer h3 { margin: 0 0 8px; font-size: 16px; }
.site-footer a, .site-footer span, .site-footer p { color: var(--muted); }
.footer-brand p { max-width: 250px; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--purple); background: #f0edff; font-weight: 900; }
.copyright { display: flex; justify-content: space-between; padding: 20px 0 32px; color: var(--muted); border-top: 1px solid var(--line); }

@media (max-width: 1200px) {
    .site-header { grid-template-columns: 1fr; padding: 16px 0; gap: 12px; }
    .main-nav, .header-actions { justify-content: flex-start; flex-wrap: wrap; }
    .hero, .profile-layout { grid-template-columns: 1fr; }
    .hero-copy,
    .search-panel,
    .trend-row { width: 100%; max-width: 100%; }
    .hero-scene { display: none; }
    .listing-grid, .profile-listings { grid-template-columns: repeat(3, 1fr); }
    .category-strip { grid-template-columns: repeat(4, 1fr); }
    .how-grid, .trust-bar, .article-grid, .profile-summary { grid-template-columns: repeat(2, 1fr); }
    .how-grid i { display: none; }
}

@media (max-width: 760px) {
    .site-header, .hero, .category-section, .listings-section, .how-section, .trust-bar, .cta-banner, .site-footer, .copyright, .breadcrumb, .profile-layout { width: calc(100% - 32px); }
    .section { width: calc(100% - 32px); }
    .section-head, .detail-layout { grid-template-columns: 1fr; flex-direction: column; }
    .gallery { grid-template-columns: 1fr; }
    .detail-title { font-size: 26px; }
    .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
    .hero { padding: 34px 22px; min-height: auto; }
    .hero h1 { font-size: 36px; overflow-wrap: anywhere; }
    .hero p { overflow-wrap: anywhere; }
    .hero-stats,
    .trend-row { align-items: stretch; max-width: 100%; }
    .hero-stats div { min-width: 0; max-width: 100%; }
    .trend-row a { max-width: 100%; overflow-wrap: anywhere; }
    .hero a,
    .cta-banner a,
    .primary-btn { max-width: 100%; }
    .search-panel,
    .listing-grid,
    .profile-listings,
    .category-strip,
    .how-grid,
    .trust-bar,
    .article-grid,
    .cta-banner,
    .site-footer,
    .profile-summary,
    .offer-head,
    .offer-row,
    .dashboard-bottom,
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .search-panel input, .search-panel select { border-right: 0; border-bottom: 1px solid var(--line); }
    .edit-profile { position: static; display: inline-flex; margin-top: 18px; }
    .welcome-info { flex-direction: column; align-items: flex-start; }
    .message-list div { padding-right: 22px; }
    .message-list time { position: static; display: block; margin-top: 8px; }
    .copyright { gap: 12px; flex-direction: column; }
}

/* Homepage reference refresh */
:root {
    --home-ink: #111827;
    --home-muted: #5f6675;
    --home-line: #e9eaee;
    --home-yellow: #f7b928;
    --home-green: #1aa05d;
    --home-card-shadow: 0 14px 28px rgba(15, 23, 42, .07);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.home-page {
    color: var(--home-ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.home-page main {
    padding-bottom: 28px;
    overflow: hidden;
}

.home-page .site-header {
    width: min(1440px, 100%);
    min-height: 90px;
    padding: 0 36px;
    border-bottom: 1px solid var(--home-line);
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    gap: 42px;
}

.home-page .brand {
    gap: 0;
    color: #111827;
    font-size: 34px;
    line-height: 1;
}

.home-page .brand-mark {
    width: auto;
    height: auto;
    border: 0;
    color: var(--home-yellow);
    font-size: 34px;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
    place-items: center;
    gap: 4px;
    padding: 11px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: #111827;
}

.home-page .main-nav {
    justify-content: flex-start;
    gap: 58px;
    font-size: 16px;
    font-weight: 500;
}

.home-page .main-nav a {
    padding: 34px 0;
}

.home-page .main-nav a.active,
.home-page .main-nav a:hover {
    color: #111827;
}

.home-page .main-nav a.active::after {
    display: none;
}

.home-page .header-actions {
    gap: 18px;
}

.home-page .round-icon {
    width: 32px;
    height: 32px;
    color: #05070d;
    font-size: 25px;
}

.home-page .round-icon:hover,
.home-page .round-icon:focus-visible {
    background: #fff8e8;
    outline: none;
}

.home-page .badge::after {
    top: -7px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    background: var(--home-yellow);
    color: #101828;
    font-size: 10px;
}

.home-page .post-btn {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--home-yellow);
    color: #111827;
    box-shadow: none;
    font-size: 15px;
}

.home-page .user-menu {
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.home-page .mini-avatar {
    width: 38px;
    height: 38px;
    background: #244a40;
}

.home-hero,
.home-categories,
.home-section,
.home-statistics {
    width: min(1440px, calc(100% - 72px));
    margin-left: auto;
    margin-right: auto;
}

.home-hero {
    min-height: 400px;
    display: flex;
    align-items: center;
    margin-top: 0;
    padding: 56px 52px 34px;
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(250,249,245,.86) 47%, rgba(255,255,255,.72) 100%),
        radial-gradient(circle at 78% 38%, rgba(190, 196, 184, .26), transparent 28%),
        linear-gradient(135deg, #f4f1e9 0%, #ffffff 64%);
    overflow: hidden;
}

.home-hero-content {
    width: min(820px, 100%);
}

.home-hero h1 {
    margin: 0 0 20px;
    color: #111827;
    font-size: 56px;
    line-height: 1.13;
    font-weight: 900;
    letter-spacing: 0;
}

.home-hero p {
    margin: 0 0 28px;
    color: #3f4654;
    font-size: 18px;
}

.home-search {
    width: min(820px, 100%);
    min-height: 76px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(17, 24, 39, .12);
}

.home-search span {
    font-size: 30px;
    line-height: 1;
}

.home-search input {
    width: 100%;
    min-width: 0;
    height: 56px;
    border: 0;
    outline: none;
    color: #1f2937;
    background: transparent;
    font-size: 16px;
}

.home-search input::placeholder {
    color: #7a808b;
}

.home-search button {
    height: 58px;
    border: 0;
    border-radius: 8px;
    background: var(--home-yellow);
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.home-search button:focus-visible,
.home-category-card:focus-visible,
.home-listing-card:focus-visible,
.home-section-head a:focus-visible,
.home-page .post-btn:focus-visible,
.home-page .user-menu:focus-visible,
.menu-toggle:focus-visible {
    outline: 3px solid rgba(247, 185, 40, .38);
    outline-offset: 3px;
}

.home-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 24px;
    color: #4b5563;
    font-size: 15px;
}

.home-trust-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-categories {
    margin-top: 0;
    padding: 30px 38px 32px;
    border: 1px solid var(--home-line);
    border-left: 0;
    border-right: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    overflow: hidden;
}

.home-category-row {
    display: flex;
    gap: 20px;
    min-width: 0;
}

.home-category-card {
    flex: 0 0 146px;
    min-height: 112px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 16px 12px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
}

.home-category-card span {
    display: block;
    color: #3f4654;
    font-size: 34px;
    line-height: 1;
}

.home-category-card strong {
    color: #222936;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.home-section {
    margin-top: 32px;
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
    padding: 0 38px;
}

.home-section-head.compact {
    justify-content: flex-start;
}

.home-section-head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
}

.home-section-head p {
    margin: 4px 0 0;
    color: #7a808b;
}

.home-section-head a {
    color: #111827;
    font-weight: 500;
}

.home-listing-row {
    display: flex;
    gap: 22px;
    padding: 0 38px 4px;
    overflow: hidden;
}

.home-listing-card {
    flex: 0 0 312px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--home-card-shadow);
}

.home-card-media,
.home-card-media img,
.home-card-media .card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1.9 / 1;
}

.home-card-media img {
    height: auto;
    object-fit: cover;
}

.home-card-media .card-placeholder {
    display: grid;
    place-items: center;
    color: #3f4654;
    background: linear-gradient(135deg, #eceef3, #fbf7ef);
    font-size: 52px;
}

.home-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #374151;
    font-size: 28px;
}

.home-card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    padding: 16px 16px 18px;
}

.home-card-body strong {
    grid-column: 1 / -1;
    min-height: 42px;
    color: #141a27;
    font-size: 16px;
    line-height: 1.28;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-card-body small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #747b87;
    font-size: 12px;
}

.home-card-body b {
    color: #111827;
    font-size: 15px;
    text-align: right;
}

.home-ai-match {
    padding: 28px 0 24px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
}

.home-match-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0 24px;
}

.home-match-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 16px 18px;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    background: #fff;
}

.home-match-card span,
.home-match-card em {
    color: #7a808b;
    font-size: 12px;
    font-style: normal;
}

.home-match-card strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 14px;
}

.home-swap {
    display: grid;
    place-items: center;
    color: #111827;
    font-size: 22px;
}

.home-match-card em {
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 99px;
    color: var(--home-green);
    background: #ecfdf3;
    font-weight: 700;
}

.home-statistics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 28px;
    padding: 22px 54px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
}

.home-statistics div {
    display: grid;
    grid-template-columns: 52px auto;
    align-items: center;
    column-gap: 16px;
}

.stat-tile-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 24px;
}

.stat-tile-icon.yellow { color: #b77900; background: #fff4cc; }
.stat-tile-icon.green { color: #168957; background: #dcf7e8; }
.stat-tile-icon.blue { color: #1f66d1; background: #e7f0ff; }
.stat-tile-icon.purple { color: #6941c6; background: #f0e9ff; }

.home-statistics strong {
    color: #111827;
    font-size: 24px;
    line-height: 1.1;
}

.home-statistics small {
    color: #5f6675;
    font-size: 13px;
}

.home-empty-card {
    margin: 0 38px;
    padding: 24px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    color: #5f6675;
    background: #fff;
}

.home-page .site-footer,
.home-page .copyright {
    display: none;
}

@media (max-width: 1200px) {
    .home-page .site-header {
        gap: 22px;
        padding: 0 24px;
    }

    .home-page .main-nav {
        gap: 26px;
    }

    .home-page .post-btn {
        display: none;
    }

    .home-hero,
    .home-categories,
    .home-section,
    .home-statistics {
        width: min(100%, calc(100% - 48px));
    }

    .home-match-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .home-page .site-header {
        min-height: 76px;
        grid-template-columns: auto auto 1fr;
    }

    .menu-toggle {
        display: grid;
        order: 3;
        justify-self: end;
    }

    .home-page .main-nav {
        position: absolute;
        left: 24px;
        right: 24px;
        top: 76px;
        z-index: 20;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--home-line);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--home-card-shadow);
    }

    .home-page.nav-open .main-nav {
        display: flex;
    }

    .home-page .main-nav a {
        padding: 14px;
    }

    .home-page .header-actions {
        justify-self: end;
        gap: 10px;
    }

    .home-page .hide-small,
    .home-page .user-name {
        display: none;
    }

    .home-hero {
        min-height: 360px;
        padding: 44px 28px 30px;
    }

    .home-hero h1 {
        font-size: 44px;
    }

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

@media (max-width: 640px) {
    .home-page .site-header {
        width: 100%;
        padding: 0 16px;
        gap: 12px;
    }

    .home-page .brand,
    .home-page .brand-mark {
        font-size: 28px;
    }

    .home-page .round-icon {
        display: none;
    }

    .home-page .mini-avatar {
        width: 34px;
        height: 34px;
    }

    .home-hero,
    .home-categories,
    .home-section,
    .home-statistics {
        width: calc(100% - 32px);
    }

    .home-hero {
        min-height: auto;
        padding: 34px 20px 26px;
    }

    .home-hero h1 {
        font-size: 36px;
        line-height: 1.16;
    }

    .home-hero p {
        font-size: 15px;
    }

    .home-search {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 8px 10px 10px 18px;
    }

    .home-search button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .home-trust-points {
        gap: 12px;
        font-size: 13px;
    }

    .home-categories {
        padding: 20px 16px;
    }

    .home-category-card {
        flex-basis: 122px;
    }

    .home-section-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 0;
    }

    .home-listing-row {
        padding: 0 0 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .home-listing-card {
        flex-basis: 280px;
        scroll-snap-align: start;
    }

    .home-ai-match {
        padding: 22px 16px;
    }

    .home-match-grid {
        padding: 0;
    }

    .home-match-card {
        grid-template-columns: 1fr;
    }

    .home-swap {
        justify-content: start;
    }

    .home-statistics {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}