/* ===== 智慧商铺租赁 · 管理后台（PC 端演示原型） ===== */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --pri:#07C160; --pri-d:#06AD56; --danger:#FA5151; --warn:#FF9500; --blue:#1E6FFF; --purple:#8A5CF6;
  --ink:#1f2329; --sub:#8a8f99; --line:#e8eaee; --bg:#f3f5f8; --side:#141a24;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px;
}
button{ font-family:inherit; }

/* ---- 登录页 ---- */
.login-wrap{ height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#0d1526,#123324 60%,#0a4023); }
.login-card{ width:400px; background:#fff; border-radius:16px; padding:38px 36px 30px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.login-card .lg-logo{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.login-card .lg-logo .ic{ width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#0ad66f,#07a54f); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; }
.login-card h1{ font-size:19px; }
.login-card .sub{ color:var(--sub); font-size:13px; margin-bottom:24px; }
.lg-item{ margin-bottom:14px; }
.lg-item label{ display:block; font-size:13px; color:var(--sub); margin-bottom:6px; }
.lg-item input{ width:100%; height:44px; border:1px solid var(--line); border-radius:9px; padding:0 12px; font-size:15px; outline:none; }
.lg-item input:focus{ border-color:var(--pri); }
.lg-tip{ margin-top:14px; background:#f6f9f6; border-radius:8px; padding:10px 12px; font-size:12px; color:#6b7c6f; line-height:1.8; }

/* ---- 主布局 ---- */
.layout{ display:flex; height:100vh; }
.sidebar{ width:216px; flex:none; background:var(--side); color:#b9c0cc; display:flex; flex-direction:column; }
.side-brand{ padding:18px 16px; display:flex; align-items:center; gap:10px; color:#fff; border-bottom:1px solid rgba(255,255,255,.07); }
.side-brand .ic{ width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#0ad66f,#07a54f); display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; flex:none; }
.side-brand b{ font-size:15px; display:block; }
.side-brand span{ font-size:11px; color:#7d8590; }
.side-nav{ flex:1; overflow-y:auto; padding:10px 8px; }
.side-nav::-webkit-scrollbar{ display:none; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; cursor:pointer; margin-bottom:2px; font-size:14px; position:relative; }
.nav-item i{ font-size:17px; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.on{ background:var(--pri); color:#fff; font-weight:500; }
.nav-badge{ margin-left:auto; min-width:19px; height:19px; padding:0 6px; border-radius:10px; background:var(--danger); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.nav-item.on .nav-badge{ background:rgba(255,255,255,.25); }
.side-foot{ padding:12px 14px; font-size:11px; color:#5d6673; border-top:1px solid rgba(255,255,255,.07); line-height:1.7; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ height:56px; flex:none; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 20px; gap:12px; }
.topbar .tb-title{ font-size:16px; font-weight:600; white-space:nowrap; flex:none; }
.topbar .tb-sync{ font-size:12px; color:var(--pri); background:rgba(7,193,96,.1); padding:4px 10px; border-radius:12px; display:flex; align-items:center; gap:5px; white-space:nowrap; flex:none; }
.topbar .spacer{ flex:1; }
.tb-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; white-space:nowrap; flex:none; }
.tb-btn:hover{ border-color:var(--pri); color:var(--pri); }
.tb-btn.pri{ background:var(--pri); color:#fff; border-color:var(--pri); }
.tb-btn.pri:hover{ background:var(--pri-d); }
.tb-user{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); white-space:nowrap; flex:none; }
.tb-user .av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#5b8def,#3457c9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }

.content{ flex:1; overflow-y:auto; padding:18px 20px 30px; }
.content::-webkit-scrollbar{ width:8px; }
.content::-webkit-scrollbar-thumb{ background:#d5d9e0; border-radius:4px; }

/* ---- 通用组件 ---- */
.panel{ background:#fff; border-radius:12px; padding:16px 18px; margin-bottom:16px; box-shadow:0 1px 3px rgba(20,26,36,.04); }
.panel-t{ font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.panel-t .extra{ margin-left:auto; display:flex; gap:8px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; height:36px; padding:0 16px; border-radius:8px; font-size:14px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink); }
.btn:hover{ border-color:var(--pri); color:var(--pri); }
.btn-pri{ background:var(--pri); border-color:var(--pri); color:#fff; }
.btn-pri:hover{ background:var(--pri-d); color:#fff; }
.btn-danger{ color:var(--danger); border-color:#f3c1c1; }
.btn-danger:hover{ background:#fff5f5; border-color:var(--danger); color:var(--danger); }
.btn-sm{ height:28px; padding:0 10px; font-size:12px; border-radius:6px; }
table.tb{ width:100%; border-collapse:collapse; }
table.tb th{ text-align:left; font-size:12px; color:var(--sub); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--line); background:#fafbfc; }
table.tb td{ padding:12px; border-bottom:1px solid #f2f3f5; font-size:14px; vertical-align:middle; }
table.tb tr:hover td{ background:#fafcfb; }
.tag{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:5px; font-size:12px; white-space:nowrap; }
.tag-green{ background:rgba(7,193,96,.12); color:var(--pri); }
.tag-red{ background:rgba(250,81,81,.12); color:var(--danger); }
.tag-orange{ background:rgba(255,149,0,.13); color:var(--warn); }
.tag-blue{ background:rgba(30,111,255,.1); color:var(--blue); }
.tag-purple{ background:rgba(138,92,246,.12); color:var(--purple); }
.tag-gray{ background:#f0f1f3; color:#888; }
.link{ color:var(--blue); cursor:pointer; }
.link:hover{ text-decoration:underline; }
.money-b{ font-weight:700; font-variant-numeric:tabular-nums; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.kpi{ background:#fff; border-radius:12px; padding:16px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 3px rgba(20,26,36,.04); }
.kpi .k-ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex:none; }
.kpi .k-num{ font-size:24px; font-weight:700; line-height:1.2; }
.kpi .k-label{ font-size:12px; color:var(--sub); margin-top:2px; }
.chart-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; margin-bottom:16px; }
.chart-box{ background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 1px 3px rgba(20,26,36,.04); }
.chart-box .cb-t{ font-size:14px; font-weight:600; margin-bottom:6px; }
.chart{ width:100%; height:250px; }

.filter-bar{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.filter-bar select,.filter-bar input{ height:36px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; outline:none; background:#fff; }
.filter-bar select:focus,.filter-bar input:focus{ border-color:var(--pri); }
.sub-tabs{ display:flex; gap:6px; margin-bottom:14px; background:#fff; padding:5px; border-radius:10px; width:max-content; box-shadow:0 1px 3px rgba(20,26,36,.04); }
.sub-tab{ padding:8px 18px; border-radius:7px; cursor:pointer; color:var(--sub); font-size:14px; display:flex; align-items:center; gap:6px; }
.sub-tab.on{ background:var(--pri); color:#fff; font-weight:500; }

/* 楼层可视化看板 */
.floor-board{ display:flex; flex-direction:column; gap:18px; }
.floor-row{ display:flex; align-items:flex-start; gap:14px; }
.floor-name{ width:70px; flex:none; font-weight:600; padding-top:10px; color:#3c4350; }
.shop-cells{ display:flex; flex-wrap:wrap; gap:10px; flex:1; }
.shop-cell{ width:118px; border-radius:10px; padding:10px 12px; color:#fff; cursor:pointer; transition:transform .12s ease; position:relative; }
.shop-cell:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.15); }
.shop-cell .sc-code{ font-weight:700; font-size:15px; }
.shop-cell .sc-info{ font-size:11px; opacity:.9; margin-top:4px; line-height:1.5; }
.shop-cell .sc-shared{ position:absolute; top:6px; right:8px; font-size:13px; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.legend span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub); }
.legend i{ width:14px; height:14px; border-radius:4px; display:inline-block; }

/* 弹窗 */
.mask{ position:fixed; inset:0; background:rgba(15,20,30,.5); z-index:80; display:flex; align-items:center; justify-content:center; animation:fd .18s ease; }
@keyframes fd{ from{opacity:0} to{opacity:1} }
.modal{ background:#fff; border-radius:14px; width:560px; max-width:92vw; max-height:86vh; overflow-y:auto; animation:pp .2s ease; }
@keyframes pp{ from{ transform:scale(.94); opacity:.4 } to{ transform:none; opacity:1 } }
.modal-t{ padding:16px 20px; border-bottom:1px solid var(--line); font-size:16px; font-weight:600; display:flex; align-items:center; }
.modal-t .x{ margin-left:auto; cursor:pointer; color:#b5b9c0; font-size:20px; }
.modal-b{ padding:18px 20px; }
.modal-f{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.fm-row{ display:flex; align-items:flex-start; margin-bottom:14px; }
.fm-row label{ width:96px; flex:none; padding-top:9px; color:#4a5058; font-size:14px; }
.fm-row label .req{ color:var(--danger); margin-right:2px; }
.fm-row input,.fm-row select,.fm-row textarea{ flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:14px; outline:none; font-family:inherit; }
.fm-row textarea{ min-height:76px; resize:vertical; }
.fm-row input:focus,.fm-row select:focus,.fm-row textarea:focus{ border-color:var(--pri); }
.fm-static{ flex:1; padding-top:9px; font-size:14px; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.chip{ padding:7px 14px; border-radius:8px; background:#f2f3f5; cursor:pointer; font-size:13px; border:1px solid transparent; }
.chip.on{ background:rgba(7,193,96,.1); color:var(--pri); border-color:var(--pri); font-weight:500; }

/* Toast / 确认框 */
.toast2{ position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(20,24,32,.86); color:#fff; padding:11px 20px; border-radius:9px; font-size:14px; z-index:120; display:flex; align-items:center; gap:8px; animation:fd .15s ease; }
.cfm{ width:380px; background:#fff; border-radius:13px; overflow:hidden; animation:pp .18s ease; }
.cfm-b{ padding:24px 22px 18px; text-align:center; }
.cfm-b h3{ font-size:16px; margin-bottom:8px; }
.cfm-b p{ color:var(--sub); font-size:14px; line-height:1.7; }
.cfm-f{ display:flex; border-top:1px solid var(--line); }
.cfm-f div{ flex:1; text-align:center; padding:13px 0; cursor:pointer; font-size:15px; }
.cfm-f div + div{ border-left:1px solid var(--line); }
.cfm-f .ok{ color:var(--pri); font-weight:600; }
.cfm-f .warn{ color:var(--danger); font-weight:600; }

/* 描述列表 */
.desc{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.desc .d-item{ display:flex; border-bottom:1px solid #f2f3f5; }
.desc .d-item .dk{ width:110px; flex:none; background:#fafbfc; padding:11px 12px; color:var(--sub); font-size:13px; }
.desc .d-item .dv{ padding:11px 12px; font-size:14px; flex:1; }

/* 时间轴 */
.tl{ padding-left:6px; }
.tl-i{ position:relative; padding:0 0 20px 26px; }
.tl-i::before{ content:""; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:#e8eaee; }
.tl-i:last-child::before{ display:none; }
.tl-i .dot{ position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:#e8eaee; }
.tl-i.done .dot{ background:var(--pri); }
.tl-i.cur .dot{ background:var(--pri); box-shadow:0 0 0 4px rgba(7,193,96,.18); }
.tl-i .tt{ font-weight:600; font-size:14px; }
.tl-i.cur .tt{ color:var(--pri); }
.tl-i .td{ color:var(--sub); font-size:12px; margin-top:3px; line-height:1.6; }

/* 向导 */
.steps{ display:flex; align-items:center; margin-bottom:20px; }
.step{ display:flex; align-items:center; gap:8px; color:var(--sub); font-size:14px; }
.step .sn{ width:26px; height:26px; border-radius:50%; background:#eef0f3; display:flex; align-items:center; justify-content:center; font-size:13px; }
.step.on{ color:var(--pri); font-weight:600; }
.step.on .sn{ background:var(--pri); color:#fff; }
.step.done .sn{ background:rgba(7,193,96,.15); color:var(--pri); }
.step-line{ flex:1; height:2px; background:#e8eaee; margin:0 12px; }

/* 大屏模式 */
.bigscreen{ position:fixed; inset:0; z-index:200; background:#070d1a; color:#cfe3ff; display:flex; flex-direction:column; padding:18px 22px; overflow-y:auto; }
.bs-head{ display:flex; align-items:center; justify-content:center; position:relative; padding-bottom:14px; border-bottom:1px solid rgba(120,160,255,.15); }
.bs-head h2{ font-size:22px; letter-spacing:4px; color:#7fb3ff; font-weight:600; }
.bs-head .bs-time{ position:absolute; right:0; font-size:13px; color:#5f7bab; }
.bs-head .bs-exit{ position:absolute; left:0; }
.bs-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:16px 0; }
.bs-kpi{ background:rgba(30,60,120,.22); border:1px solid rgba(90,140,230,.25); border-radius:10px; padding:12px 14px; text-align:center; }
.bs-kpi .n{ font-size:26px; font-weight:700; color:#8fd0ff; font-variant-numeric:tabular-nums; }
.bs-kpi .n.red{ color:#ff8484; }
.bs-kpi .l{ font-size:12px; color:#6c86ad; margin-top:4px; }
.bs-charts{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; flex:1; }
.bs-chart{ background:rgba(30,60,120,.15); border:1px solid rgba(90,140,230,.2); border-radius:10px; padding:10px 12px; }
.bs-chart .t{ font-size:14px; color:#8fb4ea; margin-bottom:4px; }
.bs-chart .c{ height:260px; }

.empty2{ text-align:center; color:var(--sub); padding:40px 0; }
.empty2 i{ font-size:44px; color:#d8dce2; display:block; margin-bottom:8px; }
.hl-row{ background:#fffaf3 !important; }