.finance-command-hero {
    align-items: center;
    background: radial-gradient(circle at 82% -30%, rgba(35, 210, 199, .3), transparent 38%), linear-gradient(145deg, #092d46, #075767 62%, #087b79);
    border: 1px solid #4ba6aa;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -5px 12px rgba(0,20,35,.24), 0 14px 34px rgba(6,45,68,.17);
    color: #fff;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 16px;
    overflow: hidden;
    padding: 22px 24px;
    position: relative;
}

.finance-command-hero:after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
    content: "";
    height: 1px;
    left: 3%;
    position: absolute;
    right: 3%;
    top: 1px;
}

.finance-command-hero h1 { color: #fff; margin: 3px 0 5px; }
.finance-command-hero p { color: #d1e9ed; margin: 0; max-width: 760px; }
.finance-command-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.finance-asof { background: rgba(5,29,44,.45); border: 1px solid rgba(255,255,255,.23); border-radius: 10px; display: grid; padding: 7px 11px; }
.finance-asof small { color: #a9d2d8; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.finance-asof strong { color: #fff; font-size: 12px; }

.finance-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 13px; }
.finance-kpi-card {
    align-items: center;
    appearance: none;
    background: linear-gradient(145deg, #fff, #eaf1f4);
    border: 1px solid #b9cbd3;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -4px 9px rgba(34,69,87,.07), 0 7px 17px rgba(19,56,75,.09);
    color: #17384d;
    cursor: pointer;
    display: grid;
    gap: 9px;
    grid-template-columns: 38px 1fr;
    min-height: 116px;
    padding: 13px;
    position: relative;
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.finance-kpi-card:hover { box-shadow: inset 0 1px 0 #fff, 0 11px 25px rgba(12,70,93,.15); transform: translateY(-2px); }
.finance-kpi-card[aria-expanded="true"] { border-color: #07938c; box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(7,147,140,.13), 0 12px 28px rgba(8,82,101,.16); }
.finance-kpi-card > span:nth-child(2) { min-width: 0; }
.finance-kpi-card small, .finance-kpi-card strong, .finance-kpi-card em { display: block; }
.finance-kpi-card small { color: #67808e; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.finance-kpi-card strong { color: #12354b; font-size: clamp(13px, 1.3vw, 18px); margin: 4px 0; overflow-wrap: anywhere; }
.finance-kpi-card em { color: #718793; font-size: 10px; font-style: normal; line-height: 1.35; }
.finance-kpi-card > b { bottom: 8px; color: #087e79; font-size: 10px; font-weight: 900; grid-column: 2; letter-spacing: .03em; position: absolute; right: 11px; text-transform: uppercase; }
.finance-kpi-icon { align-items: center; background: linear-gradient(145deg, #168fb1, #075c88); border: 1px solid rgba(255,255,255,.3); border-radius: 11px; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 5px 11px rgba(8,81,111,.2); color: #fff; display: flex; font-size: 18px; height: 38px; justify-content: center; width: 38px; }
.tone-receivable .finance-kpi-icon { background: linear-gradient(145deg, #12a9a0, #08756f); }
.tone-payable .finance-kpi-icon { background: linear-gradient(145deg, #e29a28, #a9670b); }
.tone-bank .finance-kpi-icon { background: linear-gradient(145deg, #268cce, #135b9d); }
.tone-cash .finance-kpi-icon { background: linear-gradient(145deg, #38a66a, #1b7645); }
.tone-expense .finance-kpi-icon { background: linear-gradient(145deg, #bd6ec9, #75438e); }

.finance-drawer-zone { margin-bottom: 14px; }
.finance-detail-drawer[hidden] { display: none !important; }
.finance-detail-drawer {
    animation: financeDrawerIn .22s ease-out;
    background: linear-gradient(145deg, #fff, #edf4f6);
    border: 1px solid #a9cbd0;
    border-left: 5px solid #0a9189;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 #fff, 0 10px 25px rgba(13,62,82,.1);
    overflow: hidden;
    padding: 16px 18px 18px;
}
@keyframes financeDrawerIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.finance-detail-drawer > header { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; }
.finance-detail-drawer h2 { margin: 2px 0; }
.finance-detail-drawer p { color: #69808d; margin: 0; }
.finance-detail-drawer header a { color: #087e79; font-size: 11px; font-weight: 900; text-decoration: none; }
.finance-table-wrap { overflow-x: auto; }
.finance-table-wrap table { border-collapse: separate; border-spacing: 0; min-width: 760px; width: 100%; }
.finance-table-wrap th { background: #e4eef1; border-bottom: 1px solid #c3d4da; color: #5e7582; font-size: 11px; letter-spacing: .04em; padding: 10px; text-align: left; text-transform: uppercase; }
.finance-table-wrap td { border-bottom: 1px solid #dbe5e8; color: #2d4b5c; font-size: 12px; padding: 11px 10px; }
.finance-table-wrap td strong, .finance-table-wrap td small { display: block; }
.finance-table-wrap td small { color: #78909a; font-size: 10px; margin-top: 3px; }
.finance-table-wrap tbody tr:hover td { background: rgba(4,146,137,.045); }
.finance-table-wrap a { color: #087e79; font-weight: 850; }
.amount-positive { color: #147a4c !important; font-weight: 850; }
.amount-attention { color: #a6630f !important; font-weight: 900; }
.amount-strong { color: #123b53 !important; font-weight: 900; }
.finance-empty { background: #edf5f6; border-radius: 9px; margin: 10px 0 0 !important; padding: 12px; text-align: center; }

.finance-analytics-grid { display: grid; gap: 13px; grid-template-columns: 1.2fr .8fr; }
.finance-chart-card { background: linear-gradient(145deg, #fff, #edf3f5); border: 1px solid #b8ccd3; border-radius: 16px; box-shadow: inset 0 1px #fff, 0 8px 20px rgba(15,55,74,.08); min-height: 255px; padding: 17px 18px; }
.finance-chart-card > header { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 15px; }
.finance-chart-card h2 { font-size: 16px; margin: 2px 0; }
.finance-chart-card > header > strong { color: #087e79; font-size: 16px; }
.chart-live { background: #ddf6ee; border: 1px solid #a5dac8; border-radius: 20px; color: #187653; font-size: 10px; font-weight: 900; padding: 5px 9px; text-transform: uppercase; }
.currency-chart-list { display: grid; gap: 12px; }
.currency-chart-row { align-items: center; display: grid; gap: 9px; grid-template-columns: 44px 1fr 1fr; }
.currency-chart-row > strong { color: #123b53; }
.currency-chart-row > div { background: #e4ecef; border-radius: 7px; height: 32px; overflow: hidden; position: relative; }
.currency-chart-row span { color: #496573; display: flex; font-size: 11px; inset: 0; justify-content: space-between; padding: 8px; position: absolute; z-index: 1; }
.currency-chart-row i { border-radius: 7px; display: block; height: 100%; min-width: 2px; }
.bar-receivable { background: linear-gradient(90deg, rgba(12,164,153,.25), rgba(12,164,153,.55)); }
.bar-payable { background: linear-gradient(90deg, rgba(222,145,31,.25), rgba(222,145,31,.55)); }
.collection-chart { align-items: center; display: grid; grid-template-rows: auto 1fr auto; }
.collection-ring { align-items: center; background: conic-gradient(#0b9b91 calc(var(--collection) * 1%), #dbe7ea 0); border-radius: 50%; display: flex; height: 128px; justify-content: center; margin: 0 auto; position: relative; width: 128px; }
.collection-ring:after { background: #f8fbfc; border-radius: 50%; content: ""; inset: 15px; position: absolute; }
.collection-ring span { display: grid; position: relative; text-align: center; z-index: 1; }
.collection-ring strong { color: #123b53; font-size: 22px; }
.collection-ring small { color: #6d838e; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.chart-stat-pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.chart-stat-pair span { background: #e7f0f2; border-radius: 9px; display: grid; padding: 8px 10px; }
.chart-stat-pair small { color: #6d838e; font-size: 10px; text-transform: uppercase; }
.chart-stat-pair strong { color: #173e53; font-size: 12px; }
.liquidity-bars, .expense-bars { display: grid; gap: 13px; }
.liquidity-bars > div, .expense-bars > div { background: #e4ecef; border-radius: 9px; height: 38px; overflow: hidden; position: relative; }
.liquidity-bars span, .expense-bars span { align-items: center; color: #395867; display: flex; inset: 0; justify-content: space-between; padding: 0 11px; position: absolute; z-index: 1; }
.liquidity-bars i, .expense-bars i { background: linear-gradient(90deg, rgba(22,131,181,.2), rgba(22,131,181,.53)); border-radius: 9px; display: block; height: 100%; min-width: 2px; }
.liquidity-bars > div:nth-child(2) i { background: linear-gradient(90deg, rgba(36,155,91,.2), rgba(36,155,91,.53)); }
.expense-bars i { background: linear-gradient(90deg, rgba(137,76,163,.2), rgba(137,76,163,.5)); }
.liquidity-chart > p { border-top: 1px solid #d3e0e4; color: #657d89; margin: 17px 0 0; padding-top: 13px; }
.liquidity-chart > p strong { color: #123b53; float: right; }

html[data-theme="dark"] .finance-kpi-card,
html[data-theme="dark"] .finance-detail-drawer,
html[data-theme="dark"] .finance-chart-card { background: linear-gradient(145deg, #102b3b, #0a1f2d); border-color: #315264; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.18); color: #dce9ee; }
html[data-theme="dark"] .finance-kpi-card strong,
html[data-theme="dark"] .finance-chart-card h2,
html[data-theme="dark"] .finance-detail-drawer h2,
html[data-theme="dark"] .currency-chart-row > strong,
html[data-theme="dark"] .chart-stat-pair strong,
html[data-theme="dark"] .amount-strong { color: #e4f0f4 !important; }
html[data-theme="dark"] .finance-kpi-card small,
html[data-theme="dark"] .finance-kpi-card em,
html[data-theme="dark"] .finance-detail-drawer p { color: #92abb7; }
html[data-theme="dark"] .finance-table-wrap th,
html[data-theme="dark"] .chart-stat-pair span,
html[data-theme="dark"] .currency-chart-row > div,
html[data-theme="dark"] .liquidity-bars > div,
html[data-theme="dark"] .expense-bars > div { background: #163444; color: #a9c0ca; }
html[data-theme="dark"] .finance-table-wrap td { border-color: #294452; color: #c9d9df; }
html[data-theme="dark"] .collection-ring:after { background: #0e2736; }
html[data-theme="dark"] .collection-ring { background: conic-gradient(#13a99e calc(var(--collection) * 1%), #294451 0); }

@media (max-width: 1260px) {
    .finance-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .finance-analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .finance-command-hero { align-items: flex-start; flex-direction: column; }
    .finance-command-actions { justify-content: flex-start; }
    .finance-kpi-grid { grid-template-columns: 1fr 1fr; }
    .currency-chart-row { grid-template-columns: 42px 1fr; }
    .currency-chart-row > div:last-child { grid-column: 2; }
}
@media (max-width: 560px) {
    .finance-command-hero { border-radius: 14px; padding: 17px; }
    .finance-command-actions .button, .finance-asof { width: 100%; }
    .finance-kpi-grid { grid-template-columns: 1fr; }
    .finance-kpi-card { min-height: 100px; }
    .finance-detail-drawer { padding: 14px; }
    .finance-detail-drawer > header { align-items: flex-start; flex-direction: column; }
}