* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #f4f6f8; color: #1d2733; }
header { background: #0f3557; color: #fff; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
header h1 { font-size: 20px; margin: 0; flex: 1; }
.tabs { display: flex; gap: 6px; }
.tab { background: transparent; color: #cdd9e5; border: 1px solid #3a5a7c; border-radius: 6px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.tab.active { background: #fff; color: #0f3557; font-weight: 600; border-color: #fff; }
.badge { background: #b45309; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.demo { background: #b45309; color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 14px; }
.hidden { display: none !important; }
main { max-width: 980px; margin: 24px auto; padding: 0 16px; display: grid; gap: 20px; }
section { display: grid; gap: 20px; }
.controls { display: flex; gap: 8px; }
.controls select { font-size: 15px; padding: 6px 10px; border-radius: 6px; border: 1px solid #d4dde5; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kpi-label { font-size: 14px; color: #5b6b7c; }
.kpi-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.panel { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.panel h2 { font-size: 17px; margin: 0 0 12px; }
.note { font-size: 13px; color: #5b6b7c; margin: 10px 0 0; }
.notice { background: #fde6c8; color: #7c4a03; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.bar-track { background: #eef2f5; border-radius: 5px; height: 18px; }
.bar-fill { background: #0f3557; height: 18px; border-radius: 5px; }
.bar-val { text-align: left; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 8px 6px; border-bottom: 1px solid #eef2f5; }
td.num, th:last-child { text-align: left; font-variant-numeric: tabular-nums; }
tr.confirmed td { color: #8a94a0; }
tr.candidate td { background: #fff9f0; }
tr.income td.amount { color: #166534; font-weight: 600; }
td.amount { font-weight: 600; }
ul#accounts { margin: 0; padding: 0; list-style: none; font-size: 14px; }
ul#accounts li { padding: 8px 0; border-bottom: 1px solid #eef2f5; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; border-radius: 4px; padding: 1px 7px; background: #eef2f5; color: #5b6b7c; }
.tag.demo-tag { background: #fde6c8; color: #b45309; }
.tag.err { background: #f8d7da; color: #842029; }
button { font-family: inherit; font-size: 14px; border-radius: 6px; border: 1px solid #0f3557; background: #0f3557; color: #fff; padding: 7px 14px; cursor: pointer; }
button.secondary { background: #fff; color: #0f3557; }
button.small { padding: 3px 10px; font-size: 13px; }
.sync-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.log { background: #0d1b26; color: #b8e0b8; border-radius: 8px; padding: 12px; font-size: 12px; max-height: 220px; overflow: auto; white-space: pre-wrap; direction: ltr; text-align: left; }
.cred-form { border: 1px solid #e3e9ee; border-radius: 8px; padding: 12px; margin: 10px 0; }
.cred-form h3 { margin: 0 0 8px; font-size: 15px; }
.cred-form input { display: block; width: 100%; margin: 6px 0; padding: 7px 10px; border: 1px solid #d4dde5; border-radius: 6px; font-size: 14px; }
.login { position: fixed; inset: 0; background: rgba(15,53,87,.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.login-box { background: #fff; border-radius: 12px; padding: 24px; width: min(380px, 90vw); }
.login-box h2 { margin-top: 0; font-size: 18px; }
.login-box input { width: 100%; padding: 9px 12px; border: 1px solid #d4dde5; border-radius: 6px; font-size: 15px; margin: 10px 0; }
.error { color: #842029; font-size: 13px; }
code { background: #eef2f5; border-radius: 4px; padding: 1px 6px; font-size: 12px; }