:root {
    --primary: #1769e0;
    --primary-dark: #0d4da8;
    --primary-soft: #eaf3ff;
    --primary-pale: #f5f9ff;
    --success: #15945f;
    --success-soft: #e7f8f0;
    --danger: #d94a5a;
    --danger-soft: #fff0f2;
    --warning: #b76b00;
    --warning-soft: #fff3d9;
    --white: #fff;
    --bg: #f4f8fd;
    --text: #17324d;
    --muted: #63788d;
    --border: #dbe7f3;
    --shadow-sm: 0 5px 18px rgba(24, 83, 141, .08);
    --shadow: 0 12px 34px rgba(24, 83, 141, .12);
    --radius: 18px;
    --header-height: 76px;
    --sidebar-width: 280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    color: var(--text);
    background: var(--bg);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5;
}
body.sidebar-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; }
ul, ol { padding-left: 1.25rem; }
.text-danger, .expense-text { color: var(--danger) !important; }
.income-text { color: var(--success) !important; }
.print-only { display: none; }

/* Header */
.app-header {
    position: sticky; top: 0; z-index: 1000;
    min-height: var(--header-height);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(24,83,141,.08);
    backdrop-filter: blur(12px);
}
.header-container {
    min-height: var(--header-height);
    padding: 10px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.header-left, .header-right, .brand, .user-info, .button-row, .page-actions {
    display: flex; align-items: center;
}
.header-left { gap: 12px; min-width: 0; }
.header-right { gap: 14px; }
.brand { gap: 12px; text-decoration: none; min-width: 0; }
.brand-logo-image {
    width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto;
    border-radius: 14px; box-shadow: 0 6px 16px rgba(23,105,224,.24);
}
.brand-text, .user-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { color: var(--primary-dark); font-size: 18px; font-weight: 800; }
.brand-text small, .user-text span { color: var(--muted); font-size: 12px; }
.user-info { gap: 10px; }
.user-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--primary); background: var(--primary-soft);
    border: 2px solid #c9defa; font-weight: 800;
}
.user-text strong { font-size: 14px; }
.menu-button {
    display: none; width: 46px; height: 46px; border: 0; border-radius: 13px;
    background: var(--primary-soft); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-button span { width: 23px; height: 3px; border-radius: 5px; background: var(--primary); }
.logout-form { margin: 0; }
.logout-button {
    min-height: 44px; padding: 9px 15px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--primary); background: var(--white); border: 1px solid var(--primary);
    font-weight: 700; cursor: pointer; transition: .2s ease;
}
.logout-button:hover { color: #fff; background: var(--primary); }
.logout-icon { font-size: 18px; }

/* Layout/sidebar */
.app-layout { display: flex; min-height: calc(100vh - var(--header-height)); }
.app-sidebar {
    position: sticky; top: var(--header-height); flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width); height: calc(100vh - var(--header-height));
    padding: 20px 16px; overflow-y: auto; background: var(--white);
    border-right: 1px solid var(--border); transition: transform .28s ease;
}
.sidebar-business {
    display: flex; align-items: center; gap: 11px; padding: 13px;
    background: linear-gradient(135deg,var(--primary-soft),#f8fbff);
    border: 1px solid #d5e7fd; border-radius: 16px;
}
.business-icon {
    width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius: 13px; font-size: 22px;
}
.business-info { display: flex; flex-direction: column; min-width: 0; }
.business-info small { color: var(--muted); font-size: 11px; }
.business-info strong { overflow: hidden; color: var(--primary-dark); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-close {
    display: none; margin-left: auto; width: 36px; height: 36px; border-radius: 10px;
    color: var(--primary-dark); background: #fff; border: 1px solid var(--border);
    font-size: 24px; cursor: pointer;
}
.sidebar-add-button {
    min-height: 54px; margin-top: 17px; padding: 11px 15px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow: 0 8px 19px rgba(23,105,224,.24);
    font-weight: 800; text-decoration: none; transition: .2s;
}
.sidebar-add-button:hover { transform: translateY(-2px); }
.add-icon {
    width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%;
    color: var(--primary); background: #fff; font-size: 21px; line-height: 1;
}
.sidebar-navigation { margin-top: 21px; }
.menu-label {
    margin: 0 10px 8px; color: #8799aa; font-size: 10px;
    font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
}
.menu-label-secondary { margin-top: 22px; }
.sidebar-menu {
    position: relative; min-height: 52px; margin-bottom: 5px; padding: 9px 12px;
    display: flex; align-items: center; gap: 12px; border-radius: 13px;
    color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none;
    transition: .2s;
}
.sidebar-menu:hover, .sidebar-menu.active { color: var(--primary-dark); background: var(--primary-soft); }
.sidebar-menu:hover { transform: translateX(3px); }
.sidebar-menu.active::before {
    content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px;
    background:var(--primary); border-radius:0 5px 5px 0;
}
.menu-icon {
    width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 10px; color: inherit; background: rgba(23,105,224,.07); font-size: 18px;
}
.sidebar-menu.active .menu-icon { color:#fff; background:var(--primary); }
.sidebar-help {
    margin-top: 24px; padding: 13px; display: grid;
    grid-template-columns: auto 1fr; gap: 9px;
    background: #f8fbff; border: 1px dashed #bcd6f5; border-radius: 15px;
}
.help-icon {
    grid-row: span 2; width: 37px; height: 37px; display:grid; place-items:center;
    color:#fff; background:var(--primary); border-radius:50%; font-weight:800;
}
.help-content { display:flex; flex-direction:column; gap:3px; }
.help-content strong { font-size:12px; }
.help-content span { color:var(--muted); font-size:10px; }
.help-button {
    grid-column:2; justify-self:start; padding:5px 11px; border-radius:8px;
    color:var(--primary); background:#fff; border:1px solid var(--primary);
    font-size:11px; font-weight:800; cursor:pointer;
}
.sidebar-overlay {
    position:fixed; inset:0; z-index:1090; visibility:hidden; opacity:0;
    background:rgba(9,28,47,.53); transition:.28s;
}

/* Content */
.main-content { flex:1; min-width:0; width:calc(100% - var(--sidebar-width)); padding:28px; }
.page-container { width:100%; max-width:1400px; margin:0 auto; }
.narrow-container { max-width:980px; }
.report-container { max-width:1100px; }
.page-header {
    margin-bottom:23px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.page-title { display:flex; flex-direction:column; gap:6px; }
.page-eyebrow {
    color:var(--primary); font-size:11px; font-weight:800;
    letter-spacing:.9px; text-transform:uppercase;
}
.page-title h1 { font-size:29px; line-height:1.25; font-weight:800; }
.page-title p { color:var(--muted); font-size:14px; }
.current-date {
    min-width:160px; padding:11px 15px; display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border); border-radius:14px; text-align:right;
}
.current-date span { color:var(--muted); font-size:11px; }
.current-date strong { color:var(--primary-dark); font-size:13px; }
.button-row, .page-actions { gap:9px; flex-wrap:wrap; }

/* Buttons */
.btn {
    min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-size:14px; font-weight:800; text-decoration:none; cursor:pointer; transition:.2s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow:0 6px 14px rgba(23,105,224,.18); }
.btn-secondary { color:var(--primary-dark); background:#fff; border-color:#bfd6ef; }
.btn-large { min-height:50px; padding:12px 20px; }
.btn-block { width:100%; }
.btn-icon {
    width:38px; height:38px; padding:0; display:inline-grid; place-items:center;
    color:var(--text); background:#fff; border:1px solid var(--border);
    border-radius:10px; text-decoration:none; font-size:14px; font-weight:800; cursor:pointer;
}
.btn-icon.primary { color:var(--primary); border-color:#b9d4f4; }
.btn-icon.danger { color:var(--danger); border-color:#f3c3c9; }
.icon-button {
    width:40px; height:40px; display:grid; place-items:center;
    color:var(--primary); background:var(--primary-soft); border:0; border-radius:11px; cursor:pointer;
}
.inline-form { display:inline; }

/* Cards/dashboard */
.panel-card, .summary-card, .action-card, .filter-card, .detail-card {
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}
.panel-card { padding:20px; margin-bottom:20px; }
.panel-header {
    margin-bottom:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:15px;
}
.panel-header h2, .section-heading h2 { font-size:18px; font-weight:800; }
.panel-header p, .section-heading p { margin-top:3px; color:var(--muted); font-size:12px; }
.summary-grid {
    margin-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.summary-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.summary-card { min-width:0; padding:19px; display:flex; align-items:flex-start; gap:13px; }
.summary-card-highlight { color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-color:transparent; }
.summary-card-danger { color:#fff; background:linear-gradient(135deg,#e25d69,#b93243); border-color:transparent; }
.summary-icon {
    width:47px; height:47px; flex:0 0 auto; display:grid; place-items:center;
    border-radius:14px; font-size:15px; font-weight:800;
}
.summary-icon-blue { color:var(--primary); background:var(--primary-soft); }
.summary-icon-green { color:var(--success); background:var(--success-soft); }
.summary-icon-red { color:var(--danger); background:var(--danger-soft); }
.summary-icon-warning { color:var(--warning); background:var(--warning-soft); }
.summary-icon-white { color:var(--primary); background:#fff; }
.summary-content { min-width:0; display:flex; flex-direction:column; }
.summary-content span { color:var(--muted); font-size:12px; font-weight:600; }
.summary-content strong { margin-top:6px; color:var(--text); font-size:20px; font-weight:800; letter-spacing:-.3px; }
.summary-content small { margin-top:4px; color:#8496a8; font-size:10px; }
.summary-card-highlight .summary-content span,.summary-card-highlight .summary-content small,
.summary-card-danger .summary-content span,.summary-card-danger .summary-content small { color:rgba(255,255,255,.78); }
.summary-card-highlight .summary-content strong,.summary-card-danger .summary-content strong { color:#fff; }
.quick-actions { margin-bottom:22px; }
.section-heading { margin-bottom:13px; display:flex; justify-content:space-between; gap:18px; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.action-card {
    min-height:92px; padding:17px 19px; display:flex; align-items:center; gap:13px;
    text-decoration:none; transition:.2s;
}
.action-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.action-symbol {
    width:51px; height:51px; flex:0 0 auto; display:grid; place-items:center;
    border-radius:15px; font-size:27px;
}
.action-income .action-symbol { color:var(--success); background:var(--success-soft); }
.action-expense .action-symbol { color:var(--danger); background:var(--danger-soft); }
.action-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.action-text strong { font-size:15px; font-weight:800; }
.action-text small { color:var(--muted); font-size:11px; }
.action-arrow { color:#9aacbc; font-size:27px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:16px; }
.text-link { color:var(--primary); font-size:12px; font-weight:800; text-decoration:none; }
.transaction-list { display:flex; flex-direction:column; }
.transaction-item {
    padding:13px 0; display:flex; align-items:center; gap:11px; border-bottom:1px solid #edf2f7;
}
.transaction-item:last-child { border-bottom:0; }
.transaction-badge {
    width:41px; height:41px; flex:0 0 auto; display:grid; place-items:center;
    border-radius:12px; font-size:19px; font-weight:700;
}
.transaction-badge.income { color:var(--success); background:var(--success-soft); }
.transaction-badge.expense { color:var(--danger); background:var(--danger-soft); }
.transaction-badge.neutral { color:var(--primary); background:var(--primary-soft); }
.transaction-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.transaction-info strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.transaction-info span { color:var(--muted); font-size:10px; }
.transaction-amount { flex:0 0 auto; font-size:13px; }
.reminder-list { display:flex; flex-direction:column; gap:9px; }
.reminder-item {
    padding:13px; display:flex; align-items:center; gap:10px;
    background:#f8fbff; border:1px solid #deebf7; border-radius:13px; text-decoration:none;
}
.reminder-icon {
    width:37px; height:37px; flex:0 0 auto; display:grid; place-items:center;
    color:var(--warning); background:var(--warning-soft); border-radius:11px; font-weight:800;
}
.reminder-item > span:last-child { display:flex; flex-direction:column; gap:3px; }
.reminder-item strong { font-size:12px; }
.reminder-item small { color:var(--muted); font-size:10px; }

/* Forms */
.form-card { padding:24px; }
.form-stack { display:flex; flex-direction:column; gap:16px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.form-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-group, .field-group { display:flex; flex-direction:column; gap:7px; min-width:0; }
.form-group label, .field-group label { color:var(--text); font-size:13px; font-weight:700; }
.form-group label span, .field-group label span { color:var(--danger); }
.form-group label .optional { color:var(--muted); font-size:10px; font-weight:500; }
.form-span-two, .field-group.full { grid-column:1/-1; }
input, select, textarea {
    width:100%; min-height:48px; padding:11px 13px; color:var(--text);
    background:#fff; border:1px solid #cbdbea; border-radius:12px; outline:0;
    transition:border-color .2s, box-shadow .2s;
}
textarea { min-height:100px; resize:vertical; }
input:focus, select:focus, textarea:focus {
    border-color:var(--primary); box-shadow:0 0 0 4px rgba(23,105,224,.11);
}
.field-group small, .form-group small { color:var(--muted); font-size:10px; }
.form-actions {
    margin-top:21px; padding-top:18px; display:flex; justify-content:flex-end; gap:10px;
    border-top:1px solid #edf2f7;
}
.money-input, .money-field {
    display:flex; align-items:center; overflow:hidden; background:#fff;
    border:1px solid #cbdbea; border-radius:12px; transition:.2s;
}
.money-input:focus-within, .money-field:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(23,105,224,.11); }
.money-input span, .money-field span { padding:0 0 0 14px; color:var(--primary-dark); font-weight:800; }
.money-input input, .money-field input { border:0; box-shadow:none !important; }
.money-input-large { min-height:62px; }
.money-input-large input { min-height:60px; font-size:25px; font-weight:800; }
.type-choice-grid { margin-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.type-choice {
    position:relative; min-height:90px; padding:13px; display:flex; align-items:center; gap:10px;
    border:1px solid var(--border); border-radius:15px; cursor:pointer; transition:.2s;
}
.type-choice:hover, .type-choice.selected { border-color:var(--primary); background:var(--primary-pale); }
.type-choice input { position:absolute; opacity:0; pointer-events:none; }
.type-choice-icon {
    width:39px; height:39px; flex:0 0 auto; display:grid; place-items:center;
    color:var(--primary); background:var(--primary-soft); border-radius:11px; font-size:18px;
}
.type-choice > span:last-child { display:flex; flex-direction:column; gap:2px; }
.type-choice strong { font-size:12px; }
.type-choice small { color:var(--muted); font-size:9px; }
.transaction-target[hidden] { display:none !important; }
.choice-grid { display:grid; gap:12px; margin-bottom:21px; }
.choice-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-card {
    position:relative; min-height:92px; padding:14px; display:flex; align-items:center; gap:12px;
    border:1px solid var(--border); border-radius:15px; cursor:pointer;
}
.choice-card:has(input:checked), .choice-card.selected { border-color:var(--primary); background:var(--primary-pale); }
.choice-card input { position:absolute; opacity:0; }
.choice-symbol {
    width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
    border-radius:13px; font-size:23px;
}
.choice-symbol.income { color:var(--success); background:var(--success-soft); }
.choice-symbol.expense { color:var(--danger); background:var(--danger-soft); }
.choice-card > span:last-child { display:flex; flex-direction:column; gap:3px; }
.choice-card strong { font-size:13px; }
.choice-card small { color:var(--muted); font-size:10px; }
.accounting-note {
    margin-top:16px; padding:13px 15px; color:#365a78; background:#eff7ff;
    border-left:4px solid var(--primary); border-radius:10px; font-size:12px;
}
.password-wrap { position:relative; }
.password-wrap input { padding-right:68px; }
.password-toggle {
    position:absolute; right:7px; top:50%; transform:translateY(-50%);
    padding:7px 9px; color:var(--primary); background:var(--primary-soft);
    border:0; border-radius:8px; font-size:11px; font-weight:800; cursor:pointer;
}
.account-header { margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }

/* Filters/tables */
.filter-card, .period-filter { margin-bottom:18px; padding:15px; }
.filter-grid, .filter-bar, .period-filter {
    display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
}
.filter-grid { display:grid; grid-template-columns:2fr 1.2fr 1fr 1fr auto; }
.field-group.compact { min-width:155px; flex:1; }
.field-group.compact input,.field-group.compact select { min-height:44px; }
.filter-button { align-self:end; }
.responsive-table { width:100%; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
    padding:11px 12px; color:#708498; background:#f5f9fd;
    border-bottom:1px solid var(--border); font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.5px;
}
.data-table td { padding:13px 12px; border-bottom:1px solid #edf2f7; font-size:12px; vertical-align:middle; }
.data-table tbody tr:hover { background:#fbfdff; }
.data-table td strong { font-size:12px; }
.table-note { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.table-actions { display:flex; align-items:center; gap:6px; }
.amount-cell { font-weight:800; white-space:nowrap; }
.badge, .status-badge, .balanced-badge {
    display:inline-flex; align-items:center; min-height:25px; padding:4px 8px;
    border-radius:999px; font-size:9px; font-weight:800; white-space:nowrap;
}
.badge-success, .status-paid { color:#08774a; background:var(--success-soft); }
.badge-danger { color:#b53242; background:var(--danger-soft); }
.badge-warning, .status-partial { color:#925800; background:var(--warning-soft); }
.badge-neutral, .status-unpaid { color:#526b80; background:#edf2f6; }
.balanced-badge { color:#08774a; background:var(--success-soft); }
.empty-state { padding:42px 18px; text-align:center; }
.empty-state h2 { margin-top:8px; font-size:17px; }
.empty-state p { margin-top:4px; color:var(--muted); font-size:12px; }
.empty-icon { width:55px; height:55px; margin:0 auto; display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); border-radius:50%; font-size:24px; }
.compact-empty { padding:20px; }

/* Alerts/toasts */
.alert {
    margin-bottom:17px; padding:13px 15px; border:1px solid transparent;
    border-radius:12px; font-size:12px;
}
.alert ul { margin-top:6px; }
.alert-error { color:#8d2633; background:var(--danger-soft); border-color:#f2c4ca; }
.alert-success { color:#086e45; background:var(--success-soft); border-color:#bce8d4; }
.alert-info { color:#215f97; background:var(--primary-soft); border-color:#bfd9f7; }
.toast-stack { position:fixed; top:90px; right:18px; z-index:2000; width:min(370px,calc(100vw - 28px)); display:flex; flex-direction:column; gap:9px; }
.toast {
    padding:13px 42px 13px 14px; position:relative; border-radius:13px;
    background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); font-size:12px;
    animation:toastIn .25s ease;
}
.toast-success { border-left:5px solid var(--success); }
.toast-error { border-left:5px solid var(--danger); }
.toast-info { border-left:5px solid var(--primary); }
.toast-close { position:absolute; right:7px; top:6px; width:29px; height:29px; border:0; background:transparent; cursor:pointer; font-size:18px; }
@keyframes toastIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* Detail */
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.detail-card { padding:21px; }
.detail-amount { margin:9px 0 18px; font-size:30px; font-weight:800; }
.detail-list, .info-list { display:flex; flex-direction:column; }
.detail-list > div, .info-list > div {
    padding:11px 0; display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #edf2f7;
}
.detail-list > div:last-child,.info-list > div:last-child { border-bottom:0; }
.detail-list span,.info-list span { color:var(--muted); font-size:11px; }
.detail-list strong,.info-list strong { font-size:11px; text-align:right; }

/* Reports */
.report-menu-grid { margin-bottom:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-menu-card {
    padding:17px; min-height:88px; display:flex; align-items:center; gap:13px;
    background:#fff; border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-sm); text-decoration:none; transition:.2s;
}
.report-menu-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.report-menu-icon {
    width:45px; height:45px; flex:0 0 auto; display:grid; place-items:center;
    color:var(--primary); background:var(--primary-soft); border-radius:13px; font-size:20px; font-weight:800;
}
.report-menu-card > span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:3px; }
.report-menu-card strong { font-size:14px; }
.report-menu-card small { color:var(--muted); font-size:10px; }
.report-menu-card b { color:#9aabbb; font-size:24px; }
.report-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.report-mini-grid > div { display:flex; flex-direction:column; gap:4px; }
.report-mini-grid span { color:var(--muted); font-size:11px; }
.report-mini-grid strong { font-size:20px; }
.report-mini-grid small { color:var(--muted); font-size:9px; }
.financial-report {
    padding:34px; background:#fff; border:1px solid var(--border);
    border-radius:18px; box-shadow:var(--shadow-sm);
}
.financial-report-header { padding-bottom:22px; margin-bottom:20px; text-align:center; border-bottom:2px solid var(--text); }
.financial-report-header h1 { font-size:21px; font-weight:800; }
.financial-report-header h2 { margin-top:3px; font-size:17px; }
.financial-report-header p { margin-top:5px; color:var(--muted); font-size:11px; }
.report-section { margin-bottom:24px; }
.report-section h3 { margin-bottom:7px; padding:8px 10px; background:#f2f7fc; border-radius:8px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.report-row { min-height:38px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #edf2f7; font-size:12px; }
.report-row > span:first-child { display:flex; align-items:center; gap:7px; }
.report-row small { min-width:42px; color:var(--muted); font-size:9px; }
.report-row.subtotal { margin-top:4px; border-top:1px solid var(--text); border-bottom:3px double var(--text); }
.report-row.muted { color:var(--muted); }
.report-result {
    padding:16px; display:flex; justify-content:space-between; gap:18px;
    border-radius:12px; font-size:16px; font-weight:800;
}
.report-result.positive { color:#086f46; background:var(--success-soft); }
.report-result.negative { color:#912b39; background:var(--danger-soft); }
.report-footnote { margin-top:20px; color:var(--muted); font-size:9px; text-align:center; }
.balance-sheet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.report-warning { margin-top:16px; }

/* Profile */
.profile-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(290px,.65fr); gap:18px; align-items:start; }
.password-card { position:sticky; top:calc(var(--header-height) + 20px); }

/* Auth */
.auth-body { background:#edf5ff; }
.auth-shell {
    width:100%; min-height:100vh; display:grid; grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);
}
.auth-shell-wide { grid-template-columns:minmax(320px,.75fr) minmax(480px,1.25fr); }
.auth-intro {
    position:relative; padding:48px; display:flex; flex-direction:column; justify-content:space-between;
    color:#fff; background:
      radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 25%),
      linear-gradient(145deg,var(--primary),var(--primary-dark));
}
.auth-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.auth-brand img { width:52px; height:52px; border-radius:15px; box-shadow:0 8px 18px rgba(0,0,0,.15); }
.auth-brand span { display:flex; flex-direction:column; }
.auth-brand strong { font-size:17px; }
.auth-brand small { color:rgba(255,255,255,.72); font-size:10px; }
.auth-copy { max-width:520px; padding:60px 0; }
.auth-kicker {
    display:inline-flex; padding:6px 10px; margin-bottom:15px;
    background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
    border-radius:999px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px;
}
.auth-copy h1 { font-size:36px; line-height:1.2; }
.auth-copy p { margin-top:14px; color:rgba(255,255,255,.78); font-size:14px; line-height:1.8; }
.auth-benefits { margin-top:20px; display:flex; flex-direction:column; gap:8px; list-style:none; padding:0; }
.auth-benefits li { font-size:12px; }
.auth-watermark { color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.5px; }
.auth-card {
    width:min(570px,calc(100% - 44px)); margin:auto; padding:32px;
    background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow);
}
.auth-card-header { margin-bottom:20px; }
.auth-card-header h2 { font-size:24px; }
.auth-card-header p { margin-top:5px; color:var(--muted); font-size:12px; }
.auth-switch { margin-top:18px; color:var(--muted); font-size:12px; text-align:center; }
.auth-switch a { color:var(--primary); font-weight:800; }

/* Footer/mobile nav/modal */
.app-footer { padding:18px 24px; background:#fff; border-top:1px solid var(--border); }
.footer-container { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-info,.footer-watermark { display:flex; flex-direction:column; gap:3px; }
.footer-info strong { color:var(--primary-dark); font-size:13px; }
.footer-info span { color:var(--muted); font-size:10px; }
.footer-watermark { align-items:flex-end; text-align:right; }
.watermark-label { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.footer-watermark strong { color:var(--primary); font-size:12px; }
.footer-watermark small { color:#8799aa; font-size:9px; }
.mobile-navbar { display:none; }
.help-modal {
    position:fixed; inset:0; z-index:2500; padding:20px; display:none; place-items:center;
    background:rgba(9,28,47,.57);
}
.help-modal.open { display:grid; }
.help-modal-card { position:relative; width:min(480px,100%); padding:26px; background:#fff; border-radius:18px; box-shadow:var(--shadow); }
.help-modal-card h2 { margin:7px 0 14px; font-size:20px; }
.help-modal-card ol { display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:12px; }
.modal-close {
    position:absolute; right:12px; top:12px; width:36px; height:36px;
    border:0; border-radius:10px; background:var(--primary-soft); color:var(--primary); font-size:22px; cursor:pointer;
}

/* ==================================================
   AUTH LOGIN PROFESIONAL + PEMULIHAN KATA SANDI
================================================== */

.auth-login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 8%, rgba(23, 105, 224, .09), transparent 26%),
        #f3f7fc;
}

.auth-shell-login {
    grid-template-columns: minmax(330px, .88fr) minmax(430px, 1.12fr);
}

.auth-intro-login {
    min-height: 100vh;
    padding: clamp(34px, 4vw, 56px);
    overflow: hidden;
}

.auth-intro-login::before,
.auth-intro-login::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.auth-intro-login::before {
    width: 310px;
    height: 310px;
    right: -125px;
    bottom: 8%;
}

.auth-intro-login::after {
    width: 170px;
    height: 170px;
    right: 34px;
    bottom: 16%;
}

.auth-copy-login {
    max-width: 485px;
    padding: clamp(54px, 11vh, 110px) 0 28px;
}

.auth-copy-login h1 {
    max-width: 450px;
    font-size: clamp(31px, 3.2vw, 46px);
    letter-spacing: -1.25px;
}

.auth-feature-list {
    display: grid;
    gap: 11px;
    margin-top: 26px;
}

.auth-feature-list > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-feature-list > div > span {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    color: var(--primary-dark);
    background: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.auth-feature-list p {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.auth-feature-list strong {
    color: #fff;
    font-size: 12px;
}

.auth-feature-list small {
    color: rgba(255, 255, 255, .70);
    font-size: 10px;
    line-height: 1.55;
}

.auth-form-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 32px 22px;
}

.auth-card-login {
    width: min(440px, 100%);
    margin: 0;
    padding: 28px 30px 25px;
    border-color: rgba(210, 224, 239, .88);
    border-radius: 20px;
    box-shadow:
        0 22px 60px rgba(31, 73, 117, .12),
        0 3px 9px rgba(31, 73, 117, .05);
}

.auth-card-recovery {
    width: min(455px, 100%);
}

.auth-card-mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    color: var(--primary);
    background: linear-gradient(145deg, #eef6ff, #e2efff);
    border: 1px solid #d3e5fb;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(23, 105, 224, .11);
}

.auth-card-mark svg {
    width: 25px;
    height: 25px;
}

.auth-card-header-center {
    margin-bottom: 20px;
    text-align: center;
}

.auth-card-header-center h2 {
    margin-top: 5px;
    color: var(--text);
    font-size: 23px;
    letter-spacing: -.45px;
}

.auth-card-header-center p {
    max-width: 330px;
    margin: 6px auto 0;
    line-height: 1.6;
}

.auth-card-eyebrow {
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.auth-form {
    gap: 16px;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.forgot-link,
.auth-back-link {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.forgot-link:hover,
.auth-back-link:hover {
    text-decoration: underline;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 17px;
    color: var(--muted);
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap input {
    min-height: 49px;
    padding-left: 45px;
    background: #fbfdff;
    border-color: #d9e5f0;
}

.auth-input-wrap input::placeholder {
    color: #a3b3c2;
}

.auth-input-wrap input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(23, 105, 224, .09);
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: #7891a8;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input-icon svg {
    width: 18px;
    height: 18px;
}

.auth-input-wrap.password-wrap input {
    padding-right: 77px;
}

.auth-input-wrap .password-toggle {
    right: 9px;
    min-width: 55px;
    height: 33px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 9px;
}

.auth-submit {
    min-height: 49px;
    margin-top: 2px;
    gap: 9px;
    border-radius: 12px;
    box-shadow: 0 9px 21px rgba(23, 105, 224, .21);
}

.auth-submit span {
    font-size: 17px;
    transition: transform .2s ease;
}

.auth-submit:hover span {
    transform: translateX(3px);
}

.auth-divider {
    position: relative;
    margin: 19px 0 15px;
    color: #96a7b7;
    font-size: 9px;
    text-align: center;
}

.auth-divider::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: #e7eef5;
    content: "";
}

.auth-divider span {
    position: relative;
    padding: 0 10px;
    background: #fff;
}

.auth-card-login .auth-switch {
    margin-top: 0;
}

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    color: #7d91a4;
    font-size: 9px;
}

.auth-security-note > span {
    color: var(--success);
    font-weight: 900;
}

.auth-help-text {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.65;
    text-align: center;
}

.local-reset-box {
    margin-bottom: 16px;
    padding: 13px 14px;
    color: #72510d;
    background: #fff8e5;
    border: 1px solid #f2d68e;
    border-radius: 12px;
}

.local-reset-box strong {
    display: block;
    font-size: 11px;
}

.local-reset-box p {
    margin: 4px 0 7px;
    font-size: 9px;
    line-height: 1.55;
}

.local-reset-box a {
    color: #8a5d00;
    font-size: 10px;
    font-weight: 900;
}

.password-requirements {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: -5px;
    color: var(--muted);
    font-size: 9px;
}

.password-requirements span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--success);
    background: var(--success-soft);
    border-radius: 50%;
    font-weight: 900;
}