*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    :root {
      --bg:#0A0A0A; --panel:#141414; --surface:#1E1E1E; --surface2:#282828;
      --border:#2E2E2E; --border2:#3A3A3A;
      --accent:#A8FF78; --accent2:#12FF80; --dim:#0D2010;
      --text:#F0F0F0; --sub:#666; --sub2:#888;
      --red:#FF4545; --blue:#4DA3FF; --amber:#FFB347;
      --income:#A8FF78; --expense:#FF6B6B; --asset:#FFB347;
      --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
      --mono:'DM Mono',monospace;
      --sans:'Zen Kaku Gothic New',-apple-system,'Hiragino Sans',sans-serif;
      --m-cat-row-height:84px;
    }
    html,body { height:100%; width:100%; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; overflow-x:hidden; }

    /* 笊絶武笊・TYPE TABS 笊絶武笊・*/
    .type-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0; }
    .type-tab {
      flex:1; background:none; border:none; border-bottom:2.5px solid transparent;
      color:var(--sub2); font-family:var(--sans); font-size:12px; font-weight:700;
      padding:9px 4px; cursor:pointer; transition:all 0.15s; text-align:center;
    }
    .type-tab:hover { color:var(--text); }
    .type-tab.on[data-type="支出"]   { color:var(--expense); border-bottom-color:var(--expense); }
    .type-tab.on[data-type="収入"]   { color:var(--income);  border-bottom-color:var(--income); }
    .type-tab.on[data-type="貯蓄"] { color:var(--asset); border-bottom-color:var(--asset); }
    .type-tab.on[data-type="振替"] { color:var(--blue); border-bottom-color:var(--blue); }

    /* 笊絶武笊・AMOUNT COLORS 笊絶武笊・*/
    .income-color  { color:var(--income) !important; }
    .expense-color { color:var(--expense) !important; }
    .asset-color   { color:var(--asset) !important; }

    /* 笊絶武笊・DESKTOP LAYOUT 笊絶武笊・*/
    #app-desktop { display:none; height:100dvh; flex-direction:column; }
    .db-topbar {
      display:flex; align-items:center; justify-content:space-between;
      padding:0 24px; height:50px; background:var(--panel);
      border-bottom:1px solid var(--border); flex-shrink:0;
    }
    .db-logo { font-family:var(--mono); font-size:13px; letter-spacing:2px; color:var(--accent); text-transform:uppercase; }
    .db-nav { display:flex; gap:4px; }
    .db-nav-btn { background:none; border:none; color:var(--sub2); font-family:var(--sans); font-size:13px; font-weight:500; padding:6px 14px; border-radius:8px; cursor:pointer; transition:all 0.15s; }
    .db-nav-btn:hover { background:var(--surface); color:var(--text); }
    .db-nav-btn.on { background:var(--surface); color:var(--accent); }
    #db-entry-view { flex:1; display:grid; grid-template-columns:3fr 4fr 3fr; overflow:hidden; }
    .db-col { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); }
    .db-col:last-child { border-right:none; }
    .col-head { padding:12px 20px 10px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; position:relative; }
    .col-title { font-size:10px; font-weight:700; color:var(--sub); letter-spacing:1.8px; text-transform:uppercase; }

    /* LEFT COL */
    .amount-section { padding:20px 22px 8px; flex-shrink:0; }
    .amount-yen { font-family:var(--mono); font-size:11px; color:var(--sub); letter-spacing:1.5px; margin-bottom:2px; }
    .amount-val { font-family:var(--mono); font-size:72px; font-weight:500; letter-spacing:-4px; line-height:1; color:var(--sub); transition:color 0.2s; min-height:74px; }
    .amount-val.has-val { color:var(--accent); }
    .assist-wrap { padding:6px 22px 0; min-height:32px; flex-shrink:0; }
    .assist-chips { display:flex; gap:6px; flex-wrap:wrap; }
    .chip { background:var(--dim); border:1px solid rgba(168,255,120,0.25); color:var(--accent); border-radius:20px; padding:4px 12px; font-size:12px; font-family:var(--mono); font-weight:500; cursor:pointer; transition:background 0.15s; }
    .chip:hover { background:rgba(168,255,120,0.15); }
    .numpad-wrap { padding:12px 22px; flex:1; }
    .numpad-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:7px; height:100%; }
    .nk { background:var(--surface); border:1px solid var(--border); border-radius:12px; font-family:var(--mono); font-size:20px; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.1s; user-select:none; }
    .nk:hover { background:var(--surface2); border-color:var(--border2); }
    .nk:active { transform:scale(0.93); }
    .nk.del { font-size:16px; color:var(--sub2); }
    .nk.go { background:var(--accent); border-color:transparent; color:#0A0A0A; font-family:var(--sans); font-size:12px; font-weight:700; }
    .nk.go:hover { background:var(--accent2); }
    .nk.go.locked { background:var(--surface); border-color:var(--border); color:var(--sub); pointer-events:none; }
    .dt-section { padding:0 22px 18px; flex-shrink:0; border-top:1px solid var(--border); padding-top:14px; }
    .dt-label { font-size:10px; font-weight:700; color:var(--sub); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
    .dt-display { font-family:var(--mono); font-size:17px; color:var(--text); margin-bottom:10px; padding:12px 14px; background:var(--surface); border-radius:12px; border:1px solid var(--border); cursor:pointer; transition:border-color 0.15s; display:flex; align-items:center; justify-content:space-between; letter-spacing:-0.3px; }
    .dt-display:hover { border-color:var(--border2); }
    .dt-display .edit-icon { font-size:12px; color:var(--sub); margin-left:8px; flex-shrink:0; }
    .dt-inputs { display:none; flex-direction:column; gap:7px; }
    .dt-inputs.open { display:flex; }
    .dt-input { background:var(--surface); border:1.5px solid var(--accent); border-radius:10px; padding:11px 14px; font-family:var(--mono); font-size:16px; color:var(--text); width:100%; outline:none; caret-color:var(--accent); }
    .dt-input::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.4); cursor:pointer; }
    .dt-confirm { background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:9px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--sub2); cursor:pointer; transition:all 0.15s; text-align:center; }
    .dt-confirm:hover { color:var(--text); }

    /* MIDDLE COL */
    .cat-scroll { flex:1; overflow-y:auto; padding:12px; }
    .cat-grid-desktop { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
    .cat-btn { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.18s ease, background 0.18s ease, min-height 0.22s cubic-bezier(0.22,1,0.36,1), padding 0.22s cubic-bezier(0.22,1,0.36,1); min-height:68px; will-change:transform; }
    .cat-btn:hover { border-color:var(--accent); background:var(--dim); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.18); }
    .cat-btn:active { transform:scale(0.97); }
    .cat-btn.selected { border-color:var(--accent); background:var(--dim); }
    .cat-emoji { font-size:22px; }
    .cat-name { font-size:11px; font-weight:700; color:var(--text); text-align:center; line-height:1.2; white-space:nowrap; }
    .cat-name.sm { font-size:9.5px; white-space:normal; }

    /* RIGHT COL */
    .right-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:18px; }
    .field-label { font-size:10px; font-weight:700; color:var(--sub); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
    .tag-row { display:flex; gap:6px; }
    .tag-btn { flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:9px 4px; font-size:11px; font-weight:700; font-family:var(--sans); color:var(--sub2); cursor:pointer; transition:all 0.15s; text-align:center; white-space:nowrap; }
    .tag-btn:hover { border-color:var(--border2); color:var(--text); }
    .tag-btn.on[data-tag="固定費"]  { border-color:var(--blue); background:rgba(77,163,255,0.12); color:var(--blue); }
    .tag-btn.on[data-tag="未分類"]  { border-color:var(--accent); background:var(--dim); color:var(--accent); }
    .tag-btn.on[data-tag="貯蓄"]    { border-color:var(--amber); background:rgba(255,179,71,0.12); color:var(--amber); }
    .tag-btn.on[data-tag="臨時収入"]    { border-color:var(--amber); background:rgba(255,179,71,0.12); color:var(--amber); }
    .tag-btn.on[data-tag="振替"]    { border-color:var(--purple); background:rgba(155,89,182,0.12); color:var(--purple); }
    .tag-btn.on[data-tag="収入"]    { border-color:var(--green); background:rgba(46,204,113,0.12); color:var(--green); }
    .tag-btn.on[data-tag="自動反映"]{ border-color:var(--green); background:rgba(46,204,113,0.12); color:var(--green); }
    .tag-badge { display:inline-block; border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; letter-spacing:0.3px; }
    .tag-badge.固定費  { background:rgba(77,163,255,0.18); color:var(--blue); }
    .tag-badge.未分類  { background:rgba(168,255,120,0.15); color:var(--accent); }
    .tag-badge.貯蓄{ background:rgba(255,179,71,0.18); color:var(--amber); }
    .tag-badge.収入    { background:rgba(168,255,120,0.18); color:var(--income); }
    .memo-input { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; font-family:var(--sans); font-size:14px; color:var(--text); outline:none; resize:none; transition:border-color 0.2s; caret-color:var(--accent); }
    .memo-input::placeholder { color:var(--sub); }
    .memo-input:focus { border-color:var(--accent); }
    .location-input { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:11px 14px; font-family:var(--sans); font-size:14px; color:var(--text); outline:none; transition:border-color 0.2s; caret-color:var(--accent); }
    .location-input::placeholder { color:var(--sub); }
    .location-input:focus { border-color:var(--accent); }
    .pay-row { display:flex; flex-wrap:wrap; gap:6px; }
    .pay-btn { background:var(--surface); border:1.5px solid var(--border); border-radius:20px; padding:7px 12px; font-size:12px; font-weight:500; font-family:var(--sans); color:var(--sub2); cursor:pointer; transition:all 0.15s; }
    .pay-btn:hover { border-color:var(--border2); color:var(--text); }
    .pay-btn.on { border-color:var(--accent); background:var(--dim); color:var(--accent); font-weight:700; }
    .summary-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
    .summary-row { display:flex; justify-content:space-between; align-items:center; }
    .summary-key { font-size:11px; color:var(--sub); }
    .summary-val { font-family:var(--mono); font-size:13px; color:var(--text); }
    .summary-amount-big { font-family:var(--mono); font-size:22px; font-weight:500; color:var(--accent); letter-spacing:-1px; }
    .tag-static { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .memo-suggest-wrap { display:flex; flex-direction:column; gap:8px; }
    .memo-suggest-row { display:flex; flex-wrap:wrap; gap:6px; }
    .memo-suggest-btn {
      background:var(--surface); border:1px solid var(--border); border-radius:999px;
      padding:7px 12px; color:var(--sub2); font-size:12px; font-weight:700; cursor:pointer; transition:all 0.15s;
    }
    .memo-suggest-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--dim); }
    .save-btn { width:100%; background:var(--accent); border:none; border-radius:14px; padding:16px; font-family:var(--sans); font-size:15px; font-weight:700; color:#0A0A0A; cursor:pointer; transition:background 0.15s,transform 0.1s; }
    .save-btn:hover { background:var(--accent2); }
    .save-btn:active { transform:scale(0.97); }
    .save-btn.locked { background:var(--surface2); color:var(--sub); pointer-events:none; }

    /* LIST VIEW */
    #db-list-view { display:none; flex:1; overflow:hidden; flex-direction:column; }
    #db-list-view.open { display:flex; }
    .list-stats { display:flex; gap:28px; padding:14px 28px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
    .stat-block { display:flex; flex-direction:column; }
    .stat-lbl { font-size:10px; letter-spacing:1.5px; color:var(--sub); text-transform:uppercase; }
    .stat-val { font-family:var(--mono); font-size:22px; font-weight:500; color:var(--accent); margin-top:2px; }
    .stat-val.sm { font-size:17px; color:var(--sub2); }
    .stat-val.income { color:var(--income); }
    .list-table-wrap { flex:1; overflow-y:auto; padding:14px 28px 28px; }
    table { width:100%; border-collapse:collapse; }
    thead tr { border-bottom:1px solid var(--border); }
    th { font-size:10px; font-weight:700; color:var(--sub); letter-spacing:1.5px; text-transform:uppercase; padding:0 10px 10px; text-align:left; }
    th:last-child { text-align:right; }
    td { padding:11px 10px; font-size:13px; color:var(--text); border-bottom:1px solid var(--border); vertical-align:top; }
    td:last-child { text-align:right; }
    tr:hover td { background:var(--surface); }
    .td-amount { font-family:var(--mono); font-size:14px; font-weight:500; }
    .td-sub { font-size:11px; color:var(--sub2); margin-top:2px; }
    .td-loc { font-size:11px; color:var(--sub); margin-top:2px; }
    .td-del { background:none; border:none; color:var(--border2); font-size:13px; cursor:pointer; padding:4px 8px; transition:color 0.15s; border-radius:6px; }
    .td-del:hover { color:var(--red); background:rgba(255,69,69,0.1); }

    /* CALENDAR VIEW */
    #db-calendar-view { display:none; flex:1; overflow:hidden; flex-direction:column; }
    #db-calendar-view.open { display:flex; }
    .cal-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 28px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
    .cal-month-label { font-family:var(--mono); font-size:18px; font-weight:500; color:var(--text); }
    .cal-nav-btn { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:6px 14px; color:var(--sub2); font-size:14px; cursor:pointer; transition:all 0.15s; }
    .cal-nav-btn:hover { border-color:var(--border2); color:var(--text); }
    .cal-wrap { flex:1; overflow-y:auto; padding:16px 28px 28px; }
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
    .cal-header-cell { text-align:center; font-size:11px; font-weight:700; color:var(--sub); padding:4px 0 8px; }
    .cal-day { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 6px 6px; min-height:80px; cursor:pointer; transition:border-color 0.15s; }
    .cal-day:hover { border-color:var(--border2); }
    .cal-day.has-data { cursor:pointer; }
    .cal-day.has-data:hover { border-color:var(--accent); background:rgba(168,255,120,0.04); }
    .cal-day.today { border-color:var(--accent); background:rgba(168,255,120,0.06); }
    .cal-day.empty { background:none; border-color:transparent; cursor:default; }
    .cal-day.sun .cal-day-num { color:var(--red); }
    .cal-day.sat .cal-day-num { color:var(--blue); }
    .cal-day-num { font-family:var(--mono); font-size:13px; font-weight:500; color:var(--sub2); margin-bottom:4px; }
    .cal-day.today .cal-day-num { color:var(--accent); font-weight:700; }
    .cal-amt { font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .cal-amt.expense { color:var(--expense); }
    .cal-amt.income  { color:var(--income); }
    .cal-amt.asset   { color:var(--asset); }

    /* ANALYSIS VIEW */
    #db-analysis-view { display:none; flex:1; overflow:hidden; flex-direction:column; }
    #db-analysis-view.open { display:flex; }
    .analysis-toolbar { display:flex; gap:8px; padding:12px 28px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
    .period-btn { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 16px; font-size:12px; font-weight:700; color:var(--sub2); cursor:pointer; transition:all 0.15s; font-family:var(--sans); }
    .period-btn:hover { border-color:var(--border2); color:var(--text); }
    .period-btn.on { background:var(--dim); border-color:var(--accent); color:var(--accent); }
    .analysis-body { flex:1; overflow-y:auto; padding:20px 28px 28px; display:grid; grid-template-rows:auto auto 1fr; gap:16px; }
    .analysis-summary-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
    .a-stat-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
    .a-stat-label { font-size:10px; letter-spacing:1.5px; color:var(--sub); text-transform:uppercase; margin-bottom:6px; }
    .a-stat-value { font-family:var(--mono); font-size:20px; font-weight:500; color:var(--accent); }
    .a-stat-value.sm { font-size:15px; color:var(--text); }
    .analysis-charts-row { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
    .analysis-bottom-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
    .chart-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; align-self:start; }
    .chart-card-title { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--sub); text-transform:uppercase; margin-bottom:14px; }
    .chart-canvas-wrap { position:relative; height:190px; }
    .cat-rank-list { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
    .cat-rank-item { display:flex; align-items:center; gap:8px; }
    .cat-rank-emoji { font-size:14px; width:20px; text-align:center; flex-shrink:0; }
    .cat-rank-name { font-size:12px; color:var(--sub2); width:80px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cat-rank-bar-wrap { flex:1; background:var(--surface); border-radius:4px; height:6px; overflow:hidden; }
    .cat-rank-bar { height:100%; background:var(--accent); border-radius:4px; }
    .cat-rank-amt { font-family:var(--mono); font-size:12px; color:var(--text); flex-shrink:0; min-width:60px; text-align:right; }
    .tag-breakdown { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
    .tag-break-item { margin-bottom:0; }
    .tag-break-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
    .tag-break-name { font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; }
    .tag-break-name.固定費  { background:rgba(77,163,255,0.15); color:var(--blue); }
    .tag-break-name.未分類  { background:rgba(168,255,120,0.12); color:var(--accent); }
    .tag-break-name.貯蓄{ background:rgba(255,179,71,0.15); color:var(--amber); }
    .tag-break-name.収入    { background:rgba(168,255,120,0.18); color:var(--income); }
    .tag-break-name.自動反映 { background:rgba(255,179,71,0.15); color:var(--amber); }
    .tag-break-amt { font-family:var(--mono); font-size:13px; color:var(--text); }
    .tag-break-bar-wrap { background:var(--surface); border-radius:4px; height:5px; overflow:hidden; margin-bottom:4px; }
    .tag-break-bar { height:100%; border-radius:4px; }
    .tag-break-bar.固定費  { background:var(--blue); }
    .tag-break-bar.未分類  { background:var(--accent); }
    .tag-break-bar.貯蓄{ background:var(--amber); }
    .tag-break-bar.収入    { background:var(--income); }
    .tag-break-bar.自動反映 { background:var(--amber); }
    .tag-btn.on[data-tag="収入"] { border-color:var(--income); background:rgba(168,255,120,0.12); color:var(--income); }
    .tag-btn.on[data-tag="自動反映"] { border-color:var(--amber); background:rgba(255,179,71,0.12); color:var(--amber); }
    .tag-badge.自動反映 { background:rgba(255,179,71,0.18); color:var(--amber); }
    .tag-break-pct { font-size:10px; color:var(--sub); }

    /* 笊絶武笊・DAY DETAIL OVERLAY (shared) 笊絶武笊・*/
    #day-detail-overlay {
      position:fixed; inset:0; z-index:200; display:none;
      background:rgba(0,0,0,0.7);
      align-items:flex-end; justify-content:center;
    }
    #day-detail-overlay.open { display:flex; }
    .day-detail-panel {
      width:100%; max-width:540px; max-height:80vh;
      background:var(--panel); border-radius:20px 20px 0 0;
      border:1px solid var(--border); border-bottom:none;
      display:flex; flex-direction:column;
      animation:slideUp 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    @keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
    .day-detail-header {
      padding:18px 20px 14px;
      border-bottom:1px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      flex-shrink:0;
    }
    .day-detail-title { font-size:16px; font-weight:700; }
    .day-detail-totals { font-size:11px; color:var(--sub2); margin-top:4px; }
    .day-detail-close { background:var(--surface); border:none; border-radius:8px; width:32px; height:32px; color:var(--sub2); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .day-detail-close:hover { color:var(--text); }
    .day-detail-scroll { flex:1; overflow-y:auto; padding:12px 16px 24px; }
    .day-detail-item { display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border); }
    .day-detail-item:last-child { border-bottom:none; }
    .day-detail-icon { font-size:18px; width:36px; height:36px; background:var(--surface); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .day-detail-info { flex:1; min-width:0; }
    .day-detail-cat { font-size:13px; font-weight:700; }
    .day-detail-sub { font-size:11px; color:var(--sub); margin-top:2px; }
    .day-detail-memo { font-size:11px; color:var(--sub2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .day-detail-amt { font-family:var(--mono); font-size:15px; font-weight:700; flex-shrink:0; padding-top:2px; }

    /* 笊絶武笊・MOBILE LAYOUT 笊絶武笊・*/
    #app-mobile { display:flex; flex-direction:column; height:100dvh; width:100%; min-width:100%; max-width:100%; overflow:hidden; position:fixed; inset:0; isolation:isolate; }
    #app-mobile > .screen { position:absolute; inset:0; width:100%; min-width:100%; max-width:100%; display:none; flex-direction:column; background:var(--bg); z-index:1; overflow:hidden; }
    .screen.is-active { display:flex; z-index:2; }
    .screen.slide-behind { display:none !important; }
    #ms-list { position:absolute; inset:0; width:100%; min-width:100%; max-width:100%; overflow:hidden; flex-direction:column; }
    #ms-list > #m-list-pane,
    #ms-list > #m-calendar-pane,
    #ms-list > #m-analysis-pane { position:relative; width:100%; min-width:100%; max-width:100%; height:100%; min-height:0; display:none; }
    #ms-list > #m-list-pane,
    #ms-list > #m-calendar-pane { overflow:hidden; }
    #ms-list > #m-analysis-pane { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
    #ms-list > #m-list-pane { flex-direction:column; }
    .topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; padding-top:calc(12px + var(--safe-top)); background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
    .topbar-title { font-size:16px; font-weight:700; }
    .icon-btn { width:36px; height:36px; background:var(--surface); border:none; border-radius:10px; color:var(--text); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .back-btn { background:none; border:none; color:var(--accent); font-size:15px; font-weight:700; cursor:pointer; padding:4px 0; }

    /* Mobile amount screen */
      #ms-amount { justify-content:flex-start; padding-top:calc(12vh + var(--safe-top)); }
      .m-amount-disp { background:var(--bg); flex:0 0 auto; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0 18px 10px; border:none; min-height:0; margin-top:0; }
    .m-amt-hint { font-size:13px; color:var(--sub); letter-spacing:0.8px; margin-bottom:8px; }
    .m-amt-num { font-family:var(--mono); font-size:clamp(68px, 18vw, 92px); font-weight:500; letter-spacing:-4px; line-height:1; color:var(--sub); transition:color 0.2s; text-align:center; }
    .m-amt-num.filled { color:var(--accent); }
    .m-yen { font-size:32px; vertical-align:top; margin-top:8px; display:inline-block; }
    /* Beautiful Premium Numpad */
      .m-numpad { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:10px; background:var(--panel); border-top:1px solid var(--border); padding:10px 16px calc(72px + var(--safe-bot)); flex:0 0 auto; min-height:0; height:32vh; height:32svh; max-height:32vh; max-height:32svh; min-height:236px; flex-shrink:0; border-radius:28px 28px 0 0; box-shadow:0 -10px 32px rgba(0,0,0,0.24); align-content:stretch; margin-top:0; }
    .m-nk { background:var(--surface); border:1.5px solid var(--border); border-radius:28px; font-size:28px; font-family:var(--mono); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; transition:transform 0.1s,background 0.1s; min-height:0; }
    .m-nk:active { transform:scale(0.92); background:var(--surface2); }
    .m-nk.del { font-size:22px; color:var(--sub2); }
    .m-nk.go { background:var(--accent); border-color:transparent; color:#0A0A0A; font-family:var(--sans); font-size:18px; font-weight:800; }
    .m-nk.go:active { background:var(--accent2); transform:scale(0.92); }
    .m-nk.go.locked { background:var(--surface); border-color:var(--border); color:var(--sub); pointer-events:none; }

    /* Mobile category screen */
    .m-preview { background:var(--panel); border-bottom:1px solid var(--border); padding:14px 20px; flex-shrink:0; }
    .m-preview-amt { font-family:var(--mono); font-size:28px; font-weight:500; color:var(--accent); }
    .m-preview-sub { font-size:12px; color:var(--sub); margin-top:2px; }
    .m-cat-scroll { flex:1; min-height:0; overflow-y:auto; padding:12px; padding-bottom:calc(96px + var(--safe-bot)); }
    .m-cat-scroll.limit-scroll { max-height:calc((var(--m-cat-row-height) * 6) + (8px * 5) + 24px); }
    .m-cat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; grid-auto-rows:minmax(var(--m-cat-row-height),auto); align-content:start; }

    /* Mobile detail screen */
    .m-detail-info { background:var(--panel); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .m-cat-icon { font-size:26px; width:44px; height:44px; background:var(--surface); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .m-det-amt { font-family:var(--mono); font-size:24px; color:var(--accent); }
    .m-det-cat { font-size:12px; color:var(--sub); margin-top:2px; }
    .m-detail-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:18px; }
    .m-detail-footer { padding:12px 16px; padding-bottom:calc(90px + var(--safe-bot)); background:var(--panel); border-top:1px solid var(--border); flex-shrink:0; }
    .m-save-btn { width:100%; background:var(--accent); border:none; border-radius:14px; padding:16px; font-family:var(--sans); font-size:16px; font-weight:800; color:#0A0A0A; cursor:pointer; }
    .m-save-btn:active { background:var(--accent2); }
    .m-dt-row { display:flex; gap:8px; }
    .m-dt-input { flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; font-family:var(--mono); font-size:14px; color:var(--text); outline:none; caret-color:var(--accent); }
    .m-dt-input:focus { border-color:var(--accent); }
    .m-dt-input::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.4); }

    /* Mobile list/analysis/calendar screen */
    .m-view-toggle { display:flex; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
    .m-view-tab { flex:1; background:none; border:none; color:var(--sub2); font-family:var(--sans); font-size:12px; font-weight:700; padding:10px 4px; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; }
    .m-view-tab.on { color:var(--accent); border-bottom-color:var(--accent); }
    .m-stats { background:var(--panel); border-bottom:1px solid var(--border); padding:10px 14px; display:flex; gap:16px; flex-shrink:0; flex-wrap:wrap; }
    .m-stat-val { font-family:var(--mono); font-size:18px; color:var(--accent); margin-top:2px; }
    .m-stat-val.sm { font-size:14px; color:var(--sub2); }
    .m-stat-val.income { color:var(--income); font-size:14px; }
    .m-list-scroll { flex:1; overflow-y:auto; padding:10px 14px; padding-bottom:calc(80px + var(--safe-bot)); }
    .m-date-head { font-size:11px; font-weight:700; color:var(--sub); padding:10px 4px 6px; display:flex; justify-content:space-between; }
    .m-card { background:var(--panel); border-radius:14px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
    .m-card-icon { font-size:20px; width:38px; height:38px; background:var(--surface); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
    .m-card-info { flex:1; min-width:0; }
    .m-card-cat { font-size:13px; font-weight:700; }
    .m-card-time { font-size:11px; color:var(--sub); margin-top:1px; }
    .m-card-memo { font-size:11px; color:var(--sub2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .m-card-loc { font-size:11px; color:var(--blue); margin-top:2px; }
    .m-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
    .m-card-amt { font-family:var(--mono); font-size:15px; font-weight:700; }
    .m-card-del { background:none; border:none; color:var(--border2); font-size:13px; cursor:pointer; padding:2px; transition:color 0.15s; }
    .m-card-del:active { color:var(--red); }

    /* Mobile analysis */
    .m-analysis-scroll { flex:1; overflow-y:auto; padding:14px 14px calc(20px + var(--safe-bot)); display:none; }
    .m-analysis-scroll.show { display:block; }
    .m-period-row { display:flex; gap:6px; margin-bottom:14px; }
    .m-period-btn { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 4px; font-size:12px; font-weight:700; color:var(--sub2); cursor:pointer; transition:all 0.15s; font-family:var(--sans); }
    .m-period-btn.on { background:var(--dim); border-color:var(--accent); color:var(--accent); }
    .m-analysis-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
    .m-a-stat { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
    .m-a-stat-lbl { font-size:10px; color:var(--sub); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
    .m-a-stat-val { font-family:var(--mono); font-size:18px; color:var(--accent); }
    .m-a-stat-val.sm { font-size:13px; color:var(--text); }
    .m-chart-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:8px; }
    .m-chart-title { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--sub); text-transform:uppercase; margin-bottom:12px; }
    .m-chart-canvas-wrap { position:relative; height:160px; }

    /* Mobile calendar */
    .m-calendar-scroll { flex:1; overflow:hidden; padding:0; display:none; flex-direction:column; }
    .m-calendar-scroll.show { display:flex; }
    .m-cal-toolbar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px 6px; flex-shrink:0; }
    .m-cal-month-label { font-family:var(--mono); font-size:15px; font-weight:500; color:var(--text); }
    .m-cal-nav { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:4px 12px; color:var(--sub2); font-size:14px; cursor:pointer; }
    .m-cal-grid-wrap { flex:4; min-height:0; padding:0 8px 4px; overflow:hidden; }
    .m-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:18px repeat(6,1fr); gap:2px; height:100%; }
    .m-cal-header { text-align:center; font-size:10px; font-weight:700; color:var(--sub); padding:0 0 4px; }
    .m-cal-day { background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:4px 2px 3px; cursor:pointer; transition:border-color 0.15s; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
    .m-cal-day:hover,.m-cal-day.has-data:hover { border-color:var(--accent); }
    .m-cal-day.today { border-color:var(--accent); background:rgba(168,255,120,0.06); }
    .m-cal-day.empty { background:none; border-color:transparent; cursor:default; pointer-events:none; }
    .m-cal-day.sun .m-cal-day-num { color:var(--red); }
    .m-cal-day.sat .m-cal-day-num { color:var(--blue); }
    .m-cal-day-num { font-family:var(--mono); font-size:11px; font-weight:500; color:var(--sub2); text-align:center; line-height:1.3; }
    .m-cal-day.today .m-cal-day-num { color:var(--accent); font-weight:700; }
    .m-cal-amt { font-size:8px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; line-height:1.2; width:100%; }
    .m-cal-amt.expense { color:var(--expense); }
    .m-cal-amt.income  { color:var(--income); }
    .m-cal-amt.asset   { color:var(--asset); }
    /* Compact monthly goals */
    .m-monthly-goals-compact { flex:2; min-height:0; overflow-y:auto; padding:8px 10px calc(calc(56px + var(--safe-bot)) + 6px); background:var(--surface); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
    .m-monthly-goals-compact > div:first-child { order:1; width:100%; }
    .m-mg-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:flex-end; margin-bottom:0; order:2; }
    .m-mg-field { flex:1; }
    .m-mg-lbl { font-size:9px; color:var(--sub); margin-bottom:3px; letter-spacing:0.3px; }
    .m-mg-input { width:100%; background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:5px 6px; color:var(--text); font-family:var(--mono); font-size:12px; outline:none; }
    .m-mg-save-row { display:flex; justify-content:stretch; margin-top:0; width:100%; order:4 !important; }
    .m-mg-save-btn { width:100%; flex-shrink:0; background:var(--accent); border:none; border-radius:10px; padding:10px 18px; font-family:var(--sans); font-size:13px; font-weight:700; color:#0A0A0A; cursor:pointer; height:44px; }
    #m-cat-budget-block { order:3 !important; width:100%; margin-top:0 !important; padding-top:0 !important; border-top:none !important; display:flex; flex-direction:column; gap:8px; }
    #m-cat-budget-editor { display:flex; flex-direction:column; gap:8px; width:100%; }

    /* Bottom navigation bar */
    .m-bottom-nav { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--panel); border-top:1px solid var(--border); padding-bottom:var(--safe-bot); z-index:100; }
    .m-nav-btn { flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 4px 6px; cursor:pointer; color:var(--sub2); font-size:9px; font-family:var(--sans); font-weight:700; letter-spacing:0.5px; gap:3px; transition:color 0.15s; }
    .m-nav-btn.record-on { color:var(--accent); }
    .m-nav-btn.record-on .nav-icon { transform:scale(1.15); color:var(--accent); }
    .m-nav-btn .nav-icon { font-size:20px; line-height:1; display:block; transition:transform 0.15s; }
    .m-nav-btn.on { color:var(--accent); }
    .m-nav-btn.on .nav-icon { transform:scale(1.15); }
    /* Adjust all scrollable panes to account for bottom nav */
    .m-list-scroll { flex:1; overflow-y:auto; padding:10px 14px; padding-bottom:calc(70px + var(--safe-bot)); }
    .m-analysis-scroll { flex:1; overflow-y:auto; padding:14px 14px calc(70px + var(--safe-bot)); display:none; }
    .m-analysis-scroll.show { display:block; }
    /* m-calendar-scroll already defined above */
    /* Hide old FAB */
    .fab { display:none !important; }

    #toast { position:fixed; top:calc(14px + var(--safe-top)); left:50%; transform:translateX(-50%) translateY(-70px); background:var(--surface2); border:1px solid var(--border2); color:var(--text); padding:10px 22px; border-radius:22px; font-size:14px; font-weight:700; white-space:nowrap; z-index:9999; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events:none; }
    #toast.show { transform:translateX(-50%) translateY(0); }
    #toast.ok { background:var(--accent); color:#0A0A0A; border:none; }
    #toast.ng { background:var(--red); color:#fff; border:none; }

  
    body.light-theme {
      --bg:#F6F8FA; --panel:#FFFFFF; --surface:#F3F6F9; --surface2:#E1E6EB;
      --border:#DCDFE4; --border2:#AAB;
      --text:#1C1F23; --sub:#57606A; --sub2:#8C959F; --dim:#E3F5E1;
    }
    body.light-theme input::-webkit-calendar-picker-indicator { filter: none !important; }
    input:checked + span { background-color: var(--accent); }
    input:checked + span + .slider-dot { transform: translateX(22px); }
      @media (max-width: 480px) {
        #ms-amount {
          justify-content:flex-start;
          padding-top:0;
          padding-bottom:0;
          position:relative;
        }
        .m-amount-disp {
          flex:0 0 auto;
          min-height:0;
          justify-content:flex-start;
          padding:0 12px 0;
          margin-top:13vh;
          margin-bottom:34px;
        }
        .m-numpad {
            position:absolute;
            left:16px;
            right:16px;
            bottom:calc(56px + var(--safe-bot) + 8px);
            gap:8px;
            padding:10px 12px;
            height:auto;
            max-height:none;
            min-height:0;
            margin-top:0;
            grid-template-rows:repeat(4, minmax(48px, 52px));
          }
      .m-nk {
        min-height:48px;
        font-size:21px;
        border-radius:24px;
      }
      #m-monthly-goals {
        gap:10px;
      }
      .m-mg-row {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
      }
      #m-cat-budget-block .cat-budget-row {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 96px 34px !important;
        gap:8px !important;
        align-items:center !important;
      }
      #m-cat-budget-block .cat-budget-row select,
      #m-cat-budget-block .cat-budget-row input {
        min-width:0;
      }
      .m-mg-save-row {
        order:4 !important;
        margin-top:8px;
      }
      .m-mg-save-row .m-mg-save-btn {
        width:100%;
        margin-left:0;
      }
      #m-cat-budget-block {
        order:3 !important;
      }
      #m-cat-budget-block > div:first-child {
        margin-bottom:0 !important;
      }
      #m-cat-budget-editor {
        gap:10px !important;
      }
      #m-cat-budget-editor > button[onclick^="addCategoryBudgetRow"] {
        width:100% !important;
        min-height:44px !important;
        border-radius:10px !important;
      }
      #ce-add-bar {
        display:flex;
        gap:8px;
        align-items:stretch;
        flex-wrap:nowrap;
      }
      #ce-add-bar #ce-new-emoji {
        width:48px !important;
        min-width:48px !important;
        padding:10px 4px !important;
        font-size:16px !important;
      }
      #ce-add-bar #ce-new-name {
        min-width:0 !important;
        flex:1 1 auto;
        padding:10px !important;
        font-size:14px !important;
      }
      #ce-add-bar #ce-new-tag {
        width:82px !important;
        min-width:82px !important;
        padding:10px 8px !important;
        font-size:13px !important;
      }
      #ce-add-bar button {
        width:74px !important;
        min-width:74px !important;
        padding:10px 12px !important;
        font-size:14px !important;
      }
      #ce-add-pay,
      #ce-add-tag-bar {
        display:flex;
        gap:8px;
        align-items:stretch;
        flex-wrap:nowrap;
      }
      #ce-add-pay #ce-new-pay {
        flex:1 1 auto;
        min-width:0 !important;
        padding:10px !important;
        font-size:15px !important;
      }
      #ce-add-pay button {
        width:74px !important;
        min-width:74px !important;
        padding:10px 12px !important;
        font-size:15px !important;
      }
      #ce-add-tag-bar #ce-new-tag-type {
        width:72px !important;
        min-width:72px !important;
        padding:12px 8px !important;
      }
      #ce-add-tag-bar #ce-new-tag-name {
        flex:1 1 auto;
        min-width:0 !important;
        padding:12px !important;
      }
      #ce-add-tag-bar #ce-new-tag-color {
        width:44px !important;
        min-width:44px !important;
      }
      #ce-add-tag-bar button {
        width:74px !important;
        min-width:74px !important;
        padding:10px 12px !important;
        font-size:15px !important;
      }
      #rec-edit-overlay {
        padding:10px !important;
      }
      #rec-edit-overlay > div {
        width:min(96vw,720px) !important;
        max-height:90vh !important;
        border-radius:18px !important;
      }
      #rec-grid-row {
        grid-template-columns:1fr 1fr !important;
      }
      #rec-editor-extra {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
      }
      #rec-editor-extra #rec-payment,
      #rec-editor-extra #rec-memo,
      #rec-editor-extra #rec-cancel-btn,
      #rec-editor-extra #rec-submit-btn {
        width:100% !important;
        min-width:0 !important;
      }
    }
    @media (min-width: 768px) {
      body { overflow:hidden; }
      #app-desktop { display:flex; }
      #app-mobile  { display:none; }
      .m-bottom-nav { display:none !important; }
      #day-detail-overlay { align-items:center; }
      .day-detail-panel { border-radius:20px; max-height:70vh; border:1px solid var(--border); }
    }