:root{font-family:Inter,"Noto Sans JP",system-ui,sans-serif;color:#20252d;background:#f5f7f8;line-height:1.5}*{box-sizing:border-box}body{margin:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;background:#fff;border-bottom:1px solid #e7eaed}.skip-link{position:absolute;left:8px;top:-48px;background:#204f4a;color:#fff;padding:9px 13px;border-radius:0 0 7px 7px;z-index:2}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}h1,h2,p{margin:0}h1{font-size:23px;letter-spacing:.02em}.eyebrow{font-size:10px;letter-spacing:.14em;color:#80909c;font-weight:700;margin-bottom:4px}.container{max-width:1180px;margin:34px auto;padding:0 24px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.card{background:#fff;border:1px solid #e7eaed;border-radius:14px;box-shadow:0 5px 18px #1e2d3810}.metric{padding:19px 20px;display:flex;flex-direction:column;gap:4px}.metric span,.metric small{color:#788590;font-size:12px}.metric strong{font-size:26px;letter-spacing:.02em}.metric.accent{background:#204f4a;color:#fff}.metric.accent span,.metric.accent small{color:#c7e2dd}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.panel{padding:22px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.panel h2{font-size:17px}.muted{font-size:12px;color:#66747d}.bars{min-height:205px;display:flex;flex-direction:column;gap:11px}.bar-row{display:grid;grid-template-columns:105px 1fr 84px;align-items:center;gap:9px;font-size:12px}.bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:10px;background:#edf1f2;border-radius:10px;overflow:hidden}.bar-fill{height:100%;background:#50a79b;border-radius:10px}.bar-value{text-align:right;color:#596670}.asset-chart{display:block;border-bottom:0;padding:10px 3px 0}.asset-bar{flex:1;min-width:3px;background:#8bb8d0;border-radius:3px 3px 0 0;position:relative}.asset-bar:hover,.asset-bar:focus{background:transparent}.asset-bar:focus{outline:3px solid #204f4a;outline-offset:2px}.table-wrap{overflow:auto;max-height:470px}table{width:100%;border-collapse:collapse;font-size:13px}caption{caption-side:top;text-align:left}th{font-size:11px;color:#8a959d;text-align:left;font-weight:600}th,td{padding:12px 10px;border-bottom:1px solid #eef0f1}td:first-child,th:first-child{padding-left:2px}.right{text-align:right}.positive{color:#218b68}.negative{color:#c14e4e}.search,select{border:1px solid #dce2e4;border-radius:7px;padding:8px 10px;background:#fff;color:#44515a}.search:focus,select:focus{outline:3px solid #a7d8d0;outline-offset:1px}.import-button,.primary-button{cursor:pointer;background:#204f4a;color:#fff;padding:10px 15px;border-radius:8px;font-size:13px;font-weight:700;display:inline-block}.import-button input,.primary-button input{position:absolute;width:1px;height:1px;opacity:0}.import-button:focus-within,.primary-button:focus-within,.secondary-button:focus-within{outline:3px solid #a7d8d0;outline-offset:2px}.empty-state{text-align:center;padding:75px 24px;max-width:650px;margin:45px auto}.empty-icon{margin:0 auto 18px;width:56px;height:56px;border-radius:16px;background:#e2f0ed;color:#28766d;font-size:28px;display:grid;place-items:center;font-weight:700}.empty-state h2{font-size:22px;margin-bottom:9px}.empty-state p{color:#6f7d85;font-size:14px;margin:0 auto 24px;max-width:450px}.empty-state small{display:block;color:#98a1a6;margin-top:16px;font-size:11px}footer{text-align:center;color:#9aa4aa;font-size:11px;padding:25px} @media(max-width:800px){.summary-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:stretch;padding:18px 16px}.import-actions{flex-wrap:wrap}.container{padding:0 16px;margin-top:20px}.metric strong{font-size:21px}.panel{padding:17px}.bar-row{grid-template-columns:85px 1fr 75px}}
.import-actions{display:flex;gap:8px;align-items:center}.import-actions.center{justify-content:center}.secondary-button,.import-button,.primary-button{cursor:pointer}.secondary-button{background:#edf3f2;color:#286b64;padding:10px 15px;border-radius:8px;font-size:13px;font-weight:700;display:inline-block}.secondary-button input,.import-button input,.primary-button input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.secondary-button:focus-within,.import-button:focus-within,.primary-button:focus-within{outline:3px solid #204f4a;outline-offset:2px}
.import-controls{min-width:0}.data-notice{margin-top:8px;color:#596670;font-size:12px;text-align:right}
.trend-panel .panel-heading{gap:16px;flex-wrap:wrap;margin-bottom:16px;align-items:center}.trend-panel .panel-heading>label{display:flex;align-items:center;gap:8px;color:#66747d;font-size:12px}.trend-panel .panel-heading select{min-height:44px;max-width:100%;font:inherit}.trend-panel #trendNote{margin:0 0 16px;line-height:1.7}.trend-panel .history-navigation{margin-top:0}
 .trend-panel{margin-bottom:16px;min-width:0;overflow:hidden}.trend-legend{display:flex;gap:16px;align-items:center;margin:-7px 0 16px;color:#66747d;font-size:12px}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.income-dot{background:#50a79b}.expense-dot{background:#d47b7b}.balance-dot{background:#6b91c2}.monthly-trend{width:100%;max-width:100%;min-width:0;display:flex;gap:12px;min-height:265px;overflow-x:auto;padding:0 2px 4px;border-bottom:1px solid #dce2e4}.trend-month{display:flex;flex:1 0 72px;min-width:72px;flex-direction:column;justify-content:flex-end;gap:7px}.trend-label{text-align:center;color:#66747d;font-size:11px}.trend-bars{height:225px;display:flex;justify-content:center;align-items:flex-end;gap:4px}.trend-item{height:100%;display:flex;flex:1;min-width:18px;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.trend-track{height:calc(100% - 16px);width:100%;display:flex;align-items:flex-end;background:#f1f4f4;border-radius:4px 4px 0 0}.trend-bar{width:100%;min-height:0;border-radius:4px 4px 0 0}.income-bar{background:#50a79b}.expense-bar{background:#d47b7b}.balance-bar{background:#6b91c2}.trend-item span{color:#66747d;font-size:10px}.trend-value{max-width:100%;overflow-wrap:anywhere;text-align:center;white-space:normal;line-height:1.2}.monthly-trend-table-wrap{overflow-x:auto;margin-top:16px}.monthly-trend-table{width:100%;border-collapse:collapse;font-size:12px}.monthly-trend-table th,.monthly-trend-table td{padding:8px 10px;border-bottom:1px solid #e7eaed;text-align:right;overflow-wrap:anywhere}.monthly-trend-table th:first-child,.monthly-trend-table td:first-child{text-align:left;white-space:nowrap}.monthly-trend-table thead th{color:#66747d;font-weight:700}.monthly-trend-table .negative{color:#a33e48}.asset-meta{margin:-12px 0 8px}.asset-plot{height:205px;position:relative;padding:0 3px}.asset-bars{position:absolute;inset:10px 3px}.asset-bar{cursor:pointer;position:absolute;background:transparent;border-radius:3px;z-index:1;touch-action:manipulation}.asset-bar::before{content:"";position:absolute;left:0;right:0;height:max(2px,var(--asset-height));background:#8bb8d0;pointer-events:none}.asset-bar.positive::before{bottom:0;border-radius:3px 3px 0 0}.asset-bar.negative::before{top:0;border-radius:0 0 3px 3px}.asset-bar.negative{border-radius:0 0 3px 3px}.asset-bar:hover,.asset-bar:focus{background:transparent}.asset-bar:focus{outline:3px solid #204f4a;outline-offset:2px}.asset-zero-line{position:absolute;top:50%;left:3px;right:3px;border-top:1px solid #87969c;pointer-events:none}.asset-zero-line span{position:absolute;right:0;top:-19px;color:#66747d;font-size:10px}.asset-axis{position:absolute;left:3px;right:3px;bottom:-1px;display:flex;justify-content:space-between;color:#66747d;font-size:10px}
 .asset-bar{cursor:pointer}.asset-bar:focus-visible{outline:3px solid #204f4a;outline-offset:3px}
 .asset-zero-line{z-index:2}.asset-zero-line span{top:3px;padding:0 3px;border-radius:3px;background:#fff;line-height:1.4}
  .pagination{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;color:#66747d;font-size:12px}.pagination button{border:1px solid #dce2e4;background:#fff;color:#286b64;border-radius:7px;padding:7px 10px;cursor:pointer;font:inherit;font-weight:700;min-height:40px}.pagination button:disabled{cursor:not-allowed;opacity:.45}.page-input{width:64px;border:1px solid #dce2e4;border-radius:7px;padding:8px;color:#44515a}.page-input:focus{outline:3px solid #a7d8d0;outline-offset:1px}.search-control{display:flex;align-items:center;gap:6px}.clear-search{border:1px solid #dce2e4;background:#fff;color:#286b64;border-radius:7px;padding:8px 10px;cursor:pointer;font:inherit;font-size:12px;font-weight:700}.clear-search:focus{outline:3px solid #204f4a;outline-offset:2px}
.demo-badge{display:inline-block;vertical-align:middle;background:#e2f0ed;color:#28766d;border-radius:999px;padding:4px 8px;font-size:11px;letter-spacing:0;font-weight:700}.demo-badge[hidden],.demo-notice[hidden]{display:none}.demo-notice{max-width:1180px;margin:0 auto 16px;padding:11px 14px;border:1px solid #b9ddd6;border-radius:9px;background:#eff9f7;color:#286b64;font-size:12px}
.import-status{margin:-4px 0 16px;padding:11px 14px;border:1px solid #f0d39b;border-radius:9px;background:#fff8e9;color:#795b26;font-size:12px}
.import-status summary{cursor:pointer}.import-result-details{margin-top:8px;max-height:240px;overflow:auto;overflow-wrap:anywhere}
.import-progress{margin:-4px 0 8px;padding:8px 12px;border:1px solid #c7e2dd;border-radius:9px;background:#eef8f6;color:#286b64;font-size:12px}.cancel-import{margin-bottom:16px;border:0}.cancel-import[hidden]{display:none}
.secondary-button:disabled{cursor:not-allowed;opacity:.5}
@media(max-width:900px){
  .topbar{flex-direction:column;align-items:stretch}
  .data-notice{text-align:left}
  .topbar .import-actions{flex-wrap:wrap}
  .topbar .import-actions>*{flex:1 1 calc(50% - 8px);min-height:44px;text-align:center}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .topbar{flex-direction:column;align-items:stretch}
  .topbar .import-actions{flex-wrap:wrap}
  h1{font-size:20px}
  .metric{min-width:0}
  .metric strong{overflow-wrap:anywhere}.metric .money{max-width:100%;overflow-x:auto;white-space:nowrap;overflow-wrap:normal}
  .topbar .import-actions>*{flex:1 1 calc(50% - 8px);min-height:44px;text-align:center}
  .panel-heading{gap:12px;flex-wrap:wrap}
  .trend-panel .panel-heading>label{width:100%;flex-wrap:wrap}.trend-panel .panel-heading select{flex:1;min-width:0}
   .panel-heading>select,.panel-heading>.search,.search-control{width:100%;min-height:42px}.search-control .search{flex:1;min-width:0}
  .import-actions.center{flex-direction:column;align-items:stretch}
  .import-actions.center>*{width:100%;text-align:center;min-height:44px}
    .table-wrap{max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain}
   .pagination{justify-content:flex-start;gap:6px}.pagination>span:first-child{flex-basis:100%}.pagination button{flex:1 1 auto}.pagination label{display:flex;align-items:center;gap:4px}
  .table-wrap .right{white-space:nowrap}
 }
.asset-detail[hidden]{display:none}.asset-detail{margin-top:10px;padding:10px 12px;background:#f5f8f8;border-radius:8px;font-size:12px}.asset-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.asset-detail-close{padding:4px 8px;font-size:11px}.asset-detail dl{margin:6px 0 8px}.asset-detail dl div{display:flex;justify-content:space-between;gap:12px}.asset-detail dt,.asset-detail dd{margin:0}.asset-detail dd{font-weight:700}.asset-month-button{padding:6px 9px;font-size:11px;border:0}.asset-bar{border:0;padding:0}
  .trend-legend{flex-wrap:wrap}.trend-month{flex-basis:86px;min-width:86px}.trend-item{min-width:20px}.trend-track{position:relative;height:calc(100% - 32px);border-radius:4px}.trend-zero-line{position:absolute;top:50%;left:0;right:0;width:auto;height:0;border-top:1px solid #87969c;pointer-events:none;overflow:visible}.trend-bar{position:absolute;bottom:50%;width:100%;border-radius:4px 4px 0 0}.trend-bar[style*="top:50%"]{border-radius:0 0 4px 4px}.balance-positive{background:#6b91c2}.balance-negative{background:#c45d67}.trend-value{max-width:100%;overflow-wrap:anywhere;color:#66747d;font-size:10px;line-height:1.2;text-align:center;white-space:normal}
 @media(max-width:480px){
   .summary-grid{grid-template-columns:1fr}
   .monthly-trend-table th:not(:first-child),.monthly-trend-table td:not(:first-child){white-space:nowrap;overflow-wrap:normal}
   .trend-value,.bar-value{white-space:nowrap;overflow-wrap:normal}
 }
button:focus-visible,select:focus-visible,.search:focus-visible{outline:3px solid #204f4a;outline-offset:2px}
@media print{
  @page{margin:12mm}
  body{background:#fff;color:#000;font-size:10pt}
  .topbar{padding:0 0 10px;border-bottom:1px solid #888}
  .import-controls,.import-actions,.skip-link,footer,.demo-notice,.import-progress,.cancel-import,.import-status,.search-control,.panel-heading select{display:none!important}
  .pagination button{display:none}
  .trend-panel .panel-heading>label{display:none}
  .container{max-width:none;margin:12px 0;padding:0}
  .summary-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .card{box-shadow:none;border-color:#aaa;break-inside:avoid}
  .metric{padding:10px}
  .metric strong{font-size:18px}
  .metric.accent{background:#fff;color:#000}
  .metric.accent span,.metric.accent small{color:#333}
  .grid-2{grid-template-columns:1fr 1fr;gap:8px}
  .panel{padding:12px}
  .table-wrap,.monthly-trend-table-wrap{overflow:visible;max-height:none}
  table{width:100%;font-size:9pt}
  tr{break-inside:avoid}
  .monthly-trend{display:none}
}
 .history-navigation{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 12px}.history-navigation button{min-height:40px;padding:8px 12px;border:1px solid #dce2e4;border-radius:7px;background:#fff;color:#286b64;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.history-navigation button:disabled{cursor:not-allowed;opacity:.45}.history-navigation button:focus-visible{outline:3px solid #204f4a;outline-offset:2px}.asset-meta{margin:0 0 8px}.trend-legend{margin:0 0 16px}