:root {
  --primary: #16765d;
  --primary-dark: #105c49;
  --primary-soft: #e8f4ef;
  --ink: #17231f;
  --muted: #6f7e79;
  --line: #e4eae7;
  --surface: #ffffff;
  --canvas: #f5f7f6;
  --orange: #df8b35;
  --orange-soft: #fff3e4;
  --red: #d95b5b;
  --red-soft: #fcecec;
  --blue: #4e79bb;
  --blue-soft: #edf3fc;
  --shadow: 0 8px 30px rgba(28, 56, 47, .07);
  --radius: 16px;
}
html, body { width:100%; max-width:100%; touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 14px;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 238px; z-index: 30;
  display: flex; flex-direction: column; padding: 28px 18px 20px;
  color: white; background: linear-gradient(180deg, #115d4a 0%, #0b4438 100%);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; }
.brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center;
  border-radius: 13px; color: var(--primary-dark); background: #f2d291;
  font-family: serif; font-size: 23px; font-weight: bold;
}
.brand h1 { margin: 0; font-size: 20px; letter-spacing: 3px; }
.brand p { margin: 4px 0 0; opacity: .68; font-size: 12px; letter-spacing: 3px; }
.nav-list { display: flex; flex-direction: column; gap: 7px; }
.nav-item {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px;
  border: 0; border-radius: 11px; color: rgba(255,255,255,.72); background: transparent;
  text-align: left; transition: .2s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.nav-item.active { color: white; background: rgba(255,255,255,.14); box-shadow: inset 3px 0 #e8c679; }
.nav-icon { width: 24px; text-align: center; font-size: 18px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; color: white; background: #dc6262; font-size: 10px; line-height: 20px; text-align: center; }
.sidebar-foot {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px;
  border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8);
}
.sidebar-foot strong, .sidebar-foot span { display: block; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot span { margin-top: 3px; opacity: .55; font-size: 11px; }
.storage-dot { width: 9px; height: 9px; border-radius: 50%; background: #71d5a2; box-shadow: 0 0 0 4px rgba(113,213,162,.12); }
.main { min-height: 100vh; margin-left: 238px; }
.topbar {
  height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
}
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 11px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.topbar h2 { margin: 0; font-family: "Microsoft YaHei", sans-serif; font-size: 23px; }
.top-actions, .toolbar-actions, .room-tools { display: flex; align-items: center; gap: 12px; }
.role-button { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); font-size: 11px; }
.role-button span { width: 8px; height: 8px; border-radius: 50%; background: #9aa6a2; }
.role-button.manager { color: var(--primary); border-color: #b8dfd1; background: var(--primary-soft); }
.role-button.manager span { background: var(--primary); }
.global-search, .table-search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: white;
}
.global-search { width: 240px; height: 40px; background: var(--canvas); }
.table-search { height: 39px; }
.global-search input, .table-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; }
.content { padding: 28px 34px 48px; }
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.home-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 30px 34px; border-radius: 18px; color: white; background: linear-gradient(125deg, #115d4a, #23846b); box-shadow: var(--shadow); }
.home-welcome h2 { margin: 0 0 8px; font-size: 26px; }
.home-welcome > div > p:last-child { margin: 0; color: rgba(255,255,255,.72); }
.home-welcome .eyebrow { color: #c8e9dd; }
.home-today { min-width: 130px; padding: 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); text-align: center; }
.home-today strong, .home-today span { display: block; }
.home-today strong { font-size: 34px; }
.home-today span { margin-top: 4px; font-size: 11px; opacity: .72; }
.home-entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.home-entry { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; min-height: 126px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; box-shadow: var(--shadow); text-align: left; transition: .2s; }
.home-entry:hover { border-color: var(--primary); transform: translateY(-2px); }
.home-entry.primary-entry { grid-column: span 2; color: white; border: 0; background: linear-gradient(120deg, #174f43, #247762); }
.home-entry-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: var(--primary-soft); font-size: 23px; font-weight: bold; }
.primary-entry .home-entry-icon { color: white; background: rgba(255,255,255,.14); }
.home-entry-icon.ledger { color: #a36726; background: var(--orange-soft); }
.home-entry-icon.search { color: var(--blue); background: var(--blue-soft); }
.home-entry-icon.data { color: #815cac; background: #f3edfa; }
.home-entry-icon.settings { color: #5f6d68; background: #edf0ef; }
.home-entry h3 { margin: 0 0 7px; font-size: 17px; }
.home-entry p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.primary-entry p { color: rgba(255,255,255,.7); }
.home-entry > b { color: var(--primary); font-size: 11px; }
.primary-entry > b { color: #d7eee5; }
.business-subnav { display: flex; gap: 8px; margin-bottom: 18px; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.business-subnav button { min-width: 105px; height: 38px; padding: 0 14px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; white-space: nowrap; }
.business-subnav button.active { color: white; background: var(--primary); font-weight: bold; }
.business-subnav b { display: inline-block; min-width: 18px; margin-left: 4px; padding: 1px 5px; border-radius: 9px; background: rgba(255,255,255,.18); font-size: 9px; }
.btn {
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px;
  font-weight: 600; transition: .2s;
}
.btn-primary { color: white; background: var(--primary); box-shadow: 0 5px 14px rgba(22,118,93,.2); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-outline { border-color: var(--line); color: var(--ink); background: white; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { color: var(--muted); background: transparent; }
.btn-danger { color: white; background: var(--red); }
.full { width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
  display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: #eef1f0; color: var(--muted); font-size: 20px; font-weight: bold; }
.stat-card p { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.stat-card strong { font-size: 29px; line-height: 1; }
.stat-card span { margin-left: 4px; color: var(--muted); font-size: 12px; }
.stat-occupied .stat-icon, .stat-icon.green { color: var(--primary); background: var(--primary-soft); }
.stat-guests .stat-icon { color: #815cac; background: #f3edfa; }
.stat-vacant .stat-icon { color: var(--blue); background: var(--blue-soft); }
.stat-ending .stat-icon, .stat-icon.red { color: var(--red); background: var(--red-soft); }
.stat-total .stat-icon, .stat-icon.blue { color: var(--orange); background: var(--orange-soft); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 23px; border-bottom: 1px solid var(--line); }
.panel-head h3, .section-title { margin: 0; font-size: 17px; }
.panel-head p, .section-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.vacant { border: 1px solid #a4aaa7; background: #e9ecea; }
.legend-dot.occupied { background: var(--primary); }
.legend-dot.ending { background: var(--orange); }
.legend-dot.private { background: #4c9278; }
.legend-dot.shared { background: #4d86b8; }
.legend-dot.full { background: #b56a72; }
.select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.room-groups { padding: 20px; background: #f9fbfa; }
.floor-group { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; }
.floor-group:last-child { margin-bottom: 0; }
.floor-group-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #f4f9f7, #fff); }
.floor-group-head > div { display: flex; align-items: center; gap: 11px; }
.floor-icon { min-width: 37px; height: 37px; display: grid; place-items: center; padding: 0 8px; border-radius: 10px; color: white; background: var(--primary); font-weight: bold; }
.floor-group-head h4 { margin: 0; font-size: 15px; }
.floor-group-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; padding: 16px; }
.room-card {
  position: relative; min-height: 112px; padding: 15px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; transition: .2s;
}
.room-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(28,56,47,.09); }
.room-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #ccd5d1; }
.room-card.vacant { background: #f2f3f2; border-color: #d5dad7; }
.room-card.vacant::before { width: 6px; background: #9ca5a1; }
.room-card.occupied { background: linear-gradient(145deg, #fff, #f2faf7); }
.room-card.occupied::before { background: var(--primary); }
.room-card.ending { background: linear-gradient(145deg, #fff, #fff8ef); }
.room-card.ending::before { background: var(--orange); }
.room-card.private { background: #e8f4ef; border-color: #afd3c5; }
.room-card.private::before { width: 6px; background: #3e876d; }
.room-card.shared { background: #e8f1fa; border-color: #b4cee5; }
.room-card.shared::before { width: 6px; background: #447da9; }
.room-card.full { background: #f7e9eb; border-color: #dfbec2; }
.room-card.full::before { width: 6px; background: #ad626b; }
.room-top { display: flex; justify-content: space-between; gap: 8px; }
.room-number { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.room-status { height: 22px; padding: 0 7px; border-radius: 20px; color: var(--muted); background: #f0f3f2; font-size: 10px; line-height: 22px; }
.occupied .room-status { color: var(--primary); background: var(--primary-soft); }
.ending .room-status { color: #a65d13; background: var(--orange-soft); }
.vacant .room-status { color: #68716d; background: #dde1df; }
.private .room-status { color: #27664f; background: #cce5db; }
.shared .room-status { color: #315f85; background: #ccdfef; }
.full .room-status { color: #8c414a; background: #eccfd3; }
.room-card.full .room-number { color: #7f3740; }
.room-card.shared .room-number { color: #285b82; }
.room-card.private .room-number { color: #245f49; }
.room-name { margin: 17px 0 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-date { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.vacant .room-name { color: #9aa6a2; font-weight: normal; }
.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dashboard-switchbar { display: flex; justify-content: center; margin: -4px 0 18px; }
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.segmented button { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; }
.segmented button.active { color: var(--primary); background: var(--primary-soft); font-weight: bold; }
.segmented b { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,.05); font-size: 10px; }
.table-panel { overflow: hidden; }
.checkedout-panel { overflow: hidden; }
.checkedout-head { align-items: flex-end; }
.checkedout-tools { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.checkedout-tools label > span { font-size: 10px; }
.selection-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); background: #fafbfb; font-size: 11px; }
.selection-check { display: flex; align-items: center; gap: 7px; }
.selection-check input, .row-check { width: 16px; height: 16px; accent-color: var(--primary); }
.selection-check span { margin: 0; }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 14px 17px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); background: #fafbfb; font-size: 11px; font-weight: 600; }
td { font-size: 13px; }
tbody tr:hover { background: #fbfdfc; }
tbody tr:last-child td { border-bottom: 0; }
.status-pill { display: inline-block; padding: 4px 8px; border-radius: 20px; font-size: 10px; font-weight: bold; }
.status-pill.active { color: var(--primary); background: var(--primary-soft); }
.status-pill.ended { color: var(--muted); background: #edf0ef; }
.status-pill.warning { color: #a65d13; background: var(--orange-soft); }
.status-pill.danger { color: var(--red); background: var(--red-soft); }
.mode-pill { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: bold; }
.mode-pill.private { color: var(--primary); background: var(--primary-soft); }
.mode-pill.shared { color: var(--blue); background: var(--blue-soft); }
.readonly-label { color: #9aa6a2; font-size: 11px; }
.linked-label { display: inline-block; padding: 4px 7px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 10px; }
.order-actions { display: flex; align-items: center; gap: 4px; }
.order-actions button { width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: white; }
.order-actions button:hover { color: var(--primary); border-color: var(--primary); }
.money-income { color: var(--primary); font-weight: bold; }
.money-expense { color: var(--red); font-weight: bold; }
.action-group { display: flex; gap: 5px; }
.icon-btn { padding: 5px 8px; border: 0; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: 11px; }
.icon-btn.neutral { color: var(--muted); background: #edf0ef; }
.icon-btn.danger { color: var(--red); background: var(--red-soft); }
.empty-state { padding: 55px 20px; color: var(--muted); text-align: center; }
.empty-state h3 { margin: 12px 0 5px; color: var(--ink); }
.empty-state p { margin: 0 0 18px; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: auto; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 22px; }
.ledger-stats { grid-template-columns: repeat(3, 1fr); }
.ledger-stats .stat-card strong { font-size: 24px; }
.payment-panel { margin-top: 20px; overflow: hidden; }
.payment-balance { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; padding: 13px 15px; border-radius: 9px; background: var(--orange-soft); }
.payment-balance span { color: var(--muted); font-size: 11px; }
.payment-balance strong { color: #a65d13; font-size: 20px; }
.full-payment-check { margin-bottom: 16px; }
.reminder-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 28px 32px; border-radius: var(--radius); color: white; background: linear-gradient(125deg, #9f4e3f, #d07c51); box-shadow: var(--shadow); }
.reminder-banner h3 { margin: 0 0 8px; font-size: 24px; }
.reminder-banner p:last-child { margin: 0; color: rgba(255,255,255,.75); }
.reminder-banner .eyebrow { color: #ffdccb; }
.reminder-count { min-width: 110px; padding: 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); text-align: center; }
.reminder-count strong, .reminder-count span { display: block; }
.reminder-count strong { font-size: 32px; }
.reminder-count span { margin-top: 4px; font-size: 11px; opacity: .7; }
.reminder-switchbar { display: flex; justify-content: center; margin: -4px 0 18px; }
.reminder-tabs { max-width: 100%; overflow-x: auto; }
.reminder-tabs button { white-space: nowrap; }
.reminder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reminder-card { padding: 20px; border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.reminder-card.overdue { border-top-color: var(--red); }
.reminder-card.today { border-top-color: #c96b2d; }
.reminder-card.fullpaid { border-top-color: var(--blue); }
.reminder-card-head { display: flex; justify-content: space-between; gap: 10px; }
.reminder-card-head h3 { margin: 8px 0 0; }
.room-chip { padding: 3px 7px; border-radius: 5px; color: var(--muted); background: #eef1f0; font-size: 10px; }
.urgency-label { color: #a65d13; font-size: 11px; font-weight: bold; }
.overdue .urgency-label { color: var(--red); }
.reminder-money { display: flex; align-items: flex-end; justify-content: space-between; margin: 20px 0 13px; padding: 14px; border-radius: 9px; background: var(--red-soft); }
.reminder-money span { color: var(--muted); font-size: 11px; }
.reminder-money strong { color: var(--red); font-size: 20px; }
.reminder-money.settled { background: var(--primary-soft); }
.reminder-money.settled strong { color: var(--primary); }
.reminder-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; color: var(--muted); font-size: 11px; }
.reminder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.permission-strip { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid #dbe4e0; border-radius: 12px; background: white; }
.permission-strip strong, .permission-strip span { display: block; }
.permission-strip span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.ledger-toolbar { align-items: flex-end; }
.date-filters { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.date-filters label > span { font-size: 10px; }
.date-filters input { width: 135px; height: 39px; }
.table-search.compact { width: 170px; }
.search-hero { margin-bottom: 16px; padding: 30px; border-radius: var(--radius); color: white; background: linear-gradient(125deg, #164f43, #267965); box-shadow: var(--shadow); }
.search-hero .eyebrow { color: #bfe3d6; }
.search-hero h3 { margin: 0 0 18px; font-size: 24px; }
.master-search { display: flex; align-items: center; gap: 10px; max-width: 760px; height: 50px; padding: 0 15px; border-radius: 11px; background: white; }
.master-search span { margin: 0; color: var(--primary); font-size: 20px; }
.master-search input { border: 0; box-shadow: none; }
.master-search input:focus { box-shadow: none; }
.search-summary { margin-bottom: 15px; color: var(--muted); font-size: 12px; }
.search-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.search-result-panel { overflow: hidden; }
.search-result-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: white; text-align: left; }
.search-result-item:last-child { border-bottom: 0; }
.search-result-item:hover { background: #f8fbfa; }
.search-result-item strong, .search-result-item span { display: block; }
.search-result-item span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.search-result-item p { max-width: 45%; margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.search-result-item.ledger-result b { white-space: nowrap; }
.search-placeholder { padding: 38px 20px; color: var(--muted); text-align: center; }
.intro-card {
  display: flex; align-items: center; justify-content: space-between; min-height: 180px; margin-bottom: 22px; padding: 32px 38px;
  overflow: hidden; border-radius: var(--radius); color: white; background: linear-gradient(125deg, #115f4c, #168066); box-shadow: var(--shadow);
}
.intro-card .eyebrow { color: #bfe3d6; }
.intro-card h3 { margin: 0 0 10px; font-size: 25px; }
.intro-card p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.73); line-height: 1.8; }
.intro-art { width: 95px; height: 95px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.08); font-size: 44px; }
.data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.data-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.data-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; font-weight: bold; }
.data-card-icon.green { color: var(--primary); background: var(--primary-soft); }
.data-card-icon.orange { color: var(--orange); background: var(--orange-soft); }
.data-card-icon.blue { color: var(--blue); background: var(--blue-soft); }
.data-card-icon.purple { color: #815cac; background: #f3edfa; }
.data-card h3 { margin: 17px 0 8px; }
.data-card > p { min-height: 44px; margin: 0; color: var(--muted); line-height: 1.65; }
.data-meta { display: flex; justify-content: space-between; margin: 20px 0 14px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.file-btn { display: grid; place-items: center; }
.file-btn input { display: none; }
.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.settings-card { overflow: hidden; }
.settings-form { padding: 22px; }
.settings-form > label, .settings-form .form-row { margin-bottom: 15px; }
.form-hint { color: var(--muted); font-size: 11px; line-height: 1.6; }
.mode-display { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 16px; border-radius: 10px; background: var(--canvas); }
.mode-display > span { width: 13px; height: 13px; border-radius: 50%; }
.mode-display strong, .mode-display p { display: block; margin: 0; }
.mode-display p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.viewer-dot { background: #9aa6a2; }
.manager-dot { background: var(--primary); box-shadow: 0 0 0 5px rgba(22,118,93,.1); }
.form-row, .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label > span { display: block; margin-bottom: 7px; color: #45534e; font-size: 12px; font-weight: 600; }
label em { color: var(--red); font-style: normal; }
input, select, textarea {
  width: 100%; border: 1px solid #dbe3df; border-radius: 8px; padding: 10px 11px;
  outline: none; color: var(--ink); background: white; transition: .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,118,93,.09); }
textarea { resize: vertical; }
.category-combobox { position: relative; width: 100%; }
.category-input-row { display: grid; grid-template-columns: 1fr 44px; }
.category-input-row input { min-width: 0; border-radius: 8px 0 0 8px; }
.category-toggle { display: grid; place-items: center; padding: 0; border: 1px solid #dbe3df; border-left: 0; border-radius: 0 8px 8px 0; color: #34423d; background: white; }
.category-toggle::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.category-toggle:hover, .category-toggle[aria-expanded="true"] { color: var(--primary); background: #f7faf9; }
.category-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(225deg); }
.category-dropdown { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0; width: 100%; overflow: hidden; border: 1px solid #cfdcd7; border-radius: 9px; background: white; box-shadow: 0 9px 24px rgba(27,61,50,.18); }
.category-options { max-height: 240px; overflow-y: auto; }
.category-option { display: grid; grid-template-columns: 1fr 42px; align-items: stretch; border-bottom: 1px solid var(--line); }
.category-option.locked { grid-template-columns: 1fr; }
.category-option:last-child { border-bottom: 0; }
.category-select { min-height: 42px; padding: 9px 12px; border: 0; color: var(--ink); background: white; text-align: left; }
.category-select:hover { color: var(--primary); background: var(--primary-soft); }
.category-delete { width: 42px; border: 0; color: var(--red); background: #fff5f5; font-size: 18px; font-weight: 700; }
.category-delete:hover { color: white; background: var(--red); }
.category-empty { padding: 14px 12px; color: var(--muted); text-align: center; font-size: 11px; }
.room-manage-panel { overflow: hidden; }
.room-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 20px; }
.manage-room { position: relative; padding: 14px 10px; border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.manage-room strong, .manage-room span { display: block; }
.manage-room span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.manage-room button.room-delete { position: absolute; top: 4px; right: 4px; border: 0; color: #abb4b1; background: transparent; opacity: 0; }
.manage-room:hover button.room-delete { opacity: 1; }
.manage-room .capacity-edit { margin-top: 9px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: white; font-size: 9px; }
.manage-room.occupied { border-color: #b8dfd1; background: var(--primary-soft); }
.manage-room.private { border-color: #b8dfd1; background: var(--primary-soft); }
.manage-room.shared { border-color: #cadbf2; background: var(--blue-soft); }
.manage-room.full { border-color: #d8c8e9; background: #f3edfa; }
.text-btn { border: 0; background: transparent; font-size: 12px; }
.text-btn.danger { color: var(--red); }
.login-card .text-btn { min-height: 44px; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(12,30,24,.54); backdrop-filter: blur(3px);
}
.modal-backdrop.open { display: flex; }
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  border-radius: 17px; background: white; box-shadow: 0 25px 70px rgba(0,0,0,.22); animation: modalIn .2s ease;
}
.modal-large { width: min(720px, 100%); }
.modal-xl { width: min(850px, 100%); }
.modal-small { width: min(420px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 21px 24px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 19px; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: #f1f3f2; font-size: 21px; }
.modal form { padding: 23px 24px; }
.form-section { margin-bottom: 21px; }
.form-section h4 { margin: 0 0 14px; font-size: 13px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-title-row h4 { margin: 0; }
.section-title-row p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.btn-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.capacity-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed #cbd8d3; border-radius: 8px; color: var(--muted); background: var(--canvas); font-size: 11px; }
.room-search-box { display: flex; align-items: center; gap: 7px; border: 1px solid #dbe3df; border-radius: 8px; padding: 0 10px; background: white; }
.room-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,118,93,.09); }
.room-search-box input { border: 0; box-shadow: none; padding-left: 0; }
.room-search-box input:focus { box-shadow: none; }
.capacity-note strong { color: var(--primary); font-size: 15px; }
.companion-card { margin-bottom: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfb; }
.companion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.companion-id-upload { display: flex; gap: 9px; margin-top: 12px; }
.companion-id-upload label { flex: 1; cursor: pointer; }
.companion-id-upload input { display: none; }
.companion-id-upload span { display: grid; place-items: center; min-height: 38px; margin: 0; border: 1px dashed #aebfba; border-radius: 8px; color: var(--primary); background: white; font-size: 10px; }
.companion-id-upload span:hover { border-color: var(--primary); background: var(--primary-soft); }
.companion-id-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.companion-id-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.companion-id-item > button:first-child { width: 100%; height: 90px; padding: 0; border: 0; background: #e9edeb; }
.companion-id-item img { width: 100%; height: 100%; object-fit: cover; }
.companion-id-item span { display: block; margin: 0; padding: 7px 8px; font-size: 10px; }
.companion-id-item > button:last-child { position: absolute; top: 5px; right: 5px; padding: 3px 6px; border: 0; border-radius: 4px; color: white; background: rgba(175,64,64,.88); font-size: 8px; }
.companion-id-empty { grid-column: 1 / -1; padding: 11px; border-radius: 7px; color: var(--muted); background: #f1f3f2; text-align: center; font-size: 9px; }
.attachment-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.upload-card { min-height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; border: 1px dashed #b9c9c3; border-radius: 11px; color: var(--muted); background: #fafcfb; text-align: center; cursor: pointer; }
.upload-card:hover { border-color: var(--primary); background: var(--primary-soft); }
.upload-card input { display: none; }
.upload-card strong, .upload-card small { display: block; }
.upload-card strong { margin-top: 7px; color: var(--ink); font-size: 12px; }
.upload-card small { margin-top: 4px; font-size: 9px; }
.upload-icon { width: 32px; height: 32px; display: grid; place-items: center; margin: 0 !important; border-radius: 50%; color: white !important; background: var(--primary); font-size: 19px !important; }
.attachment-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.attachment-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.attachment-image { width: 100%; height: 105px; padding: 0; border: 0; background: #e9edeb; }
.attachment-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.attachment-item > div { padding: 9px 10px; }
.attachment-item strong, .attachment-item span { display: block; }
.attachment-item strong { font-size: 11px; }
.attachment-item span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-remove { position: absolute; top: 6px; right: 6px; padding: 4px 7px; border: 0; border-radius: 5px; color: white; background: rgba(175,64,64,.88); font-size: 9px; }
.attachment-empty { grid-column: 1 / -1; padding: 18px; border-radius: 9px; color: var(--muted); background: var(--canvas); text-align: center; font-size: 11px; }
.attachment-security { margin: 10px 0 0; color: #9a6c32; font-size: 10px; }
.span-2 { grid-column: span 2; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.check-line { display: flex; align-items: center; gap: 8px; padding: 11px; border-radius: 8px; background: var(--primary-soft); }
.check-line input { width: auto; }
.check-line span { margin: 0; color: var(--primary-dark); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px 24px; }
.detail-item { padding: 12px; border-radius: 9px; background: var(--canvas); }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.detail-item strong { font-size: 13px; word-break: break-all; }
.detail-actions { display: flex; gap: 9px; padding: 0 24px 24px; }
.detail-actions .btn { flex: 1; }
.room-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; color: var(--muted); background: var(--canvas); }
.room-detail-summary strong { color: var(--ink); font-size: 22px; }
.resident-block { margin: 18px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.resident-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.resident-title > div { display: flex; align-items: center; gap: 9px; }
.resident-title > span { color: var(--muted); font-size: 11px; }
.compact-detail { padding: 14px; }
.resident-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 0 14px 14px; }
.vacant-detail { padding: 38px 25px; text-align: center; }
.vacant-detail p { color: var(--muted); }
.toast-container { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 250px; padding: 13px 16px; border-left: 4px solid var(--primary); border-radius: 9px;
  background: white; box-shadow: 0 12px 35px rgba(0,0,0,.16); animation: toastIn .25s ease;
}
.toast.error { border-left-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateX(15px); } }
.membership-card { margin-top: 12px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.07); }
.membership-card span, .membership-card strong, .membership-card small { display: block; }
.membership-card span { color: rgba(255,255,255,.55); font-size: 9px; }
.membership-card strong { margin-top: 4px; color: #f1d590; font-size: 12px; }
.membership-card small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 9px; }
.membership-card.expiring strong { color: #ffd08a; }
.membership-card.blocked strong { color: #ff9b91; }
.membership-blocker { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; background: rgba(13,31,26,.82); backdrop-filter: blur(8px); }
.membership-blocker.hidden { display: none; }
.membership-blocker-card { width: min(430px, 100%); padding: 36px 32px; border-radius: 20px; background: white; box-shadow: 0 30px 80px rgba(0,0,0,.3); text-align: center; }
.membership-blocker-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: white; background: #b64d45; font-size: 28px; font-weight: 800; }
.membership-blocker-card p { margin: 0; color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.membership-blocker-card h2 { margin: 8px 0 10px; color: var(--ink); font-size: 25px; }
.membership-blocker-card span { display: block; margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.user-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: 10px; }
.account-manage-panel,.account-log-panel{margin-top:18px}.account-permissions{display:flex;flex-wrap:wrap;gap:8px;padding:11px;border:1px solid var(--line);border-radius:9px}.account-permissions label{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:7px;background:var(--canvas)}.account-permissions input{width:auto}.login-gate{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:22px;background:linear-gradient(135deg,#0d493b,#16735c)}.login-gate.hidden{display:none}.login-card{width:min(430px,100%);overflow:hidden;border-radius:20px;background:white;box-shadow:0 30px 90px rgba(0,0,0,.3)}.login-brand{display:flex;align-items:center;gap:12px;padding:24px 28px;color:white;background:#103f35}.login-brand>div{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#174c40;background:#f0d38e;font:bold 22px serif}.login-brand strong,.login-brand small{display:block}.login-brand small{margin-top:4px;opacity:.7}.login-card form{padding:26px 28px}.login-card h2{margin:0 0 7px}.login-card form>p{color:var(--muted);font-size:11px;line-height:1.7}.login-card label{display:block;margin-top:14px}.login-card label span{display:block;margin-bottom:6px;color:#46544f;font-size:11px}.login-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;outline:0}.sms-row{display:grid;grid-template-columns:1fr 105px;align-items:end;gap:8px}.sms-row.hidden,.password-setup.hidden{display:none}.sms-row button{height:42px;border:0;border-radius:8px;color:var(--primary);background:var(--primary-soft);font-size:11px}.login-submit{margin-top:20px}.login-card .text-btn{width:100%;margin-top:12px;text-align:center}.demo-sms{text-align:center;color:#a36a22!important}.account-hidden{display:none!important}
.password-box{position:relative}.password-box input{padding-right:46px!important}.password-eye{position:absolute;right:8px;top:50%;width:32px;height:32px;display:grid;place-items:center;transform:translateY(-50%);border:0;border-radius:8px;background:#f2f5f4;color:#49615a;font-size:13px}.password-eye.active{color:white;background:var(--primary)}.login-error{margin:12px 0 0!important;padding:10px 12px;border:1px solid #f0b9b9;border-radius:9px;color:#a53d3d!important;background:#fff1f1;font-size:12px!important}.login-error.hidden{display:none}
.forgot-code-row{display:grid;grid-template-columns:1fr 108px;align-items:end;gap:8px}.forgot-code-row button{height:42px;border:0;border-radius:8px;color:var(--primary);background:var(--primary-soft);font-size:11px}.forgot-code-row button:disabled{color:#9aa6a2;background:#edf0ef;cursor:not-allowed}
#forgotPasswordModal{z-index:760}

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
  .reminder-grid { grid-template-columns: repeat(2, 1fr); }
  .role-button { display: none; }
}
@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .btn { min-height: 44px; }
  .business-subnav button { height: 44px; }
  .segmented button { min-height: 40px; }
  .sidebar { inset: auto 0 0 0; width: 100%; height: 64px; padding: 6px 8px; transform: none; border-top: 1px solid rgba(255,255,255,.15); }
  .brand, .sidebar-foot, .membership-card { display: none; }
  .nav-list { flex-direction: row; gap: 3px; overflow: hidden; }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-item { min-width: 0; height: 52px; flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; font-size: 10px; text-align: center; }
  .nav-item.active { box-shadow: inset 0 3px #e8c679; }
  .nav-icon { width: auto; font-size: 16px; }
  .nav-badge { position: absolute; margin: -28px 0 0 32px; }
  .main { margin-left: 0; }
  .mobile-menu { display: none; }
  .topbar { height: 76px; padding: 0 17px; }
  .topbar .eyebrow, .global-search { display: none; }
  .topbar h2 { font-size: 19px; }
  .content { padding: 18px 14px 36px; }
  .home-welcome { padding: 23px 19px; }
  .home-welcome h2 { font-size: 22px; }
  .home-today { min-width: 92px; padding: 12px 8px; }
  .home-today strong { font-size: 27px; }
  .home-entry-grid { grid-template-columns: 1fr; gap: 11px; }
  .home-entry, .home-entry.primary-entry { grid-column: span 1; min-height: 105px; padding: 17px; }
  .home-entry { grid-template-columns: 45px 1fr auto; gap: 12px; }
  .home-entry-icon { width: 45px; height: 45px; border-radius: 12px; }
  .business-subnav { position: sticky; top: 84px; z-index: 15; margin: -2px 0 15px; box-shadow: 0 5px 16px rgba(28,56,47,.09); }
  .stats-grid, .ledger-stats, .data-grid, .settings-layout { grid-template-columns: 1fr; }
  .reminder-switchbar { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .reminder-tabs { min-width: max-content; }
  .reminder-grid { grid-template-columns: 1fr; }
  .reminder-actions { grid-template-columns: 1fr; }
  .search-results-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 90px; }
  .panel-head, .section-toolbar { align-items: flex-start; flex-direction: column; }
  .checkedout-tools { width: 100%; }
  .checkedout-tools label, .checkedout-tools .btn { width: 100%; }
  .checkedout-tools .select { width: 100%; }
  .room-tools, .toolbar-actions { width: 100%; justify-content: space-between; }
  .legend { display: none; }
  .table-search { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .category-select { min-height: 48px; }
  .category-option { grid-template-columns: 1fr 48px; }
  .category-delete { width: 48px; }
  .attachment-upload-grid { grid-template-columns: 1fr 1fr; }
  .contract-upload { grid-column: span 2; }
  .span-2 { grid-column: span 1; }
  .room-groups { padding: 10px; }
  .room-grid { padding: 10px; grid-template-columns: repeat(2, 1fr); }
  .floor-group-head { padding: 11px 12px; }
  .floor-icon { min-width: 32px; height: 32px; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal, .modal-large, .modal-xl, .modal-small { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .intro-card { padding: 25px; }
  .intro-art { display: none; }
  .reminder-banner, .permission-strip { align-items: flex-start; flex-direction: column; }
  .date-filters { width: 100%; }
  .date-filters label, .date-filters input, .table-search.compact { width: 100%; }
  .search-hero { padding: 22px 18px; }
}