:root{
    color-scheme: light;
    --bg:#EFF4E9;
    --surface:#FFFFFF;
    --surface-2:#EAF1E3;
    --ink:#152920;
    --ink-2:#516255;
    --ink-3:#5E6E63;
    --line:rgba(21,41,32,0.11);
    --line-strong:rgba(21,41,32,0.20);
    --shadow:rgba(21,41,32,0.16);
    --brand:#1F6F5C;
    --brand-strong:#134B3D;
    --brand-soft:#DCEBE3;
    --brand-on:#FFFFFF;
    --gold:#A8730F;
    --gold-soft:#F3E4C2;
    --danger:#B5453A;
    --danger-soft:#F4DEDB;
    --warning:#8A6A12;
    --warning-soft:#F3E9C7;
    --tile:#E3EEE6;

    /* ---- 実績の等級カラー(金色だけに頼らない。等級ごとに色相を変える) ---- */
    --tier-bronze:#96613F;
    --tier-bronze-soft:#EEE1D6;
    --tier-silver:#5C6E76;
    --tier-silver-soft:#E4EAEC;
    --tier-platinum:#3E6657;
    --tier-platinum-soft:#E4EEE9;
    --tier-special:#7A4B14;
    --tier-special-soft:#F0E1C4;

    --cat-food:#2a78d6;
    --cat-fixed:#eb6834;
    --cat-move:#1baf7a;
    --cat-shop:#eda100;
    --cat-fun:#e87ba4;
    --cat-other:#008300;

    /* ---- デザイントークン(余白・角丸・サイズ) ---- */
    --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
    /* 見出し・アプリ名・称号に使う、端末の丸ゴシック系書体スタック(丸みの表現用)。
       外部フォントは一切使わず、ui-roundedが無い環境ではヒラギノ丸ゴ/Yu Gothic UI等へ
       自然にフォールバックする(可読性・レイアウトが崩れないことを優先)。 */
    --font-rounded: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Hiragino Sans", sans-serif;
    /* ---- 文字サイズ(役割ごとに固定。将来のDynamic Type対応のためCSS変数に集約) ----
       --fs-tab: 下部タブラベル(10-11px) / --fs-xs: 補助・日付・カテゴリ(12-13px)
       --fs-sm: 小見出し(14-16px) / --fs-base: 本文・記録名(15-16px)
       --fs-lg: 画面見出し・モーダル見出し(17-20px) / --fs-xl,--fs-2xl: 大見出し用途の余地 */
    --fs-tab:.6875rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-base:.9375rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.6rem;
    --btn-height:48px;
    --tap-min:44px;
    --tabbar-height:56px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg:#0B1512;
      --surface:#142019;
      --surface-2:#1A281F;
      --ink:#E9F1EA;
      --ink-2:#A9BEAF;
      --ink-3:#8AA093;
      --line:rgba(233,241,234,0.11);
      --line-strong:rgba(233,241,234,0.20);
      --shadow:rgba(0,0,0,0.5);
      --brand:#52D2A3;
      --brand-strong:#7EE4BE;
      --brand-soft:rgba(82,210,163,0.16);
      --brand-on:#0B1512;
      --gold:#E8B84B;
      --gold-soft:rgba(232,184,75,0.16);
      --danger:#E58077;
      --danger-soft:rgba(229,128,119,0.16);
      --warning:#E0C15A;
      --warning-soft:rgba(224,193,90,0.16);
      --tile:#1C2B21;

      --tier-bronze:#CFA47E;
      --tier-bronze-soft:rgba(207,164,126,0.16);
      --tier-silver:#AEBDC4;
      --tier-silver-soft:rgba(174,189,196,0.16);
      --tier-platinum:#8FCBB2;
      --tier-platinum-soft:rgba(143,203,178,0.16);
      --tier-special:#E3B65B;
      --tier-special-soft:rgba(227,182,91,0.18);

      --cat-food:#3987e5;
      --cat-fixed:#d95926;
      --cat-move:#199e70;
      --cat-shop:#c98500;
      --cat-fun:#d55181;
      --cat-other:#3fbf3f;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0B1512;
    --surface:#142019;
    --surface-2:#1A281F;
    --ink:#E9F1EA;
    --ink-2:#A9BEAF;
    --ink-3:#8AA093;
    --line:rgba(233,241,234,0.11);
    --line-strong:rgba(233,241,234,0.20);
    --shadow:rgba(0,0,0,0.5);
    --brand:#52D2A3;
    --brand-strong:#7EE4BE;
    --brand-soft:rgba(82,210,163,0.16);
    --brand-on:#0B1512;
    --gold:#E8B84B;
    --gold-soft:rgba(232,184,75,0.16);
    --danger:#E58077;
    --danger-soft:rgba(229,128,119,0.16);
    --warning:#E0C15A;
    --warning-soft:rgba(224,193,90,0.16);
    --tile:#1C2B21;

    --tier-bronze:#CFA47E;
    --tier-bronze-soft:rgba(207,164,126,0.16);
    --tier-silver:#AEBDC4;
    --tier-silver-soft:rgba(174,189,196,0.16);
    --tier-platinum:#8FCBB2;
    --tier-platinum-soft:rgba(143,203,178,0.16);
    --tier-special:#E3B65B;
    --tier-special-soft:rgba(227,182,91,0.18);

    --cat-food:#3987e5;
    --cat-fixed:#d95926;
    --cat-move:#199e70;
    --cat-shop:#c98500;
    --cat-fun:#d55181;
    --cat-other:#3fbf3f;
  }

  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; padding:0; height:100%; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  /* 金額・数値の表示は、等幅フォントではなく本文と同じ書体のまま
     tabular-nums(等幅数字)機能だけを使い、字間をごくわずかに締めて数字を主役にする
     (カンマ・桁間隔が不自然にならない範囲で調整。追加のWebフォントは使用しない)。
     アプリ名・主要見出し・称号には、端末の丸ゴシック系書体(--font-rounded)で柔らかい印象を残す。 */
  .mono{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-0.01em; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; }
  input,select,textarea{ font:inherit; }

  .app{
    max-width:480px;
    margin:0 auto;
    min-height:100dvh;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    position:relative;
    box-shadow:0 0 60px var(--shadow);
  }

  .topbar{
    flex:0 0 auto;
    position:sticky; top:0; z-index:6;
    padding:calc(var(--sp-16) + env(safe-area-inset-top)) var(--sp-16) var(--sp-12);
    display:flex; align-items:baseline; justify-content:space-between;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .topbar .brandname{
    display:inline-flex; align-items:center;
    font-family:var(--font-rounded);
    font-weight:700; font-size:1.18rem; letter-spacing:-0.01em;
    margin:0; line-height:1.2;
  }
  .topbar .brandname b{ color:var(--brand); font-weight:700; }
  .topbar .brandname .brand-mark{ width:15px; height:15px; margin-right:5px; color:var(--brand); flex:0 0 auto; }
  .topbar .today{ font-size:var(--fs-xs); color:var(--ink-3); }

  .screen{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--sp-12) var(--sp-16) var(--sp-24); }
  .screen[hidden]{ display:none; }

  .tabbar{
    flex:0 0 auto; position:sticky; bottom:0; z-index:6;
    display:grid; grid-template-columns:repeat(5,1fr);
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line);
    min-height:calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  }
  .tabbar button{
    background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:var(--tap-min);
    padding:6px 2px; border-radius:var(--radius-sm); color:var(--ink-3); cursor:pointer;
  }
  .tabbar button svg{ width:21px; height:21px; transition:transform .15s; }
  .tabbar button span{ font-size:var(--fs-tab); font-weight:600; }
  .tabbar button[aria-current="true"]{ color:var(--brand); }
  .tabbar button[aria-current="true"] span{ font-weight:800; }
  .tabbar button[aria-current="true"] svg{ transform:translateY(-1px) scale(1.06); }

  /* ---------- home: ホーム上部を「スコアボード」として一枚の面にまとめる ----------
     枠付きの一般的なダッシュボードカードにはせず、ごく薄いブランドグラデーション・
     控えめな同心円のモチーフ・等級に応じた極小のアクセントだけで質感を出す。
     文字階層(最重要:金額→称号→次の目標 / 補助:今日・先月・今年・固定費見込み)は
     この一枚の中で完結させ、装飾はスコアボードの外へは広げない。 */
  .scoreboard{
    position:relative; overflow:hidden;
    margin-top:2px; padding:var(--sp-16);
    border-radius:var(--radius-lg);
    background:linear-gradient(165deg, var(--brand-soft) 0%, var(--surface) 72%);
    border:1px solid var(--line);
  }
  .scoreboard[data-tier="bronze"]{ border-color:color-mix(in srgb, var(--tier-bronze) 32%, var(--line)); }
  .scoreboard[data-tier="silver"]{ border-color:color-mix(in srgb, var(--tier-silver) 32%, var(--line)); }
  .scoreboard[data-tier="gold"]{ border-color:color-mix(in srgb, var(--gold) 34%, var(--line)); }
  .scoreboard[data-tier="platinum"]{ border-color:color-mix(in srgb, var(--tier-platinum) 34%, var(--line)); }
  .scoreboard[data-tier="special"]{ border-color:color-mix(in srgb, var(--tier-special) 42%, var(--line)); }
  .sb-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .sb-bg svg{ position:absolute; top:-52px; right:-52px; width:168px; height:168px; color:var(--brand); opacity:.16; }
  .sb-top{ position:relative; display:flex; align-items:baseline; justify-content:space-between; }
  .h-cap{ font-size:var(--fs-sm); color:var(--ink-2); font-weight:700; margin-top:2px; }
  .h-fig{ position:relative; margin:2px 0 0; font-size:clamp(2.2rem,9.5vw,2.7rem); font-weight:800; line-height:1.05; letter-spacing:-0.02em; }
  .h-fig .yen{ font-size:1.05rem; font-weight:700; color:var(--ink-2); margin-right:2px; vertical-align:.5em; }

  /* 称号プレート+等級ラベル+「次の目標」導線(スコアボード内の第2階層) */
  .sb-title-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); margin-top:var(--sp-12); flex-wrap:wrap; }
  .sb-title-group{ display:flex; align-items:center; gap:6px; min-width:0; }
  .sb-title-plate{
    font-family:var(--font-rounded); font-weight:800; font-size:var(--fs-sm); color:var(--brand-strong);
    background:var(--surface); border:1px solid var(--line); border-radius:99px;
    padding:5px 12px 5px 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
  }
  .ach-teaser.sb-next{ margin-top:0; padding:4px 2px; border-top:none; width:auto; font-size:var(--fs-xs); min-height:32px; }

  /* 等級ラベル(BRONZE/SILVER/GOLD/PLATINUM/SPECIAL): 色だけに頼らず、
     小さめの欧文・広めの字間で等級を伝える(本文とは役割を分ける)。 */
  .tier-chip{ display:inline-flex; align-items:center; flex:0 0 auto; padding:3px 7px; border-radius:99px; font-size:9px; font-weight:800; letter-spacing:.09em; }
  .tier-chip.bronze{ background:var(--tier-bronze-soft); color:var(--tier-bronze); }
  .tier-chip.silver{ background:var(--tier-silver-soft); color:var(--tier-silver); }
  .tier-chip.gold{ background:var(--gold-soft); color:var(--gold); }
  .tier-chip.platinum{ background:var(--tier-platinum-soft); color:var(--tier-platinum); }
  .tier-chip.special{ background:var(--tier-special-soft); color:var(--tier-special); }

  /* 月間目標の進捗(第2階層の一部。設定時のみ表示) */
  .goal-row{ position:relative; margin-top:var(--sp-12); }
  .goal-track{ height:4px; border-radius:99px; background:var(--line-strong); overflow:hidden; }
  .goal-fill{ height:100%; border-radius:99px; background:var(--brand); transition:width .8s cubic-bezier(.2,.8,.2,1); }
  .goal-caption{ display:flex; justify-content:space-between; margin-top:4px; font-size:var(--fs-xs); color:var(--ink-3); }
  .goal-caption .mono{ color:var(--ink-2); font-weight:700; }

  /* 今日/先月/今年/固定費見込み(補助情報。すべて同じ弱さで統一する) */
  .stat-grid{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:var(--sp-8) var(--sp-12); margin-top:var(--sp-16); padding-top:var(--sp-12); border-top:1px solid var(--line); }
  .stat-item{ min-width:0; }
  .stat-item .si-label{ display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-bottom:2px; }
  .stat-item .si-value{ display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  hr.hr{ border:none; border-top:1px solid var(--line); margin:var(--sp-16) 0 var(--sp-8); }

  .section-head{ margin:var(--sp-16) 0 var(--sp-8); display:flex; align-items:baseline; justify-content:space-between; }
  .section-head h3{ margin:0; font-size:var(--fs-sm); font-weight:800; color:var(--ink-2); letter-spacing:.02em; }
  .section-head .link{ font-size:var(--fs-xs); color:var(--brand); font-weight:700; background:none; border:none; cursor:pointer; min-height:var(--tap-min); padding:0 2px; }

  /* ---- 画面そのものの見出し(履歴・設定・記録画面など。セクション見出しより一段大きい)
     アプリ名と同じ丸ゴシック系書体にして、見出し部分の事務的な印象を和らげる ---- */
  .screen-title{ display:block; margin:4px 0 var(--sp-12); font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:800; color:var(--ink); letter-spacing:0; }
  .section-head .screen-title{ margin:0; }

  /* ---- ワンタップ記録: 枠線カードではなく塗りタイル ---- */
  .preset-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
  .preset-chip{
    display:flex; align-items:center; gap:8px;
    min-height:var(--tap-min);
    padding:9px 10px; border-radius:10px; border:none; background:var(--tile);
    cursor:pointer; text-align:left; width:100%; position:relative;
    /* 強い枠線・影は付けず、ごく薄い内側のラインだけで「押せる面」であることを伝える */
    box-shadow:inset 0 0 0 1px rgba(31,111,92,0.07);
  }
  .preset-chip:active{ transform:scale(.97); }
  .preset-chip[disabled]{ opacity:.55; pointer-events:none; }
  .preset-chip .pc-plus{ width:22px; height:22px; border-radius:99px; background:var(--surface); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .preset-chip .pc-plus svg{ width:12px; height:12px; }
  .preset-chip .pc-body{ min-width:0; }
  .preset-chip .pc-name{ font-size:var(--fs-base); font-weight:700; line-height:1.3; }
  .preset-chip .pc-amount{ font-size:var(--fs-xs); color:var(--brand); font-weight:700; }

  /* ---- フラットな一覧行(区切り線のみで階層をつくる) ---- */
  .record-list{ display:flex; flex-direction:column; }
  .record-row{ display:flex; align-items:center; gap:var(--sp-8); padding:8px 0; border-bottom:1px solid var(--line); min-height:40px; }
  .record-row:last-child{ border-bottom:none; }
  .record-row .cat-dot{ width:7px; height:7px; border-radius:99px; flex:0 0 auto; }
  .record-row .r-main{ flex:1 1 auto; min-width:0; }
  .record-row .r-line1{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-8); }
  .record-row .r-name{ font-size:var(--fs-base); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .record-row .r-amount{ font-size:var(--fs-base); font-weight:700; color:var(--brand); white-space:nowrap; flex:0 0 auto; }
  .record-row .r-meta{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .record-row .r-actions{ display:flex; gap:2px; flex:0 0 auto; }
  /* タップ領域は必ず44×44px以上を確保し、見た目のアイコン(svg)だけを小さく描画する
     (以前のmax-width/max-height指定がタップ領域自体を32pxに縮めてしまっていたバグを修正)。 */
  .icon-btn{ width:var(--tap-min); height:var(--tap-min); flex:0 0 var(--tap-min); border-radius:var(--radius-sm); border:none; background:none; color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
  .icon-btn svg{ width:17px; height:17px; }

  .empty{ padding:var(--sp-16) var(--sp-12); text-align:center; border-radius:var(--radius-md); color:var(--ink-3); font-size:var(--fs-sm); line-height:1.8; }
  .empty svg{ width:24px; height:24px; color:var(--ink-3); margin-bottom:6px; }

  /* ---- 標準的なリスト行(記録画面の導線・設定画面で共用) ---- */
  .nav-group{ margin-top:var(--sp-12); }
  .nav-row{
    display:flex; align-items:center; gap:10px; width:100%;
    min-height:var(--tap-min); padding:11px 0; border-bottom:1px solid var(--line);
    background:none; border-left:none; border-right:none; border-top:none; cursor:pointer; text-align:left;
  }
  .nav-group .nav-row:last-child{ border-bottom:none; }
  .nav-row .nr-ic{ width:24px; height:24px; border-radius:99px; background:var(--tile); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .nav-row .nr-ic svg{ width:13px; height:13px; }
  .nav-row .nr-main{ flex:1 1 auto; min-width:0; }
  .nav-row .nr-name{ font-size:var(--fs-base); font-weight:700; display:block; }
  .nav-row .nr-desc{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; display:block; }
  .nav-row .nr-right{ display:flex; align-items:center; gap:6px; color:var(--ink-3); flex:0 0 auto; }
  .nav-row .nr-count{ font-size:var(--fs-xs); font-weight:700; }
  .nav-row .nr-chev{ width:14px; height:14px; }

  /* ---- ON/OFFトグル(触覚フィードバック設定など) ---- */
  .toggle-switch{ width:46px; height:26px; border-radius:99px; border:none; background:var(--line-strong); position:relative; cursor:pointer; flex:0 0 auto; padding:0; transition:background .18s; }
  .toggle-switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:99px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s; }
  .toggle-switch[aria-checked="true"]{ background:var(--brand); }
  .toggle-switch[aria-checked="true"]::after{ transform:translateX(20px); }

  /* ---- ホームの「次の実績」導線(スコアボード内の.sb-nextとして使う。単体でも成立する) ---- */
  .ach-teaser{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:var(--sp-8); padding:9px 2px; background:none; border:none; border-top:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-sm); font-weight:700; cursor:pointer; text-align:left; min-height:var(--tap-min); }
  .ach-teaser .nr-chev{ width:14px; height:14px; color:var(--ink-3); flex:0 0 auto; }

  /* ---- 実績一覧の見出し(現在の称号・等級・獲得数) ---- */
  .ach-summary{ margin:2px 0 var(--sp-12); padding-bottom:var(--sp-12); border-bottom:1px solid var(--line); }
  .ach-summary-title{ font-family:var(--font-rounded); font-weight:800; font-size:var(--fs-xl); }
  .ach-summary-meta{ display:flex; align-items:center; gap:8px; margin-top:5px; font-size:var(--fs-xs); color:var(--ink-3); font-weight:700; }

  /* ---- 実績一覧(高密度リスト。設定画面と同じ見た目のトーン) ---- */
  .ach-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
  .ach-row:last-child{ border-bottom:none; }
  .ach-icon{ width:34px; height:34px; border-radius:99px; background:var(--tile); color:var(--ink-3); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .ach-icon svg{ width:16px; height:16px; }
  .ach-icon.bronze{ background:var(--tier-bronze-soft); color:var(--tier-bronze); }
  .ach-icon.silver{ background:var(--tier-silver-soft); color:var(--tier-silver); }
  .ach-icon.gold{ background:var(--gold-soft); color:var(--gold); }
  .ach-icon.platinum{ background:var(--tier-platinum-soft); color:var(--tier-platinum); }
  .ach-icon.special{ background:var(--tier-special-soft); color:var(--tier-special); }
  .ach-main{ flex:1 1 auto; min-width:0; }
  .ach-name-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .ach-name{ font-size:var(--fs-base); font-weight:700; }
  .ach-row.locked .ach-name{ color:var(--ink-2); }
  .ach-desc{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; display:block; }
  .ach-progress-track{ height:3px; border-radius:99px; background:var(--line-strong); overflow:hidden; margin-top:6px; max-width:220px; }
  .ach-progress-fill{ height:100%; border-radius:99px; background:var(--brand); }
  .ach-check{ color:var(--brand); flex:0 0 auto; display:flex; }
  .ach-check svg{ width:16px; height:16px; }

  /* ---- 実績獲得オーバーレイ(等級ごとに強さをごくわずかに変える。過剰な発光・紙吹雪は使わない) ---- */
  .ach-overlay{ position:fixed; inset:0; z-index:75; background:rgba(10,18,14,0.5); display:flex; align-items:center; justify-content:center; padding:var(--sp-24); opacity:0; pointer-events:none; transition:opacity .22s; }
  .ach-overlay.show{ opacity:1; pointer-events:auto; }
  .ach-overlay[hidden]{ display:none; }
  .ach-overlay-card{ background:var(--surface); border-radius:var(--radius-lg); padding:var(--sp-24) var(--sp-16); text-align:center; max-width:300px; width:100%; transform:scale(.92); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
  .ach-overlay.show .ach-overlay-card{ transform:scale(1); }
  .ach-overlay-badge{ width:64px; height:64px; border-radius:99px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-8); }
  .ach-overlay-badge svg{ width:30px; height:30px; }
  .ach-overlay-badge.tier-bronze{ background:var(--tier-bronze-soft); color:var(--tier-bronze); }
  .ach-overlay-badge.tier-silver{ background:var(--tier-silver-soft); color:var(--tier-silver); }
  .ach-overlay-badge.tier-gold{ background:var(--gold-soft); color:var(--gold); box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent); }
  .ach-overlay-badge.tier-platinum{ background:var(--tier-platinum-soft); color:var(--tier-platinum); box-shadow:0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--tier-platinum) 26%, transparent); }
  .ach-overlay-badge.tier-special{ background:var(--tier-special-soft); color:var(--tier-special); box-shadow:0 0 0 3px var(--surface), 0 0 0 7px color-mix(in srgb, var(--tier-special) 30%, transparent); }
  .ach-overlay-tier{ margin:0 0 6px; }
  .ach-overlay-kicker{ font-size:var(--fs-xs); color:var(--brand); font-weight:800; letter-spacing:.04em; margin-bottom:4px; }
  .ach-overlay-name{ font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:800; margin-bottom:4px; }
  .ach-overlay-desc{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6; }
  .ach-overlay-comment{ margin-top:var(--sp-8); font-size:var(--fs-sm); color:var(--ink); font-weight:700; line-height:1.6; }
  .ach-overlay-more{ margin-top:var(--sp-8); font-size:var(--fs-xs); color:var(--ink-3); }

  /* ---- 初回オンボーディング(全画面) ---- */
  .onboarding-overlay{ position:fixed; inset:0; z-index:70; background:var(--surface); display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .22s; }
  .onboarding-overlay.show{ opacity:1; pointer-events:auto; }
  .onboarding-overlay[hidden]{ display:none; }
  .ob-top{ display:flex; justify-content:flex-end; flex:0 0 auto; padding:calc(var(--sp-16) + env(safe-area-inset-top)) var(--sp-16) 0; }
  .ob-skip{ background:none; border:none; color:var(--ink-3); font-size:var(--fs-sm); font-weight:700; cursor:pointer; min-height:var(--tap-min); padding:0 4px; }
  .ob-panel{ display:none; flex:1 1 auto; }
  .ob-panel.active{ display:flex; flex-direction:column; }
  .ob-body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--sp-24); }
  .ob-icon{ width:64px; height:64px; border-radius:99px; background:var(--tile); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-16); flex:0 0 auto; }
  .ob-icon svg{ width:30px; height:30px; }
  .ob-title{ font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:800; margin-bottom:var(--sp-8); }
  .ob-desc{ font-size:var(--fs-base); color:var(--ink-2); line-height:1.7; max-width:320px; }
  .ob-goal-field{ margin-top:var(--sp-16); width:100%; max-width:240px; }
  .ob-dots{ display:flex; justify-content:center; gap:6px; padding:0 0 var(--sp-12); flex:0 0 auto; }
  .ob-dot{ width:6px; height:6px; border-radius:99px; background:var(--line-strong); }
  .ob-dot.active{ background:var(--brand); width:16px; }
  .ob-bottom{ padding:0 var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom)); flex:0 0 auto; }

  /* ---- プリセット記録時に短く浮かぶ金額表示 ---- */
  .fly-amount{ position:fixed; z-index:80; pointer-events:none; font-size:var(--fs-base); font-weight:800; color:var(--brand); transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }

  /* ---------- record ---------- */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--btn-height); padding:0 var(--sp-16); border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface); font-weight:700; font-size:var(--fs-base); cursor:pointer; }
  .btn.primary{ background:var(--brand); color:var(--brand-on); border-color:transparent; }
  .btn.text{ background:none; border-color:transparent; color:var(--brand); }
  .btn.danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
  .btn.block{ width:100%; }
  .btn svg{ width:15px; height:15px; }

  .field{ margin-bottom:var(--sp-12); }
  .field label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--ink-2); margin-bottom:4px; }
  .field input, .field select, .field textarea{ width:100%; min-height:var(--tap-min); padding:10px var(--sp-12); border-radius:var(--radius-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-size:var(--fs-base); }
  .field textarea{ resize:vertical; min-height:54px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .fixed-preview{ margin-top:2px; padding:var(--sp-12) var(--sp-12); border-radius:var(--radius-md); background:var(--surface-2); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.75; }
  .fixed-preview b{ color:var(--gold); font-weight:700; }
  .fixed-preview .mono{ color:var(--gold); font-weight:700; }

  /* ---------- history: 日付見出し+区切り線だけの高密度リスト ---------- */
  .day-group{ margin-bottom:4px; }
  .day-group h4{ margin:14px 0 2px; font-size:var(--fs-xs); color:var(--ink-3); font-weight:800; letter-spacing:.02em; }
  .day-group:first-child h4{ margin-top:0; }

  /* ---------- analysis ---------- */
  .segmented{ display:flex; gap:2px; border-bottom:1px solid var(--line-strong); }
  .segmented button{ flex:1 1 0; min-height:44px; padding:0 2px 8px; border:none; border-bottom:2px solid transparent; background:none; font-size:var(--fs-xs); font-weight:700; color:var(--ink-3); cursor:pointer; margin-bottom:-1px; }
  .segmented button[aria-current="true"]{ color:var(--brand); border-bottom-color:var(--brand); }

  .period-total{ margin-top:var(--sp-12); font-size:var(--fs-sm); color:var(--ink-2); font-weight:700; }
  .period-total .mono{ color:var(--ink); font-weight:800; }

  .rank-row{ display:flex; align-items:center; gap:8px; padding:7px 0; }
  .rank-badge{ width:16px; font-size:var(--fs-xs); color:var(--ink-3); font-weight:700; flex:0 0 auto; }
  .rank-row.top .rank-badge{ color:var(--gold); }
  .rank-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .rank-top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-8); }
  .rank-top .rn{ font-weight:700; font-size:var(--fs-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rank-top .rv{ font-weight:700; font-size:var(--fs-base); color:var(--ink-2); flex:0 0 auto; text-align:right; min-width:5.5em; }
  /* 割合を示す控えめな背景バー(派手な演出はせず、最大項目比の目安として表示) */
  .rank-track{ height:4px; border-radius:99px; background:var(--line-strong); overflow:hidden; }
  .rank-fill{ height:100%; border-radius:99px; background:var(--brand); opacity:.8; }
  .rank-row.top .rank-fill{ background:var(--gold); opacity:.85; }

  .cat-stack{ display:flex; height:10px; border-radius:99px; overflow:hidden; gap:1px; background:var(--surface-2); }
  .cat-stack span{ height:100%; }
  .cat-legend{ display:flex; flex-direction:column; margin-top:var(--sp-12); }
  .cat-legend-row{ display:flex; align-items:center; gap:8px; font-size:var(--fs-base); padding:6px 0; border-bottom:1px solid var(--line); }
  .cat-legend-row:last-child{ border-bottom:none; }
  .cat-legend-row .cat-dot{ width:8px; height:8px; border-radius:3px; flex:0 0 auto; }
  .cat-legend-row .cl-name{ flex:1 1 auto; font-weight:700; }
  .cat-legend-row .cl-val{ color:var(--ink-2); font-weight:700; }

  /* ---------- settings: 標準的な設定リスト(グループ+区切り線) ---------- */
  .settings-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); min-height:40px; }
  .settings-row:last-child{ border-bottom:none; }
  .settings-row .sr-main{ flex:1 1 auto; min-width:0; }
  .settings-row .sr-name{ font-size:var(--fs-base); font-weight:700; display:block; }
  .settings-row .sr-meta{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; display:block; }
  .settings-row .sr-status{ font-size:var(--fs-xs); font-weight:700; margin-top:1px; display:block; }
  .settings-row .sr-status.is-home{ color:var(--brand); }
  .settings-row .sr-status.is-off{ color:var(--ink-3); }

  /* ---------- よく使う記録の管理: ホーム表示切替・並べ替え・編集・削除を
     1行に詰め込みすぎないよう、上段(名称・状態)/下段(操作)の2段構成にする ---------- */
  .preset-mgmt-row{ flex-direction:column; align-items:stretch; gap:6px; }
  .preset-mgmt-row .pm-top{ display:flex; align-items:center; gap:10px; }
  .preset-mgmt-row .pm-controls{ display:flex; align-items:center; gap:2px; padding-left:24px; }
  .preset-mgmt-row .pm-order{ display:flex; gap:0; }
  .preset-mgmt-row .pm-spacer{ flex:1 1 auto; }
  .preset-mgmt-row .pm-danger{ display:flex; align-items:center; gap:0; margin-left:6px; padding-left:6px; border-left:1px solid var(--line); }
  .preset-mgmt-row .icon-btn.is-danger{ color:var(--danger); }
  .preset-mgmt-row .icon-btn[disabled]{ opacity:.35; pointer-events:none; }

  .home-preset-empty-link{ margin-top:8px; }

  .settings-nav-list{ display:flex; flex-direction:column; }

  .subview-head{ display:flex; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-12); }
  .subview-head h2{ margin:0; font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:700; }

  .future-list{ margin-top:var(--sp-16); padding-top:var(--sp-12); border-top:1px solid var(--line); }
  .future-list h4{ margin:0 0 6px; font-size:var(--fs-xs); font-weight:800; color:var(--ink-3); letter-spacing:.02em; }
  .future-list p{ margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.85; }
  .danger-zone{ margin-top:var(--sp-24); }

  .hint{ margin:var(--sp-8) 0 0; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.8; }

  /* ---------- toast / snackbar ---------- */
  .toast{
    position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
    transform:translate(-50%,12px); width:min(448px, calc(100vw - 32px));
    padding:10px 10px 10px 15px; border-radius:var(--radius-md); background:var(--brand); color:var(--brand-on);
    font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; gap:8px;
    box-shadow:0 14px 28px -10px var(--shadow); opacity:0; pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s; z-index:50;
  }
  .toast.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
  .toast svg{ width:16px; height:16px; flex:0 0 auto; }
  .toast .toast-text{ flex:1 1 auto; }
  .toast .toast-action{ flex:0 0 auto; background:rgba(255,255,255,0.18); border:none; color:inherit; font-weight:800; font-size:var(--fs-sm); border-radius:var(--radius-sm); padding:7px 10px; min-height:34px; cursor:pointer; }

  /* ---------- modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(10,18,14,0.44);
    display:flex; align-items:flex-end; justify-content:center; z-index:60;
    opacity:0; pointer-events:none; transition:opacity .22s;
  }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  .modal-sheet{
    width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
    background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:var(--sp-16) var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom));
    transform:translateY(18px); transition:transform .26s cubic-bezier(.2,.8,.2,1);
    border-top:1px solid var(--line);
  }
  .modal-overlay.show .modal-sheet{ transform:translateY(0); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-12); }
  .modal-head h3{ margin:0; font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:700; }

  @media (prefers-reduced-motion: reduce){ *{ transition-duration:.001ms !important; animation-duration:.001ms !important; } }

  /* 視覚的には表示しないが、スクリーンリーダーには読み上げさせるためのラベル用ユーティリティ */
  .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; }

  /* ---------- 言語切り替え(v2.2.0) ---------- */
  .lang-switch{ display:inline-flex; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:99px; overflow:hidden; background:var(--surface); }
  .lang-switch button{ min-height:var(--tap-min); min-width:84px; padding:0 14px; border:none; background:none; color:var(--ink-2); font-size:var(--fs-sm); font-weight:700; cursor:pointer; }
  .lang-switch button[aria-pressed="true"]{ background:var(--brand); color:var(--brand-on); }
  .lang-switch.sm button{ min-width:0; padding:0 12px; font-size:var(--fs-xs); }
  .lang-row{ flex-wrap:wrap; }
  .onboarding-overlay .ob-top{ justify-content:space-between; align-items:center; }