/* ============================================================
   邻里生活平台 · 原型全局设计规范 common.css  v1.1-0811
   UI 方向：贝壳骨架 + Wellcee 设计 + 灵猫房源大卡
   v1.1：去 AI 化——SVG 图标替代 emoji、扁平插画占位、PM 标注默认隐藏（评审模式开启）
   ============================================================ */
:root{
  --brand:#FF6B35; --brand-dark:#E5511E; --brand-light:#FFF1EB;
  --teal:#13C2C2; --teal-light:#E6FFFB;
  --gold:#FAAD14; --gold-light:#FFF7E0;
  --red:#F5222D; --red-light:#FFF1F0;
  --green:#52C41A; --green-light:#F6FFED;
  --ink:#1A1A1A; --ink-2:#5F6670; --ink-3:#9AA0A6;
  --bg:#F6F7F9; --card:#FFF; --line:#ECEEF1;
  --pc-side:#23272E; --pc-side-2:#2E333B;
  --shadow:0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --r:12px; --r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;background:#E9EBEE;color:var(--ink);font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--brand);text-decoration:none}

/* SVG 图标与插画场景 */
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:none}
.ic.sm{width:16px;height:16px}.ic.lg{width:24px;height:24px}
svg.scene{width:100%;height:100%;display:block}

/* ---------- 通用组件 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;background:var(--brand);color:#fff;transition:.15s}
.btn:active{background:var(--brand-dark)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--brand-light);color:var(--brand)}
.btn.line{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.btn.gray{background:#F2F3F5;color:var(--ink-2)}
.btn.disabled,.btn:disabled{background:#DFE2E6;color:#fff;pointer-events:none}
.btn.sm{padding:5px 12px;font-size:12px;border-radius:8px}
.btn.lg{padding:13px 18px;font-size:16px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.row{display:flex;align-items:center}
.gap8{gap:8px}.gap12{gap:12px}
.between{justify-content:space-between}
.mut{color:var(--ink-3);font-size:12px}
.small{font-size:12px}
.b{font-weight:700}
.price{color:var(--brand);font-weight:800;font-size:20px}
.line-through{text-decoration:line-through;color:var(--ink-3);font-size:12px}
.divider{height:1px;background:var(--line);margin:10px 0}
.sec-title{font-size:16px;font-weight:800;margin:14px 0 10px}
.sec-title .mut{font-weight:400}

/* 标签 chips */
.tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;line-height:1.6}
.tag-house{background:var(--brand);color:#fff}
.tag-bld{background:var(--teal-light);color:#0E8F8F}
.tag-real{background:var(--green-light);color:#389E0D}
.tag-gold{background:var(--gold);color:#7A4E00}
.tag-gray{background:#F2F3F5;color:var(--ink-2)}
.tag-red{background:var(--red-light);color:var(--red)}
.tag-green{background:var(--green-light);color:#389E0D}
.tag-orange{background:var(--brand-light);color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;border-radius:6px;background:#F2F3F5;color:var(--ink-2);font-size:12px}
.chip.on{background:var(--brand-light);color:var(--brand);font-weight:700}

/* P级/补充横幅（PM 标注：默认隐藏，评审模式可见） */
.flag{padding:8px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.flag-p1{background:#E6F4FF;color:#0958D9}
.flag-p2{background:#F9F0FF;color:#531DAB}
.flag-new{background:var(--gold-light);color:#AD6800}
.pm-note{display:none!important}
body.review .pm-note{display:flex!important}
body.review span.pm-note,body.review td.pm-note,body.review div.pm-note{display:block!important}
body.review .flag.pm-note{display:flex!important}

/* 规则提示条（产品内可见的运营/提示文案才用，PM 说明请加 pm-note） */
.rule-bar{background:var(--gold-light);color:#AD6800;border-radius:var(--r-sm);padding:8px 12px;font-size:12px;display:flex;gap:6px;align-items:flex-start}
.rule-bar.blue{background:#E6F4FF;color:#0958D9}
.rule-bar.red{background:var(--red-light);color:var(--red)}
.rule-bar.green{background:var(--green-light);color:#389E0D}

/* 表单 */
.field{margin-bottom:14px}
.field .label{font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:600}
.field .label .req{color:var(--red)}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:#fff;color:var(--ink)}
.textarea{min-height:90px;resize:none}
.hint-gray{color:var(--ink-3);font-size:12px;margin-top:6px}
.form-sec{font-size:14px;font-weight:800;margin:18px 0 10px;padding-left:9px;border-left:3px solid var(--brand)}

/* 空状态 */
.empty{text-align:center;padding:48px 20px;color:var(--ink-3)}
.empty .emo{font-size:44px;display:block;margin-bottom:10px}

/* 列表项 */
.cell{display:flex;align-items:center;gap:10px;padding:13px 14px;background:#fff;border-bottom:1px solid var(--line)}
.cell:last-child{border-bottom:none}
.cell .ico{width:22px;text-align:center;color:var(--ink-2)}
.cell .arrow{margin-left:auto;color:var(--ink-3)}
.cell-group{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}

/* 头像（扁平首字母） */
.avatar{width:40px;height:40px;border-radius:50%;background:#EDF0F4;color:#8A94A3;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none;overflow:hidden}
.avatar svg{width:60%;height:60%}

/* 占位图（扁平插画，禁 emoji） */
.ph{border-radius:var(--r-sm);background:#EDF0F4;display:flex;align-items:center;justify-content:center;color:#B6BDC7;font-size:12px;position:relative;overflow:hidden}
.ph .ph-tag{position:absolute;left:6px;top:6px;background:rgba(26,26,26,.55);color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;z-index:2}
.ph .ph-cap{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(26,26,26,.45));z-index:2}

/* Toast */
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:rgba(26,26,26,.85);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;z-index:9999;opacity:0;transition:.25s;pointer-events:none;max-width:80%;text-align:center}
#toast.show{opacity:1}

/* 弹层 */
.modal{position:fixed;inset:0;background:rgba(26,26,26,.5);z-index:900;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:14px;width:100%;max-width:420px;max-height:82vh;overflow:auto;padding:20px}
.modal-box.wide{max-width:640px}
.modal-title{font-size:16px;font-weight:800;margin-bottom:12px;text-align:center}

/* 长按提交按钮 */
.hold-btn{position:relative;overflow:hidden;user-select:none}
.hold-btn .hold-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.35);transition:width .1s linear}

/* ============ 移动端 ============ */
.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 16px 90px}
.stage-head{color:var(--ink-3);text-align:center;margin-bottom:12px;font-size:12px}
.stage-head h1{font-size:13px;color:var(--ink-2);font-weight:600;display:inline}
.stage-head p{display:inline;margin-left:8px}
.phone{width:390px;height:844px;background:#fff;border:10px solid #1A1A1A;border-radius:44px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);flex:none;display:flex;flex-direction:column}
.statusbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;font-weight:600;background:#fff;flex:none;position:relative;z-index:5;color:var(--ink)}
.statusbar .sicons{display:flex;gap:5px;align-items:center;color:var(--ink)}
.appbar{height:44px;display:flex;align-items:center;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);flex:none;position:relative;z-index:5}
.appbar .title{font-weight:700;font-size:16px;flex:1;text-align:center}
.appbar .capsule{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;padding:2px 8px;font-size:12px;color:var(--ink-2)}
.appbar .back{font-size:18px;width:28px;color:var(--ink);cursor:pointer}
.viewport{flex:1;overflow-y:auto;position:relative;background:var(--bg)}
.viewport::-webkit-scrollbar{display:none}
.screen{display:none;min-height:100%;padding-bottom:16px}
.screen.active{display:block;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:.4}to{opacity:1}}

/* 底部 5 Tab */
.tabbar{height:62px;background:#fff;border-top:1px solid var(--line);display:flex;flex:none;position:relative;z-index:6}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--ink-3)}
.tabbar .tab .ti{font-size:20px;line-height:1;display:flex}
.tabbar .tab.tab-active{color:var(--brand);font-weight:600}
.tabbar .tab-plus{flex:1;position:relative}
.tabbar .plus-btn{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(255,107,53,.35)}
.tabbar .plus-btn .ic{width:26px;height:26px}
.tabbar .plus-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-3)}

/* 首页骨架 */
.hero{background:var(--brand);color:#fff;padding:16px 16px 34px;border-radius:0 0 20px 20px}
.hero h2{font-size:19px;font-weight:800}
.hero p{font-size:12px;opacity:.9;margin-top:4px}
.search-row{display:flex;gap:8px;align-items:center;margin:-22px 12px 12px;position:relative;z-index:2}
.city-pill{background:#fff;border-radius:9px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:var(--shadow);white-space:nowrap;display:flex;align-items:center;gap:4px}
.search-pill{flex:1;background:#fff;border-radius:9px;padding:8px 14px;font-size:13px;color:var(--ink-3);box-shadow:var(--shadow);display:flex;align-items:center;gap:6px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 4px;padding:6px 12px}
.g5-item{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--ink-2)}
.g5-item .gico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.g5-item .gico .ic{width:22px;height:22px}
.g5-item.sm .gico{width:34px;height:34px;border-radius:9px;background:#F4F5F7}
.g5-item.sm .gico .ic{width:18px;height:18px}
.notice-bar{margin:4px 12px 10px;background:var(--gold-light);color:#8A5A00;font-size:12px;border-radius:var(--r-sm);padding:7px 10px;display:flex;gap:6px;align-items:center}
.notice-bar .ic{width:14px;height:14px;flex:none}
.waterfall{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px}
.wf-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.wf-card .ph{height:120px;border-radius:0}
.wf-card .wf-body{padding:8px 10px}
.wf-card .wf-t{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wf-card .wf-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--ink-3)}

/* 房源单列大卡 */
.house-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin:0 12px 14px}
.house-card .ph{height:170px;border-radius:0}
.house-card .hc-body{padding:12px}
.house-card .hc-title{font-size:15px;font-weight:800}
.dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
.dots i.on{background:#fff}

/* 底部常驻操作栏 / 引导条 */
.bottom-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:10px;align-items:center;z-index:4}
.guide-bar{position:sticky;bottom:0;background:#2B3138;color:#fff;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-size:13px;z-index:4}
.guide-bar .btn{padding:5px 14px;font-size:12px}

/* ============ PC 端 ============ */
.browser{max-width:1360px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg);min-height:86vh;display:flex;flex-direction:column}
.browser-bar{height:36px;background:#EEF0F3;display:flex;align-items:center;gap:7px;padding:0 14px;flex:none}
.browser-bar .b-dot{width:10px;height:10px;border-radius:50%}
.browser-bar .b-url{flex:1;background:#fff;border-radius:6px;padding:4px 12px;font-size:12px;color:var(--ink-3);margin-left:8px;display:flex;align-items:center;gap:6px}
.pc-layout{flex:1;display:flex;min-height:0}
.pc-side{width:128px;background:var(--pc-side);color:#B8BEC7;display:flex;flex-direction:column;flex:none;padding:10px 0}
.pc-side .logo{color:#fff;font-weight:800;text-align:center;padding:8px 6px 14px;font-size:14px}
.pc-side .logo span{color:var(--brand)}
.pc-nav{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 8px;font-size:12px;border-radius:8px;margin:1px 8px;color:#B8BEC7;cursor:pointer}
.pc-nav .ni{display:flex}
.pc-nav .ni .ic{width:19px;height:19px}
.pc-nav:hover{background:var(--pc-side-2)}
.pc-nav.tab-active{background:var(--brand);color:#fff}
.pc-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.pc-top{height:52px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;flex:none}
.pc-top .page-t{font-size:15px;font-weight:700}
.pc-top .top-right{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--ink-2)}
.pc-body{flex:1;overflow-y:auto;padding:16px 20px;position:relative}
.pc-body .screen{padding-bottom:24px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat-card{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.stat-card .st-l{font-size:12px;color:var(--ink-3)}
.stat-card .st-v{font-size:24px;font-weight:800;margin-top:4px}
.stat-card .st-v.warn{color:var(--red)}
.stat-card .st-v.brand{color:var(--brand)}
.pc-table{width:100%;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border-collapse:collapse;font-size:13px;overflow:hidden}
.pc-table th{background:#FAFBFC;color:var(--ink-2);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.pc-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.pc-table tr:last-child td{border-bottom:none}
.pc-table tr:hover td{background:#FAFAFC}
.pc-table .op{color:var(--brand);cursor:pointer;margin-right:10px;white-space:nowrap}
.pc-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pc-filter .input,.pc-filter .select{width:auto;padding:7px 12px;font-size:13px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip-row .chip{background:#fff;border:1px solid var(--line);padding:5px 14px;border-radius:8px;cursor:pointer}
.chip-row .chip.on{background:var(--brand-light);border-color:var(--brand);color:var(--brand)}
.summary-bar{background:var(--gold-light);border-radius:var(--r-sm);padding:9px 14px;font-size:13px;color:#7A4E00;margin-bottom:12px;display:flex;gap:22px;flex-wrap:wrap}
.summary-bar b{font-size:15px}

/* 右侧抽屉 */
.drawer{position:absolute;top:0;right:0;bottom:0;width:440px;background:#fff;box-shadow:-8px 0 24px rgba(16,24,40,.12);z-index:50;display:none;flex-direction:column;animation:slideIn .2s}
.drawer.open{display:flex}
@keyframes slideIn{from{transform:translateX(40px);opacity:.5}to{transform:none;opacity:1}}
.drawer-head{padding:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer-body{flex:1;overflow-y:auto;padding:16px}
.drawer-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 16px}
.drawer-tabs .dt{padding:10px 12px;font-size:13px;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent}
.drawer-tabs .dt.on{color:var(--brand);border-color:var(--brand);font-weight:700}
.kv{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--ink-3)}
.kv dd{color:var(--ink)}

/* 房态看板（扁平柔和） */
.board-room{width:118px;border-radius:8px;padding:10px;position:relative;cursor:pointer;flex:none;border:1px solid transparent}
.board-room .rno{font-weight:800;font-size:14px}
.board-room .rinfo{font-size:11px;opacity:.85;margin-top:3px;line-height:1.4}
.board-room.rent{background:#E3F6F5;color:#0B7570;border-color:#B9E6E4}
.board-room.empty{background:#FDEDF3;color:#C2316B;border-color:#F6D2E0}
.board-room.locked{background:#EFF1F4;color:#7A828E;border-color:#E0E3E8}
.board-room.due{border:1px solid var(--gold)}
.board-room .corner{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;border-radius:6px;padding:1px 6px;font-weight:700}
.board-room .corner.gray{background:#6B7280}
.board-grid{display:flex;flex-wrap:wrap;gap:10px}

/* CSS 图表占位 */
.ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto}
.ring::after{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}
.ring .ring-v{position:relative;z-index:1;font-weight:800;font-size:18px}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding:6px 4px}
.bars .bar{flex:1;background:var(--brand);opacity:.85;border-radius:3px 3px 0 0;min-height:6px}
.bars .bar.tealb{background:var(--teal)}

/* ============ 需求标注 & 页面地图 & 悬浮工具 ============ */
.spec{display:none}
.spec-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-10px 0 30px rgba(16,24,40,.18);z-index:1200;display:none;flex-direction:column}
.spec-panel.open{display:flex}
.spec-panel .sp-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#1A1A1A;color:#fff}
.spec-panel .sp-body{flex:1;overflow-y:auto;padding:16px}
.spec-table{width:100%;border-collapse:collapse;font-size:12px}
.spec-table th{width:88px;text-align:left;vertical-align:top;color:var(--ink-3);padding:7px 8px;background:#FAFBFC;border:1px solid var(--line);font-weight:600}
.spec-table td{padding:7px 8px;border:1px solid var(--line);color:var(--ink)}
.fab-menu{position:fixed;right:14px;bottom:14px;z-index:1100}
.fab-menu .fm-btn{width:38px;height:38px;border-radius:50%;background:#2B3138;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:.85}
.fab-menu .fm-btn:hover{opacity:1}
.fab-menu .fm-list{display:none;position:absolute;bottom:46px;right:0;background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;min-width:136px;border:1px solid var(--line)}
.fab-menu .fm-list.open{display:block}
.fab-menu .fm-list button{display:flex;justify-content:space-between;width:100%;text-align:left;padding:10px 14px;font-size:13px;color:var(--ink)}
.fab-menu .fm-list button:hover{background:#F6F7F9}
.fab-menu .fm-list button.on{color:var(--brand);font-weight:700}
.fab-menu .fm-state{color:var(--ink-3);font-size:12px}
.fab-menu .fm-list button.on .fm-state{color:var(--brand)}
.screen-map{position:fixed;inset:0;background:rgba(26,26,26,.55);z-index:1300;display:none;align-items:center;justify-content:center;padding:24px}
.screen-map.open{display:flex}
.screen-map .sm-box{background:#fff;border-radius:14px;max-width:760px;width:100%;max-height:84vh;overflow:auto;padding:20px}
.screen-map .sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.screen-map .sm-item{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;cursor:pointer}
.screen-map .sm-item:hover{border-color:var(--brand);background:var(--brand-light)}
.screen-map .sm-item .code{color:var(--brand);font-weight:800;font-size:11px}

@media print{.fab-menu,.spec-panel,.screen-map{display:none!important}}