:root {
  --ink: #1d2521;
  --muted: #718078;
  --paper: #f3f0e8;
  --card: #fffdf8;
  --line: #dcd8cd;
  --green: #155f4a;
  --mint: #dceddf;
  --orange: #d86d3a;
  --shadow: 0 18px 50px rgba(40, 48, 43, .08);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.55 system-ui, -apple-system, "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { border: 0; border-radius: 10px; padding: 10px 16px; background: var(--green); color: white; cursor: pointer; }
button:hover { filter: brightness(.94); }
.topbar { max-width: 1120px; margin: auto; padding: 38px 28px 24px; display: flex; align-items: end; justify-content: space-between; }
h1, h2, h3, p { margin: 0; }
h1 { font: 700 38px/1.1 Georgia, "Songti SC", serif; letter-spacing: -.03em; }
h2 { font: 700 25px/1.2 Georgia, "Songti SC", serif; }
.eyebrow { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; }
.status { color: var(--muted); font-size: 13px; }
.status i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #45a86c; }
main { max-width: 1120px; margin: auto; padding: 0 28px 60px; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.metric strong { display: block; font: 700 28px/1.15 Georgia, serif; margin-top: 8px; }
.metric span { color: var(--muted); }
.tabs { display: flex; gap: 6px; margin: 28px 0 14px; padding: 6px; width: fit-content; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.45); }
.tabs button { color: var(--muted); background: transparent; }
.tabs button.active { color: white; background: var(--green); }
.panel { display: none; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.panel.active { display: block; }
.section-title, .dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.secondary { color: var(--green); background: var(--mint); }
.property { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 18px; }
.property-cover { width: 100%; height: 130px; object-fit: cover; border-radius: 11px; margin-bottom: 12px; background: var(--paper); }
.room-cover { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; background: var(--paper); }
.property:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.property-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.property-head small { color: var(--muted); }
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.room, .list-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: white; }
.room-top, .row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.badge { padding: 3px 9px; border-radius: 99px; font-size: 12px; color: var(--green); background: var(--mint); }
.badge.vacant { color: #8a552d; background: #f5e5d4; }
.badge.self_use { color: #56616f; background: #e6eaf0; }
.room p, .list-card p { color: var(--muted); margin-top: 8px; }
.text-button { padding: 7px 0; color: var(--green); background: transparent; font-weight: 700; }
.text-button.danger { color: #a44735; }
.room-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.card-list { display: grid; gap: 10px; }
.section-note { color: var(--muted); margin: -10px 0 20px; }
.inline-form, .form-grid { display: grid; gap: 14px; margin-bottom: 24px; }
.inline-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.form-grid button { grid-column: 1 / -1; justify-self: start; }
.wide { grid-column: 1 / -1; }
.management-box { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.management-box summary { cursor: pointer; padding: 14px 16px; color: var(--green); font-weight: 750; }
.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 4px 16px 18px; }
.manage-form { padding: 4px 16px 18px; max-width: 780px; }
.manage-grid form { align-content: start; }
.manage-grid h3 { grid-column: 1 / -1; }
.fee-breakdown { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.fee-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.fee-row:last-child { border-bottom: 0; font-weight: 800; }
.tenant-section { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; }
#tenant-fields { display: grid; gap: 12px; margin-top: 14px; }
.tenant-entry { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.tenant-entry legend { color: var(--green); font-weight: 800; padding: 0 7px; }
.remove-tenant { position: absolute; right: 8px; top: -12px; padding: 2px 9px; border-radius: 99px; color: #a44735; background: #f7e7e2; font-size: 18px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--ink); background: white; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(21,95,74,.12); }
dialog { width: min(720px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 20px; padding: 24px; color: var(--ink); background: var(--card); box-shadow: 0 24px 80px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(21,29,25,.5); backdrop-filter: blur(3px); }
.icon-button { padding: 4px 12px; color: var(--muted); background: transparent; font-size: 26px; }
.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 22px; }
.timeline-item { position: relative; padding: 0 0 22px; }
.timeline-item::before { content: ''; position: absolute; left: -29px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 3px solid var(--card); }
.timeline-item p { color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 10px; color: white; background: var(--ink); opacity: 0; pointer-events: none; transition: .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }

@media (max-width: 760px) {
  .topbar { padding-top: 24px; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: 1fr; }
  .inline-form, .form-grid { grid-template-columns: 1fr; }
  .manage-grid { grid-template-columns: 1fr; }
  .tabs { width: 100%; overflow-x: auto; }
  .tabs button { white-space: nowrap; flex: 1; }
}
/* Authentication and account controls */
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #f8f1e7, #eef4ef); }
.auth-screen[hidden] { display: none; }
.login-card { width: min(420px, 100%); background: #fff; padding: 32px; border-radius: 20px; box-shadow: 0 18px 60px #24372d20; display: grid; gap: 18px; }
.login-card label { display: grid; gap: 7px; }
.account-bar { display: flex; align-items: center; gap: 10px; }
.cancellation-title { margin-top: 32px; }
.cancellation-title .section-note { margin: 5px 0 0; }

/* Standard management console layout */
:root { --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#eff6ff; --text:#172033; --muted:#64748b; --border:#e2e8f0; --canvas:#f5f7fb; --surface:#fff; --sidebar:#111827; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.04); }
body { color:var(--text); background:var(--canvas); font:14px/1.55 Inter,"Microsoft YaHei",system-ui,sans-serif; }
h1 { font:700 24px/1.25 Inter,"Microsoft YaHei",sans-serif; letter-spacing:-.02em; }
h2 { font:700 18px/1.3 Inter,"Microsoft YaHei",sans-serif; }
h3 { font:700 15px/1.3 Inter,"Microsoft YaHei",sans-serif; }
button { border-radius:7px; padding:9px 15px; background:var(--primary); font-weight:600; }
button:hover { background:var(--primary-dark); filter:none; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:224px minmax(0,1fr); }
.admin-shell[hidden] { display:none; }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 14px; color:#fff; background:var(--sidebar); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 9px 24px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:var(--primary); font-size:18px; font-weight:800; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:16px; }.brand small { color:#94a3b8; font-size:11px; }
.nav-label { padding:0 10px; margin:8px 0; color:#64748b; font-size:11px; font-weight:700; letter-spacing:.1em; }
.tabs { width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; display:grid; gap:4px; }
.tabs button { width:100%; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:7px; color:#cbd5e1; background:transparent; text-align:left; font-weight:500; }
.tabs button span { width:18px; text-align:center; font-size:16px; }
.tabs button:hover { color:#fff; background:#1f2937; }.tabs button.active { color:#fff; background:var(--primary); }
.sidebar-foot { margin-top:auto; padding:14px 10px 2px; border-top:1px solid #293449; color:#cbd5e1; font-size:12px; }
.sidebar-foot small { display:block; margin-left:16px; color:#64748b; }.online-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#22c55e; }
.workspace { min-width:0; }.topbar { max-width:none; height:78px; margin:0; padding:0 32px; align-items:center; background:#fff; border-bottom:1px solid var(--border); }
.breadcrumb { color:var(--muted); font-size:12px; margin-bottom:4px; }.status { padding:7px 11px; border:1px solid var(--border); border-radius:7px; background:#fff; }
main { max-width:1440px; margin:0; padding:24px 32px 48px; }.summary { gap:16px; margin-bottom:20px; }
.metric { position:relative; padding:20px; border-color:var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow); }
.metric:before { content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:var(--primary); }
.metric strong { font:700 25px/1.2 Inter,sans-serif; }.panel { padding:22px; border-color:var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow); }
.eyebrow { display:none; }.secondary { color:#334155; background:#fff; border:1px solid var(--border); }.secondary:hover { color:var(--primary); background:var(--primary-soft); border-color:#bfdbfe; }
.management-box { border-color:var(--border); border-radius:8px; background:#fafcff; }.management-box summary { color:#334155; }
.property { border-color:var(--border); }.property-head>span { padding:4px 9px; border-radius:5px; color:var(--primary); background:var(--primary-soft); font-size:12px; }
.room-grid { gap:14px; }.room,.list-card { border-color:var(--border); border-radius:8px; background:#fff; }.room:hover { border-color:#bfdbfe; box-shadow:0 6px 20px rgba(37,99,235,.07); }
.badge { border-radius:4px; color:#15803d; background:#dcfce7; }.badge.vacant { color:#b45309; background:#fef3c7; }.badge.self_use { color:#475569; background:#e2e8f0; }
.room-actions { padding-top:10px; border-top:1px solid #f1f5f9; }.text-button { color:var(--primary); }.text-button:hover { color:var(--primary-dark); background:transparent; }
input,select,textarea { border-color:#cbd5e1; border-radius:6px; }.tenant-section,.tenant-entry,.fee-breakdown { border-color:var(--border); border-radius:8px; }.empty { border-color:var(--border); border-radius:8px; background:#fafcff; }
dialog { border-color:var(--border); border-radius:10px; background:#fff; }.auth-screen { background:#eef2f7; }.login-card { border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 60px rgba(15,23,42,.1); }
.login-card:before { content:"租"; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:#fff; background:var(--primary); font-size:21px; font-weight:800; }
@media (max-width:980px) { .admin-shell { grid-template-columns:76px minmax(0,1fr); }.brand { padding-inline:6px; }.brand div,.nav-label { display:none; }.tabs button { justify-content:center; font-size:0; }.tabs button span { font-size:17px; }.sidebar-foot { font-size:0; }.sidebar-foot small { display:none; }.room-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .admin-shell { display:block; }.sidebar { position:fixed; z-index:20; left:0; right:0; bottom:0; top:auto; width:100%; height:auto; padding:8px; }.brand,.nav-label,.sidebar-foot { display:none; }.tabs { display:flex; overflow-x:auto; }.tabs button { min-width:66px; display:grid; gap:1px; justify-items:center; padding:7px 8px; font-size:10px; }.tabs button span { font-size:16px; }.topbar { height:68px; padding:0 18px; }.account-bar .status { display:none; } main { padding:16px 14px 90px; }.summary { grid-template-columns:repeat(2,1fr); gap:10px; }.metric { padding:15px; }.room-grid { grid-template-columns:1fr; }.panel { padding:16px; } }
.tab-panel { display:none; }.tab-panel.active { display:block; }.dashboard-panel { display:block; }.dashboard-note { margin:4px 0 0; }
.title-actions,.quick-actions { display:flex; align-items:center; gap:10px; }.quick-actions button { min-width:150px; padding:14px 18px; text-align:left; }
.table-wrap { width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:8px; }.data-table { width:100%; min-width:900px; border-collapse:collapse; text-align:left; }.data-table th { padding:11px 14px; color:var(--muted); background:#f8fafc; border-bottom:1px solid var(--border); font-size:12px; font-weight:650; }.data-table td { padding:13px 14px; border-bottom:1px solid #eef2f7; color:#475569; vertical-align:middle; }.data-table tr:last-child td { border-bottom:0; }.data-table tbody tr:hover { background:#fafcff; }.room-identity { display:flex; align-items:center; gap:10px; color:var(--text); }.room-identity img,.room-placeholder { width:38px; height:38px; border-radius:6px; object-fit:cover; }.room-placeholder { display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); }.data-table .room-actions { min-width:190px; margin:0; padding:0; border:0; }
.furniture-field { margin:0; padding:13px; border:1px solid var(--border); border-radius:8px; }.furniture-field legend { padding:0 5px; color:#475569; font-size:13px; font-weight:650; }.furniture-options { display:flex; flex-wrap:wrap; gap:8px; }.furniture-options label { position:relative; display:block; }.furniture-options input { position:absolute; opacity:0; pointer-events:none; }.furniture-options label { padding:5px 10px; border:1px solid #bfdbfe; border-radius:5px; color:#2563eb; background:#eff6ff; cursor:pointer; font-weight:500; }.furniture-options label:has(input:checked) { color:#fff; background:#3b82f6; border-color:#3b82f6; }.furniture-tags { display:flex; flex-wrap:wrap; gap:4px; }.furniture-tags span,.furniture-tags small { padding:2px 6px; border-radius:4px; color:#2563eb; background:#eff6ff; font-size:11px; }
@media (max-width:700px) { .title-actions { gap:6px; }.title-actions button { padding-inline:10px; }.quick-actions { display:grid; grid-template-columns:1fr 1fr; }.quick-actions button { min-width:0; }.data-table { min-width:780px; } }
.badge.moved_out { color:#64748b; background:#f1f5f9; }.detail-dialog { width:min(860px,calc(100% - 32px)); }.detail-dialog .section-note { margin:5px 0 0; }.detail-list { display:grid; gap:8px; }.detail-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 15px; border:1px solid var(--border); border-radius:8px; background:#fafcff; }.detail-item p { margin-top:4px; color:var(--muted); font-size:12px; }.detail-item>div:last-child { text-align:right; }.payment-amount { color:#15803d; white-space:nowrap; }.payment-amount.reversed { color:#94a3b8; text-decoration:line-through; }
.bill-card { border-left:4px solid #3b82f6; }.bill-card.overdue { border-left-color:#ef4444; background:#fffafa; }.bill-card.paid { border-left-color:#22c55e; }.bill-card.pending_verification { border-left-color:#f59e0b; }.bill-status { display:inline-block; margin-left:8px; padding:3px 9px; border-radius:4px; color:#1d4ed8; background:#dbeafe; font-size:12px; font-weight:650; }.bill-status.overdue { color:#b91c1c; background:#fee2e2; }.bill-status.paid { color:#15803d; background:#dcfce7; }.bill-status.pending_verification { color:#b45309; background:#fef3c7; }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--border); }.info-grid>div { padding:12px 14px; background:#fff; }.info-grid span { display:block; color:var(--muted); font-size:12px; }.info-grid strong { display:block; margin-top:3px; font-size:13px; }.payment-detail { overflow:hidden; border:1px solid var(--border); border-radius:8px; }.payment-detail .detail-item { border:0; border-radius:0; }.payment-items { padding:10px 15px; border-top:1px solid var(--border); background:#fff; }.payment-items>div { display:flex; justify-content:space-between; gap:20px; padding:5px 0; color:#475569; font-size:12px; }.payment-items>div strong { white-space:nowrap; }.payment-items>span { color:var(--muted); font-size:12px; }
@media(max-width:700px){.info-grid{grid-template-columns:1fr}.detail-item{align-items:flex-start}.payment-items>div{display:grid;gap:2px}}
.filter-bar { display:grid; grid-template-columns:repeat(3,minmax(140px,220px)) auto; align-items:end; gap:10px; margin-bottom:18px; padding:13px; border:1px solid var(--border); border-radius:8px; background:#f8fafc; }.filter-bar label { gap:4px; }.filter-bar input,.filter-bar select { height:38px; background:#fff; }.filter-bar button { height:38px; }.compact-filter { grid-template-columns:minmax(180px,240px) auto; }
@media(max-width:700px){.filter-bar,.compact-filter{grid-template-columns:1fr 1fr}.filter-bar label{grid-column:span 1}.filter-bar button{width:auto}}