:root {
    --ink: #344052;
    --muted: #8b95a5;
    --line: #e7e9ee;
    --surface: #ffffff;
    --soft: #f3f4f6;
    --sidebar: #25262b;
    --green: #4caf50;
    --green-dark: #369a3b;
    --pink: #e93470;
    --cyan: #41b8cb;
    --orange: #fb9b35;
    --blue: #607d9b;
    --danger: #d74444;
    --shadow: 0 4px 18px rgba(43, 48, 58, .12);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-body { padding-left: 260px; }
.sidebar {
    background: linear-gradient(rgba(35,36,41,.94), rgba(23,24,28,.97)), radial-gradient(circle at top, #555, #111);
    bottom: 0; color: #f4f4f5; display: flex; flex-direction: column; left: 0; padding: 24px 18px;
    position: fixed; top: 0; width: 260px; z-index: 20;
}
.sidebar-brand { align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); display: flex; justify-content: center; padding: 0 4px 22px; }
.sidebar-brand img { display: block; height: auto; max-width: 100%; object-fit: contain; width: 205px; }
.sidebar-user { align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); display: flex; gap: 12px; padding: 20px 6px; }
.sidebar-user div { display: grid; }
.sidebar-user small { color: #aeb2ba; text-transform: capitalize; }
.avatar { align-items: center; background: var(--cyan); border-radius: 50%; display: inline-flex; font-weight: 700; height: 40px; justify-content: center; width: 40px; }
.sidebar-nav { display: grid; gap: 8px; padding-top: 22px; }
.sidebar-nav a { border-radius: 4px; color: #d6d7db; display: block; padding: 13px 14px; transition: .2s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--green); box-shadow: 0 4px 12px rgba(76,175,80,.28); color: white; }
.sidebar-footer { margin-top: auto; }
.sidebar-footer form { margin: 0; }
.sidebar-logout { background: transparent; border: 0; color: #d6d7db; padding: 12px 14px; text-align: left; width: 100%; }
.sidebar-logout:hover { background: rgba(215,68,68,.18); color: white; }

.app-shell { min-height: 100vh; }
.topbar { align-items: center; display: flex; justify-content: space-between; padding: 26px 36px 8px; }
.topbar h1 { font-size: 25px; font-weight: 400; margin: 0; }
.topbar-kicker { color: var(--muted); font-size: 12px; margin: 0; text-transform: uppercase; }
.topbar-meta { align-items: center; color: var(--muted); display: flex; gap: 12px; }
.status-dot { background: var(--green); border-radius: 50%; height: 8px; width: 8px; }
.role-pill, .count-badge { background: #e8f5e9; border-radius: 999px; color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 5px 10px; text-transform: capitalize; }
.page { padding: 28px 36px 60px; }

.stat-grid { display: grid; gap: 54px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 54px; }
.stat-card { background: white; border-radius: 5px; box-shadow: var(--shadow); min-height: 158px; padding: 24px 22px 14px; position: relative; }
.stat-icon { align-items: center; border-radius: 4px; box-shadow: 0 8px 18px rgba(0,0,0,.18); color: white; display: flex; font-size: 16px; font-weight: 700; height: 86px; justify-content: center; left: 22px; letter-spacing: 1px; position: absolute; top: -28px; width: 86px; }
.cyan { background: var(--cyan); } .pink { background: var(--pink); } .green { background: var(--green); } .orange { background: var(--orange); } .blue { background: var(--blue); }
.stat-value { margin-left: 112px; min-height: 76px; text-align: right; }
.stat-value span { color: var(--muted); display: block; font-size: 14px; line-height: 1.35; }
.stat-value strong { display: block; font-size: 27px; font-weight: 400; line-height: 1.2; margin-top: 8px; overflow-wrap: anywhere; }
.stat-card footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; margin-top: 12px; padding-top: 12px; }

.chart-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 32px; }
.chart-card { background: white; border-radius: 5px; box-shadow: var(--shadow); padding: 18px 18px 16px; }
.chart-card h2 { font-size: 19px; font-weight: 400; margin: 20px 4px 2px; }
.chart-card p { color: var(--muted); font-size: 13px; margin: 0 4px; }
.chart-panel { border-radius: 5px; box-shadow: 0 8px 20px rgba(0,0,0,.2); height: 205px; margin-top: -38px; overflow: hidden; padding: 24px; position: relative; }
.pink-chart { background: linear-gradient(135deg, #ec3d76, #d82864); }
.green-chart { background: linear-gradient(135deg, #58b95d, #42a447); }
.cyan-chart { background: linear-gradient(135deg, #54c2d2, #35aabe); }
.chart-panel::before { background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 50px 42px; content: ""; inset: 0; position: absolute; }
.bar-chart { align-items: end; display: flex; gap: 10px; height: 100%; justify-content: space-around; position: relative; z-index: 1; }
.bar-pair { align-items: end; display: flex; gap: 3px; height: 100%; width: 28px; }
.bar-pair span, .bar-pair i { background: rgba(255,255,255,.9); display: block; min-height: 5px; width: 11px; }
.bar-pair i { background: rgba(255,255,255,.42); }
.chart-empty { color: white; margin: auto; }
.chart-panel svg { height: 100%; position: relative; width: 100%; z-index: 1; }
.donut-wrap { display: grid; height: 100%; place-items: center; position: relative; z-index: 1; }
.donut { align-items: center; background: conic-gradient(white var(--share), rgba(255,255,255,.25) 0); border-radius: 50%; display: flex; flex-direction: column; height: 140px; justify-content: center; position: relative; width: 140px; }
.donut::after { background: var(--cyan); border-radius: 50%; content: ""; inset: 16px; position: absolute; }
.donut strong, .donut span { color: white; position: relative; text-align: center; z-index: 1; }
.donut strong { font-size: 28px; }.donut span { font-size: 10px; width: 80px; }

.content-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 350px; margin-bottom: 28px; min-width: 0; }
.side-stack { display: grid; gap: 28px; min-width: 0; }
.data-card { background: white; border-radius: 5px; box-shadow: var(--shadow); min-width: 0; padding: 20px; }
.card-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.card-heading p { color: var(--muted); font-size: 11px; margin: 0; text-transform: uppercase; }
.card-heading h2 { font-size: 20px; font-weight: 400; margin: 2px 0 0; }
.mini-icon { align-items: center; border-radius: 4px; color: white; display: flex; font-size: 20px; height: 42px; justify-content: center; width: 42px; }

.table-wrap { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; min-width: 700px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 14px 10px; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
td { font-size: 13px; }
td a { color: #3e7bad; font-weight: 600; }
.icon-link { align-items: center; background: #eef6fa; border-radius: 50%; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.positive { color: var(--green-dark); }.negative { color: var(--danger); }
.badge { background: #fff3dd; border-radius: 999px; color: #a86516; display: inline-flex; font-size: 11px; font-weight: 700; padding: 4px 9px; text-transform: capitalize; }
.badge.paid { background: #e5f7e6; color: var(--green-dark); }

.stack { display: grid; gap: 12px; }
label { color: var(--muted); display: grid; font-size: 12px; font-weight: 600; gap: 5px; }
input, select { background: white; border: 1px solid #dfe3e8; border-radius: 4px; color: var(--ink); min-width: 0; padding: 10px 11px; width: 100%; }
input:focus, select:focus { border-color: var(--cyan); outline: 2px solid rgba(65,184,203,.12); }
button { background: var(--green); border: 0; border-radius: 4px; color: white; font-weight: 600; min-height: 40px; padding: 9px 14px; }
button:hover { background: var(--green-dark); }

.operation-list { display: grid; }
.operation-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: auto minmax(0,1fr) auto auto auto; padding: 12px 0; }
.operation-row:last-child { border-bottom: 0; }
.operation-row div { display: grid; }
.operation-row small { color: var(--muted); font-size: 11px; }
.operation-row b { font-size: 13px; font-weight: 600; }
.operation-icon { align-items: center; border-radius: 4px; color: white; display: flex; height: 34px; justify-content: center; width: 34px; }
.icon-button { align-items: center; border-radius: 50%; display: flex; font-size: 20px; height: 30px; justify-content: center; min-height: 30px; padding: 0; width: 30px; }
.icon-button.danger, .danger-button { background: var(--danger); }
.danger-button { min-height: 40px; }
.edit-menu { position: relative; }
.edit-menu summary { align-items: center; background: #eef6fa; border-radius: 50%; color: #437995; cursor: pointer; display: flex; height: 30px; justify-content: center; list-style: none; width: 30px; }
.edit-menu summary::-webkit-details-marker { display: none; }
.edit-menu form { background: white; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); display: grid; gap: 8px; padding: 12px; position: absolute; right: 0; top: 38px; width: 260px; z-index: 10; }
.edit-menu.wide summary { background: #eef6fa; border-radius: 4px; color: #39718d; height: auto; padding: 10px 14px; width: auto; }
.edit-menu.wide form { width: 320px; }
.permission-list { border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 8px; margin: 0; padding: 10px; }
.permission-list legend { color: var(--muted); font-size: 11px; font-weight: 600; padding: 0 4px; }
.check-label { align-items: center; color: var(--ink); display: flex; font-size: 12px; font-weight: 400; gap: 8px; }
.check-label input { min-width: auto; width: auto; }

.detail-banner { align-items: end; background: linear-gradient(135deg, #30343d, #444b58); border-radius: 6px; color: white; display: flex; justify-content: space-between; margin-bottom: 54px; padding: 26px; }
.detail-banner h2 { font-size: 30px; font-weight: 400; margin: 4px 0 12px; }
.detail-banner .eyebrow { color: #bfc5ce; margin: 6px 0 0; }
.back-link { color: #dce7ec; font-size: 13px; }
.admin-actions { align-items: center; display: flex; gap: 10px; }
.detail-columns { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.inline-add-form { display: grid; gap: 9px; grid-template-columns: minmax(0, 1fr) 155px auto; margin-bottom: 18px; }
.inline-add-form.expense-form { grid-template-columns: minmax(0, 1fr) 150px 155px auto; }
.filter-card { margin-bottom: 28px; }
.filter-form { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(180px, 1fr) 150px 155px 155px auto auto; }
.reset-button { align-items: center; background: #eef1f4; border-radius: 4px; color: #596575; display: flex; font-size: 13px; font-weight: 600; justify-content: center; min-height: 40px; padding: 9px 14px; }

.flash { border-radius: 4px; margin-bottom: 22px; padding: 12px 14px; }
.flash-success { background: #e4f6e5; color: #287d2d; }.flash-error { background: #fde8e4; color: #a43b2d; }
.empty { color: var(--muted); font-size: 13px; }
.dime-section { margin-bottom: 28px; scroll-margin-top: 20px; }
.period-summary { margin-bottom: 28px; }
.section-note { color: var(--muted); font-size: 13px; margin: -8px 0 18px; }
.guest-shell { min-height: 100vh; }.guest-shell .page { display: grid; min-height: 100vh; place-items: center; }
.auth-shell { width: min(100%, 430px); }.login-panel { background: white; border-radius: 6px; box-shadow: var(--shadow); display: grid; gap: 14px; padding: 28px; }
.login-logo { height: auto; margin: 0 auto 12px; max-width: 100%; width: 310px; }
.login-panel h1 { font-weight: 400; margin: 0 0 8px; }.eyebrow { color: var(--muted); font-size: 11px; margin: 0; text-transform: uppercase; }

@media (max-width: 1180px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 54px; }
    .chart-grid { grid-template-columns: 1fr; row-gap: 60px; }
    .content-grid, .detail-columns { grid-template-columns: 1fr; }
    .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .app-body { padding-left: 0; }
    .sidebar { height: auto; padding: 12px; position: static; width: 100%; }
    .sidebar-brand, .sidebar-user { display: none; }
    .sidebar-nav { display: flex; flex-wrap: wrap; padding: 0; }
    .sidebar-nav a { flex: 1; text-align: center; }
    .sidebar-footer { border-top: 1px solid rgba(255,255,255,.16); margin-top: 8px; padding-top: 8px; }
    .sidebar-logout { background: rgba(215,68,68,.16); text-align: center; }
    .topbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 20px 16px 4px; }
    .page { padding: 28px 16px 45px; }
    .stat-grid { grid-template-columns: 1fr; }
    .detail-banner { align-items: flex-start; flex-direction: column; gap: 18px; }
    .admin-actions, .inline-add-form, .inline-add-form.expense-form, .filter-form { align-items: stretch; display: grid; grid-template-columns: 1fr; width: 100%; }
    .operation-row { grid-template-columns: auto minmax(0,1fr) auto; }
    .operation-row form, .operation-row .edit-menu { grid-column: auto; }
}