/* ============================================================
   超弟温馨家园 · 管理后台样式
   ============================================================ */
:root{
  --pink:#ff7ba9;--pink-deep:#ff4d8d;--pink-soft:#ffe3ee;
  --mint:#3ecfae;--mint-soft:#e2faf3;
  --sun:#ffb84d;--sun-soft:#fff3dc;
  --blue:#5b9df5;--blue-soft:#e7f0fe;
  --bg:#faf6f8;--card:#fff;--ink:#4a4453;--gray:#9a94a6;--line:#f0e4ea;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:232px;background:linear-gradient(180deg,#2f2a35,#4a2a3a);color:#c9c0d0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;
}
.sb-logo{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;font-weight:800;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo svg{width:30px;height:30px;color:var(--pink)}
.sb-logo small{display:block;font-size:11px;font-weight:500;color:#8d8599}
.sb-nav{padding:14px 10px;flex:1;overflow:auto}
.sb-nav .grp{font-size:11px;color:#7a7186;padding:12px 12px 6px;letter-spacing:1px}
.sb-nav a{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;margin-bottom:3px;
  color:#c9c0d0;font-weight:600;font-size:14px;transition:.2s;
}
.sb-nav a svg{width:19px;height:19px;flex-shrink:0}
.sb-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-nav a.on{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;box-shadow:0 6px 16px rgba(255,77,141,.4)}
.sb-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.sb-user .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--sun));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0}
.sb-user .nm{font-size:14px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .rl{font-size:11px;color:#8d8599}
.sb-user a{margin-left:auto;color:#8d8599;font-size:12px}
.sb-user a:hover{color:var(--pink)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:50}
.topbar h1{font-size:19px;font-weight:800;flex:1}
.topbar .crumb{font-size:13px;color:var(--gray)}
.content{padding:24px 26px;flex:1}

/* ---------- 统计卡片 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(255,123,169,.08);border:1px solid var(--line);display:flex;align-items:center;gap:16px;transition:.2s}
.stat-card:hover{transform:translateY(-3px)}
.stat-card .ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-card .ico svg{width:28px;height:28px}
.stat-card.s1 .ico{background:var(--pink-soft);color:var(--pink-deep)}
.stat-card.s2 .ico{background:var(--mint-soft);color:#1fa887}
.stat-card.s3 .ico{background:var(--sun-soft);color:#d98a00}
.stat-card.s4 .ico{background:var(--blue-soft);color:var(--blue)}
.stat-card .num{font-size:28px;font-weight:800;line-height:1.1}
.stat-card .lbl{font-size:13px;color:var(--gray);margin-top:2px}

.panel{background:#fff;border-radius:var(--radius);box-shadow:0 8px 24px rgba(255,123,169,.06);border:1px solid var(--line);padding:20px;margin-bottom:22px}
.panel .p-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel .p-h h3{font-size:16px;font-weight:800}
.panel .p-h .p-actions{display:flex;gap:8px}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}

/* 条形统计 */
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-row .lbl{width:64px;font-weight:700;font-size:13px;flex-shrink:0}
.bar-row .track{flex:1;background:#f6eef2;border-radius:999px;height:22px;overflow:hidden}
.bar-row .fill{height:100%;border-radius:999px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:12px;font-weight:700;transition:width 1s}
.fill.p1{background:linear-gradient(90deg,#ff7ba9,#ff4d8d)}
.fill.p2{background:linear-gradient(90deg,#3ecfae,#1fa887)}
.fill.p3{background:linear-gradient(90deg,#ffb84d,#ff8a3d)}
.fill.p4{background:linear-gradient(90deg,#5b9df5,#3a7be0)}
.bar-row .cnt{width:40px;text-align:right;font-weight:800;color:var(--ink)}

/* 环形图 */
.donut-wrap{display:flex;align-items:center;gap:22px;justify-content:center;padding:6px 0}
.donut{width:150px;height:150px;border-radius:50%;position:relative;flex-shrink:0}
.donut .center{position:absolute;inset:22px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .center b{font-size:26px}
.donut .center span{font-size:12px;color:var(--gray)}
.legend{display:flex;flex-direction:column;gap:10px}
.legend .li{display:flex;align-items:center;gap:10px;font-size:14px}
.legend .dot{width:14px;height:14px;border-radius:4px}
.legend b{margin-left:auto}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:#faf6f8;text-align:left;padding:12px 14px;font-size:13px;color:var(--gray);white-space:nowrap}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:#fffbfd}
.h-cover{width:74px;height:54px;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700}
.pill.t-sale{background:var(--pink-soft);color:var(--pink-deep)}
.pill.t-rent{background:var(--mint-soft);color:#1fa887}
.pill.t-second{background:var(--blue-soft);color:var(--blue)}
.pill.st-new{background:var(--sun-soft);color:#d98a00}
.pill.st-contacted{background:var(--blue-soft);color:var(--blue)}
.pill.st-visited{background:var(--mint-soft);color:#1fa887}
.pill.st-deal{background:var(--pink-soft);color:var(--pink-deep)}
.pill.st-closed{background:#f0eef1;color:#9a94a6}
.pill.on{background:var(--mint-soft);color:#1fa887}
.pill.off{background:#f0eef1;color:#9a94a6}
.tag{display:inline-block;background:var(--pink-soft);color:var(--pink-deep);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600;margin:1px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:11px;padding:9px 16px;font-size:13px;font-weight:700;transition:.2s;border:none;cursor:pointer}
.btn svg{width:16px;height:16px}
.btn-pink{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;box-shadow:0 4px 12px rgba(255,77,141,.3)}
.btn-pink:hover{transform:translateY(-2px)}
.btn-mint{background:var(--mint);color:#fff}
.btn-mint:hover{transform:translateY(-2px)}
.btn-sun{background:linear-gradient(135deg,#ffc86b,#ff8a3d);color:#7a4a00}
.btn-sun:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink-deep)}
.btn-danger{background:#fff0f0;color:#e5484d}
.btn-danger:hover{background:#ffe3e3}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:9px}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.fm label{display:block;font-size:13px;font-weight:700;color:#6b6478;margin-bottom:6px}
.fm label .req{color:var(--pink-deep)}
.fm input,.fm select,.fm textarea{
  width:100%;border:1.5px solid var(--line);border-radius:11px;padding:10px 13px;font-size:14px;
  font-family:inherit;color:var(--ink);outline:none;background:#fff;transition:.2s;
}
.fm input:focus,.fm select:focus,.fm textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,123,169,.13)}
.fm textarea{resize:vertical}
.fm .hint{font-size:12px;color:var(--gray);margin-top:5px}
.fm .radio-row{display:flex;gap:10px;flex-wrap:wrap}
.fm .radio-row label{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:11px;padding:9px 16px;cursor:pointer;font-weight:600;margin:0;color:var(--ink);transition:.2s}
.fm .radio-row input{display:none}
.fm .radio-row label.on{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-deep)}

/* 上传区 */
.upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:10px}
.up-item{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--line);aspect-ratio:4/3;background:#faf6f8}
.up-item img,.up-item video{width:100%;height:100%;object-fit:cover;display:block}
.up-item .del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.up-item .del:hover{background:#e5484d}
.up-item .cov{position:absolute;left:6px;bottom:6px;font-size:11px;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-radius:8px;padding:2px 8px}
.up-add{border:2px dashed var(--pink);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--pink-deep);font-weight:700;font-size:13px;cursor:pointer;aspect-ratio:4/3;background:var(--pink-soft);transition:.2s;text-align:center;padding:8px}
.up-add:hover{background:#ffd3e2}
.up-add svg{width:30px;height:30px;margin-bottom:6px}
.video-up{display:flex;align-items:center;gap:14px;margin-top:8px}
.video-prev{width:170px;border-radius:12px;overflow:hidden;background:#000;position:relative}
.video-prev video{width:100%;display:block;max-height:100px}

/* 筛选工具条 */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input,.toolbar select{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;font-family:inherit;outline:none;background:#fff}
.toolbar input:focus,.toolbar select:focus{border-color:var(--pink)}

/* 分页 */
.pagination{display:flex;gap:6px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}
.pagination a{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:13px;padding:0 8px}
.pagination a.on{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border:none}

/* 空状态/提示 */
.alert{border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:16px}
.alert.ok{background:var(--mint-soft);color:#157f63}
.alert.err{background:#fff0f0;color:#e5484d}
.empty{text-align:center;padding:50px 0;color:var(--gray)}

/* 移动端 */
@media(max-width:900px){
  .sidebar{width:64px}
  .sidebar .sb-logo span,.sidebar .sb-nav a span,.sidebar .sb-nav .grp,.sidebar .sb-user .nm,.sidebar .sb-user .rl{display:none}
  .sb-nav a{justify-content:center}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .content{padding:16px}
  .topbar{padding:12px 16px}
}