:root {
  --bg: #f5f6fb;
  --panel: #fff;
  --text: #1b2540;
  --muted: #59667d;
  --line: #e9eaf2;
  --primary: #6555df;
  --green: #199c75;
  --orange: #cc842b;
  --shadow: 0 9px 32px rgba(37, 41, 90, .055);
}

html {scroll-behavior: smooth; scroll-padding-top: 115px;}
body {
  background: radial-gradient(ellipse 650px 380px at -6% 1%, #eae8ff 0%, transparent 75%),
              radial-gradient(ellipse 550px 320px at 99% 4%, #e7f3ff 0%, transparent 78%),
              var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}
button, input, select {accent-color: var(--primary);}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #b0a6fa;
  outline-offset: 2px;
}
.topbar {
  width: min(1380px, calc(100% - 44px));
  margin: 14px auto 0;
  top: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: rgba(255,255,255,.79);
  box-shadow: 0 10px 35px rgba(38,40,92,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand {display: flex; align-items: center; gap: 12px;}
.brand-icon {
  display: grid; place-items: center;
  width: 43px; height: 43px; flex: none;
  border-radius: 15px;
  background: linear-gradient(145deg,#6555df,#a291ff);
  color: #fff; font-size: 34px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(101,85,223,.24);
}
.brand h1 {font-size: 18px; letter-spacing: -.04em; font-weight: 800;}
.brand p {font-size: 11px; margin-top: 3px;}
.actions {gap: 8px;}
.btn, .month {
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  padding: 11px 15px;
  background: #fff;
  font-size: 12px;
  font-weight: 740;
  color: #47516a;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.month {color: #303756; min-height: 41px;}
.btn:hover {border-color: #d8d4f7; background: #f8f7ff; transform: translateY(-1px);}
.btn.primary {
  border: 1px solid transparent;
  color: #fff;
  background: linear-gradient(135deg,#6654e3,#8979ef);
  box-shadow: 0 7px 16px rgba(104,88,220,.23);
}
.btn.primary:hover {box-shadow: 0 10px 24px rgba(104,88,220,.29); background: #6555df;}
main {width: min(1336px, calc(100% - 56px)); margin: 26px auto 58px;}
.hero {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 265px; padding: 34px 48px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 27px;
  color: #fff;
  background: linear-gradient(115deg,#3c397d 1%,#594eaf 43%,#8a7cee 100%);
  box-shadow: 0 18px 45px rgba(88,74,178,.17);
}
.hero::before {
  content:""; position: absolute; z-index: -1;
  width: 700px; height: 700px; right: -160px; top: -270px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%; box-shadow: 0 0 0 120px rgba(255,255,255,.025), 0 0 0 240px rgba(255,255,255,.02);
}
.hero-copy {position: relative; z-index: 1;}
.hero-eyebrow {
  display: inline-flex; gap: 9px; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: #d9d5ff;
}
.pulse-dot {width: 7px; height: 7px; border-radius: 50%; background: #92ebbd; box-shadow: 0 0 0 4px rgba(150,235,188,.16);}
.hero h2 {font-size: clamp(29px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.05em; margin: 16px 0 12px; font-weight: 830;}
.hero h2 em {font-style: normal; color: #d6cfff;}
.hero-copy > p {margin: 0; color: #e2dffd; font-size: 13px; line-height: 1.6;}
.hero-links {display: flex; gap: 10px; margin-top: 21px;}
.hero-links a {
  padding: 10px 14px; text-decoration: none;
  color: #fff; font-size: 12px; font-weight: 750;
  border: 1px solid rgba(255,255,255,.24); border-radius: 12px;
  background: rgba(255,255,255,.12); transition: background .2s, transform .2s;
}
.hero-links a:first-child {background: #fff; color: #5246ae; border-color: #fff;}
.hero-links a:hover {transform: translateY(-2px); background: rgba(255,255,255,.24);}
.hero-links a:first-child:hover {background: #f1efff;}
.hero-links span {margin-left: 9px;}
.hero-decoration {position: relative; flex: none; width: 38%; height: 185px; display: grid; place-items: center;}
.orbit {position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%;}
.orbit-one {width: 290px; height: 290px;}.orbit-two {width: 210px; height: 210px;}
.hero-card {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 220px; padding: 24px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 21px;
  background: linear-gradient(155deg,rgba(255,255,255,.31),rgba(255,255,255,.13));
  backdrop-filter: blur(18px);
  box-shadow: 0 17px 35px rgba(35,25,109,.12);
  transform: rotate(-7deg);
}
.hero-card > span {font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #ece9ff;}
.hero-card strong {font-size: 63px; line-height: 1.25; letter-spacing: -.07em;}
.hero-card strong span {font-size: 18px; letter-spacing: -.01em; font-weight: 500;}
.hero-card small {font-size: 10px; color: #efecff;}
.sparkle {position: absolute; color: #ded8ff;}.sparkle-one {top: 0; right: 5%; font-size: 29px}.sparkle-two {bottom: -6px; left: 10%; font-size: 20px}
.section-head {margin: 34px 3px 15px;}
.section-head h2 {font-size: 19px; font-weight: 830; letter-spacing: -.035em;}
.section-head h2::before {content: ""; display: inline-block; width: 6px; height: 21px; border-radius: 10px; background: #7566e7; vertical-align: -5px; margin-right: 11px;}
.section-head p {font-size: 12px;}
.section-count {display:inline-block; margin-left: 7px; padding: 3px 7px; vertical-align: 2px; border-radius: 8px; background:#eceaff; color:#6154d4; font-size:11px;}
.cards {gap: 14px;}
.stat, .room, .panel, .table-wrap {
  border: 1px solid #e9ebf3;
  border-radius: 21px;
  box-shadow: var(--shadow);
  background: #fff;
}
.stat {position: relative; min-width: 0; min-height: 155px; padding: 20px; overflow: hidden; transition: transform .2s, box-shadow .2s;}
.stat:hover, .room:hover {transform: translateY(-3px); box-shadow: 0 19px 40px rgba(37,41,90,.11);}
.stat-icon {
  display: grid; place-items: center; margin-bottom: 14px;
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255,255,255,.20); color: #fff;
  font-size: 20px; font-weight: 750;
}
.stat-icon.green {background: #e6f8ee; color: #13a16a;}
.stat-icon.amber {background: #fff3df; color: #e29a2e;}
.stat-icon.blue {background: #eaf2ff; color: #4782e6;}
.stat .label {font-size: 12px; font-weight: 700;}
.stat .value {font-size: clamp(22px,2.15vw,30px); font-weight: 830; letter-spacing: -.055em; margin-top: 6px; white-space: nowrap;}
.stat .meta {font-size: 11px; margin-top: 7px;}
.stat.main {background: linear-gradient(140deg,#6758de,#9784f8); border: 0; box-shadow: 0 15px 32px rgba(102,85,225,.22);}
.stat.main::after {content:""; width: 155px; height: 155px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; position:absolute; right:-53px; top:-82px;}
.room-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap: 12px;}
.room {position: relative; overflow: hidden; padding: 15px; transition: transform .2s, box-shadow .2s;}
.room::before {content:""; height: 3px; position:absolute; inset: 0 0 auto; background: linear-gradient(90deg,#6c5be2,#a296fa);}
.room-top {align-items: flex-start;}
.room-heading {display:flex; align-items:center; gap:11px; min-width: 0;}
.room-number {display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; background:#efedff; color:#6656e2; font-size:14px; font-weight:850;}
.room h3 {font-size: 14px; font-weight: 830; letter-spacing: -.035em;}
.sub {font-size: 12px; margin-top: 5px; line-height: 1.3; min-height: 0; overflow-wrap: anywhere;}
.empty {color:#657288;}
.badge {font-size: 11px; display: inline-flex; align-items: center; gap:6px;}
.badge::before {content:""; width:6px; height:6px; flex:none; border-radius:100%; background:currentColor;}
.badge.pending {background:#fff5e4; color:#885609;}
.badge.partial {background:#eeeaff; color:#5140b1;}
.badge.paid {background:#e5f8ef; color:#126d4d;}
.room-total {margin: 12px 0 6px; font-weight: 840; font-size: clamp(19px,1.9vw,25px); letter-spacing: -.045em;}
.room-total::after {content:" / tháng"; color: #606c80; font-size:11px; font-weight:500; letter-spacing:0;}
.room-note {min-height: 31px; margin-bottom: 14px; color: #606c80; font-size: 11px; line-height: 1.5;}
.room-meta {display:flex; flex-wrap:wrap; gap:5px 11px; margin-bottom:12px; color:#647087; font-size:11px;}
.room-meta strong {color:#354160; font-variant-numeric:tabular-nums;}
.breakdown {gap: 8px; margin-bottom: 15px;}
.mini {border-color:#eff0f7; background:#f8f9fc; border-radius:12px; padding: 11px 12px;}
.mini span {font-size: 10px;}.mini strong {font-size: 12px; margin-top: 5px;}
.room-actions .btn {font-size:12px; padding: 10px 8px; min-height: 38px;}
.table-wrap {overflow: auto;}
.table-wrap:focus-visible {outline:3px solid #5546d7; outline-offset:2px;}
table {min-width: 920px;}
th {background: #f9fafe; color:#515e74; font-size:11px; letter-spacing:.055em;}
th, td {padding: 15px; border-color: #eef0f5;}
tbody tr {transition: background .2s;}
tbody tr:hover {background: #f9f8ff;}
.money {color: #5547c1;}
.status {border-radius:10px; font-size:12px; color:#43516b; font-weight:700; min-width:154px; min-height:44px; cursor:pointer;}
.finance-grid {gap: 15px;}
.panel {padding: 23px;}
.panel h3 {font-size: 16px; font-weight: 820;}
.progress {background: #ebeefa; height: 11px;}
.progress div {background: linear-gradient(90deg,#1ca877,#59d4a0); border-radius: inherit; transition: width .3s;}
.progress-meta {font-size: 11px;}
.field label {font-size: 12px; font-weight: 750;}
.field input, .field select {border-radius: 12px; padding: 11px 12px;}
.status, .field select {
  appearance:none;
  -webkit-appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2343516b' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 14px;
  padding:10px 44px 10px 14px;
}
.field select {min-height:44px;}
.data-tools {position:relative;min-width:116px;}
.data-tools > summary {display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:42px;}
.data-tools > summary::-webkit-details-marker {display:none;}
.data-tools[open] > summary,.data-tools > summary:hover {border-color:#bdb6ea;background:#f8f7ff;}
.data-menu {position:absolute;top:calc(100% + 7px);right:0;z-index:30;min-width:188px;padding:7px;border:1px solid #e7e8f1;background:#fff;border-radius:13px;box-shadow:0 12px 34px rgba(30,38,73,.17);}
.data-menu .btn {display:block;width:100%;text-align:left;border:0;white-space:nowrap;}
.data-menu .btn:hover {background:#f2f1fc;}
.data-tools > summary:focus-visible {outline:3px solid #5546d7;outline-offset:3px;}
.field input:focus, .field select:focus {border-color: #9585ef; box-shadow: 0 0 0 4px #efecff;}
.summary-item {padding: 12px 0; border-bottom-style: dashed; font-size: 13px;}
.summary-item.total {padding-top: 16px;}
.hint {font-size: 11px;}
.annual-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.annual-item {display:flex;flex-direction:column;gap:9px;min-width:0;padding:17px 19px;background:#fff;border:1px solid #e9ebf3;border-radius:18px;box-shadow:var(--shadow);}
.annual-item span {font-size:12px;color:var(--muted);font-weight:700;}
.annual-item strong {font-size:clamp(18px,1.8vw,25px);color:#27324e;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.annual-table {min-width:900px;}
.annual-table td, .annual-table tfoot th {font-variant-numeric:tabular-nums;}
.annual-table tfoot {background:#f0efff;font-weight:800;}
.annual-table tfoot th {background:#f0efff;color:#5141bb;}
dialog {border-radius: 22px; box-shadow: 0 28px 70px rgba(26,30,75,.25);}
dialog::backdrop {backdrop-filter: blur(4px);}
.dialog-head {background: #fafaff;}
.dialog-head h3 {font-size: 17px;}
.dialog-foot {background: #fafaff;}
@media(max-width:1100px) {
  .hero {padding: 34px;}
  .stat {padding: 17px;}
  .room-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
  .annual-summary {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:750px) {
  .hero-decoration {display:none;}
  .hero {min-height: 220px; padding: 28px;}
  .cards {grid-template-columns: repeat(2,minmax(0,1fr));}
  .stat .value {font-size: clamp(20px,4vw,28px);}
  main {width:calc(100% - 28px); margin-top: 18px;}
}
@media(max-width:680px) {
  .topbar {width:100%; top:0; margin:0; border-radius:0; padding:12px 14px;}
  .brand h1 {font-size:17px;}.brand-icon {width:39px; height:39px;}
  .actions {width:100%; display:grid; grid-template-columns: 1fr 1fr;}
  .actions > * {width:100%;}
  .actions .primary {grid-column: 1 / -1;}
  .hero {min-height: 0; padding: 25px 22px; border-radius: 20px;}
  .hero h2 {font-size: 33px; margin:14px 0;}
  .hero-copy > p {font-size:12px;}
  .hero-links {gap: 7px;}
  .hero-links a {padding: 10px; font-size: 11px;}
  .cards {grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px;}
  .stat {padding:14px; min-height: 144px;}
  .stat-icon {width:30px; height:30px; margin-bottom:11px;}
  .stat .value {font-size: clamp(18px,4.6vw,27px); white-space:normal;}
  .stat .meta {font-size:11px;}
  .room-grid, .finance-grid {grid-template-columns:1fr;}
  .annual-summary {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .annual-item {padding:13px;}
  .annual-item strong {font-size:17px;}
  .room {padding: 17px;}
  .section-head {margin-top: 28px;}
  .section-head p {line-height:1.45;}
  .form-row {grid-template-columns: 1fr; gap:0;}
}
@media(max-width:380px) {
  .stat .value {font-size: 17px;}
  .badge {font-size: 11px;}
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {scroll-behavior:auto!important; transition:none!important;}
}
:is(button, a, input, select):focus-visible {outline: 3px solid #5546d7; outline-offset: 2px;}
.field input[readonly] {background:#f3f4f9; color:#626b7d; cursor:not-allowed;}

/* Phòng: thông tin người thuê, tách khỏi nghiệp vụ thu tiền. */
.room-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.room {padding:13px 16px;}
.room-line {display:flex;align-items:center;gap:9px;min-width:0;}
.room-label {font-size:13px;white-space:nowrap;color:#24314d;}
.room-tenant {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#53617b;font-size:12px;}
.room-edit {margin-left:auto;flex:none;min-width:49px;min-height:36px;padding:7px 10px;}
.room-details {display:flex;align-items:center;flex-wrap:wrap;gap:5px 19px;padding-left:41px;margin-top:7px;color:#647087;font-size:12px;line-height:1.5;}
.room-details strong {color:#354160;font-weight:700;}

/* Thu tiền: số phải thu / đã thu / còn thiếu và thao tác ở một nơi. */
.billing-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.billing-filters {display:inline-flex;gap:4px;padding:4px;border:1px solid #e8eaf4;border-radius:12px;background:#eaeef7;}
.filter-btn {border:0;border-radius:9px;min-height:37px;padding:8px 13px;color:#515f7a;background:transparent;font-size:12px;font-weight:750;cursor:pointer;}
.filter-btn:hover {background:#f8f7ff;}
.filter-btn.active {background:#fff;color:#5848ca;box-shadow:0 2px 7px rgba(33,42,86,.09);}
.filter-btn:focus-visible {outline:3px solid #5546d7;outline-offset:2px;}
.billing-table {min-width:730px;}
.billing-table th,.billing-table td {padding:10px 13px;}
.billing-table td {white-space:normal;vertical-align:middle;font-variant-numeric:tabular-nums;}
.bill-room {min-width:190px;}
.bill-room-line {display:flex;align-items:center;gap:8px;max-width:280px;}
.bill-room strong {font-size:13px;color:#293754;white-space:nowrap;}
.bill-tenant {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#69758a;font-size:12px;}
.bill-room-line .bill-edit {flex:none;margin-left:auto;}
.bill-more {margin-top:4px;font-size:11px;}
.bill-more summary {display:inline-block;cursor:pointer;color:#5b4dd3;font-weight:700;list-style:none;}
.bill-more summary::before {content:'▸';margin-right:5px;}
.bill-more[open] summary::before {content:'▾';}
.bill-more summary::-webkit-details-marker {display:none;}
.bill-more summary:hover,.finance-detail summary:hover,.annual-detail summary:hover {color:#4335a9;}
.bill-more summary:focus-visible,.finance-detail summary:focus-visible,.annual-detail summary:focus-visible {outline:3px solid #5546d7;outline-offset:3px;border-radius:4px;}
.bill-parts {display:flex;flex-wrap:wrap;gap:4px 12px;color:#65718a;font-size:11px;line-height:1.45;}
.bill-more .bill-parts {margin-top:9px;padding:9px 0;border-top:1px dashed #e9ebf3;}
.bill-parts span {white-space:nowrap;}
.bill-parts strong {color:#35415c;font-weight:750;}
.bill-parts small {display:block;color:#738095;font-size:10px;}
.bill-total,.bill-received,.bill-due {white-space:nowrap!important;font-size:13px;}
.bill-total strong {color:#2f3d5c;}
.bill-due.is-due strong {color:#af5b13;}
.bill-due.is-settled strong {color:#13714e;}
.bill-status {min-width:157px;white-space:nowrap!important;}
.bill-status .status {width:148px;min-width:0;min-height:38px;padding:8px 34px 8px 12px;background-position:right 14px center;font-size:12px;}
.bill-edit {display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:9px;background:#f0eeff;color:#5646c5;cursor:pointer;}
.bill-edit:hover {background:#e7e3ff;border-color:#d5cefa;}
.bill-edit:focus-visible {outline:3px solid #5546d7;outline-offset:2px;}
.tenant-change-hint {margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#fff6e9;color:#885609;font-size:12px;line-height:1.5;}
.tenant-history {margin:0 0 14px;border:1px solid #e8eaf4;border-radius:11px;padding:10px 12px;background:#fbfbff;}
.tenant-history summary {cursor:pointer;color:#5547bd;font-size:12px;font-weight:750;}
.tenant-history summary:focus-visible {outline:3px solid #5546d7;outline-offset:2px;}
#tenantHistoryList {max-height:210px;overflow:auto;}
.tenant-history-item {padding:10px 0 8px;border-top:1px solid #e9eaf3;font-size:12px;color:#65718a;line-height:1.6;overflow-wrap:anywhere;}
.tenant-history-item:first-child {margin-top:10px;}
.tenant-history-item strong {display:block;font-size:13px;color:#263551;}
.tenant-history-item p {margin:3px 0 0;}
.tenant-history-empty {margin:10px 0 2px;font-size:12px;color:#65718a;}
.bill-mobile-label {display:none;}
.bill-empty td {padding:24px;text-align:center;color:#647087;}
.stat-icon {display:none;}
.stat {min-height:112px;padding:16px;}
.section-head {margin-top:23px;margin-bottom:10px;}
.finance-grid {grid-template-columns:1fr;}
.finance-grid .panel {padding:17px 19px;}
.finance-grid .panel h3 {margin-bottom:11px;}
.expense-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:none;margin-top:16px;}
.expense-field {min-width:0;margin:0;}
.expense-field input {width:100%;font-variant-numeric:tabular-nums;}
.finance-detail {margin-top:13px;padding-top:12px;border-top:1px solid #eceef5;}
.finance-detail summary,.annual-detail summary {cursor:pointer;color:#5b4dd3;font-size:12px;font-weight:750;}
.finance-detail .summary-item:first-of-type {margin-top:10px;}
.annual-item {padding:13px 15px;gap:7px;}
.annual-item strong {font-size:clamp(16px,1.7vw,22px);}
.annual-summary {margin-bottom:9px;}
.annual-detail {margin:0 2px;}
.annual-detail > summary {padding:9px 0;}
.annual-detail .table-wrap {margin-top:6px;}

@media(max-width:750px) {
  .room-grid {grid-template-columns:1fr;}
}
@media(max-width:680px) {
  .room-details {padding-left:0;}
  .billing-heading {align-items:stretch;}
  .billing-filters {width:100%;}
  .filter-btn {flex:1;padding:8px 5px;}
  .billing-wrap {background:transparent;border:0;box-shadow:none;overflow:visible;}
  .billing-table {min-width:0;display:block;}
  .billing-table thead {position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}
  .billing-table tbody {display:grid;gap:8px;}
  .billing-table tbody tr {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(120px,1.25fr);grid-template-areas:"room room status" "total received due";gap:9px 6px;padding:11px;background:#fff;border:1px solid #e9ebf3;border-radius:14px;box-shadow:var(--shadow);}
  .billing-table tbody td {display:block;min-width:0;padding:0;border:0;}
  .billing-table .bill-room {grid-area:room;align-self:center;}
  .bill-room-line {max-width:100%;}
  .bill-room-line strong {font-size:12px;}
  .bill-tenant {font-size:11px;}
  .billing-table .bill-total {grid-area:total;}
  .billing-table .bill-received {grid-area:received;text-align:left;}
  .billing-table .bill-due {grid-area:due;}
  .billing-table .bill-total,.billing-table .bill-received,.billing-table .bill-due {padding:8px 5px;border-radius:8px;background:#f6f7fb;font-size:clamp(10px,2.95vw,13px);white-space:nowrap!important;}
  .billing-table .bill-due.is-due {background:#fff6e9;}
  .billing-table .bill-status {grid-area:status;min-width:0;display:flex;align-items:flex-start;}
  .billing-table .status {min-width:0;width:100%;min-height:38px;padding:7px 26px 7px 9px;background-size:12px 12px;background-position:right 10px center;font-size:11px;}
  .bill-room-line {gap:5px;}
  .bill-room-line .bill-edit {width:29px;height:29px;}
  .bill-mobile-label {display:block;margin-bottom:3px;color:#69758a;font-size:10px;font-weight:650;}
  .billing-table .bill-empty {display:block;text-align:center;}
  .billing-table .bill-empty td {padding:18px;}
  .stat {min-height:99px;padding:12px;}
  .stat .value {font-size:clamp(16px,4.4vw,25px);margin-top:8px;}
  .stat .meta {margin-top:3px;}
  .section-head {margin-top:21px;}
  .finance-grid .panel {padding:15px;}
}

/* Bảng màu xanh lá và điều khiển báo cáo năm. */
:root {--bg:#f5faf7;--text:#18352c;--line:#dfebe4;--primary:#16865b;--green:#13845b;--shadow:0 9px 28px rgba(20,80,54,.065);}
[hidden] {display:none!important;}
body {background:radial-gradient(ellipse 650px 380px at 0% 0%,#dff4e7,transparent 75%),radial-gradient(ellipse 550px 320px at 100% 0%,#e9f8f0,transparent 78%),var(--bg);}
.section-head h2::before {background:#209363;}
.progress {background:#e2f1e8;}
.stat.main {box-shadow:0 15px 32px rgba(20,122,77,.18);}
.bill-more summary:hover,.finance-detail summary:hover,.annual-detail summary:hover {color:#0d6944;}
.tenant-history summary {color:#137b53;}
.tenant-history {background:#f7fcf8;border-color:#dfeee4;}
.billing-table tbody tr:hover {background:#f4faf6;}
.billing-table .status {color:#315947;}
.brand-icon {background:linear-gradient(145deg,#11754f,#39b67c);box-shadow:0 8px 20px rgba(22,134,91,.2);}
.stat.main {background:linear-gradient(135deg,#126846,#269b6b);}
.btn.primary {background:linear-gradient(135deg,#117b52,#27a66f);box-shadow:0 7px 16px rgba(20,129,82,.19);}
.btn.primary:hover {background:#126d49;box-shadow:0 10px 22px rgba(20,129,82,.24);}
.btn:hover {border-color:#abd8bf;background:#f2faf5;}
.filter-btn.active,.bill-more summary,.finance-detail summary,.annual-detail summary,.tenant-history summary,.money {color:#137b53;}
.filter-btn:hover,.data-menu .btn:hover {background:#f1faf4;}
.filter-btn.active {background:#fff;}
.billing-filters {background:#e9f4ed;border-color:#d7e9dd;}
.bill-edit {background:#e6f5eb;color:#147d54;}
.bill-edit:hover {background:#d3eedb;border-color:#afe0c0;}
.annual-table tfoot,.annual-table tfoot th {background:#e6f3eb;color:#116a48;}
.field input:focus,.field select:focus {border-color:#3aa574;box-shadow:0 0 0 4px #e0f4e9;}
:is(button,a,input,select,.table-wrap,.filter-btn,.bill-more summary,.finance-detail summary,.annual-detail summary,.bill-edit,.tenant-history summary):focus-visible {outline-color:#148359;}
.year-empty {font-size:13px;color:var(--muted);margin:12px 0;}
.annual-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.annual-heading label {display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:750;color:#496354;}
#yearPicker {background:#fff;border:1px solid #cbdfd2;border-radius:11px;padding:9px 30px 9px 12px;font:inherit;color:#145f43;min-width:100px;}
.backup-footer {margin:30px 0 0;padding:14px 16px;border-top:1px solid #dcebe2;color:#526b5b;font-size:12px;}
.backup-footer summary {cursor:pointer;font-weight:700;}
.backup-footer p {max-width:680px;line-height:1.6;}
.backup-actions {display:flex;gap:10px;flex-wrap:wrap;}
.auth-screen {position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#e5f5ea,#f6faf7);}
.auth-screen[hidden] {display:none!important;}
body.is-locked {overflow:hidden;}
body.is-locked > :not(.auth-screen) {visibility:hidden;}
.auth-card {width:min(420px,100%);padding:32px;border:1px solid #dcebe2;border-radius:22px;background:#fff;box-shadow:0 25px 70px rgba(20,80,54,.13);}
.auth-emblem {display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border-radius:17px;background:#137f55;color:#fff;font-size:32px;}
.auth-card h2 {margin:0;text-align:center;font-size:25px;color:#143d2b;}
.auth-description {margin:9px 0 24px;text-align:center;font-size:13px;color:#668071;}
.auth-card .field input {width:100%;min-height:45px;}
.auth-submit {width:100%;min-height:45px;}
.auth-error {padding:9px 12px;border-radius:10px;background:#fff1ee;color:#ac392e;font-size:12px;}
.auth-note {margin:16px 0 0;color:#6c8174;font-size:11px;line-height:1.6;text-align:center;}
@media(max-width:680px){.actions {grid-template-columns:1fr 1fr;}.actions .logout-btn {grid-column:auto;}.expense-fields {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}}
@media(max-width:360px){.expense-fields {grid-template-columns:1fr;}.auth-card {padding:24px;}}

/* Dashboard: mỗi nghiệp vụ là một màn hình, giữ nguyên biểu mẫu cũ. */
.month-control{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:750;color:#527060;}
.month-control .month{min-width:152px;color:#19593d;border-color:#cce2d4;}
.account-badge{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;border-radius:12px;background:#edf7f0;color:#21724e;font-size:12px;font-weight:750;}
.dashboard-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 18px;padding:6px;border:1px solid #deece2;border-radius:17px;background:#fff;box-shadow:var(--shadow);}
.dashboard-tab{flex:1;border:0;border-radius:12px;min-height:43px;background:transparent;color:#526c5c;font-size:13px;font-weight:750;padding:10px 16px;cursor:pointer;}
.dashboard-tab.active{background:#167d53;color:#fff;box-shadow:0 3px 10px rgba(19,115,77,.17);}
.dashboard-tab:hover:not(.active){background:#eff7f1;color:#176e4a;}
.dashboard-tab:focus-visible{outline:3px solid #1b9b69;outline-offset:2px;}
.view-panel{min-width:0;}
.view-panel>.section-head:first-child{margin-top:8px;}
.dashboard-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px;}
.shortcut-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border:1px solid #dfebe3;border-radius:17px;background:#fff;box-shadow:var(--shadow);}
.shortcut-card>div{min-width:0;}.shortcut-label{display:block;color:#627b6b;font-size:12px;font-weight:700;}
.shortcut-card strong{display:block;margin:8px 0 3px;color:#19563d;font-size:21px;letter-spacing:-.03em;overflow-wrap:anywhere;}
.shortcut-card p{margin:0;color:#718577;font-size:12px;}
.shortcut-card .btn{flex:none;white-space:nowrap;}
.account-explainer{margin:0 0 15px;padding:12px 16px;border:1px solid #d7ecde;border-radius:12px;background:#eef8f1;color:#426e52;font-size:13px;line-height:1.5;}
.account-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:start;gap:16px;}
.account-grid .panel{min-width:0;}.account-grid .field input{width:100%;min-width:0;min-height:44px;}
.accounts-list-head{margin:24px 0 8px;padding-top:15px;border-top:1px solid #e3eee7;font-size:13px;font-weight:800;color:#274c37;}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e8f0ea;}
.account-row strong{display:block;font-size:14px;color:#214933;overflow-wrap:anywhere;}.account-row small{display:block;margin-top:5px;color:#698071;font-size:11px;}
.account-remove{color:#aa3e35;}.form-message{padding:10px 12px;border-radius:10px;background:#fff0ed;color:#ac4235;font-size:12px;line-height:1.5;}.form-message.is-success{background:#e8f6ed;color:#197145;}
@media(max-width:800px){.account-grid{grid-template-columns:1fr;}.shortcut-card{align-items:flex-start;flex-direction:column;}.shortcut-card .btn{align-self:flex-start;}}
@media(max-width:680px){
  .topbar{gap:9px;}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
  .actions>*{width:auto;}.month-control{flex:1 1 150px;}.month-control .month{width:100%;min-width:0;}
  .account-badge{max-width:50%;}.actions .logout-btn{flex:0 0 auto;}
  .dashboard-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:4px;}
  .dashboard-tab{padding:10px 3px;font-size:11px;min-height:42px;}
  .dashboard-shortcuts{grid-template-columns:1fr;gap:10px;}
  .shortcut-card{padding:16px;}
}

/* Giao diện thanh thoát lấy cảm hứng từ iOS, bảng chọn tháng hoàn toàn tiếng Việt. */
:root{--bg:#f6f8f7;--panel:#fff;--text:#1b3027;--muted:#64766c;--line:#e4ebe6;--primary:#167a53;--green:#167a53;--shadow:0 3px 15px rgba(22,65,42,.035);}
body{font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);letter-spacing:0;}
button,input,select,textarea{font-family:inherit;}
.topbar{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 4px 22px rgba(24,58,40,.045);backdrop-filter:blur(18px);}
.brand-icon{border-radius:13px;background:#197852;box-shadow:none;}
.brand h1{font-weight:800;letter-spacing:-.035em;}
.btn,.month-trigger,#yearPicker,.status,.field input,.field select{border-color:#dfe8e2;border-radius:12px;}
.btn{font-weight:700;box-shadow:none;}
.btn:hover,.stat:hover,.room:hover{transform:none;box-shadow:var(--shadow);}
.btn.primary,.btn.primary:hover{background:#167b54;border-color:#167b54;box-shadow:none;}
.btn.primary:hover{background:#126b49;}
.stat,.room,.panel,.table-wrap,.annual-item,.shortcut-card,.auth-card{border-color:var(--line);border-radius:18px;box-shadow:var(--shadow);}
.stat.main{background:#197d57;box-shadow:none;}
.stat.main::after{display:none;}
.stat .value{font-weight:800;letter-spacing:-.045em;}
.room::before{background:#68a88a;height:2px;}
.dashboard-nav{border-radius:15px;padding:5px;background:#edf2ee;border-color:#e5ebe6;box-shadow:none;}
.dashboard-tab{font-family:inherit;border-radius:11px;font-weight:700;color:#526a5b;}
.dashboard-tab.active{background:#fff;color:#176e4b;box-shadow:0 1px 5px rgba(28,62,40,.09);}
.dashboard-tab:hover:not(.active){background:rgba(255,255,255,.65);}
.account-badge{background:#edf5ef;color:#276b4c;border-radius:10px;}
.billing-filters{background:#eff3f0;border-color:#e5ece7;}
.filter-btn.active{color:#166e4d;box-shadow:0 1px 5px rgba(28,62,40,.075);}
.section-head h2::before{width:4px;background:#2c8d63;}
.annual-table tfoot,.annual-table tfoot th{background:#eff6f0;}
.dialog-head,.dialog-foot{background:#fafcfb;}
.money{color:#176f4e;}
.progress div{background:#22855e;}
.month-control{position:relative;display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:700;color:#526c5b;}
.month-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-width:166px;min-height:42px;padding:10px 13px;background:#fff;border:1px solid #dfe8e2;color:#244e39;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;}
.month-trigger svg{flex:none;color:#718478;transition:transform .16s;}
.month-trigger[aria-expanded="true"]{border-color:#82b79a;box-shadow:0 0 0 3px rgba(39,134,89,.1);}
.month-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.month-picker-menu{position:absolute;z-index:100;top:calc(100% + 10px);right:0;width:306px;max-width:calc(100vw - 24px);padding:16px;background:#fff;border:1px solid #e3ebe5;border-radius:18px;box-shadow:0 18px 48px rgba(27,58,39,.16);color:#233e2d;}
.month-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.month-picker-head strong{font-size:15px;font-weight:800;}
.month-year-arrow{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:#f2f6f3;color:#2c6245;font-size:26px;line-height:1;cursor:pointer;}
.month-year-arrow:hover{background:#e5f0e8;}
.month-year-arrow:disabled{opacity:.35;cursor:not-allowed;}
.month-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.month-picker-option{min-height:43px;border:1px solid transparent;border-radius:11px;background:#f7f9f7;color:#425c4d;font-size:12px;font-weight:700;cursor:pointer;}
.month-picker-option:hover{background:#eaf4ed;}
.month-picker-option.is-selected{background:#197d57;color:#fff;}
.month-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #e8eee9;}
.month-picker-close,.month-picker-today{border:0;background:transparent;color:#527262;font-size:12px;font-weight:700;padding:7px 2px;cursor:pointer;}
.month-picker-today{color:#157852;}
.month-picker-menu :is(button):focus-visible,.month-trigger:focus-visible{outline:3px solid #85bb9c;outline-offset:2px;}
@media(max-width:680px){
 .topbar{border-radius:0;border-top:0;border-left:0;border-right:0;}
 .month-control{flex:1 1 180px;}
 .month-trigger{width:100%;min-width:0;}
 .month-picker-menu{left:0;right:auto;width:min(306px,calc(100vw - 28px));}
 .dashboard-nav{gap:3px;}
 .dashboard-tab{padding:10px 2px;font-size:11px;}
 .billing-table tbody tr{border-color:var(--line);}
}

/* Bảng điều khiển, đăng nhập và quản trị tài khoản. */
.dashboard-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.dashboard-live{font-size:11px;color:#208259;background:#edf7f0;border-radius:99px;padding:7px 11px;font-weight:700}.dashboard-insights{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px}.insight-panel{min-width:0;padding:22px}.dashboard-panel-title{display:flex;justify-content:space-between;align-items:start;gap:12px}.dashboard-panel-title h3{font-size:16px;margin:0 0 5px;color:#203b2c}.dashboard-panel-title p{font-size:12px;color:#819086;margin:0}.text-action{background:none;border:0;padding:3px;color:#178157;font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer}.text-action:hover{text-decoration:underline}.dashboard-progress-content{display:flex;align-items:center;justify-content:space-around;gap:24px;margin:26px 0 20px}.dashboard-donut{width:158px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#228b61 var(--collected,0%),#e9f2ec var(--collected,0%));display:grid;place-items:center;flex:none}.dashboard-donut>div{width:120px;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px #f3f5f2}.dashboard-donut strong{font-size:32px;letter-spacing:-.04em;color:#1a694b}.dashboard-donut span{font-size:11px;color:#74877b}.dashboard-progress-stats{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.dashboard-progress-stats>strong{font-size:17px;color:#234b36;margin-bottom:4px}.dashboard-progress-stats>span,.dashboard-trend-legend span{display:inline-flex;align-items:center;gap:7px;color:#647b6d;font-size:12px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}.green-dot{background:#23885e}.amber-dot{background:#e6b15d}.grey-dot{background:#cbd7cf}.pale-dot{background:#cfe9d8}.dashboard-insight-foot{display:flex;justify-content:space-between;gap:9px;padding-top:15px;border-top:1px solid #edf1ed;font-size:12px;color:#738577}.dashboard-insight-foot strong{color:#20583b;font-size:15px}.dashboard-trend{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:13px;min-height:192px;padding:17px 0 0}.trend-column{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.trend-track{height:144px;width:100%;max-width:43px;position:relative;border-bottom:1px solid #edf0ed}.trend-expected,.trend-collected{position:absolute;bottom:0;left:0;width:100%;border-radius:7px 7px 2px 2px}.trend-expected{background:#cfe9d8}.trend-collected{background:#23885e}.trend-month{color:#829087;font-size:11px;white-space:nowrap}.trend-month.is-current{color:#17724e;font-weight:800}.dashboard-trend-legend{display:flex;justify-content:center;gap:20px;margin-top:12px}.dashboard-work-panel{margin-top:14px;padding:20px 22px}.dashboard-work-list{margin-top:13px}.dashboard-task{display:flex;align-items:center;gap:13px;border-top:1px solid #eef2ee;padding:12px 2px;min-width:0}.task-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#ecf5ee;color:#247451;font-weight:800;flex:none}.task-info{min-width:0;flex:1}.task-info strong,.task-info span{display:block}.task-info strong{font-size:13px;color:#284635}.task-info span{font-size:11px;color:#849187;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.task-due{font-size:14px;white-space:nowrap;color:#aa7442}.task-action{font-size:11px;padding:7px 10px}.task-overflow,.dashboard-all-clear{font-size:12px;color:#637b6b;padding:12px;margin:0}.dashboard-all-clear{background:#f1faf3;border-radius:12px;color:#21744e}
.auth-screen{background:radial-gradient(circle at 18% 20%,#daefe0,transparent 45%),radial-gradient(circle at 80% 90%,#e4efe8,transparent 40%),#f6faf7}.auth-card{width:min(452px,100%);padding:38px 39px;box-shadow:0 25px 70px rgba(20,63,39,.09)}.auth-emblem{margin:0 auto 8px;background:#197d57;width:52px;height:52px}.auth-brand{text-align:center;color:#286b4c;font-size:12px;font-weight:800;letter-spacing:.035em;margin-bottom:23px}.auth-brand span{color:#91a49a}.auth-eyebrow{display:block;text-align:center;color:#349268;font-size:10px;font-weight:800;letter-spacing:.14em;margin-bottom:8px}.auth-card h2{font-size:27px}.auth-description{margin:9px 0 22px;font-size:12px}.auth-setup-info{font-size:12px;line-height:1.65;background:#f0f8f2;border:1px solid #dceee1;border-radius:10px;color:#336848;padding:11px 12px}.password-control{position:relative}.password-control input{padding-right:68px}.password-control button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#167751;font-size:12px;font-weight:750;padding:8px;cursor:pointer}.auth-switch{display:block;width:100%;margin-top:13px;border:0;background:transparent;color:#16805a;font-size:12px;font-weight:800;cursor:pointer;padding:6px}.auth-submit{margin-top:7px}.auth-note{margin-top:22px;border-top:1px solid #eef2ee;padding-top:14px}
.account-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:15px}.account-stats>div{padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:15px}.account-stats span,.account-stats strong{display:block}.account-stats span{font-size:12px;color:#708476}.account-stats strong{font-size:25px;color:#215b3e;margin-top:5px}.account-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}.account-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.account-section-heading h3{margin-bottom:5px}.account-section-heading p,.account-side-description{font-size:12px;color:#849488;line-height:1.65;margin:0 0 16px}.role-chip{font-size:11px;padding:6px 9px;background:#edf7f0;border-radius:8px;color:#25764f;font-weight:700;white-space:nowrap}.account-permissions{background:#f1f7f2;color:#587263;font-size:11px;line-height:1.65;padding:12px;border-radius:11px;margin:3px 0 16px}.accounts-list-head{display:flex;gap:5px}.accounts-list-head span{color:#7a9283}.account-row{gap:11px;flex-wrap:wrap}.account-avatar{display:grid;place-items:center;background:#e8f4ec;color:#267c51;font-size:16px;font-weight:800;width:40px;height:40px;border-radius:12px;flex:none}.account-identity{flex:1;min-width:125px}.account-self{font-size:10px;color:#289063;background:#e7f7ed;border-radius:5px;padding:2px 4px}.account-state{font-size:11px;color:#218053;background:#eaf8ee;border-radius:7px;padding:5px 8px;font-weight:750;white-space:nowrap}.account-state.is-disabled{background:#f0f1f0;color:#728076}.account-row-actions{display:flex;gap:5px;flex-wrap:wrap}.account-row-actions .btn{padding:6px 9px;font-size:11px}.account-row-actions .account-remove{color:#b05048}.account-edit-dialog{width:min(480px,calc(100% - 28px))}.account-edit-dialog .field input{width:100%}.optional-label{font-weight:400;color:#8b9890}
@media(max-width:980px){.dashboard-progress-content{gap:10px}.dashboard-donut{width:130px}.dashboard-donut>div{width:99px}.dashboard-donut strong{font-size:25px}.account-grid{grid-template-columns:1fr}}
@media(max-width:730px){.dashboard-insights{grid-template-columns:1fr}.dashboard-trend{min-height:170px}.dashboard-progress-content{justify-content:center;gap:32px}.account-stats{gap:8px}.account-stats>div{padding:12px}.dashboard-work-panel{padding:17px}.task-action{padding:7px}}
@media(max-width:400px){.dashboard-progress-content{gap:19px}.dashboard-donut{width:116px}.dashboard-donut>div{width:88px}.dashboard-donut strong{font-size:22px}.dashboard-progress-stats>strong{font-size:14px}.dashboard-progress-stats>span{font-size:11px}.dashboard-task{gap:8px}.task-due{font-size:12px}.task-action{font-size:10px}.auth-card{padding:27px 22px}.account-row-actions{width:100%;padding-left:50px}.account-stats span{font-size:10px}}

/* Giữ thanh công cụ và các thẻ dữ liệu gọn, dễ thao tác trên màn hình nhỏ. */
@media(max-width:680px){
  .topbar{gap:10px;padding:11px 14px}
  .actions{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%}
  .month-control{flex:1 1 185px;height:auto;min-height:42px}
  .month-trigger{min-width:0;flex:1;gap:8px}
  .account-badge{max-width:none;flex:0 1 auto}
  .actions .logout-btn{flex:0 0 auto}
  .progress-meta{flex-wrap:wrap;gap:4px 12px}
  .progress-meta span:last-child{overflow-wrap:anywhere}
  .expense-field label{line-height:1.4}
}
@media(max-width:430px){
  .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .month-control{grid-column:1/-1;justify-self:stretch;min-width:0}
  .month-trigger{width:auto}
  .month-picker-menu{left:0;right:auto;width:min(306px,calc(100vw - 28px))}
  .account-badge{max-width:100%;min-width:0;overflow-wrap:anywhere}
  .actions .logout-btn{justify-self:end}
  .dashboard-task{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:7px 10px}
  .task-avatar{grid-row:1/3}
  .task-info{grid-column:2/4}
  .task-due{grid-column:2}
  .task-action{grid-column:3}
  .account-stats{gap:6px}
  .account-stats>div{min-width:0;padding:10px 7px}
  .account-stats span{overflow-wrap:anywhere}
  .billing-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .billing-table .status{font-size:11px;padding-right:22px;background-position:right 7px center}
  .billing-table .bill-total,.billing-table .bill-received,.billing-table .bill-due{white-space:normal!important;overflow-wrap:anywhere}
}
@media(max-width:350px){
  .expense-fields{grid-template-columns:1fr}
  .dashboard-progress-content{gap:12px}
  .dashboard-donut{width:104px}
  .dashboard-donut>div{width:78px}
  .dashboard-progress-stats{gap:9px}
  .dashboard-progress-stats>strong{font-size:12px}
  .account-row-actions{padding-left:0}
}