.hero { position: relative; overflow: hidden; padding: 4.5rem 0 3.2rem; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 26%), radial-gradient(circle at 8% 35%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 28%), linear-gradient(180deg, var(--surface), var(--bg)); }
.hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; bottom: -280px; border: 70px solid color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 50%; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 3rem; align-items: center; }
.hero-copy h1 { max-width: 13ch; margin-top: .6rem; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .99; letter-spacing: -.045em; }
.hero-copy h1 span { color: var(--primary); }
.hero-copy > p { max-width: 60ch; margin-top: 1.1rem; color: var(--text-soft); font-size: 1.02rem; }
.hero-actions { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin-top: 1.45rem; color: var(--text-soft); font-size: .8rem; }
.hero-trust span::before { content: "✓"; color: var(--success); font-weight: 900; margin-right: .35rem; }
.hero-visual { position: relative; min-height: 405px; }
.hero-phone { position: relative; z-index: 2; width: min(100%, 330px); margin-inline: auto; padding: .65rem; background: #10221d; border: 1px solid #36574d; border-radius: 34px; box-shadow: var(--shadow-lg); transform: rotate(2deg); }
.hero-phone__screen { overflow: hidden; background: var(--bg); border-radius: 26px; }
.hero-phone__top { display: flex; align-items: center; justify-content: space-between; padding: .75rem; background: var(--surface); }
.hero-phone__logo { display: flex; align-items: center; gap: .45rem; font-weight: 900; font-size: .8rem; }
.hero-phone__content { padding: .7rem; }
.mini-offer { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.mini-offer img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mini-offer__body { padding: .75rem; }
.mini-offer__body h3 { font-size: .9rem; }
.mini-offer__body strong { display: block; margin-top: .35rem; color: var(--primary); }
.mini-counter { margin-top: .55rem; padding: .65rem; background: var(--surface-warm); border-radius: 13px; font-size: .72rem; }
.hero-float { position: absolute; z-index: 3; padding: .8rem .95rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); font-size: .76rem; font-weight: 800; }
.hero-float--one { left: 0; top: 70px; transform: rotate(-4deg); }
.hero-float--two { right: 0; bottom: 70px; transform: rotate(4deg); }

.home-search-wrap { position: relative; z-index: 5; margin-top: -1.5rem; }
.category-section { padding: 2.1rem 0 .5rem; }
.category-card-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.category-card { display: grid; gap: .55rem; min-height: 115px; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: .18s ease; }
.category-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.category-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-soft); font-size: 1.25rem; }
.category-card strong { font-size: .86rem; }
.category-card small { color: var(--text-soft); font-size: .72rem; }

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.result-count { color: var(--text-soft); font-size: .86rem; }
.catalog-controls { display: flex; align-items: center; gap: .55rem; }
.catalog-controls select { min-height: 40px; padding: .45rem 2rem .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); }

.how-it-works { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.step-card { position: relative; padding: 1.3rem; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); }
.step-card__number { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: .9rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; }
.step-card h3 { font-size: 1rem; }
.step-card p { margin-top: .4rem; color: var(--text-soft); font-size: .85rem; }

.product-detail { padding: 2rem 0 4rem; }
.breadcrumb { display: flex; align-items: center; gap: .45rem; margin-bottom: 1.2rem; color: var(--text-soft); font-size: .8rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 1.25rem; align-items: start; }
.gallery-card { overflow: hidden; }
.gallery-main { position: relative; aspect-ratio: 16/11; background: var(--surface-soft); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; padding: .7rem; }
.gallery-thumb { overflow: hidden; aspect-ratio: 4/3; border: 2px solid transparent; border-radius: 10px; background: var(--surface-soft); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--primary); }
.detail-card { padding: 1.3rem; position: sticky; top: calc(var(--header-height) + 1rem); }
.detail-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.detail-card h1 { margin-top: .65rem; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.12; }
.detail-price { margin-top: 1rem; color: var(--primary); font-size: 2rem; font-weight: 950; line-height: 1; }
.detail-price small { font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.wholesale-box { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: .8rem; padding: .8rem; background: var(--surface-warm); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius-sm); font-size: .82rem; }
.detail-info-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin-top: 1rem; }
.detail-info { padding: .75rem; border-radius: var(--radius-sm); background: var(--bg); }
.detail-info small { display: block; color: var(--text-soft); font-size: .7rem; }
.detail-info strong { font-size: .84rem; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.secondary-actions { display: flex; gap: .55rem; margin-top: .65rem; }
.secondary-actions .button { flex: 1; }
.seller-box { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.seller-box__content { min-width: 0; flex: 1; }
.seller-box__content strong { display: block; }
.seller-box__content small { color: var(--text-soft); }

.detail-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.2rem; margin-top: 1.2rem; align-items: start; }
.content-card { padding: 1.25rem; }
.content-card + .content-card { margin-top: 1rem; }
.content-card h2 { font-size: 1.2rem; }
.content-card p { margin-top: .7rem; color: var(--text-soft); }
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.spec-item { display: flex; justify-content: space-between; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.spec-item span { color: var(--text-soft); }
.counteroffer-list { display: grid; gap: .8rem; margin-top: 1rem; }
.counteroffer-card { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.counteroffer-card.is-best { border-color: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent); }
.counteroffer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.counteroffer-seller { display: flex; gap: .65rem; align-items: center; }
.counteroffer-price { text-align: right; }
.counteroffer-price strong { color: var(--primary); font-size: 1.2rem; }
.counteroffer-price small { display: block; color: var(--success); font-size: .7rem; }
.counteroffer-card p { margin-top: .65rem; color: var(--text-soft); font-size: .84rem; }
.counteroffer-meta { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin-top: .75rem; color: var(--text-soft); font-size: .76rem; }
.counteroffer-footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.safety-card { padding: 1rem; background: var(--surface-warm); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: var(--radius-md); }
.safety-card h3 { font-size: .95rem; }
.safety-card ul { margin-top: .65rem; display: grid; gap: .5rem; color: var(--text-soft); font-size: .8rem; }
.safety-card li::before { content: "•"; color: var(--accent-dark); margin-right: .45rem; }

.page-hero { padding: 2.4rem 0 1.4rem; background: linear-gradient(180deg, var(--surface), transparent); border-bottom: 1px solid var(--border); }
.page-hero h1 { margin-top: .35rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.page-hero p { max-width: 65ch; margin-top: .5rem; color: var(--text-soft); }

.publish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.publish-aside { position: sticky; top: calc(var(--header-height) + 1rem); display: grid; gap: 1rem; }
.publish-tip { padding: 1rem; }
.publish-tip h3 { font-size: .95rem; }
.publish-tip ul { display: grid; gap: .5rem; margin-top: .7rem; color: var(--text-soft); font-size: .8rem; }
.publish-tip li::before { content: "✓"; color: var(--success); margin-right: .45rem; font-weight: 900; }
.image-upload { display: grid; place-items: center; min-height: 170px; padding: 1rem; border: 2px dashed var(--border); border-radius: var(--radius-md); background: var(--bg); text-align: center; cursor: pointer; }
.image-upload:hover { border-color: var(--primary); background: var(--primary-soft); }
.image-upload strong { display: block; margin-top: .4rem; }
.image-upload small { color: var(--text-soft); }
.image-preview { width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radius-md); }
.progress-bar { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-soft); }
.progress-bar span { display: block; height: 100%; width: 25%; background: var(--primary); border-radius: inherit; transition: width .2s ease; }

.profile-header-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem; }
.profile-header-card h1 { font-size: 1.4rem; }
.profile-header-card p { color: var(--text-soft); font-size: .85rem; }
.dashboard-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 1rem; align-items: start; }
.dashboard-sidebar { padding: .65rem; position: sticky; top: calc(var(--header-height) + 1rem); }
.dashboard-sidebar button, .dashboard-sidebar a { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .75rem .8rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font-weight: 750; text-align: left; }
.dashboard-sidebar button:hover, .dashboard-sidebar a:hover, .dashboard-sidebar .is-active { color: var(--primary); background: var(--primary-soft); }
.dashboard-content { min-width: 0; }
.dashboard-card { padding: 1.15rem; }
.dashboard-card + .dashboard-card { margin-top: 1rem; }
.simple-table { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .82rem; }
.simple-table th, .simple-table td { padding: .75rem .6rem; text-align: left; border-bottom: 1px solid var(--border); }
.simple-table th { color: var(--text-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.table-product { display: flex; align-items: center; gap: .6rem; }
.table-product img { width: 50px; height: 42px; object-fit: cover; border-radius: 8px; }
.status { display: inline-flex; padding: .28rem .5rem; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 850; }
.status--active { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }

.auth-layout { display: grid; gap: 1rem; }
.auth-demo-box { padding: .8rem; background: var(--surface-warm); border-radius: var(--radius-sm); color: var(--text-soft); font-size: .8rem; }
.demo-account-button { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; }
.demo-account-button:hover { border-color: var(--primary); }

.compare-strip { position: fixed; left: 50%; bottom: 1rem; z-index: 90; transform: translateX(-50%); width: min(calc(100% - 2rem), 760px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }