:root{
  --bg:#F7F7F8;
  --surface:#FFFFFF;
  --border:#E7E8EC;
  --border-strong:#D6D9E0;
  --text:#191B1F;
  --muted:#6C7280;
  --muted-2:#9BA1AC;
  --blue:#3059D6;
  --blue-dark:#22449E;
  --blue-soft:#EBF0FE;
  --orange:#FF7A33;
  --orange-dark:#E8621B;
  --orange-soft:#FFF0E6;
  --accent:#FF7A33;
  --accent-soft:#FFF0E6;
  --danger:#E14848;

  /* 圆角体系：卡片/弹窗用大圆角，按钮/输入框用中圆角 */
  --radius-sm:12px;
  --radius:12px;
  --radius-lg:16px;

  --shadow-sm:0 1px 3px rgba(20,25,35,.06);
  --shadow-md:0 8px 24px rgba(20,25,35,.10);

  /* 分类图标柔和配色(背景色 + 图标颜色)，统一低饱和度、同一色阶体系 */
  --cat-amber-bg:#FDF1DE;   --cat-amber-fg:#B9791A;
  --cat-blue-bg:#E4EBFC;    --cat-blue-fg:#3059D6;
  --cat-indigo-bg:#E9E7FB;  --cat-indigo-fg:#5B4FCB;
  --cat-teal-bg:#DFF4F0;    --cat-teal-fg:#1C8A78;
  --cat-rose-bg:#FCE9EF;    --cat-rose-fg:#C2447A;
  --cat-orange-bg:#FDEBDF;  --cat-orange-fg:#D96A2B;
  --cat-purple-bg:#F1E7FB;  --cat-purple-fg:#8A47C4;
  --cat-gray-bg:#EBECEF;    --cat-gray-fg:#5B616D;
}

*{box-sizing:border-box;}
/* 任何元素只要设置了 hidden 属性，必须真正隐藏——不管这个元素身上还带着什么别的class(比如display:flex)，
   都不能把它重新显示出来。不加这条的话，像 .field-group{display:flex} 这类规则会跟浏览器默认的
   [hidden]{display:none} 优先级打平，谁写在后面谁赢，容易出现"明明设置了隐藏但看不出效果"的问题。 */
[hidden]{ display:none !important; }
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Roboto','Noto Sans',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.zh{ font-family:'Noto Sans SC','Roboto',sans-serif; }

.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

/* 防止任何语言下的长单词/长联系方式把卡片撑破、导致横向溢出 */
h1,h2,h3,p,span,a,button,label,input,textarea{ overflow-wrap:break-word; word-break:break-word; }

h1,h2,h3{font-family:'Roboto',sans-serif;font-weight:700;margin:0;}
body.zh h1, body.zh h2, body.zh h3{font-family:'Noto Sans SC',sans-serif;font-weight:700;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  padding-top:12px; padding-bottom:12px; flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.logo-mark{color:var(--orange);}
.logo-text{font-family:'Roboto',sans-serif; font-weight:800; font-size:1.15rem; color:var(--text);}
body.zh .logo-text{font-family:'Noto Sans SC',sans-serif;}

.main-nav{display:flex; gap:4px; flex:1;}
.main-nav a{
  padding:9px 14px; border-radius:var(--radius); font-size:.9rem; font-weight:600; color:var(--muted);
  transition:.12s ease; white-space:nowrap;
}
.main-nav a:hover{background:var(--bg); color:var(--text);}
.main-nav a.active{color:var(--blue); background:var(--blue-soft);}

/* 汉堡菜单按钮：桌面/平板隐藏，仅 <768px 显示（见响应式区块） */
.hamburger-btn{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; flex-shrink:0; padding:0;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius);
  cursor:pointer;
}
.hamburger-btn span{
  display:block; width:18px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2){ opacity:0; }
.hamburger-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 俄语/哈萨克语的导航文字普遍更长，单独缩小字号+收窄内边距，确保不换行 */
body.lang-ru .main-nav, body.lang-kk .main-nav, body.lang-en .main-nav{ gap:2px; }
body.lang-ru .main-nav a, body.lang-kk .main-nav a, body.lang-en .main-nav a{
  font-size:.8rem; white-space:nowrap; padding:9px 9px;
}

.header-right{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;}

.lang-switch{display:flex; gap:2px; background:var(--bg); border:1px solid var(--border); padding:3px; border-radius:var(--radius);}
.lang-btn{
  background:transparent; border:none; color:var(--muted);
  padding:5px 10px; border-radius:10px; font-size:.74rem; font-weight:700; cursor:pointer;
  transition:.12s ease; font-family:inherit;
}
.lang-btn:hover{color:var(--text);}
.lang-btn.active{background:var(--surface); color:var(--blue); box-shadow:var(--shadow-sm);}

.auth-area{display:flex; align-items:center; gap:10px; font-size:.86rem;}
.auth-hello{color:var(--muted); font-weight:600; white-space:nowrap;}

.btn{
  border:none; cursor:pointer; border-radius:var(--radius); font-weight:700; font-size:.87rem;
  padding:10px 16px; transition:.12s ease; font-family:inherit; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; flex-shrink:0;
}
.btn-sm{padding:7px 12px; font-size:.8rem;}
.btn-post{background:var(--orange); color:#fff;}
.btn-post:hover{background:var(--orange-dark);}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-ghost{background:var(--surface); border:1px solid var(--border-strong); color:var(--text);}
.btn-ghost:hover{border-color:var(--muted); background:var(--bg);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{background:#B82A21;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ===== Promo banner (首页顶部横幅) ===== */
.promo-banner{
  background:linear-gradient(90deg, var(--orange), var(--orange-dark));
  color:#fff; font-weight:700; font-size:.92rem; text-align:center;
  padding:14px 20px; border-radius:var(--radius-lg); margin-top:18px;
  box-shadow:var(--shadow-sm); line-height:1.5;
}

/* ===== Hero / search ===== */
.hero{padding:36px 0 30px; background:linear-gradient(180deg,#EDF2FC 0%, var(--bg) 100%);}
.hero-inner{max-width:760px;}
.eyebrow{color:var(--blue); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; margin-bottom:10px;}
.hero-title{font-size:2rem; line-height:1.2; margin-bottom:10px; color:var(--text);}
.hero-sub{color:var(--muted); font-size:.98rem; margin-bottom:22px; max-width:560px;}

.search-bar{
  display:flex; gap:0; margin-bottom:24px; max-width:640px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:4px;
}
.search-bar input{
  flex:1; min-width:0; background:transparent; border:none; color:var(--text);
  padding:11px 14px; font-size:.92rem; font-family:inherit;
}
.search-bar input::placeholder{color:var(--muted-2);}
.search-bar input:focus{outline:none;}
.search-bar .btn-post{border-radius:var(--radius);}

.hero-stats{display:flex; gap:32px; flex-wrap:nowrap; margin-left:24px;}
.stat{display:flex; flex-direction:row; align-items:baseline; gap:5px; min-width:0;}
.stat-num{font-size:1.4rem; font-weight:800; color:var(--blue); white-space:nowrap;}
.stat-label{color:var(--muted); font-size:.78rem; white-space:nowrap;}

/* ===== Sections ===== */
.section-title{font-size:1.3rem; font-weight:800; margin-bottom:18px; color:var(--text); letter-spacing:-0.01em;}

/* 标题旁边带"?"说明图标时用这个容器：把标题自己的下边距挪到容器上，
   避免那18px margin把flex居中算歪，图标才能真正跟文字对齐 */
.title-with-legend{ display:flex; align-items:center; gap:6px; margin-bottom:18px; }
.title-with-legend .section-title{ margin-bottom:0; }
.categories{padding:16px 0 0;}

/* 圆角面板容器：分类区、列表区各自套一层，宽度已经由外层 .wrap 的安全边距控制，不会顶到屏幕边缘 */
.panel-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 20px;
}

/* 分类网格：桌面/平板/手机统一4列，保证一眼看清所有入口 */
.cat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 14px; cursor:pointer; text-align:center; color:var(--text); position:relative;
  transition:.15s ease; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.cat-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.cat-card.active{border-color:var(--blue); background:var(--blue-soft);}
.cat-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cat-icon svg{width:22px; height:22px;}
/* 每个分类的柔和统一配色 */
.cat-icon-amber{ background:var(--cat-amber-bg); color:var(--cat-amber-fg); }
.cat-icon-blue{ background:var(--cat-blue-bg); color:var(--cat-blue-fg); }
.cat-icon-indigo{ background:var(--cat-indigo-bg); color:var(--cat-indigo-fg); }
.cat-icon-teal{ background:var(--cat-teal-bg); color:var(--cat-teal-fg); }
.cat-icon-rose{ background:var(--cat-rose-bg); color:var(--cat-rose-fg); }
.cat-icon-orange{ background:var(--cat-orange-bg); color:var(--cat-orange-fg); }
.cat-icon-purple{ background:var(--cat-purple-bg); color:var(--cat-purple-fg); }
.cat-icon-gray{ background:var(--cat-gray-bg); color:var(--cat-gray-fg); }
.cat-text{min-width:0; width:100%;}
.cat-name{font-weight:700; font-size:.86rem; margin-bottom:2px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.cat-count{color:var(--muted); font-size:.72rem;}
.cat-free-hint{display:block; color:var(--muted-2); font-size:.64rem; margin-top:2px;}

/* ===== Listings ===== */
.listings{padding:16px 0 48px;}
.listings-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;}
.chip{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  padding:7px 14px; border-radius:999px; font-size:.78rem; cursor:pointer; font-weight:600;
}
.chip:hover{border-color:var(--blue); color:var(--blue);}

/* 信息卡片网格：桌面4列，平板3列，手机也保持多列(见响应式区块) */
.listing-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}

.listing-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.18s ease; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.listing-card:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-3px);}
.listing-card--clickable{ cursor:pointer; }

.listing-photo{
  position:relative; width:100%; aspect-ratio:4/3; background:var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.listing-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.listing-photo--placeholder{color:var(--border-strong);}
.listing-photo--placeholder svg{width:44px; height:44px;}
.photo-count{
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:#fff;
  font-size:.68rem; padding:2px 7px; border-radius:999px; font-weight:600;
}
.fav-btn{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:.12s ease;
}
.fav-btn:hover{color:var(--danger);}
.fav-btn.active{color:var(--danger);}

.listing-card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1;}
.listing-tag{
  align-self:flex-start; background:var(--orange-soft); color:var(--orange-dark);
  font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.01em;
}
.listing-title{font-size:1rem; font-weight:700; color:var(--text); line-height:1.35;}
.listing-desc{color:var(--muted); font-size:.84rem; flex:1; line-height:1.5;}
.listing-meta{display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted-2); margin-top:2px;}
.listing-city{font-weight:600; color:var(--muted);}
.listing-contact-row{font-size:.8rem; color:var(--muted); border-top:1px dashed var(--border); padding-top:10px; margin-top:4px;}
.listing-contact{color:var(--blue); font-weight:700;}

.owner-actions{display:flex; gap:8px; margin-top:8px;}
.recommend-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
.recommend-row .btn-mini{flex:none; padding:6px 12px;}
.recommend-row .btn-mini.recommended{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);}
.recommend-count{font-size:.78rem; color:var(--muted);}
.btn-mini{
  flex:1; text-align:center; font-size:.76rem; font-weight:700; padding:8px 8px; border-radius:var(--radius);
  border:1px solid var(--border-strong); color:var(--text); display:flex; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; background:var(--surface);
}
.btn-mini:hover{border-color:var(--blue); color:var(--blue);}
.btn-mini-danger:hover{border-color:var(--danger); color:var(--danger);}

/* ===== Empty state ===== */
.empty-state{
  text-align:center; padding:60px 20px; color:var(--muted); background:var(--surface);
  border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
}
.empty-state a{color:var(--blue); font-weight:700;}

/* ===== Footer ===== */
.site-footer{padding:32px 0 48px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px; background:var(--surface);}
.footer-inner{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.footer-logo{color:var(--text); margin-bottom:6px;}
.footer-tagline{font-size:.86rem; margin-bottom:12px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:4px 16px;}
.footer-nav a{font-size:.82rem; color:var(--muted); font-weight:600;}
.footer-nav a:hover{color:var(--blue);}
.footer-right{max-width:320px; text-align:right;}
.footer-disclaimer-short{font-size:.74rem; color:var(--muted-2); line-height:1.6; margin:0 0 4px;}
.footer-disclaimer-link{font-size:.76rem; color:var(--blue); font-weight:700;}
.footer-note{font-size:.8rem; margin-top:10px; color:var(--muted); font-style:italic;}

/* ===== Forms (post / login shared) ===== */
.form-page{padding:32px 0 64px;}
.form-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; max-width:560px; margin:0 auto; box-shadow:var(--shadow-sm);
}
.form-card h1{font-size:1.3rem; margin-bottom:22px;}
.field-group{display:flex; flex-direction:column; gap:5px; margin-bottom:16px;}
.field-group label{font-size:.82rem; font-weight:700; color:var(--text);}
.field-hint{font-size:.74rem; color:var(--muted-2); line-height:1.5;}
.field-group input, .field-group select, .field-group textarea{
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  padding:10px 12px; border-radius:var(--radius); font-family:inherit; font-size:.9rem;
}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.error-msg{color:var(--danger); font-size:.82rem; margin-top:-6px; margin-bottom:14px; display:none;}
.error-msg.show{display:block;}
.hint-text{font-size:.76rem; color:var(--muted-2); margin-top:10px; line-height:1.5;}
.back-link{display:inline-block; margin-bottom:16px; font-size:.86rem; color:var(--blue); font-weight:600;}

/* ===== 广告详情页 ===== */
.detail-page{ padding:24px 0 64px; max-width:900px; }
.detail-card{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.detail-gallery{ display:flex; flex-direction:column; gap:10px; }
.detail-photo{
  position:relative; width:100%; aspect-ratio:4/3; background:var(--bg); border-radius:var(--radius);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-photo--placeholder{ color:var(--border-strong); }
.detail-photo--placeholder svg{ width:64px; height:64px; }
.detail-thumb-row{ display:flex; gap:8px; flex-wrap:wrap; }
.detail-thumb{
  width:64px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:.65; transition:.12s ease;
}
.detail-thumb:hover{ opacity:1; }
.detail-thumb.active{ border-color:var(--blue); opacity:1; }

.detail-body{ display:flex; flex-direction:column; }
.detail-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.detail-fav-btn{ position:static; width:36px; height:36px; box-shadow:none; border:1px solid var(--border-strong); }
.detail-title{ font-size:1.4rem; font-weight:800; margin:0 0 10px; line-height:1.35; }
.detail-meta-row{ display:flex; gap:16px; font-size:.84rem; color:var(--muted); margin:10px 0 16px; flex-wrap:wrap; }
.detail-desc{ font-size:.92rem; line-height:1.8; color:var(--text); white-space:pre-wrap; margin:0 0 20px; }
.detail-contact-box{
  background:var(--blue-soft); border-radius:var(--radius); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.detail-contact-label{ font-size:.76rem; color:var(--muted); font-weight:700; }
.detail-contact-value{ font-size:1.05rem; color:var(--blue); font-weight:800; }

@media (max-width:767px){
  .detail-card{ grid-template-columns:1fr; gap:18px; }
  .detail-title{ font-size:1.2rem; }
}

/* ===== Photo upload ===== */
.photo-upload{
  border:2px dashed var(--border-strong); border-radius:var(--radius); padding:22px;
  text-align:center; cursor:pointer; color:var(--muted); transition:.12s ease; background:var(--bg);
}
.photo-upload:hover{border-color:var(--blue); color:var(--blue);}
.photo-upload.dragging{border-color:var(--blue); background:var(--blue-soft); color:var(--blue);}
.photo-upload svg{margin-bottom:8px;}
.photo-upload input[type=file]{display:none;}
.photo-hint{font-size:.78rem; margin-top:4px;}
.photo-previews{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px;}
.photo-thumb{position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb button{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; border:none; cursor:pointer; font-size:.7rem; line-height:1;
}

/* ===== Login / register tabs ===== */
.auth-tabs{display:flex; gap:4px; background:var(--bg); border-radius:var(--radius); padding:4px; margin-bottom:22px;}
.auth-tab{flex:1; text-align:center; padding:9px; border-radius:var(--radius); font-weight:700; font-size:.88rem; cursor:pointer; border:none; background:transparent; color:var(--muted); font-family:inherit;}
.auth-tab.active{background:var(--surface); color:var(--blue); box-shadow:var(--shadow-sm);}
.auth-form{display:none;}
.auth-form.active{display:block;}
.auth-switch{text-align:center; font-size:.84rem; color:var(--muted); margin-top:14px;}
.auth-switch button{background:none; border:none; color:var(--blue); font-weight:700; cursor:pointer; font-family:inherit; font-size:inherit;}

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text); color:#fff; font-weight:600; padding:12px 22px;
  border-radius:var(--radius); opacity:0; pointer-events:none; transition:.25s ease; z-index:60;
  font-size:.86rem; box-shadow:var(--shadow-md);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}

/* ===== Responsive ===== */
/* 桌面 >1024px：分类4列、信息卡片4列(全局默认) */

/* 平板 768-1024px 与 手机 <768px：分类和信息卡片统一降为3列，图标也同步缩小一号 */
@media (max-width:1024px){
  .cat-grid{grid-template-columns:repeat(3, 1fr);}
  .listing-grid{grid-template-columns:repeat(3, 1fr);}
  .cat-icon{width:38px; height:38px;}
  .cat-icon svg{width:19px; height:19px;}
}

/* 768-900px 之间的窄平板：导航仍平铺显示，但换到第二行 */
@media (min-width:768px) and (max-width:900px){
  .main-nav{order:3; width:100%; justify-content:space-between; padding-top:4px; border-top:1px solid var(--border); margin-top:8px;}
  .main-nav a{flex:1; text-align:center; padding:8px 4px; font-size:.8rem;}
  body.lang-ru .main-nav a, body.lang-kk .main-nav a, body.lang-en .main-nav a{ font-size:.68rem; padding:8px 2px; }
}

/* .mobile-menu 包着导航链接+语言切换；桌面端用 display:contents 让它们直接参与 header-inner 的横排布局，
   视觉上跟没套壳一样，保持原来的桌面效果 */
.mobile-menu{ display:contents; }

/* <768px：改用汉堡菜单，导航+语言切换一起收进下拉面板；登录按钮和"发布信息"按钮常驻可见，不收进菜单 */
@media (max-width:767px){
  .hamburger-btn{display:flex;}
  .listing-grid{grid-template-columns:repeat(2, 1fr);}
  .mobile-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md); padding:8px 16px 16px; z-index:25;
  }
  .mobile-menu.open{display:flex;}

  .main-nav{display:flex; flex-direction:column; gap:0; flex:none;}
  .main-nav a{
    padding:13px 6px; border-radius:0; font-size:.94rem; text-align:left;
    border-bottom:1px solid var(--border); white-space:normal;
  }
  .main-nav a:last-child{border-bottom:none;}
  body.lang-ru .main-nav a, body.lang-kk .main-nav a, body.lang-en .main-nav a{ font-size:.88rem; padding:13px 6px; }

  .mobile-menu .lang-switch{ margin-top:12px; justify-content:center; }

  .hero-stats{gap:18px;}
}

@media (max-width:640px){
  /* 安全边距：手机端内容与屏幕边缘至少留16px，避免贴边 */
  .wrap{padding:0 16px;}
  .admin-stats{grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:16px;}
  .admin-stat-card{padding:10px 12px;}
  .admin-stat-label{font-size:.7rem; margin-bottom:4px;}
  .admin-stat-num{font-size:1.2rem;}
  .admin-tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:6px;}
  .admin-tab{padding:7px 8px; font-size:.74rem; justify-content:center;}
  .promo-banner{font-size:.8rem; padding:11px 14px; margin-top:12px;}
  .hero{padding:22px 0 18px;}
  .hero-title{font-size:1.35rem;}
  .hero-sub{font-size:.85rem;}
  .header-inner{gap:8px; padding-top:10px; padding-bottom:10px;}
  .logo-text{font-size:1rem;}
  .lang-btn{padding:4px 8px; font-size:.68rem;}
  .btn{padding:8px 12px; font-size:.8rem;}
  .header-right{gap:6px;}
  body.lang-ru .header-right .btn, body.lang-kk .header-right .btn, body.lang-en .header-right .btn{
    font-size:.66rem; padding:7px 8px;
  }
  body.lang-ru .header-right .btn svg, body.lang-kk .header-right .btn svg, body.lang-en .header-right .btn svg{
    width:13px; height:13px;
  }
  .footer-inner{flex-direction:column;}
  .footer-right{text-align:left; max-width:100%;}
  .auth-hello{display:none;}

  .hero-stats{gap:14px;}
  .stat-num{font-size:1.2rem;}
  .stat-label{font-size:.7rem;}

  .panel-card{padding:16px 14px; border-radius:var(--radius);}

  .categories{padding:14px 0 0;}
  .section-title{font-size:1.05rem; margin-bottom:12px;}
  .cat-grid{gap:8px;}
  .cat-card{padding:10px 5px; gap:5px; border-radius:var(--radius);}
  .cat-icon{width:30px; height:30px;}
  .cat-icon svg{width:15px; height:15px;}
  .cat-name{font-size:.66rem;}
  .cat-count{font-size:.58rem;}
  .cat-free-hint{font-size:.56rem;}

  .listings{padding:14px 0 36px;}
  .listing-grid{gap:10px;}
  .listing-card{border-radius:var(--radius);}
  .listing-card-body{padding:10px 10px 12px; gap:5px;}
  .listing-tag{font-size:.6rem; padding:2px 8px;}
  .listing-title{font-size:.82rem;}
  .listing-desc{font-size:.72rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .listing-meta{font-size:.64rem;}
  .listing-contact-row{font-size:.7rem; padding-top:8px;}
  .listings-head{margin-bottom:12px;}
  .form-card{padding:18px; border-radius:var(--radius);}
  .field-row{grid-template-columns:1fr;}
  .photo-previews{grid-template-columns:repeat(4,1fr);}
  .otp-row{flex-wrap:wrap;}
  .otp-row .btn{width:100%;}
  .admin-actions{flex-wrap:wrap;}
  .admin-actions input[type=text]{width:100%;}
}

@media (max-width:380px){
  .cat-grid{gap:6px;}
  .cat-name{font-size:.62rem;}
  .hero-stats{gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ===================================================
   以下为新增功能的样式：状态/剩余天数徽章、通知铃铛、
   发布方案选择、Kaspi付款信息、管理后台、OTP登录表单
   =================================================== */

/* 状态徽章 & 剩余天数徽章 */
.badge-row{ display:flex; gap:6px; flex-wrap:wrap; }
.status-badge, .days-badge{
  display:inline-block; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:999px;
}
.status-badge.status-pending{ background:#FFF3D6; color:#9A6B00; }
.status-badge.status-active{ background:#E3F6EA; color:#1C8A4B; }
.status-badge.status-rejected{ background:#FCE4E3; color:var(--danger); }
.reject-reason-box{
  background:#FCE4E3; color:#8a2a22; font-size:.78rem; line-height:1.5;
  padding:8px 10px; border-radius:8px; margin-top:2px;
}
.reject-reason-box strong{ font-weight:700; }
.status-badge.status-expired{ background:#EDEDED; color:var(--muted); }
.days-badge.days-green{ background:#E3F6EA; color:#1C8A4B; }
.days-badge.days-yellow{ background:#FFF3D6; color:#9A6B00; }
.days-badge.days-red{ background:#FCE4E3; color:var(--danger); }

/* 剩余天数说明("?"点击展开小气泡) */
.days-legend-wrap{ position:relative; display:inline-flex; }
.days-legend-btn{
  width:20px; height:20px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--muted); font-size:.72rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.days-legend-btn:hover{ border-color:var(--blue); color:var(--blue); }
.days-legend-popover{
  position:absolute; top:26px; left:0; z-index:30; width:230px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:12px 14px; font-size:.8rem; line-height:1.7;
}
.days-legend-popover strong{ display:block; margin-bottom:6px; font-size:.82rem; }
.days-legend-popover p{ margin:0; display:flex; align-items:center; gap:6px; color:var(--muted); }
.days-legend-popover .days-badge{ padding:1px 6px; font-size:.68rem; }

/* 通知铃铛 */
.notif-wrap{ position:relative; }
.icon-btn{
  position:relative; background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  width:36px; height:36px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover{ border-color:var(--blue); color:var(--blue); }
.notif-dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger);
}
.notif-dropdown{
  position:absolute; top:44px; right:0; width:300px; max-height:360px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md);
  z-index:40;
}
.notif-head{ display:flex; justify-content:flex-end; padding:8px 12px; border-bottom:1px solid var(--border); }
.notif-markall{ background:none; border:none; color:var(--blue); font-size:.76rem; font-weight:700; cursor:pointer; font-family:inherit; }
.notif-list{ padding:4px; }
.notif-item{ padding:10px 10px; border-radius:var(--radius); cursor:pointer; }
.notif-item:hover{ background:var(--bg); }
.notif-item.unread{ background:var(--blue-soft); }
.notif-item p{ margin:0 0 4px; font-size:.82rem; color:var(--text); }
.notif-time{ font-size:.68rem; color:var(--muted-2); }
.notif-empty{ text-align:center; color:var(--muted); font-size:.82rem; padding:24px 12px; margin:0; }

/* 发布方案选择 */
.plan-options{ display:grid; grid-template-columns:1fr; gap:10px; }
.plan-option{
  display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:12px 14px; cursor:pointer; transition:.12s ease;
}
.plan-option:hover{ border-color:var(--blue); }
.plan-option.selected{ border-color:var(--blue); background:var(--blue-soft); }
.plan-option input{ margin:0; }
.plan-option .plan-label{ font-weight:700; font-size:.9rem; }
.plan-option.disabled{ opacity:.5; cursor:not-allowed; }

/* Kaspi 付款信息 */
.kaspi-box{
  background:var(--bg); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:16px; margin-top:6px;
}
.kaspi-box h4{ margin:0 0 10px; font-size:.92rem; }
.kaspi-row{ display:flex; justify-content:space-between; font-size:.86rem; padding:4px 0; }
.kaspi-row span:first-child{ color:var(--muted); }
.kaspi-row span:last-child{ font-weight:700; }

/* 私藏推荐分类免费提示 */
.treasure-free-banner{
  background:var(--blue-soft); color:var(--blue); font-size:.86rem; font-weight:600;
  padding:12px 16px; border-radius:var(--radius); text-align:center; margin-top:6px;
}

/* 管理后台 tabs & table */
.admin-stats{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:20px; max-width:360px; }
.admin-stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.admin-stat-label{ font-size:.78rem; color:var(--muted); margin:0 0 6px; }
.admin-stat-num{ font-size:1.5rem; font-weight:800; margin:0; }
.admin-plan-badge{ font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.admin-plan-badge.paid{ background:var(--accent-soft); color:var(--accent); }
.admin-plan-badge.free{ background:var(--blue-soft); color:var(--blue); }
.admin-tabs{ display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.admin-tab{
  padding:8px 16px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface);
  cursor:pointer; font-weight:700; font-size:.85rem; color:var(--text); font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
}
.tab-badge{
  background:var(--danger); color:#fff; font-size:.68rem; font-weight:800;
  padding:1px 6px; border-radius:999px; min-width:16px; text-align:center; line-height:1.4;
}
.admin-tab.active .tab-badge{ background:rgba(255,255,255,.3); }
.admin-tab.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.admin-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.admin-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.admin-card h4{ margin:0 0 4px; font-size:.95rem; }
.admin-card .meta{ color:var(--muted); font-size:.78rem; }
.admin-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.admin-actions input[type=text]{
  flex:1; min-width:160px; border:1px solid var(--border-strong); border-radius:var(--radius); padding:7px 10px; font-size:.82rem; font-family:inherit;
}
.admin-thumb{ width:90px; height:90px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border); }
.admin-thumb-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

/* OTP 登录表单 */
.otp-row{ display:flex; gap:8px; }
.otp-row input{ flex:1; }
.otp-row .btn{ white-space:nowrap; }
.login-intro{ text-align:center; font-size:.9rem; color:var(--muted); margin:0 0 18px; font-weight:600; }

.phone-disabled-notice{
  background:var(--accent-soft); color:var(--accent); font-size:.78rem; line-height:1.6;
  padding:10px 14px; border-radius:var(--radius); margin:14px 0 18px;
}
.field-group input:disabled, .field-group select:disabled{
  background:var(--bg); color:var(--muted-2); cursor:not-allowed;
}
.login-divider{ text-align:center; color:var(--muted-2); font-size:.78rem; margin:16px 0; position:relative; }
.login-divider::before, .login-divider::after{
  content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--border);
}
.login-divider::before{ left:0; } .login-divider::after{ right:0; }
.google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); padding:10px; font-weight:700;
  font-size:.88rem; color:var(--text); cursor:pointer; font-family:inherit;
}
#googleBtnWrap{ max-width:100%; overflow:hidden; }
.google-btn:hover{ background:var(--bg); }
.login-mode-switch{ text-align:center; margin-top:14px; font-size:.84rem; }
.login-mode-switch a{ color:var(--blue); font-weight:700; }
.dev-otp-hint{
  background:var(--accent-soft); color:var(--accent); font-size:.78rem; padding:8px 12px; border-radius:var(--radius); margin:8px 0;
}

/* 反馈/推广页面通用容器 */
.simple-page{ max-width:640px; margin:0 auto; padding:32px 20px 64px; }
.simple-page h1{ font-size:1.3rem; margin-bottom:8px; }
.simple-page .page-desc{ color:var(--muted); font-size:.88rem; margin-bottom:22px; line-height:1.6; }
.disclaimer-body p{ font-size:.9rem; line-height:1.8; color:var(--text); margin:0 0 16px; }
.disclaimer-body p:last-child{ margin-bottom:0; }
.referral-rule{ font-size:.78rem; color:var(--muted-2); margin-top:10px; }
.referral-status-box{
  margin-top:20px; padding:14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); font-size:.86rem;
}