/* ---------- tokens (B / AMBER restyle · Phase 1) ----------
     旧 cyber-world の変数名は残したまま値だけ差し替えている。
     --magenta / --cyan は同じ accent(#ff8f3f) を指す → 旧グラデ(magenta→cyan)は
     実質ベタのアンバーに畳まれる。--violet は薄いアンバー寄りに。 */
  :root{
    --bg:            #07090c;
    --bg-deep:       #05070a;
    --panel:         #0b0e12;   /* 不透明。旧 rgba(...,.55) + blur は廃止 */
    --panel-solid:   #0d1116;
    --panel-border:  rgba(235, 170, 120, 0.15);  /* アンバー寄りのヘアライン */
    --hairline:      rgba(235, 170, 120, 0.08);
    --dot:           rgba(235, 170, 120, 0.055); /* 背景ドットグリッド */

    --accent:        #ff8f3f;
    --accent-dim:    rgba(255, 143, 63, 0.30);
    --magenta:       #ff8f3f;
    --magenta-dim:   rgba(255, 143, 63, 0.30);
    --cyan:          #ff8f3f;
    --cyan-dim:      rgba(255, 143, 63, 0.26);
    --violet:        #ffb579;

    --text:          #e8e4de;
    --text-dim:      #9a938a;
    --text-faint:    #7d7368;

    --ok:            #5ec98a;
    --warn:          #d8c24a;
    --err:           #ff5c5c;

    --font-display:  'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
    --font-body:     'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  }

  *{ box-sizing: border-box; }
  html, body{ margin:0; padding:0; }

  /* ---------- スクロールバー(ブラウザ既定の白いバーを世界観に合わせる) ---------- */
  *{ scrollbar-width: thin; scrollbar-color: rgba(255,143,63,0.30) rgba(255,255,255,0.04); }
  *::-webkit-scrollbar{ width:8px; height:8px; }
  *::-webkit-scrollbar-track{ background: rgba(255,255,255,0.03); }
  *::-webkit-scrollbar-thumb{
    background: rgba(255,143,63,0.30); border-radius:5px;
    border:2px solid transparent; background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(255,143,63,0.5); background-clip:padding-box; }
  *::-webkit-scrollbar-corner{ background: transparent; }

  body{
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
    background-size: 24px 24px;
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    padding: clamp(12px, 2.4vw, 28px);
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; color: inherit; }
  /* ネイティブフォーム部品の既定色(青)をアンバーに寄せる。チェック/ラジオ/進捗/レンジ */
  input[type="checkbox"], input[type="radio"]{ accent-color: var(--accent); }

  .frame{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vw, 18px);
  }
  /* .frame sets its own `display`, which (per CSS cascade origin rules) overrides the
     browser's default `[hidden]{display:none}` UA style even though specificity looks
     tied — without this rule, a hidden .frame view stays rendered and overlaps the
     visible one. Higher specificity than `.frame` alone so it always wins. */
  .frame[hidden]{ display: none; }

  /* ---------- shared panel look ---------- */
  .panel{
    position: relative;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
  }

  /* ---------- header ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 20px;
    gap: 16px;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:38px; height:38px; position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .brand-mark svg{ width:100%; height:100%; filter: drop-shadow(0 0 6px var(--magenta)); }
  .brand-text .name{
    font-family: var(--font-display); font-weight:700; font-size: 17px;
    letter-spacing: 2px; line-height:1.1;
    background: linear-gradient(90deg, #fff, var(--cyan));
    -webkit-background-clip: text; background-clip:text; color:transparent;
  }
  .brand-text .tag{
    font-size: 11px; color: var(--text-faint); letter-spacing: 1px; margin-top:2px;
  }

  .nav{ display:flex; align-items:center; gap:28px; }
  .nav a{
    font-family: var(--font-display); font-size: 12px; letter-spacing: 2px;
    color: var(--text-dim); padding: 6px 2px; position:relative; cursor:pointer;
  }
  .nav a.active{ color: var(--text); }
  .nav a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background: linear-gradient(90deg, var(--magenta), var(--cyan));
    box-shadow: 0 0 8px var(--magenta);
  }

  .top-actions{ display:flex; align-items:center; gap:18px; }
  .icon-btn{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); display:flex; align-items:center; justify-content:center;
    cursor:pointer; position:relative; transition: border-color .15s ease, transform .15s ease;
  }
  .icon-btn:hover{ border-color: var(--cyan); transform: translateY(-1px); }
  .icon-btn:focus-visible, .quick-tile:focus-visible, .nav a:focus-visible,
  .cal-view-btn:focus-visible, .cal-nav-btn:focus-visible, .cal-today-btn:focus-visible,
  .cal-back-btn:focus-visible, .cal-new-btn:focus-visible, .modal-close:focus-visible,
  .cal-event-block:focus-visible, .cal-month-chip:focus-visible, .cal-allday-chip:focus-visible{
    outline: 2px solid var(--cyan); outline-offset: 2px;
  }
  .icon-btn svg{ width:16px; height:16px; stroke: var(--text-dim); }
  .dot-badge{
    position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%;
    background: var(--magenta); box-shadow: 0 0 6px var(--magenta);
  }
  .dot-badge[hidden]{ display:none; }

  /* ---------- 通知センター(ベル) ---------- */
  /* 各 .panel は backdrop-filter で独自のスタッキングコンテキストを作るため、
     ヘッダー内に absolute で置くと後続の .hero パネルに隠れる。position:fixed +
     高い z-index で全パネルより前面に出し、位置は JS がベルの座標から算出する。 */
  .notif-wrap{ position:relative; display:flex; }
  .notif-panel{
    position:fixed; top:64px; right:28px; z-index:85;
    width:300px; max-width:calc(100vw - 24px);
    background: var(--panel-solid); border:1px solid var(--panel-border);
    border-radius:12px; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    overflow:hidden;
  }
  .notif-panel[hidden]{ display:none; }
  .notif-panel-head{
    padding:12px 15px; font-family: var(--font-display); font-size:11px;
    letter-spacing:2px; color: var(--cyan); border-bottom:1px solid var(--hairline);
  }
  .notif-list{ list-style:none; margin:0; padding:6px; max-height:340px; overflow-y:auto; }
  .notif-item{
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 10px; border-radius:8px; cursor:pointer;
    border:1px solid transparent;
  }
  .notif-item:hover{ background: rgba(255,255,255,0.03); border-color: var(--hairline); }
  .notif-item.notif-static{ cursor:default; }
  .notif-item.notif-static:hover{ background:none; border-color:transparent; }
  .notif-ico{ flex:none; font-size:15px; line-height:1.3; }
  .notif-body{ flex:1; min-width:0; }
  .notif-title{ font-size:12.5px; color: var(--text); }
  .notif-sub{ font-size:11px; color: var(--text-faint); margin-top:2px; }
  .notif-item.notif-warn .notif-title{ color: var(--warn); }
  .notif-empty{ padding:18px 12px; text-align:center; font-size:12px; color: var(--text-faint); }
  .notif-panel-foot{
    display:flex; flex-direction:column; gap:6px;
    padding:10px; border-top:1px solid var(--hairline);
  }
  .notif-foot-btn{
    width:100%; cursor:pointer; padding:7px 10px; border-radius:7px;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); font-family: var(--font-body); font-size:11.5px; letter-spacing:.3px;
  }
  .notif-foot-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .notif-foot-btn[hidden]{ display:none; }
  .notif-foot-btn.is-on{ border-color: var(--ok); color: var(--ok); }
  .profile{ display:flex; align-items:center; gap:10px; cursor:pointer; }
  .avatar{
    width:32px; height:32px; border-radius:2px;
    background: rgba(255,143,63,0.12); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:12px; font-weight:500;
    border: 1px solid var(--panel-border);
  }
  .profile-meta .uname{ font-family: var(--font-display); font-size:12px; letter-spacing:1px; }
  .profile-meta .status{ font-size:11px; color: var(--ok); display:flex; align-items:center; gap:5px; margin-top:2px; }
  .status::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--ok); box-shadow: 0 0 5px var(--ok); }
  .profile:hover .avatar, .profile:focus-visible .avatar{ border-color: var(--accent); }
  .profile-menu{
    position:fixed; z-index:86;
    min-width:190px; max-width:calc(100vw - 24px);
    background: var(--panel-solid); border:1px solid var(--panel-border);
    border-radius:12px; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    overflow:hidden;
  }
  .profile-menu[hidden]{ display:none; }
  .profile-menu-head{
    padding:11px 14px; font-family: var(--font-mono); font-size:10.5px;
    letter-spacing:.5px; color: var(--text-faint); border-bottom:1px solid var(--hairline);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .profile-menu-btn{
    display:block; width:100%; text-align:left; cursor:pointer;
    padding:10px 14px; border:0; background:none;
    color: var(--text-dim); font-family: var(--font-body); font-size:12px; letter-spacing:.3px;
  }
  .profile-menu-btn:hover, .profile-menu-btn:focus-visible{ background: rgba(255,255,255,0.04); color: var(--text); }

  /* ---------- hero ---------- */
  .hero{
    display:grid; grid-template-columns: minmax(260px, 340px) 1fr;
    min-height: clamp(340px, 42vw, 460px);
    overflow:hidden;
  }
  @media (max-width: 820px){ .hero{ grid-template-columns: 1fr; } }

  .hero-hud{
    padding: 22px 24px;
    border-right: 1px solid var(--hairline);
    display:flex; flex-direction:column; gap: 18px;
  }
  @media (max-width: 820px){ .hero-hud{ border-right:none; border-bottom:1px solid var(--hairline); } }

  .hud-label{
    font-family: var(--font-display); font-size:11px; letter-spacing: 3px; color: var(--cyan);
  }
  .hud-date{
    font-family: var(--font-display); font-size: 15px; letter-spacing:1px; color: var(--text-dim);
    margin-top: 6px; display:flex; align-items:baseline; gap:10px;
  }
  .hud-date .yr{ color: var(--text-faint); font-size:12px; }

  .hud-clock-wrap{ position: relative; display:flex; align-items:center; justify-content:center; margin: 6px 0; }
  .hud-ring{ position:absolute; width: 210px; height:210px; }
  .hud-clock{
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: clamp(30px, 4vw, 40px); font-weight:700; letter-spacing:1px;
    text-shadow: 0 0 16px var(--magenta-dim), 0 0 30px rgba(255,143,63,0.15);
    display:flex; align-items:baseline; gap:2px;
  }
  .hud-clock .sec{ font-size: 0.55em; color: var(--cyan); }

  .hud-tz{ text-align:center; font-size:11px; letter-spacing:2px; color: var(--text-faint); }
  .hud-tz b{ color: var(--text-dim); font-weight: 500; }

  .hud-quote{
    font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--hairline); padding-top:14px;
    font-style: italic;
  }

  .hud-weather{
    display:flex; align-items:center; justify-content:space-between;
    border-top: 1px solid var(--hairline); padding-top:14px; margin-top:auto;
    font-size: 13px;
  }
  .hud-weather .place{ display:flex; align-items:center; gap:8px; color: var(--text-dim); }
  .hud-weather .temp{ font-family: var(--font-display); font-size:16px; }
  .hud-weather .range{ color: var(--text-faint); font-size:11.5px; text-align:right; }
  .weather-note{ font-size: 9.5px; color: var(--text-faint); letter-spacing: .5px; margin-top:2px; }

  /* ---------- hero scene（ユーザー提供の実写ヒーロー画像） ---------- */
  .scene{ position: relative; overflow:hidden; }
  .scene-illustration{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
  .scene.has-illustration .scene-illustration{ display:block; }

  /* ---------- footer grid ---------- */
  .grid3{
    display:grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: clamp(12px, 1.6vw, 18px);
  }
  @media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } }

  .card-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px 12px;
  }
  .card-head h2{
    margin:0; font-family: var(--font-display); font-size:13px; letter-spacing:2px;
    display:flex; align-items:center; gap:10px; font-weight:600;
  }
  .card-head h2 .ico{ width:16px; height:16px; stroke: var(--magenta); }
  .card-head .more{ font-size:11.5px; color: var(--text-faint); display:flex; align-items:center; gap:4px; }
  .card-body{ padding: 4px 18px 18px; }

  /* schedule */
  .sched-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  /* TODAY'S SCHEDULE は件数でカード高が動かないよう固定 + はみ出しはスクロール */
  #sched-list{ height:176px; overflow-y:auto; }
  .sched-list li{ display:flex; align-items:center; gap:12px; font-size:14px; }
  .sched-dot{ width:6px; height:6px; border-radius:50%; flex:none; background: var(--accent); }
  .sched-time{ font-family: var(--font-mono); color: var(--text-dim); font-size:13px; min-width:46px; }
  .sched-title{ color: var(--text); flex:1; }
  .sched-empty, .sched-error{ font-size: 13px; color: var(--text-faint); padding: 6px 0; }
  .sched-error{ color: var(--err); }
  .sched-source{ font-size: 10px; color: var(--text-faint); letter-spacing: .5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; }
  .sched-source .live{ color: var(--ok); }
  .sched-source-right{ display:flex; align-items:center; gap:8px; }
  .sched-refresh-btn{
    width:20px; height:20px; padding:0; border-radius:50%; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); color: var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none;
    transition: border-color .15s ease, color .15s ease, transform .4s ease;
  }
  .sched-refresh-btn svg{ width:11px; height:11px; }
  .sched-refresh-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .sched-refresh-btn.spinning svg{ animation: sched-spin .7s linear infinite; }
  .sched-refresh-btn:disabled{ cursor:default; opacity:.6; }
  @keyframes sched-spin{ to{ transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .sched-refresh-btn.spinning svg{ animation:none; } }

  .progress-wrap{ margin-top: 16px; }
  .progress-label{ display:flex; justify-content:space-between; font-size:11.5px; color: var(--text-faint); letter-spacing:1px; margin-bottom:6px; }
  .progress-track{ height:6px; border-radius:3px; background: rgba(255,255,255,0.06); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:3px; background: linear-gradient(90deg, var(--magenta), var(--cyan)); box-shadow: 0 0 8px var(--magenta-dim); }

  /* quick access */
  .quick-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
  .quick-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding: 16px 6px; border-radius:10px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); cursor:pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    position:relative;
  }
  .quick-tile:hover{ border-color: var(--accent); background: rgba(255,143,63,0.05); }
  .quick-tile svg{ width:22px; height:22px; stroke: var(--cyan); }
  .quick-tile span{ font-size:12px; color: var(--text-dim); letter-spacing:.5px; }
  .quick-tile .tile-dot{ position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background: var(--accent); }

  /* inbox — simple unread-count tile, click through to the full メール page */
  .inbox-count-btn{
    all: unset; box-sizing: border-box; cursor:pointer; display:flex; align-items:baseline; gap:10px;
    padding: 9px 4px; width:100%;
  }
  .inbox-count-btn + .inbox-count-btn{ border-top: 1px solid var(--hairline); }
  .inbox-count-btn:hover .inbox-count-num{ filter: brightness(1.15); }
  .inbox-count-btn:focus-visible{ outline: 1px solid var(--cyan); outline-offset:2px; border-radius:6px; }
  .inbox-count-num{
    font-family: var(--font-display); font-size: 20px; font-weight:600; line-height:1;
    color: var(--text);
  }
  .inbox-count-label{ font-size: 13px; color: var(--text-dim); }
  .inbox-count-acct{ margin-left:auto; font-size: 10px; letter-spacing:1px; color: var(--text-faint); border:1px solid var(--hairline); border-radius:4px; padding:1px 6px; }
  .inbox-reconnect{
    display:block; margin-top: 8px; font-size: 11px; padding: 5px 12px; border-radius: 6px;
    border: 1px solid var(--hairline); background: rgba(255,255,255,0.02);
    color: var(--text-dim); cursor: pointer; letter-spacing: .5px; font-family: var(--font-body);
    transition: border-color .15s ease, color .15s ease;
  }
  /* 契約書アラート行。メール件数と同じ行フォーマットのまま数字だけ warn 色にする。
     .inbox-count-btn は `all: unset` + `display:flex` を持つので [hidden] を明示的に打ち消す。 */
  /* 自動更新は「要確認」なのでアクセント色（アラートの warn とは区別する）。 */
  .inbox-auto-btn .inbox-count-num{ color: var(--accent); }
  .inbox-auto-btn:hover .inbox-count-label{ color: var(--text); }
  .inbox-alert-btn .inbox-count-num{ color: var(--warn); }
  .inbox-alert-btn:hover .inbox-count-label{ color: var(--text); }
  .inbox-count-btn[hidden]{ display:none; }
  .inbox-reconnect[hidden]{ display:none; }
  .inbox-reconnect:hover{ border-color: var(--cyan); color: var(--text); }

  /* ---------- mail page ---------- */
  .mail-body{ display:flex; align-items:flex-start; gap:0; padding:0; }
  .mail-sidebar{
    width:172px; flex:none; align-self:stretch; box-sizing:border-box;
    border-right:1px solid var(--panel-border); padding:10px 4px 12px 12px;
    position:sticky; top:8px; max-height:78vh; overflow-y:auto;
  }
  .mail-sidebar-head{ font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); padding:2px 6px 8px; }
  .mail-label-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
  .mail-label-loading{ font-size:11px; color: var(--text-faint); padding:8px 6px; }
  .mail-label-item{
    display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:6px; cursor:pointer;
    font-size:12px; color: var(--text-dim); transition: background .12s, color .12s;
  }
  .mail-label-item:hover{ background: rgba(255,255,255,0.04); color: var(--text); }
  .mail-label-item.is-active{ background: rgba(255,143,63,0.12); color: var(--cyan); }
  .mail-label-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-label-badge{
    flex:none; font-family: var(--font-mono); font-size:10px; color: var(--text-faint);
    background: rgba(255,255,255,0.07); border-radius:9px; padding:1px 6px;
  }
  .mail-label-item.is-active .mail-label-badge{ color: var(--cyan); background: rgba(255,143,63,0.18); }
  .mail-body-main{ flex:1 1 auto; min-width:0; padding:8px 8px 14px; }
  @media (max-width: 760px){
    .mail-body{ flex-direction:column; }
    .mail-sidebar{
      width:auto; align-self:auto; position:static; max-height:none;
      border-right:none; border-bottom:1px solid var(--panel-border); padding:8px 10px;
    }
    .mail-sidebar-head{ display:none; }
    .mail-label-list{ flex-direction:row; flex-wrap:wrap; gap:4px; }
    .mail-label-item{ padding:5px 9px; }
    .mail-label-name{ overflow:visible; }
    .mail-body-main{ padding:10px 6px 14px; }
  }

  .mail-list{ list-style:none; margin:0; padding:4px 4px 8px; display:flex; flex-direction:column; }
  .mail-item{
    display:flex; align-items:flex-start; gap:14px; padding:14px 10px; border-radius:10px; cursor:pointer;
    border-bottom:1px solid var(--hairline); transition: background .15s ease;
  }
  .mail-item:last-child{ border-bottom:none; }
  .mail-item:hover{ background: rgba(255,143,63,0.05); }
  .mail-avatar{
    width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:12px; font-weight:700; color: var(--text);
    background: var(--accent-dim);
  }
  .mail-main{ flex:1; min-width:0; }
  .mail-top-row{ display:flex; align-items:baseline; gap:10px; }
  .mail-from{ font-size:13.5px; color: var(--text); }
  .mail-item.unread .mail-from{ font-weight:700; }
  .mail-time{ margin-left:auto; font-size:11px; color: var(--text-faint); white-space:nowrap; font-family: var(--font-mono); }
  .mail-subject{ font-size:13.5px; color: var(--text-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-item.unread .mail-subject{ color: var(--text); }
  .mail-snippet{ font-size:12px; color: var(--text-faint); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-unread-dot{ width:8px; height:8px; border-radius:50%; background: var(--cyan); box-shadow:0 0 5px var(--cyan); flex:none; margin-top:6px; }
  .mail-pager{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 20px 16px; border-top:1px solid var(--hairline); }
  .mail-pager[hidden]{ display:none; }
  .mail-pager .cal-nav-btn{ width:auto; height:auto; padding:7px 16px; font-size:10px; font-family: var(--font-mono); letter-spacing:.5px; white-space:nowrap; }
  .mail-pager-info{ font-size:11px; color: var(--text-faint); letter-spacing:.5px; font-family: var(--font-mono); white-space:nowrap; }
  .cal-nav-btn:disabled{ opacity:.35; cursor:default; }

  /* ---------- tasks & notes (self-persisted via the artifact capability) ---------- */
  .task-input{
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:8px;
    color: var(--text); font-family: var(--font-body); font-size:13px; padding:7px 12px; width:240px;
  }
  .task-input:focus{ outline:none; border-color: var(--cyan); }
  .task-add-btn, .note-add-btn{
    font-family: var(--font-display); font-size:11px; letter-spacing:1px; padding:8px 14px; border-radius:8px;
    border:1px solid var(--cyan); background: rgba(255,143,63,0.08); color: var(--text); cursor:pointer; white-space:nowrap;
  }
  .task-add-btn:hover, .note-add-btn:hover{ background: rgba(255,143,63,0.16); }

  .tag-badge{
    display:inline-flex; align-items:center; font-family: var(--font-mono); font-size:9px; letter-spacing:.5px;
    padding:2px 8px; border-radius:3px; border:1px solid; flex:none;
  }
  /* はるか(個人)= アクセント / SYSLEA(仕事)= ニュートラル で色を分ける */
  .tag-badge.tag-haruka{ color: var(--accent); border-color: rgba(255,143,63,0.35); background: rgba(255,143,63,0.10); }
  .tag-badge.tag-syslea{ color: var(--text-dim); border-color: var(--panel-border); background: rgba(255,255,255,0.03); }

  .task-list-wrap{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }

  .task-item:last-child{ border-bottom:none; }
  .task-row{ display:flex; align-items:center; gap:10px; padding:10px 8px; cursor:pointer; border-bottom:1px solid var(--hairline); }
  .task-item:last-child .task-row{ border-bottom:none; }
  .task-item.expanded .task-row{ border-bottom-color:transparent; }
  .task-check{
    width:19px; height:19px; border-radius:5px; border:1px solid var(--panel-border); background:transparent;
    cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; color: var(--ok); padding:0;
  }
  .task-check svg{ width:12px; height:12px; opacity:0; }
  .task-item.done .task-check{ background: rgba(60,242,180,0.15); border-color: var(--ok); }
  .task-item.done .task-check svg{ opacity:1; }
  .task-text{ flex:1; min-width:0; font-size:13.5px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .task-item.done .task-text{ color: var(--text-faint); text-decoration:line-through; }
  .task-due{ font-size:11.5px; color: var(--text-dim); font-family: var(--font-mono); white-space:nowrap; flex:none; }
  .task-due[data-overdue="true"]{ color: var(--err); }
  .task-row .tag-badge{ flex:none; }
  .task-expand-btn{
    width:22px; height:22px; border:none; background:transparent; color: var(--text-faint); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none; padding:0;
  }
  .task-expand-btn svg{ width:11px; height:11px; transition: transform .2s ease; }
  .task-item.expanded .task-expand-btn svg{ transform: rotate(180deg); }
  .task-del-btn{
    width:24px; height:24px; border-radius:50%; border:1px solid transparent; background:transparent;
    color: var(--text-faint); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center;
  }
  .task-del-btn:hover{ color: var(--err); border-color: var(--err); }
  .task-del-btn svg{ width:13px; height:13px; }
  .task-detail{ padding:0 8px 14px 41px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--hairline); }
  .task-item:last-child .task-detail{ border-bottom:none; }
  .task-item:not(.expanded) .task-detail{ display:none; }
  .task-repeat-badge{
    display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color: var(--violet); border:1px solid rgba(255,181,121,0.4);
    background: rgba(255,181,121,0.08); border-radius:20px; padding:3px 10px; width:fit-content;
  }
  .task-repeat-badge svg{ width:11px; height:11px; stroke: var(--violet); flex:none; }
  .task-url{
    display:inline-flex; align-items:center; gap:4px; width:fit-content; max-width:100%;
    color: var(--cyan); text-decoration:none; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .task-url:hover{ text-decoration:underline; }
  .task-url svg{ width:11px; height:11px; flex:none; }
  .task-remarks{ font-size:12px; color: var(--text-dim); line-height:1.6; white-space:pre-line; }
  .task-edit-btn{
    align-self:flex-start; font-family: var(--font-body); font-size:11.5px; padding:5px 12px; border-radius:6px;
    border:1px solid var(--panel-border); background:transparent; color: var(--text-dim); cursor:pointer;
  }
  .task-edit-btn:hover{ border-color: var(--cyan); color: var(--text); }

  /* 自由タグ */
  .task-due-inline{ display:flex; gap:8px; }
  .task-due-inline input{ min-width:0; }
  .task-tags-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .task-tags-chips[hidden]{ display:none; }
  .task-freetag{
    display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-family: var(--font-mono);
    color: var(--text-dim); border:1px solid var(--panel-border); background: rgba(255,255,255,0.03);
    border-radius:3px; padding:2px 7px; letter-spacing:.3px;
  }
  .task-tags-chips .task-freetag{ cursor:default; }
  .task-tags-chips .task-freetag button{
    border:none; background:none; color: var(--text-faint); cursor:pointer; padding:0; font-size:13px; line-height:1;
  }
  .task-tags-chips .task-freetag button:hover{ color: var(--err); }
  .task-row-tags{ display:inline-flex; gap:5px; flex:none; }

  /* ---- タスク管理: サイドバー＋2カラム ---- */
  .task-layout{ display:grid; grid-template-columns: 190px 1fr; padding:0; overflow:hidden; }
  .task-sidebar{ border-right:1px solid var(--hairline); padding:14px 12px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; max-height:72vh; }
  .task-side-group[hidden]{ display:none; }
  .task-side-title{ font-family: var(--font-mono); font-size:9px; letter-spacing:1.5px; color: var(--text-faint); margin-bottom:6px; }
  .task-side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
  .task-side-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 8px; border-radius:3px; cursor:pointer; font-size:12px; color: var(--text-dim); }
  .task-side-item:hover{ background: rgba(255,255,255,0.03); color: var(--text); }
  .task-side-item.is-active{ background: rgba(255,143,63,0.10); color: var(--accent); }
  .task-side-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .task-side-count{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); flex:none; }
  .task-side-item.is-active .task-side-count{ color: var(--accent); }
  .task-main{ padding:14px 14px 18px; min-width:0; }
  .task-status-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--panel-border); margin-bottom:10px; }
  .task-status-tab{ font-family: var(--font-mono); font-size:11px; letter-spacing:.3px; cursor:pointer; color: var(--text-faint); background:transparent; border:none; border-bottom:2px solid transparent; padding:6px 12px; }
  .task-status-tab span{ color: var(--text-faint); }
  .task-status-tab.is-active{ color: var(--accent); border-bottom-color: var(--accent); }
  .task-status-tab.is-active span{ color: var(--accent); }
  .task-tree{ list-style:none; margin:0; padding:0; max-width:640px; }
  .task-item.is-child{ margin-left:22px; border-left:1px solid var(--hairline); padding-left:8px; }
  .task-kid-count{ font-family: var(--font-mono); font-size:10px; color: var(--text-faint); border:1px solid var(--panel-border); border-radius:3px; padding:1px 5px; flex:none; }
  .task-detail-btns{ display:flex; gap:8px; flex-wrap:wrap; }
  .task-subtask-btn{ font-family: var(--font-body); font-size:11.5px; padding:5px 12px; border-radius:6px; border:1px solid var(--panel-border); background:transparent; color: var(--text-dim); cursor:pointer; }
  .task-subtask-btn:hover{ border-color: var(--accent); color: var(--text); }
  @media (max-width: 860px){
    .task-layout{ grid-template-columns: 1fr; }
    .task-sidebar{ border-right:none; border-bottom:1px solid var(--hairline); flex-direction:row; flex-wrap:wrap; max-height:none; gap:14px 20px; }
    .task-side-group{ flex:1 1 130px; }
  }
  .task-empty{ padding:24px; text-align:center; color: var(--text-faint); font-size:13px; }

  .notes-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; padding:8px 4px; }
  .note-card{
    border:1px solid var(--panel-border); border-radius:10px; padding:14px; background: rgba(255,255,255,0.02);
    cursor:pointer; display:flex; flex-direction:column; gap:6px; min-height:100px; min-width:0;
    transition: border-color .15s ease, transform .15s ease;
  }
  .note-card:hover{ border-color: var(--violet); transform: translateY(-2px); }
  .note-card .note-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .note-card .note-title{ font-family: var(--font-display); font-size:13px; letter-spacing:.5px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .note-card .note-snippet{ font-size:12px; color: var(--text-faint); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:pre-line; }
  .note-card .note-snippet strong{ color: var(--text); }
  .note-card .note-meta{ margin-top:auto; font-size:10px; color: var(--text-faint); font-family: var(--font-mono); }
  .notes-empty{ grid-column:1/-1; padding:24px; text-align:center; color: var(--text-faint); font-size:13px; }
  .note-body-toolbar{ display:flex; justify-content:flex-end; margin-bottom:4px; }
  .note-format-btn{
    font-family: var(--font-body); font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); color: var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:5px;
  }
  .note-format-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .note-format-b{ font-weight:700; }
  .note-body-editable{
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:8px;
    padding:9px 11px; color: var(--text); font-family: var(--font-body); font-size:14px;
    min-height:180px; max-height:360px; overflow-y:auto; line-height:1.6; white-space:pre-wrap; word-break:break-word;
  }
  .note-body-editable:focus{ outline:none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(255,143,63,0.15); }
  .note-body-editable:empty::before{ content: attr(data-placeholder); color: var(--text-faint); }
  .note-body-editable b, .note-body-editable strong{ color: var(--text); font-weight:700; }

  .confirm-modal-panel{ width:min(380px, 100%); }
  .confirm-body{ padding: 18px 20px 6px; font-size:13.5px; color: var(--text-dim); line-height:1.6; }
  .confirm-modal-actions{ padding: 6px 20px 20px; }

  .mail-detail{ padding:18px 20px 22px; overflow-y:auto; }
  .mail-detail .from-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .mail-detail .from-meta .name{ font-size:14px; color: var(--text); }
  .mail-detail .from-meta .addr{ font-size:11.5px; color: var(--text-faint); }
  .mail-detail .body{ font-size:14px; line-height:1.8; color: var(--text-dim); white-space:pre-wrap; border-top:1px solid var(--hairline); padding-top:14px; }

  /* 添付ファイル */
  .mail-attachments{ margin-top:16px; border-top:1px solid var(--hairline); padding-top:12px; }
  .mail-attachments-head{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:10px; }
  .mail-attach-item{ padding:10px 0; border-bottom:1px solid var(--hairline); }
  .mail-attach-item:last-child{ border-bottom:none; }
  .mail-attach-meta{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
  .mail-attach-name{ font-size:13px; color: var(--text); word-break:break-all; }
  .mail-attach-size{ font-size:11px; color: var(--text-faint); white-space:nowrap; }
  .mail-attach-img{ display:block; max-width:100%; border:1px solid var(--panel-border); border-radius:6px; background: var(--bg-deep); }
  .mail-attach-btns{ display:flex; gap:8px; }
  .mail-attach-btn{
    font-family: var(--font-body); font-size:12px; letter-spacing:.04em;
    padding:5px 14px; border-radius:5px; cursor:pointer;
    background: var(--panel-solid); color: var(--text-dim);
    border:1px solid var(--panel-border); transition:border-color .15s, color .15s;
  }
  .mail-attach-btn:hover:not(:disabled){ border-color: var(--cyan); color: var(--cyan); }
  .mail-attach-btn:disabled{ opacity:.5; cursor:default; }
  .mail-attach-err{ margin-top:6px; font-size:11.5px; color: var(--err); }

  /* display:flex 指定が [hidden] を打ち消すため、明示的に打ち消し返す(このファイルの他所と同じ対応) */
  .mail-list[hidden]{ display:none; }

  /* ================= 請求書管理（SYSLEA 支払台帳） ================= */
  .pay2-sel{
    padding:5px 8px; font-size:11px; border-radius:6px;
    border:1px solid var(--panel-border); background: var(--panel-solid); color: var(--text);
  }
  .pay2-sel option{ background: var(--panel-solid); color: var(--text); }
  .pay2-q{
    padding:5px 9px; font-size:11px; border-radius:6px; width:200px; max-width:38vw;
    border:1px solid var(--panel-border); background: var(--panel-solid); color: var(--text);
  }
  .pay2-q::placeholder{ color: var(--text-faint); }
  .pay2-q:focus{ outline:none; border-color: var(--accent); }
  .pay2-check-inline{ display:inline-flex; flex-direction:row; align-items:center; gap:5px; font-size:11px; color: var(--text-dim); }
  /* クラスで display:flex を当てているツールバー群は [hidden] が効かないので明示する */
  #pay2-detail-tools[hidden], #pay2-vendor-tools[hidden], .pay2-summary[hidden]{ display:none; }
  .pay2-tool-btn{
    padding:5px 11px; font-size:11px; border-radius:6px; cursor:pointer;
    border:1px solid var(--panel-border); background: transparent; color: var(--text-dim);
  }
  .pay2-tool-btn:hover{ border-color: var(--cyan); color: var(--cyan); }
  .pay2-tool-primary{ border-color: var(--accent-dim); color: var(--accent); }
  .pay2-tool-primary:hover{ border-color: var(--accent); color: var(--accent); }

  .pay2-summary{
    display:flex; flex-wrap:wrap; gap:18px; padding:6px 6px 14px;
    font-size:12px; color: var(--text-dim); font-family: var(--font-mono);
  }
  .pay2-summary b{ color: var(--text); }
  .pay2-summary .warn{ color: var(--warn); }
  .pay2-summary .pay2-sum-muted{ color: var(--text-faint); }

  /* 対象月の受領チェック（来た/来てない） */
  .pay2-check{ padding:0 6px 12px; }
  .pay2-check-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  .pay2-check-toggle{
    padding:5px 11px; font-size:11px; border-radius:6px; cursor:pointer;
    border:1px solid var(--panel-border); background: transparent; color: var(--text-dim);
  }
  .pay2-check-toggle:hover{ border-color: var(--accent); color: var(--accent); }
  .pay2-check-toggle[aria-expanded="true"]{ border-color: var(--accent-dim); color: var(--accent); }
  .pay2-check-sum{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); }
  .pay2-check-sum b{ color: var(--text); }
  .pay2-check-sum .ok{ color: var(--ok); }
  .pay2-check-sum .warn{ color: var(--warn); }
  .pay2-check-body{ margin-top:10px; overflow-x:auto; }

  .pay2-tablewrap{ overflow-x:auto; }
  .pay2-vendor-count{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-faint); padding:2px 4px 10px; }
  .pay2-muted{ color: var(--text-faint); font-size:11px; }
  /* ベンダーモーダルの周期セレクト＋N入力 */
  .pay2-cad-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .pay2-cad-row select{ flex:0 0 auto; }
  .pay2-cad-row input[type="number"]{ width:60px; flex:0 0 auto; }
  .pay2-cad-row input[type="number"][hidden], .pay2-cad-unit[hidden]{ display:none; }
  .pay2-cad-unit{ font-size:12px; color: var(--text-dim); }
  .pay2-form-grid input[type="month"]{ color-scheme: dark; }
  .pay2-table{ width:100%; border-collapse:collapse; font-size:11.5px; white-space:nowrap; }
  .pay2-table th{
    text-align:left; padding:7px 9px; color: var(--text-faint); font-weight:600;
    border-bottom:1px solid var(--panel-border); position:sticky; top:0; background: var(--panel);
  }
  .pay2-table td{ padding:7px 9px; border-bottom:1px solid rgba(235,170,120,0.08); color: var(--text-dim); }
  .pay2-table tbody tr{ cursor:pointer; }
  .pay2-table tbody tr:hover td{ background: rgba(255,143,63,0.05); }
  .pay2-table .num{ text-align:right; font-family: var(--font-mono); color: var(--text); }
  .pay2-table .center{ text-align:center; }
  .pay2-table .strong{ color: var(--text); }
  .pay2-row-paid td{ opacity:.5; }
  .pay2-row-excluded td{ opacity:.4; font-style:italic; }
  .pay2-row-overdue td{ background: rgba(216,74,74,.12); }
  .pay2-row-overdue td:first-child{ box-shadow: inset 3px 0 0 var(--err, #d84a4a); }
  .p2-paid-cb{ width:auto; cursor:pointer; }

  .pay2-badge{
    display:inline-block; padding:1px 7px; border-radius:999px; font-size:10px; letter-spacing:.3px;
  }
  .pay2-b-furikomi{ color: var(--accent); background: rgba(255,143,63,.10); }
  .pay2-b-upsider{ color: var(--ok); background: rgba(94,201,138,.10); }
  .pay2-b-furikae{ color: var(--warn); background: rgba(216,194,74,.10); }
  .pay2-b-other{ color: var(--text-faint); background: rgba(255,255,255,.05); }
  .pay2-flag{ font-size:10px; color: var(--warn); }
  .pay2-flag.ok{ color: var(--ok); }
  .pay2-empty{ padding:26px 6px; text-align:center; font-size:12.5px; color: var(--text-dim); }

  /* モーダル内フォーム */
  .pay2-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
  .pay2-fld{ display:flex; flex-direction:column; gap:3px; }
  .pay2-fld.wide{ grid-column:1 / -1; }
  .pay2-fld label{ font-size:10.5px; color: var(--text-faint); letter-spacing:.3px; }
  .pay2-fld input, .pay2-fld select, .pay2-fld textarea{
    padding:6px 8px; font-size:12px; border-radius:6px;
    border:1px solid var(--panel-border); background: var(--panel-solid); color: var(--text);
    font-family: inherit;
  }
  .pay2-fld input:focus, .pay2-fld select:focus, .pay2-fld textarea:focus{
    outline:none; border-color: var(--cyan); box-shadow:0 0 0 2px rgba(255,143,63,0.15);
  }
  .pay2-fld select option{ background: var(--panel-solid); color: var(--text); }
  .pay2-fld-checks{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px; padding-top:2px; }
  .pay2-fld-checks label{ display:inline-flex; flex-direction:row; align-items:center; gap:5px; font-size:11.5px; color: var(--text-dim); }
  .pay2-fld-checks input{ width:auto; }
  .pay2-calc{ grid-column:1 / -1; font-size:10.5px; color: var(--text-faint); font-family: var(--font-mono); }
  .pay2-calc.bad{ color: var(--err); }

  /* 口座チェック（明細モーダル内） */
  #p2f-payto-check:empty{ display:none; }
  .pay2-payto-note{ font-size:11px; color: var(--text-dim); line-height:1.6; }
  .pay2-payto-ok{ font-size:11px; color: var(--ok); }
  .pay2-payto-warn{
    font-size:11px; color: var(--warn); line-height:1.7;
    border:1px solid var(--warn); border-radius:6px; padding:7px 9px; background: rgba(216,194,74,.08);
  }
  .pay2-payto-warn .pay2-tool-btn, .pay2-payto-note .pay2-tool-btn{ margin-left:4px; }

  .pay2-extract{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:2px; }
  .pay2-extract-btn, .pay2-extract-file{
    padding:6px 12px; font-size:11.5px; border-radius:6px; cursor:pointer;
    border:1px solid var(--accent-dim); background: rgba(255,143,63,0.08); color: var(--accent);
  }
  .pay2-extract-btn:hover, .pay2-extract-file:hover{ border-color: var(--accent); }
  .pay2-extract-btn:disabled{ opacity:.5; cursor:default; }
  .pay2-extract-note{
    flex:1 1 100%; margin-top:4px; padding:8px 10px; border-radius:6px;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    font-size:11px; line-height:1.6; color: var(--text-dim);
  }
  .pay2-extract-note.is-err{ border-color: var(--err); color: var(--err); }
  .pay2-extract-note b{ color: var(--text); }
  .pay2-extract-hint{ color: var(--text-faint); }

  .pay2-import-hint{ padding:0 4px 8px; font-size:11.5px; color: var(--text-dim); line-height:1.6; }
  .pay2-import-hint code{ font-family: var(--font-mono); font-size:11px; color: var(--text); }
  .pay2-import-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; }
  .pay2-import-row{
    display:flex; gap:9px; align-items:flex-start; padding:8px 9px;
    border:1px solid var(--panel-border); border-radius:7px;
  }
  .pay2-import-row.dup{ opacity:.45; }
  .pay2-import-row input{ margin-top:2px; }
  .pay2-import-meta{ min-width:0; flex:1; }
  .pay2-import-from{ font-size:12px; color: var(--text); }
  .pay2-import-subj{ font-size:11px; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pay2-import-date{ font-size:10.5px; color: var(--text-faint); font-family: var(--font-mono); }

  @media (max-width:640px){
    .pay2-form-grid{ grid-template-columns:1fr; }
  }

  /* footer bar */
  .statusbar{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 20px; font-size: 11px; color: var(--text-faint); letter-spacing:.5px;
  }
  .statusbar .sys{ display:flex; align-items:center; gap:8px; }
  .statusbar .sys::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--ok); box-shadow:0 0 5px var(--ok); }
  .statusbar .right{ display:flex; align-items:center; gap:18px; }

  /* ================= CALENDAR PAGE ================= */
  .cal-toolbar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding: 14px 20px;
  }
  .cal-toolbar-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cal-back-btn{
    padding:7px 12px; border-radius:8px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); color: var(--text-dim); font-size:12.5px; cursor:pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .cal-back-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .cal-today-btn{
    padding:7px 14px; border-radius:8px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); font-family: var(--font-display); font-size:11px; letter-spacing:1px;
    cursor:pointer; color: var(--text-dim); transition: border-color .15s ease, color .15s ease;
  }
  .cal-today-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .cal-nav-btn{
    width:32px; height:32px; border-radius:8px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); cursor:pointer; display:flex; align-items:center; justify-content:center;
    color: var(--text-dim); font-size:16px; transition: border-color .15s ease, color .15s ease;
  }
  .cal-nav-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .cal-range-label{ font-family: var(--font-display); font-size:14px; letter-spacing:1px; margin-left:4px; white-space:nowrap; }
  .cal-toolbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .acct-tabs{ display:flex; border:1px solid var(--panel-border); border-radius:2px; overflow:hidden; }
  .acct-tab{
    padding:6px 13px; background:transparent; border:none; font-family: var(--font-mono); font-size:10px; letter-spacing:.5px;
    color: var(--text-dim); cursor:pointer; border-right:1px solid var(--panel-border);
  }
  .acct-tab:last-child{ border-right:none; }
  .acct-tab:hover:not(.active){ color: var(--text); background: rgba(255,255,255,.03); }
  .acct-tab.active{ background: rgba(255,143,63,0.15); color: var(--accent); }
  .acct-tabs.sm .acct-tab{ padding:4px 9px; font-size:9px; flex:1; text-align:center; }

  .cal-view-switch{ display:flex; border:1px solid var(--panel-border); border-radius:8px; overflow:hidden; }
  .cal-view-btn{
    padding:7px 14px; background:transparent; border:none; font-family: var(--font-body); font-size:13px;
    color: var(--text-dim); cursor:pointer; border-right:1px solid var(--panel-border);
  }
  .cal-view-btn:last-child{ border-right:none; }
  .cal-view-btn.active{ background: linear-gradient(90deg, rgba(255,143,63,0.2), rgba(255,143,63,0.2)); color: var(--text); }
  .cal-new-btn{
    padding:7px 14px; border-radius:2px; border:1px solid var(--panel-border); background: rgba(255,143,63,0.1);
    color: var(--accent); font-family: var(--font-mono); font-size:10px; letter-spacing:.5px; cursor:pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .cal-new-btn:hover{ background: rgba(255,143,63,0.2); border-color: var(--accent); }

  .cal-status-bar{ padding:8px 20px; font-size:11px; color: var(--text-faint); letter-spacing:.5px; }
  .cal-status-bar.err{ color: var(--err); }
  .cal-status-bar .live{ color: var(--ok); }

  .cal-body-panel{ padding:16px 12px 20px; overflow:hidden; }

  /* サブページ（今月の収支 / サブスク）の中央寄せラッパー。カード1枚を程よい幅で置く。 */
  .subpage-wrap{ width:100%; max-width:520px; margin:0 auto; }
  .subpage-wrap.is-wide{ max-width:680px; }
  .subpage-wrap > .pv-card{ display:flex; flex-direction:column; }

  .cal-week-headers{ display:flex; margin-bottom:2px; }
  .cal-col-header{
    text-align:center; font-family: var(--font-display); font-size:11px; letter-spacing:1px;
    color: var(--text-dim); padding:6px 0 10px; border-left:1px solid var(--hairline);
  }
  .cal-col-header.today{ color: var(--magenta); }

  .cal-allday-row{ display:flex; border-bottom:1px solid var(--hairline); padding: 0 0 8px; margin: 0 0 8px; gap:0; }
  .cal-allday-gutter{ width:46px; flex:none; font-size:10px; color: var(--text-faint); padding-top:2px; }
  .cal-allday-cols{ flex:1; display:grid; gap:4px; min-height:6px; }
  .cal-allday-cols > div{ display:flex; flex-direction:column; gap:3px; padding: 0 4px; min-width:0; }
  .cal-allday-chip{
    border-radius:6px; padding:3px 8px; font-size:11.5px; color: var(--text); cursor:pointer;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid; background:none;
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  .cal-allday-chip:hover{ filter:brightness(1.2); }

  .cal-timeline-scroll{ max-height: 560px; overflow-y:auto; position:relative; }
  .cal-timeline{ display:flex; position:relative; }
  .cal-hour-gutter{ width:46px; flex:none; position:relative; }
  .cal-hour-label{ position:absolute; right:8px; transform:translateY(-50%); font-size:10px; color: var(--text-faint); font-family: var(--font-mono); }
  .cal-day-cols{ flex:1; display:grid; position:relative; }
  .cal-day-col{ position:relative; border-left:1px solid var(--hairline); cursor:crosshair; }
  .cal-hour-line{ position:absolute; left:0; right:0; border-top:1px solid var(--hairline); pointer-events:none; }
  .cal-now-line{ position:absolute; left:0; right:0; height:2px; background: var(--magenta); box-shadow: 0 0 6px var(--magenta); z-index:5; pointer-events:none; }
  .cal-now-line::before{ content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
  .cal-event-block{
    position:absolute; border-radius:6px; padding:3px 6px; font-size:11.5px;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    cursor:pointer; border:1px solid; line-height:1.35; color: var(--text);
  }
  /* One line, time-then-title, so a long title is never pushed off the bottom of a
     short block — it just truncates with an ellipsis instead. */
  .cal-event-block .t{ font-family: var(--font-mono); font-size:9.5px; opacity:.85; margin-right:5px; }
  .cal-event-block:hover{ filter:brightness(1.25); z-index:6; }

  .cal-month-grid{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
  .cal-month-dow{ text-align:center; font-family: var(--font-display); font-size:10.5px; letter-spacing:1px; color: var(--text-faint); padding:8px 0; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
  .cal-month-cell{ min-height:96px; min-width:0; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:6px; display:flex; flex-direction:column; gap:3px; cursor:pointer; overflow:hidden; }
  .cal-month-cell.outside{ opacity:.35; }
  .cal-month-cell.today{ background: rgba(255,143,63,0.07); }
  .cal-month-date{ font-family: var(--font-mono); font-size:12px; color: var(--text-dim); }
  .cal-month-cell.today .cal-month-date{ color: var(--magenta); font-weight:700; }
  .cal-month-chip{
    font-size:10.5px; padding:1px 5px; border-radius:4px; color: var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; border:1px solid;
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  .cal-month-chip:hover{ filter:brightness(1.2); }
  .cal-month-more{ font-size:10px; color: var(--text-faint); }

  @media (max-width: 720px){
    .cal-timeline-scroll{ max-height: 440px; }
    .cal-month-cell{ min-height:64px; }
  }

  /* ---------- event create/edit modal ---------- */
  .modal-overlay{
    position: fixed; inset:0; z-index: 60;
    background: rgba(3,1,10,0.72); backdrop-filter: blur(5px);
    display:flex; align-items:center; justify-content:center; padding: 20px;
  }
  .modal-overlay[hidden]{ display:none; }
  /* 確認ダイアログは他のモーダル(特に event-modal:DOM順で後)より必ず前面に出す */
  /* 確認ダイアログは全モーダル・ポップオーバー(予定ポップオーバー80/通知パネル85)より前面 */
  #confirm-modal{ z-index: 95; }
  .modal-panel{
    width:min(600px, 100%); max-height: min(84vh, 680px);
    display:flex; flex-direction:column;
    background: var(--panel-solid);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    overflow:hidden;
  }
  .event-modal-panel{ width:min(480px, 100%); }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 15px 18px; border-bottom: 1px solid var(--hairline); flex:none;
  }
  .modal-head h3{
    margin:0; font-family: var(--font-display); font-size:13px; letter-spacing:.6px;
    display:flex; align-items:center; gap:10px; font-weight:600;
  }
  .modal-head h3 .ico{ width:15px; height:15px; stroke: var(--accent); }
  .modal-close{
    width:28px; height:28px; border-radius:2px; border:1px solid transparent;
    background: transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex:none; transition: border-color .15s ease, background .15s ease;
  }
  .modal-close:hover{ border-color: var(--panel-border); background: rgba(255,255,255,0.03); }
  .modal-close svg{ width:14px; height:14px; stroke: var(--text-dim); }

  .event-form{ display:flex; flex-direction:column; gap:14px; padding:18px 20px 20px; overflow-y:auto; }
  .event-form label, .event-form .field-block{ display:flex; flex-direction:column; gap:6px; font-size:12px; letter-spacing:.5px; color: var(--text-dim); }
  .event-form input[type="text"], .event-form input[type="date"], .event-form input[type="time"],
  .event-form input[type="url"], .event-form input[type="number"], .event-form input[type="search"],
  .event-form select, .event-form textarea{
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:8px;
    padding:9px 11px; color: var(--text); font-family: var(--font-body); font-size:14px; width:100%;
    color-scheme: dark; /* keeps the native date/time picker chrome (and select dropdown) dark instead of a stray white box */
  }
  .event-form select{ cursor:pointer; }
  .event-form select option{ background: #1a1230; color: var(--text); }
  .event-form textarea{ resize: vertical; font-family: var(--font-body); }
  .event-form input:focus, .event-form select:focus, .event-form textarea:focus{ outline:none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(255,143,63,0.15); }
  /* Chrome paints its own autofill background (white/yellow) over author CSS;
     this is the standard override so text inputs stay dark when autofilled. */
  .event-form input:-webkit-autofill,
  .event-form input:-webkit-autofill:hover,
  .event-form input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px rgba(20,14,32,0.95) inset;
    box-shadow: 0 0 0 1000px rgba(20,14,32,0.95) inset;
    transition: background-color 9999s ease-in-out 0s;
  }
  .task-repeat-detail{ display:flex; flex-direction:column; gap:6px; margin-top:-6px; }
  .task-repeat-detail[hidden]{ display:none; }
  .task-repeat-detail-label{ font-size:11px; color: var(--text-faint); letter-spacing:.5px; }
  .weekday-picker{ display:flex; gap:6px; }
  .weekday-btn{
    width:32px; height:32px; border-radius:8px; border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); font-family: var(--font-body); font-size:12px; cursor:pointer; flex:none;
  }
  .weekday-btn:hover{ border-color: var(--cyan); }
  .weekday-btn.active{ background: var(--accent); border-color:transparent; color: var(--bg-deep); font-weight:600; }
  .event-allday-row{ flex-direction:row !important; align-items:center; gap:8px !important; }
  .event-allday-row input{ width:16px; height:16px; }
  .event-datetime-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .event-datetime-row label{ flex:1; min-width:150px; }
  .event-datetime-row .row-inputs{ display:flex; gap:6px; }
  .event-form-error{ font-size:12.5px; color: var(--err); background: rgba(255,60,90,0.08); border:1px solid rgba(255,60,90,0.3); border-radius:8px; padding:8px 10px; }
  .event-form-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
  .event-form-actions[hidden]{ display:none; } /* same [hidden]-vs-author-display cascade issue as elsewhere in this file */
  .event-form-actions-right{ display:flex; gap:10px; margin-left:auto; }
  .ev-btn{
    padding:8px 16px; border-radius:3px; border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); font-family: var(--font-body); font-size:13px; cursor:pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .ev-btn:hover{ border-color: var(--accent); color: var(--text); }
  .ev-btn-primary{ background: var(--accent); border:1px solid var(--accent); color:#0a0d10; font-weight:600; }
  .ev-btn-primary:hover{ filter:brightness(1.08); border-color: var(--accent); color:#0a0d10; }
  .ev-btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
  .ev-btn-danger{ border-color: rgba(255,80,80,0.4); color: var(--err); }
  .ev-btn-danger:hover{ border-color:#ff5050; background: rgba(255,60,90,0.08); color: var(--err); }

  /* ---------- Google 再連携リマインダーバナー ---------- */
  /* display:flex は hidden 属性(UAの [hidden]{display:none})を打ち消すので、
     hidden 時は明示的に display:none に戻す。 */
  .reauth-banner[hidden]{ display:none; }
  .reauth-banner{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:12px;
    border:1px solid rgba(255,207,107,0.42);
    background:linear-gradient(180deg, rgba(255,207,107,0.14), rgba(255,207,107,0.05));
    color:#ffe0a6; font-size:13px; letter-spacing:.2px;
  }
  .reauth-banner > svg{ width:18px; height:18px; flex:0 0 auto; stroke: var(--warn); }
  .reauth-banner-text{ flex:1 1 auto; }
  .reauth-banner-btn{
    flex:0 0 auto; cursor:pointer;
    padding:6px 14px; border-radius:8px;
    border:1px solid rgba(255,207,107,0.55);
    background:rgba(255,207,107,0.16); color:#ffe9c4;
    font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.5px;
  }
  .reauth-banner-btn:hover{ background:rgba(255,207,107,0.28); }
  .reauth-banner-close{
    flex:0 0 auto; cursor:pointer; display:flex;
    width:26px; height:26px; padding:0; align-items:center; justify-content:center;
    border:none; border-radius:6px; background:transparent; color:#ffe0a6;
  }
  .reauth-banner-close svg{ width:14px; height:14px; stroke:currentColor; }
  .reauth-banner-close:hover{ background:rgba(255,207,107,0.16); }

  /* ---------- 設定モーダル ---------- */
  .settings-section{
    display:flex; flex-direction:column; gap:10px;
    padding:14px 0; border-top:1px solid var(--hairline);
  }
  .settings-section:first-of-type{ border-top:none; padding-top:0; }
  .settings-section h4{
    margin:0; font-family: var(--font-display); font-size:11px;
    letter-spacing:2px; color: var(--cyan); text-transform:uppercase;
  }
  .settings-conn-row{ display:flex; align-items:center; gap:10px; }
  .settings-conn-label{ font-size:13px; color: var(--text); min-width:64px; }
  .settings-conn-state{ flex:1; font-size:11.5px; color: var(--text-faint); letter-spacing:.3px; }
  .settings-conn-state.is-stale{ color: var(--warn); }
  .settings-conn-row .ev-btn{ flex:0 0 auto; padding:5px 12px; font-size:11px; }
  .settings-hint{ margin:0; font-size:11px; color: var(--text-faint); letter-spacing:.3px; }
  .settings-hint.is-err{ color: var(--err); }
  .settings-check{ flex-direction:row !important; align-items:center; gap:8px !important; cursor:pointer; }
  .settings-check input{ width:auto; }
  .settings-btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
  .settings-file-btn{ cursor:pointer; display:inline-flex; align-items:center; }
  #settings-csv-import-box{ margin-top:10px; padding-left:10px; border-left:2px solid var(--panel-border); display:flex; flex-direction:column; gap:8px; }
  #settings-csv-preview, #settings-csv-result{ white-space:pre-line; }
  #settings-csv-result{ color: var(--text-dim); }

  /* ---------- メール検索ボックス ---------- */
  .mail-search-wrap{
    display:flex; align-items:center; gap:7px;
    padding:5px 10px; border-radius:8px;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.03);
  }
  .mail-search-wrap svg{ width:14px; height:14px; flex:none; stroke: var(--text-faint); }
  .mail-search-wrap input{
    border:none; background:transparent; outline:none;
    color: var(--text); font-family: var(--font-body); font-size:12.5px;
    width:180px; padding:0;
  }
  .mail-search-wrap input::placeholder{ color: var(--text-faint); }
  .mail-search-wrap:focus-within{ border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(255,143,63,0.14); }

  /* ---------- skeleton loading ---------- */
  @keyframes skeleton-shimmer{
    0%{ background-position: -240px 0; }
    100%{ background-position: calc(240px + 100%) 0; }
  }
  .skeleton{
    background-color: rgba(255,255,255,0.04);
    background-image: linear-gradient(90deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0.09) 50%,
      rgba(255,255,255,0) 100%);
    background-size: 240px 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    animation: skeleton-shimmer 1.25s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .skeleton{ animation: none; } }
  .mail-skel-item{ display:flex; gap:12px; padding:12px 14px; align-items:center; border-bottom:1px solid var(--hairline); }
  .mail-skel-avatar{ width:36px; height:36px; border-radius:50%; flex:none; }
  .mail-skel-lines{ flex:1; display:flex; flex-direction:column; gap:7px; }
  .mail-skel-line{ height:10px; }
  .sched-skel-row{ display:flex; gap:12px; align-items:center; padding:7px 0; }
  .sched-skel-time{ width:42px; height:12px; flex:none; }
  .sched-skel-title{ flex:1; height:12px; max-width:260px; }
  .cal-skel{ display:flex; flex-direction:column; gap:12px; padding:18px 16px; }
  .cal-skel-row{ height:46px; }

  /* ---------- 予定の詳細ポップオーバー ---------- */
  .event-popover{
    position: fixed; z-index: 80; width: 300px; max-width: calc(100vw - 24px);
    background: var(--panel-solid); border:1px solid var(--panel-border);
    border-radius: 12px; padding: 14px 15px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    display:flex; flex-direction:column; gap:9px;
  }
  .event-popover[hidden]{ display:none; }
  .event-popover-head{ display:flex; align-items:flex-start; gap:9px; }
  .event-popover-swatch{ width:12px; height:12px; border-radius:3px; flex:none; margin-top:4px; }
  .event-popover-head h4{ margin:0; flex:1; font-size:14px; line-height:1.35; color: var(--text); }
  .event-popover-close{
    flex:none; width:24px; height:24px; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:6px; background:transparent; color: var(--text-dim);
  }
  .event-popover-close svg{ width:13px; height:13px; stroke:currentColor; }
  .event-popover-close:hover{ background: rgba(255,255,255,0.06); }
  .event-popover-time{ font-size:12px; color: var(--cyan); letter-spacing:.2px; }
  .event-popover-loc{ font-size:12px; color: var(--text-dim); }
  .event-popover-desc{
    font-size:12px; color: var(--text-dim); line-height:1.5;
    white-space:pre-wrap; max-height:160px; overflow-y:auto;
    border-top:1px solid var(--hairline); padding-top:8px;
  }
  .event-popover-err{ font-size:12px; color: var(--err); }
  .event-popover-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
  .event-popover-actions .ev-btn{ padding:5px 14px; font-size:11.5px; }

  /* ---------- プライベート画面 (v1a) ---------- */
  .pv-grid{
    display:grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(12px, 1.6vw, 18px);
    align-items:stretch;
  }
  .pv-col{ display:flex; flex-direction:column; gap: clamp(12px, 1.6vw, 18px); min-width:0; }
  /* 列の高さが揃うよう、各列の最後のカードで余った縦幅を吸収する(習慣トラッカーなどに
     引っ張られて他の列の下に隙間が空くのを防ぐ)。 */
  .pv-col > .pv-card:last-child{ flex:1 1 auto; display:flex; flex-direction:column; }
  .pv-col > .pv-card:last-child .card-body{ flex:1 1 auto; }
  .pv-bottom{
    grid-column: 1 / -1;
    display:grid; grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.6vw, 18px);
  }
  /* プライベート下段は3枚(UPCOMING / TODAY'S PLAN / QUICK ACCESS) */
  #view-private .pv-bottom{ grid-template-columns: 1fr 1fr 1fr; }
  /* ビジネス下段は2枚。Slackダイジェスト(内容多め)を広めに */
  #view-business .pv-bottom{ grid-template-columns: 1.6fr 1fr; }
  /* 左右列の最後のカードを縦に引き伸ばさない。内容が少ないカード(WEATHER / 最近のタスク /
     習慣トラッカー 等。内部リストは自前で max-height＋スクロール)が中身スカスカのまま
     ヒーロー高まで伸びて巨大な空白カードになるのを防ぐ。余った縦は列末尾の素の余白
     (ドット地)にする。以前は列の高さ揃えのため flex:1 1 auto にしていた。 */
  #view-private .pv-grid > .pv-col > .pv-card:last-child,
  #view-business .pv-grid > .pv-col > .pv-card:last-child{ flex: 0 0 auto; }
  #view-private .pv-grid > .pv-col > .pv-card:last-child .card-body,
  #view-business .pv-grid > .pv-col > .pv-card:last-child .card-body{ flex: 0 0 auto; }
  .pv-card .card-body{ padding-top: 4px; }

  /* ---------- 今月の収支 (v1b) ---------- */
  .pv-fin .card-head{ display:flex; align-items:center; justify-content:space-between; }
  .pv-fin-main{ display:flex; align-items:center; gap:16px; }
  .pv-fin-donut-wrap{ position:relative; width:104px; height:104px; flex:none; }
  .pv-fin-donut{ width:100%; height:100%; transform: rotate(0deg); }
  .pv-fin-donut circle{ transition: stroke-dasharray .4s ease, stroke-dashoffset .4s ease; }
  .pv-fin-donut-center{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:2px;
  }
  .pv-fin-donut-label{ font-size:9.5px; letter-spacing:1px; color: var(--text-faint); }
  .pv-fin-donut-value{ font-family: var(--font-mono); font-size:13px; font-weight:700; color: var(--text); }
  .pv-fin-donut-value.is-neg{ color: var(--err); }
  .pv-fin-donut-value.is-pos{ color: var(--ok); }
  .pv-fin-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }
  .pv-fin-reconnect{ margin-top:8px; }

  /* ---------- 習慣トラッカー (v1c) ---------- */
  .pv-habit .card-head{ display:flex; align-items:center; justify-content:space-between; }
  .pv-habit-manage{
    font-family: var(--font-body); font-size:11.5px; letter-spacing:.4px;
    color: var(--cyan); background: rgba(255,143,63,0.06);
    border:1px solid var(--panel-border); border-radius:6px; padding:3px 10px; cursor:pointer;
  }
  .pv-habit-manage:hover{ border-color: var(--cyan); }
  /* カード見出しの右にボタンが2つ並ぶとき（契約書トラッカーの「すべて」＋「管理」）。 */
  .pv-card-head-actions{ display:flex; align-items:center; gap:6px; }
  .pv-habit-weeknav{
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); margin-bottom:8px;
  }
  .pv-habit-weeknav button{
    width:22px; height:22px; border-radius:5px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); color: var(--text-dim); cursor:pointer; line-height:1;
    font-size:14px; display:flex; align-items:center; justify-content:center;
  }
  .pv-habit-weeknav button:hover{ border-color: var(--cyan); color: var(--text); }
  .pv-habit-dowhead{
    display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
    padding-left: 0; margin-bottom:6px;
  }
  .pv-habit-dowhead span{ text-align:center; font-size:12px; font-weight:600; letter-spacing:.5px; color: var(--text-dim); }
  .pv-habit-list{ display:flex; flex-direction:column; gap:12px; max-height:176px; overflow-y:auto; }
  /* 週切り替え中は既存行を残したまま薄く見せるだけ(高さを変えない) */
  .pv-habit-list.is-loading, .pv-plan-list.is-loading{ opacity:.45; transition: opacity .12s ease; }
  .pv-habit-empty{ font-size:12px; color: var(--text-faint); line-height:1.6; padding:6px 0; }
  .pv-habit-row{ display:flex; flex-direction:column; gap:5px; }
  .pv-habit-name{
    font-size:12.5px; color: var(--text); display:flex; align-items:baseline; gap:6px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pv-habit-target{ font-family: var(--font-mono); font-size:10px; color: var(--text-faint); flex:none; }
  .pv-habit-cad{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-dim); flex:none; letter-spacing:1px; }
  .pv-habit-cells{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
  .pv-habit-cell{
    aspect-ratio:1 / 1; min-height:26px; border-radius:6px; cursor:pointer;
    border:1px solid var(--hairline); background: rgba(255,255,255,0.03);
    color: var(--text-dim); font-family: var(--font-mono); font-size:12px;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .pv-habit-cell:hover{ border-color: var(--cyan); }
  .pv-habit-cell.off{ opacity:.4; }
  .pv-habit-cell.today{ border-color: rgba(255,143,63,0.5); }
  .pv-habit-cell.partial{ background: rgba(255,143,63,0.14); color: var(--text); }
  .pv-habit-cell.met{
    background: var(--habit-accent, var(--accent));
    border-color: transparent; color: #0a0d10;
  }
  .pv-habit-cell.binary svg{ width:14px; height:14px; }
  .pv-habit-meta{ display:flex; align-items:center; gap:8px; }
  .pv-habit-bar{ flex:1 1 auto; height:5px; border-radius:3px; background: rgba(255,255,255,0.06); overflow:hidden; }
  .pv-habit-bar span{ display:block; height:100%; border-radius:2px; background: var(--habit-accent, var(--accent)); }
  .pv-habit-streak{ font-family: var(--font-mono); font-size:10.5px; color: var(--warn); flex:none; }
  .pv-habit-frac{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); flex:none; min-width:26px; text-align:right; }
  .pv-habit-paused-note{ font-size:11px; color: var(--text-faint); margin-top:2px; line-height:1.6; }
  .pv-habit-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }
  .pv-habit-status.is-err{ color: var(--err); }

  /* 回数系セルのステッパー */
  .habit-count-pop{
    position:fixed; z-index:120; display:flex; align-items:center; gap:4px;
    padding:5px; border-radius:8px;
    background: var(--panel-solid); border:1px solid var(--panel-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .habit-count-pop[hidden]{ display:none; }
  .habit-count-pop button{
    width:26px; height:26px; border-radius:5px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.03); color: var(--text); cursor:pointer; font-size:15px; line-height:1;
  }
  .habit-count-pop button:hover{ border-color: var(--cyan); }
  .habit-count-pop input{
    width:52px; height:26px; text-align:center; border-radius:5px;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.03);
    color: var(--text); font-family: var(--font-mono); font-size:13px;
    -moz-appearance:textfield; appearance:textfield;
  }
  /* ネイティブの上下スピナーは消す(− / + ボタンだけにする) */
  .habit-count-pop input::-webkit-outer-spin-button,
  .habit-count-pop input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  /* 管理モーダル: 一覧 → タイトルを押して詳細設定 */
  #habit-list-view[hidden], #habit-detail-view[hidden]{ display:none; }
  .habit-rows{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
  .habit-edit-empty{ font-size:12px; color: var(--text-faint); }

  /* 一覧の行 */
  .habit-list-row{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:9px; padding:9px 10px;
    background: rgba(255,255,255,0.015);
  }
  .habit-list-row:hover{ border-color: var(--cyan); }
  .habit-list-row:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px; }
  .habit-list-row.is-paused{ opacity:.5; }
  .habit-list-dot{ width:10px; height:10px; border-radius:50%; flex:none; border:1px solid var(--panel-border); }
  .habit-list-dot.none{ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 4px); }
  .habit-list-txt{ flex:1 1 auto; min-width:0; }
  .habit-list-name{ font-size:13px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .habit-list-hint{ font-size:10.5px; color: var(--text-faint); letter-spacing:.3px; margin-top:2px; }
  .habit-list-chev{ flex:none; color: var(--text-faint); font-size:18px; line-height:1; }

  /* 詳細ビュー */
  .habit-detail-back{
    background:none; border:none; color: var(--cyan); cursor:pointer;
    font-family: var(--font-body); font-size:12px; letter-spacing:.4px; padding:0 0 8px; margin:0;
  }
  #habit-detail-body{ display:flex; flex-direction:column; gap:10px; }
  .habit-detail-del{ width:100%; margin-top:12px; }
  .habit-block-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .habit-block-misc{ justify-content:space-between; }
  /* .event-form の input/select は width:100% なので、詳細ビュー内で明示的に上書きする */
  #habit-detail-body > .habit-edit-name{ width:100% !important; padding:8px 10px !important; font-size:13px !important; }
  #habit-detail-body .habit-edit-type{ flex:none; width:96px !important; padding:7px 8px !important; font-size:12.5px !important; }
  #habit-detail-body .habit-edit-cadence{ flex:none; width:120px !important; padding:7px 8px !important; font-size:12.5px !important; }
  #habit-detail-body .habit-edit-target{ flex:none; width:56px !important; padding:7px 6px !important; font-size:13px !important; text-align:center; }
  #habit-detail-body .habit-edit-unit{ flex:none; width:74px !important; padding:7px 8px !important; font-size:12.5px !important; }
  .habit-edit-target[hidden], .habit-edit-unit[hidden], .habit-days[hidden]{ display:none; }
  /* 数値入力のネイティブ上下スピナーは消す */
  .habit-edit-target{ -moz-appearance:textfield; appearance:textfield; }
  .habit-edit-target::-webkit-outer-spin-button,
  .habit-edit-target::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .habit-days{ display:flex; gap:4px; flex-wrap:wrap; }
  .habit-days .weekday-btn{ width:26px; height:26px; border-radius:6px; font-size:11px; }
  .habit-swatches{ display:flex; align-items:center; gap:6px; }
  .habit-swatch{
    width:18px; height:18px; border-radius:50%; padding:0; cursor:pointer;
    border:1px solid var(--panel-border);
  }
  .habit-swatch.none{ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 3px, transparent 3px 6px); }
  .habit-swatch.sel{ outline:2px solid var(--text); outline-offset:1px; }
  .habit-pause{ display:flex; align-items:center; gap:5px; font-size:11.5px; color: var(--text-dim); cursor:pointer; flex:none; }
  .habit-pause input{ width:auto !important; }
  .habit-edit-btn{
    flex:none; width:28px; height:30px; border-radius:6px; cursor:pointer;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); font-size:14px; line-height:1;
  }
  .habit-edit-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .habit-edit-btn.habit-edit-del:hover{ border-color: var(--err); color: var(--err); }
  .habit-edit-btn:disabled{ opacity:.3; cursor:default; }
  .habit-edit-btn:disabled:hover{ border-color: var(--panel-border); color: var(--text-dim); }
  .habit-edit-btn[hidden]{ display:none; }
  .habit-add-row{ margin-top:10px; width:100%; }

  /* ---------- プライベート: TODAY'S PLAN (v1d) ---------- */
  .pv-plan .card-head{ display:flex; align-items:center; justify-content:space-between; }
  .pv-plan-tpl-btn{
    font-size:10.5px; letter-spacing:1px; color: var(--text-dim);
    background: rgba(255,255,255,0.04); border:1px solid var(--panel-border);
    border-radius:5px; padding:3px 9px; cursor:pointer;
  }
  .pv-plan-tpl-btn:hover{ border-color: var(--cyan); }
  .pv-plan-head{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .pv-plan-date{
    font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint);
    flex:none; letter-spacing:.5px; min-width:92px; text-align:center;
  }
  .pv-plan-date.is-other{ color: var(--warn); }
  .pv-plan-nav-btn{
    flex:none; width:22px; height:22px; border-radius:5px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); color: var(--text-dim); cursor:pointer; line-height:1;
    font-size:14px; display:flex; align-items:center; justify-content:center;
  }
  .pv-plan-nav-btn:hover{ border-color: var(--cyan); color: var(--text); }
  .pv-plan-nav-btn:disabled{ opacity:.3; cursor:default; }
  .pv-plan-nav-btn:disabled:hover{ border-color: var(--panel-border); color: var(--text-dim); }
  .pv-plan-today{
    flex:none; font-family: var(--font-body); font-size:10.5px; letter-spacing:.3px;
    color: var(--cyan); background: rgba(255,143,63,0.06);
    border:1px solid var(--panel-border); border-radius:5px; padding:2px 8px; cursor:pointer;
  }
  .pv-plan-today:hover{ border-color: var(--cyan); }
  .pv-plan-today[hidden]{ display:none; }
  .pv-plan-bar{ flex:1 1 auto; height:5px; border-radius:3px; background: rgba(255,255,255,0.06); overflow:hidden; }
  .pv-plan-bar span{ display:block; height:100%; border-radius:2px; background: var(--accent); transition: width .2s ease; }
  .pv-plan-frac{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); flex:none; min-width:26px; text-align:right; }
  .pv-plan-list{ display:flex; flex-direction:column; gap:2px; }
  .pv-plan-empty{ font-size:12px; color: var(--text-faint); line-height:1.6; padding:6px 0; }
  .pv-plan-item{ display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:6px; }
  .pv-plan-item:hover{ background: rgba(255,255,255,0.03); }
  .pv-plan-check{
    flex:none; width:18px; height:18px; border-radius:5px; border:1px solid var(--panel-border);
    background: rgba(255,255,255,0.03); color: var(--cyan); cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .pv-plan-check:hover{ border-color: var(--cyan); }
  .pv-plan-check svg{ width:12px; height:12px; }
  .pv-plan-item.is-done .pv-plan-check{ background: var(--accent); border-color:transparent; color: var(--bg-deep); }
  .pv-plan-time{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); flex:none; min-width:34px; }
  .pv-plan-text{ flex:1 1 auto; min-width:0; font-size:12.5px; color: var(--text); cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pv-plan-item.is-done .pv-plan-text{ color: var(--text-faint); text-decoration: line-through; }
  .pv-plan-edit{
    width:100%; background: rgba(255,255,255,0.05); border:1px solid var(--cyan); border-radius:5px;
    padding:3px 6px; color: var(--text); font-family: var(--font-body); font-size:12.5px;
  }
  .pv-plan-edit:focus{ outline:none; }
  .pv-plan-del{
    flex:none; width:18px; height:18px; border:none; background:none; color: var(--text-faint);
    font-size:14px; line-height:1; cursor:pointer; opacity:0; padding:0;
  }
  .pv-plan-item:hover .pv-plan-del{ opacity:1; }
  .pv-plan-del:hover{ color: var(--err); }
  .pv-plan-add{ display:flex; gap:6px; margin-top:10px; }
  .pv-plan-add input[type="text"]{
    flex:1 1 auto; min-width:0; background: rgba(255,255,255,0.03); border:1px solid var(--panel-border);
    border-radius:7px; padding:7px 10px; color: var(--text); font-family: var(--font-body); font-size:12.5px;
  }
  .pv-plan-add input[type="time"]{
    flex:none; width:92px; background: rgba(255,255,255,0.03); border:1px solid var(--panel-border);
    border-radius:7px; padding:7px 8px; color: var(--text); font-family: var(--font-mono); font-size:12px;
    color-scheme: dark;
  }
  .pv-plan-add input:focus{ outline:none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(255,143,63,0.15); }
  .pv-plan-add button{
    flex:none; width:34px; border:1px solid var(--panel-border); border-radius:7px;
    background: rgba(255,255,255,0.04); color: var(--cyan); font-size:16px; cursor:pointer;
  }
  .pv-plan-add button:hover{ border-color: var(--cyan); }
  .pv-plan-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }
  .pv-plan-status.is-err{ color: var(--err); }

  /* テンプレ管理モーダル (習慣モーダルの .habit-list-* / #habit-detail-body を流用) */
  #plan-list-view[hidden], #plan-detail-view[hidden]{ display:none; }
  #plan-detail-body{ display:flex; flex-direction:column; gap:10px; }
  .plan-tpl-items{ display:flex; flex-direction:column; gap:6px; }
  .plan-tpl-line{ display:flex; align-items:center; gap:6px; }
  #plan-detail-body > .habit-edit-name{ width:100% !important; padding:8px 10px !important; font-size:13px !important; }
  .plan-tpl-text{ flex:1 1 auto !important; min-width:0; width:auto !important; padding:7px 9px !important; font-size:12.5px !important; }
  .plan-tpl-time{ flex:none; width:96px !important; padding:7px 6px !important; font-size:12px !important; font-family: var(--font-mono); color-scheme: dark; }
  .plan-tpl-additem{ align-self:flex-start; margin-top:2px; }
  #plan-detail-body .plan-tpl-cadence{ flex:none; width:190px !important; padding:7px 8px !important; font-size:12.5px !important; }
  .plan-tpl-cad-hint{ font-size:11px; color: var(--text-faint); line-height:1.5; margin:-4px 0 0; }
  .pv-plan-apply-btn{ width:100%; margin-top:12px; }
  .pv-plan-apply-btn:hover{ border-color: var(--cyan); color: var(--text); }

  /* テンプレ適用の3択ダイアログ */
  #plan-apply-modal{ z-index: 96; }
  .plan-apply-panel{ width:min(360px, 100%); padding:20px; gap:16px; }
  .plan-apply-panel p{ margin:0; font-size:13px; color: var(--text); line-height:1.7; }
  .plan-apply-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

  /* ---------- ビジネス: カード行の共通パーツ(プロジェクトボード＝event / 契約書トラッカーで共用) ---------- */
  .pv-case-head{ display:flex; align-items:center; gap:6px; }
  .pv-case-name{ flex:1 1 auto; min-width:0; font-size:13px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pv-case-lock{ flex:none; font-size:11px; }
  .pv-case-status-badge{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.5px;
    color: var(--case-accent, var(--cyan)); border:1px solid var(--case-accent, var(--cyan));
    border-radius:5px; padding:2px 7px;
  }
  .pv-case-client{ font-size:11px; color: var(--text-faint); }
  #pb-detail-body .case-edit-status{ flex:none; width:110px !important; padding:7px 8px !important; font-size:12.5px !important; }
  #pb-detail-body .case-edit-due{ flex:none; width:150px !important; padding:7px 8px !important; font-size:12.5px !important; color-scheme: dark; }

  /* ---------- ビジネス: 契約書トラッカー ---------- */
  .pv-contracts-tabs{ display:flex; gap:2px; margin-bottom:8px; border-bottom:1px solid var(--panel-border); }
  .pv-contracts-tab{
    font-family: var(--font-mono); font-size:10.5px; letter-spacing:.3px; cursor:pointer;
    color: var(--text-faint); background:transparent; border:none; border-bottom:2px solid transparent;
    padding:5px 8px; transition: color .15s, border-color .15s;
  }
  .pv-contracts-tab:hover{ color: var(--text); }
  .pv-contracts-tab.is-active{ color: var(--cyan); border-bottom-color: var(--cyan); }
  .pv-contracts-tab-alert{ color: var(--warn); }
  .pv-contracts-tab-alert.is-active{ color: var(--warn); border-bottom-color: var(--warn); }
  /* カード内の検索トグル・検索窓(.pv-contracts-search-toggle / .pv-contracts-search /
     .pv-contracts-q)は廃止した。カードは3件しか出さないので絞り込む意味が薄く、
     検索は全件ページ(#view-contracts)のツールバーに一本化した。
     .pv-contracts-requester は全件ページの依頼者セレクトと Slack 全件ページの期間セレクトで
     まだ使っているので残す。 */
  .pv-contracts-requester{
    flex:none; font-size:11px; padding:5px 6px; color-scheme: dark;
    background: rgba(255,255,255,0.04); border:1px solid var(--panel-border); border-radius:6px; color: var(--text);
  }
  /* ネイティブのドロップダウン(option リスト)が白くならないよう、周りに合わせた暗色を明示 */
  .pv-contracts-requester option{ background: var(--panel-solid); color: var(--text); }
  /* タブ切替で件数が変わってもカード高が動かないよう固定高。高さは表示上限の
     ちょうど3件分＝行33px×3＋gap 12px×2＝123px。
     以前は 210px で、検索窓と「すべて表示」ボタンがその差を埋めていたが、
     v2.33.35 でどちらも外したのでカード下に 87px の空きになっていた。
     (16:9 枠モードではこの高さを外すので、代わりに app.business.js が不可視の
      プレースホルダ行で3件分を埋めている) */
  .pv-contracts-list{
    display:flex; flex-direction:column; gap:12px;
    height: calc(33px * 3 + 12px * 2); overflow-y:auto;
  }
  /* 3件に満たないときの高さ合わせ用のダミー行。実物と同じ構造なので実寸が一致する。 */
  .pv-contract-row.is-placeholder{ visibility:hidden; pointer-events:none; }
  .pv-contracts-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }

  /* 契約書トラッカー 一覧ページ（#view-contracts）。カードの .pv-contract-row をそのまま使い、
     高さ固定をやめて全件を1列で素直に縦積みする。 */
  .cal-toolbar .pv-contracts-tabs{ margin-bottom:0; border-bottom:none; }
  /* 幅は狭めたまま、余白を左右に均等配分してページ中央に置く（`margin:0 auto`）。
     以前は左寄せで右側が大きく空いていた。プロジェクトボード一覧(.projects-page-list)と
     max-width も揃えて、ビジネスの2つの全件ページで列幅が変わらないようにする。 */
  .contracts-page-list{
    display:flex; flex-direction:column; gap:10px;
    max-width:840px; margin:0 auto; padding:4px 0 8px;
  }
  .contracts-page-list .pv-contract-row{ height:auto; }
  /* 「完了 N 件を表示 / 隠す」。列が中央寄せなので、この行も中央に置く。
     .pv-list-more の align-self:flex-start が後ろの行にあるので、詳細度で勝たせる。 */
  .contracts-page-list .contracts-page-toggle{ align-self:center; margin-top:2px; }

  /* 一覧ページのステータスバーを KPI バンドにする（「12 件」だけでは状況が分からない）。
     中央寄せのリストの上に載るので内容も中央揃え。パネル自体は他ページのステータスバーと
     同じ全幅のまま（`margin:0 auto` を足すと .frame の縦 flex の中で
     shrink-to-fit になり、パネルごと小さい箱に縮んでしまう）。
     id セレクタで display を持つので [hidden] を明示的に打ち消しておく
     （.frame[hidden] と同じ理由。無いと非表示時に出たままになる）。 */
  #contracts-page-status{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:20px;
  }
  #contracts-page-status[hidden]{ display:none; }
  .contracts-kpi{ display:flex; align-items:baseline; gap:6px; }
  .contracts-kpi-label{
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint);
  }
  .contracts-kpi-value{
    font-family: var(--font-mono); font-size:13px; font-variant-numeric: tabular-nums;
    letter-spacing:0; color: var(--text);
  }
  .contracts-kpi.is-warn .contracts-kpi-value{ color: var(--warn); }
  .contracts-kpi.is-err .contracts-kpi-value{ color: var(--err); }

  /* 行内の Slack スレッドリンク（カード・一覧ページ共通） */
  .pv-contract-slack-link{
    flex:none; display:inline-flex; align-items:center; gap:3px;
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--accent); text-decoration:none;
    border:1px solid var(--panel-border); border-radius:5px; padding:2px 6px;
  }
  .pv-contract-slack-link:hover{ border-color: var(--accent); text-decoration:underline; }
  /* カード内リストの「…ほか N件」行(契約書=クリックで管理モーダル、Slack=ただの表記) */
  .pv-list-more{
    align-self:flex-start; background:transparent; border:0; padding:2px 0;
    font-size:11px; color: var(--text-faint); cursor:pointer; letter-spacing:.3px;
  }
  .pv-list-more:hover{ color: var(--cyan); }
  .pv-list-more.is-static{ cursor:default; }
  .pv-list-more.is-static:hover{ color: var(--text-faint); }
  .pv-contracts-status.is-err{ color: var(--err); }
  .pv-contract-row{
    display:flex; flex-direction:column; gap:5px; padding:8px 10px 9px;
    border:1px solid var(--panel-border); border-left:3px solid var(--contract-accent, var(--cyan)); border-radius:8px;
    cursor:pointer; transition: background .15s, border-color .15s;
  }
  .pv-contract-row:hover, .pv-contract-row:focus-visible{ background: rgba(255,255,255,0.05); border-color: var(--cyan); outline:none; }
  .pv-contract-row.is-pending{ background: rgba(255,207,107,0.04); }
  .pv-contract-row.is-alert{ background: rgba(255,207,107,0.08); }
  .pv-contract-row.is-alert:hover, .pv-contract-row.is-alert:focus-visible{ background: rgba(255,207,107,0.14); }
  .pv-contract-row.is-overdue{ border-left-color: var(--err); background: rgba(255,60,90,0.06); }
  .pv-contract-row.is-overdue:hover, .pv-contract-row.is-overdue:focus-visible{ background: rgba(255,60,90,0.12); }
  /* 契約書名。同一会社の複数契約（JMDC 3件・MODE Inc 2件 等）を見分ける唯一の手掛かりなので、
     text-faint / 11px から1段強くして読めるようにする。 */
  .pv-contract-subtitle{ font-size:12px; color: var(--text-dim); }

  /* 完了（報告済み）の行は落として、要対応の行が前に出るようにする。
     プロジェクトボードの .pv-event-row.is-archived と同じ手法。hover では戻す。 */
  .pv-contract-row.is-done{ opacity:.55; }
  .pv-contract-row.is-done:hover, .pv-contract-row.is-done:focus-visible{ opacity:1; }

  /* 進捗ステッパー（依頼→送付→締結→報告）。日付を「依頼 7/28 ・ 送付 7/29 …」と
     横に並べるより「今どこで止まっているか」が一目で分かる。デザイン方針で許可されている
     セグメント進捗を、契約書トラッカーではここで1回だけ使う。 */
  .pv-contract-steps{ display:flex; gap:6px; margin-top:1px; }
  .pv-contract-step{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .pv-contract-step-bar{ height:2px; border-radius:1px; background: var(--panel-border); }
  .pv-contract-step.is-done .pv-contract-step-bar{ background: var(--accent); }
  .pv-contract-step.is-overdue .pv-contract-step-bar{ background: var(--err); }
  .pv-contract-step-label{
    font-family: var(--font-mono); font-size:9px; letter-spacing:1px; color: var(--text-faint);
  }
  .pv-contract-step.is-current .pv-contract-step-label{ color: var(--text-dim); }
  /* 日付は mono ＋ tabular-nums で桁を揃える（方針: 数値・日付は mono）。 */
  .pv-contract-step-date{
    font-family: var(--font-mono); font-size:10.5px; font-variant-numeric: tabular-nums;
    color: var(--text-faint);
  }
  .pv-contract-step.is-done .pv-contract-step-date{ color: var(--text-dim); }
  /* 依頼者・期限の行（日付3つはステッパーへ移した残り）。 */
  .pv-contract-meta{
    font-family: var(--font-mono); font-size:10.5px; font-variant-numeric: tabular-nums;
    letter-spacing:.2px; color: var(--text-faint);
  }

  /* 自動更新の事後報告バナー。中央寄せのリストの先頭に載る。
     行の ⟳ チップと同じアクセント色でまとめ、右端に「確認済みにする」。 */
  .contracts-auto-banner{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:8px 12px; border:1px solid var(--accent-dim); border-radius:6px;
    background: rgba(255,143,63,0.06);
  }
  .contracts-auto-text{
    flex:1 1 auto; min-width:0; font-size:11.5px; line-height:1.6; color: var(--text-dim);
  }
  .contracts-auto-ack{
    flex:none; font-family: var(--font-mono); font-size:10px; letter-spacing:.3px;
    color: var(--accent); background:transparent; cursor:pointer;
    border:1px solid var(--accent-dim); border-radius:5px; padding:3px 10px;
    transition: color .15s, background .15s, border-color .15s;
  }
  .contracts-auto-ack:hover{ color: var(--bg); background: var(--accent); border-color: var(--accent); }
  .contracts-auto-ack:disabled{ opacity:.5; cursor:default; }
  .contracts-auto-ack:disabled:hover{ color: var(--accent); background:transparent; border-color: var(--accent-dim); }

  /* 案件ごとの備考。全件ページ(#view-contracts)の行にだけ出す。改行を保ちつつ、
     長文で行が伸びすぎないよう3行で丸める（全文は行タップ＝管理モーダルで読む）。 */
  .pv-contract-notes{
    font-size:11.5px; line-height:1.6; color: var(--text-dim);
    white-space: pre-wrap; overflow-wrap: anywhere;
    border-left:2px solid var(--panel-border); padding-left:8px; margin-top:2px;
    display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow:hidden;
  }

  /* ビジネスカード用コンパクト行（1行＝契約書名・依頼者・ステータス）。縦を詰める。 */
  .pv-contract-row.is-compact{
    flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 10px; min-width: 0;
  }
  .pv-contract-row.is-compact .pv-case-name{ font-size: 12.5px; }
  .pv-contract-req{
    flex: none; font-family: var(--font-mono); font-size: 10px;
    color: var(--text-dim); letter-spacing: .3px; white-space: nowrap;
  }
  .pv-contract-alert{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--warn); border:1px solid rgba(255,207,107,0.4); border-radius:5px; padding:2px 6px;
  }
  .pv-contract-alert.is-err{ color: var(--err); border-color: rgba(255,80,80,0.4); }
  /* Slack自動検知が status を進めた行の印。アラート(warn)とは別物なので
     アクセント色にする＝「要対応」ではなく「要確認」。 */
  .pv-contract-auto{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--accent); border:1px solid var(--accent-dim); border-radius:5px; padding:2px 6px;
  }
  .pv-contract-slack-badge{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--violet); border:1px solid var(--violet); border-radius:5px; padding:2px 6px;
  }
  /* 次の状態へ1タップで進めるボタン（行 → モーダル → select → 保存 の4手を1手にする）。
     行タップ＝管理モーダルと競合しないよう click / keydown は行へ伝播させていない。 */
  .pv-contract-advance{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--text-dim); background:transparent; cursor:pointer;
    border:1px solid var(--panel-border); border-radius:5px; padding:2px 8px;
    transition: color .15s, border-color .15s, background .15s;
  }
  .pv-contract-advance:hover{ color: var(--bg); background: var(--accent); border-color: var(--accent); }
  .pv-contract-advance:disabled{ opacity:.5; cursor:default; }
  .pv-contract-advance:disabled:hover{ color: var(--text-dim); background:transparent; border-color: var(--panel-border); }
  /* 同一会社の他契約に絞り込むチップ。補助情報なので破線で弱く出す。 */
  .pv-contract-same{
    flex:none; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px;
    color: var(--text-faint); background:transparent; cursor:pointer;
    border:1px dashed var(--panel-border); border-radius:5px; padding:2px 6px;
    transition: color .15s, border-color .15s;
  }
  .pv-contract-same:hover{ color: var(--accent); border-color: var(--accent-dim); }

  #contract-detail-body{ display:flex; flex-direction:column; gap:10px; }
  #contract-detail-body .case-edit-status{ flex:none; width:120px !important; padding:7px 8px !important; font-size:12.5px !important; }
  #contract-detail-body .case-edit-due{ flex:none; width:150px !important; padding:7px 8px !important; font-size:12.5px !important; color-scheme: dark; }
  .pv-contract-slack-note{ font-size:11.5px; color: var(--violet); line-height:1.6; }
  .pv-contract-field-label{ font-size:12px; color: var(--text-dim); margin-right:8px; }
  /* 管理モーダルの備考欄。既定の1行 textarea だと書きづらいので3行ぶん確保する。 */
  .pv-contract-notes-input{ min-height:76px; line-height:1.6; font-size:13px !important; }
  .pv-contract-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .pv-contract-chip{
    font-size:11px; cursor:pointer; color: var(--text-dim);
    background:transparent; border:1px solid var(--panel-border); border-radius:6px; padding:3px 10px;
    transition: color .15s, border-color .15s, background .15s;
  }
  .pv-contract-chip:hover{ color: var(--text); border-color: var(--cyan); }
  .pv-contract-chip.is-active{ color: var(--cyan); border-color: var(--cyan); background: rgba(255,143,63,0.10); }

  /* ---------- ビジネス: プロジェクトボード(内部は event_trackers・旧イベント／月次トラッカー) ---------- */
  .pv-events-list{ display:flex; flex-direction:column; gap:10px; max-height:224px; overflow-y:auto; }
  .pv-events-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }
  .pv-events-status.is-err{ color: var(--err); }
  .pv-event-row{
    display:flex; flex-direction:column; gap:5px; padding:8px 10px 9px;
    border:1px solid var(--panel-border); border-left:3px solid var(--cyan); border-radius:8px;
    cursor:pointer; transition: background .15s, border-color .15s;
  }
  .pv-event-row:hover{ background: rgba(255,255,255,0.03); }
  .pv-event-row.is-done{ border-left-color: var(--ok); opacity:.8; }
  .pv-event-row.is-overdue{ border-left-color: var(--err); background: rgba(255,90,90,0.05); }
  .pv-event-kind{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:.4px; color: var(--text-dim);
    border:1px solid var(--panel-border); border-radius:4px; padding:1px 5px; flex:none; }
  .pv-event-autooff{ font-family: var(--font-mono); font-size:9.5px; color: var(--text-faint);
    border:1px dashed var(--panel-border); border-radius:4px; padding:1px 5px; flex:none; }
  .pv-event-progress{ height:5px; border-radius:3px; background: rgba(255,255,255,0.06); overflow:hidden; }
  .pv-event-progress-fill{ height:100%; background: var(--accent); border-radius:3px; transition: width .25s; }
  .pv-event-digest{ font-size:11px; color: var(--text-dim); line-height:1.55; }
  /* 「次にやること」= 未完了の先頭項目。進捗メタより上・明るい色で主役に。 */
  .pv-event-next{ font-size:12px; color: var(--text); line-height:1.5; }
  .pv-event-next.is-done{ color: var(--ok); }
  .pv-events-list .pv-event-next{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pv-event-field-label{ font-size:11px; letter-spacing:.4px; color: var(--text-faint); margin:12px 0 4px; }
  .pv-event-items{ display:flex; flex-direction:column; gap:6px; }
  .pv-event-item-line{ display:flex; align-items:center; gap:5px; }
  .pv-event-item-line input[type="checkbox"]{ flex:none; }
  .pv-event-item-line .plan-tpl-text{ flex:1 1 auto; min-width:0; }
  /* 期限・メモの開閉ボタン。既定は畳んでおき、値があるものは amber で示す。 */
  .pv-event-item-more{ font-size:12px; }
  .pv-event-item-more.is-open{ border-color: var(--accent); color: var(--accent); }
  .pv-event-item-more.has-val{ color: var(--accent); border-color: var(--accent-dim); }
  /* 項目の並べ替え ↑↓。行が混まないよう小さめ。 */
  .pv-event-item-move{ width:24px; font-size:11px; }
  .pv-event-item-move:disabled{ opacity:.3; cursor:default; }
  /* 期限＋メモは縦積み(狭いモーダルで横並びだと潰れる)。既定は畳む。 */
  .pv-event-item-sub{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:-2px 0 8px 24px; }
  .pv-event-item-sub[hidden]{ display:none; }
  /* .event-form input[type=date/text](width:100%・font 14px)に負けるので詳細度を上げて上書き。 */
  .event-form input[type="date"].pv-event-item-due{
    align-self:flex-start; width:172px; flex:none; font-size:12px; padding:6px 9px; color-scheme: dark;
    background: rgba(255,255,255,0.04); border:1px solid var(--panel-border); border-radius:6px; color: var(--text); }
  .event-form input[type="date"].pv-event-item-due.is-overdue{ border-color: var(--err); color: var(--err); background: rgba(255,90,90,0.08); }
  .event-form input[type="text"].pv-event-item-note{
    width:100%; font-size:12px; padding:6px 9px; color-scheme: dark;
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:6px; color: var(--text-dim); }
  .pv-event-digest-list{ margin:0; padding-left:18px; font-size:11.5px; color: var(--text-dim); line-height:1.6; }
  /* プロジェクトボードカードのヘッダー右(すべて / 管理) */
  .pv-head-actions{ display:flex; align-items:center; gap:8px; }

  /* ---- プロジェクトボード 一覧ページ (#view-projects) ---- */
  .projects-page-list{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding:4px 0 8px; }
  .pv-event-row.is-page{ padding:12px 14px 13px; gap:7px; }
  .pv-event-row.is-archived{ opacity:.55; }
  .pv-event-checklist{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px;
    font-size:11.5px; color: var(--text-dim); line-height:1.5; }
  .pv-event-checklist li.is-done{ color: var(--text-faint); text-decoration:line-through; }
  .pv-event-checklist li.is-overdue{ color: var(--err); }
  .pv-event-checklist li.is-more{ color: var(--text-faint); font-style:italic; }

  /* プロジェクトボード管理モーダル: タブ / アーカイブ / 照合条件の折りたたみ */
  .pb-tabs{ display:flex; gap:2px; margin:2px 0 10px; border-bottom:1px solid var(--panel-border); }
  .pb-tab{ font-family: var(--font-mono); font-size:11px; letter-spacing:.3px; cursor:pointer;
    color: var(--text-faint); background:transparent; border:none; border-bottom:2px solid transparent;
    padding:6px 12px; transition: color .15s, border-color .15s; }
  .pb-tab:hover{ color: var(--text); }
  .pb-tab.is-active{ color: var(--cyan); border-bottom-color: var(--cyan); }
  .habit-list-row.is-dim{ opacity:.55; }
  .pb-archived-toggle{ margin:8px 0 4px; font-size:11.5px; color: var(--text-dim); background:transparent;
    border:none; cursor:pointer; padding:4px 2px; }
  .pb-archived-toggle:hover{ color: var(--text); }
  .pb-archived-list{ display:flex; flex-direction:column; gap:6px; border-top:1px dashed var(--panel-border); padding-top:6px; }
  .pb-match-details{ margin:12px 0 4px; border:1px solid var(--panel-border); border-radius:8px; padding:6px 10px; }
  .pb-match-details > summary{ cursor:pointer; font-size:11.5px; color: var(--text-faint); letter-spacing:.3px; list-style:revert; }
  .pb-match-details[open] > summary{ margin-bottom:6px; color: var(--text-dim); }
  .pb-archive-btn{ display:block; width:100%; margin-top:12px; font-size:12px; }
  .pb-tpl-create{ display:block; width:100%; margin-top:14px; }

  /* ---------- ビジネス: Slackダイジェスト(フェーズB) ---------- */
  /* 一覧は見出し(時刻＋一言)のみ。クリックで詳細を開閉する。 */
  .pv-slack-list{ display:flex; flex-direction:column; gap:8px; max-height:230px; overflow-y:auto; }
  .pv-slack-status{ font-size:11.5px; color: var(--text-faint); margin:10px 0 0; line-height:1.6; }
  .pv-slack-status.is-err{ color: var(--err); }
  .pv-slack-item{
    flex:none;   /* 件数が多くて溢れても圧縮させない(圧縮＋overflow:hidden で展開詳細が消えていた) */
    border:1px solid var(--panel-border); border-left:3px solid var(--violet); border-radius:8px;
    overflow:hidden;
  }
  .pv-slack-head{
    width:100%; display:flex; align-items:center; gap:8px;
    padding:7px 26px 7px 10px; position:relative;
    background:transparent; border:0; text-align:left; cursor:pointer; color:inherit; font:inherit;
  }
  .pv-slack-head:hover{ background: rgba(255,255,255,0.03); }
  .pv-slack-head::after{
    content:""; position:absolute; right:10px; top:50%;
    width:6px; height:6px; border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint);
    transform:translateY(-70%) rotate(45deg); transition:transform .15s;
  }
  .pv-slack-item.is-open .pv-slack-head::after{ transform:translateY(-30%) rotate(225deg); }
  .pv-slack-time{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); flex:none; }
  .pv-slack-headline{
    font-size:12px; color: var(--text-dim); min-width:0; flex:1;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pv-slack-item.is-open .pv-slack-headline{ color: var(--text); }
  /* 記載の無い回(「動きなし」)は左のアクセント罫と見出しを落として、動きのある回を目立たせる。 */
  .pv-slack-item.is-quiet{ border-left-color: var(--hairline); }
  .pv-slack-item.is-quiet .pv-slack-headline{ color: var(--text-faint); }
  /* この回に何件の記載があるか。0 件のときは JS 側で出さない。 */
  .pv-slack-count{
    flex:none; font-family: var(--font-mono); font-size:9.5px; line-height:1;
    color: var(--text-faint); border:1px solid var(--panel-border); border-radius:2px; padding:3px 4px;
  }
  .pv-slack-detail{ padding:2px 10px 10px; display:flex; flex-direction:column; gap:9px; }
  .pv-slack-detail[hidden]{ display:none; } /* display:flex 指定が UA の [hidden]{display:none} を打ち消すため(このファイルの他所と同じ対応) */
  .pv-slack-channels{ display:flex; flex-wrap:wrap; gap:4px; }
  .pv-slack-chan{
    font-family: var(--font-mono); font-size:9.5px; color: var(--text-dim);
    border:1px solid var(--hairline); border-radius:2px; padding:2px 5px;
  }
  /* 「■Claudeからの一言」の1行。見出し行にも出るが、そこは1行省略なので全文はここで読む。 */
  .pv-slack-note{ font-size:12px; color: var(--text-dim); line-height:1.6; }
  .pv-slack-sec{ display:flex; flex-direction:column; gap:3px; }
  .pv-slack-sec-title{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--accent); }
  .pv-slack-sec-list{ margin:0; padding:0 0 0 15px; display:flex; flex-direction:column; gap:3px; }
  .pv-slack-sec-list li{ font-size:12px; color: var(--text); line-height:1.6; }
  .pv-slack-sec-list li::marker{ color: var(--text-faint); font-size:10px; }
  /* 検索語ハイライト。UA 既定の黄色ベタを、発光させないアンバーの下地に置き換える。 */
  mark.slack-hl{ background: var(--accent-dim); color: var(--text); border-radius:2px; padding:0 1px; }

  /* ---------- Slackダイジェスト 全件ページ (#view-slack) ---------- */
  /* 列幅は契約書(.contracts-page-list)/プロジェクト(.projects-page-list)と同じ 840px 中央寄せ。 */
  .slack-page-list{
    display:flex; flex-direction:column; gap:16px;
    max-width:840px; margin:0 auto; padding:4px 0 8px;
  }
  .slack-day{ display:flex; flex-direction:column; gap:8px; }
  .slack-day-head{
    font-family: var(--font-mono); font-size:10px; letter-spacing:1.5px; color: var(--text-faint);
    padding-bottom:5px; border-bottom:1px solid var(--hairline);
  }
  .slack-quiet-toggle{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-size:11.5px; color: var(--text-dim); cursor:pointer;
  }
  .slack-quiet-toggle input{ width:13px; height:13px; margin:0; }

  /* ---------- ビジネス: 最近のメモ(SYSLEA タグ) ---------- */
  .biz-note-list,
  .biz-task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; max-height:150px; overflow-y:auto; }
  .biz-note-list .pv-up-item,
  .biz-task-list .pv-up-item{ cursor:pointer; }
  .biz-note-list .pv-up-item:hover .pv-up-title,
  .biz-task-list .pv-up-item:hover .pv-up-title{ color: var(--cyan); }

  .pv-today-date{ display:flex; align-items:baseline; gap:10px; font-family: var(--font-display); font-size:15px; letter-spacing:1px; color: var(--text-dim); }
  .pv-today-date .yr{ color: var(--text-faint); font-size:12px; }
  .pv-today-clock{ font-family: var(--font-mono); font-size: clamp(30px, 3.6vw, 40px); font-weight:700; color: var(--text); margin:6px 0 4px; }
  .pv-today-clock .sec{ font-size:0.5em; color: var(--cyan); margin-left:4px; }
  .pv-today-tz{ font-size:11px; letter-spacing:2px; color: var(--text-faint); }

  /* WEATHER は HOME(.hud-weather)の寸法に揃える */
  .pv-weather-main{ font-size:13px; color: var(--text-dim); }
  .pv-weather-range{ font-family: var(--font-mono); font-size:14px; color: var(--text); margin-top:4px; }
  .pv-weather-note{ font-size:9px; color: var(--text-faint); letter-spacing:.4px; margin-top:6px; text-align:center; }

  .pv-up-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .pv-up-item{ display:flex; align-items:center; gap:10px; font-size:13px; }
  .pv-up-dot{ width:7px; height:7px; border-radius:50%; background: var(--magenta); box-shadow: 0 0 6px var(--magenta); flex:none; }
  .pv-up-date{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-faint); min-width:66px; flex:none; }
  .pv-up-title{ color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---------- プライベート: サブスク管理 ----------
     ページ専用（v2.33.14 でカードから独立ページへ移設済み）。行の詳細な組みは
     末尾の「収支 / サブスク ページ」ブロックで上書きする。 */
  .pv-subs-list{ display:flex; flex-direction:column; gap:8px; }
  .pv-sub-row{
    display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer;
    border:1px solid var(--panel-border); border-left:3px solid var(--cyan); border-radius:8px;
  }
  .pv-sub-row:hover{ background: rgba(255,255,255,0.03); }
  .pv-sub-name{ flex:1; min-width:0; font-size:12.5px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pv-sub-amount{ font-family: var(--font-mono); font-size:12px; color: var(--text); flex:none; }
  .pv-subs-status{ font-size:11.5px; color: var(--text-faint); margin:8px 0 0; line-height:1.6; }
  .pv-subs-status.is-err{ color: var(--err); }

  /* サブスク管理モーダルの行エディタ */
  .subs-rows{ display:flex; flex-direction:column; gap:10px; margin-top:10px; max-height:52vh; overflow-y:auto; }
  .subs-row{
    display:flex; flex-direction:column; gap:6px; padding:8px;
    border:1px solid var(--panel-border); border-radius:8px; background: rgba(255,255,255,0.02);
  }
  .subs-row-line{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  /* .event-form input[...] の width:100% を上書きするため個別幅は !important
     (このファイルの .plan-tpl-time 等と同じ対応) */
  .subs-row .subs-in{
    background: rgba(255,255,255,0.05); border:1px solid var(--panel-border); border-radius:6px;
    color: var(--text); font-size:12px !important; padding:6px 8px !important;
  }
  .subs-row .subs-in:focus{ outline:none; border-color: var(--cyan); box-shadow:none; }
  .subs-row .subs-in-name{ flex:1 1 120px !important; width:auto !important; min-width:100px; }
  .subs-row .subs-in-amt{ flex:none !important; width:92px !important; }
  .subs-row .subs-in-every{ flex:none !important; width:46px !important; text-align:center; }
  .subs-row .subs-in-unit{ flex:none !important; width:96px !important; }
  .subs-row .subs-in-mo{ flex:none !important; width:66px !important; }
  .subs-row .subs-in-dy{ flex:none !important; width:52px !important; }
  .subs-row .subs-in-unit option,
  .subs-row .subs-in-mo option{ background: var(--panel-solid); color: var(--text); }
  .subs-row .subs-in-note{ flex:1 1 100% !important; width:auto !important; }
  .subs-unit-txt{ font-size:11px; color: var(--text-dim); }
  .subs-row-del{
    flex:none; width:26px; height:26px; border:1px solid var(--panel-border); border-radius:6px;
    background:transparent; color: var(--text-faint); cursor:pointer; font-size:12px;
  }
  .subs-row-del:hover{ color: var(--err); border-color: var(--err); }

  /* アイデア帳: 新規ノートモーダルの本文 */
  .idea-body-input{ min-height:220px; }

  /* 中央列のヒーロー。左右のカード列の高さに合わせて伸びる(align-items:stretch)。
     画像は元からアンバー基調なので軽く沈めるだけ。走査線・ビネット・縦書きの格言は撤去済み。 */
  .pv-hero{ position:relative; overflow:hidden; min-height:260px; border-radius:3px; }
  .pv-hero-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;
    filter: brightness(1.08) contrast(1.02) saturate(1.04);
  }
  /* 下端だけ軽く地色へフェード（カードとの境目をなじませる程度） */
  .pv-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(7,9,12,0) 62%, rgba(7,9,12,.42) 100%);
  }

  @media (max-width: 1080px){
    .pv-grid{ grid-template-columns: 1fr; }
    .pv-bottom,
    #view-private .pv-bottom,
    #view-business .pv-bottom{ grid-template-columns: 1fr; }
    .pv-hero{ min-height:150px; }
  }

  /* ---------- アイデア帳(Obsidian vault ビューア) ---------- */
  .ideas-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; }
  .ideas-crumb{
    background:none; border:none; padding:2px 4px; cursor:pointer;
    font-family: var(--font-body); font-size:12px; color: var(--cyan);
    border-radius:4px;
  }
  .ideas-crumb:hover:not(:disabled){ background: rgba(255,143,63,0.1); }
  .ideas-crumb:disabled{ color: var(--text); cursor:default; }
  .ideas-crumb-sep{ color: var(--text-faint); }

  .ideas-list{ list-style:none; margin:0; padding:6px 0; }
  .ideas-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; cursor:pointer; border-radius:8px;
    border:1px solid transparent;
  }
  .ideas-item:hover, .ideas-item:focus{ background: rgba(255,255,255,0.03); border-color: var(--hairline); outline:none; }
  .ideas-item:focus-visible{ border-color: var(--cyan); }
  .ideas-icon{ flex:none; font-size:15px; line-height:1; }
  .ideas-name{ font-size:13.5px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .ideas-note{ padding:6px 4px 24px; }
  .ideas-note-back{
    background:none; border:1px solid var(--panel-border); border-radius:7px;
    color: var(--text-dim); font-family: var(--font-body); font-size:12px;
    padding:5px 12px; cursor:pointer; margin-bottom:16px;
  }
  .ideas-note-back:hover{ border-color: var(--cyan); color: var(--text); }
  .ideas-note-title{
    font-family: var(--font-display); font-size:20px; letter-spacing:.5px;
    color: var(--text); margin:0 0 16px;
    border-bottom:1px solid var(--hairline); padding-bottom:12px;
  }

  /* ---- 簡易 Markdown 出力 ---- */
  .md-body{ font-size:14px; line-height:1.7; color: var(--text-dim); max-width:760px; }
  .md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6{
    color: var(--text); font-family: var(--font-body); font-weight:700;
    line-height:1.35; margin:1.4em 0 .55em;
  }
  .md-body h1{ font-size:1.6em; } .md-body h2{ font-size:1.35em; }
  .md-body h3{ font-size:1.15em; } .md-body h4{ font-size:1em; }
  .md-body h5, .md-body h6{ font-size:.9em; color: var(--text-dim); }
  .md-body p{ margin:.7em 0; }
  .md-body ul, .md-body ol{ margin:.6em 0; padding-left:1.5em; }
  .md-body li{ margin:.25em 0; }
  .md-body li.md-task{ list-style:none; margin-left:-1.3em; }
  .md-body li.md-task input{ margin-right:7px; }
  .md-body a{ color: var(--cyan); text-decoration:none; border-bottom:1px solid rgba(255,143,63,0.3); }
  .md-body a:hover{ border-bottom-color: var(--cyan); }
  .md-body code{
    font-family: var(--font-mono); font-size:.88em;
    background: rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; color: var(--text);
  }
  .md-body pre.md-pre{
    background: var(--bg-deep); border:1px solid var(--hairline); border-radius:8px;
    padding:12px 14px; overflow-x:auto; margin:.9em 0;
  }
  .md-body pre.md-pre code{ background:none; padding:0; font-size:12.5px; line-height:1.6; color: var(--text-dim); }
  .md-body blockquote{
    margin:.9em 0; padding:.3em 0 .3em 14px;
    border-left:3px solid var(--magenta-dim); color: var(--text-faint);
  }
  .md-body blockquote p{ margin:.35em 0; }
  .md-body hr{ border:none; border-top:1px solid var(--hairline); margin:1.5em 0; }
  .md-body .wl{ color: var(--cyan); background: rgba(255,143,63,0.08); padding:0 4px; border-radius:3px; }
  .md-body del{ color: var(--text-faint); }
  .md-frontmatter{
    font-family: var(--font-mono); font-size:11.5px; line-height:1.6;
    white-space:pre-wrap; color: var(--text-faint);
    background: rgba(255,255,255,0.02); border:1px solid var(--hairline);
    border-radius:8px; padding:10px 12px; margin-bottom:16px;
  }

  /* ---------- メール操作ボタン(詳細モーダル) ---------- */
  .mail-actions{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:10px 20px; border-bottom:1px solid var(--hairline);
  }
  .mail-actions[hidden]{ display:none; }
  .mail-act-btn{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    padding:6px 12px; border-radius:7px;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); font-family: var(--font-body); font-size:11.5px; letter-spacing:.3px;
  }
  .mail-act-btn svg{ width:14px; height:14px; stroke: currentColor; }
  .mail-act-btn:hover:not(:disabled){ border-color: var(--cyan); color: var(--text); }
  .mail-act-btn:disabled{ opacity:.5; cursor:default; }
  .mail-act-btn.mail-act-danger:hover:not(:disabled){ border-color:#ff5050; color: var(--err); }
  .mail-act-msg{ font-size:11px; color: var(--text-faint); }
  /* 返信は主動線なのでアンバーで前に出す(グラデ・発光は使わない = B/アンバー) */
  .mail-act-btn.mail-act-reply{ border-color: var(--cyan-dim); color: var(--text); }
  .mail-act-btn.mail-act-reply:hover:not(:disabled){ border-color: var(--cyan); }

  /* ---------- メール作成(新規/返信/転送) ---------- */
  .mail-compose-btn{
    font-family: var(--font-body); font-size:12.5px; letter-spacing:.03em;
    padding:7px 14px; border-radius:6px; cursor:pointer; white-space:nowrap;
    background: rgba(255,143,63,.14); color: var(--text); border:1px solid var(--cyan-dim);
    transition: border-color .15s;
  }
  .mail-compose-btn:hover:not(:disabled){ border-color: var(--cyan); }
  .mail-compose-btn:disabled{ opacity:.5; cursor:default; }
  /* 差出人アカウント(はるか / SYSLEA)。誤送信防止のためフォーム最上段に必ず出す */
  .mail-compose-from{
    font-family: var(--font-mono); font-size:11.5px; letter-spacing:.04em;
    color: var(--text-dim); background: rgba(255,255,255,0.02);
    border:1px solid var(--hairline); border-radius:8px; padding:8px 10px;
  }
  .mail-compose-from b{ color: var(--accent); font-weight:600; }
  .event-form textarea#mail-compose-body{ min-height:220px; line-height:1.7; }

  /* ================= モバイル(<=640px) =================
     このポータルは基本デスクトップ前提。スマホでは:
     - ヒーローのイラスト/スカイラインは非表示(時計・天気・ひとことは残す)
     - ヘッダーを折り返して余分な要素を隠す
     - カレンダーは日次のみ(週/月ボタンを隠す。calState.view は既定 day) */
  @media (max-width: 640px){
    body{ padding: 10px; }
    .frame{ gap: 10px; }

    #auth-gate > div{ max-width: 88vw; }

    .reauth-banner{ flex-wrap: wrap; font-size: 12px; padding: 10px 12px; gap: 8px 10px; }
    .reauth-banner-text{ flex-basis: 100%; }

    .topbar{ padding: 10px 12px; gap: 8px 12px; flex-wrap: wrap; }
    .brand-mark{ width: 30px; height: 30px; }
    .brand-text .name{ font-size: 14px; letter-spacing: 1px; }
    .brand-text .tag{ display: none; }
    /* モバイルでも HOME/プライベート/ビジネス を切り替えられるように、ナビを
       ヘッダー最下段へ回して全幅表示する(以前は display:none で隠していた)。 */
    .nav{
      display: flex; order: 1; width: 100%;
      justify-content: center; gap: 22px;
      padding-top: 8px; margin-top: 2px;
      border-top: 1px solid var(--hairline);
    }
    .nav a{ font-size: 12px; }
    .top-actions{ gap: 10px; }
    .profile-meta{ display: none; }
    .profile-menu{ position: fixed; top: 58px; right: 10px; left: auto; }

    .hero{ min-height: 0; }
    .hero .scene{ display: none !important; }   /* 640px 以下(スマホ)は HOME ヒーロー帯を出さない */
    .hero-hud{ padding: 16px 14px; border-bottom: none; gap: 14px; }
    .hud-ring{ width: 180px; height: 180px; }
    .hud-clock{ font-size: 30px; }

    .grid3{ gap: 10px; }
    .quick-grid{ gap: 8px; }
    .card-body{ padding: 4px 12px 14px; }

    .cal-toolbar{ padding: 10px 12px; gap: 8px; }
    .cal-view-switch{ display: none; }
    .cal-range-label{ font-size: 12px; letter-spacing: 0; }
    .acct-tabs .acct-tab{ padding: 5px 10px; font-size: 10px; }
    .cal-timeline-scroll{ max-height: 60vh; }

    .cal-toolbar-right{ width: 100%; }
    .mail-search-wrap{ flex: 1; }
    .mail-search-wrap input{ width: 100%; }
    /* Slackダイジェスト全件ページは検索窓の右に「期間」「動きなしを隠す」「更新」が並ぶので、
       狭い画面では検索窓だけを1行に落とす(他ページは右に1〜2個なので影響しない)。 */
    #view-slack .cal-toolbar-right .mail-search-wrap{ flex: 1 0 100%; }

    .notif-panel{ position: fixed; top: 60px; right: 10px; left: 10px; width: auto; }

    .pv-hero{ display: none; }

    .event-popover{ width: calc(100vw - 24px); }

    .modal-overlay{ padding: 10px; }
    .mail-detail, .cal-body-panel{ font-size: 13px; }
  }

  /* バックエンド(Render Free)のコールドスタート中に出す一時トースト */
  .server-warming-toast{
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 130; max-width: calc(100vw - 24px);
    padding: 9px 16px; border-radius: 999px;
    background: var(--panel-solid); border: 1px solid var(--panel-border);
    color: var(--text); font-size: 12.5px; line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .server-warming-toast[hidden]{ display: none; }

  /* =====================================================================
     B / AMBER restyle · Phase 1 — 発光・HUD装飾・グラス効果の全撤去
     ここは「土台」だけ。レイアウトは触らない。個別カードの作り込み
     (セグメント進捗・ブラケット表記・字組み)は後続フェーズで各所を直接編集する。
     この 1 ブロックを消せば Phase 1 の見た目変更はほぼロールバックできる。
     ===================================================================== */

  /* --- 発光(text-shadow は全部グロー目的だった) --- */
  *{ text-shadow: none !important; }

  /* --- ロゴのグロー(drop-shadow)除去 --- */
  .brand-mark svg{ filter: none !important; }

  /* --- 発光ドット / ライン / バーの box-shadow(0 0 Npx …)除去。形は残す --- */
  .nav a.active::after,
  .status::before, .statusbar .sys::before, .profile-meta .status::before,
  .dot-badge, .quick-tile .tile-dot, .mail-unread-dot,
  .cal-now-line, .cal-now-line::before,
  .pv-up-dot, .pv-habit-bar span, .pv-plan-bar span,
  .progress-fill{ box-shadow: none !important; }

  /* --- 進捗バーはグラデ廃止でベタのアンバー --- */
  .progress-fill{ background: var(--accent) !important; border-radius: 2px; }
  .progress-track{ border-radius: 2px; }

  /* --- モーダル/ポップオーバーの影はドロップシャドウのみ(グロー成分を除去) --- */
  .notif-panel{ box-shadow: 0 14px 40px rgba(0,0,0,.6) !important; }
  .modal-panel, .event-modal-panel{ box-shadow: 0 16px 44px rgba(0,0,0,.6) !important; }

  /* --- フォーカスリングの色をシアン固定値からアンバーへ(リング自体は残す) --- */
  .note-body-editable:focus,
  .event-form input:focus, .event-form select:focus, .event-form textarea:focus,
  .pv-plan-add input:focus,
  .mail-search-wrap:focus-within{ box-shadow: 0 0 0 2px var(--accent-dim) !important; }

  /* --- スクロールバーを紫→アンバー --- */
  *{ scrollbar-color: rgba(235,170,120,.30) rgba(255,255,255,.03) !important; }
  *::-webkit-scrollbar-thumb{ background: rgba(235,170,120,.30) !important; }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(235,170,120,.48) !important; }

  /* =====================================================================
     B / AMBER restyle · Phase 2 — クローム(トップバー / ヒーロー→システムバンド / フッター)
     いずれも CSS のみ。HTML の id/構造は不変なので clock/weather の JS 配線はそのまま。
     ===================================================================== */

  /* --- トップバー --- */
  .topbar{ border-radius: 3px; padding: 11px 18px; }
  .brand-mark svg path{ stroke: var(--accent); }
  .brand-mark svg path[fill^="url"]{ fill: var(--accent); }
  .brand-text .name{
    font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 2.5px;
    background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text);
  }
  .brand-text .tag{
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-faint);
  }
  .nav{ gap: 20px; }
  .nav a{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
    color: var(--text-dim); padding: 4px 0;
  }
  .nav a.active{ color: var(--accent); }
  .nav a.active::after{ height: 1px; bottom: -4px; background: var(--accent); }
  .icon-btn{
    width: 30px; height: 30px; border-radius: 2px;
    border: 1px solid transparent; background: transparent;
  }
  .icon-btn:hover{ border-color: var(--panel-border); background: rgba(255,255,255,.03); transform: none; }
  .icon-btn svg{ stroke: var(--text-dim); }
  .avatar{ border-radius: 2px; }
  .profile-meta .uname{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-dim); }
  .profile-meta .status{ font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--text-faint); }
  .profile-meta .status::before{ background: var(--ok); }

  /* --- HOME ヒーロー: 左=TODAY/WEATHER カード列 / 右=横長の実写ヒーロー ---
     プライベート/ビジネスの .pv-grid と同じ考え方。.hero はパネル装飾を捨てて素のグリッドに。 */
  .hero{
    min-height: auto; display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: clamp(12px, 1.6vw, 18px); align-items: stretch;
    background: transparent; border: none; border-radius: 0; padding: 0;
    backdrop-filter: none; overflow: visible;
  }
  .hero-hud{
    display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px);
    padding: 0; border-right: none; position: static;
  }
  .hero-hud::after{ display: none; }          /* 帯用アクセントティックは廃止(各カードが枠を持つ) */
  .hud-card{
    flex: 1 1 auto;
    /* --line は未定義だった(Phase 4 の変数名ミス)ため枠が出ずカードに見えなかった。
       トークンの --panel-border に修正し、プライベートの .pv-card と同じ見出し付きカードに。 */
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 3px;
    padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px;
  }
  .hud-label{
    font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; font-weight: 600;
    color: var(--text); padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
  }
  /* TODAY は プライベート(.pv-today-*)の寸法・書体に揃える */
  .hud-date{
    margin-top: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: 1px;
    color: var(--text-dim); display: flex; align-items: baseline; gap: 10px;
  }
  .hud-date .yr{ color: var(--text-faint); font-size: 12px; }
  .hud-clock-wrap{ position: static; margin: 2px 0 0; display: block; }
  .hud-ring{ display: none; }                 /* #ring-progress は tick() のため DOM には残す */
  .hud-clock{
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; letter-spacing: 1px; color: var(--text);
    display: flex; align-items: baseline; gap: 2px;
  }
  .hud-clock .sec{ font-size: .5em; color: var(--accent); }
  .hud-tz{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--text-faint); margin-top: 2px; }
  .hud-quote{ display: none; }
  .hud-weather{ border-top: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
  .hud-weather .place{ display: flex; align-items: center; gap: 7px; color: var(--text-dim); }
  .hud-weather svg{ stroke: var(--text-dim); }
  .hud-weather .temp{ font-family: var(--font-mono); font-size: 14px; color: var(--text); }
  .weather-note{ font-size: 9px; color: var(--text-faint); margin-top: 2px; text-align: center; }

  /* HOME 右列: 実写ヒーロー。高さは左のカード列に stretch で追従 */
  .hero .scene{ display: block; position: relative; min-height: 220px; overflow: hidden; border-radius: 3px; }
  .hero .scene .scene-illustration{
    display: block; opacity: 1; object-position: center 42%;
    filter: brightness(1.08) contrast(1.02) saturate(1.04);
  }
  .hero .scene::after{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(7,9,12,0) 62%, rgba(7,9,12,.42) 100%);
  }
  /* 狭い画面では左カード列とヒーローを縦積み(このブロック内 @media なので上の .hero より後勝ち) */
  @media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; }
  }

  /* --- フッター(ステータスバー) --- */
  .statusbar{
    border-radius: 3px; padding: 10px 18px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--text-faint);
  }
  .statusbar .sys{ color: var(--text-dim); }
  .statusbar .right{ gap: 14px; }
  .statusbar #last-sync{ color: var(--text-dim); }
  .statusbar .right span:last-child{ color: var(--accent); }

  /* =====================================================================
     B / AMBER restyle · Phase 3 — プライベートタブ
     ネオン残骸(rgba リテラル)は sed で一掃済み。ここは角丸を詰める等の仕上げ。
     ===================================================================== */
  .pv-habit-cell{ border-radius: 2px; }
  .pv-habit-weeknav button{ border-radius: 2px; }
  .pv-habit-manage{
    border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
    color: var(--accent); background: rgba(255,143,63,0.08);
  }
  .habit-list-row, .habit-count-pop, .habit-count-pop button, .habit-count-pop input{ border-radius: 2px; }
  .pv-fin-donut-value{ letter-spacing: .3px; }
  .pv-fin-donut-value{ font-variant-numeric: tabular-nums; }
  /* サブスクの行: 左の 3px アクセント帯は残しつつ数字を等幅・桁揃え */
  .pv-sub-amount{ font-variant-numeric: tabular-nums; }
  .pv-sub-row{ border-radius: 2px; }
  /* 習慣・PLAN の曜日ヘッダは字送りを詰める */
  .pv-habit-dowhead span{ letter-spacing: 0; font-weight: 500; }

  /* =====================================================================
     B / AMBER restyle · Phase 3b — ビジネスタブ
     契約書トラッカーの状態色は app.js の CONTRACT_STATUS_COLOR で「虹色→意味色のみ」に。
     ここは角丸とタブ下線の詰め。
     ===================================================================== */
  .pv-contract-row{ border-radius: 3px; }
  .pv-contract-chip{ border-radius: 3px; }
  .pv-case-status-badge{ border-radius: 2px; }
  .pv-contract-slack-badge{ border-radius: 2px; }
  .pv-contract-alert{ border-radius: 2px; }
  .pb-match-details, .pb-tpl-create, .pb-archive-btn{ border-radius: 3px; }
  .pv-contracts-tab.is-active{ border-bottom-width: 1px; }
  .pb-tab.is-active{ border-bottom-width: 1px; }
  .pv-contracts-tab, .pb-tab{ font-family: var(--font-mono); }
  /* Slackダイジェスト: 数字・時刻は等幅で桁揃え(既に mono だが念のため) */
  .pv-slack-time, .pv-slack-channels{ font-variant-numeric: tabular-nums; }

  /* =====================================================================
     B / AMBER restyle · Phase 4 — 仕上げ(サブ画面 / モーダル / 細部)
     ===================================================================== */
  /* カレンダー */
  .cal-today-btn, .cal-nav-btn{ border-radius: 2px; font-family: var(--font-mono); letter-spacing: .5px; }
  .cal-today-btn{ font-size: 10px; }
  .cal-range-label{ font-family: var(--font-display); letter-spacing: .3px; }
  .cal-event-block{ border-radius: 2px; }
  .cal-event-block:hover{ filter: brightness(1.12); }
  .cal-now-line, .cal-now-line::before{ box-shadow: none; background: var(--accent); }
  .cal-month-cell.today .cal-month-date{ color: var(--accent); }
  /* フォームのラベル/入力の角も詰める */
  .event-form input, .event-form select, .event-form textarea,
  .pv-contracts-requester, .mail-search-wrap{ border-radius: 2px; }
  /* クイックタイル・アイコンの色をトークンへ */
  .quick-tile svg{ stroke: var(--accent); }
  .quick-tile .tile-dot{ background: var(--accent); }
  .mail-unread-dot{ background: var(--accent); }

  /* =====================================================================
     固定アスペクト比ステージ（設定「表示 > 画面を固定比率にする」）
     ---------------------------------------------------------------------
     html.fixed-aspect が付いているときだけ有効。既定は OFF（＝従来の流動幅）。
     対象は HOME / プライベート / ビジネス の3ダッシュボード。メール等の詳細ページは
     中身が可変でスクロール前提のため枠を掛けない。
     ・PC（マウス・幅1025px以上）        → 16:9 枠に、上下中央寄せ
     ・タブレット（タッチ・幅768px以上）  → 4:3 枠に
     ・スマホ（〜767px）／中間幅のPC      → 何もしない（従来フロー）
     枠は自然な高さが収まる幅に取る（幅上限 1680／他タブの1400より広め）。
     中央の帯（HOME=.hero／プライベート・ビジネス=.pv-grid）を flex:1 0 auto にして
     「余った縦だけ食い、決して縮まない」＝下のカードにかぶらない。
     上下の外余白（レターボックス）は body padding を 10px に詰める。
     transform:scale は不使用。このブロックごと消せば完全に元へ戻る。
     ===================================================================== */
  @media (pointer: fine) and (min-width: 1025px) {
    html.fixed-aspect body:has(> #view-home:not([hidden])),
    html.fixed-aspect body:has(> #view-private:not([hidden])),
    html.fixed-aspect body:has(> #view-business:not([hidden])){
      display: flex; align-items: center; justify-content: center;
      padding: 10px;
    }
    html.fixed-aspect #view-home:not([hidden]),
    html.fixed-aspect #view-private:not([hidden]),
    html.fixed-aspect #view-business:not([hidden]){
      flex: none;
      max-width: none;
      width: min(1680px, 100%, calc((100dvh - 20px) * 16 / 9));
      aspect-ratio: 16 / 9;
      height: auto;
      gap: 12px;
      overflow: auto;
    }
  }
  @media (pointer: coarse) and (min-width: 768px) {
    html.fixed-aspect body:has(> #view-home:not([hidden])),
    html.fixed-aspect body:has(> #view-private:not([hidden])),
    html.fixed-aspect body:has(> #view-business:not([hidden])){
      display: flex; align-items: center; justify-content: center;
      padding: 10px;
    }
    html.fixed-aspect #view-home:not([hidden]),
    html.fixed-aspect #view-private:not([hidden]),
    html.fixed-aspect #view-business:not([hidden]){
      flex: none;
      max-width: none;
      width: min(1180px, 100%, calc((100dvh - 20px) * 4 / 3));
      aspect-ratio: 4 / 3;
      height: auto;
      gap: 12px;
      overflow: auto;
    }
  }
  /* 中央帯＝余った縦を食う担当。縮みはしない（下段カードにかぶせない）。
     下段グリッドの内ギャップも枠内だけ少し詰める。 */
  @media (pointer: fine) and (min-width: 1025px), (pointer: coarse) and (min-width: 768px) {
    html.fixed-aspect #view-home:not([hidden]) .hero{
      flex: 1 0 auto;
    }
    html.fixed-aspect #view-home:not([hidden]) .hero .scene{
      min-height: 0;
    }
    html.fixed-aspect #view-home:not([hidden]) .grid3{
      gap: 12px;
    }
    /* プライベート/ビジネスも HOME と同じく枠いっぱいに広げる。
       行1（左列 / ヒーロー / 右列）が余った縦を食い、行2（.pv-bottom）は自然高。 */
    html.fixed-aspect #view-private:not([hidden]) .pv-grid,
    html.fixed-aspect #view-business:not([hidden]) .pv-grid{
      flex: 1 0 auto;
      align-content: stretch;
      grid-template-rows: 1fr auto;
      gap: 12px;
    }
    html.fixed-aspect #view-private:not([hidden]) .pv-bottom,
    html.fixed-aspect #view-business:not([hidden]) .pv-bottom{
      gap: 12px;
    }
    /* 下段 QUICK ACCESS は枠内だけ 4 列＋タイルを低くして行数（3→2）を減らす。 */
    html.fixed-aspect #view-private:not([hidden]) .pv-bottom .quick-grid,
    html.fixed-aspect #view-business:not([hidden]) .pv-bottom .quick-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    /* プライベートは「事務ハック」を足して9枚（v2.33.51）。4列だと3行になり枠からはみ出すので5列で2行に保つ。 */
    html.fixed-aspect #view-private:not([hidden]) .pv-bottom .quick-grid{
      grid-template-columns: repeat(5, 1fr);
    }
    html.fixed-aspect #view-private:not([hidden]) .pv-bottom .quick-tile,
    html.fixed-aspect #view-business:not([hidden]) .pv-bottom .quick-tile{
      padding: 10px 6px;
      gap: 6px;
    }
    /* 枠内だけカード見出しの余白を詰める（プライベート・ビジネス共通）。 */
    html.fixed-aspect #view-private:not([hidden]) .card-head,
    html.fixed-aspect #view-business:not([hidden]) .card-head{
      padding: 11px 16px 8px;
    }
    /* ビジネスは内部スクロールの箱を枠内だけ低くして 16:9 に確実に収める。
       左列が3カード（TODAY/メモ/タスク）で縦に長いので、メモ・タスクを強めに詰める。 */
    /* 契約書リストは枠内では最大3件だけなので固定高スクロールをやめる。
       件数が3件未満でもカードが縮まないよう、app.business.js が不可視の
       プレースホルダ行で3件分を埋める（ピクセル指定の min-height は行の実寸とずれる）。 */
    html.fixed-aspect #view-business:not([hidden]) .pv-contracts-list{ height: auto; overflow: visible; }
    html.fixed-aspect #view-business:not([hidden]) .pv-slack-list{ max-height: 150px; }
    html.fixed-aspect #view-business:not([hidden]) .pv-events-list{ max-height: 168px; }
    html.fixed-aspect #view-business:not([hidden]) .biz-note-list,
    html.fixed-aspect #view-business:not([hidden]) .biz-task-list{ max-height: 88px; }
    html.fixed-aspect #view-business:not([hidden]) .pv-today-clock{ font-size: clamp(26px, 2.6vw, 32px); }
  }

  /* =====================================================================
     CALENDAR layout v2 — カレンダー画面のレイアウト整理（2026/09/10）
     ---------------------------------------------------------------------
     ・独立していたステータス行をツールバー内のチップへ畳む（1行ぶん縦を節約）
     ・グリッドをビューポート追従に（timeline の固定 max-height:560px を廃止）
     ・月グリッドの行を 1fr で伸ばし、入る件数は app.js の fitMonthChips が実測
     ・日次はカラム1本なので幅を絞って中央寄せ（全幅だと空白ばかりになる）
     ・土日は地の色を1段だけ変える（発光・色追加はしない）
     ・角丸/アクティブ表現を B/アンバーの規定（2〜3px・ベタ）へ揃える
     このブロックごと消せば従来のレイアウトに戻る（app.js 側の変更は無害に残る）。
     ===================================================================== */
  /* min-height ではなく height。min-height だと flex:1 の中身が実寸なりに伸びてしまい、
     timeline が内部スクロールせずページ側がスクロールする（＝下が見切れる）。 */
  #view-calendar{ height: calc(100vh - 2 * clamp(12px, 2.4vw, 28px)); }
  #view-calendar .cal-body-panel{
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
    padding: 12px 12px 14px;
  }
  #view-calendar .cal-grid{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

  /* ---- ツールバー ---- */
  #view-calendar .cal-toolbar{ padding: 10px 16px; gap: 10px 14px; }
  #view-calendar .cal-toolbar-left{ gap: 12px; }
  .cal-nav-group{ display: flex; align-items: center; gap: 4px; }
  #view-calendar .cal-range-label{
    font-size: 15px; margin-left: 2px;
    padding-left: 14px; border-left: 1px solid var(--hairline);
  }
  /* ステータス（●連携中 / エラー / 再連携の案内）。旧 .cal-status-bar の代替。 */
  .cal-status-chip{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
    color: var(--text-faint); white-space: nowrap;
  }
  .cal-status-chip.err{ color: var(--err); }
  .cal-status-chip .live{ color: var(--ok); }
  #view-calendar .cal-back-btn{ border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; }
  #view-calendar .cal-view-switch{ border-radius: 2px; }
  #view-calendar .cal-view-btn{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; padding: 7px 15px;
  }
  #view-calendar .cal-view-btn.active{ background: rgba(255,143,63,.15); color: var(--accent); }

  /* ---- 日次/週次 ---- */
  #view-calendar .cal-timeline-scroll{
    flex: 1 1 auto; max-height: none; min-height: 0; padding-top: 8px;
  }
  #view-calendar .cal-allday-row{ margin: 0 auto 8px; }
  #view-calendar .cal-allday-chip{ border-radius: 2px; }
  /* 日次はカラムが1本しかないので、幅いっぱいに引き伸ばさず中央に置く。 */
  #view-calendar .cal-grid.is-day .cal-allday-row,
  #view-calendar .cal-grid.is-day .cal-timeline-scroll{ width: 100%; max-width: 880px; margin-inline: auto; }
  #view-calendar .cal-col-header{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .5px; }
  #view-calendar .cal-col-header.today{ color: var(--accent); }
  #view-calendar .cal-col-header.sun{ color: #c98b7a; }
  #view-calendar .cal-col-header.sat{ color: #8fa0b0; }
  #view-calendar .cal-day-col.sat, #view-calendar .cal-day-col.sun{ background: rgba(255,255,255,.014); }

  /* ---- 月次 ---- */
  #view-calendar .cal-month-grid{
    flex: 1 1 auto; min-height: 0;
    grid-template-rows: auto; grid-auto-rows: minmax(72px, 1fr);
  }
  #view-calendar .cal-month-cell{ min-height: 0; }
  #view-calendar .cal-month-dow.sun{ color: #c98b7a; }
  #view-calendar .cal-month-dow.sat{ color: #8fa0b0; }
  #view-calendar .cal-month-cell.sat:not(.today),
  #view-calendar .cal-month-cell.sun:not(.today){ background: rgba(255,255,255,.014); }
  #view-calendar .cal-month-cell.sun .cal-month-date{ color: #c98b7a; }
  #view-calendar .cal-month-cell.sat .cal-month-date{ color: #8fa0b0; }
  /* flex:none ＝ 実測前にチップが潰れないこと（fitMonthChips が実寸で件数を決めるため）。 */
  #view-calendar .cal-month-date,
  #view-calendar .cal-month-chip,
  #view-calendar .cal-month-more{ flex: none; }
  #view-calendar .cal-month-chip{ border-radius: 2px; padding: 1px 5px; }
  #view-calendar .cal-month-more{ font-family: var(--font-mono); letter-spacing: .3px; }

  /* スマホは縦積み前提なので画面いっぱいの拘束を外す。 */
  @media (max-width: 720px){
    #view-calendar{ height: auto; }
    #view-calendar .cal-timeline-scroll{ max-height: 60vh; }
    #view-calendar .cal-month-grid{ grid-auto-rows: minmax(64px, auto); }
    #view-calendar .cal-range-label{ padding-left: 0; border-left: none; }
  }

  /* =====================================================================
     収支 / サブスク ページ（v2.33.38）
     どちらも v2.33.14 でカードから独立ページへ出したまま、中身はカード時代の
     組みが残っていた（520/680px 幅・一覧に max-height）。ページとして組み直す:
     上に KPIバンド → 2カラム → 下に一覧、という並びで両ページを揃える。
     数値は全部 --font-mono + tabular-nums、色は意味があるところだけ。
     このブロックを消せばこの段階の見た目変更はほぼ戻せる。
     ===================================================================== */
  .subpage-wrap.is-xwide{ max-width:1100px; }

  /* 月ナビ（TODAY'S PLAN の日付ナビと同じ考え方。未来へは進めない） */
  .month-nav{ display:flex; align-items:center; gap:2px; }
  .month-nav-btn{
    font-family: var(--font-mono); font-size:14px; line-height:1; color: var(--text-dim);
    background:transparent; border:1px solid var(--panel-border); border-radius:2px;
    padding:4px 9px; cursor:pointer;
  }
  .month-nav-btn:hover:not(:disabled){ border-color: var(--accent); color: var(--text); }
  .month-nav-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .month-nav-label{
    font-family: var(--font-mono); font-size:12.5px; letter-spacing:.5px; color: var(--text);
    min-width:96px; text-align:center; font-variant-numeric: tabular-nums;
  }
  .month-nav-label.is-past{ color: var(--accent); }

  /* KPIバンド（契約書トラッカーの KPI と同じ役回りの、ページ用の大きい版） */
  .kpi-band{ display:grid; grid-template-columns: repeat(4, 1fr); padding:14px 4px; margin-bottom:12px; }
  .kpi-band[hidden]{ display:none; }
  .kpi{
    display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
    padding:2px 12px; border-left:1px solid var(--hairline); min-width:0;
  }
  .kpi:first-child{ border-left:none; }
  .kpi-label{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); }
  .kpi-value{
    font-family: var(--font-mono); font-size:20px; font-weight:600; letter-spacing:.2px; line-height:1.2;
    color: var(--text); font-variant-numeric: tabular-nums;
  }
  .kpi.is-lead .kpi-value{ font-size:24px; }
  .kpi-value.is-income{ color: var(--accent); }
  .kpi-value.is-expense{ color:#a8836a; }
  .kpi-value.is-neg{ color: var(--err); }
  .kpi-value.is-pos{ color: var(--ok); }
  .kpi-sub{
    font-family: var(--font-mono); font-size:10px; letter-spacing:.3px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
  }
  .kpi-sub.is-good{ color: var(--ok); }
  .kpi-sub.is-bad{ color: var(--warn); }

  .card-head-note{ font-family: var(--font-mono); font-size:10px; letter-spacing:1px; color: var(--text-faint); }
  .fin-note{ margin:10px 0 0; font-size:10.5px; color: var(--text-faint); line-height:1.6; }

  /* ---- 今月の収支 ---- */
  .fin-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; align-items:start; }
  .fin-cols[hidden]{ display:none; }
  .fin-cols > .pv-card{ display:flex; flex-direction:column; }

  /* 4種別。貯蓄・投資も出す（入力できるのに見えない状態だった） */
  .fin-types{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px; }
  .fin-type-row{ display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:9px; }
  .fin-type-row.is-zero{ opacity:.4; }
  .fin-type-name{ font-size:11.5px; color: var(--text-dim); }
  .fin-type-bar{ height:6px; background: rgba(255,255,255,0.05); border-radius:1px; overflow:hidden; }
  .fin-type-fill{ display:block; height:100%; border-radius:1px; transition: width .35s ease; }
  .fin-type-amount{
    font-family: var(--font-mono); font-size:12px; color: var(--text); font-variant-numeric: tabular-nums;
  }

  /* カテゴリー別（色は種別色の濃淡だけ。虹色にしない） */
  .fin-cat-card .card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .fin-cat-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
  .fin-cat-tab{
    font-family: var(--font-mono); font-size:10px; letter-spacing:.5px; padding:3px 8px;
    color: var(--text-faint); background:transparent; border:1px solid var(--panel-border);
    border-radius:2px; cursor:pointer;
  }
  .fin-cat-tab:hover{ color: var(--text-dim); border-color: var(--accent-dim); }
  .fin-cat-tab.is-active{ color: var(--accent); background: rgba(255,143,63,0.08); border-color: var(--accent-dim); }
  .fin-catbar{
    display:flex; gap:1px; height:10px; margin-bottom:12px; border-radius:1px; overflow:hidden;
    background: rgba(255,255,255,0.05);
  }
  .fin-catbar-seg{ display:block; height:100%; }
  .fin-catlist{ display:flex; flex-direction:column; gap:7px; max-height:214px; overflow-y:auto; }
  .fin-cat-row{ display:grid; grid-template-columns: 8px 1fr 42px auto; align-items:center; gap:9px; }
  .fin-cat-dot{ width:8px; height:8px; border-radius:1px; }
  .fin-cat-name{ font-size:12px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fin-cat-pct{
    font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); text-align:right;
    font-variant-numeric: tabular-nums;
  }
  .fin-cat-amount{
    font-family: var(--font-mono); font-size:12px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  }

  /* 明細（これが無いと追加した取引を画面で確認できなかった） */
  .fin-tx-card[hidden]{ display:none; }
  .fin-tx-list{ display:flex; flex-direction:column; max-height:420px; overflow-y:auto; }
  .fin-tx-row{
    display:grid; grid-template-columns: 80px 54px 110px 1fr auto; align-items:center; gap:10px;
    padding:7px 4px; border-bottom:1px solid var(--hairline);
  }
  .fin-tx-row:last-child{ border-bottom:none; }
  .fin-tx-date{
    font-family: var(--font-mono); font-size:11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  }
  .fin-tx-type{
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:.5px; text-align:center; padding:2px 0;
    border:1px solid var(--hairline); border-radius:2px; color: var(--text-dim);
  }
  .fin-tx-type.is-income{ color: var(--accent); border-color: var(--accent-dim); }
  .fin-tx-type.is-expense{ color:#a8836a; border-color: rgba(168,131,106,0.45); }
  .fin-tx-cat{ font-size:11.5px; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fin-tx-note{
    font-size:11.5px; color: var(--text-faint); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .fin-tx-amount{
    font-family: var(--font-mono); font-size:12.5px; color: var(--text); text-align:right;
    font-variant-numeric: tabular-nums;
  }
  .fin-tx-amount.is-income{ color: var(--accent); }
  .fin-tx-amount.is-expense{ color:#a8836a; }
  /* 行クリックで編集（サブスクの行と同じ当たり方にする） */
  .fin-tx-row.is-editable{ cursor:pointer; }
  .fin-tx-row.is-editable:hover{ background: rgba(255,255,255,0.03); }
  .fin-tx-row.is-editable:focus-visible{ outline:1px solid var(--accent); outline-offset:-1px; }

  /* ---- サブスク ---- */
  .subs-cols{ display:grid; grid-template-columns: 1.5fr 1fr; gap:12px; margin-bottom:12px; align-items:start; }
  .subs-cols[hidden]{ display:none; }
  .subs-side{ display:flex; flex-direction:column; gap:12px; }

  /* 行を「次回課金日ガター / 名前・備考 / 金額」の3カラムに組み直す。
     ソートに使うだけで捨てていた次回課金日を、実日付と「あとN日」で出す。 */
  #view-subs .pv-subs-list{ gap:0; }
  #view-subs .pv-sub-row{
    display:grid; grid-template-columns: 68px 1fr auto; align-items:center; gap:12px;
    padding:9px 8px; border:none; border-left:2px solid transparent;
    border-bottom:1px solid var(--hairline); border-radius:0;
  }
  #view-subs .pv-sub-row:last-child{ border-bottom:none; }
  #view-subs .pv-sub-row.is-thismonth{ border-left-color: var(--accent); }
  .pv-sub-gutter{ display:flex; flex-direction:column; gap:1px; }
  .pv-sub-date{
    font-family: var(--font-mono); font-size:12.5px; color: var(--text); font-variant-numeric: tabular-nums;
  }
  .pv-sub-until{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px; color: var(--text-faint); }
  .pv-sub-until.is-soon{ color: var(--warn); }
  .pv-sub-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .pv-sub-line1{ display:flex; align-items:center; gap:7px; min-width:0; }
  #view-subs .pv-sub-name{ flex:0 1 auto; font-size:13px; }
  .pv-sub-cat{
    font-family: var(--font-mono); font-size:9px; letter-spacing:.5px; padding:1px 6px; flex:none;
    border:1px solid var(--hairline); border-radius:2px; color: var(--text-faint);
  }
  .pv-sub-meta{
    font-size:10.5px; color: var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pv-sub-amtwrap{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  #view-subs .pv-sub-amount{ font-size:13px; }
  .pv-sub-permonth{
    font-family: var(--font-mono); font-size:9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  }

  .subs-month-list{ display:flex; flex-direction:column; }
  .subs-month-row{
    display:grid; grid-template-columns: 42px 1fr auto; align-items:center; gap:9px;
    padding:6px 2px; border-bottom:1px solid var(--hairline);
  }
  .subs-month-row.is-done{ opacity:.45; }
  .subs-month-day{
    font-family: var(--font-mono); font-size:11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  }
  .subs-month-name{ font-size:12px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .subs-month-amount{
    font-family: var(--font-mono); font-size:12px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  }
  .subs-month-foot{
    margin-top:9px; font-family: var(--font-mono); font-size:11px; letter-spacing:.3px;
    color: var(--text-dim); font-variant-numeric: tabular-nums;
  }

  /* 年間の課金分布（年払いが重なる月を見つける用） */
  .subs-year-chart{ display:grid; grid-template-columns: repeat(12, 1fr); gap:4px; align-items:end; }
  .subs-year-col{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:96px;
  }
  .subs-year-bar{
    width:100%; flex:1 1 auto; display:flex; align-items:flex-end;
    background: rgba(255,255,255,0.04); border-radius:1px;
  }
  .subs-year-fill{ display:block; width:100%; background: var(--accent); opacity:.5; border-radius:1px; }
  .subs-year-col.is-current .subs-year-fill{ opacity:1; }
  .subs-year-label{ font-family: var(--font-mono); font-size:9px; color: var(--text-faint); }
  .subs-year-col.is-current .subs-year-label{ color: var(--accent); }
  .subs-year-note{
    grid-column: 1 / -1; margin-top:10px; font-family: var(--font-mono); font-size:10px; color: var(--text-faint);
  }

  /* 家計簿との突合（登録漏れ・記帳漏れの気づき用。補助情報なので静かに） */
  .subs-recon-card[hidden]{ display:none; }
  .subs-recon{ display:flex; flex-direction:column; gap:14px; }
  .subs-recon-sum{
    font-family: var(--font-mono); font-size:11.5px; letter-spacing:.3px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .subs-recon-block{ display:flex; flex-direction:column; gap:5px; }
  .subs-recon-title{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); }
  .subs-recon-row{
    font-size:12px; color: var(--text); padding:5px 8px;
    border-left:2px solid var(--warn); background: rgba(216,194,74,0.05);
  }
  .subs-recon-ok{ font-size:11.5px; color: var(--text-faint); }

  /* 1件編集モーダル */
  .sub-row-cycle{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:10px; align-items:start; }
  .sub-row-cycle > label{ min-width:0; }
  .event-form .sub-row-cycle > label[hidden]{ display:none; }
  .sub-row-cycle-inputs{ display:flex; gap:6px; }
  .sub-row-cycle-inputs input{ flex:none; width:60px; text-align:center; }
  .sub-row-cycle-inputs select{ flex:1 1 auto; min-width:0; }
  #sub-row-preview{ margin:0; }
  /* まとめて編集の3行目: カテゴリ + 備考 */
  .subs-row .subs-in-cat{ flex:0 0 132px !important; width:auto !important; }
  .subs-row .subs-in-note{ flex:1 1 140px !important; }

  @media (max-width: 1000px){
    .fin-cols, .subs-cols{ grid-template-columns: 1fr; }
    .kpi-band{ grid-template-columns: repeat(2, 1fr); row-gap:16px; }
    .kpi:nth-child(3){ border-left:none; }
  }
  @media (max-width: 640px){
    .fin-tx-row{ grid-template-columns: 70px 48px 1fr auto; }
    .fin-tx-note{ display:none; }
    .sub-row-cycle{ grid-template-columns: 1fr 1fr; }
    .subs-year-chart{ gap:3px; }
    .subs-year-col{ height:78px; }
  }

  /* =====================================================================
     CALENDAR v3 — 予定の色帯化 ／ 2アカウント重ね表示 ／ レイヤー（2026/09/10）
     ---------------------------------------------------------------------
     ・予定チップは「地を暗く＋左3pxの色帯」。色帯の色＝どのアカウントの予定か
       （はるか=アクセント / SYSLEA=寒色ニュートラル）。--ev-color を app.js が入れる
     ・レイヤー（タスク/契約/支払/TR/サブスク）は色を増やさず、
       金(--warn)＝期限もの／赤(--err)＝期限超過 の2値＋先頭の小さいバッジで見分ける
     ・ツールバー下段にレイヤーのトグル列
     このブロックごと消せば v2 のレイアウトのまま色だけ元に戻る。
     ===================================================================== */

  /* ---- 予定（Google Calendar）：地は暗く、左に色帯 ---- */
  #view-calendar .cal-event-block,
  #view-calendar .cal-allday-chip,
  #view-calendar .cal-month-chip{
    background: rgba(255,255,255,.045);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--ev-color, var(--accent));
    color: var(--text);
  }
  #view-calendar .cal-event-block:hover,
  #view-calendar .cal-allday-chip:hover,
  #view-calendar .cal-month-chip:hover{
    background: rgba(255,255,255,.085);
    filter: none;
  }
  #view-calendar .cal-event-block .t{ color: var(--text-faint); opacity: 1; }

  /* ---- レイヤー（ポータル内の期限もの） ---- */
  #view-calendar .cal-ov-chip{
    display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
    box-sizing: border-box; padding: 2px 6px; border-radius: 2px;
    background: rgba(216,194,74,.06);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--warn);
    color: var(--text-dim); font-size: 11px; line-height: 1.35;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
  }
  #view-calendar .cal-ov-chip:hover{ background: rgba(216,194,74,.12); color: var(--text); }
  #view-calendar .cal-ov-chip.is-overdue{
    border-left-color: var(--err); background: rgba(255,92,92,.07); color: var(--text);
  }
  #view-calendar .cal-ov-chip.is-overdue:hover{ background: rgba(255,92,92,.13); }
  .cal-ov-badge{
    flex: none; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .5px;
    color: var(--warn); border: 1px solid rgba(216,194,74,.35); border-radius: 2px; padding: 0 3px;
  }
  #view-calendar .cal-ov-chip.is-overdue .cal-ov-badge{ color: var(--err); border-color: rgba(255,92,92,.4); }
  .cal-ov-text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #view-calendar .cal-ov-chip .t{ font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }
  /* 月セルの中では他のチップと同じ字送りに寄せる */
  #view-calendar .cal-ov-chip.cal-month-chip{ font-size: 10.5px; padding: 1px 5px; }
  /* 時刻つき（＝期限時刻を入れたタスク）は時間軸の右端に細く重ねる */
  #view-calendar .cal-day-col .cal-ov-chip.is-timed{
    position: absolute; right: 2px; left: auto; max-width: 76%;
    transform: translateY(-50%); z-index: 4;
  }

  /* ---- レイヤーのトグル列（ツールバー下段） ---- */
  .cal-layers{
    flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--hairline);
  }
  .cal-layers-label{
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
    color: var(--text-faint); margin-right: 4px;
  }
  .cal-layer-chip{
    padding: 3px 10px; border-radius: 2px; border: 1px solid var(--panel-border);
    background: transparent; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
    color: var(--text-faint); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .cal-layer-chip:hover{ color: var(--text); }
  .cal-layer-chip.is-on{
    background: rgba(216,194,74,.12); border-color: rgba(216,194,74,.35); color: var(--warn);
  }
  /* 「両方」のときだけ出すアカウント色の凡例 */
  .cal-acct-legend{
    display: flex; align-items: center; gap: 5px; margin-left: 6px;
    font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint);
  }
  .cal-acct-legend i{ width: 8px; height: 8px; border-radius: 2px; background: var(--lg-color); }
  .cal-status-chip .warn{ color: var(--warn); }

  /* 予定モーダルの「カレンダー」行。.event-form label が display:flex なので
     [hidden] を明示的に打ち消す必要がある。 */
  #ev-acct-row[hidden]{ display: none; }

  @media (max-width: 720px){
    .cal-layers{ padding-top: 7px; }
    .cal-layers-label{ display: none; }
  }

  /* ========================================================================
     メモ / タスク 整理 v1 (v2.33.44)
     ・ダッシュボードのカード見出しボタン .pv-card-head-add（旧 .pv-fin-add は
       CSS 側に該当規則が無く、素の button＝白いボタンのまま出ていた）
     ・タスク管理 / メモ ページのレイアウトを B/アンバー方針に合わせて整える
       （角丸 2〜3px・hover の浮き廃止・列の中央寄せ・保存状態はツールバーへ）
     このブロックごと消せば従来の見た目に戻る。
     ======================================================================== */

  /* ---- カード見出しの「＋ 新規◯◯」ボタン（.pv-habit-manage と同じ語彙） ---- */
  .pv-card-head-add{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
    color: var(--accent); background: rgba(255,143,63,0.08);
    border: 1px solid var(--panel-border); border-radius: 2px;
    padding: 3px 10px; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
  }
  .pv-card-head-add:hover{ background: rgba(255,143,63,0.16); border-color: var(--accent); }

  /* ---- タスク管理 / メモ ページ共通のツールバー ---- */
  #view-tasks .cal-back-btn, #view-notes .cal-back-btn{
    border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
  }
  .task-input{
    border-radius: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3px;
    padding: 7px 10px; width: 200px;
  }
  .task-input:focus{ border-color: var(--accent); }
  .task-add-btn, .note-add-btn{
    border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
    border-color: var(--panel-border); color: var(--accent); padding: 7px 14px;
  }
  .task-add-btn:hover, .note-add-btn:hover{ border-color: var(--accent); }

  /* ---- タスク管理: サイドバーと本文の高さを揃え、リストを見出しと同じ幅に ----
     旧: .task-status-tabs は task-main いっぱい・.task-list-wrap だけ 640px 中央寄せ
     だったので、タブ行とリストの左端が揃わず宙に浮いて見えていた。
     両方を同じ 760px のラッパー幅に載せて左端を揃える。 */
  .task-layout{ min-height: 440px; align-items: stretch; }
  .task-sidebar{ max-height: none; }
  .task-main{ display: flex; flex-direction: column; }
  .task-status-tabs{ width: 100%; max-width: 760px; margin: 0 auto 10px; }
  .task-list-wrap{ max-width: 760px; }
  .task-tree{ max-width: none; }
  .task-check{ border-radius: 2px; }
  .task-item.done .task-check{ background: rgba(94,201,138,0.15); }
  .task-edit-btn, .task-subtask-btn{ border-radius: 2px; }
  .task-repeat-badge{ border-radius: 2px; }

  /* ---- メモ: カードを盤面の中央に寄せ、タイル自体も硬派側へ ----
     旧: 幅いっぱいのパネルに 220px のカードが左上へ寄って浮いていた。
     角丸 10px・hover の translateY・紫の枠は B/アンバーの「やらないこと」。 */
  .notes-grid{
    max-width: 940px; margin: 0 auto; padding: 4px 0 8px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
  }
  .note-card{
    border-radius: 3px; background: rgba(255,255,255,0.015);
    min-height: 118px; padding: 13px 14px; gap: 7px;
    transition: border-color .15s ease, background .15s ease;
  }
  .note-card:hover{ border-color: var(--accent); background: rgba(255,143,63,0.04); transform: none; }
  .note-card .note-title{ font-size: 13px; letter-spacing: .3px; }
  .note-card .note-meta{ font-size: 9px; letter-spacing: .5px; }
  .note-format-btn{ border-radius: 2px; }
  .note-body-editable{ border-radius: 2px; }
  .note-body-editable:focus{ border-color: var(--accent); box-shadow: none; }

  @media (max-width: 720px){
    .task-input{ width: 100%; }
    .notes-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  }

  /* ========================================================================
     メモ / タスク 強化 v2 (v2.33.46) — タスク側
     優先度 / 期限グループ / 相対期限 / KPIバンド / 並べ替え / 空状態
     ======================================================================== */

  /* ---- 並べ替えセレクト ---- */
  .task-sort-select{
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:2px;
    color: var(--text-dim); font-family: var(--font-mono); font-size:10px; letter-spacing:.5px;
    padding:7px 8px; cursor:pointer; color-scheme: dark;
  }
  .task-sort-select:focus{ outline:none; border-color: var(--accent); }

  /* ---- KPIバンド（.kpi-band を流用。タスク用に少し詰める） ---- */
  .task-kpis{ padding:12px 4px; margin-bottom:0; }
  .task-kpis .kpi-value{ font-size:20px; }
  .task-kpis .kpi.is-lead .kpi-value{ font-size:20px; }

  /* ---- 優先度 ---- */
  /* 行の左帯。契約書トラッカーの status 左帯と同じ語彙（3px のベタ帯）。 */
  .task-item.prio-high > .task-row{ box-shadow: inset 3px 0 0 var(--err); }
  .task-item.prio-mid  > .task-row{ box-shadow: inset 3px 0 0 var(--warn); }
  .task-item.prio-low  > .task-row{ box-shadow: inset 3px 0 0 var(--panel-border); }
  .task-item.prio-high > .task-row,
  .task-item.prio-mid  > .task-row,
  .task-item.prio-low  > .task-row{ padding-left:14px; }
  .task-item.done > .task-row{ box-shadow:none; }

  .task-prio-badge{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:18px; height:18px; border-radius:2px; border:1px solid;
    font-family: var(--font-mono); font-size:9.5px; line-height:1;
  }
  .task-prio-badge.is-high{ color: var(--err); border-color: rgba(255,92,92,.45); background: rgba(255,92,92,.10); }
  .task-prio-badge.is-mid { color: var(--warn); border-color: rgba(216,194,74,.45); background: rgba(216,194,74,.10); }
  .task-prio-badge.is-low { color: var(--text-faint); border-color: var(--panel-border); background: rgba(255,255,255,0.03); }

  /* モーダルの優先度ピッカー（.acct-tabs と同じ質感） */
  .task-prio-picker{ display:flex; gap:2px; border:1px solid var(--panel-border); border-radius:2px; width:fit-content; }
  .task-prio-btn{
    background:transparent; border:none; cursor:pointer; padding:5px 12px;
    font-family: var(--font-mono); font-size:10px; letter-spacing:.5px; color: var(--text-faint);
    border-right:1px solid var(--hairline);
  }
  .task-prio-btn:last-child{ border-right:none; }
  .task-prio-btn.is-active{ background: rgba(255,143,63,0.10); color: var(--accent); }
  .task-prio-btn.is-high.is-active{ background: rgba(255,92,92,.12); color: var(--err); }
  .task-prio-btn.is-mid.is-active{ background: rgba(216,194,74,.12); color: var(--warn); }

  /* ---- 期限の相対表示 ---- */
  .task-due-rel{
    font-family: var(--font-mono); font-size:10px; letter-spacing:.3px; color: var(--text-faint);
    white-space:nowrap; flex:none;
  }
  .task-due-rel.is-soon{ color: var(--warn); }
  .task-due-rel.is-over{ color: var(--err); }

  /* ---- 期限グループ ---- */
  .task-section{ display:flex; flex-direction:column; }
  .task-section-head{
    display:flex; align-items:center; gap:8px; padding:10px 8px 7px; cursor:pointer; user-select:none; width:100%;
    background:transparent; border:none; text-align:left;
    font-family: var(--font-mono); font-size:10px; font-weight:400; letter-spacing:1.5px; color: var(--text-dim);
    border-bottom:1px solid var(--hairline);
  }
  .task-section-head:hover{ color: var(--text); }
  .task-section-head.is-over{ color: var(--err); }
  .task-section-head.is-soon{ color: var(--warn); }
  .task-section-head .chevron{ width:11px; height:11px; stroke: currentColor; transition: transform .2s ease; flex:none; }
  .task-section.collapsed .task-section-head .chevron{ transform: rotate(-90deg); }
  .task-section-count{
    margin-left:auto; font-family: var(--font-mono); font-size:10px; letter-spacing:0; color: var(--text-faint);
    border:1px solid var(--panel-border); border-radius:2px; padding:1px 6px;
  }
  .task-section.collapsed .task-tree{ display:none; }

  /* ---- 空状態のスポット絵（ink + accent の2色・線幅1.5px・発光なし） ---- */
  .empty-state{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 20px; }
  .empty-art{ width:96px; height:72px; opacity:.9; }
  .empty-art .ink{ stroke: var(--text-faint); }
  .empty-art .accent{ stroke: var(--accent); }
  .empty-title{ font-family: var(--font-display); font-size:13px; letter-spacing:.5px; color: var(--text-dim); }
  .empty-sub{ font-size:11.5px; color: var(--text-faint); text-align:center; line-height:1.6; }

  /* ---- 完了の整理バー ---- */
  .task-oldbar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 10px; margin-bottom:10px;
    border:1px solid var(--panel-border); border-radius:2px; background: rgba(255,255,255,0.02);
  }
  .task-oldbar-msg{ font-size:11.5px; color: var(--text-dim); flex:1 1 200px; }
  .task-oldbar-btn{
    font-family: var(--font-mono); font-size:10px; letter-spacing:.5px; padding:4px 10px;
    border:1px solid var(--panel-border); border-radius:2px; background:transparent;
    color: var(--text-dim); cursor:pointer; flex:none;
  }
  .task-oldbar-btn:hover{ border-color: var(--accent); color: var(--accent); }
  .task-oldbar-btn.is-danger:hover{ border-color: var(--err); color: var(--err); }

  /* ---- キーボード操作のカーソル ---- */
  .task-item.is-cursor > .task-row{ background: rgba(255,143,63,0.06); }
  .task-item.is-cursor > .task-row::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--accent);
  }
  .task-row{ position:relative; }
  .task-keyhint{
    margin-top:auto; padding-top:14px; font-family: var(--font-mono); font-size:9px;
    letter-spacing:.5px; color: var(--text-faint); line-height:1.9;
  }
  .task-keyhint b{ color: var(--text-dim); font-weight:400; }
  @media (max-width: 860px){ .task-keyhint{ display:none; } }

  /* ========================================================================
     メモ / タスク 強化 v2 (v2.33.47) — メモ側
     ピン留め / 自由タグ / 並べ替え・表示密度 / 検索ハイライト / Markdown プレビュー
     ======================================================================== */

  /* ---- 検索ハイライト ---- */
  mark{ background: rgba(255,143,63,0.22); color: var(--text); border-radius:1px; padding:0 1px; }

  /* ---- 表示密度スイッチ ---- */
  .note-density-switch{ display:flex; border:1px solid var(--panel-border); border-radius:2px; }
  .note-density-btn{
    background:transparent; border:none; cursor:pointer; padding:6px 9px; color: var(--text-faint);
    display:flex; align-items:center; border-right:1px solid var(--hairline);
  }
  .note-density-btn:last-child{ border-right:none; }
  .note-density-btn svg{ width:13px; height:13px; stroke: currentColor; }
  .note-density-btn.is-active{ background: rgba(255,143,63,0.12); color: var(--accent); }

  /* ---- 自由タグのチップ列（ツールバー下段） ---- */
  .note-tagbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex-basis:100%; padding-top:9px; border-top:1px solid var(--hairline); }
  .note-tagbar[hidden]{ display:none; }
  .note-tagbar-label{ font-family: var(--font-mono); font-size:9px; letter-spacing:1.5px; color: var(--text-faint); margin-right:2px; }
  .note-tagchip{
    font-family: var(--font-mono); font-size:10px; letter-spacing:.3px; padding:3px 9px;
    border:1px solid var(--panel-border); border-radius:2px; background: rgba(255,255,255,0.02);
    color: var(--text-dim); cursor:pointer;
  }
  .note-tagchip:hover{ border-color: var(--accent); color: var(--text); }
  .note-tagchip.is-on{ background: rgba(255,143,63,0.12); color: var(--accent); border-color: rgba(255,143,63,0.4); }

  /* ---- カード: ピン / タグ色の左帯 / 進捗 ---- */
  .note-card{ position:relative; border-left:2px solid transparent; }
  .note-card.tagcol-haruka{ border-left-color: rgba(255,143,63,0.45); }
  .note-card.tagcol-syslea{ border-left-color: rgba(235,170,120,0.16); }
  .note-card.is-pinned{ background: rgba(255,143,63,0.045); }
  .note-pin-btn{
    background:transparent; border:none; cursor:pointer; padding:2px; flex:none;
    color: var(--text-faint); display:flex; align-items:center; opacity:0; transition: opacity .12s ease;
  }
  .note-pin-btn svg{ width:13px; height:13px; }
  .note-card:hover .note-pin-btn, .note-pin-btn.is-on{ opacity:1; }
  .note-pin-btn.is-on{ color: var(--accent); }
  .note-pin-btn:hover{ color: var(--accent); }
  .note-card .note-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .note-progress{ font-family: var(--font-mono); font-size:9.5px; color: var(--warn); flex:none; }
  .note-progress.is-done{ color: var(--ok); }
  .note-card-tags{ display:flex; flex-wrap:wrap; gap:4px; }

  /* ---- リスト表示 ---- */
  .notes-grid.is-list{ display:flex; flex-direction:column; gap:0; max-width:940px; }
  .notes-grid.is-list .note-card{
    flex-direction:row; align-items:center; gap:12px; min-height:0; padding:9px 12px;
    border:none; border-bottom:1px solid var(--hairline); border-left:2px solid transparent; border-radius:0;
  }
  .notes-grid.is-list .note-card:last-child{ border-bottom:none; }
  .notes-grid.is-list .note-card-head{ flex:0 0 240px; min-width:0; }
  .notes-grid.is-list .note-snippet{ -webkit-line-clamp:1; flex:1 1 auto; min-width:0; }
  .notes-grid.is-list .note-card-tags{ flex:none; }
  .notes-grid.is-list .note-meta{ flex:0 0 auto; margin-top:0; gap:10px; }

  /* ---- モーダル: ピントグル / モード切替 / 記法ヘルプ ---- */
  .note-pin-toggle{
    display:inline-flex; align-items:center; gap:6px; width:fit-content;
    background: rgba(255,255,255,0.03); border:1px solid var(--panel-border); border-radius:2px;
    color: var(--text-faint); cursor:pointer; padding:5px 11px;
    font-family: var(--font-mono); font-size:10px; letter-spacing:.5px;
  }
  .note-pin-toggle svg{ width:12px; height:12px; stroke: currentColor; }
  .note-pin-toggle.is-on{ background: rgba(255,143,63,0.12); color: var(--accent); border-color: rgba(255,143,63,0.4); }

  .note-body-toolbar{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
  .note-mode-switch{ display:flex; border:1px solid var(--panel-border); border-radius:2px; }
  .note-mode-btn{
    background:transparent; border:none; cursor:pointer; padding:4px 11px;
    font-family: var(--font-mono); font-size:10px; letter-spacing:.5px; color: var(--text-faint);
    border-right:1px solid var(--hairline);
  }
  .note-mode-btn:last-child{ border-right:none; }
  .note-mode-btn.is-active{ background: rgba(255,143,63,0.12); color: var(--accent); }
  .note-md-help{
    margin-top:6px; padding:8px 10px; border:1px solid var(--panel-border); border-radius:2px;
    background: rgba(255,255,255,0.02); font-size:11px; color: var(--text-faint); line-height:1.9;
  }
  .note-md-help[hidden]{ display:none; }
  .note-md-help b{ color: var(--text-dim); font-weight:400; font-family: var(--font-mono); font-size:10.5px; }

  /* ---- Markdown プレビュー ---- */
  .note-md{
    background: rgba(255,255,255,0.02); border:1px solid var(--panel-border); border-radius:2px;
    padding:12px 14px; color: var(--text); font-size:13.5px; line-height:1.7;
    min-height:180px; max-height:360px; overflow-y:auto; word-break:break-word;
  }
  .note-md[hidden]{ display:none; }
  .note-md h3, .note-md h4, .note-md h5, .note-md h6{
    font-family: var(--font-display); color: var(--text); margin:14px 0 6px; letter-spacing:.3px;
  }
  .note-md h3{ font-size:15px; } .note-md h4{ font-size:13.5px; }
  .note-md h5, .note-md h6{ font-size:12.5px; color: var(--text-dim); }
  .note-md > *:first-child{ margin-top:0; }
  .note-md p{ margin:0 0 8px; }
  .note-md ul, .note-md ol{ margin:0 0 8px; padding-left:20px; }
  .note-md li{ margin:2px 0; }
  .note-md li.md-task{ list-style:none; display:flex; align-items:flex-start; gap:8px; margin-left:-20px; }
  .note-md li.md-task.is-done > span{ color: var(--text-faint); text-decoration:line-through; }
  .note-md .md-check{
    width:16px; height:16px; flex:none; margin-top:2px; cursor:pointer; padding:0;
    border:1px solid var(--panel-border); border-radius:2px; background:transparent;
    color: var(--ok); font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .note-md .md-check[aria-pressed="true"]{ background: rgba(94,201,138,0.15); border-color: var(--ok); }
  .note-md blockquote{
    margin:0 0 8px; padding:2px 0 2px 10px; border-left:2px solid var(--panel-border); color: var(--text-dim);
  }
  .note-md code{
    font-family: var(--font-mono); font-size:11.5px; background: rgba(255,255,255,0.05);
    border-radius:2px; padding:1px 5px; color: var(--accent);
  }
  .note-md hr{ border:none; border-top:1px solid var(--hairline); margin:12px 0; }
  .note-md a{ color: var(--accent); }
  .note-md strong{ color: var(--text); font-weight:700; }

  @media (max-width: 720px){
    .notes-grid.is-list .note-card{ flex-wrap:wrap; }
    .notes-grid.is-list .note-card-head{ flex:1 1 100%; }
  }
  /* 見出し行は タイトル(伸びる) → ピン → タグバッジ の順。タイトルだけが縮む。 */
  .note-card .note-title{ flex:1 1 auto; }
  /* タスク行のプロジェクトチップ（自由タグより一段落ち着いた見た目） */
  .task-project-chip{
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:.3px; color: var(--text-faint);
    border:1px solid var(--hairline); border-radius:2px; padding:1px 6px; flex:none;
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* 優先度の帯（inset 3px）とキーボードカーソルの帯（2px）が重ならないよう、
     優先度付きの行ではカーソル帯を 3px ぶん右へずらす。 */
  .task-item.prio-high.is-cursor > .task-row::before,
  .task-item.prio-mid.is-cursor > .task-row::before,
  .task-item.prio-low.is-cursor > .task-row::before{ left:3px; }

  /* ================= 事務ハック（#view-jimuhack・app.jimuhack.js） =================
     旧ローカル HTML の紙色・8色チャートは持ち込まず、B/アンバー（アクセント1色＋意味色）で組み直した。
     KPI は既存の .kpi-band、タブは .pv-contracts-tab、カードは .panel＋.card-head を流用。
     このブロックを消すと見た目は素の部品に戻る（機能は動く）。 */
  #view-jimuhack .cal-toolbar{ row-gap:8px; }
  .jh-wrap{ width:100%; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding-bottom:24px; }
  .jh-wrap .kpi-band{ margin-bottom:0; }
  .jh-grid2{ display:grid; grid-template-columns: 1.5fr 1fr; gap:12px; align-items:start; }
  .jh-grid2 > *{ min-width:0; }
  .jh-card .card-head h2{ font-size:12px; letter-spacing:1.5px; }
  .jh-card .card-head{ gap:10px; flex-wrap:wrap; }
  .jh-note{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); }
  .jh-head-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .jh-btn{
    font-family: var(--font-body); font-size:11.5px; padding:4px 10px; border-radius:2px; cursor:pointer; white-space:nowrap;
    border:1px solid var(--panel-border); background: rgba(255,255,255,0.02); color: var(--text-dim);
    transition: border-color .15s ease, color .15s ease; text-decoration:none; display:inline-block;
  }
  .jh-btn:hover{ border-color: var(--accent); color: var(--text); }
  .jh-btn.is-primary{ background: var(--accent); border-color: var(--accent); color:#0a0d10; font-weight:600; }
  .jh-btn.is-primary:hover{ filter:brightness(1.08); color:#0a0d10; }
  .jh-btn.is-danger:hover{ border-color: var(--err); color: var(--err); }
  .jh-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .jh-in{
    background: rgba(255,255,255,0.04); border:1px solid var(--panel-border); border-radius:2px; color: var(--text);
    font-family: var(--font-body); font-size:12px; padding:5px 8px; color-scheme: dark; min-width:0;
  }
  .jh-in:focus{ outline:none; border-color: var(--accent); }
  .jh-in.is-num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  select.jh-in option{ background: var(--panel-solid); color: var(--text); }
  textarea.jh-in{ width:100%; min-height:64px; resize:vertical; line-height:1.6; }
  .jh-form{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .jh-form .jh-grow{ flex:1 1 180px; }

  /* 絞り込みチップ */
  .jh-toolrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .jh-chips{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
  .jh-chip{
    font-family: var(--font-mono); font-size:10.5px; letter-spacing:.2px; padding:3px 9px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:2px; background:transparent; color: var(--text-faint);
  }
  .jh-chip:hover{ color: var(--text); border-color: var(--panel-border); }
  .jh-chip.is-on{ color: var(--accent); border-color: var(--accent-dim); background: rgba(255,143,63,0.08); }
  .jh-chip .n{ opacity:.7; margin-left:4px; }
  .jh-summary{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

  /* 表 */
  .jh-table-wrap{ overflow:auto; max-height:600px; border-top:1px solid var(--hairline); }
  .jh-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .jh-table th{
    position:sticky; top:0; z-index:1; background: var(--panel-solid); text-align:left; white-space:nowrap;
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:1px; font-weight:500; color: var(--text-faint);
    padding:7px 8px; border-bottom:1px solid var(--panel-border);
  }
  .jh-table th[data-act]{ cursor:pointer; user-select:none; }
  .jh-table th[data-act]:hover{ color: var(--text); }
  .jh-table th.is-sorted{ color: var(--accent); }
  .jh-table td{ padding:6px 8px; border-bottom:1px solid var(--hairline); color: var(--text); vertical-align:middle; }
  .jh-table td.num, .jh-table th.num{ text-align:right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .jh-table tr.is-row{ cursor:pointer; }
  .jh-table tr.is-row:hover td{ background: rgba(255,255,255,0.025); }
  .jh-table tr.is-open td{ background: rgba(255,143,63,0.05); }
  .jh-table td.jh-detail{ background: rgba(255,255,255,0.015); padding:12px 14px; cursor:default; }
  .jh-cell-title{ display:block; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .jh-cell-sub{ display:block; font-family: var(--font-mono); font-size:10px; color: var(--text-faint); margin-top:2px; }
  .jh-faint{ color: var(--text-faint); }
  .jh-ok{ color: var(--ok); }
  .jh-warn{ color: var(--warn); }
  .jh-err{ color: var(--err); }
  .jh-accent{ color: var(--accent); }
  .jh-more{ margin:10px auto 0; display:block; }
  .jh-link{ color: var(--accent); text-decoration:none; }
  .jh-link:hover{ text-decoration:underline; }

  /* 順位バッジ（3位以内=ok / 10位以内=アクセント / それ以下=控えめ）とスパークライン */
  .jh-rank{
    display:inline-block; min-width:38px; text-align:center; font-family: var(--font-mono); font-size:10.5px;
    padding:1px 5px; border-radius:2px; border:1px solid var(--hairline); color: var(--text-faint);
  }
  .jh-rank.is-top{ color: var(--ok); border-color: rgba(94,201,138,.35); }
  .jh-rank.is-mid{ color: var(--accent); border-color: var(--accent-dim); }
  .jh-spark{ width:64px; height:18px; color: var(--accent); display:block; }
  .jh-spark-none{ color: var(--text-faint); font-family: var(--font-mono); font-size:10px; }
  .jh-tag{
    font-family: var(--font-mono); font-size:9.5px; padding:1px 6px; border-radius:2px;
    border:1px solid var(--hairline); color: var(--text-dim); white-space:nowrap;
  }
  .jh-tag.is-accent{ color: var(--accent); border-color: var(--accent-dim); }
  .jh-tag.is-warn{ color: var(--warn); border-color: rgba(216,194,74,.35); }
  .jh-tag.is-ok{ color: var(--ok); border-color: rgba(94,201,138,.35); }

  /* やること（データから自動で出す改善候補） */
  .jh-todo{ display:flex; flex-direction:column; }
  .jh-todo-row{ display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px; border-bottom:1px solid var(--hairline); position:relative; }
  .jh-todo-row:last-child{ border-bottom:none; }
  .jh-todo-row::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; background: var(--accent); }
  .jh-todo-row.lv-warn::before{ background: var(--warn); }
  .jh-todo-row.lv-err::before{ background: var(--err); }
  .jh-todo-text{ flex:1; min-width:0; font-size:12.5px; line-height:1.55; }
  .jh-notice{ padding:10px 14px; font-size:12px; line-height:1.6; color: var(--text-dim); }
  .jh-notice.is-err{ color: var(--err); }
  .jh-notice ul{ margin:4px 0 0; padding-left:18px; }

  /* 月次の棒（値は棒の上に mono。色はアクセント1色、手入力の月と途中月は薄く） */
  .jh-bars-title{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); margin:6px 0 2px; }
  .jh-bars{ display:flex; align-items:flex-end; gap:6px; height:128px; padding:4px 2px 0; }
  .jh-bars.is-short{ height:92px; }
  .jh-bar-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
  .jh-bar-val{ font-family: var(--font-mono); font-size:9.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .jh-bar-track{ flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; }
  .jh-bar{ width:100%; background: var(--accent); border-radius:1px 1px 0 0; }
  .jh-bar.is-manual{ background: var(--accent-dim); }
  .jh-bar.is-partial{ opacity:.55; }
  .jh-bar.is-sub{ background: var(--text-dim); }
  .jh-bar-lbl{ font-family: var(--font-mono); font-size:9.5px; color: var(--text-faint); }
  .jh-legend{ font-size:10.5px; color: var(--text-faint); margin-top:6px; }

  /* 目標のセグメント進捗（デザイン方針の「セグメント進捗」を事務ハックではここで1回だけ使う） */
  .jh-goal{ padding:8px 0; border-bottom:1px solid var(--hairline); }
  .jh-goal:last-child{ border-bottom:none; }
  .jh-goal-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; }
  .jh-goal-val{ font-family: var(--font-mono); font-size:11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  .jh-seg{ display:grid; grid-template-columns: repeat(10, 1fr); gap:2px; margin-top:6px; }
  .jh-seg i{ height:5px; background: rgba(255,255,255,0.06); }
  .jh-seg i.on{ background: var(--accent); }
  .jh-seg.is-done i.on{ background: var(--ok); }

  /* 計画（ポータルのタスク）・ネタ帳・収益化ステータス */
  .jh-plan-group{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); padding:12px 0 4px; }
  .jh-plan-group.is-warn{ color: var(--err); }
  .jh-task{ display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--hairline); }
  .jh-task-check{
    width:16px; height:16px; flex:none; padding:0; cursor:pointer; border:1px solid var(--panel-border); border-radius:2px;
    background:transparent; color: var(--ok); font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .jh-task-check.is-done{ background: rgba(94,201,138,0.15); border-color: var(--ok); }
  .jh-task-text{ flex:1; min-width:0; font-size:12.5px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .jh-task-text:hover{ color: var(--accent); }
  .jh-task.is-done .jh-task-text{ color: var(--text-faint); text-decoration:line-through; }
  .jh-task-due{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); white-space:nowrap; }
  .jh-task-due.is-over{ color: var(--err); }
  .jh-idea{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--hairline); }
  .jh-idea-title{ flex:1; min-width:0; font-size:12.5px; }
  .jh-idea.is-done .jh-idea-title{ color: var(--text-faint); text-decoration:line-through; }
  /* 右列（1fr）は 350px 前後まで細くなるので、名前とメモは1行を占有させ、状態と日付を2列で並べる */
  .jh-status-row{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; align-items:center; padding:8px 0; border-bottom:1px solid var(--hairline); }
  .jh-status-row:last-child{ border-bottom:none; }
  .jh-status-name{ font-size:12px; grid-column: 1 / -1; }
  .jh-status-row input[type="text"]{ grid-column: 1 / -1; }
  .jh-detail-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  .jh-mini-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
  .jh-mini-table td, .jh-mini-table th{
    padding:3px 6px; border-bottom:1px solid var(--hairline); text-align:right;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  .jh-mini-table th{ font-size:9.5px; color: var(--text-faint); font-weight:500; }
  .jh-mini-table td:first-child, .jh-mini-table th:first-child{ text-align:left; }
  .jh-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center; }
  .jh-sublabel{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); margin-bottom:6px; }

  @media (max-width: 900px){
    .jh-grid2, .jh-detail-grid{ grid-template-columns: 1fr; }
    .jh-wrap .kpi-band{ grid-template-columns: 1fr 1fr; row-gap:12px; }
    .jh-status-row{ grid-template-columns: 1fr 1fr; }
    .jh-cell-title{ max-width:220px; }
  }
  /* 流入元の割合（横棒。いちばん多い1本だけアクセント、残りは控えめ） */
  .jh-share{ display:grid; grid-template-columns: 180px 1fr 130px; gap:10px; align-items:center; padding:5px 0; font-size:12px; }
  .jh-share-track{ height:8px; background: rgba(255,255,255,0.05); border-radius:1px; overflow:hidden; }
  .jh-share-bar{ display:block; height:100%; background: var(--accent); }
  .jh-share-bar.is-sub{ background: var(--text-dim); opacity:.55; }
  .jh-share-val{ font-family: var(--font-mono); font-size:11px; color: var(--text-dim); text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
  @media (max-width: 900px){
    .jh-share{ grid-template-columns: 110px 1fr 96px; }
  }

  /* 概要 v2（v2.33.58）：上の「3つの答え」・データの鮮度・今週の3つ・推移の切り替え */
  .jh-answers{ display:grid; grid-template-columns: 1fr 1.1fr 1.3fr; gap:12px; }
  .jh-answer{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .jh-answer-q{ display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:22px;
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); }
  .jh-answer-big{ font-family: var(--font-mono); font-size:26px; line-height:1.1; color: var(--text); font-variant-numeric: tabular-nums; }
  .jh-answer-big small{ font-size:11px; color: var(--text-dim); margin-left:6px; letter-spacing:0; }
  .jh-answer-line{ font-size:12px; line-height:1.55; color: var(--text-dim); }
  .jh-answer-line b{ font-family: var(--font-mono); font-weight:600; color: var(--text); font-variant-numeric: tabular-nums; }
  .jh-answer .jh-spark{ width:100%; height:24px; margin-top:2px; }
  .jh-answer .jh-actions{ margin-top:4px; }
  .jh-answer-foot{ margin-top:auto; padding-top:8px; border-top:1px solid var(--hairline);
    font-family: var(--font-mono); font-size:10.5px; line-height:1.7; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .jh-answer-foot .is-warn, .jh-chronic .is-warn, .jh-datastrip .is-warn{ color: var(--warn); }
  .jh-delta{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .jh-delta.is-good{ color: var(--ok); }
  .jh-delta.is-bad{ color: var(--warn); }
  .jh-goal-mini{ margin-top:4px; }
  .jh-goal-mini .jh-goal-head{ font-size:11px; }
  .jh-btn.is-ghost{ border-color: transparent; background: transparent; color: var(--text-faint); padding-left:6px; padding-right:6px; }
  .jh-btn.is-ghost:hover{ color: var(--accent); border-color: transparent; }
  /* 流入元の積み上げ棒（Bing だけアクセント、残りはニュートラルの濃淡） */
  .jh-stack{ display:flex; height:10px; margin-top:4px; border-radius:1px; overflow:hidden; background: rgba(255,255,255,0.05); }
  .jh-stack i{ display:block; height:100%; }
  .jh-stack .k-bing{ background: var(--accent); }
  .jh-stack .k-google{ background: var(--text-dim); }
  .jh-stack .k-yahoo{ background: rgba(154,147,138,.55); }
  .jh-stack .k-direct{ background: rgba(154,147,138,.35); }
  .jh-stack .k-other{ background: rgba(154,147,138,.2); }
  .jh-stack-legend{ display:flex; flex-wrap:wrap; gap:2px 10px; font-family: var(--font-mono); font-size:10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  .jh-stack-legend span::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:4px; background: rgba(154,147,138,.2); }
  .jh-stack-legend .k-bing::before{ background: var(--accent); }
  .jh-stack-legend .k-google::before{ background: var(--text-dim); }
  .jh-stack-legend .k-yahoo::before{ background: rgba(154,147,138,.55); }
  .jh-stack-legend .k-direct::before{ background: rgba(154,147,138,.35); }
  .jh-next-title{ font-size:14px; line-height:1.45; color: var(--text); }
  .jh-next-impact{ font-family: var(--font-mono); font-size:11px; color: var(--accent); font-variant-numeric: tabular-nums; }
  .jh-datastrip{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; padding:0 4px;
    font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .jh-rank-no{ flex:none; width:14px; font-family: var(--font-mono); font-size:11px; color: var(--text-faint); align-self:flex-start; padding-top:1px; }
  .jh-todo-row.is-first .jh-rank-no{ color: var(--accent); }
  .jh-todo-main{ flex:1; min-width:0; }
  .jh-todo-title{ font-size:12.5px; line-height:1.45; }
  .jh-todo-sub{ margin-top:2px; font-family: var(--font-mono); font-size:10.5px; line-height:1.5; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .jh-todo-impact{ color: var(--accent); }
  .jh-todo-acts{ flex:none; display:flex; gap:2px; align-items:center; }
  .jh-more-toggle{ background:none; border:none; padding:8px 0 0; cursor:pointer; font-family: var(--font-mono); font-size:10.5px; color: var(--text-dim); }
  .jh-more-toggle:hover{ color: var(--accent); }
  .jh-more-toggle + .jh-more-toggle{ margin-left:14px; }
  .jh-todo-doneform{ margin-top:6px; }
  .jh-todo-sub .is-warn{ color: var(--warn); }
  .jh-todo-row.is-done:not(.lv-warn)::before{ background: var(--text-faint); }
  .jh-todo-row.is-done .jh-todo-title{ color: var(--text-dim); }
  .jh-chronic{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--hairline); font-size:12px; color: var(--text-dim); }
  .jh-chronic-item{ display:inline-flex; align-items:center; gap:2px; }
  @media (max-width: 1080px){
    .jh-answers{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .jh-todo-row{ flex-wrap:wrap; }
    .jh-todo-acts{ width:100%; justify-content:flex-end; }
  }
/* 請求書管理：未処理キュー（漏れ防止計画 P1・2026/09/13）— 旧「メールから取り込み」モーダルを置き換え。このブロックを消せば見た目は素のモーダルに戻る */
.pay2-queue-panel{ width:min(780px, 100%); max-height:min(90vh, 920px); }
.pay2-queue-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 18px 6px; flex:none; }
.pay2-queue-sum{ margin-right:auto; font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pay2-queue-sum b{ color: var(--text); }
.pay2-queue-sum .pay2-sum-muted{ color: var(--text-faint); }
.pay2-queue-hint{ padding:0 18px 8px; flex:none; }
.pay2-queue-list{ max-height:none; flex:1 1 auto; min-height:120px; padding:2px 18px 10px; gap:8px; }
.pay2-queue-panel > .event-form-error{ margin:0 18px 8px; }
.pay2-queue-foot{ padding:10px 18px 14px; margin-top:0; border-top:1px solid var(--hairline); flex:none; }
.pay2-q-group{ padding:8px 0 0; font-family: var(--font-mono); font-size:10px; letter-spacing:1.5px; color: var(--text-faint); }
.pay2-q-item{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; border:1px solid var(--panel-border); border-radius:3px; }
.pay2-q-item.is-done > :not(.pay2-q-msg){ opacity:.4; }
.pay2-q-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pay2-q-tag{ padding:0 5px; font-family: var(--font-mono); font-size:10px; color: var(--text-dim); border:1px solid var(--hairline); border-radius:2px; }
.pay2-q-open{ margin-left:auto; font-size:11px; color: var(--text-dim); text-decoration:none; }
.pay2-q-open:hover{ color: var(--accent); }
.pay2-q-subj{ font-size:12px; color: var(--text); overflow-wrap:anywhere; }
.pay2-q-snip{ font-size:11px; color: var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay2-q-thread{ font-size:11px; color: var(--warn); }
.pay2-q-suggest{ font-size:11px; color: var(--text-dim); }
.pay2-q-form{ display:grid; grid-template-columns:minmax(150px, 1.6fr) 104px 128px 104px 132px; gap:6px; margin-top:5px; }
.pay2-q-form input, .pay2-q-form select, .pay2-q-actions select{
  min-width:0; padding:4px 7px; font-size:11.5px; border-radius:2px; color-scheme: dark;
  border:1px solid var(--panel-border); background: var(--panel-solid); color: var(--text);
}
.pay2-q-form input::placeholder{ color: var(--text-faint); }
.pay2-q-form input:focus, .pay2-q-form select:focus, .pay2-q-actions select:focus{ outline:none; border-color: var(--accent); }
.pay2-q-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; }
.pay2-q-actions select{ max-width:220px; }
.pay2-q-actions .pay2-tool-btn{ border-radius:2px; }
.pay2-q-actions .pay2-tool-btn.is-suggest{ border-color: var(--accent); color: var(--accent); }
.pay2-q-actions .pay2-tool-btn:disabled{ opacity:.5; cursor:default; }
.pay2-q-msg{ font-size:11px; color: var(--text-dim); }
.pay2-q-msg:empty{ display:none; }
.pay2-q-item.is-done .pay2-q-msg{ color: var(--ok); }
.pay2-q-msg.err{ color: var(--err); }
@media (max-width:720px){
  .pay2-q-form{ grid-template-columns:1fr 1fr; }
  .pay2-q-form .pay2-q-vendor{ grid-column:1 / -1; }
}
/* 請求書管理：毎月一覧の保守（漏れ防止計画 P3・2026/09/13）— 受領チェックの提案と未着行の操作ボタン */
.pay2-sugg{ margin:0 0 10px; padding:8px 10px; border:1px solid var(--panel-border); border-radius:3px; }
.pay2-sugg-head{ padding-bottom:4px; font-family: var(--font-mono); font-size:10px; letter-spacing:1.5px; color: var(--text-faint); }
.pay2-sugg-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:5px 0; font-size:11.5px; border-top:1px solid var(--hairline); }
.pay2-sugg-head + .pay2-sugg-row{ border-top:0; }
.pay2-sugg-name{ color: var(--text); }
.pay2-mini-btn{
  padding:2px 8px; font-size:10.5px; border-radius:2px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--panel-border); background: transparent; color: var(--text-dim);
}
.pay2-mini-btn:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.pay2-mini-btn:disabled{ opacity:.45; cursor:default; }
.pay2-mini-primary{ border-color: var(--accent-dim); color: var(--accent); }
.pay2-check-act{ white-space:nowrap; }
.pay2-check-act .pay2-mini-btn + .pay2-mini-btn{ margin-left:4px; }
/* 請求書管理：カード明細（UPSIDER）の突き合わせ（漏れ防止計画 P4・2026/09/13） */
.pay2-file-btn{ display:inline-flex; align-items:center; }
.pay2-stmt-sec{ margin:0 0 12px; }
.pay2-stmt-title{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 0 6px; font-size:11.5px; color: var(--text-dim); }
.pay2-stmt-empty{ padding:0 0 4px; }
.pay2-stmt-more > summary{ padding:2px 0 6px; font-size:11.5px; color: var(--text-dim); cursor:pointer; }
.pay2-stmt-more > summary:hover{ color: var(--accent); }
#pay2-stmt-body .pay2-table tbody tr:not([data-pid]){ cursor:default; }

  /* ================= スモビジ（#view-smallbiz・app.smallbiz.js） =================
     KPI は既存の .kpi-band、カードは .panel＋.card-head を流用。色はアクセント1色＋意味色（ok/warn/err）だけ。
     このブロックを消すと見た目は素の部品に戻る（機能は動く）。 */
  .sb-wrap{ width:100%; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding-bottom:24px; }
  .sb-wrap .kpi-band{ margin-bottom:0; }
  .kpi-value.sb-warn{ color: var(--warn); }
  .sb-kpis .kpi-value{ font-size:18px; white-space:nowrap; }
  @media (max-width: 600px){ .sb-kpis .kpi-value{ font-size:15px; } .sb-kpis .kpi-label{ letter-spacing:.5px; } }
  .sb-empty{ padding:28px 20px; text-align:center; color: var(--text-dim); }
  .sb-faint{ color: var(--text-faint); font-size:12px; }
  .sb-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .sb-head h2{ font-family: var(--font-display); font-size:15px; letter-spacing:.2px; }
  .sb-status{ font-family: var(--font-mono); font-size:11px; color: var(--text-dim); white-space:nowrap; }
  .sb-status.is-ok{ color: var(--ok); }
  .sb-status.is-warn{ color: var(--warn); }
  .sb-status.is-err{ color: var(--err); }
  .sb-phase{ font-size:12px; color: var(--text-dim); }
  .sb-updated{ margin-left:auto; font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); white-space:nowrap; }
  .sb-body{ display:flex; flex-direction:column; gap:14px; }
  .sb-summary{ margin:0; font-size:13px; line-height:1.7; color: var(--text); }
  .sb-goal{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .sb-goal-label{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color: var(--text-faint); }
  .sb-goal-value{ font-family: var(--font-mono); font-size:16px; font-weight:600; color: var(--text); font-variant-numeric: tabular-nums; }
  .sb-segs{ display:inline-flex; gap:3px; }
  .sb-segs i{ display:block; width:14px; height:6px; border-radius:1px; background: rgba(235,170,120,.12); }
  .sb-segs i.on{ background: var(--accent); }
  .sb-metrics{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:1px; background: var(--hairline); border:1px solid var(--hairline); }
  .sb-metric{ background: var(--panel); padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .sb-metric-label{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:1px; color: var(--text-faint); }
  .sb-metric-value{ font-family: var(--font-mono); font-size:15px; font-weight:600; color: var(--text); font-variant-numeric: tabular-nums; }
  .sb-metric-note{ font-size:10.5px; color: var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-metric.is-ok .sb-metric-value{ color: var(--ok); }
  .sb-metric.is-warn .sb-metric-value{ color: var(--warn); }
  .sb-metric.is-err .sb-metric-value{ color: var(--err); }
  .sb-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  .sb-col{ min-width:0; }
  .sb-col h3{ margin:0 0 6px; font-family: var(--font-mono); font-size:9.5px; letter-spacing:1.5px; font-weight:500; color: var(--text-faint); }
  .sb-list{ list-style:none; margin:0; padding:0; }
  .sb-list li{ display:flex; gap:8px; align-items:baseline; padding:6px 0; border-top:1px solid var(--hairline); font-size:12.5px; line-height:1.6; }
  .sb-list li:first-child{ border-top:none; }
  .sb-owner{ flex:0 0 auto; font-family: var(--font-mono); font-size:10px; padding:0 6px; border:1px solid var(--hairline); border-radius:2px; color: var(--text-faint); }
  .sb-owner.is-owner{ color: var(--accent); border-color: var(--accent-dim); }
  .sb-li-text{ flex:1 1 auto; min-width:0; color: var(--text); }
  .sb-due{ flex:0 0 auto; font-family: var(--font-mono); font-size:10.5px; color: var(--text-faint); }
  .sb-decisions li{ flex-direction:column; gap:2px; }
  .sb-rec{ font-size:11.5px; color: var(--text-dim); }
  .sb-exits summary{ cursor:pointer; font-family: var(--font-mono); font-size:10.5px; letter-spacing:1px; color: var(--text-faint); }
  .sb-exits summary:hover{ color: var(--text); }
  .sb-table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
  .sb-table td{ padding:5px 8px; border-top:1px solid var(--hairline); vertical-align:top; color: var(--text-dim); }
  .sb-code{ font-family: var(--font-mono); color: var(--text-faint); white-space:nowrap; }
  .sb-foot{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; border-top:1px solid var(--hairline); padding-top:10px; }
  .sb-link{ font-size:12px; color: var(--text-dim); text-decoration:none; border:1px solid var(--panel-border); border-radius:2px; padding:3px 9px; }
  .sb-link:hover{ color: var(--text); border-color: var(--accent); }
  .sb-source{ margin-left:auto; font-size:10.5px; color: var(--text-faint); }
  .sb-footnote{ margin:0; font-size:11px; color: var(--text-faint); text-align:center; }
  @media (max-width: 860px){
    .sb-cols{ grid-template-columns: 1fr; }
    .sb-updated, .sb-source{ margin-left:0; }
  }
  /* プライベートの QUICK ACCESS は「スモビジ」を足して10枚。通常表示の3列だと4行目に1枚だけ出るので、
     デスクトップ幅では 16:9 固定枠と同じ5列×2行にそろえる。 */
  @media (min-width: 1081px){
    #view-private .pv-bottom .quick-grid{ grid-template-columns: repeat(5, 1fr); gap:8px; }
    #view-private .pv-bottom .quick-tile{ padding:10px 4px; gap:6px; }
  }