:root {
  --jex-ink: #101010;
  --jex-muted: #777773;
  --jex-line: #e8e8e3;
  --jex-surface: #ffffff;
  --jex-canvas: #f6f6f3;
  --jex-raised: #fafaf8;
  --jex-green: #357d59;
  --jex-amber: #9a6b12;
  --jex-red: #bb4242;
  --jex-shadow: 0 16px 42px rgba(19, 19, 16, .08);
  --jex-radius-card: 20px;
  --jex-radius-control: 12px;
}

* { letter-spacing: 0 !important; }
body { background: var(--jex-canvas) !important; color: var(--jex-ink) !important; }
.app-backdrop { background: #f6f6f3 !important; }
.workspace { grid-template-columns: 82px minmax(0, 1fr) !important; }
.sidebar { padding: 18px 10px !important; background: #fff !important; border-right: 1px solid var(--jex-line) !important; backdrop-filter: none !important; }
.brand { justify-content: center; padding: 2px 0 24px !important; font-size: 0; }
.brand-mark { width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--jex-ink) !important; box-shadow: none !important; font-size: 15px; }
.nav { gap: 9px !important; }
.nav a { justify-content: center; padding: 12px 4px !important; border-radius: 14px !important; color: var(--jex-muted) !important; font-size: 0 !important; }
.nav a span { width: 22px !important; color: currentColor !important; font-size: 20px; }
.nav a:hover,.nav a.active { color: var(--jex-ink) !important; background: #f1f1ed !important; box-shadow: none !important; }
.sidebar-footer { justify-content: center; padding: 8px 0 !important; font-size: 0 !important; }
.status-dot { background: var(--jex-green) !important; box-shadow: none !important; }
.topbar { height: 66px !important; padding: 0 28px !important; background: rgba(255,255,255,.9) !important; border-bottom: 1px solid var(--jex-line) !important; backdrop-filter: blur(16px) !important; }
.crumb { font-weight: 800 !important; }
.page-root { max-width: none !important; padding: 24px 28px 36px !important; }
.eyebrow { color: var(--jex-muted) !important; font-weight: 700 !important; }
.page-heading h1 { font-size: 24px !important; }
.page-heading p,.muted,.metric-label { color: var(--jex-muted) !important; }
.glass,.card { background: var(--jex-surface) !important; border: 1px solid var(--jex-line) !important; border-radius: var(--jex-radius-card) !important; box-shadow: none !important; backdrop-filter: none !important; }
.card { padding: 18px !important; }
.button,.button.blue { background: var(--jex-ink) !important; color: #fff !important; border-radius: var(--jex-radius-control) !important; box-shadow: none !important; }
.button.secondary { background: #fff !important; color: var(--jex-ink) !important; border: 1px solid var(--jex-line) !important; }
.button:hover { transform: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.08) !important; }
.searchbar { padding: 7px !important; border: 1px solid var(--jex-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
.searchbar input { padding: 8px 11px !important; }
.chip,.badge { background: #efefeb !important; color: #4b4b47 !important; border: 0 !important; }
.badge.ok { background: #e8f2eb !important; color: var(--jex-green) !important; }
.badge.warn { background: #fbf3dc !important; color: var(--jex-amber) !important; }
.badge.error { background: #fae9e7 !important; color: var(--jex-red) !important; }
.rental-workbench { display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(360px, .92fr); gap: 16px; min-height: calc(100vh - 230px); }
.listing-pane,.listing-detail-pane { background: #fff; border: 1px solid var(--jex-line); border-radius: var(--jex-radius-card); overflow: hidden; }
.listing-pane { padding: 12px; overflow: auto; }
.listing-detail-pane { padding: 20px; overflow: auto; background: var(--jex-raised); }
.listing-card { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 16px; border: 1px solid var(--jex-line); border-radius: 16px; background: #fff; color: var(--jex-ink); margin-bottom: 10px; cursor: pointer; }
.listing-card:hover,.listing-card.selected { border-color: var(--jex-ink); box-shadow: 0 8px 22px rgba(0,0,0,.05); }
.listing-card h3 { margin: 0 0 6px; font-size: 15px; }
.listing-card p { margin: 0; color: var(--jex-muted); font-size: 12px; line-height: 1.55; }
.listing-price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.detail-title { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.detail-title h2 { margin: 0; font-size: 21px; }
.detail-main-price { margin: 20px 0; display:flex; gap:20px; align-items:end; }
.detail-main-price strong { font-size: 29px; font-variant-numeric: tabular-nums; }
.detail-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 15px 0; }
.detail-grid div { padding: 11px; border-radius: 13px; background: #fff; border: 1px solid var(--jex-line); }
.detail-grid small { display:block; color:var(--jex-muted); margin-bottom:4px; }
.cost-summary { margin-top:14px; background:#fff; border:1px solid var(--jex-line); border-radius:16px; padding:14px; }
.cost-summary h3 { margin:0 0 10px; font-size:14px; }
.cost-summary .fee-row { border-bottom: 1px solid var(--jex-line); }
.dialog-scrim { background: rgba(245,245,241,.72) !important; backdrop-filter: blur(12px) !important; }
.dialog { width: min(560px, calc(100vw - 32px)) !important; padding: 22px !important; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 24px !important; box-shadow: var(--jex-shadow) !important; }
.dialog .fee-row { border-bottom: 1px solid var(--jex-line); }
.state { background: #fff; border-radius: 18px; }
.state-icon { color: var(--jex-muted); }
.notice { background: #f7f1df !important; color: #725b22 !important; border-radius: 14px !important; }
.account-button:hover { background: #f3f3f0 !important; }

body.commercial-login { min-height:100vh; display:grid; grid-template-columns: minmax(280px,.92fr) minmax(440px,1.08fr); background:#fff !important; }
.commercial-login::before { content:"JEX-HUB\A\A 房产智能工作平台"; white-space:pre-wrap; display:flex; align-items:flex-end; padding:46px; color:#fff; font-weight:800; font-size:26px; line-height:1.2; background:#171717 url("/commercial/assets/login-stitch-city.png") center/cover no-repeat; }
.commercial-login main { max-width:460px !important; width:100%; align-self:center; justify-self:center; padding:44px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.commercial-login .bg-secondary { background:var(--jex-ink) !important; }
.commercial-login .text-secondary,.commercial-login .focus\\:ring-secondary:focus { color:var(--jex-ink) !important; }
@media(max-width:820px){
  .workspace { display:block !important; }
  .sidebar { width:248px !important; padding:18px 14px !important; }
  .sidebar .brand { justify-content:flex-start; font-size:14px !important; }
  .sidebar .nav a { justify-content:flex-start; font-size:14px !important; padding:12px !important; }
  .sidebar-footer { justify-content:flex-start; font-size:12px !important; }
  .sidebar-scrim { position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.18); border:0; }
  .sidebar.open + .sidebar-scrim { display:block; }
  .page-root { padding:18px 14px 84px !important; }
  .rental-workbench { grid-template-columns:1fr; min-height:0; }
  .listing-detail-pane { display:none; }
  .listing-card { border-radius:14px; }
  .dialog-scrim { align-items:flex-end !important; padding:10px !important; }
  .dialog { width:100% !important; max-height:calc(100vh - 20px); overflow:auto; border-radius:24px 24px 18px 18px !important; }
  .mobile-detail-sheet .detail-title { padding-right:0; }
  .detail-grid { grid-template-columns:1fr 1fr; }
  body.commercial-login { display:block; }
  .commercial-login::before { height:235px; padding:28px; font-size:21px; align-items:flex-end; }
  .commercial-login main { padding:30px 24px !important; }
}