:root{font-family:Inter,"Noto Sans JP","Yu Gothic UI",sans-serif;color:#183047;background:#f3f6f8;--navy:#1b3a57;--blue:#2f6f9f;--border:#d7e0e7;--muted:#617487;--danger:#b53939;--success:#2d7854}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}.center-page,.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.center-page{align-content:center;color:var(--muted)}.center-page.compact{min-height:300px}.spinner{width:38px;height:38px;border:4px solid #d7e4ee;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-page{background:linear-gradient(145deg,#eff5f9,#fff 48%,#e7eef3)}.login-card{width:min(440px,100%);background:#fff;padding:34px;border-radius:22px;box-shadow:0 22px 70px rgba(22,49,70,.13);display:grid;gap:18px}.login-card h1{margin:0;font-size:1.55rem}.login-card p{margin:-8px 0 6px;color:var(--muted);line-height:1.6}.brand-mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:1.5rem;font-weight:800}label{display:grid;gap:7px;font-weight:650;font-size:.9rem;color:#344f65}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:#fff;color:#173148;outline:none}input:focus,select:focus,textarea:focus{border-color:#5590ba;box-shadow:0 0 0 3px rgba(47,111,159,.12)}textarea{min-height:86px;resize:vertical}.primary,.secondary,.text-button,.camera-button{border:0;border-radius:11px;padding:11px 17px;font-weight:750}.primary{background:var(--navy);color:#fff}.primary:hover{background:#254e70}.primary.success{background:var(--success)}.secondary{background:#fff;color:var(--navy);border:1px solid #bfcdd8}.secondary:hover{background:#f2f6f9}.text-button{background:transparent;color:var(--blue);padding:8px}.danger-outline{color:var(--danger);border-color:#e1aaaa}.app-shell{min-height:100vh}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:20}.topbar div{display:flex;align-items:baseline;gap:10px}.topbar strong{letter-spacing:.09em;color:var(--navy)}.topbar span{color:var(--muted);font-size:.9rem}.dashboard-strip{max-width:1180px;margin:22px auto 12px;padding:0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dashboard-card{min-height:88px;background:#fff;border:1px solid var(--border);border-radius:15px;text-align:left;padding:15px 17px;color:var(--muted);box-shadow:0 4px 14px rgba(20,51,72,.04)}.dashboard-card strong{color:var(--navy);font-size:2rem;margin-right:4px}.dashboard-card small{color:var(--muted)}.dashboard-card span{display:block;font-size:.82rem;font-weight:700;margin-bottom:3px}.dashboard-card.ready{border-top:4px solid #3a82b3}.dashboard-card.submitted{border-top:4px solid #b1832f}.dashboard-card.returned{border-top:4px solid #b84f4f}.dashboard-card.completed{border-top:4px solid #438061}.tabs{max-width:1180px;margin:0 auto;padding:0 18px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.tabs button{white-space:nowrap;border:0;background:transparent;padding:13px 17px;color:var(--muted);font-weight:750;border-bottom:3px solid transparent}.tabs button.active{color:var(--navy);border-bottom-color:var(--blue)}.tabs span{display:inline-grid;place-items:center;margin-left:7px;min-width:23px;height:23px;border-radius:12px;padding:0 6px;background:#e7eef3;font-size:.75rem}.content{max-width:1180px;margin:0 auto;padding:24px 18px 70px}.capture-panel,.editor-panel,.list-panel{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px;box-shadow:0 7px 25px rgba(20,51,72,.045)}h1,h2,p{margin-top:0}h1{font-size:1.45rem;margin-bottom:7px}h2{font-size:1.05rem;margin-bottom:5px}.capture-panel>p,.section-heading p,.line-heading p{color:var(--muted)}.camera-button{width:100%;min-height:220px;border:2px dashed #9eb7ca;background:#f5f9fc;color:var(--navy);display:grid;place-items:center;align-content:center;gap:12px;font-size:1.08rem}.camera-button span{font-size:3rem}.preview-area{display:grid;gap:18px}.preview-area img{width:min(560px,100%);max-height:650px;object-fit:contain;margin:0 auto;border-radius:13px;border:1px solid var(--border);background:#eef2f5}.preview-actions,.sticky-actions{display:flex;justify-content:center;gap:12px}.busy-note{text-align:center;color:var(--muted)}.error-box,.warning-box{border-radius:11px;padding:13px 15px;margin:12px 0;line-height:1.55}.error-box{background:#fff0f0;color:#852c2c;border:1px solid #efc2c2}.warning-box{background:#fff8e6;color:#765510;border:1px solid #ead59d}.warning-box p{margin:5px 0 0}.dismissible{display:flex;justify-content:space-between;gap:12px}.dismissible button{border:0;background:transparent;color:inherit;font-size:1.2rem}.section-heading,.line-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 30px}.span-2{grid-column:span 2}.line-heading{border-top:1px solid var(--border);padding-top:23px}.line-list{display:grid;gap:12px;margin-top:14px}.line-card{display:grid;grid-template-columns:38px minmax(220px,2fr) repeat(5,minmax(100px,1fr));gap:10px;align-items:end;border:1px solid var(--border);border-radius:13px;padding:14px;background:#fbfcfd}.line-card.excluded{opacity:.65;background:#f1f1f1}.line-number{width:31px;height:31px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;align-self:center}.line-description{grid-column:span 2}.line-note{grid-column:2/span 4}.expense-check,.export-check{display:flex;align-items:center;gap:7px;min-height:42px}.expense-check input,.export-check input{width:auto}.delete-line{border:0;background:transparent;color:var(--danger);padding:10px}.totals-check{margin-top:20px;padding:15px 18px;border-radius:12px;display:grid;grid-template-columns:1fr auto;gap:8px 18px;background:#eef6f0;border:1px solid #bfd8c6}.totals-check.mismatch{background:#fff3ed;border-color:#e8bea8}.totals-check p{grid-column:1/-1;margin:4px 0 0;color:#8c4525}.sticky-actions{position:sticky;bottom:12px;margin-top:25px;padding:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 30px rgba(20,51,72,.12)}.sticky-actions button{min-width:160px}.export-panel{display:grid;grid-template-columns:160px 160px minmax(250px,1fr) auto;align-items:end;gap:12px;padding:15px;background:#f3f7fa;border:1px solid var(--border);border-radius:13px;margin:18px 0}.receipt-list{display:grid;gap:12px}.receipt-card{border:1px solid var(--border);border-radius:14px;padding:17px;display:flex;gap:20px;justify-content:space-between;background:#fff}.receipt-main{min-width:0;flex:1}.receipt-title{display:flex;align-items:center;gap:10px}.receipt-title h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0}.status-badge{border-radius:20px;padding:5px 9px;font-size:.72rem;font-weight:800;white-space:nowrap}.status-badge.ready{background:#e4f1fa;color:#215d85}.status-badge.submitted{background:#fff3d8;color:#7b5712}.status-badge.returned{background:#ffe8e8;color:#8b3030}.status-badge.completed{background:#e5f3e9;color:#286346}.status-badge.draft{background:#eceff2;color:#536474}.receipt-meta{display:flex;gap:18px;color:var(--muted);margin-top:12px;align-items:baseline;flex-wrap:wrap}.receipt-meta strong{color:var(--navy);font-size:1.15rem}.receipt-note{margin:10px 0 0;color:#435d72}.small-warning{margin:8px 0 0;color:#8b6416;font-size:.86rem}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}.empty-state strong{color:var(--navy);display:block;margin-bottom:8px}@media(max-width:920px){.line-card{grid-template-columns:34px repeat(2,minmax(0,1fr))}.line-description,.line-note{grid-column:2/-1}.export-panel{grid-template-columns:repeat(2,1fr)}.export-check{grid-column:1/-1}.export-panel .primary{grid-column:1/-1}}@media(max-width:680px){.topbar{height:60px;padding:0 14px}.dashboard-strip{grid-template-columns:repeat(2,1fr);margin-top:14px;padding:0 12px}.dashboard-card{min-height:76px}.tabs{padding:0 8px}.tabs button{padding:12px}.content{padding:15px 10px 70px}.capture-panel,.editor-panel,.list-panel{border-radius:14px;padding:17px 14px}.section-heading,.line-heading{flex-direction:column}.form-grid{grid-template-columns:1fr;gap:12px}.span-2{grid-column:auto}.line-card{grid-template-columns:34px 1fr 1fr;padding:11px}.line-description,.line-note{grid-column:2/-1}.expense-check{grid-column:2}.delete-line{grid-column:3}.receipt-card{flex-direction:column;gap:13px}.card-actions{justify-content:stretch}.card-actions button{flex:1}.receipt-title{align-items:flex-start}.receipt-title h2{white-space:normal}.export-panel{grid-template-columns:1fr}.export-check,.export-panel .primary{grid-column:auto}.sticky-actions button{min-width:0;flex:1}}

/* 通信エラーの詳細（URL・HTTPステータス・応答本文）を改行のまま読めるようにする */
.error-box{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}
.error-box.dismissible{padding-right:2.5rem;}

/* ===== 金額の確認まわり（桁誤認識の防止） ===== */
.total-focus{margin:0 0 1rem;padding:1rem;border-radius:12px;background:rgba(27,58,87,.06);border:1px solid rgba(27,58,87,.15);}
.total-focus.needs-review{background:rgba(200,30,30,.07);border-color:#c81e1e;}
.total-headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;}
.total-headline>span{font-size:.9rem;color:#4a5a6a;}
.total-big{font-size:2.4rem;line-height:1.1;font-weight:700;letter-spacing:.02em;}
.total-focus.needs-review .total-big{color:#c81e1e;}
.total-printed{font-size:.85rem;color:#4a5a6a;background:#fff;border-radius:6px;padding:.15rem .5rem;}
.total-reason{margin:.5rem 0 0;font-size:.9rem;color:#c81e1e;line-height:1.5;}
.total-evidence{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:.25rem .5rem;margin-top:.75rem;font-size:.85rem;align-items:baseline;}
.total-evidence span{color:#4a5a6a;}
.total-evidence strong{font-variant-numeric:tabular-nums;}
@media (max-width:560px){.total-evidence{grid-template-columns:auto 1fr;}}

.zoom-view{margin-top:.75rem;height:210px;border-radius:10px;background-color:#111;background-repeat:no-repeat;border:1px solid rgba(0,0,0,.2);}
.zoom-view.empty{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;}
.zoom-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;}
.zoom-actions button{flex:1 1 auto;min-width:5.5rem;padding:.45rem .5rem;font-size:.85rem;}
.zoom-slider{width:100%;margin-top:.5rem;}
.zoom-note{display:block;margin-top:.25rem;font-size:.78rem;color:#4a5a6a;line-height:1.5;}

.amount-field{display:flex;flex-direction:column;gap:.3rem;}
.amount-field .amount-label{display:flex;align-items:center;gap:.4rem;}
.amount-field .flag{font-style:normal;font-size:.72rem;font-weight:700;color:#fff;background:#c81e1e;border-radius:999px;padding:.1rem .5rem;}
.amount-field.needs-review>input{border:2px solid #c81e1e;background:rgba(200,30,30,.05);}
.amount-field.reviewed>input{border:2px solid #1f8a4c;background:rgba(31,138,76,.05);}
.amount-field .printed{color:#4a5a6a;font-size:.8rem;}
.amount-field .reason{color:#c81e1e;font-size:.8rem;line-height:1.5;}
.suggest-button{align-self:flex-start;padding:.35rem .7rem;font-size:.85rem;border-radius:8px;border:1px solid #1b3a57;background:#fff;color:#1b3a57;font-weight:600;}
.confirm-check{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:#1b3a57;}
.confirm-check input{width:1.15rem;height:1.15rem;}
.sticky-actions .primary:disabled{opacity:.55;}

/* ===== ローカルAI（戦艦PC）読み取り待ちの表示 ===== */
.ocr-waiting{margin:0 0 .75rem;padding:.7rem .9rem;border-radius:10px;background:rgba(27,58,87,.08);border:1px solid rgba(27,58,87,.2);font-size:.88rem;line-height:1.6;}
.waiting-note{font-size:.85rem;color:#4a5a6a;padding:.3rem .1rem;}
.dashboard-card.pending strong{color:#8a6d1f;}
.dashboard-card.review strong{color:#1b3a57;}
/* ===== 提出バッチ・提出履歴 ===== */
.group-heading{margin:1.2rem 0 .6rem;font-size:.95rem;color:#4a5a6a;border-bottom:1px solid rgba(27,58,87,.15);padding-bottom:.3rem;}
.submit-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;padding:.75rem .9rem;margin-bottom:.8rem;border-radius:10px;background:rgba(27,58,87,.07);border:1px solid rgba(27,58,87,.18);}
.submit-bar label{display:flex;align-items:center;gap:.35rem;font-size:.88rem;}
.submit-bar input[type=month]{padding:.3rem .4rem;}
.submit-summary{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;}
.selectable-row{display:flex;align-items:flex-start;gap:.5rem;}
.selectable-row.picked{background:rgba(27,58,87,.05);border-radius:12px;}
.selectable-row .pick{padding:.9rem .2rem 0 .5rem;}
.selectable-row .pick input{width:1.3rem;height:1.3rem;}
.selectable-row>article{flex:1;min-width:0;}

.submission-list{display:flex;flex-direction:column;gap:.8rem;}
.submission-card{padding:.9rem 1rem;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.12);}
.submission-card.has-error{border-color:#c81e1e;background:rgba(200,30,30,.04);}
.submission-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.submission-head h2{margin:0;font-size:1.05rem;letter-spacing:.02em;}
.submission-meta{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.25rem .6rem;margin:.6rem 0;font-size:.85rem;align-items:baseline;}
.submission-meta span{color:#4a5a6a;}
.submission-meta strong{font-variant-numeric:tabular-nums;}
@media (max-width:560px){.submission-meta{grid-template-columns:auto 1fr;}}
.return-reason{margin:.4rem 0;padding:.5rem .7rem;border-radius:8px;background:rgba(200,30,30,.07);font-size:.87rem;line-height:1.6;}
.return-reason strong{display:block;color:#c81e1e;margin-bottom:.2rem;}
.batch-receipts{margin-top:.7rem;border-top:1px solid rgba(0,0,0,.1);padding-top:.5rem;display:flex;flex-direction:column;gap:.35rem;}
.batch-receipt{display:flex;align-items:center;gap:.6rem;font-size:.85rem;}
.batch-receipt strong{margin-left:auto;font-variant-numeric:tabular-nums;}
.status-badge.generating{background:#8a6d1f;}
.status-badge.generating_error{background:#c81e1e;}
/* 取消済み。生きている提出と見間違えないよう、灰色に打ち消し線を添える。 */
.status-badge.voided{background:#e3e6e9;color:#5a6672;text-decoration:line-through;}
/* 領収書の状態バッジ。既存の .ready / .draft は READY 廃止時の名残で、
   実際の状態名（LOCAL_OCR_PENDING 等）には当たっていなかったため色が付かなかった。
   進み具合が左から右へ読めるよう、灰 → 赤 → 薄青 → 濃青 → 黄 → 緑 の順に置く。 */
.status-badge.local_ocr_pending{background:#eceff2;color:#536474;}
.status-badge.local_ocr_error{background:#fdecec;color:#b53939;}
.status-badge.review_required{background:#e4f1fa;color:#215d85;}
/* 確認済み・提出待ち。status は REVIEW_REQUIRED のままなので、
   確認待ちと同じ青系だが濃さと ✓ で見分けられるようにする。 */
.status-badge.review_confirmed{background:#d3e7f5;color:#1a4e73;}
.status-badge.review_confirmed::before{content:"✓";margin-right:.3em;font-weight:900;}
.submission-card.is-voided{opacity:.82;background:#fafbfc;}
.submission-card.is-voided h2{text-decoration:line-through;color:#5a6672;}
/* 確定に必要な項目の目印。読み取りで空でも登録はできるが、確認して確定するには要る。 */
.required-mark{margin-left:.45em;padding:.1em .45em;border-radius:4px;background:#fdecec;color:var(--danger);font-size:.72rem;font-weight:800;font-style:normal;vertical-align:middle;}

/* ここから下はスマホ（680px以下）だけに効かせる。681px以上のPC表示には一切入れない。
   前の @media より後ろに置いてあるので、同じ詳細度なら後勝ちでこちらが効く。
   見た目だけの調整で、機能・API・データ処理には触れていない。 */
@media(max-width:680px){
  /* 共通。ラベルは横書きのまま折り返さず、指で押せる高さを確保する。
     nowrap のまま幅が足りなくなっても横スクロールさせないため、
     縮めるのを許し（min-width:0）、溢れた分は隠して「…」にする。 */
  .card-actions button,.sticky-actions button{
    white-space:nowrap;min-height:44px;min-width:0;
    padding-left:12px;padding-right:12px;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* カード内は2列に割るぶん1列が狭い。左右の余白と字送りを少し詰めて、
     いちばん長い「もう一度読み取る」（8文字）でも列内に収まるようにする。 */
  .card-actions button{padding-left:10px;padding-right:10px;font-size:.94rem;}
  /* text-button は padding:8px で約36pxしかなかった。上下も他ボタンに揃える。 */
  .card-actions .text-button{padding-top:11px;padding-bottom:11px;}

  /* A. 確認画面の固定操作エリア。
        「戻る」は文字ぶんだけ、主要ボタンが残りを取る。影と余白も軽くする。 */
  .sticky-actions{padding:8px;margin-top:16px;gap:8px;
                  box-shadow:0 6px 16px rgba(20,51,72,.10);}
  .sticky-actions .secondary{flex:0 0 auto;}
  .sticky-actions .primary{flex:1 1 auto;}

  /* B. 領収書カード。上段が「画像｜主操作」の2列、削除は独立した段へ。
        枠線ではなく余白と右寄せで切り離す。補助ボタンが増えても2列のまま折り返す。 */
  .receipt-card .card-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  .receipt-card .card-actions .waiting-note{grid-column:1/-1;}
  .receipt-card .card-actions .danger-outline{
    grid-column:1/-1;justify-self:end;margin-top:8px;
    padding-left:16px;padding-right:16px;
  }

  /* C. 提出履歴。ダウンロードは2列。一覧・主要操作は全幅、取消は段を分ける。 */
  .submission-card .card-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  .submission-card .card-actions .waiting-note,
  .submission-card .card-actions .text-button,
  .submission-card .card-actions .primary{grid-column:1/-1;}
  .submission-card .card-actions .danger-outline{grid-column:1/-1;margin-top:8px;}
}