:root {
  --red: #dd7d00; --pink: #e91e63; --rose: #f06292; --indigo: #5c6bc0;
  --gold: #f39c12; --green: #2ecc71; --purple: #9b59b6; --dark: #2c3e50;
  --gray: #7f8c8d; --light: #ecf0f1; --white: #fff;
  --shadow: 0 2px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius: 12px; --radius-sm: 8px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  color:#333; background:#f8f9fa; line-height:1.6; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }

/* Header */
.header { background:var(--white); border-bottom:1px solid #eee; position:sticky; top:0; z-index:100; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.header-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-size:22px; font-weight:700; color:var(--red); display:flex; align-items:center; gap:8px; }
.nav { display:flex; gap:4px; align-items:center; }
.nav a { padding:10px 18px; border-radius:var(--radius-sm); font-size:14px; color:#555; transition:all .25s; font-weight:500; cursor:pointer; position:relative; }
.nav a::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--red); border-radius:2px; transition:width .25s; }
.nav a:hover { background:#fff5f5; color:var(--red); }
.nav a.active { background:#fff5f5; color:var(--red); font-weight:600; }
.nav a.active::after { width:20px; }
.header-actions { display:flex; gap:8px; align-items:center; }
.header-inner { position:relative; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; transition:.3s; border:none; }
.btn-primary { background:var(--red); color:var(--white); }
.btn-primary:hover { background:#b36200; transform:translateY(-1px); box-shadow:0 4px 12px rgba(221,125,0,.3); }
.btn-outline { background:transparent; border:2px solid var(--red); color:var(--red); }
.btn-outline:hover { background:var(--red); color:var(--white); }
.btn-lg { padding:14px 32px; font-size:16px; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-gray { background:#95a5a6; color:#fff; }
.btn-red { background:var(--red); color:#fff; }
.btn-green { background:#27ae60; color:#fff; }

/* Page system */
.page { display:none; animation:fadeIn .4s ease; }
.page.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Hero */
.hero { position:relative; background:linear-gradient(135deg,#fff5f5,#ffeaa7,#fff5f5); padding:80px 24px; text-align:center; overflow:hidden; }
.hero h1 { font-size:48px; font-weight:800; background:linear-gradient(135deg,#dd7d00,#f39c12); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px; position:relative; z-index:2; }
.hero p { font-size:18px; color:#666; margin-bottom:32px; position:relative; z-index:2; }
.hero .actions { position:relative; z-index:2; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.deco { position:absolute; font-size:48px; opacity:.25; pointer-events:none; animation:float 6s ease-in-out infinite; }
.deco:nth-child(1){ top:10%; left:8%; animation-delay:0s; }
.deco:nth-child(2){ top:20%; right:10%; animation-delay:1.5s; }
.deco:nth-child(3){ bottom:15%; left:12%; animation-delay:3s; }
.deco:nth-child(4){ bottom:25%; right:8%; animation-delay:4.5s; }
.deco:nth-child(5){ top:40%; left:5%; animation-delay:2s; font-size:32px; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-15px) rotate(10deg); } }
.hero::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:60px; height:3px; background:linear-gradient(90deg,transparent,var(--red),transparent); border-radius:2px; z-index:2; }

/* Section */
.section { max-width:1280px; margin:0 auto; padding:60px 24px; }
.sec-title { text-align:center; margin-bottom:40px; }
.sec-title h2 { font-size:32px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.sec-title p { font-size:15px; color:#999; }

/* Category Grid */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.cat-card { background:var(--white); border-radius:var(--radius); padding:28px 20px; text-align:center; cursor:pointer; transition:.3s; border:2px solid transparent; }
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cat-icon { font-size:56px; margin-bottom:16px; }
.cat-card h3 { font-size:17px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.cat-card .desc { font-size:13px; color:#999; }
.cat-tag { display:inline-block; margin-top:8px; padding:4px 12px; border-radius:20px; background:#f5f5f5; font-size:12px; color:#888; }

/* Product Grid */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.prod-card { background:var(--white); border-radius:var(--radius); overflow:hidden; transition:.3s; border:1px solid #eee; cursor:pointer; }
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.prod-img { position:relative; height:280px; background:linear-gradient(135deg,#f5f5f5,#eee); display:flex; align-items:center; justify-content:center; font-size:80px; }
.prod-badge { position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:4px; font-size:12px; font-weight:500; color:#fff; }
.badge-custom { background:#8e44ad; }
.prod-info { padding:16px; }
.prod-info .cattag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; margin-bottom:8px; }
.prod-info h3 { font-size:16px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.prod-info .pdesc { font-size:13px; color:#999; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-price { display:flex; align-items:baseline; gap:8px; }
.prod-price .cur { font-size:22px; font-weight:700; color:var(--red); }
.prod-price .orig { font-size:14px; color:#bbb; text-decoration:line-through; }
.prod-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.prod-tags span { padding:2px 8px; border-radius:4px; font-size:11px; background:#f0f0f0; color:#888; }

/* Features */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; background:var(--white); border-radius:var(--radius); padding:48px; box-shadow:var(--shadow); }
.feat-item { text-align:center; padding:20px; }
.feat-icon { font-size:40px; margin-bottom:12px; }
.feat-item h3 { font-size:16px; font-weight:600; margin-bottom:6px; }
.feat-item p { font-size:13px; color:#999; }

/* Detail Page */
.detail-wrap { max-width:900px; margin:0 auto; padding:48px 24px; }
.detail-main-img { width:100%; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg,#f5f5f5,#eee); display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.detail-main-img img, .detail-main-img video { width:100%; max-height:560px; object-fit:contain; display:block; }
.detail-header h1 { font-size:28px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.detail-header .catlink { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:4px; font-size:13px; margin-bottom:16px; }
.price-box { background:#fff5f5; padding:20px; border-radius:var(--radius-sm); margin-bottom:20px; }
.price-box .cur { font-size:36px; font-weight:700; color:var(--red); }
.detail-header .dd { font-size:15px; color:#555; line-height:1.8; margin-bottom:20px; }

/* Detail Images */
.detail-gallery-title { font-size:20px; font-weight:700; color:var(--dark); margin:28px 0 16px; padding-top:24px; border-top:1px solid #eee; }
.detail-imgs { display:flex; flex-direction:column; gap:16px; }
.detail-img-item { border-radius:var(--radius-sm); overflow:hidden; background:#f5f5f5; }
.detail-img-item img { width:100%; display:block; }

/* Auth Form */
.auth-page { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { background:var(--white); border-radius:var(--radius); padding:48px; width:100%; max-width:440px; box-shadow:var(--shadow-lg); }
.auth-card h2 { font-size:28px; font-weight:700; color:var(--dark); text-align:center; margin-bottom:8px; }
.auth-card .sub { text-align:center; color:#999; font-size:14px; margin-bottom:32px; }
.fg { margin-bottom:20px; }
.fg label { display:block; font-size:14px; font-weight:500; color:#555; margin-bottom:6px; }
.fg input, .fg select, .fg textarea { width:100%; padding:12px 16px; border:2px solid #eee; border-radius:var(--radius-sm); font-size:14px; transition:.3s; outline:none; font-family:inherit; }
.fg input:focus, .fg select:focus { border-color:var(--red); }
.fg textarea { min-height:100px; resize:vertical; }
.fg .hint { font-size:12px; color:#999; margin-top:4px; }

/* Admin */
.admin-page { display:flex; min-height:calc(100vh - 64px); }
.admin-sidebar { width:220px; background:var(--dark); color:#fff; padding:24px 0; flex-shrink:0; }
.admin-sidebar h3 { padding:0 24px 20px; font-size:15px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px; }
.admin-sidebar a { display:flex; align-items:center; gap:10px; padding:12px 24px; font-size:14px; color:rgba(255,255,255,.7); cursor:pointer; transition:all .25s; border-left:3px solid transparent; }
.admin-sidebar a:hover { background:rgba(255,255,255,.08); color:#fff; }
.admin-sidebar a.active { background:rgba(255,255,255,.12); color:#fff; border-left-color:var(--red); font-weight:600; }
.admin-main { flex:1; padding:32px; background:#f8f9fa; overflow-y:auto; max-height:calc(100vh - 64px); }
.admin-main h2 { font-size:24px; font-weight:700; margin-bottom:24px; }
.admin-tab { display:none; }
.admin-tab.active { display:block; }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:32px; }
.stat-box { background:var(--white); border-radius:var(--radius-sm); padding:24px; box-shadow:var(--shadow); }
.stat-box .val { font-size:32px; font-weight:700; color:var(--red); }
.stat-box .lbl { font-size:13px; color:#999; margin-top:4px; }
.toolbar { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.toolbar input,.toolbar select { padding:8px 14px; border:2px solid #ddd; border-radius:var(--radius-sm); font-size:13px; outline:none; max-width:260px; }
.toolbar input:focus,.toolbar select:focus { border-color:var(--red); }
.tbl { width:100%; background:var(--white); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); border-collapse:collapse; }
.tbl th { background:#f8f9fa; padding:14px 16px; text-align:left; font-size:13px; font-weight:600; color:#555; border-bottom:2px solid #eee; }
.tbl td { padding:12px 16px; font-size:14px; border-bottom:1px solid #f0f0f0; }
.tbl tr:hover td { background:#fafafa; }
.verified { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:20px; font-size:12px; }
.verified.ok { background:#d4edda; color:#155724; }
.verified.no { background:#fff3cd; color:#856404; }

/* Modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-box { background:var(--white); border-radius:var(--radius); padding:32px; width:90%; max-width:600px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-box h3 { font-size:20px; font-weight:600; margin-bottom:24px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid #eee; }

/* Toast */
.toast { position:fixed; top:20px; right:20px; z-index:2000; padding:14px 24px; border-radius:var(--radius-sm); color:#fff; font-size:14px; box-shadow:var(--shadow-lg); animation:slideIn .3s ease; }
.toast.s { background:#27ae60; }
.toast.e { background:#dd7d00; }
.toast.i { background:#3498db; }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Footer */
.footer { background:var(--dark); color:#aaa; padding:48px 24px 24px; margin-top:60px; }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.footer-inner h4 { font-size:16px; color:#fff; margin-bottom:16px; }
.footer-inner p,.footer-inner a { font-size:13px; color:#aaa; line-height:2; display:block; cursor:pointer; }
.footer-inner a:hover { color:#fff; }
.footer-btm { max-width:1280px; margin:0 auto; text-align:center; padding-top:24px; margin-top:32px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; }

/* Utility */
.btn-block { width:100%; }
.btn-white { border-color:#fff; color:#fff; }
.btn-white:hover { background:#fff; color:var(--red); }
.container { max-width:1280px; margin:0 auto; }
.section-full { background:var(--white); margin:0; max-width:100%; padding:60px 24px; }
.section-narrow { max-width:900px; }
.section-footer { text-align:center; margin-top:32px; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:16px; }
.search-bar { display:flex; justify-content:flex-end; margin-bottom:20px; gap:8px; }
.search-bar input { padding:10px 18px; border:2px solid #eee; border-radius:24px; font-size:14px; outline:none; width:260px; transition:.3s; }
.search-bar input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(221,125,0,.1); }
.filter-select { padding:8px 14px; border:2px solid #eee; border-radius:24px; font-size:14px; outline:none; background:#fff; color:#555; cursor:pointer; }
.filter-select:focus { border-color:var(--red); }

/* Category Hero */
.cat-hero { padding:60px 24px; text-align:center; color:#fff; }
.cat-hero-icon { font-size:80px; }
.cat-hero-title { font-size:42px; margin:8px 0; }
.cat-hero-desc { font-size:18px; }
.cat-hero-date { margin-top:12px; display:inline-block; padding:6px 20px; border-radius:20px; background:rgba(255,255,255,.2); font-size:14px; }

/* Auth extras */
.auth-footer { text-align:center; margin-top:20px; font-size:14px; color:#999; }
.auth-link { color:var(--red); cursor:pointer; }
.demo-hint { margin-top:20px; padding:16px; background:#f8f9fa; border-radius:8px; }
.demo-hint-text { font-size:13px; color:#999; text-align:center; }

/* Profile */
.profile-card { background:var(--white); border-radius:var(--radius); padding:32px; margin-bottom:24px; box-shadow:var(--shadow); }
.profile-card-header { display:flex; align-items:center; gap:24px; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,#f5f5f5,#eee); display:flex; align-items:center; justify-content:center; font-size:36px; }
.profile-name { font-size:22px; font-weight:600; }
.profile-email { color:#999; font-size:14px; }
.profile-section-title { font-size:18px; font-weight:600; margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid #f0f0f0; }
.pref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.profile-pref-card { padding:16px; cursor:pointer; }
.profile-pref-icon { font-size:32px; }
.profile-pref-name { font-size:14px; }

/* Admin extras */
.sidebar-back { margin-top:24px; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; }
.stat-box .val.gold { color:var(--gold); }
.stat-box .val.green { color:var(--green); }
.stat-box .val.blue { color:#3498db; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dashboard-heading { margin-bottom:16px; }
.search-input { width:300px; }
.table-icon-cell { font-size:24px; }
.color-swatch { display:inline-block; width:16px; height:16px; border-radius:4px; vertical-align:middle; }
.table-price { color:var(--red); font-weight:600; }
.user-label { font-size:14px; color:#555; margin-right:8px; }
.back-home { font-size:13px; color:var(--dark); cursor:pointer; transition:.2s; font-weight:500; display:inline-flex; align-items:center; gap:4px; background:#f5f6fa; padding:6px 14px; border-radius:20px; border:1px solid transparent; }
.back-home:hover { background:#fef9f0; border-color:rgba(221,125,0,.2); color:var(--red); }
.lang-toggle { font-size:12px; font-weight:700; color:#888; cursor:pointer; padding:3px 8px; border:1px solid #ddd; border-radius:4px; transition:.2s; user-select:none; margin-left:4px; }
.lang-toggle:hover { color:var(--red); border-color:var(--red); }

/* Form layout */
.form-row { display:grid; gap:12px; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }
.fg input.color-input { height:40px; padding:4px 8px; }

/* Detail page extras */
.orig-lg { font-size:18px; }
.save-badge { color:#27ae60; font-size:14px; }
.prod-tags-detail { margin-bottom:20px; }
.prod-tags-detail span { padding:4px 12px; }

/* Cattag with CSS variable fallback */
.prod-info .cattag { background:var(--tag-bg, #eee); color:var(--tag-color, #999); }
.detail-header .catlink { background:var(--tag-bg, #eee); color:var(--tag-color, #999); cursor:pointer; }

/* Icon & Detail Preview */
.icon-preview { margin-top:8px; }
.detail-preview { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.detail-preview-item { position:relative; width:80px; height:80px; border-radius:4px; overflow:hidden; border:1px solid #eee; }
.detail-preview-item img { width:100%; height:100%; object-fit:cover; }
.detail-preview-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; background:rgba(0,0,0,.5); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; line-height:1; }
.upload-progress { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#999; font-size:13px; background:#f8f8f8; border-radius:4px; }
.upload-progress-inline { position:absolute; bottom:2px; right:2px; font-size:10px; background:rgba(0,0,0,.45); color:#fff; border-radius:2px; padding:1px 4px; }

.cat-icon img { width:48px; height:48px; object-fit:contain; border-radius:8px; }
.cat-icon { display:flex; align-items:center; justify-content:center; }
.prod-img img, .prod-img video { width:100%; height:100%; object-fit:cover; }
.prod-img { overflow:hidden; }

/* About */
.about-header { text-align:center; margin-bottom:36px; }
.about-header h2 { font-size:30px; font-weight:800; color:var(--dark); margin-bottom:8px; letter-spacing:-.3px; }
.about-header .subtitle { font-size:15px; color:var(--red); font-weight:500; }
.about-cards { max-width:1000px; margin:0 auto; }
.about-card-main { display:grid; grid-template-columns:1fr 1fr; gap:32px; background:var(--white); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow); margin-bottom:20px; align-items:center; }
.about-card-text p { font-size:14px; color:#666; line-height:1.9; margin-bottom:10px; }
.about-card-media { border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,#f5f6fa,#eef0f5); }
.about-card-media video { width:100%; height:100%; object-fit:cover; }
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.about-stat-card { background:var(--white); border-radius:var(--radius-sm); padding:24px 16px; text-align:center; box-shadow:var(--shadow); transition:.2s; }
.about-stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.about-stat-num { font-size:28px; font-weight:800; color:var(--red); margin-bottom:4px; }
.about-stat-label { font-size:13px; color:#999; }
.about-features { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.about-features span { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; background:var(--white); border-radius:var(--radius-sm); font-size:14px; color:#555; font-weight:600; box-shadow:var(--shadow); transition:.2s; }
.about-features span:hover { color:var(--red); box-shadow:var(--shadow-lg); }

/* Partners */
.partners-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.partner-card { display:flex; align-items:center; gap:16px; padding:20px; background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow); transition:.2s; }
.partner-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.partner-info { display:flex; flex-direction:column; gap:4px; }
.partner-name { font-size:15px; font-weight:600; color:var(--dark); }
.partner-desc { font-size:12px; color:#999; line-height:1.5; }

/* Pagination */
.pagination { display:flex; align-items:center; gap:4px; justify-content:center; margin-top:20px; }
.pagination button { padding:6px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:13px; cursor:pointer; transition:.2s; color:#555; }
.pagination button:hover { background:#fff5f5; border-color:var(--red); color:var(--red); }
.pagination button.active { background:var(--red); color:#fff; border-color:var(--red); }
.pagination button:disabled { opacity:.4; cursor:default; }
.pagination .page-info { font-size:13px; color:#999; margin:0 8px; }

@media (max-width:768px) {
  .header-inner { padding:8px 12px; height:auto; min-height:48px; flex-wrap:wrap; }
  .logo { font-size:17px; gap:3px; }
  .logo span { font-size:20px; }
  .nav { gap:2px; order:3; width:100%; justify-content:center; padding:6px 0 4px; border-top:1px solid #f0f0f0; margin-top:6px; }
  .nav a { padding:7px 12px; font-size:13px; border-radius:var(--radius-xs); }
  .header-actions { gap:4px; }
  .header-actions .btn-sm { padding:5px 10px; font-size:12px; }
  .header-actions .btn { font-size:12px; }
  .user-label { font-size:12px; margin-right:2px; }
  .hero { padding:72px 16px 80px; }
  .hero { padding:48px 16px; }
  .hero h1 { font-size:28px; }
  .hero p { font-size:15px; margin-bottom:20px; }
  .deco { font-size:32px; }
  .deco:nth-child(5) { font-size:20px; }
  .section { padding:40px 16px; }
  .section-full { padding:40px 16px; }
  .sec-title h2 { font-size:24px; }
  .sec-title p { font-size:13px; }
  .sec-title { margin-bottom:28px; }
  .cat-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .cat-card { padding:20px 12px; }
  .cat-icon { font-size:40px; }
  .cat-card h3 { font-size:15px; }
  .prod-grid { grid-template-columns:1fr; gap:16px; }
  .prod-img { height:240px; }
  .features { grid-template-columns:1fr 1fr; padding:24px; gap:16px; }
  .feat-item { padding:12px; }
  .feat-icon { font-size:32px; }
  .detail-wrap { padding:68px 16px 24px; }
  .detail-main-img img, .detail-main-img video { max-height:320px; }
  .detail-header h1 { font-size:20px; word-break:break-word; }
  .price-box { padding:16px; }
  .price-box .cur { font-size:28px; }
  .detail-header .dd { font-size:14px; line-height:1.7; }
  .footer { padding:32px 16px 20px; margin-top:40px; }
  .footer-inner { grid-template-columns:1fr; gap:20px; }
  .auth-card { padding:32px 20px; max-width:100%; }
  .auth-card h2 { font-size:24px; }
  .cat-hero { padding:40px 16px; }
  .cat-hero-title { font-size:30px; }
  .cat-hero-desc { font-size:15px; }
  .cat-hero-icon { font-size:60px; }
  .filter-bar { gap:4px; }
  .filter-bar .btn-sm { padding:4px 8px; font-size:11px; }
  .search-bar { justify-content:center; }
  .search-bar input { width:100%; }
  .admin-page { flex-direction:column; }
  .admin-sidebar { width:100%; padding:12px 0; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
  .admin-sidebar h3 { display:none; }
  .admin-sidebar a { padding:8px 14px; font-size:12px; border-left:none; border-radius:6px; }
  .admin-main { padding:12px; max-height:none; overflow-x:visible; }
  .admin-main h2 { font-size:18px; margin-bottom:14px; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display:block; }
  .tbl thead { display:none; }
  .tbl { box-shadow:none; background:transparent; border-radius:0; }
  .tbl tr { background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow); margin-bottom:10px; padding:4px 0; }
  .tbl td { padding:8px 14px; border:none; text-align:right; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
  .tbl td::before { content:attr(data-label); font-weight:600; color:#888; font-size:12px; flex-shrink:0; margin-right:12px; }
  .tbl td .btn-sm { font-size:11px; padding:4px 10px; }
  .tbl tr:hover td { background:transparent; }
  .stats-row { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-box { padding:14px; }
  .stat-box .val { font-size:22px; }
  .stat-box .lbl { font-size:11px; }
  .dashboard-grid { grid-template-columns:1fr; gap:16px; }
  .toolbar { gap:6px; }
  .toolbar input, .toolbar select { width:100%; max-width:100%; padding:8px 12px; }
  .search-input { width:100%; }
  .form-row, .form-row-2, .form-row-3 { grid-template-columns:1fr; }
  .modal-box { padding:20px; width:95%; }
  .modal-actions { flex-direction:column; }
  .toast { top:10px; right:10px; left:10px; text-align:center; font-size:13px; padding:10px 16px; }
  .toast.s, .toast.e, .toast.i { animation:slideDown .3s ease; }
  @keyframes slideDown { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
  .about-header h2 { font-size:24px; }
  .about-card-main { grid-template-columns:1fr; padding:24px; }
  .about-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .about-stat-card { padding:18px 12px; }
  .about-stat-num { font-size:22px; }
  .about-features { grid-template-columns:repeat(2,1fr); gap:8px; }
  .about-features span { font-size:12px; padding:10px; }
  .partners-grid { gap:12px; }
  .partner-card { min-width:100px; padding:16px 12px; }
  .pagination { flex-wrap:wrap; gap:3px; }
  .pagination button { padding:6px 10px; font-size:12px; }
  .pagination .page-info { width:100%; text-align:center; margin-top:4px; font-size:11px; }
}

@media (max-width:400px) {
  .header-inner { padding:6px 8px; }
  .logo { font-size:15px; }
  .nav a { padding:5px 8px; font-size:11px; }
  .header-actions .btn-sm { padding:4px 8px; font-size:11px; }
  .hero h1 { font-size:24px; }
  .hero p { font-size:13px; }
  .btn-lg { padding:12px 24px; font-size:14px; }
  .cat-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .cat-card { padding:14px 8px; }
  .cat-icon { font-size:32px; }
  .features { grid-template-columns:1fr; }
  .prod-img { height:200px; }
}