/* assets/css/app.css  房屋信息前台 + 后台表单 - 移动优先 */
:root{
  --hi-primary:#0b7cf0;
  --hi-primary-weak:#e8f2fe;
  --hi-text:#111827;
  --hi-text-2:#6b7280;
  --hi-text-3:#9aa1ab;
  --hi-bg:#f4f5f7;
  --hi-card:#fff;
  --hi-border:#eceef1;
  --hi-price:#f5511e;
  --hi-radius:12px;
  --hi-shadow:0 1px 2px rgba(17,24,39,.06);
  --hi-safe-b:env(safe-area-inset-bottom,0px);
  --hi-top:0px;
}
.hi-page *, .hi-page *::before, .hi-page *::after{box-sizing:border-box}
.hi-page{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.5;color:var(--hi-text);background:var(--hi-bg);-webkit-font-smoothing:antialiased}
.hi-page img{display:block;max-width:100%}
.hi-page button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hi-page a{-webkit-tap-highlight-color:transparent}

/* ---------- 搜索 ---------- */
.hi-search{
  position:sticky;top:var(--hi-top);z-index:30;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hi-border);
  padding:10px 12px 8px;
}
.hi-search__bar{display:flex;gap:10px;align-items:center}
.hi-search__input{flex:1;min-width:0}
.hi-search__input input{
  width:100%;height:42px;padding:0 14px 0 38px;border:none;border-radius:21px;
  background:#f1f3f6 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%239aa1ab' stroke-width='1.6' fill='none'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%239aa1ab' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center;
  font-size:16px;color:var(--hi-text);outline:none;-webkit-appearance:none;
}
.hi-search__input input:focus{background-color:#e9ecf1}
.hi-search__filter{
  flex:none;height:42px;padding:0 16px;border:none;border-radius:21px;
  background:var(--hi-primary-weak);color:var(--hi-primary);
  font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:5px;
}
.hi-search__filter:active{background:#d8e8fd}
.hi-search__filter .hi-dot{width:6px;height:6px;border-radius:50%;background:var(--hi-primary)}

.hi-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}
.hi-chips::-webkit-scrollbar{display:none}
.hi-chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;border:none;border-radius:14px;
  background:var(--hi-primary-weak);color:var(--hi-primary);
  font-size:12.5px;white-space:nowrap;
}
.hi-chip span{opacity:.55;font-size:14px;line-height:1}

/* ---------- 列表 ---------- */
.hi-wrap{max-width:1280px;margin:0 auto}
.hi-summary{padding:12px 14px 0;font-size:13px;color:var(--hi-text-2)}
.hi-list{display:grid;gap:10px;padding:10px 12px 0}
.hi-empty{padding:70px 20px;text-align:center;color:var(--hi-text-3);font-size:14px}

.hi-card{
  display:flex;gap:12px;padding:10px;
  background:var(--hi-card);border-radius:var(--hi-radius);
  box-shadow:var(--hi-shadow);cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.hi-card:active{transform:scale(.992)}
.hi-card__media{
  position:relative;flex:0 0 118px;width:118px;aspect-ratio:4/3;
  border-radius:8px;overflow:hidden;background:#eef0f3;
}
.hi-card__media::after{
  content:"暂无图片";position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#a7adb6;
}
.hi-card__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.hi-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hi-card__title{
  margin:0;font-size:15px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hi-tags{display:flex;flex-wrap:wrap;gap:6px}
.hi-tag{
  height:20px;padding:0 6px;border-radius:4px;font-size:11.5px;line-height:20px;
  background:var(--hi-primary-weak);color:var(--hi-primary);
}
.hi-tag--ghost{background:#f2f4f7;color:var(--hi-text-2)}
.hi-card__addr{
  font-size:12.5px;color:var(--hi-text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hi-card__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hi-price{font-size:17px;font-weight:700;color:var(--hi-price);line-height:1.1}
.hi-price i{font-size:11.5px;font-style:normal;font-weight:500;margin-left:2px;color:var(--hi-text-3)}
.hi-time{font-size:12px;color:var(--hi-text-3);flex:none}

.hi-pager{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:20px 12px calc(24px + var(--hi-safe-b));
}
.hi-pager__btn{
  min-width:86px;height:40px;padding:0 16px;border-radius:20px;
  border:1px solid var(--hi-border);background:var(--hi-card);
  font-size:14px;transition:background .15s;
}
.hi-pager__btn:active{background:#f2f4f7}
.hi-pager__btn:disabled{opacity:.4}
.hi-pager__info{font-size:13px;color:var(--hi-text-2);min-width:76px;text-align:center}

/* ---------- 筛选抽屉 ---------- */
.hi-sheet{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.hi-sheet.is-open{visibility:visible;pointer-events:auto}
.hi-sheet__mask{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s}
.hi-sheet.is-open .hi-sheet__mask{opacity:1}
.hi-sheet__panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:82vh;display:flex;flex-direction:column;
  background:var(--hi-card);border-radius:16px 16px 0 0;
  padding-bottom:var(--hi-safe-b);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.hi-sheet.is-open .hi-sheet__panel{transform:none}
.hi-sheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--hi-border);font-weight:600;
}
.hi-sheet__close{border:none;background:none;font-size:18px;color:var(--hi-text-3);padding:4px 6px;line-height:1}
.hi-sheet__body{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hi-sheet__foot{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--hi-border)}
.hi-btn{flex:1;height:46px;border:none;border-radius:23px;font-size:15px;font-weight:600}
.hi-btn--primary{background:var(--hi-primary);color:#fff}
.hi-btn--primary:active{background:#0969c9}
.hi-btn--ghost{flex:0 0 104px;background:#f2f4f7;color:var(--hi-text-2)}

.hi-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.hi-field>label{font-size:13px;color:var(--hi-text-2)}
.hi-field select{
  width:100%;height:46px;padding:0 36px 0 12px;border:1px solid var(--hi-border);
  border-radius:10px;background:#f8f9fb;font-size:16px;color:var(--hi-text);
  -webkit-appearance:none;appearance:none;outline:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239aa1ab' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ---------- 详情层 ---------- */
.hi-detail{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:var(--hi-card);visibility:hidden;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility .3s;
}
.hi-detail.is-open{visibility:visible;transform:none}
.hi-detail__bar{
  flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 8px;
  border-bottom:1px solid var(--hi-border);background:var(--hi-card);
}
.hi-detail__back{
  width:40px;height:40px;border:none;background:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--hi-text);
}
.hi-detail__back:active{background:#f2f4f7}
.hi-detail__name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-detail__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + var(--hi-safe-b))}

.hi-gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px;scrollbar-width:none;background:#f7f8fa}
.hi-gallery::-webkit-scrollbar{display:none}
.hi-gallery figure{
  flex:0 0 84%;margin:0;scroll-snap-align:center;aspect-ratio:4/3;
  border-radius:10px;overflow:hidden;background:#eef0f3;position:relative;
  cursor:zoom-in;
}
.hi-gallery figure::after{
  content:"点击看大图";
  position:absolute;right:6px;bottom:6px;
  background:rgba(0,0,0,.5);color:#fff;
  font-size:11px;line-height:1;padding:3px 8px;border-radius:10px;
  pointer-events:none;
}
.hi-gallery img{width:100%;height:100%;object-fit:cover}

.hi-pricebox{
  display:flex;align-items:baseline;gap:8px;
  padding:16px;background:var(--hi-card);border-bottom:8px solid var(--hi-bg);
}
.hi-pricebox b{font-size:26px;color:var(--hi-price);font-weight:700;line-height:1}
.hi-pricebox i{font-style:normal;font-size:13px;color:var(--hi-text-3)}
.hi-section{padding:16px;border-bottom:8px solid var(--hi-bg)}
.hi-section h3{margin:0 0 12px;font-size:15px;font-weight:600}
.hi-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.hi-kv div{font-size:13.5px}
.hi-kv dt{color:var(--hi-text-3);font-size:12.5px;margin-bottom:2px}
.hi-kv dd{margin:0;color:var(--hi-text);font-weight:500}
.hi-desc{font-size:14.5px;line-height:1.75;color:#374151;word-break:break-word}
.hi-keywords{display:flex;flex-wrap:wrap;gap:8px}
.hi-keywords span{padding:4px 10px;border-radius:6px;background:#f2f4f7;font-size:12.5px;color:var(--hi-text-2)}
.hi-contact{display:flex;gap:10px;padding:16px}
.hi-contact a{
  flex:1;height:46px;border-radius:23px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;text-decoration:none;
}
.hi-contact .hi-call{background:var(--hi-primary);color:#fff}
.hi-contact .hi-sms{background:var(--hi-primary-weak);color:var(--hi-primary)}

/* ========== 大图查看 lightbox（铺满宽度可滚动） ========== */
.hi-lightbox{
  position:fixed;inset:0;z-index:120;
  background:#000;
  opacity:0;visibility:hidden;
  transition:opacity .2s;
}
.hi-lightbox.is-open{opacity:1;visibility:visible}

/* 图片区域：铺满屏幕，可上下滚动 */
.hi-lightbox__stage{
  position:absolute;inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0;
  margin:0;
}
.hi-lightbox__stage img.hi-lb-img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  cursor:zoom-out;
}

/* 关闭按钮：悬浮在右上角 */
.hi-lightbox__close{
  position:fixed;top:12px;right:12px;width:40px;height:40px;
  border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  font-size:18px;line-height:1;z-index:3;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.hi-lightbox__close:active{background:rgba(0,0,0,.85)}

/* 左右切换 */
.hi-lightbox__nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;
  border:none;z-index:3;padding:0;-webkit-tap-highlight-color:transparent;
}
.hi-lightbox__prev{left:12px}
.hi-lightbox__next{right:12px}
.hi-lightbox__nav:active{background:rgba(0,0,0,.85)}

/* 图片计数 */
.hi-lightbox__counter{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;background:rgba(0,0,0,.55);
  padding:4px 12px;border-radius:14px;z-index:3;
}

/* ========== 后台表单 ========== */
.hi-pagebar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:720px;margin:0 auto;padding:12px 12px 4px;
}
.hi-pagebar__title{font-size:17px;font-weight:600;color:var(--hi-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-pagebar__back{
  display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;
  border-radius:18px;background:var(--hi-primary-weak);color:var(--hi-primary);
  font-size:13px;text-decoration:none;font-weight:500;flex:none;
}

.hi-edit{
  max-width:720px;margin:0 auto;
  padding:8px 12px calc(90px + var(--hi-safe-b));
}

.hi-panel{
  background:var(--hi-card);border-radius:var(--hi-radius);
  box-shadow:var(--hi-shadow);margin-bottom:12px;overflow:hidden;
}
.hi-panel__head{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 0;font-size:14px;font-weight:600;color:var(--hi-text);
}
.hi-panel__head .hi-panel__icon{font-size:16px;line-height:1}
.hi-panel__body{padding:14px 16px 16px}

.hi-form__item{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.hi-form__item:last-child{margin-bottom:0}
.hi-form__label{font-size:13.5px;color:var(--hi-text-2);font-weight:500}
.hi-form__req{color:#e5484d;margin-left:2px}
.hi-form__input{
  width:100%;height:46px;padding:0 12px;border:1px solid var(--hi-border);
  border-radius:10px;background:#f8f9fb;font-size:16px;color:var(--hi-text);
  outline:none;-webkit-appearance:none;font-family:inherit;
  transition:border-color .15s,background .15s;
}
textarea.hi-form__input{height:auto;min-height:110px;padding:10px 12px;line-height:1.6;resize:vertical}
select.hi-form__input{
  padding-right:36px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239aa1ab' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.hi-form__input:focus{border-color:var(--hi-primary);background:#fff;box-shadow:0 0 0 3px rgba(11,124,240,.12)}
.hi-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hi-form__help{font-size:12px;color:var(--hi-text-3);line-height:1.5}

.hi-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.hi-preset{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border:1px solid var(--hi-border);border-radius:18px;
  background:#f8f9fb;font-size:12.5px;line-height:1;cursor:pointer;
  font-family:inherit;-webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.hi-preset:active,.hi-preset:hover{
  background:var(--hi-primary-weak);border-color:var(--hi-primary);color:var(--hi-primary);
}
.hi-preset__name{color:var(--hi-text);font-weight:500}
.hi-preset__phone{color:var(--hi-text-3);font-size:12px}

.hi-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.hi-img-item{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#eef0f3}
.hi-img-item img{width:100%;height:100%;object-fit:cover;display:block}
.hi-img-item .hi-img-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;text-align:center;padding:6px;
  pointer-events:none;
}
.hi-img-item.is-error .hi-img-overlay{background:rgba(229,72,77,.8)}
.hi-img-item.is-loading img{opacity:.6}
.hi-img-del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;
  border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;
  font-size:14px;line-height:26px;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hi-img-del:active{background:rgba(0,0,0,.85)}
.hi-img-add{
  aspect-ratio:1/1;border:2px dashed #d5d8de;border-radius:10px;background:#fafbfc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--hi-text-3);font-size:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hi-img-add:active{background:#f2f4f7;border-color:var(--hi-primary);color:var(--hi-primary)}
.hi-img-add b{font-size:22px;font-weight:400;line-height:1;color:var(--hi-primary)}
.hi-img-tip{font-size:12px;color:var(--hi-text-3);line-height:1.6;margin-top:10px}

.hi-savebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--hi-border);
  padding:10px 16px calc(10px + var(--hi-safe-b));
}
.hi-savebar .hi-btn{height:46px;border-radius:23px;width:100%;font-size:15px;font-weight:600}

.hi-form-actions-bottom{display:none;gap:10px;margin-top:8px}
.hi-form-actions-bottom .hi-btn{height:48px;border-radius:12px}

/* ---------- PC 适配 ---------- */
@media (min-width:900px){
  .hi-search{padding:14px 24px}
  .hi-search__input input{max-width:420px}
  .hi-list{grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 24px 0}
  .hi-summary{padding:18px 24px 0}
  .hi-card{flex-direction:column;padding:0;overflow:hidden;border-radius:14px}
  .hi-card__media{flex:none;width:100%;aspect-ratio:16/10;border-radius:0}
  .hi-card__body{padding:12px 14px 14px;gap:8px}
  .hi-card:hover{box-shadow:0 6px 20px rgba(17,24,39,.1);transform:translateY(-2px)}

  .hi-sheet__panel{left:auto;top:0;bottom:0;right:0;width:380px;max-height:none;border-radius:0;padding-bottom:0;transform:translateX(100%)}
  .hi-sheet.is-open .hi-sheet__panel{transform:none}

  .hi-detail{
    inset:auto;left:50%;top:50%;width:760px;max-width:92vw;max-height:88vh;
    border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);
    transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:visible;
    transition:transform .25s,opacity .25s;
  }
  .hi-detail.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .hi-gallery figure{flex-basis:60%}
  .hi-mask{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s}
  .hi-mask.is-open{opacity:1;visibility:visible}

  .hi-edit{padding-bottom:24px}
  .hi-savebar{display:none}
  .hi-form-actions-bottom{display:flex}
  .hi-imgs{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:1280px){
  .hi-list{grid-template-columns:repeat(4,1fr)}
}
/* ========== 上传状态（新增） ========== */
.hi-img-item.is-pending{
  border:2px dashed var(--hi-primary);
}
.hi-img-item.is-pending::after{
  content:"待上传";
  position:absolute;left:6px;bottom:6px;
  background:rgba(11,124,240,.92);color:#fff;
  font-size:11px;line-height:1;padding:3px 8px;border-radius:10px;
  pointer-events:none;z-index:2;
}
.hi-img-item.is-uploading::after{
  content:"上传中…";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:500;
  z-index:2;
}
.hi-img-item.is-error::after{
  content:"上传失败";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(229,72,77,.85);color:#fff;font-size:12px;font-weight:500;
  z-index:2;
}