#dashboard-charts-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
#spending-visualization { padding: 0 20px 12px; }
.spending-arcs { width: 100%; display: block; overflow: visible; }
.segment-name { font: 600 14px system-ui, sans-serif; fill: var(--text); }
.segment-value { font: 13px system-ui, sans-serif; fill: var(--text-muted); }
.radial-caption { font: 10px system-ui, sans-serif; fill: var(--text-muted); letter-spacing: .4px; }
.radial-total { font: 700 18px system-ui, sans-serif; fill: var(--text); letter-spacing: -.5px; }
.segment-connector { opacity: .45; }
.spending-segment:hover .segment-connector, .spending-segment:focus .segment-connector { stroke-width: 2; opacity: 1; }
.spending-segment:focus { outline: none; }
.spending-segment:focus .segment-name { text-decoration: underline; }
.spending-comparison { color: var(--text-muted); font-size: 12px; margin: 0 0 8px; }
.spending-mobile { display: none; }
.portfolio-mobile-values { display: none; }
.allocation-breakdown { margin-top: 10px; }
.allocation-breakdown summary { width: fit-content; min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--accent); font-size: 13px; }
.allocation-breakdown summary::before { content: '+'; font-size: 18px; }
.allocation-breakdown[open] summary::before { content: '−'; }
.allocation-data { border-top: 1px solid var(--border); }
.data-allocation-row { display: grid; grid-template-columns: minmax(0,1fr) auto 52px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; align-items: baseline; }
.data-allocation-row > :first-child { overflow-wrap: anywhere; }
.data-allocation-row > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
#portfolio-overview { display: block; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.portfolio-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); text-align: left; }
.portfolio-summary > :first-child { width: 100%; color: var(--text-muted) !important; font-size: 11px; }
#portfolio-total-value { margin: 0; font-size: clamp(28px,3vw,40px); letter-spacing: -1px; }
.portfolio-summary > .flex { margin: 0 0 0 auto; }
.portfolio-summary > .flex > div { background: transparent !important; border: 0 !important; padding: 0 12px; }
.allocation-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.allocation-title h3 { font-size: 15px; font-weight: 600; }
.allocation-title > span { color: var(--text-muted); font-size: 12px; }
.holding-treemap { height: 310px; position: relative; }
.holding-tile { position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 14px; border: 3px solid var(--surface); border-radius: 10px; color: var(--text); text-align: left; background: rgba(40, 127, 150, .12); overflow: hidden; transition: background .15s; }
.holding-tile:hover, .holding-tile:focus-visible { background: rgba(40, 127, 150, .22); outline: 2px solid var(--accent); outline-offset: -4px; }
.holding-name { font-size: 13px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.holding-tile strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.holding-weight { font-size: 11px; color: var(--text-muted); }
.holding-performance { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.holding-performance.loss { color: var(--negative); }
.holding-performance.gain { color: var(--positive); }
.with-performance .data-allocation-row { grid-template-columns: minmax(0,1fr) auto 52px minmax(120px,auto); }
.visual-empty { color: var(--text-muted); padding: 32px 0; }
#quick-add-launch { box-shadow: 0 4px 16px #0002; padding: 10px 16px; font-size: 13px; }
#portfolio-assets-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#portfolio-assets-list > div { margin: 0 !important; padding: 14px; }
#portfolio-assets-list > div > div > div:first-child { min-width: 0; overflow-wrap: anywhere; }
#portfolio-assets-list .text-right { flex-shrink: 0; margin-left: auto; }
@media (max-width: 1350px) {
  #dashboard-charts-grid { grid-template-columns: minmax(0,1fr); }
  .spending-arcs { max-width: 720px; margin: auto; }
}
@media (max-width: 768px) {
  .spending-arcs { display: none; }
  .mobile-spending-chart { display: block; width: min(100%, 280px); margin: 0 auto 20px; overflow: hidden; }
  .mobile-spending-chart .segment-connector, .mobile-spending-chart .segment-name, .mobile-spending-chart .segment-value { display: none; }
  .spending-mobile { display: block; }
  .visual-caption { color: var(--text-muted); font-size: 12px; }
  .mobile-spending-total { display: block; font-size: 28px; margin: 4px 0 20px; }
  .direct-category { display: grid; grid-template-columns: minmax(0,1fr) auto 42px; gap: 6px; font-size: 12px; margin-bottom: 16px; }
  .direct-category-name { font-weight: 600; overflow-wrap: anywhere; }
  .direct-category > strong { font-variant-numeric: tabular-nums; }
  .direct-category > span:nth-child(3) { color: var(--text-muted); text-align: right; }
  .direct-category-track { grid-column: 1/-1; height: 5px; background: var(--surface-muted); border-radius: 3px; overflow: hidden; }
  .direct-category-track > span { display: block; height: 100%; }
  #portfolio-overview { padding: 18px; }
  .portfolio-summary { gap: 12px; }
  .portfolio-summary > .flex { margin: 0; }
  .portfolio-summary > .flex > div { padding: 0 12px 0 0; }
  .allocation-title { flex-direction: column; gap: 4px; }
  .holding-treemap { height: 340px; }
  .holding-tile { min-width: 0 !important; padding: 8px; justify-content: center; }
  .holding-tile .holding-name { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .holding-tile strong, .holding-tile .holding-performance { display: none; }
  .holding-weight { font-size: 11px; }
  .portfolio-mobile-values { display: block; margin-top: 16px; }
  .portfolio-mobile-values .data-allocation-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
  .portfolio-mobile-values .data-allocation-row > :nth-child(3) { text-align: left; color: var(--text-muted); }
  .with-performance .data-allocation-row { grid-template-columns: minmax(0,1fr) auto; }
  #portfolio-assets-list { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { .holding-tile { transition: none; } }
.holding-treemap.is-list { height: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.holding-treemap.is-list .holding-tile { position: relative; inset: auto !important; width: 100% !important; height: auto !important; min-height: 145px; }
#subtab-budget-btn, #subtab-investments-btn { border-radius: 8px; box-shadow: none !important; }
#subtab-budget-btn[aria-selected="true"], #subtab-investments-btn[aria-selected="true"] { background: var(--surface) !important; color: var(--accent) !important; }
@media (max-width:768px) { .holding-treemap.is-list { grid-template-columns: minmax(0,1fr); } }


#dashboard-charts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
#dashboard-charts-grid .trend-surface { display: flex; flex-direction: column; height: var(--overview-card-height, 520px); }
.trend-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; padding: 0 24px 16px; }
.trend-summary > div > span, .trend-facts span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.trend-summary strong { display: block; font-size: clamp(24px,2.3vw,34px); letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.trend-summary p { font-size: 12px; color: var(--text-muted); }
#dashboard-charts-grid .trend-container { flex: 1; min-height: 120px; height: 120px; margin-bottom: 12px; }
#dashboard-charts-grid .trend-container canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.trend-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 24px 20px; border-top: 1px solid var(--border); }
.trend-facts strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.toko-sync-notice { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); background: var(--surface-muted); }
.toko-sync-notice a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; }
@media(max-width:1350px) {
  #dashboard-charts-grid { grid-template-columns: minmax(0,1fr); }
  #dashboard-charts-grid .trend-surface { min-height: 0; height: auto; }
  #dashboard-charts-grid .trend-container { flex: none; height: 260px; }
}
@media(max-width:768px) { .trend-summary, .trend-facts { padding-inline: 20px; } }

#calendar-grid { gap: 6px; }
#calendar-grid .calendar-day { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 68px; padding: 8px 2px; gap: 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); box-shadow: none; }
#calendar-grid .calendar-day:hover { background: var(--surface-muted); }
#calendar-grid .calendar-day[aria-pressed="true"] { border: 2px solid var(--accent); }
.calendar-number { display: grid; place-items: center; width: 30px; height: 30px; font-size: 14px; font-weight: 550; border-radius: 50%; }
.calendar-day[aria-current="date"] .calendar-number { background: var(--accent); color: var(--surface); font-weight: 700; }
.calendar-dots { display: flex; gap: 5px; height: 6px; }
.calendar-dots i { width: 5px; height: 5px; border-radius: 50%; }
.calendar-dots .income { background: var(--positive); }
.calendar-dots .expense { background: var(--negative); }
#cal-detail-content .calendar-transaction { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; margin: 0; align-items: start; }
.calendar-transaction > div { min-width: 0; }
.calendar-transaction > div strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.calendar-transaction > div span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.calendar-amount { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.calendar-amount.income { color: var(--positive); }
.calendar-amount.expense { color: var(--negative); }
.calendar-empty { padding: 24px 0; color: var(--text-muted); }
@media(max-width:480px) { .calendar-transaction { grid-template-columns: minmax(0,1fr) !important; } .calendar-amount { justify-self: end; } }