*{box-sizing:border-box}:root{--bg:#f4f6f8;--card:#fff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--primary:#111827;--ok:#047857;--danger:#b91c1c;--warn:#b45309;--radius:20px;--shadow:0 12px 30px rgba(17,24,39,.08)}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}.hidden{display:none!important}.screen{min-height:100vh;display:grid;place-items:center;padding:18px}.loader{width:38px;height:38px;border:4px solid #d1d5db;border-top-color:#111827;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{to{transform:rotate(360deg)}}.auth-card,.card,.metric,.item-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.auth-card{width:min(440px,100%);padding:24px}.auth-card h1{font-size:32px;margin:0 0 8px}.auth-card p,.hint{color:var(--muted);line-height:1.45}.app{max-width:1080px;margin:0 auto;padding:16px 16px 46px}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;background:linear-gradient(to bottom,var(--bg) 80%,rgba(244,246,248,0))}.topbar h1{font-size:28px;margin:0}.topbar p{margin:4px 0 0;color:var(--muted)}h2{font-size:19px;margin:0 0 14px}.form{padding:18px;margin-bottom:16px}label{display:block;font-weight:800;font-size:13px;margin-bottom:12px}input,select,textarea{width:100%;min-height:46px;margin-top:7px;border:1px solid #d1d5db;border-radius:14px;padding:11px 12px;background:#fff;color:var(--text);font-size:16px}input:focus,select:focus{outline:2px solid #111827}.btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;min-height:44px;padding:10px 14px;font-weight:900;cursor:pointer}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.small{min-height:36px;padding:8px 10px;font-size:13px}.btn.danger{color:var(--danger);background:#fff5f5;border-color:#fecaca}.actions{display:flex;gap:10px}.actions .btn.primary{flex:1}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 16px}.metric{padding:16px}.metric span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.metric b{font-size:22px}.metric.ok b{color:var(--ok)}.metric.danger b{color:var(--danger)}.metric.warnm b{color:var(--warn)}.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;background:#e5e7eb;padding:6px;border-radius:17px;margin:12px 0 16px}.tab{border:0;background:transparent;border-radius:14px;padding:12px 8px;font-weight:900;color:#4b5563}.tab.active{background:#fff;color:#111827;box-shadow:0 7px 18px rgba(17,24,39,.08)}.tab-panel{display:none}.tab-panel.active{display:block}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.list{display:grid;gap:10px}.item-card{padding:15px}.row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.title{font-weight:950}.sub{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.35}.amount{text-align:right;white-space:nowrap}.amount b{display:block;font-size:17px}.badge{display:inline-flex;margin-top:7px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;background:#f3f4f6}.badge.ok{background:#d1fae5;color:var(--ok)}.badge.warn{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:var(--danger)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 12px}.box{background:#f9fafb;border:1px dashed #d1d5db;border-radius:16px;padding:12px;margin-bottom:12px}.empty{text-align:center;color:var(--muted);padding:24px;border:1px dashed #d1d5db;background:#fff;border-radius:var(--radius)}.warn{margin-top:12px;background:#fef3c7;color:#92400e;padding:12px;border-radius:14px}.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%) translateY(20px);opacity:0;background:#111827;color:#fff;padding:12px 16px;border-radius:999px;font-weight:900;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.chip{border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#f9fafb;font-weight:800}.chat{display:grid;gap:10px;max-height:360px;overflow:auto;margin:12px 0}.msg{padding:12px 14px;border-radius:16px;background:#f9fafb;border:1px solid var(--line)}.msg.user{background:#111827;color:#fff;margin-left:20px}.msg.ai{margin-right:20px}.ai-input{display:grid;grid-template-columns:1fr auto;gap:8px}.draft{border:1px solid #fde68a;background:#fffbeb;border-radius:16px;padding:12px;margin:12px 0}.compact .item-card{box-shadow:none}.child{margin-top:9px;padding:12px;background:#f9fafb;border:1px solid var(--line);border-radius:14px}.group{border-left:5px solid #111827}@media(max-width:820px){.app{padding:14px}.summary-grid{grid-template-columns:1fr 1fr}.tabs{grid-template-columns:1fr 1fr 1fr}.two{grid-template-columns:1fr;gap:0}.row{flex-direction:column}.amount{text-align:left}.topbar h1{font-size:24px}.ai-input{grid-template-columns:1fr}}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal-card{width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 24px 80px rgba(17,24,39,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 0}
.payment-history{margin-top:10px;padding:10px;background:#f9fafb;border:1px solid var(--line);border-radius:14px}
.payment-history .sub{margin:0 0 5px}

.metric.clickable{cursor:pointer;transition:.15s ease}.metric.clickable:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(17,24,39,.12)}
.chart-list{display:grid;gap:10px;margin-bottom:12px}.bar-row{display:grid;gap:6px}.bar-head{display:flex;justify-content:space-between;gap:10px;font-weight:800}.bar-track{height:14px;background:#eef2f7;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:#111827;border-radius:999px;min-width:3px}.bar-fill.ok{background:#047857}.bar-fill.warn{background:#b45309}.bar-fill.danger{background:#b91c1c}.bar-sub{color:var(--muted);font-size:12px}.modal-card .list{padding-bottom:18px}

/* ===== Report + cache-fix package styles ===== */
.metric{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.metric:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(17,24,39,.12)}

.report-page{display:grid;gap:14px}
.report-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.report-header h2{font-size:26px;margin:0}
.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.report-kpi{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:18px}
.report-kpi span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.report-kpi b{font-size:24px}
.report-kpi small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.report-kpi.blue b{color:#111827}.report-kpi.green b{color:#047857}.report-kpi.orange b{color:#ea580c}.report-kpi.purple b{color:#7e22ce}

.report-grid-top{display:grid;grid-template-columns:1fr 2.15fr;gap:12px}
.report-grid-bottom{display:grid;grid-template-columns:1.25fr 1.05fr .95fr;gap:12px}
.report-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:16px;min-width:0}
.report-card h3{font-size:16px;margin:0 0 14px}
.report-side{display:grid;gap:12px}

.donut-wrap{display:flex;align-items:center;gap:18px}
.css-donut{--paid:0%;width:220px;height:220px;border-radius:50%;background:conic-gradient(#22c55e 0 var(--paid), #fb923c var(--paid) 100%);display:grid;place-items:center;flex:none}
.css-donut::before{content:"";position:absolute}
.css-donut>div{width:106px;height:106px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;padding:12px;box-shadow:inset 0 0 0 1px #e5e7eb}
.css-donut span{font-size:12px;color:var(--muted)}
.css-donut b{font-size:15px}
.small-donut{width:132px;height:132px;background:conic-gradient(#22c55e 0 var(--p1), #2563eb var(--p1) var(--p2), #fb923c var(--p2) 100%)}
.small-donut>div{width:58px;height:58px}
.donut-legend{display:grid;gap:14px;min-width:180px}
.donut-legend div{display:grid;grid-template-columns:auto 1fr;gap:5px 8px;align-items:center}
.donut-legend b{grid-column:2;font-size:18px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.paid{background:#22c55e}.dot.remain{background:#fb923c}.dot.blue{background:#2563eb}

.chart-bars{display:grid;gap:10px}
.chart-bars.horizontal .bar-row{display:grid;grid-template-columns:minmax(90px,160px) 1fr auto;align-items:center;gap:10px}
.chart-bars.horizontal .bar-label{font-size:12px;text-align:right;color:#111827}
.chart-bars.horizontal .bar-value{font-size:12px;font-weight:900;white-space:nowrap}
.bar-bg{height:14px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:999px}
.compact-bars .bar-row{grid-template-columns:minmax(90px,120px) 1fr auto!important}

.chart-bars.vertical{position:relative;display:flex;align-items:end;gap:12px;height:310px;padding:38px 10px 34px;border-left:1px solid #d1d5db;border-bottom:1px solid #d1d5db}
.vbar{height:var(--h);flex:1;min-width:32px;background:linear-gradient(180deg,#60a5fa,#2563eb);border-radius:8px 8px 0 0;position:relative}
.vbar .vlabel{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;white-space:nowrap}
.vbar .vmonth{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:11px;color:#111827;white-space:nowrap}
.avg-line{position:absolute;left:10px;right:10px;bottom:calc(34px + var(--avg));border-top:2px dashed #2563eb}
.avg-line span{position:absolute;right:0;top:-22px;color:#2563eb;font-size:12px;font-weight:900}

.rank-chart{display:grid;gap:9px}
.rank-row{display:grid;grid-template-columns:28px 1.1fr 1fr auto;align-items:center;gap:8px}
.rank-num{width:22px;height:22px;border-radius:50%;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.rank-name{font-size:12px;font-weight:800}
.rank-value{font-size:12px;font-weight:900;white-space:nowrap}
.report-list{margin-top:12px;max-height:280px;overflow:auto}
.report-list .item-card{box-shadow:none;padding:12px}

.insight{background:#eff6ff;border-color:#bfdbfe}
.insight-row{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed #bfdbfe}
.insight-row:last-child{border-bottom:0}
.insight-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dbeafe}
.insight-row b{color:#2563eb}

@media(max-width:920px){
  .report-kpis{grid-template-columns:1fr 1fr}
  .report-grid-top,.report-grid-bottom{grid-template-columns:1fr}
  .donut-wrap{flex-direction:column;align-items:flex-start}
  .chart-bars.vertical{overflow-x:auto}
}

/* Sync + Planned Works */
.summary-grid{grid-template-columns:repeat(5,1fr)}
.metric.nextm b{color:#7e22ce}
.planned-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;background:#eef2ff;color:#3730a3}
.planned-status.pending{background:#fef3c7;color:#92400e}
.planned-status.priced{background:#dbeafe;color:#1d4ed8}
.planned-status.converted{background:#d1fae5;color:#047857}
.planned-status.cancelled{background:#fee2e2;color:#b91c1c}
.planned-status.done{background:#e5e7eb;color:#374151}
@media(max-width:920px){.summary-grid{grid-template-columns:1fr 1fr}.summary-grid .metric:nth-child(5){grid-column:1/-1}}

/* Next month card fix */
.metric.nextm b{color:#7e22ce}
.summary-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:920px){.summary-grid{grid-template-columns:1fr 1fr}.summary-grid .metric:nth-child(5){grid-column:1/-1}}

/* Click/auth/share fix */
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.compact-auth{box-shadow:none;border:0;padding:0;margin-top:8px}
.top-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.metric.clickable{cursor:pointer}
.metric.clickable *{pointer-events:none}
.tab *,.btn *{pointer-events:none}

.mail-tx .title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mail-bank{display:inline-flex;padding:4px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:900}
.mail-status{display:inline-flex;padding:4px 8px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:900}

/* Gmail date filter */
#gmailStartDate,#gmailSubjectQuery{background:#fff}