:root{
  --primary:#ff385c;
  --primary-light:#fff2f5;
  --primary-gradient:linear-gradient(135deg,#ff385c,#ff6078);
  --bg:#f7f7f7;
  --card:#ffffff;
  --text:#1f1f1f;
  --sub:#777;
  --muted:#aaa;
  --border:rgba(0,0,0,.06);
  --radius:18px;
  --radius-sm:12px;
  --tab-h:64px;
  --header-h:54px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  font-family:-apple-system,'Noto Sans SC','PingFang SC','Helvetica Neue',sans-serif;
  font-size:15px;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:inherit;font-size:inherit}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 16px;
}
.header .back{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  color:var(--text);padding:0;margin-left:-4px;
}
.header .title{
  flex:1;text-align:center;
  font-size:17px;font-weight:700;
  margin-right:36px;
}
.header .right-btn{
  font-size:14px;color:var(--primary);
  background:none;border:none;cursor:pointer;
  font-weight:600;padding:0;
}

/* ===== Search Header ===== */
.search-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
}
.search-box{
  flex:1;height:36px;
  background:var(--bg);border:none;
  border-radius:18px;
  padding:0 16px 0 40px;
  font-size:15px;color:var(--text);outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;
}
.search-box::placeholder{color:var(--muted)}
.search-box:focus{background:#fff;box-shadow:0 0 0 2px rgba(255,56,92,.12)}

/* ===== Page Body ===== */
.page{
  padding-top:var(--header-h);
  padding-bottom:calc(var(--tab-h) + 28px + env(safe-area-inset-bottom,0px));
  min-height:100vh;
}

/* ===== Category Pills ===== */
.pills{
  display:flex;gap:8px;
  padding:14px 16px 6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex-shrink:0;
  padding:8px 18px;
  border-radius:20px;
  font-size:14px;font-weight:500;
  background:var(--card);
  color:var(--sub);
  border:none;cursor:pointer;
  transition:all .2s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.pill.active{
  background:var(--text);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ===== Feed Grid ===== */
.feed{
  column-count:2;column-gap:10px;
  padding:10px 12px;
}
.feed-item{
  break-inside:avoid;
  margin-bottom:10px;
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  transition:transform .2s ease,box-shadow .2s ease;
  display:block;
}
.feed-item:active{transform:scale(.97);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.feed-img{width:100%;display:block;background:#f0ebe6;min-height:100px}
.feed-img img{width:100%;display:block}
.feed-no-img{
  width:100%;height:140px;
  background:linear-gradient(135deg,#fff5f7,#ffe8ee);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);opacity:.3;
}
.feed-body{padding:10px 12px 12px}
.feed-title{
  font-size:14px;font-weight:600;
  line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:8px;
}
.feed-tag{
  display:inline-block;
  padding:3px 10px;border-radius:10px;
  font-size:11px;font-weight:600;
  margin-bottom:8px;
}
.tag-searching{background:#fff1f3;color:var(--primary)}
.tag-found{background:#f0fdf4;color:#16a34a}
.feed-bottom{
  display:flex;align-items:center;justify-content:space-between;
}
.feed-user{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);
}
.feed-avatar{
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#ffb74d,#ff8a65);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:9px;flex-shrink:0;
}
.feed-views{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:3px}

/* ===== Detail ===== */
.detail-hero{width:100%;max-height:55vh;object-fit:cover;background:#f0ebe6}
.detail-no-img{
  width:100%;height:240px;
  background:linear-gradient(135deg,#fff5f7,#ffe8ee);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);opacity:.3;
}
.detail-content{padding:20px 16px}
.detail-title{font-size:22px;font-weight:700;margin-bottom:12px;line-height:1.3}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.detail-tag{padding:4px 14px;border-radius:12px;font-size:12px;font-weight:600}

/* Info Card */
.info-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:4px 0;
  margin-bottom:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  font-size:15px;
}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--sub)}
.info-value{color:var(--text);font-weight:500;text-align:right;max-width:60%}

/* Description */
.desc-section{margin-bottom:20px}
.desc-title{font-size:16px;font-weight:700;margin-bottom:8px}
.desc-text{font-size:15px;line-height:1.8;color:var(--sub);white-space:pre-wrap}

/* Contact Card */
.contact-card{
  background:var(--primary-light);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:20px;
}
.contact-card h4{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:12px}
.contact-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;font-size:15px;
}
.contact-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Report Section */
.report-section{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px 16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.report-section h4{font-size:17px;font-weight:700;margin-bottom:4px}
.report-hint{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ===== Publish ===== */
.section-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  margin:0 16px 16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.section-label{
  font-size:13px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:14px;
  padding-left:2px;
}
.field{
  margin-bottom:16px;
}
.field:last-child{margin-bottom:0}
.field-label{
  font-size:14px;font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  display:block;
}
.field-input{
  width:100%;height:48px;
  background:var(--bg);
  border:none;border-radius:var(--radius-sm);
  padding:0 16px;
  font-size:15px;color:var(--text);
  outline:none;
  transition:background .2s,box-shadow .2s;
}
.field-input:focus{background:#fff;box-shadow:0 0 0 2px rgba(255,56,92,.12)}
.field-input::placeholder{color:var(--muted)}
textarea.field-input{
  height:auto;min-height:100px;
  padding:14px 16px;resize:none;
  line-height:1.6;
}
select.field-input{
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
}

/* Segmented Control */
.segment{
  display:flex;
  background:var(--bg);
  padding:4px;
  border-radius:14px;
}
.seg-btn{
  flex:1;padding:10px 0;
  border:none;border-radius:12px;
  text-align:center;
  font-size:14px;font-weight:500;
  color:var(--sub);
  background:transparent;
  cursor:pointer;
  transition:all .2s;
}
.seg-btn.active{
  background:var(--card);
  color:var(--text);
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Type Cards */
.type-cards{display:flex;gap:10px}
.type-card{
  flex:1;padding:16px 12px;
  border:2px solid var(--bg);
  border-radius:var(--radius);
  text-align:center;
  cursor:pointer;
  transition:all .2s;
  background:var(--card);
}
.type-card:active{transform:scale(.97)}
.type-card.active{
  border-color:var(--primary);
  background:var(--primary-light);
}
.type-card .t-icon{margin-bottom:6px;color:var(--primary)}
.type-card .t-name{font-size:14px;font-weight:600}
.type-card .t-desc{font-size:11px;color:var(--muted);margin-top:2px}

/* Upload Zone */
.upload-zone{
  height:180px;
  border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#fff5f7,#fff);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  cursor:pointer;
  position:relative;
  transition:all .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.upload-zone:active{transform:scale(.98)}
.upload-zone .u-icon{color:var(--primary);opacity:.5;margin-bottom:8px}
.upload-zone .u-text{font-size:14px;color:var(--sub)}
.upload-zone .u-hint{font-size:12px;color:var(--muted);margin-top:4px}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-preview-wrap{
  display:none;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:0;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.upload-preview-wrap.show{display:block}
.upload-preview-wrap img{width:100%;max-height:220px;object-fit:cover}
.upload-preview-wrap .remove{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.upload-status{text-align:center;font-size:13px;padding:8px 0;min-height:20px}
.upload-status.ok{color:#16a34a}
.upload-status.err{color:var(--primary)}
.upload-status.loading{color:var(--muted)}

/* ===== Buttons ===== */
.btn-primary{
  width:100%;height:52px;
  background:var(--primary-gradient);
  color:#fff;border:none;
  border-radius:26px;
  font-size:16px;font-weight:600;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(255,56,92,.3);
  transition:transform .2s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:active{transform:scale(.97);box-shadow:0 4px 12px rgba(255,56,92,.2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary .spinner{
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Floating Submit */
.float-submit{
  position:fixed;
  bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom,0px));
  left:16px;right:16px;
  z-index:90;
}

/* ===== Tab Bar (Dock) ===== */
.tab-bar{
  position:fixed;
  bottom:12px;
  left:12px;right:12px;
  height:var(--tab-h);
  border-radius:32px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  display:flex;
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab-item{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
  color:var(--muted);
  font-size:10px;font-weight:500;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.tab-item.active{color:var(--primary)}
.tab-item svg{width:22px;height:22px}
.tab-center{position:relative;top:-18px}
.tab-center .tab-circle{
  width:52px;height:52px;
  background:var(--primary-gradient);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(255,56,92,.35);
  transition:transform .2s;
}
.tab-center .tab-circle:active{transform:scale(.9)}
.tab-center .tab-circle svg{width:24px;height:24px;color:#fff}
.tab-center span{color:var(--primary);font-weight:600;margin-top:4px}

/* ===== Toast ===== */
.m-toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.85);
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:14px 28px;
  border-radius:14px;
  font-size:14px;font-weight:500;
  z-index:999;opacity:0;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  text-align:center;max-width:80%;
  backdrop-filter:blur(8px);
}
.m-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ===== Empty ===== */
.empty{text-align:center;padding:80px 20px;color:var(--muted)}
.empty .e-icon{opacity:.2;margin-bottom:16px}
.empty p{font-size:14px}

/* ===== List View ===== */
.list-item{
  display:flex;gap:14px;
  background:var(--card);
  border-radius:var(--radius);
  padding:14px;
  margin:0 12px 10px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:transform .2s;
}
.list-item:active{transform:scale(.98)}
.list-thumb{
  width:80px;height:80px;
  border-radius:var(--radius-sm);
  object-fit:cover;flex-shrink:0;
  background:#f0ebe6;
}
.list-thumb-empty{
  width:80px;height:80px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#fff5f7,#ffe8ee);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);opacity:.3;
}
.list-info{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.list-name{font-size:15px;font-weight:600;margin-bottom:4px}
.list-meta{font-size:12px;color:var(--muted)}
.list-desc{
  font-size:13px;color:var(--sub);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Animations ===== */
.feed-item,.section-card,.list-item,.info-card,.contact-card,.report-section{
  animation:fadeUp .4s ease both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.feed-item:nth-child(2){animation-delay:.05s}
.feed-item:nth-child(3){animation-delay:.1s}
.feed-item:nth-child(4){animation-delay:.15s}

/* ===== 修复：悬浮按钮和发布按钮 ===== */
.float-submit{
  position:fixed;
  bottom:calc(80px + env(safe-area-inset-bottom,0px));
  left:16px;right:16px;
  z-index:90;
}
.float-submit .btn-primary{
  width:100%;
  height:52px;
  border-radius:26px;
  background:linear-gradient(135deg,#ff385c,#ff6078);
  color:#fff;
  border:none;
  font-size:16px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(255,56,92,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.float-submit .btn-primary:active{
  transform:scale(.97);
  box-shadow:0 4px 12px rgba(255,56,92,.2);
}
.float-submit .btn-primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}
.float-submit .btn-primary .spinner{
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
}

/* 详情页内的提交按钮也确保圆角 */
.report-section .btn-primary{
  width:100%;
  height:52px;
  border-radius:26px;
  background:linear-gradient(135deg,#ff385c,#ff6078);
  color:#fff;
  border:none;
  font-size:16px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(255,56,92,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  margin-top:8px;
}
.report-section .btn-primary:active{
  transform:scale(.97);
}
.report-section .btn-primary:disabled{
  opacity:.5;
}
.report-section .btn-primary .spinner{
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
}

/* ===== 修复：Tab 圆形按钮 ===== */
.tab-center{
  position:relative;
  top:-18px;
  flex-shrink:0;
}
.tab-center .tab-circle{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff385c,#ff6078);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(255,56,92,.35);
  transition:transform .2s;
  margin:0 auto;
}
.tab-center .tab-circle:active{
  transform:scale(.9);
}
.tab-center .tab-circle svg{
  width:24px;
  height:24px;
  color:#fff;
}
.tab-center span{
  display:block;
  color:var(--primary);
  font-weight:600;
  font-size:10px;
  margin-top:4px;
  text-align:center;
}

/* ===== 修复：Tab 高亮状态 ===== */
.tab-item svg{
  transition:stroke .2s;
}
.tab-item.active svg{
  stroke:var(--primary);
}
.tab-item.active span{
  color:var(--primary);
  font-weight:600;
}