:root {
    --primary: #ff6b00;
    --primary-dark: #e66000;
    --bg: #f5f5f5;
    --card: #fff;
    --text: #333;
    --border: #e0e0e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }

.navbar {
    background: var(--primary);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand { font-size: 20px; font-weight: bold; }
.nav-links a { color: white; text-decoration: none; margin-left: 16px; font-size: 14px; }
.nav-links a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 20px auto; padding: 0 16px; }

.page { display: none; }
.page.active { display: block; }

.auth-box {
    max-width: 400px;
    margin: 60px auto;
    background: var(--card);
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.auth-box h2 { text-align: center; margin-bottom: 20px; }
.admin-login-tip { text-align: center; color: #999; font-size: 13px; margin-top: 12px; }
.agreement-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 4px 0;
}
.agreement-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    min-height: auto;
}
.agreement-checkbox a { color: var(--primary); text-decoration: none; }
.agreement-checkbox a:hover { text-decoration: underline; }
.auth-agreement-tip {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}
.tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab-btn { flex: 1; padding: 12px; border: none; background: none; cursor: pointer; font-size: 16px; color: #666; }
.tab-btn.active { color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: bold; }

input, select, textarea, button {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}
button {
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}
button:hover { background: var(--primary-dark); }
button.secondary { background: #666; }
button.secondary:hover { background: #444; }

.search-bar {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.search-bar input, .search-bar select { flex: 1; min-width: 140px; margin-bottom: 0; }
.search-bar button { width: auto; min-width: 80px; margin-bottom: 0; }
.search-bar .search-btn { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-bar .search-btn:hover { background: #e65c00; }
.search-input-row { display: flex; gap: 10px; width: 100%; }
.search-filters-row { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }

.detail-fields { background: #f9f9f9; padding: 16px; border-radius: 8px; margin: 16px 0; }
.detail-fields h4 { margin-bottom: 12px; }
.detail-fields input { margin-bottom: 10px; }

.announcement-bar {
    background: #fff8f0;
    border: 1px solid #ffd4b3;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
}
.announcement-bar .pinned { color: var(--primary); font-weight: bold; margin-right: 6px; }

.banner-carousel {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    aspect-ratio: 1819 / 960;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.banner-slides { display: flex; transition: transform 0.5s ease; height: 100%; }
.banner-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    background-size: cover;
    background-position: center;
}
.banner-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}
.banner-dot.active { background: white; }

.tag-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.tag-option {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.tag-option.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}
.product-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fff5eb;
    color: var(--primary);
    border: 1px solid #ffd4b3;
}
.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 3;
    margin: 0;
    padding: 0;
}
.favorite-btn.active { color: #ff4757; }
.reviews-section { margin-top: 24px; }
.review-item {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    font-size: 14px;
}
.review-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.rating { color: #ffb800; }

.profile-card {
    background: var(--card);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    max-width: 500px;
}
.avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.help-section {
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.help-section h3 { margin-bottom: 10px; color: var(--primary); }
.help-section p { color: #666; line-height: 1.6; }

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.product-card {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-4px); }
.product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: #eee;
}
.product-card .info { padding: 12px; }
.product-card .title { font-size: 14px; line-height: 1.4; height: 40px; overflow: hidden; margin-bottom: 8px; }
.product-card .price { color: var(--primary); font-size: 18px; font-weight: bold; }
.product-card .meta { font-size: 12px; color: #999; margin-top: 6px; }
.product-card .stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #bbb;
    margin-top: 6px;
}
.product-card { position: relative; }
.platform-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background: var(--card);
    padding: 24px;
    border-radius: 12px;
}
.detail-images img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}
.image-counter, .image-dots { display: none; }
.detail-info h1 { font-size: 24px; margin-bottom: 16px; }
.detail-info .price { font-size: 32px; color: var(--primary); font-weight: bold; margin-bottom: 6px; }
.detail-info .price-save { color: #ff6b6b; font-size: 14px; margin-bottom: 14px; }
.detail-info .attrs { margin-bottom: 20px; }
.detail-info .attrs div { margin-bottom: 8px; color: #666; }
.detail-info .description { line-height: 1.6; margin-bottom: 24px; }

.order-card, .my-product-card {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.order-card .header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.order-card .status { color: var(--primary); font-weight: bold; }
.order-actions { margin-top: 12px; }
.order-actions button { width: auto; margin-right: 8px; }
.order-product { display: flex; gap: 12px; margin: 12px 0; cursor: pointer; }
.order-product img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.order-title { font-weight: bold; margin-bottom: 4px; }
.order-sku { color: #666; font-size: 13px; margin-bottom: 4px; }
.order-price { color: var(--primary); font-weight: bold; }

.order-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.order-tabs button { width: auto; background: #eee; color: #333; }
.order-tabs button.active { background: var(--primary); color: white; }

.empty { text-align: center; padding: 60px 20px; color: #999; }
.empty::before {
    content: '📭';
    display: block;
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.empty-title { font-size: 15px; color: #666; margin-bottom: 6px; }
.empty-desc { font-size: 13px; color: #999; }

.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.modal-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
}
.modal-content h3 { margin-bottom: 16px; }
.modal-content p { margin-bottom: 12px; color: #666; }
.modal-content select { margin-bottom: 12px; }
.modal-content button { margin-bottom: 8px; }

.logistics-modal-content { max-width: 560px; }
.logistics-info { background: #f9f9f9; padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.logistics-info div { margin-bottom: 4px; font-size: 14px; }
.logistics-tracks { max-height: 320px; overflow-y: auto; }
.logistics-track-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.logistics-track-item .time { min-width: 90px; color: #999; font-size: 12px; }
.logistics-track-item .content { flex: 1; }
.logistics-track-item .location { color: #666; font-size: 12px; }
.logistics-empty { color: #999; text-align: center; padding: 20px; }
.order-card .logistics-line { font-size: 13px; color: #666; margin: 6px 0; }
.order-card .logistics-line button { padding: 4px 10px; font-size: 12px; margin: 0; width: auto; }

/* About Page */
.about-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 48px 24px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 24px;
}
.about-hero h1 { font-size: 28px; margin-bottom: 12px; }
.about-hero p { opacity: 0.9; margin-bottom: 8px; }
.about-hero .slogan { font-size: 18px; font-weight: bold; margin-top: 12px; }

.about-section {
    background: var(--card);
    padding: 28px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.about-section h2 { margin-bottom: 16px; color: var(--primary); }
.about-section p { line-height: 1.8; color: #555; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.feature-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
}
.feature-item h3 { margin-bottom: 8px; color: #333; }
.feature-item p { font-size: 14px; color: #666; }

.license-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.license-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.license-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.license-info .info-row span { color: #888; }
.license-info .info-row strong { color: #333; text-align: right; max-width: 60%; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.gallery-grid img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.2s;
}
.gallery-grid img:hover { transform: scale(1.02); }

.contact-section { text-align: center; }
.contact-section p { margin-bottom: 8px; }

/* Recycle Page */
.recycle-hero {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    padding: 40px 24px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 24px;
}
.recycle-hero h2 { font-size: 28px; margin-bottom: 10px; }
.recycle-hero p { opacity: 0.9; }

.recycle-form {
    background: var(--card);
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.question-item {
    margin-bottom: 16px;
}
.question-item label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #444;
}
.estimate-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: center;
}
.estimate-price {
    font-size: 24px;
    color: #0284c7;
    font-weight: bold;
    margin-bottom: 10px;
}
.estimate-price span { color: var(--primary); font-size: 32px; }

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

.inventory-actions {
    margin-bottom: 16px;
}
.inventory-actions button { width: auto; margin-right: 8px; }

/* Admin Dashboard */
.dashboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dashboard-tabs button { width: auto; background: #eee; color: #333; }
.dashboard-tabs button.active { background: var(--primary); color: white; }

.admin-tab { display: none; }
.admin-tab.active { display: block; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.stat-card {
    background: var(--card);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.stat-card h3 { font-size: 28px; color: var(--primary); margin-bottom: 8px; }
.stat-card p { color: #666; }

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.filter-bar select { width: auto; min-width: 140px; margin-bottom: 0; }
.filter-bar button { width: auto; margin-bottom: 0; }

/* Admin Qualifications */
.admin-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.admin-warning h3 { margin-bottom: 8px; }

.qual-actions {
    margin-bottom: 20px;
    text-align: right;
}
.qual-actions button { width: auto; display: inline-block; }

.qual-summary {
    background: var(--card);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.qual-summary h2 { margin-bottom: 8px; }
.qual-summary .warning-text { color: var(--primary); margin-top: 12px; }

.qual-category {
    background: var(--card);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.qual-category h3 { margin-bottom: 16px; color: #333; }
.qual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.qual-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.qual-card .qual-name {
    padding: 12px;
    font-weight: bold;
    background: #f9f9f9;
    font-size: 14px;
}
.qual-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    cursor: zoom-in;
}
.qual-card a {
    display: block;
    padding: 10px;
    text-align: center;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
}
.qual-card a:hover { background: #fff8f0; }
.badge-public, .badge-private {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.badge-public { background: #d4edda; color: #155724; }
.badge-private { background: #f8d7da; color: #721c24; }

.image-viewer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}
.image-viewer img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}
.viewer-close {
    position: absolute;
    top: 20px; right: 30px;
    color: white;
    font-size: 36px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .license-card { grid-template-columns: 1fr; }
    .license-info .info-row strong { max-width: 100%; text-align: left; margin-top: 4px; }
}
.detail-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; color: #666; font-size: 14px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.detail-actions button { width: auto; margin-bottom: 0; }
.detail-secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail-secondary-actions button { width: auto; margin-bottom: 0; }

.detail-section { background: var(--card); padding: 20px; border-radius: 12px; margin-top: 20px; }
.detail-section h4 { margin-bottom: 14px; font-size: 16px; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th, .detail-table td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
.detail-table th { width: 120px; color: #666; font-weight: normal; background: #f9f9f9; }
.package-list { display: flex; flex-wrap: wrap; gap: 8px; }
.package-list span { background: #f0f0f0; padding: 6px 12px; border-radius: 4px; font-size: 13px; }
.inspection-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.report-item { background: #f5f5f5; padding: 12px; border-radius: 8px; text-align: center; }
.report-item span { display: block; color: #666; font-size: 12px; margin-bottom: 4px; }
.report-item .report-value { color: var(--primary); font-size: 16px; font-weight: bold; }
.notice-list { padding-left: 20px; color: #666; line-height: 1.8; }
.notice-list li { margin-bottom: 6px; }

.sku-section { margin-bottom: 20px; }
.sku-section h4 { margin-bottom: 10px; }
.sku-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sku-btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    min-width: 100px;
}
.sku-btn:hover { border-color: var(--primary); }
.sku-btn.active { border-color: var(--primary); background: #fff5ed; }
.sku-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.sku-spec { font-weight: bold; margin-bottom: 4px; }
.sku-price { color: var(--primary); font-size: 14px; }
.sku-stock { color: #999; font-size: 12px; }

.sku-attr-group { margin-bottom: 14px; }
.sku-attr-name { font-weight: bold; margin-bottom: 8px; color: #333; }
.sku-attr-values { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-attr-btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
}
.sku-attr-btn:hover { border-color: var(--primary); }
.sku-attr-btn.active { border-color: var(--primary); background: #fff5ed; color: var(--primary); }

.selected-sku { margin-top: 10px; padding: 10px; background: #f9f9f9; border-radius: 6px; }
.selected-sku span { display: block; }
.sku-match-success { color: var(--primary); font-weight: bold; }
.sku-match-partial { color: #999; }

.seller-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-top: 20px;
}
.seller-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.seller-name { font-weight: bold; font-size: 16px; }
.seller-rating { color: #666; font-size: 14px; }

.related-section { margin-top: 24px; }
.related-section h3 { margin-bottom: 16px; }
.related-section .product-card { width: 220px; }

.site-footer {
    background: #2c2c2c;
    color: #bbb;
    padding: 40px 20px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    margin-top: 40px;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}
.footer-section h4 { color: #fff; margin-bottom: 12px; }
.footer-section a { color: #bbb; display: block; margin-bottom: 8px; text-decoration: none; }
.footer-section a:hover { color: var(--primary); }
.footer-bottom { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; color: #888; }
.footer-bottom .company-info { font-size: 13px; margin-top: 8px; color: #999; }
.footer-bottom .company-info a { color: #999; text-decoration: none; }

.detail-platform-info {
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    margin-top: 24px;
    color: #666;
    font-size: 13px;
    line-height: 1.8;
}
.detail-platform-info h4 {
    color: #333;
    margin-bottom: 12px;
    font-size: 15px;
}
.detail-platform-info a { color: var(--primary); text-decoration: none; }
.detail-platform-info a:hover { text-decoration: underline; }

.service-guarantee {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}
.service-guarantee span {
    background: #f5f5f5;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
}
.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.service-card {
    background: #f9f9f9;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
}
.service-card strong { display: block; color: var(--primary); margin-bottom: 6px; }
.service-card p { font-size: 13px; color: #666; margin: 0; }
.condition-desc { color: #666; line-height: 1.6; }

@media (max-width: 768px) {
    .license-card { grid-template-columns: 1fr; }
    .license-info .info-row strong { max-width: 100%; text-align: left; margin-top: 4px; }
    .detail-layout { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .related-section .product-card { width: 100%; }
}

/* ===== Detail Page Enhancements ===== */
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.service-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.service-badge {
    background: #fff5ed;
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #ffd4b3;
}
.quantity-section { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.quantity-section h4 { margin: 0; font-size: 14px; }
.quantity-selector { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.quantity-selector button {
    width: 36px; height: 36px; padding: 0; margin: 0;
    background: #f5f5f5; color: #333; border: none; cursor: pointer;
}
.quantity-selector button:disabled { color: #ccc; cursor: not-allowed; }
.quantity-selector input {
    width: 50px; height: 36px; padding: 0; margin: 0;
    text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd;
}
.quantity-selector.small button { width: 28px; height: 28px; }
.quantity-selector.small input { width: 40px; height: 28px; }
.stock-info { color: #999; font-size: 13px; }
.detail-secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail-secondary-actions button { width: auto; margin-bottom: 0; }
.btn-buy { background: var(--primary); min-width: 120px; }
.btn-cart { background: #ffede0; color: var(--primary); border: 1px solid var(--primary); min-width: 120px; }
.btn-cart:hover { background: #ffe0cc; }
.owner-tip, .login-tip { color: #999; font-size: 14px; padding: 10px 0; }
.enter-store { color: var(--primary); font-size: 13px; margin-left: 8px; }

/* ===== Q&A ===== */
.qa-section { background: var(--card); padding: 20px; border-radius: 12px; margin-top: 20px; }
.qa-section h3 { margin-bottom: 16px; }
.qa-item { border-bottom: 1px solid #eee; padding: 14px 0; }
.qa-item:last-child { border-bottom: none; }
.qa-q, .qa-a { display: flex; gap: 10px; line-height: 1.6; }
.qa-q { color: #333; margin-bottom: 8px; }
.qa-a { color: #666; }
.qa-a.pending { color: #999; }
.qa-label {
    min-width: 22px; height: 22px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; color: #fff;
}
.qa-q .qa-label { background: var(--primary); }
.qa-a .qa-label { background: #2ecc71; }
.qa-time { color: #999; font-size: 12px; margin-left: auto; }
.qa-form { display: flex; gap: 10px; margin-top: 16px; }
.qa-form input { flex: 1; margin-bottom: 0; }
.qa-form button { width: auto; margin-bottom: 0; }
.qa-answer-form { display: flex; gap: 8px; margin-top: 10px; }
.qa-answer-form input { flex: 1; margin-bottom: 0; }
.qa-answer-form button { width: auto; margin-bottom: 0; padding: 8px 14px; }

/* ===== Seller Store ===== */
.seller-store-header {
    display: flex; align-items: center; gap: 16px;
    background: var(--card); padding: 20px; border-radius: 12px; margin-bottom: 20px;
}

/* ===== Cart ===== */
.cart-item {
    display: flex; align-items: center; gap: 16px;
    background: var(--card); padding: 16px; border-radius: 12px; margin-bottom: 12px;
}
.cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.cart-item-info { flex: 1; }
.cart-item-info .title { font-weight: bold; margin-bottom: 6px; }
.cart-item-info .spec { color: #666; font-size: 13px; margin-bottom: 6px; }
.cart-item-info .price { color: var(--primary); font-weight: bold; margin-bottom: 8px; }
.cart-actions {
    display: flex; justify-content: flex-end; align-items: center; gap: 16px;
    background: var(--card); padding: 16px; border-radius: 12px; margin-top: 16px;
}
.cart-total { font-size: 16px; font-weight: bold; }
.cart-total span { color: var(--primary); font-size: 20px; }

/* ===== Order Modal ===== */
.order-modal-content { max-width: 520px; }
.order-modal-product {
    display: flex; gap: 12px; background: #f9f9f9; padding: 12px; border-radius: 8px; margin-bottom: 16px;
}
.order-modal-product img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; }
.order-modal-product .title { font-weight: bold; margin-bottom: 4px; }
.order-modal-product .spec { color: #666; font-size: 13px; margin-bottom: 4px; }
.order-modal-product .price { color: var(--primary); font-weight: bold; }
.address-select-row { display: flex; gap: 10px; }
.address-select-row select { flex: 1; margin-bottom: 0; }
.address-select-row button { width: auto; margin-bottom: 0; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; }
.payment-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.payment-method {
    flex: 1; min-width: 100px;
    border: 1px solid #ddd; border-radius: 8px; padding: 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; background: #fff;
}
.payment-method input { width: auto; margin-bottom: 0; }
.payment-method.active { border-color: var(--primary); background: #fff5ed; color: var(--primary); }
.order-summary { background: #f9f9f9; padding: 14px; border-radius: 8px; margin: 16px 0; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.summary-row.total { font-size: 16px; font-weight: bold; border-top: 1px solid #eee; padding-top: 10px; }
.summary-row.total span { color: var(--primary); }

/* ===== Contact & Share Modal ===== */
#contactSellerInfo p { margin-bottom: 8px; }
#contactSellerInfo .tip { color: #999; font-size: 13px; }

/* ===== Home Enhancements ===== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.quick-action {
    text-align: center;
    cursor: pointer;
    padding: 10px 4px;
    border-radius: 8px;
    transition: background 0.2s;
}
.quick-action:hover { background: #f5f5f5; }
.quick-action.recycle { background: #fff5ed; }
.quick-action.recycle:hover { background: #ffe8d6; }
.quick-action .icon { font-size: 28px; margin-bottom: 6px; }
.quick-action .icon.recycle-svg { color: var(--primary); }
.quick-action .icon.recycle-svg svg { width: 32px; height: 32px; display: block; margin: 0 auto; }
.quick-action .label { font-size: 13px; font-weight: bold; color: #333; }
.quick-action .sub { font-size: 11px; color: #999; margin-top: 2px; }

.hot-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 0 4px;
}
.hot-label { color: #999; font-size: 13px; }
.hot-tag {
    background: #fff;
    border: 1px solid #eee;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}
.hot-tag:hover { border-color: var(--primary); color: var(--primary); }
.search-history {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 0 4px;
}
.history-label { color: #999; font-size: 13px; }
.history-tag {
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.clear-history {
    background: none;
    color: #999;
    border: none;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    padding: 4px;
}

/* ===== Product Card Actions ===== */
.product-card { position: relative; }
.card-actions {
    position: absolute;
    bottom: 70px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
.product-card:hover .card-actions { opacity: 1; }
.card-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    color: #666;
}
.card-action-btn.recycle { color: #2ecc71; }
.card-action-btn.cart { color: var(--primary); }
.card-action-btn:hover { background: var(--primary); color: #fff; }

/* ===== Detail Page Recycle Button ===== */
.btn-recycle {
    background: #e8f8f0;
    color: #27ae60;
    border: 1px solid #27ae60;
    min-width: 120px;
}
.btn-recycle:hover { background: #d1f2e3; }

/* ===== Floating Buttons ===== */
.floating-buttons {
    position: fixed;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 90;
}
.float-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--card);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.float-btn.recycle { background: #27ae60; color: #fff; }
.float-btn.service { background: var(--primary); color: #fff; }
.float-btn.top { background: #666; color: #fff; }

/* ===== Notifications ===== */
.notification-item {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.notification-item.unread { border-left: 4px solid var(--primary); }
.notification-item.read { opacity: 0.8; }
.notif-title { font-weight: bold; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.notif-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4757; }
.notif-content { color: #666; font-size: 14px; margin-bottom: 8px; }
.notif-time { color: #999; font-size: 12px; margin-bottom: 10px; }
.notif-actions { display: flex; gap: 8px; }
.notif-actions button { width: auto; margin-bottom: 0; padding: 8px 14px; }

/* ===== Price Alerts ===== */
.alert-item, .bargain-item, .booking-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.alert-item img, .bargain-item img, .booking-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
.alert-info, .bargain-info, .booking-info { flex: 1; }
.alert-info .title, .bargain-info .title, .booking-info .title { font-weight: bold; margin-bottom: 6px; }
.alert-info .status { color: #999; font-size: 13px; margin-top: 6px; }
.bargain-info .message { color: #666; font-size: 13px; margin: 6px 0; }
.bargain-info .meta { color: #999; font-size: 12px; }
.bargain-actions { display: flex; gap: 8px; flex-direction: column; }
.bargain-actions button { width: auto; margin-bottom: 0; padding: 8px 14px; }

/* ===== Compare Bar ===== */
.compare-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 95;
}
.compare-bar button { width: auto; margin-bottom: 0; padding: 8px 16px; }

/* ===== Merchant / Shop ===== */
.shop-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shop-card-link {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.shop-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    flex-shrink: 0;
}
.shop-info { flex: 1; }
.shop-name { font-weight: bold; font-size: 16px; margin-bottom: 6px; }
.shop-desc { color: #666; font-size: 13px; }
.enter-store { color: var(--primary); font-size: 13px; margin-left: 8px; }
.merchant-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.merchant-actions button { width: auto; flex: 1; min-width: 120px; }
.application-status {
    background: #fff8f0;
    border: 1px solid #ffe0c0;
    padding: 16px;
    border-radius: 8px;
}
.application-status h4 { margin-bottom: 10px; color: var(--primary-dark); }
.application-status p { margin-bottom: 6px; font-size: 14px; }
.application-card {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.application-card .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
}
.application-card .status {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #eee;
}
.application-card .status.pending { background: #fff3cd; color: #856404; }
.application-card .status.approved { background: #d4edda; color: #155724; }
.application-card .status.rejected { background: #f8d7da; color: #721c24; }
.shop-header {
    background: var(--card);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.shop-header .shop-logo { width: 72px; height: 72px; font-size: 28px; }
.shop-header .shop-meta { color: #666; font-size: 14px; margin-top: 6px; }

/* ===== Profile Page ===== */
.profile-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 28px;
    border-radius: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.profile-user { display: flex; align-items: center; gap: 18px; }
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.4);
    background: #fff;
}
.profile-meta h2 { font-size: 22px; margin-bottom: 6px; }
.profile-meta p { opacity: 0.9; font-size: 14px; margin-bottom: 4px; }
.merchant-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-top: 4px;
}
.profile-actions { display: flex; gap: 10px; }
.profile-actions button { width: auto; margin-bottom: 0; background: rgba(255,255,255,0.9); color: var(--primary); }
.profile-actions button:hover { background: #fff; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--card);
    padding: 18px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-num { font-size: 24px; font-weight: bold; color: var(--primary); margin-bottom: 6px; }
.stat-label { font-size: 13px; color: #666; }

.section-title { font-size: 18px; margin: 24px 0 14px; font-weight: bold; }
.profile-menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.menu-item {
    background: var(--card);
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.15s, box-shadow 0.15s;
}
.menu-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.menu-icon { font-size: 26px; margin-bottom: 8px; }
.menu-text { font-size: 13px; color: #333; }

#profileEditModal .modal-content { max-width: 460px; }
#profileEditModal .avatar-section { margin-bottom: 16px; }
#profileEditModal .avatar-section img { width: 80px; height: 80px; }

.assets-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.asset-item {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.asset-value { display: block; font-size: 18px; font-weight: bold; color: var(--primary); margin-bottom: 4px; }
.asset-label { font-size: 12px; color: #666; }

.wallet-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 28px;
    border-radius: 16px;
    margin-bottom: 20px;
}
.wallet-balance { margin-bottom: 20px; }
.wallet-balance span { opacity: 0.9; font-size: 14px; }
.balance-num { font-size: 42px; font-weight: bold; margin-top: 6px; }
.wallet-actions { display: flex; gap: 12px; }
.wallet-actions button { width: auto; flex: 1; background: rgba(255,255,255,0.9); color: var(--primary); margin-bottom: 0; }
.wallet-section { background: var(--card); padding: 20px; border-radius: 12px; margin-bottom: 16px; }
.wallet-section h3 { margin-bottom: 14px; font-size: 16px; }
.wallet-assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.wallet-assets div { display: flex; flex-direction: column; gap: 6px; }
.wallet-assets span { color: #666; font-size: 13px; }
.wallet-assets strong { font-size: 18px; color: var(--primary); }

.success-box {
    background: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.success-box h3 { margin-bottom: 10px; }
.success-box p { margin-bottom: 6px; }

.security-list, .privacy-list, .agreement-list { background: var(--card); border-radius: 12px; overflow: hidden; }
.security-item, .privacy-item, .agreement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.security-item:last-child, .privacy-item:last-child, .agreement-item:last-child { border-bottom: none; }
.security-item p, .privacy-item p { color: #666; font-size: 13px; margin-top: 4px; }
.security-item button { width: auto; margin-bottom: 0; }
.agreement-item { cursor: pointer; color: #333; }
.agreement-item:hover { background: #f9f9f9; }

.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(22px); }

.invite-card {
    background: var(--card);
    padding: 28px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.invite-card p { color: #666; margin-bottom: 20px; }
.invite-code {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary);
    letter-spacing: 4px;
    margin-bottom: 16px;
    background: #fff8f0;
    padding: 14px;
    border-radius: 8px;
}
.invite-stats { margin-top: 20px; }
.invite-stats strong { display: block; font-size: 24px; color: var(--primary); }
.invite-stats span { font-size: 13px; color: #666; }

.review-card, .qa-card {
    background: var(--card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.review-product, .qa-product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #333;
}
.review-product img, .qa-product img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; }
.review-content .stars { color: #ff9f00; margin-bottom: 6px; }
.review-content p, .qa-content p { color: #333; line-height: 1.6; }
.review-time, .qa-time { color: #999; font-size: 12px; margin-top: 8px; }
.qa-content .answer { background: #f5f5f5; padding: 10px; border-radius: 8px; margin-top: 8px; }
.qa-content .answer.pending { color: #999; background: #fafafa; }

.about-content, .agreement-content {
    background: var(--card);
    padding: 24px;
    border-radius: 12px;
    line-height: 1.8;
}
.about-content h3, .agreement-content h3 { margin: 20px 0 10px; color: var(--primary); font-size: 16px; }
.about-content p, .agreement-content p { margin-bottom: 12px; }
.about-content ul, .agreement-content ul { margin-left: 20px; margin-bottom: 16px; }
.about-content li, .agreement-content li { margin-bottom: 6px; }

.about-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 18px 0;
}
.about-feature {
    background: #fafafa;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}
.about-feature-icon { font-size: 30px; margin-bottom: 8px; }
.about-feature-title { font-weight: 600; margin-bottom: 4px; color: var(--text); }
.about-feature-desc { font-size: 12px; color: #666; line-height: 1.5; }
.agreement-content .effective { color: #999; font-size: 13px; margin-bottom: 16px; }

.mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 98;
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    min-height: calc(44px + env(safe-area-inset-top));
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.mobile-header .back-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
}
.mobile-header .back-btn:active { background: rgba(255,255,255,0.22); transform: scale(0.92); }
.mobile-header h1 { font-size: 16px; font-weight: 600; flex: 1; text-align: center; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.96);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 99;
    box-shadow: 0 -2px 14px rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.tab-bar.hidden { display: none !important; }
.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0 8px;
    color: #999;
    text-decoration: none;
    font-size: 10px;
    transition: color 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.tab-item:active { transform: scale(0.92); }
.tab-item.active { color: var(--primary); font-weight: 600; }
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.tab-icon { font-size: 22px; margin-bottom: 2px; transition: transform 0.2s; }
.tab-item.active .tab-icon { transform: translateY(-2px); }
.tab-publish .tab-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #ff8a00 0%, #ff6b00 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 4px;
    box-shadow: 0 4px 12px rgba(255,107,0,0.4);
    border: 2px solid #fff;
}

.page {
    animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-slide-in {
    animation: slideInRight 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 13px;
    z-index: 97;
    transform: translateY(-100%);
    transition: transform 0.2s;
    pointer-events: none;
}
.ptr-indicator.visible { transform: translateY(0); }
.ptr-indicator .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #eee;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

/* New user banner */
.new-user-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #ff8a00 0%, #ff6b00 100%);
    color: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,107,0,0.25);
}
.new-user-text { display: flex; flex-direction: column; gap: 4px; }
.new-user-text strong { font-size: 16px; }
.new-user-text span { font-size: 13px; opacity: 0.95; }
.new-user-btn {
    background: #fff;
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* Platform picks */
.platform-picks { margin: 16px 0; }
.pick-tag {
    display: inline-block;
    background: #fff0e6;
    color: var(--primary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.picks-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
}
.pick-card {
    flex: 0 0 150px;
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.15s;
    position: relative;
}
.pick-card:active { transform: scale(0.97); }
.pick-card img { width: 100%; height: 110px; object-fit: cover; }
.pick-card .pick-info { padding: 10px; }
.pick-card .pick-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-card .pick-price { color: var(--primary); font-weight: 700; font-size: 15px; margin-top: 6px; }
.pick-card .pick-badge {
    position: absolute;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Category Navigation */
.category-nav { margin: 16px 0; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.category-card {
    background: var(--card);
    border-radius: 12px;
    padding: 14px 6px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.category-card:active { transform: scale(0.96); }
.category-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.cat-icon { font-size: 26px; }
.category-card span:last-child { font-size: 13px; color: var(--text); }

.section-more {
    float: right;
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
}

/* Recycle / Consignment Process Flow */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
    border: 1px solid #ffe4cc;
    border-radius: 14px;
    padding: 18px 14px;
    margin: 16px 0 24px;
    overflow-x: auto;
    gap: 6px;
}
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 58px;
}
.process-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
}
.process-label {
    font-size: 12px;
    color: #444;
    white-space: nowrap;
}
.process-arrow {
    color: #ffb380;
    font-size: 16px;
    font-weight: 700;
}

/* Trust / Service Guarantee */
.trust-section { margin: 32px 0; }
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.trust-item {
    background: var(--card);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.15s;
}
.trust-item:hover { transform: translateY(-4px); }
.trust-icon { font-size: 32px; margin-bottom: 10px; }
.trust-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.trust-desc { font-size: 13px; color: #666; line-height: 1.5; }

/* Loading skeletons */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 6px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    background: var(--card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.skeleton-img { width: 100%; height: 160px; }
.skeleton-text { height: 14px; margin: 10px; }
.skeleton-text.short { width: 60%; }
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.skeleton-list { display: flex; flex-direction: column; gap: 12px; }
.skeleton-list-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--card);
    border-radius: 10px;
}

/* Toast notifications */
#toastContainer {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: rgba(0,0,0,0.82);
    color: #fff;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 14px;
    max-width: 86vw;
    text-align: center;
    animation: toastIn 0.25s ease, toastOut 0.25s ease 2.75s forwards;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(-12px); }
}

/* Touch feedback */
.touch-feedback {
    transition: transform 0.1s, opacity 0.1s;
}
.touch-feedback:active {
    transform: scale(0.97);
    opacity: 0.85;
}
button, .tab-item, .product-card, .quick-action, .menu-item, .stat-card, .asset-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Pull-up loader */
.pull-up-loader {
    text-align: center;
    padding: 18px;
    color: #999;
    font-size: 13px;
}
.pull-up-loader .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #eee;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    body { font-size: 15px; -webkit-overflow-scrolling: touch; }
    .navbar { display: none; }
    .mobile-header { display: flex; }
    .container { padding: 12px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); margin: 0; max-width: 100%; }
    .tab-bar { display: flex; }
    .floating-buttons { bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; }

    .dashboard-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }
    .dashboard-tabs button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 13px;
    }

    .search-bar {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        border-radius: 14px;
        position: sticky;
        top: calc(46px + env(safe-area-inset-top));
        z-index: 90;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(8px);
    }
    .search-input-row {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .search-bar input {
        flex: 1;
        min-width: auto;
        border-radius: 20px;
        padding: 10px 16px;
        background: #f5f5f5;
        border: none;
    }
    .search-bar .search-btn {
        width: auto;
        min-width: 64px;
        border-radius: 20px;
        padding: 10px 16px;
    }
    .search-filters-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .search-bar select {
        flex: 0 0 auto;
        min-width: 90px;
        width: auto;
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 16px;
        background: #f5f5f5;
        border: none;
    }
    .search-bar .filter-btn {
        width: auto;
        min-width: auto;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 16px;
    }

    input, select, textarea {
        font-size: 16px;
        padding: 12px;
        min-height: 44px;
    }
    button { min-height: 44px; }
    form { gap: 12px; }
    form button[type="submit"] {
        width: 100%;
        padding: 14px;
    }
    .auth-box { margin: 12px; padding: 24px 20px; border-radius: 16px; }
    .auth-box h2 { font-size: 22px; margin-bottom: 24px; }
    .tabs .tab-btn { padding: 14px; font-size: 15px; }
    .agreement-checkbox { font-size: 12px; }

    .products-grid, #productsGrid, #merchantProductsGrid, #shopProducts {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .product-card {
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .product-card:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
    .product-card img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    .product-card .info { padding: 10px; }
    .product-card .title { font-size: 13px; -webkit-line-clamp: 2; line-height: 1.4; height: auto; display: -webkit-box; -webkit-box-orient: vertical; }
    .product-card .price { font-size: 15px; margin-top: 6px; display: flex; align-items: baseline; gap: 6px; }
    .product-card .original-price { font-size: 11px; color: #bbb; text-decoration: line-through; font-weight: normal; }
    .product-card .meta { font-size: 10px; }
    .product-card .stats-row { font-size: 10px; }
    .product-card .platform-badge { font-size: 9px; padding: 2px 5px; top: 6px; left: 6px; }
    .product-card .favorite-btn {
        width: 36px;
        height: 36px;
        top: 6px;
        right: 6px;
        font-size: 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .product-card .product-tags { margin-top: 6px; }
    .product-card .product-tag { font-size: 9px; padding: 1px 4px; }
    .card-actions { display: none; }

    .filter-bar { flex-wrap: wrap; gap: 8px; }
    .filter-bar input, .filter-bar select { flex: 1; min-width: 100px; font-size: 14px; padding: 10px; }

    .detail-layout { flex-direction: column; }
    .detail-images {
        flex: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 0 12px;
        margin: 0 -12px 12px;
    }
    .detail-images img {
        height: auto;
        min-height: 260px;
        max-height: 360px;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        border-radius: 8px;
        object-fit: contain;
        background: #f8f8f8;
    }
    .detail-images {
        position: relative;
        margin: 0 -12px 12px;
        border-radius: 0;
    }
    .detail-images img {
        border-radius: 0;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }
    .image-counter {
        display: block;
        position: absolute;
        bottom: 16px;
        right: 16px;
        background: rgba(0,0,0,0.5);
        color: #fff;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
    }
    .image-dots {
        display: flex;
        position: absolute;
        bottom: 16px;
        left: 16px;
        gap: 6px;
    }
    .image-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
    }
    .image-dot.active { background: #fff; }

    .detail-info { padding: 16px; }
    .detail-info h1 { font-size: 18px; }
    .price-row .price { font-size: 26px; }
    .detail-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px 12px;
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        z-index: 90;
        margin: 0;
    }
    .detail-actions .btn-buy {
        flex: 1.4;
        min-width: 100px;
        padding: 12px 8px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
    }
    .detail-actions .btn-cart {
        flex: 1;
        min-width: 80px;
        padding: 12px 8px;
        font-size: 13px;
        border-radius: 10px;
    }
    .detail-actions .detail-action-icon {
        width: 44px;
        height: 44px;
        padding: 0;
        background: #f5f5f5;
        border: none;
        border-radius: 10px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .detail-actions .detail-action-icon.favorite-active { color: #ff4757; }
    .detail-secondary-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 12px -4px 0;
    }
    .detail-secondary-actions button {
        flex: 1 1 calc(50% - 8px);
        min-width: auto;
        margin-bottom: 0;
        padding: 10px 8px;
        font-size: 12px;
        border-radius: 8px;
        background: #f5f5f5;
        color: #666;
        border: none;
    }
    .quantity-section { display: flex; align-items: center; gap: 12px; }
    .sku-list { gap: 8px; }
    .sku-btn { padding: 10px 12px; min-height: 44px; flex: 1 1 calc(50% - 8px); min-width: auto; }
    #detailPage { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

    .service-badges { gap: 6px; margin-bottom: 12px; }
    .service-badge { font-size: 11px; padding: 3px 8px; }
    .detail-meta { font-size: 12px; gap: 6px 12px; }
    .detail-info .description { padding: 14px; background: #fafafa; border-radius: 10px; margin: 0 -4px 16px; }
    .detail-info .description h4 { font-size: 14px; margin-bottom: 8px; }
    .price-row .price { font-size: 24px; }
    .price-save { font-size: 12px; }
    .owner-tip, .login-tip { width: 100%; padding: 12px; background: #f5f5f5; border-radius: 10px; }

    .profile-hero {
        border-radius: 16px;
        padding: 20px;
        background: linear-gradient(135deg, #ff8a00 0%, #ff6b00 100%);
        color: #fff;
        margin-bottom: 16px;
    }
    .profile-user { gap: 14px; }
    .profile-avatar { width: 64px; height: 64px; border: 2px solid rgba(255,255,255,0.4); }
    .profile-meta h2 { font-size: 18px; color: #fff; }
    .profile-meta p { color: rgba(255,255,255,0.85); }
    .profile-actions button {
        background: rgba(255,255,255,0.2);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.3);
    }
    .assets-bar {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        background: var(--card);
        border-radius: 12px;
        padding: 12px 8px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .asset-item { padding: 8px 4px; }
    .asset-value { font-size: 15px; color: var(--primary); }
    .asset-label { font-size: 11px; }
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        background: var(--card);
        border-radius: 12px;
        padding: 12px 8px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .stat-card { padding: 8px 4px; border-radius: 8px; }
    .stat-card:active { background: #f5f5f5; }
    .stat-num { font-size: 17px; }
    .stat-label { font-size: 11px; }
    .profile-menu {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        background: var(--card);
        border-radius: 12px;
        padding: 12px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .menu-item {
        padding: 12px 4px;
        border-radius: 10px;
        transition: background 0.15s;
    }
    .menu-item:active { background: #f5f5f5; transform: scale(0.97); }
    .menu-icon { font-size: 22px; margin-bottom: 4px; }
    .menu-text { font-size: 11px; }

    .auth-box { margin: 20px 12px; padding: 24px; }
    .tabs .tab-btn { padding: 14px; }

    .quick-actions { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .quick-action { padding: 10px 4px; border-radius: 10px; }
    .quick-action .icon { font-size: 24px; }
    .quick-action .label { font-size: 12px; }
    .quick-action .sub { font-size: 10px; }

    .order-card { padding: 12px; }
    .order-product img { width: 60px; height: 60px; }

    .modal { align-items: flex-end; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        animation: slideUp 0.25s ease;
    }
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 16px;
    }
    .modal-content h3 { font-size: 18px; text-align: center; margin-bottom: 20px; }
    .modal-content input, .modal-content select, .modal-content textarea { padding: 12px; }
    .modal-content button { padding: 12px; min-height: 44px; border-radius: 10px; }
    .modal-body { padding: 16px; }

    .floating-buttons { bottom: calc(78px + env(safe-area-inset-bottom)); right: 12px; gap: 8px; }
    .float-btn { width: 40px; height: 40px; font-size: 18px; }

    .banner-carousel { aspect-ratio: 16 / 9; border-radius: 12px; margin: 0 -12px; width: calc(100% + 24px); }
    .banner-slides { border-radius: 0; }
    .banner-slide { font-size: 16px; }
    .banner-dots { bottom: 8px; }
    .banner-dots .dot { width: 6px; height: 6px; margin: 0 3px; }

    .wallet-card { padding: 20px; }
    .balance-num { font-size: 32px; }
    .wallet-assets { grid-template-columns: repeat(3, 1fr); }

    .review-product img, .qa-product img { width: 44px; height: 44px; }

    .shop-card-link { padding: 14px; gap: 12px; margin: 16px 0; }
    .shop-logo { width: 48px; height: 48px; font-size: 18px; }
    .shop-name { font-size: 15px; }
    .shop-desc { font-size: 12px; }

    .shop-header { flex-direction: column; text-align: center; padding: 20px; gap: 14px; }
    .shop-header .shop-logo { width: 64px; height: 64px; font-size: 26px; }
    .shop-header .shop-meta { font-size: 13px; }

    .merchant-actions { gap: 8px; }
    .merchant-actions button { flex: 1 1 calc(50% - 8px); min-width: auto; padding: 12px 8px; font-size: 13px; }

    .application-card { padding: 14px; border-radius: 10px; }
    .application-card .header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .application-card .status { font-size: 12px; padding: 3px 8px; }
    .application-status { padding: 14px; }

    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .trust-item { padding: 14px 10px; }
    .trust-icon { font-size: 26px; }
    .trust-title { font-size: 13px; }
    .trust-desc { font-size: 12px; }

    .category-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .category-card { padding: 10px 4px; border-radius: 10px; }
    .cat-icon { font-size: 22px; }
    .category-card span:last-child { font-size: 11px; }

    .new-user-banner { padding: 12px 14px; margin: 10px 0; border-radius: 10px; }
    .new-user-text strong { font-size: 15px; }
    .new-user-text span { font-size: 12px; }

    .pick-card { flex: 0 0 130px; }
    .pick-card img { height: 96px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .section-title { font-size: 15px; margin: 16px 0 10px; }
    .section-title .section-more { font-size: 12px; }

    .trust-section { margin: 20px 0; }
    .trust-grid { gap: 8px; }
    .trust-item { padding: 12px 8px; border-radius: 10px; }
    .trust-icon { font-size: 22px; margin-bottom: 6px; }
    .trust-title { font-size: 12px; }
    .trust-desc { font-size: 10px; }

    .process-flow { padding: 14px 10px; margin: 12px 0 18px; }
    .process-num { width: 28px; height: 28px; font-size: 12px; }
    .process-label { font-size: 10px; }
    .process-arrow { font-size: 12px; }

.site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .footer-content { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-section h4 { font-size: 14px; }
    .footer-section a, .footer-section p { font-size: 12px; }

    .about-content { padding: 16px; }
    .about-content ul { margin-left: 16px; }

    .section-title { font-size: 16px; margin: 18px 0 10px; }
}

@media (max-width: 380px) {
    .products-grid, #productsGrid, #merchantProductsGrid, #shopProducts {
        grid-template-columns: 1fr !important;
    }
    .profile-menu { grid-template-columns: repeat(3, 1fr); }
}

@supports (-webkit-touch-callout: none) {
    .container { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ===== Admin Product Management ===== */
.admin-product-card {
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.admin-product-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.admin-product-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f0f0f0;
}
.admin-product-info {
    flex: 1;
    min-width: 0;
}
.admin-product-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    word-break: break-all;
}
.admin-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
    color: #666;
}
.admin-product-meta del { color: #999; }
.admin-product-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.admin-product-actions button {
    padding: 6px 14px;
    font-size: 13px;
}
.admin-product-actions .btn-edit {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border: none;
}
.status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.status-active { background: #e6f7ed; color: #1a7f4e; }
.status-inactive { background: #fff3e0; color: #b76c00; }
.status-sold { background: #e3f2fd; color: #1565c0; }
.status-deleted { background: #ffebee; color: #c62828; }

.admin-product-edit-modal {
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
}
.admin-product-edit-modal label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    color: #555;
}
.admin-product-edit-modal input,
.admin-product-edit-modal select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}
.admin-edit-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.admin-edit-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}
.admin-edit-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-edit-image-item .delete-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.admin-edit-image-item .cover-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding: 2px 0;
}
.admin-image-upload {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}
.admin-image-upload input[type="file"] {
    flex: 1;
    padding: 8px;
    border: 1px dashed #ccc;
    border-radius: 8px;
}
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.modal-actions button {
    flex: 1;
}

@media (max-width: 768px) {
    .admin-product-main { gap: 12px; }
    .admin-product-thumb { width: 72px; height: 72px; }
    .admin-product-title { font-size: 14px; }
    .admin-product-meta { font-size: 12px; gap: 6px 10px; }
    .admin-product-actions {
        gap: 8px;
        margin-top: 12px;
    }
    .admin-product-actions button {
        padding: 8px 14px;
        font-size: 13px;
        min-height: 36px;
    }
    .admin-product-edit-modal {
        width: 96%;
        max-height: 88vh;
        padding: 16px;
    }
    .admin-product-edit-modal label { margin-top: 10px; }
    .admin-product-edit-modal input,
    .admin-product-edit-modal select { padding: 10px; }
}