@media (min-width: 768px) {
  .annual-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
  .annual-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
.annual-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.annual-heading h3 { margin:0; font-size:18px; color:#0f2747; }
.annual-heading p { margin:6px 0 0; color:#78879b; font-size:13px; }
.annual-tools { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.annual-tools label { color:#5e6d82; font-size:13px; }
.annual-tools select,.annual-tools input { margin-left:6px; padding:8px 10px; border:1px solid #d7e1ef; border-radius:8px; background:white; color:#314560; }
.annual-period-note { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:10px 13px; border:1px solid #dce9f8; border-radius:10px; background:#f8fbff; color:#63758d; font-size:13px; }
.annual-period-note b { color:#1d4f91; }.annual-period-note span { line-height:1.55; }
.annual-stat { background:linear-gradient(145deg,#fff,#f6f9fd); border:1px solid #e0e8f2; border-radius:12px; padding:18px; box-shadow:0 3px 10px rgba(24,64,110,.04); }
.annual-stat span,.annual-stat small { display:block; color:#718097; font-size:13px; }
.annual-stat strong { display:block; margin:9px 0 5px; color:#132d4f; font-size:24px; }
.annual-stat strong.blue { color:#1769e0; }.annual-stat strong.red { color:#e34b4b; }
.annual-card { margin-bottom:16px; overflow:hidden; }.annual-card .card-title { font-weight:700; color:#153358; padding:3px 0 14px; }
.annual-type-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.annual-type-item { border:1px solid #e5edf7; background:#f8fbff; border-radius:10px; padding:14px; }.annual-type-item span { display:block; color:#718097; font-size:13px; }.annual-type-item strong { display:block; color:#155bc6; margin-top:7px; font-size:17px; }
.annual-status-list { display:flex; flex-wrap:wrap; gap:10px; }.annual-status-item { padding:8px 12px; background:#edf5ff; color:#45617f; border-radius:99px; font-size:13px; }.annual-status-item b { color:#155bc6; margin-left:4px; }
@media (max-width: 767px) { .annual-heading {align-items:flex-start; flex-direction:column}.annual-tools {width:100%;justify-content:flex-start;flex-wrap:wrap;white-space:normal}.annual-tools label {display:flex;align-items:center}.annual-stat-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.annual-stat{padding:14px}.annual-stat strong{font-size:20px}.annual-type-list{grid-template-columns:1fr 1fr}.annual-card{margin-bottom:12px}.annual-report-page .table-wrap{overflow-x:auto}.annual-report-page .data-table{min-width:580px}.annual-period-note{align-items:flex-start;flex-direction:column;gap:3px} }
@media print { body * {visibility:hidden !important;} .annual-report-page,.annual-report-page * {visibility:visible !important;} .annual-report-page {position:absolute;left:0;top:0;width:100%;} .annual-tools {display:none !important;} }


.annual-financial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.annual-financial-total { border:1px solid #dbe8fb; border-radius:12px; padding:17px 19px; background:linear-gradient(135deg,#f8fbff,#eef5ff); }
.annual-financial-total span,.annual-financial-total small { display:block; color:#718097; font-size:13px; }
.annual-financial-total strong { display:block; margin:7px 0 4px; color:#173f73; font-size:24px; }
.annual-financial-total.positive { background:linear-gradient(135deg,#f4fcf7,#eaf8ef); border-color:#cbead6; }.annual-financial-total.positive strong {color:#168254;}
.annual-financial-total.negative { background:linear-gradient(135deg,#fff8f8,#fff0f0); border-color:#f3d1d1; }.annual-financial-total.negative strong {color:#df4545;}
.annual-expense-card { border-color:#f0e3cc; }.annual-expense-note { margin:-2px 0 14px; color:#7a6a51; font-size:12px; line-height:1.6; }
.annual-expense-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.annual-expense-item { border:1px solid #eee7dc; border-radius:10px; padding:13px; background:linear-gradient(135deg,#fffdfa,#faf8f4); }
.annual-expense-item span { display:block; color:#7a6a51; font-size:13px; }.annual-expense-item strong { display:block; margin-top:7px; color:#9a5c16; font-size:17px; }
@media (max-width: 767px) { .annual-financial-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.annual-financial-total{padding:14px}.annual-financial-total strong{font-size:19px}.annual-expense-list{grid-template-columns:1fr 1fr}.annual-expense-item{padding:12px} }

.annual-cash-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.annual-cash-total { padding:17px 19px; border:1px solid #dbe7f5; border-radius:13px; background:#fbfdff; }
.annual-cash-total span,.annual-cash-total small { display:block; color:#718097; font-size:13px; line-height:1.5; }
.annual-cash-total strong { display:block; margin:7px 0 4px; font-size:24px; color:#173f73; }
.annual-cash-total.received { background:linear-gradient(135deg,#f5faff,#eaf4ff); border-color:#cfe2fb; }.annual-cash-total.received strong { color:#1769e0; }
.annual-cash-total.paid { background:linear-gradient(135deg,#f4fcf7,#eaf8ef); border-color:#cbead6; }.annual-cash-total.paid strong { color:#168254; }
.annual-cash-total.pending { background:linear-gradient(135deg,#fffdf7,#fff7e8); border-color:#f3deb1; }.annual-cash-total.pending strong { color:#b7791f; }
.annual-cash-total.positive { background:linear-gradient(135deg,#f4fcf7,#eaf8ef); border-color:#cbead6; }.annual-cash-total.positive strong { color:#168254; }
.annual-cash-total.negative { background:linear-gradient(135deg,#fff8f8,#fff0f0); border-color:#f3d1d1; }.annual-cash-total.negative strong { color:#df4545; }
.annual-reconcile-card { border-color:#d7e7fb; background:linear-gradient(135deg,#fff,#f8fbff); }
.annual-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.annual-card-heading p { margin:-6px 0 0; max-width:760px; color:#64748b; font-size:13px; line-height:1.7; }
.annual-reconcile-actions { display:flex; gap:8px; flex:0 0 auto; }
.annual-check-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:17px; }
.annual-check-grid>div { padding:13px; border:1px solid #e4edf8; border-radius:10px; background:#fff; }
.annual-check-grid b,.annual-check-grid span { display:block; }.annual-check-grid b { color:#1d4f91; font-size:13px; margin-bottom:6px; }.annual-check-grid span { color:#68778d; font-size:12px; line-height:1.65; }

.monthly-expense-summary { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 10px; }
.monthly-expense-stat,.monthly-expense-category { padding:14px 16px; border:1px solid #e1e9f4; border-radius:11px; min-width:165px; background:#fbfdff; }
.monthly-expense-stat>div,.monthly-expense-category>div { color:#64748b; font-size:12px; }.monthly-expense-stat strong,.monthly-expense-category strong { display:block; margin:6px 0 3px; font-size:20px; color:#184a89; }.monthly-expense-stat small { color:#8290a3; font-size:11px; }
.monthly-expense-stat.paid { border-color:#cbead6; background:#f6fcf8; }.monthly-expense-stat.paid strong { color:#168254; }
.monthly-expense-stat.pending { border-color:#f3deb1; background:#fffdf7; }.monthly-expense-stat.pending strong { color:#b7791f; }
.monthly-expense-category { min-width:130px; padding:12px 14px; background:#f8fafc; }.monthly-expense-category strong { font-size:15px; color:#475569; }
.monthly-expense-hint,.monthly-expense-modal-tip { padding:10px 12px; margin:12px 0 16px; color:#53667f; font-size:13px; line-height:1.65; background:#f6faff; border-left:3px solid #5a96ec; border-radius:0 8px 8px 0; }
.monthly-expense-modal-tip { margin-top:-3px; }
.monthly-expense-state { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; }.monthly-expense-state.paid { color:#16764a; background:#e8f7ee; }.monthly-expense-state.pending { color:#a56512; background:#fff3db; }.monthly-expense-state.legacy { color:#68778d; background:#eef2f7; }
.monthly-expense-amount { color:#c2410c; font-weight:700; white-space:nowrap; }
.monthly-expense-attachment { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 9px; margin-top:6px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:7px; font-size:13px; }
.monthly-expense-attachment .btn { padding:3px 8px; }

@media (max-width: 980px) { .annual-cash-grid,.annual-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 767px) { .annual-cash-grid,.annual-check-grid { grid-template-columns:1fr 1fr; gap:10px; }.annual-cash-total { padding:14px; }.annual-cash-total strong { font-size:19px; }.annual-card-heading { flex-direction:column; }.annual-reconcile-actions { width:100%; }.annual-reconcile-actions .btn { flex:1; }.monthly-expense-stat { min-width:calc(50% - 6px); flex:1; }.monthly-expense-category { min-width:calc(50% - 6px); flex:1; } }

.annual-clarity-note { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; align-items:start; margin:-2px 0 16px; padding:12px 15px; border:1px solid #cfe1fb; border-radius:10px; background:#f6faff; color:#526b8b; font-size:13px; line-height:1.65; }
.annual-clarity-note b { grid-row:span 2; color:#1856a0; }
.annual-clarity-note span { display:block; }
.annual-expense-item small { display:block; margin-top:5px; color:#887151; font-size:11px; line-height:1.45; }
@media (max-width:767px) { .annual-clarity-note{grid-template-columns:1fr;gap:4px;margin-bottom:12px}.annual-clarity-note b{grid-row:auto;} }