@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Jost:wght@400;500;600;700&display=swap');

:root{
  --sidebar-w: 214px;
  --accent: #c96a2b;
  --accent-strong: #b85c22;
  --accent-soft: rgba(201,106,43,.16);
  --accent-ink: #9b4f1d;
  --accent-glow: rgba(201,106,43,.22);
  --sidebar-bg: linear-gradient(180deg, #171a1d 0%, #1e1a1c 55%, #261d1f 100%);
  --bg: #ededeb;
  --card: #ffffff;
  --border: #b3b8c0;
  --text: #111;
  --muted: #6b7280;
  --sidebar-border: rgba(255,255,255,.10);
  --sidebar-soft: rgba(145,28,36,.16);
  --sidebar-strong: rgba(190,42,52,.28);
  --surface-grad-start: #fbfcfd;
  --surface-grad-end: #edf0f4;
  --surface-border-strong: #aab1ba;
  --field-bg: #fbfcfd;
  --table-bg: #fafbfd;
  --table-head: #eef1f4;
  --table-row-hover: #f3f5f7;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Jost", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.sidebar a,
.sidebar-footer a,
.topbar,
.btn, button, .btn-link,
th,
.detail-label{
  font-family: "Inter", Arial, sans-serif;
}

a{
  color:#2d2a2a;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
a:visited{
  color:#2d2a2a;
}
a:hover{
  color:#4a2f33;
}

/* Topbar (mobile) */
.topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:8px 10px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menu-btn{
  border:none;
  background:transparent;
  border-radius:0;
  padding:4px 6px;
  cursor:pointer;
  font-size:32px;
  line-height:1;
  font-weight:700;
  color:#171a1d;
  box-shadow:none;
}
.menu-btn:hover{
  background:transparent;
}
.brand{
  font-weight:700;
}
.brand-logo{
  width: 128px;
  max-width: 80%;
  height: auto;
  margin-left:auto;
}

/* Sidebar + main layout */
.sidebar{
  position:fixed;
  left:0; top:0;
  width:var(--sidebar-w);
  height:100vh;
  background: var(--sidebar-bg);
  color:#fff;
  padding:12px 12px 14px;
  overflow-y:auto;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.sidebar-head{
  padding:6px 4px 12px;
  border-bottom:1px solid var(--sidebar-border);
}
.sidebar-user-panel{
  padding:2px 10px 0;
}
.sidebar-logo{
  display:block;
  width: 134px;
  max-width: 80%;
  height:auto;
}
.sidebar-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.sidebar ul{ list-style:none; padding:0; margin:0; }
.sidebar li{ margin:8px 0; }
.sidebar a{
  color:#fff;
  text-decoration:none;
  opacity:.95;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid transparent;
}
.sidebar a span:last-child{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  line-height:1;
  transform:translateY(2px);
}
.sidebar a:hover{
  opacity:1;
  background:linear-gradient(135deg, rgba(201,106,43,.09) 0%, rgba(184,92,34,.12) 100%);
  border-color:rgba(201,106,43,.20);
}
.sidebar a.is-active{
  opacity:1;
  background:linear-gradient(135deg, rgba(201,106,43,.18) 0%, rgba(184,92,34,.24) 100%);
  border-color:rgba(201,106,43,.42);
  box-shadow:0 10px 20px rgba(201,106,43,.12);
}
.sidebar a.is-active .nav-icon{
  opacity:1;
}
.nav-list{
  flex:1;
}
.nav-divider{
  margin:12px 8px 10px;
  height:1px;
  background:var(--sidebar-border);
  opacity:.9;
}
.nav-tree-item{
  margin:8px 0;
}
.nav-tree{
  margin:0;
}
.nav-tree summary{
  color:#fff;
  opacity:.95;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  list-style:none;
}
.nav-tree summary::-webkit-details-marker{
  display:none;
}
.nav-tree summary:hover{
  opacity:1;
  background:linear-gradient(135deg, rgba(201,106,43,.09) 0%, rgba(184,92,34,.12) 100%);
  border-color:rgba(201,106,43,.20);
}
.nav-tree summary.is-active{
  opacity:1;
  background:linear-gradient(135deg, rgba(201,106,43,.18) 0%, rgba(184,92,34,.24) 100%);
  border-color:rgba(201,106,43,.42);
  box-shadow:0 10px 20px rgba(201,106,43,.12);
}
.nav-tree-caret{
  margin-left:auto;
  transition:transform .18s ease;
}
.nav-tree[open] .nav-tree-caret{
  transform:rotate(180deg);
}
.nav-sublist{
  margin:8px 0 4px 62px;
  padding-left:20px;
}
.nav-sublist li{
  margin:6px 0;
}
.nav-sublist a{
  margin-left:10px;
  padding:6px 12px;
  border-radius:8px;
  font-size:11px;
}
.nav-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
  flex:0 0 auto;
}
.nav-icon.material-symbols-rounded{
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sidebar-footer{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--sidebar-border);
}
.sidebar-user{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:8px 6px 6px;
  color:#f3f4f6;
  font-family:"Inter", Arial, sans-serif;
  font-size:11px;
  font-weight:600;
}
.sidebar-user-avatar{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:2px solid rgba(201,106,43,.62);
  box-shadow:0 6px 16px rgba(201,106,43,.18);
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  overflow:hidden;
}
.sidebar-user-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}
.sidebar-user-avatar.is-fallback{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, rgba(166, 32, 43, .55) 0%, rgba(68, 74, 82, .78) 100%);
}
.sidebar-user-initials{
  font-family:"Inter", Arial, sans-serif;
  font-size:13px;
  font-weight:700;
  color:#f8fafc;
  letter-spacing:.02em;
}
.sidebar-user-text{
  display:block;
  line-height:1.1;
}
.logout-link{
  background: rgba(255,255,255,.06);
}

.main{
  margin-left: var(--sidebar-w);
  padding:14px;
  min-height:100vh;
}

.main > h1,
.main > .page-head,
.main > .flex:first-child{
  position:sticky;
  top:24px;
  z-index:35;
  margin:0 0 18px;
  padding:6px 14px 7px;
  background:
    radial-gradient(circle at top right, rgba(182, 40, 50, 0.11), transparent 34%),
    linear-gradient(135deg, #151619 0%, #1c2024 56%, #252b30 100%);
  color:#f5f7f9;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  box-shadow:0 14px 34px rgba(17, 12, 13, 0.18);
}
.main > h1{
  display:block;
  min-height:auto;
}
.main > .page-head,
.main > .flex:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.main > h1,
.main > .page-head h1,
.main > .flex:first-child h1{
  margin:0;
}
.main > h1 a,
.main > .page-head a,
.main > .flex:first-child a{
  color:inherit;
}
.main > h1 .muted,
.main > .page-head .muted,
.main > .flex:first-child .muted{
  color:rgba(245,247,249,.72);
}
.page-head-soft-muted .muted{
  color:rgba(245,247,249,.76) !important;
}
.main > .page-head,
.main > .flex:first-child{
  min-height:46px;
}
.page-head-main{
  min-width:0;
}
.page-head-main.is-inline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.page-head-inline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.page-head-form{
  display:flex;
  align-items:center;
  gap:5px;
}
.page-head-form input{
  height:32px;
  min-height:32px;
  padding:4px 8px;
  background:rgba(255,255,255,.08);
  color:#f5f7f9;
  border-color:rgba(255,255,255,.18);
  box-sizing:border-box;
}
.page-head-form input::placeholder{
  color:rgba(245,247,249,.62);
}
.page-head-form .btn,
.page-head-form button{
  height:32px;
  min-height:32px;
  padding-top:0;
  padding-bottom:0;
  box-sizing:border-box;
  white-space:nowrap;
}
.page-head-form input:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:none;
}
.page-head-search{
  display:flex;
  align-items:center;
  gap:5px;
}
.page-head-search input{
  min-width:240px;
  max-width:280px;
  height:32px;
  min-height:32px;
  padding:4px 8px;
  background:rgba(255,255,255,.08);
  color:#f5f7f9;
  border-color:rgba(255,255,255,.18);
  box-sizing:border-box;
}
.page-head-search input::placeholder{
  color:rgba(245,247,249,.62);
}
.page-head-search .btn,
.page-head-search button{
  height:32px;
  min-height:32px;
  padding-top:0;
  padding-bottom:0;
  box-sizing:border-box;
}
.page-head-search input:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:none;
}
.page-head-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.header-quick-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.page-head-actions .btn,
.header-quick-actions .btn,
.page-head-actions button{
  height:32px;
  min-height:32px;
  padding:3px 7px;
  font-size:12px;
  line-height:1.1;
}
.page-head-actions .subnav{
  margin:0;
}
.page-head-actions .subnav .btn{
  background:transparent;
  color:#f5f7f9;
  border-color:rgba(255,255,255,.18);
}
.page-head-actions .subnav .btn:hover{
  background:rgba(255,255,255,.12);
}
.page-head-actions .subnav .btn.is-active{
  background:linear-gradient(135deg, #d07a34 0%, #b85c22 100%) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 10px 22px var(--accent-glow);
}
.page-head-actions .btn.is-active{
  background:linear-gradient(135deg, #d07a34 0%, #b85c22 100%) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 10px 22px var(--accent-glow);
}
.insights-filter-band{
  margin-top:-8px;
  padding-top:8px;
  padding-bottom:10px;
}
.insights-filter-band .page-head-form,
.insights-filter-band .subnav,
.insights-filter-band .header-quick-actions{
  margin:0;
}
.page-head-actions.is-stack{
  flex-direction:column;
  align-items:flex-end;
}
.main > .page-head .btn,
.main > .page-head button,
.main > .flex:first-child .btn,
.main > .flex:first-child button,
.main > h1 + .subnav .btn{
  background:transparent;
  color:#f5f7f9;
  border-color:rgba(255,255,255,.18);
}
.main > .page-head .btn:hover,
.main > .page-head button:hover,
.main > .flex:first-child .btn:hover,
.main > .flex:first-child button:hover,
.main > h1 + .subnav .btn:hover{
  background:rgba(255,255,255,.12);
}
.main > h1 + .subnav{
  margin:-10px 0 18px;
  padding:0 16px 10px;
  background:
    radial-gradient(circle at top right, rgba(182, 40, 50, 0.11), transparent 34%),
    linear-gradient(135deg, #151619 0%, #1c2024 56%, #252b30 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0 0 16px 16px;
}
.main > h1 + .subnav .btn.is-active{
  background:linear-gradient(135deg, #d07a34 0%, #b85c22 100%) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 10px 22px var(--accent-glow);
}

/* Cards / buttons / forms / tables */
.card{
  background:linear-gradient(135deg, var(--surface-grad-start) 0%, var(--surface-grad-end) 100%);
  border:1px solid #b1b5bc;
  border-radius:14px;
  padding:11px;
  box-shadow:0 12px 28px rgba(24, 20, 21, 0.07);
}

.subnav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}
.subnav .btn.is-active{
  background:linear-gradient(135deg, #d07a34 0%, #b85c22 100%) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 10px 22px var(--accent-glow);
}

.btn, button, .btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:linear-gradient(135deg, #ffffff 0%, #f1f4f7 100%);
  border-radius:7px;
  padding:6px 8px;
  cursor:pointer;
  text-decoration:none;
  color:#333;
  box-sizing:border-box;
  line-height:1.2;
  font:inherit;
}
.btn:visited, .btn-link:visited{
  color:#333;
}
.btn:hover, button:hover, .btn-link:hover{ background:linear-gradient(135deg, #ffffff 0%, #e8edf1 100%); }
.action-btn{
  min-width:62px;
  min-height:32px;
}

input[type="text"], input[type="email"], input[type="date"], input[type="number"], select, textarea{
  width:100%;
  max-width:420px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  outline:none;
  background:var(--field-bg);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.main > .page-head .page-head-form input,
.main > .page-head .page-head-form select,
.main > .page-head .page-head-search input,
.main > .page-head .page-head-search select,
.main > .flex:first-child .page-head-form input,
.main > .flex:first-child .page-head-form select,
.main > .flex:first-child .page-head-search input,
.main > .flex:first-child .page-head-search select{
  background:rgba(255,255,255,.08);
  color:#f5f7f9;
  border-color:rgba(255,255,255,.18);
}

.main > .page-head .page-head-form input::placeholder,
.main > .page-head .page-head-search input::placeholder,
.main > .flex:first-child .page-head-form input::placeholder,
.main > .flex:first-child .page-head-search input::placeholder{
  color:rgba(245,247,249,.62);
}

.main > .page-head .page-head-form input:focus,
.main > .page-head .page-head-form select:focus,
.main > .page-head .page-head-search input:focus,
.main > .page-head .page-head-search select:focus,
.main > .flex:first-child .page-head-form input:focus,
.main > .flex:first-child .page-head-form select:focus,
.main > .flex:first-child .page-head-search input:focus,
.main > .flex:first-child .page-head-search select:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:none;
}

.table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
}
.table th, .table td{
  text-align:left;
  padding:10px 9px;
  border-bottom:1px solid rgba(107, 114, 128, 0.10);
}
.table th{
  background:transparent;
  font-weight:700;
  border-bottom:1px solid rgba(107, 114, 128, 0.12);
}
.table tr:last-child td{
  border-bottom:none;
}
.table tr:hover{ background:rgba(255, 255, 255, 0.12); }

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:#f8fafc;
}
.badge.green{ color:#0a7a2f; border-color:#bfe7c9; background:#eefaf1; }
.badge.blue{ color:#2563eb; border-color:#bfdbfe; background:#eff6ff; }
.badge.red{ color:#a11212; border-color:#f1c2c2; background:#fdeeee; }

.expense-payment-row td{
  background:rgba(255,255,255,.28);
  padding-top:0;
}
.expense-payment-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 0 2px 18px;
}
.expense-payment-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(107,114,128,.14);
  border-radius:10px;
  background:rgba(255,255,255,.45);
}
.expense-payment-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.expense-payment-side{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.muted{ color: var(--muted); }
.flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.flex-between{
  justify-content:space-between;
}
.grid4{ display:grid; grid-template-columns:repeat(4, minmax(160px, 1fr)); gap:12px; }
.grid5{ display:grid; grid-template-columns:repeat(5, minmax(160px, 1fr)); gap:12px; }
.grid6{ display:grid; grid-template-columns:repeat(6, minmax(160px, 1fr)); gap:12px; }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(160px, 1fr)); gap:12px; }
.grid2{ display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }

.selection-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  min-height:88px;
  height:100%;
  min-width:0;
  border:1px solid #aeb4bc;
  border-radius:8px;
  background:linear-gradient(135deg, #ffffff 0%, #f1f4f7 100%);
  padding:12px 14px;
  cursor:pointer;
  text-align:left;
  transition:background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.selection-card:hover{
  background:linear-gradient(135deg, #ffffff 0%, #e8edf1 100%);
  border-color:#9ca3ac;
  transform:translateY(-1px);
}
.selection-card.is-selected{
  border-color:#111;
  background:#111;
  color:#fff;
  box-shadow:0 12px 22px rgba(17,17,17,.16);
}
.selection-card strong{
  display:block;
  font-size:16px;
  font-weight:800;
  margin-bottom:4px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.selection-card span{
  display:block;
  font-size:12px;
  color:inherit;
  opacity:.72;
  line-height:1.25;
}
.selection-card.add-card{
  border-style:solid;
  background:linear-gradient(135deg, #f6f8fa 0%, #e8edf1 100%);
  justify-content:center;
}
.selection-card.selection-card-compact{
  justify-content:center;
  min-height:88px;
  gap:6px;
}
.selection-card.selection-card-compact strong{
  margin-bottom:0;
}
.selection-card.selection-card-centered{
  align-items:center;
  text-align:center;
}
.selection-card.is-selected .preset-sub,
.selection-card.is-selected .selection-sub{
  color:rgba(255,255,255,.8);
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.page-head-center{
  align-items:center;
}
.page-head-form.is-sm input{
  min-width:170px;
  max-width:220px;
}
.page-head-form.is-md input{
  min-width:220px;
  max-width:260px;
}
.page-head-form.is-lg input{
  min-width:240px;
  max-width:280px;
}
.form-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.form-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.form-section{
  padding:0 0 18px;
  border-bottom:1px solid rgba(143,136,139,.35);
  background:transparent;
}
.form-section h3{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#5f585a;
}
.field-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field-help{
  font-size:12px;
  color:var(--muted);
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#f7f4f4;
}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.form-actions.form-actions-tight{
  margin-top:0;
}
.form-stack .form-section:last-of-type{
  padding-bottom:0;
  border-bottom:none;
}
.form-card{
  margin-top:14px;
}
.flex-1{
  flex:1 1 0;
  min-width:0;
}
.field-wide textarea,
textarea.field-wide{
  max-width:100%;
}
.divider-soft{
  border:none;
  border-top:1px solid #eee;
  margin:14px 0;
}
.btn-offset{
  margin-left:8px;
}
.status-note{
  margin-top:2px;
}
.detail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.detail-row{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:8px;
  align-items:start;
}
.detail-label{
  font-weight:700;
}
.preset-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:12px;
}
.preset-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  text-align:left;
}
.preset-card:hover{
  background:#f7f3f3;
}
.preset-title{
  font-family:"Inter", Arial, sans-serif;
  font-weight:700;
}
.preset-sub{
  color:var(--muted);
  font-size:13px;
}

.btn-accent-soft{
  border-color:rgba(201,106,43,.48) !important;
  background:linear-gradient(135deg, rgba(201,106,43,.18) 0%, rgba(184,92,34,.24) 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(201,106,43,.14);
}
.btn-accent-soft:hover{
  background:linear-gradient(135deg, rgba(208,122,52,.28) 0%, rgba(173,84,31,.32) 100%) !important;
}
.btn-accent{
  border-color:var(--accent) !important;
  background:linear-gradient(135deg, #d07a34 0%, #b85c22 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 24px var(--accent-glow);
}
.btn-accent:hover{
  background:linear-gradient(135deg, #d7833e 0%, #ad541f 100%) !important;
}
.accent-chip{
  border-color:rgba(201,106,43,.28);
  background:linear-gradient(135deg, rgba(201,106,43,.16) 0%, rgba(184,92,34,.18) 100%);
  color:#fff;
}
.summary-chips{
  display:inline-flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.page-head-main.is-inline .summary-chips{
  margin-top:0;
}
.summary-chips span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(245,247,249,.82);
  font-size:13px;
}
.metric-grid-accent .card{
  position:relative;
  overflow:hidden;
}
.metric-grid-accent.metric-grid-soft .card{
  border-color:#a7aab0;
  border-width:1px;
  box-shadow:0 12px 28px rgba(24, 20, 21, 0.08);
  background:#f4f1f0;
}
.metric-surface-a{
  background:linear-gradient(135deg, #f6f7f8 0%, #e8eaed 100%);
}
.metric-surface-b{
  background:linear-gradient(135deg, #f5f6f7 0%, #e7e9ec 100%);
}
.metric-surface-c{
  background:linear-gradient(135deg, #f6f7f8 0%, #e9ebee 100%);
}
.metric-surface-d{
  background:linear-gradient(135deg, #f4f5f6 0%, #e5e7ea 100%);
}
.metric-grid-soft .muted{
  color:#5f646b;
}
.metric-grid-accent .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg, #7a151d 0%, #b12e38 42%, var(--accent) 100%);
}
.metric-grid-accent .metric-card-total::before{
  background:linear-gradient(90deg, #6f141c 0%, #b12e38 44%, #d07a34 100%);
}
.metric-value{
  font-family:"Inter", Arial, sans-serif;
  font-weight:700;
}
.metric-value-lg{
  font-size:30px;
  margin-top:8px;
  line-height:1;
  letter-spacing:-0.03em;
}
.metric-value-md{
  font-size:26px;
  margin-top:6px;
  font-weight:800;
}
.metric-value-accent{
  color:var(--accent-ink);
}
.metric-value.with-trend{
  display:flex;
  align-items:center;
  gap:8px;
}
.trend-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(20, 132, 83, 0.10);
  color:#148453;
  flex:0 0 auto;
}
.trend-icon .material-symbols-rounded{
  font-size:18px;
  line-height:1;
  font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.metric-card-total .metric-value-accent{
  color:#ffbe82;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.metric-card-total{
  border-color:#2f3944;
  background:linear-gradient(135deg, #2a3138 0%, #3a4652 100%);
  color:#f5f7f9;
  box-shadow:0 16px 32px rgba(16, 18, 22, 0.20);
}
.metric-card-total .muted{
  color:rgba(245,247,249,0.76);
}
.surface-soft{
  border-color:#b1b5bc;
  background:linear-gradient(135deg, #fafbfc 0%, #eceff2 100%);
}
.metric-breakdown{
  padding-top:10px;
  border-top:1px solid rgba(36, 32, 33, 0.12);
}
.metric-breakdown-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.accent-amount{
  color:#f0a15c;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.mt-4{ margin-top:4px; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-18{ margin-top:18px; }
.mt-24{ margin-top:24px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-18{ margin-bottom:18px; }
.mb-8{ margin-bottom:8px; }
.mb-22{ margin-bottom:22px; }
.mxw-760{ max-width:760px; }
.mxw-840{ max-width:840px; }
.mxw-560{ max-width:560px; }
.mxw-620{ max-width:620px; }
.section-title{
  margin:0 0 10px;
}
.section-title-tight{
  margin-top:0;
}
.table-top-gap{
  margin-top:12px;
}
.text-right{
  text-align:right;
}
.inline-form{
  display:inline;
}
.inline-form-reset{
  display:inline;
  margin:0;
}
.mr-6{
  margin-right:6px;
}
.clickable-row{
  cursor:pointer;
}
.member-head-band{
  margin-top:12px;
  min-height:auto;
  padding-top:10px;
  padding-bottom:10px;
  justify-content:center;
}
.member-head-meta{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
  min-width:min(920px, 100%);
  margin:0 auto;
}
.member-head-meta-item{
  min-width:0;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.member-head-meta-label{
  display:block;
  margin-bottom:3px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(245,247,249,.58);
}
.member-head-meta-value{
  display:block;
  color:#f5f7f9;
  font-weight:600;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.member-head-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.member-head-inline .material-symbols-rounded{
  font-size:18px;
  line-height:1;
  font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.member-head-status,
.member-head-balance{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#f5f7f9;
  width:max-content;
}
.member-head-status.is-active,
.member-head-balance.is-positive{
  color:#86efac;
  background:rgba(10,122,47,.14);
  border-color:rgba(191,231,201,.28);
}
.member-head-status.is-frozen{
  color:#93c5fd;
  background:rgba(59,130,246,.14);
  border-color:rgba(147,197,253,.26);
}
.member-head-status.is-inactive,
.member-head-balance.is-negative{
  color:#fca5a5;
  background:rgba(161,18,18,.14);
  border-color:rgba(241,194,194,.22);
}
.member-head-balance.is-neutral{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:#f5f7f9;
}
.freeze-tree-row td{
  background:rgba(255,255,255,.22);
  border-bottom:1px solid rgba(107,114,128,.08);
}
.freeze-tree-cell{
  padding-left:28px !important;
}
.freeze-tree-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.freeze-tree-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#555052;
  line-height:1.3;
}
.freeze-tree-item::before{
  content:"";
  width:10px;
  height:1px;
  background:rgba(107,114,128,.45);
  flex:0 0 auto;
}
.freeze-tree-label{
  font-weight:700;
  color:#3f3a3b;
}
.freeze-tree-delete{
  margin-left:4px;
}
.freeze-tree-delete .btn{
  min-width:auto;
  min-height:30px;
  padding:5px 9px;
  font-size:12px;
}
.member-detail-columns{
  display:grid;
  grid-template-columns:2fr 2fr 1fr;
  gap:18px;
  align-items:stretch;
  margin-top:18px;
}
.member-detail-column{
  min-width:0;
}
.account-detail-columns{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:18px;
  align-items:stretch;
  margin-top:18px;
}
.account-detail-column{
  min-width:0;
}
.account-detail-columns .card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.account-detail-columns .table{
  margin-top:12px;
}
.account-detail-columns .table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
}
.member-detail-columns .card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.member-detail-columns .table{
  margin-top:12px;
}
.member-detail-columns .table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
}
.member-checkins-wrap{
  max-height:245px;
}
.donut-summary{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:20px;
  align-items:center;
  max-width:520px;
}
.reports-split{
  display:grid;
  grid-template-columns:minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
}
.card.card-compact{
  width:min(100%, 560px);
}
.donut-chart-wrap{
  display:flex;
  justify-content:center;
}
.donut-chart{
  width:180px;
  height:180px;
  aspect-ratio:1;
  position:relative;
  display:block;
  flex:0 0 180px;
  border-radius:50%;
}
.donut-chart svg{
  width:100%;
  height:100%;
  display:block;
}
.donut-track{
  fill:none;
  stroke:rgba(148,163,184,.22);
  stroke-width:16;
}
.donut-segment{
  fill:none;
  stroke-width:16;
  stroke-linecap:round;
}
.donut-chart-center{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 26px;
}
.donut-chart-kicker{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
}
.donut-chart-total{
  margin-top:4px;
  font-size:22px;
  font-weight:800;
  line-height:1;
  color:#111827;
}
.donut-chart-sub{
  margin-top:4px;
  font-size:11px;
  color:#6b7280;
}
.donut-legend{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.donut-legend-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.46);
  border:1px solid rgba(107,114,128,.10);
}
.donut-legend-swatch{
  width:10px;
  height:10px;
  border-radius:999px;
}
.donut-legend-label{
  font-weight:600;
  color:#111827;
}
.donut-legend-meta{
  color:#6b7280;
  font-size:11px;
}
.donut-legend-value{
  font-weight:700;
  color:#111827;
}

/* Shared layout modes
   desktop: > 1360px
   tablet:  <= 1360px
   mobile:  <= 900px
*/
@media (max-width:1360px){
  .grid4{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .grid5{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .grid6{ grid-template-columns:repeat(3, minmax(160px, 1fr)); }
  .grid3{ grid-template-columns:repeat(3, minmax(160px, 1fr)); }
  .grid2{ grid-template-columns:1fr; }
  .page-head-actions{
    width:100%;
    justify-content:flex-start;
  }
  .header-quick-actions{
    width:100%;
    justify-content:flex-start;
  }
  .page-head-inline,
  .page-head-search,
  .page-head-form,
  .page-head-main.is-inline{
    width:100%;
  }
  .page-head-inline{
    align-items:flex-start;
  }
  .page-head-main.is-inline{
    align-items:flex-start;
  }
  .page-head-search input,
  .page-head-form input{
    min-width:0;
    max-width:none;
    flex:1;
  }
  .page-head-form.is-sm input,
  .page-head-form.is-md input,
  .page-head-form.is-lg input{
    max-width:none;
  }
  .pos-columns,
  .pos-bottom{
    grid-template-columns:1fr;
    gap:18px;
  }
  .pos-column{
    height:auto;
  }
  .pos-column:nth-child(n+2) .pos-step{
    height:auto;
  }
  .order-banner{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .touch-inline{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .member-detail-columns{
    grid-template-columns:1fr;
  }
  .account-detail-columns{
    grid-template-columns:1fr;
  }
  .member-head-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    min-width:0;
    width:100%;
  }
  .reports-split{
    grid-template-columns:1fr;
  }
}

.overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index:900;
}

@media (max-width:900px){
  .topbar{ display:flex; }
  .topbar .brand-logo{ display:none; }
  .main{ margin-left:0; padding:16px; }
  .main > h1,
  .main > .page-head,
  .main > .flex:first-child{
    top:72px;
    margin:0 0 18px;
    padding:8px 16px 9px;
  }
  .main > h1 + .subnav{
    margin:-10px 0 18px;
    padding:0 16px 10px;
  }
  .page-head-actions.is-stack{
    width:100%;
    flex-direction:row;
    align-items:center;
  }
  .sidebar{
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  body.menu-open .sidebar{ transform: translateX(0); }
  body.menu-open .overlay{ display:block; }
  .grid6{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .grid3{ grid-template-columns:1fr; }
  .selection-card{ min-height:96px; }
  .preset-grid{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .form-grid-2{ grid-template-columns:1fr; }
  .pos-columns,
  .touch-inline,
  .order-banner,
  .pos-bottom{
    grid-template-columns:1fr;
  }
  .pos-columns{
    gap:18px;
  }
  .pos-column{
    height:auto;
  }
  .client-grid,
  .trainer-grid,
  .service-grid,
  .method-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:none;
    overflow:visible;
  }
  .method-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .pos-step{
    padding:14px;
  }
  .pos-column:nth-child(n+2) .pos-step{
    height:auto;
  }
  .order-banner{
    top:10px;
    border-radius:8px;
  }
  .donut-summary{
    grid-template-columns:1fr;
    gap:14px;
  }
  .pos-shell{
    gap:16px;
  }
  .pos-step{
    padding:14px;
  }
  .order-banner{
    top:8px;
    padding:12px;
    border-radius:8px;
  }
  .touch-inline,
  .order-banner{
    gap:10px;
  }
  .client-grid,
  .trainer-grid,
  .service-grid,
  .method-grid{
    grid-template-columns:1fr;
  }
  .touch-actions{
    grid-template-columns:1fr;
  }
  .member-head-meta{
    grid-template-columns:1fr;
  }
}