/* 経費アプリ — スマホ優先。ライト／ダーク対応 */
:root{
  --bg:#f5f6f2; --panel:#fff; --ink:#1f2a22; --muted:#66706a; --line:#dfe3dc; --brand:#2f4b3a; --brand-ink:#fff;
  --accent:#c9a227; --low:#fff4c2; --low-line:#e2b400; --err:#b3261e; --ok:#2e7d32; --chip:#eef1ec;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141815; --panel:#1d221e; --ink:#e7ece7; --muted:#9aa49d; --line:#313831; --brand:#7fb08f; --brand-ink:#0f1a13;
    --low:#4a3f10; --low-line:#c9a227; --err:#ff8a80; --ok:#81c784; --chip:#283028; color-scheme: dark; }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif; }
main{ max-width:960px; margin:0 auto; padding:16px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
h1{ font-size:1.35rem; margin:.2em 0 .6em; }
h2{ font-size:1.05rem; margin:1.4em 0 .5em; display:flex; justify-content:space-between; align-items:center; gap:8px; }
a{ color:var(--brand); }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muted{ color:var(--muted); } .small{ font-size:.86rem; } .err{ color:var(--err); } .ok{ color:var(--ok); }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row.center{ justify-content:center; } .row.end{ justify-content:flex-end; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
.panel.narrow{ max-width:440px; margin:6vh auto 0; }
.notice{ background:var(--chip); border-radius:10px; padding:10px 12px; }
.notice-panel{ border-color:var(--low-line); background:var(--low); margin:12px 0; }

.topbar{ position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px; background:var(--brand); color:var(--brand-ink); }
.topbar .brand{ color:var(--brand-ink); font-weight:700; text-decoration:none; }
.topbar .btn{ background:transparent; color:var(--brand-ink); border-color:rgba(255,255,255,.45); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; text-decoration:none; cursor:pointer; }
.btn.small{ min-height:36px; padding:4px 12px; font-size:.88rem; }
.btn.primary{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600; }
.btn.danger{ color:var(--err); border-color:var(--err); } .btn.ghost{ background:transparent; }
.btn.wide{ width:100%; } .btn.big{ min-height:56px; font-size:1.05rem; margin:12px 0 4px; }
.btn:disabled{ opacity:.55; cursor:default; }
.spinner{ width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.progress{ display:flex; gap:8px; align-items:center; min-height:1.6em; }

.field{ display:flex; flex-direction:column; gap:4px; }
.field > span{ font-size:.88rem; font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea{
  width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:inherit; font-size:16px; }
textarea{ resize:vertical; }
.field.low input, .field.low select, .field.low textarea{ background:var(--low); border-color:var(--low-line); }
.lowtag{ font-style:normal; font-size:.75rem; background:var(--low-line); color:#1f1a00; border-radius:6px; padding:1px 6px; }
fieldset{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:0; min-width:0; }
legend{ font-size:.88rem; font-weight:600; padding:0 4px; }
fieldset.need{ border-color:var(--low-line); background:var(--low); }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.radio{ display:flex; gap:8px; align-items:center; min-height:40px; }
.rules{ list-style:none; padding:0; margin:0; color:var(--muted); } .rules li.ok{ color:var(--ok); }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; }
.stat .label{ font-size:.82rem; color:var(--muted); } .stat .value{ font-size:1.3rem; font-weight:700; }
.stat.warn .value{ color:var(--accent); }
.list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.item{ display:flex; justify-content:space-between; gap:10px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:inherit; text-decoration:none; }
.item-main{ min-width:0; } .vendor{ font-weight:600; overflow-wrap:anywhere; }
.item-side{ text-align:right; flex:none; } .amount{ font-weight:700; white-space:nowrap; }
.comment{ color:var(--err); }
.chip{ display:inline-block; font-size:.74rem; padding:1px 8px; border-radius:999px; background:var(--chip); white-space:nowrap; }
.st-pending{ background:#fde7b0; color:#5b4300; } .st-returned{ background:#ffd6d2; color:#7a1a12; } .st-approved{ background:#d8ecff; color:#0d3c66; }
.st-registered{ background:#d9f2dc; color:#1b4d22; } .st-settled{ background:#e4e4e4; color:#333; }
.pay-tatekae{ background:#f3e3ff; color:#4a1d6b; }
.badge{ font-size:.8rem; background:var(--brand); color:var(--brand-ink); border-radius:999px; padding:0 8px; } .badge.warn{ background:var(--err); }
.empty{ text-align:center; padding:24px 0; }

.slot{ background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.preview{ min-height:200px; display:flex; align-items:center; justify-content:center; background:var(--chip); border-radius:10px; overflow:hidden; }
.preview img{ max-width:100%; max-height:45vh; display:block; }
.review{ display:grid; grid-template-columns:1fr; gap:16px; }
.receipt{ background:var(--chip); border-radius:12px; min-height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.receipt img{ max-width:100%; max-height:36vh; display:block; cursor:zoom-in; }
.receipt.zoom img{ max-height:none; cursor:zoom-out; }
@media (min-width:760px){ .review{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } .receipt{ position:sticky; top:70px; align-self:start; } .receipt img{ max-height:80vh; } }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; position:sticky; bottom:0; padding:10px 0 calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--bg) 30%); }
.actions .btn.primary{ flex:1 1 220px; }
.actions #form-errors{ flex:1 0 100%; margin:0 0 4px; padding:8px 8px 8px 24px; background:var(--panel); border:1px solid var(--err); border-radius:10px; }
dl.detail{ display:grid; grid-template-columns:7em 1fr; gap:6px 10px; margin:0; } dl.detail dt{ color:var(--muted); font-size:.88rem; } dl.detail dd{ margin:0; overflow-wrap:anywhere; }
.tbl-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; background:var(--panel); border-radius:12px; overflow:hidden; }
.tbl th, .tbl td{ padding:8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.92rem; }
.toast{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#222; color:#fff; padding:10px 16px; border-radius:10px; z-index:50; max-width:calc(100% - 32px); }
.modal-back{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:40; }
.modal{ background:var(--panel); border-radius:14px; padding:16px; width:min(460px, 100%); }
details summary{ cursor:pointer; min-height:36px; display:flex; align-items:center; }
@media (max-width:420px){ .grid3{ grid-template-columns:1fr 1fr; } }