/* ===== Warmwhisper 心愈倾诉平台 · 公共样式 ===== */

@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/noto-400.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/noto-700.woff2') format('woff2');
}

:root{
  /* 品牌色 */
  --primary:#FBA02E;
  --primary-dark:#D55E02;
  --primary-2:#9E6026;
  --select-on:#F1710D;
  --select-off:#6B2A02;
  /* 背景 */
  --bg:#FFFFFF;
  --bg-soft:#FFF8EC;
  --page-outer:#EDEDF0;
  /* 卡片 */
  --card-grad-top:#FDFFF1;
  --card-grad-bot:#FCE77B;
  --card-active-top:#FCC570;
  --card-active-bot:#F8A848;
  --icon-bg:#FCFECC;
  --border:#EFE6CC;
  --search-border:#DF933D;
  /* 文字 */
  --text:#3D2C1E;
  --text-sub:#9C836A;
  --text-dark:#6B5236;
  --white:#ffffff;
  --ok:#34A853;
  --danger:#E8493B;
}

.upload-preview{display:none;min-height:82px;margin-top:8px;align-items:center;gap:10px;padding:8px;border:1px solid #F0E0BE;border-radius:8px;background:#FFFDF8;overflow:hidden}.upload-preview.show{display:flex}.upload-preview img,.upload-preview video{width:92px;height:72px;flex:0 0 92px;border-radius:6px;background:#F5EBDD;object-fit:cover}.upload-preview audio{width:100%;min-width:0}.upload-preview span{min-width:0;color:var(--text-sub);font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.upload-select{display:inline-flex;min-height:40px;flex:0 0 auto;align-items:center;justify-content:center;padding:8px 13px;border:1px solid transparent;border-image:url("assets/light-yellow-button-background-transparent-86x71.png") 18 fill / 18px / 0 stretch;border-radius:18px;color:var(--primary-dark);font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(221,173,28,.12)}
.media-upload-card{position:relative;display:flex;width:100%;height:142px;align-items:center;justify-content:center;border:1.5px dashed #E2C99E;border-radius:8px;background:#FFFDF8;overflow:hidden;cursor:pointer;transition:border-color .18s,background .18s}.media-upload-card.compact{height:104px}.media-upload-card.avatar{width:116px;height:116px}.media-upload-card:active{background:#FFF7E8;border-color:#D9A95C}.media-upload-card.has-media{border-style:solid;background:#F7EEDD}.media-upload-card-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;color:var(--text-sub);font-size:11px;text-align:center}.media-upload-card-empty svg{width:27px;height:27px;color:var(--primary-dark);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.media-upload-card-empty b{color:var(--text);font-size:13px}.media-upload-card.has-media .media-upload-card-empty{display:none}.media-upload-card .upload-preview{position:absolute;inset:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#F5EBDD}.media-upload-card .upload-preview.show{display:block}.media-upload-card .upload-preview img,.media-upload-card .upload-preview video{width:100%;height:100%;border-radius:0;object-fit:cover}.media-upload-card.avatar .upload-preview img{object-fit:cover}.media-upload-card .upload-preview audio{position:absolute;left:12px;right:12px;bottom:14px;width:calc(100% - 24px)}.media-upload-card .upload-preview span{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;background:rgba(45,34,25,.64);color:#fff;font-size:11px;text-align:center}.media-upload-card .upload-preview audio+span{top:12px;bottom:auto;background:transparent;color:var(--text);font-weight:700}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;color:inherit;}
.ico{
  width:1em;height:1em;display:inline-block;vertical-align:-2px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ico.fill{fill:currentColor;stroke:none;}
.like-icon{color:#D8A29A!important;}
.listener-rank{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:middle;}
.listener-rank .rank-text{font-style:normal;}
.listener-rank .rank-stars{display:inline-flex;align-items:center;gap:1px;}
.listener-rank .rank-star,
img.rank-star{width:.9em!important;height:.9em!important;max-width:.9em!important;max-height:.9em!important;display:block;flex:0 0 auto;object-fit:contain;}
html,body{
  font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--page-outer);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ===== 手机容器框架 ===== */
.phone{
  width:100%;max-width:427px;margin:0 auto;
  background:var(--bg);position:relative;overflow:hidden;
  box-shadow:0 0 24px rgba(0,0,0,.08);
  padding-top:env(safe-area-inset-top);
  padding-bottom:calc(66px + env(safe-area-inset-bottom));
  min-height:100vh;
}

/* ===== 顶部导航栏(子页面) ===== */
.navbar{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--bg);border-bottom:1px solid #F0E6D2;
  position:sticky;top:0;z-index:20;
}
.navbar .back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;}
.navbar .title{font-size:17px;font-weight:700;color:var(--text);}
.navbar .title .sub{font-size:12px;color:var(--text-sub);font-weight:400;margin-left:5px;}
.navbar .right{min-width:32px;display:flex;align-items:center;gap:10px;color:var(--text-sub);}

/* ===== 状态栏(桌面预览模拟) ===== */
.statusbar{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:15px;font-weight:600;color:var(--text);
}
.statusbar .right{display:flex;align-items:center;gap:6px;}
.statusbar svg{display:block;}

/* ===== 区块/标题 ===== */
.section{padding:6px 16px 14px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.section-title{font-size:16px;font-weight:700;color:var(--text);}
.section-title .sub{font-size:12px;color:var(--text-sub);font-weight:400;margin-left:5px;}
.section-more{font-size:12px;color:var(--text-sub);display:flex;align-items:center;gap:2px;text-decoration:none;}

/* ===== 话题按钮(渐变立体) ===== */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.topic{
  background:transparent;border:1px solid transparent;border-image:url("assets/light-yellow-button-background-transparent-86x71.png") 18 fill / 18px / 0 stretch;
  border-radius:14px;padding:9px 9px;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  text-decoration:none;color:inherit;
  box-shadow:0 2px 6px rgba(221,173,28,0.12);
  transition:transform .12s ease;
}
.topic:active{transform:translateY(1px);}
.topic.active{background:transparent;border:1px solid transparent;border-image:url("assets/yellow-button-background-transparent-86x70.png") 18 fill / 18px / 0 stretch;
  box-shadow:0 2px 7px rgba(245,155,46,0.18);}
.topic .ic{width:22px;height:22px;border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--border);margin-left:1px;}
.topic .ic svg{width:13px;height:13px;stroke:#9C6B3F;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.topic.active .ic{background:#FFFFFF;border-color:#FFFFFF;}
.topic .t-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.2;}
.topic .t-sub{font-size:11px;color:var(--text-dark);transform:scale(.92);transform-origin:left center;line-height:1.2;}

/* ===== 快捷入口(横向 圆形) ===== */
.shortcuts{display:flex;justify-content:space-around;padding:4px 16px 18px;}
.shortcut{display:flex;flex-direction:row;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.shortcut .sic{width:40px;height:40px;border-radius:50%;background:var(--icon-bg);
  display:flex;align-items:center;justify-content:center;color:var(--primary-dark);flex-shrink:0;}
.shortcut .sic svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.shortcut .s-name{font-size:13px;color:var(--text);font-weight:500;}

/* ===== 卡片 ===== */
.card{background:var(--bg);border-radius:18px;margin:0 16px 14px;padding:9px 10px 6px;border:none;}
.card.has-border{border:1px solid #ECDFBE;}

/* ===== 列表行 ===== */
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-bottom:1px solid #F5EDDE;text-decoration:none;color:inherit;}
.row:last-child{border-bottom:none;}
.row .avatar{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;background-color:#F0E6D2;}
.row .info{flex:1;min-width:0;}
.row .info .name{font-size:14px;font-weight:600;color:var(--text);}
.row .info .desc{font-size:12px;color:var(--text-sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .arrow{color:var(--text-sub);}

/* ===== 倾听师卡片 ===== */
.listener-card{background:var(--bg);border-radius:14px;padding:12px;margin:0 16px 10px;display:flex;gap:12px;align-items:center;border:1px solid #F5EDDE;}
.listener-card .lc-ava{width:58px;height:58px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;position:relative;background-color:#F0E6D2;}
.listener-card .lc-ava .online{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid #fff;}
.listener-card .lc-ava .online.online{background:var(--ok);}
.listener-card .lc-ava .online.busy{background:var(--primary-dark);}
.listener-card .lc-ava .online.offline{background:#B9AD9C;}
.listener-card .lc-main{flex:1;min-width:0;}
.listener-card .lc-name{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;min-width:0;}
.listener-card .lc-name .lvl{font-size:10px;color:var(--primary-dark);background:#FFF1D6;padding:1px 5px;border-radius:6px;font-weight:400;}
.listener-card .lc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.listener-card .lc-tags span{font-size:10px;color:var(--text-dark);background:#FBF3E0;padding:2px 6px;border-radius:6px;display:inline-flex;align-items:center;gap:2px;max-width:100%;}
.listener-card .lc-meta{font-size:11px;color:var(--text-sub);margin-top:5px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.listener-card .lc-meta b{color:var(--primary-dark);font-weight:600;}
.listener-card .lc-go{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.listener-card .lc-price{font-size:12px;color:var(--primary-dark);font-weight:700;}
.listener-card .lc-price small{font-size:10px;color:var(--text-sub);font-weight:400;}
.btn-call{background:transparent;border:1px solid transparent;border-image:url("assets/yellow-button-background-transparent-86x70.png") 18 fill / 18px / 0 stretch;color:#fff;border-radius:16px;
  padding:6px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:3px;cursor:pointer;
  box-shadow:0 2px 7px rgba(245,155,46,0.18);}

/* ===== 标签/胶囊 ===== */
.tag{font-size:11px;color:var(--primary-dark);background:#FFF1D6;padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px;}
.chip{font-size:12px;color:var(--text);background:transparent;border:1px solid transparent;border-image:url("assets/light-yellow-button-background-transparent-86x71.png") 18 fill / 18px / 0 stretch;border-radius:16px;padding:6px 13px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(221,173,28,0.12);}
.chip.on{color:#fff;background:transparent;border:1px solid transparent;border-image:url("assets/yellow-button-background-transparent-86x70.png") 18 fill / 18px / 0 stretch;box-shadow:0 2px 7px rgba(245,155,46,0.18);}

/* ===== 筛选条 ===== */
.filter-bar{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-row{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid #F5EDDE;font-size:13px;color:var(--text-sub);}
.filter-row .f-item{display:flex;align-items:center;gap:4px;}

/* ===== 主按钮 ===== */
.btn-primary{display:block;width:100%;background:transparent;border:1px solid transparent;border-image:url("assets/yellow-button-background-transparent-86x70.png") 18 fill / 18px / 0 stretch;color:#fff;
  border-radius:24px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;text-align:center;
  box-shadow:0 4px 12px rgba(248,168,72,.3);}
.btn-primary:active{transform:translateY(1px);}
.btn-outline{display:block;width:100%;background:transparent;border:1px solid transparent;border-image:url("assets/light-yellow-button-background-transparent-86x71.png") 18 fill / 18px / 0 stretch;color:var(--primary-dark);
  border-radius:24px;padding:11px;font-size:15px;font-weight:600;cursor:pointer;text-align:center;}

/* ===== 输入框 ===== */
.input{width:100%;height:42px;background:#FFF8EC;border:1px solid #F0E0BE;border-radius:12px;padding:0 14px;font-size:14px;color:var(--text);outline:none;}
.input:focus{border-color:var(--primary);}
textarea.input{height:auto;padding:12px 14px;line-height:1.6;resize:none;}

/* ===== 搜索栏 ===== */
.searchbar{display:flex;align-items:center;gap:10px;padding:6px 16px 12px;}
.search-input{flex:1;height:42px;background:var(--white);border:1.5px solid var(--search-border);border-radius:21px;
  display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--text-sub);font-size:13px;}

/* ===== 底部导航 ===== */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:427px;height:calc(66px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--white);border-top:1px solid #EFE7D6;
  display:flex;box-shadow:0 -2px 10px rgba(0,0,0,.04);z-index:30;
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--select-off);font-size:10.5px;text-decoration:none;}
.tab svg{width:22px;height:22px;}
.tab.active{color:var(--select-on);}

/* ===== 通用工具 ===== */
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.muted{color:var(--text-sub);}
.bold{font-weight:700;}
.price{color:var(--primary-dark);font-weight:700;}
.hr{height:1px;background:#F0E6D2;margin:10px 0;}
.empty{padding:60px 20px;text-align:center;color:var(--text-sub);font-size:13px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* 桌面模拟手机外观(保留状态栏),真机隐藏 */
@media (max-width:520px){
  .statusbar{display:none;}
  .phone{box-shadow:none;}
}

/* ===== 移动端图标尺寸归一化 ===== */
.navbar .back svg{width:18px!important;height:18px!important;}
.navbar .right svg{width:18px!important;height:18px!important;flex-shrink:0;}
.section-more svg,.filter-btn svg,.tag svg{max-width:12px;max-height:12px;flex-shrink:0;}
.search-input svg{width:15px!important;height:15px!important;flex-shrink:0;}
.tab svg{width:20px!important;height:20px!important;flex-shrink:0;}
.bottom-bar .ic-btn svg,.submit-bar .ic-btn svg,.join-bar .ic-link svg{width:18px!important;height:18px!important;flex-shrink:0;}
.bottom-bar .ic-btn,.submit-bar .ic-btn,.join-bar .ic-link{min-width:38px;flex-shrink:0;}
.menu .mic .ico,.menu-mini .mic .ico,.m-row .mv svg,.menu .ma svg{width:16px!important;height:16px!important;font-size:16px!important;flex-shrink:0;}
.chat .ca .ico,.feed-item .ico,.review .ico,.lc-meta .ico,.lc-tags .ico{width:13px!important;height:13px!important;font-size:13px!important;}
.btn-primary svg,.btn-outline svg,.btn-call svg,button svg{max-width:16px;max-height:16px;flex-shrink:0;}

@media (max-width:340px){
  html,body{font-size:13px;}
  .phone{padding-bottom:calc(62px + env(safe-area-inset-bottom));}
  .navbar{height:46px;padding-left:10px;padding-right:10px;}
  .navbar .back{width:30px;height:30px;flex:0 0 30px;}
  .navbar .title{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .navbar .title .sub{font-size:11px;margin-left:3px;}
  .navbar .right{min-width:28px;gap:7px;flex-shrink:0;}
  .section{padding-left:12px;padding-right:12px;}
  .section-head{margin-bottom:9px;}
  .section-title{font-size:15px;}
  .section-title .sub{font-size:11px;margin-left:3px;}
  .section-more{font-size:11px;white-space:nowrap;}
  .card{margin-left:12px;margin-right:12px;border-radius:14px;padding:10px 9px 7px;}
  .row{gap:10px;padding:11px 12px;}
  .row .avatar{width:42px;height:42px;}
  .row .info .name{font-size:13px;}
  .row .info .desc{font-size:11px;}
  .searchbar{padding-left:12px;padding-right:12px;gap:8px;}
  .search-input{height:40px;min-width:0;padding-left:12px;padding-right:12px;font-size:12px;}
  .search-input span,.search-input input{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .filter-bar{padding-left:12px;padding-right:12px;gap:6px;}
  .filter-row{gap:10px;padding-left:12px;padding-right:12px;font-size:12px;overflow-x:auto;scrollbar-width:none;}
  .filter-row::-webkit-scrollbar{display:none;}
  .filter-row .f-item{flex:0 0 auto;white-space:nowrap;}
  .chip{font-size:11px;padding:5px 10px;border-radius:14px;}
  .tag{font-size:10px;padding:2px 6px;}
  .btn-primary,.btn-outline{font-size:14px;padding:11px 12px;border-radius:22px;}
  .input{height:40px;padding-left:12px;padding-right:12px;font-size:13px;}
  textarea.input{padding:10px 12px;}
  .topics{gap:6px;}
  .topic{border-radius:11px;padding:6px 6px;gap:2px;}
  .topic .ic{width:18px;height:18px;}
  .topic .ic svg{width:11px!important;height:11px!important;}
  .topic .t-name{font-size:11.5px;line-height:1.15;}
  .topic .t-sub{font-size:9.5px;line-height:1.15;transform:none;}
  .shortcuts{padding-left:10px;padding-right:10px;gap:4px;}
  .shortcut{gap:5px;min-width:0;}
  .shortcut .sic{width:30px;height:30px;}
  .shortcut .s-name{font-size:11px;white-space:nowrap;}
  .listener-card{margin-left:12px;margin-right:12px;padding:10px;gap:9px;border-radius:12px;}
  .listener-card .lc-ava{width:50px;height:50px;}
  .listener-card .lc-name{font-size:13px;gap:4px;}
  .listener-card .lc-name .lvl{font-size:9px;padding:1px 4px;}
  .listener-card .lc-tags,.listener-card .lc-meta{margin-top:4px;}
  .listener-card .lc-tags span,.listener-card .lc-cats span{font-size:9px;padding:2px 5px;}
  .listener-card .lc-meta{font-size:10px;}
  .listener-card .lc-price{font-size:11px;}
  .btn-call{font-size:11px;padding:5px 8px;border-radius:14px;}
  .grid2{gap:8px;}
  .tab svg{width:18px!important;height:18px!important;}
  .tab{font-size:10px;}
  .tabbar{height:calc(62px + env(safe-area-inset-bottom));}
  .bottom-bar,.submit-bar{gap:8px!important;padding-left:10px!important;padding-right:10px!important;}
  .bottom-bar .ic-btn svg,.submit-bar .ic-btn svg,.join-bar .ic-link svg{width:16px!important;height:16px!important;}
  .bottom-bar .btn-primary,.submit-bar .btn-primary{padding-left:14px!important;padding-right:14px!important;}
}