/* 社内エビデンス提出・受領確認システム — 配色はマスコット（ちょこ=茶/青、ちっぷ=クリーム/赤、赤メガネ）由来 */
:root{
  --ground:#FBF5EC; --ground2:#F4EADA; --card:#FFFFFF; --card2:#FCF7EF;
  --ink:#3E322A; --ink-soft:#836F60; --line:#EBDFCC; --line-soft:#F2E9DA;
  --choko:#B27A4C; --chip:#E7B33F;
  --coral:#E1566B; --coral-deep:#B23A52; --coral-bg:#FBE7EB;
  --blue:#5B93D1;
  --good:#3C9E6E; --good-bg:#E4F2E9; --warn:#CF8A2A; --warn-bg:#FAEED6;
  --shadow:24px 30px 60px -34px rgba(120,84,44,.5);
  --shadow-sm:0 2px 10px -4px rgba(120,84,44,.32);
  --radius:18px;
  --font:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Yu Gothic UI","YuGothic","Meiryo","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#211913; --ground2:#2A2019; --card:#2F241D; --card2:#352920;
    --ink:#F4E8DA; --ink-soft:#C0AC98; --line:#43342A; --line-soft:#3A2C23;
    --choko:#C88E5C; --chip:#EFC155; --coral:#EC6C7F; --coral-deep:#F08A99; --coral-bg:#3D2229;
    --blue:#7DAEE0; --good:#5CBE8C; --good-bg:#213328; --warn:#E4AC55; --warn-bg:#382913;
    --shadow:24px 30px 64px -30px rgba(0,0,0,.6); --shadow-sm:0 2px 12px -6px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{ --ground:#FBF5EC; --ground2:#F4EADA; --card:#FFFFFF; --card2:#FCF7EF; --ink:#3E322A; --ink-soft:#836F60; --line:#EBDFCC; --line-soft:#F2E9DA; --choko:#B27A4C; --chip:#E7B33F; --coral:#E1566B; --coral-deep:#B23A52; --coral-bg:#FBE7EB; --blue:#5B93D1; --good:#3C9E6E; --good-bg:#E4F2E9; --warn:#CF8A2A; --warn-bg:#FAEED6; }
:root[data-theme="dark"]{ --ground:#211913; --ground2:#2A2019; --card:#2F241D; --card2:#352920; --ink:#F4E8DA; --ink-soft:#C0AC98; --line:#43342A; --line-soft:#3A2C23; --choko:#C88E5C; --chip:#EFC155; --coral:#EC6C7F; --coral-deep:#F08A99; --coral-bg:#3D2229; --blue:#7DAEE0; --good:#5CBE8C; --good-bg:#213328; --warn:#E4AC55; --warn-bg:#382913; }

/* ★アクセント層：画面ごとに --accent だけを変える。
   濃色/薄色は各所で color-mix(var(--accent), var(--ink)/var(--card)) を直接使う
   ＝画面色×ライト/ダーク の両方に自動追従（:root に派生トークンを持たせると焼き付くため持たない） */
:root{ --accent: var(--coral); }
body[data-screen="send"]    { --accent:#2F74BE; }  /* 送信＝青ベース */
body[data-screen="receive"] { --accent:#C42B7E; }  /* 受領＝ブーゲンビリアピンク */
body[data-screen="admin"]   { --accent:#4B4FC7; }  /* 管理＝インディゴブルー */

*{box-sizing:border-box}
[hidden]{display:none !important}   /* ★display指定のある要素でも hidden 属性を確実に効かせる（モーダル等） */
html,body{margin:0}
/* ★文字サイズ（大中小）＝全体ズーム方式（その1と統一・2026-07-20）。
   文字も余白もボタンも一緒に拡縮する＝レイアウトが崩れず・押しやすい（業務スタッフにやさしい）。
   中=100%（従来と一致）／小=90%／大=120%。data-fs は theme.js が html に付与。 */
html{font-size:16px}
html[data-fs="small"] body{zoom:0.9}
html[data-fs="large"] body{zoom:1.2}
body{
  font-family:var(--font); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--chip) 20%, transparent), transparent 60%),
    radial-gradient(900px 500px at 5% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    var(--ground);
  min-height:100vh;
}
a{color:var(--coral-deep)}
.inner{max-width:1080px; margin:0 auto; padding:0 20px 56px}

/* topbar */
.topbar{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--card) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar .row{max-width:1080px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; row-gap:9px}
.topright{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
@media(max-width:640px){
  .topbar .row{gap:9px}
  .brandtext small{display:none}            /* 狭い時はブランドをコンパクトに（正式名は残す） */
  .who{font-size:0.72rem}
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); text-decoration:none}
.brand img{height:30px; width:auto}
.brandtext{display:flex; flex-direction:column; line-height:1.15}
.brandtext b{font-size:0.9375rem}
.brandtext small{font-size:0.6875rem; font-weight:700; color:var(--ink-soft)}
.nav{display:flex; gap:6px; margin-left:8px; flex-wrap:wrap}
.nav a{font-size:0.8438rem; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:6px 12px; border-radius:999px}
.nav a.on{color:#fff; background:var(--accent)}
.nav a:hover:not(.on){background:var(--ground2); color:var(--ink)}
.spacer{flex:1}
.who{font-size:0.7812rem; color:var(--ink-soft)}
.who b{color:var(--ink)}
.logout{font-size:0.7812rem; font-weight:700; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.logout:hover{background:var(--ground2)}
/* ライト/ダーク切り替えボタン（色だけに頼らず絵文字＋title/aria-pressedで状態を明示） */
.themebtn{width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--card2);
  font-size:1rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink)}
.themebtn:hover{background:var(--ground2)}
.themebtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.win-bar .themebtn{margin-left:auto; width:28px; height:28px; font-size:0.875rem}
.win-bar .winprefs{margin-left:auto; display:flex; align-items:center; gap:8px}
.win-bar .winprefs .themebtn{margin-left:0}
/* 文字サイズ（小/中/大）セグメント。現在値は aria-pressed＋塗りで明示 */
.fsgroup{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card2)}
.fsbtn{border:0; background:transparent; cursor:pointer; color:var(--ink-soft); font-weight:800; line-height:1; padding:6px 9px}
.fsbtn[data-size="small"]{font-size:0.75rem}
.fsbtn[data-size="medium"]{font-size:0.875rem}
.fsbtn[data-size="large"]{font-size:1.0625rem}
.fsbtn:hover{background:var(--ground2); color:var(--ink)}
.fsbtn[aria-pressed="true"]{background:var(--accent); color:#fff}
.fsbtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ？ヘルプ ボタン＋この画面の説明モーダル */
.helpbtn{font-size:0.75rem; font-weight:800; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:999px; padding:6px 13px; cursor:pointer; white-space:nowrap}
.helpbtn:hover{background:color-mix(in srgb,var(--accent) 22%,var(--card))}
.helpbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
body.noscroll{overflow:hidden}
.help-ov{position:fixed; inset:0; z-index:100; background:rgba(38,24,16,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:helpin .16s ease}
@keyframes helpin{from{opacity:0} to{opacity:1}}
.help-card{width:100%; max-width:540px; max-height:86vh; overflow:auto; background:var(--card); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow)}
.help-head{display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,var(--card)), var(--card)); position:sticky; top:0}
.help-mi{height:52px; width:auto; flex:0 0 auto; filter:drop-shadow(0 3px 5px rgba(120,84,44,.28))}
.help-htext{flex:1; min-width:0}
.help-ey{font-size:0.6875rem; font-weight:800; letter-spacing:.08em; color:var(--ink-soft)}
.help-head h3{margin:0; font-size:1.125rem; font-weight:800; color:var(--ink)}
.help-x{flex:0 0 auto; border:0; background:transparent; font-size:1.05rem; color:var(--ink-soft); cursor:pointer; padding:6px 9px; border-radius:9px; line-height:1}
.help-x:hover{background:var(--ground2)}
.help-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.help-body{padding:18px 20px}
.help-lead{font-weight:800; margin:0 0 12px; font-size:0.9375rem}
.help-lead b, .help-steps b, .help-steps2 b, .help-sub b{color:var(--accent)}
.help-steps{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:8px; font-size:0.875rem; font-weight:600}
.help-steps2{margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:8px; font-size:0.875rem; font-weight:600}
.help-steps li::marker{color:var(--accent); font-weight:800}
.help-sub{margin:15px 0 0; font-size:0.8125rem; color:var(--ink-soft); font-weight:700; background:var(--card2);
  border:1px solid var(--line-soft); border-radius:12px; padding:11px 13px; line-height:1.9}
@media (prefers-reduced-motion: reduce){ .help-ov{animation:none} }

/* screen heading */
.screen-h{display:flex; align-items:center; gap:10px; margin:26px 2px 14px; font-size:1.0625rem; font-weight:800}
.screen-h .sn{font-size:0.6875rem; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--accent); padding:3px 10px; border-radius:999px}
.sub{color:var(--ink-soft); font-weight:600; font-size:0.8125rem}

/* flash */
.flash{margin:16px 0 0; padding:12px 16px; border-radius:12px; font-weight:700; font-size:0.875rem}
.flash.ok{background:var(--good-bg); color:var(--good); border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
.flash.error{background:var(--coral-bg); color:var(--coral-deep); border:1px solid color-mix(in srgb,var(--coral) 30%,transparent)}

/* window card */
.win{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.win-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--card2)}
.dot{width:11px; height:11px; border-radius:50%}
.dot.r{background:#F0837E}.dot.y{background:#F2C24B}.dot.g{background:#7FC98A}
.win-tab{margin-left:8px; font-size:0.8125rem; font-weight:700; color:var(--ink-soft)}
.win-body{padding:20px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:820px){ .grid2{grid-template-columns:1fr} }

/* mascot guide + bubble（★左ちょこ/右ちっぷ・ちょこ気持ち大きい・重なりはちっぷ前） */
.guide{display:flex; align-items:flex-end; gap:12px; margin-bottom:18px}
.guide.rev{flex-direction:row-reverse}
.guide img{height:60px; width:auto; flex:0 0 auto}
.guide img.choko{height:66px}
.guide img.chip{height:58px; position:relative; z-index:2}
.bubble{position:relative; background:color-mix(in srgb,var(--accent) 15%,var(--card)); color:color-mix(in srgb,var(--accent) 70%,var(--ink)); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); padding:10px 14px; border-radius:14px 14px 14px 4px; font-size:0.8438rem; font-weight:600}
@keyframes bpop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.bubble.pop{animation:bpop .25s ease}
.guide.rev .bubble{border-radius:14px 14px 4px 14px}
.bubble.blue{background:color-mix(in srgb,var(--blue) 15%,var(--card)); color:var(--blue); border-color:color-mix(in srgb,var(--blue) 35%,transparent)}

/* ★応援モード（cheer）：通常の案内はそのまま。その上で ちょこ・ちっぷが各自の小さい吹き出しで発言する。
   → 通常ガイド（.guide）の各キャラを .m-wrap で包み、キャラの上に一回り小さい吹き出しを乗せる。 */
.m-wrap{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px}
.cbubble{position:relative; max-width:190px; text-align:center; line-height:1.45;
  padding:6px 11px; border-radius:12px; font-size:0.75rem; font-weight:700; border:1px solid transparent}
.cbubble::after{content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-bottom:0}
/* ちょこ＝青系・ちっぷ＝ピンク系（少し濃いめ） */
.cbubble.blue{background:color-mix(in srgb,var(--blue) 26%,var(--card)); color:color-mix(in srgb,var(--blue) 85%,var(--ink)); border-color:color-mix(in srgb,var(--blue) 46%,transparent)}
.cbubble.blue::after{border-top-color:color-mix(in srgb,var(--blue) 26%,var(--card))}
.cbubble.pink{background:color-mix(in srgb,var(--coral) 26%,var(--card)); color:color-mix(in srgb,var(--coral) 82%,var(--ink)); border-color:color-mix(in srgb,var(--coral) 46%,transparent)}
.cbubble.pink::after{border-top-color:color-mix(in srgb,var(--coral) 26%,var(--card))}
.cbubble.pop{animation:bpop .25s ease}

/* forms */
.lab{font-size:0.75rem; font-weight:700; letter-spacing:.03em; color:var(--ink-soft); margin:0 0 6px}
.field, select.field, input.field{width:100%; border:1.5px solid var(--line); background:var(--card2); border-radius:12px; padding:11px 13px; font:inherit; font-size:0.875rem; color:var(--ink)}
select.field{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
input.field:focus, select.field:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.drop{margin-top:4px; border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--card2)); padding:18px; text-align:center}
.drop.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--card2))}
.drop .big{font-size:0.9062rem; font-weight:800; color:var(--ink)}
.drop .sm{font-size:0.75rem; color:var(--ink-soft); margin-top:3px}
input[type=file]{margin-top:12px; font:inherit; font-size:0.8125rem; color:var(--ink-soft); width:100%}

/* 送信候補ステージング（チェックしたものだけ送る） */
.stage{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.stage:empty{display:none}
.srow{display:flex; align-items:center; gap:10px; padding:8px 11px; background:var(--card2); border:1px solid var(--line); border-radius:10px}
.srow.off{opacity:.5}
.srow input[type=checkbox]{width:17px; height:17px; margin:0; flex:none; accent-color:var(--accent)}
.srow .fn{flex:1; min-width:0; font-size:0.8125rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srow .sz{font-size:0.6875rem; color:var(--ink-soft); flex:none}
.srow .rm{flex:none; border:0; background:transparent; color:var(--coral-deep); cursor:pointer; font-size:0.9rem; line-height:1; padding:2px 6px; border-radius:6px}
.srow .rm:hover{background:var(--coral-bg)}
.stage-actions{display:flex; align-items:center; gap:14px; margin-top:9px}
.stage-actions .cnt{font-size:0.8125rem; font-weight:700; color:var(--ink-soft)}
.linkbtn{border:0; background:transparent; color:var(--coral-deep); font-weight:700; cursor:pointer; text-decoration:underline; font-size:0.8125rem; padding:0}
.btn:disabled{opacity:.5; cursor:not-allowed}
.auto{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:16px; padding:14px 16px; background:var(--ground2); border-radius:13px}
@media (max-width:440px){ .auto{grid-template-columns:1fr} }
.auto .k{font-size:0.6875rem; color:var(--ink-soft); font-weight:700}
.auto .v{font-size:0.875rem; font-weight:700; color:var(--ink); margin-top:1px}
.auto .tag{font-size:0.625rem; color:var(--good); background:var(--good-bg); padding:1px 7px; border-radius:999px; margin-left:6px; font-weight:800; vertical-align:middle}
.btn{margin-top:16px; width:100%; border:0; cursor:pointer; font:inherit; font-size:1rem; font-weight:800; color:#fff; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,white 8%),var(--accent)); padding:13px; border-radius:13px; box-shadow:0 10px 22px -12px var(--accent)}
.btn:hover{filter:brightness(1.03)}

/* 会社ロゴ */
.clogo{width:30px; height:30px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid var(--line); flex:0 0 auto; padding:2px}
.clogo.big{width:40px; height:40px}
.clogo.ph{display:inline-grid; place-items:center; font-size:0.625rem; font-weight:800; color:var(--ink-soft); background:var(--card2); overflow:hidden}
.co-row{display:flex; align-items:center; gap:10px}
.co-row .field{flex:1}
/* ロゴアップロード（管理画面・クリックで差し替え） */
.logoform{display:flex; flex:0 0 auto; margin:0}
.logo-up{cursor:pointer; display:inline-flex; position:relative}
.logo-up:hover .clogo{outline:2px solid var(--accent); outline-offset:1px}
.logo-up::after{content:"✎"; position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%; background:var(--accent); color:#fff; font-size:0.5625rem; display:grid; place-items:center; opacity:0; transition:opacity .12s}
.logo-up:hover::after{opacity:1}
.clogo.gh{visibility:hidden}

/* 受領コメント欄 */
.ackform{display:flex; align-items:center; gap:8px}
.ackform .cmt{width:200px; border:1.5px solid var(--line); background:var(--card); border-radius:9px; padding:7px 10px; font:inherit; font-size:0.7812rem; color:var(--ink)}
.ackform .cmt:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
@media(max-width:560px){ .ackform{flex-wrap:wrap; justify-content:flex-end} .ackform .cmt{width:100%} }

/* filename preview (送信画面) */
.preview{margin-top:16px}
.preview .cap{font-size:0.6875rem; font-weight:800; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; margin-bottom:6px}
.fnbox{font-variant-numeric:tabular-nums; font-size:0.8438rem; font-weight:700; color:var(--ink); background:var(--card2); border:1.5px solid var(--accent); border-radius:11px; padding:12px 14px; word-break:break-all; line-height:1.9}
.fnbox .p{color:color-mix(in srgb,var(--accent) 70%,var(--ink))} .fnbox .id{color:var(--blue)} .fnbox .dim{color:var(--ink-soft)}

/* lists / receipt status */
.sect-h{display:flex; align-items:center; gap:9px; margin:2px 0 12px}
.sect-h h3{font-size:0.9375rem; margin:0}
.sect-h .n{font-size:0.75rem; color:var(--ink-soft)}
.list{display:flex; flex-direction:column; gap:9px; max-height:60vh; overflow-y:auto; scrollbar-gutter:stable}
.item{display:flex; align-items:center; gap:12px; background:var(--card2); border:1px solid var(--line-soft); border-radius:12px; padding:11px 13px}
.item .meta{flex:1; min-width:0}
.item .n1{font-size:0.8125rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .n2{font-size:0.7188rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-top:2px}
.pill{font-size:0.7188rem; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; border:0}
.pill.warn{color:var(--warn); background:var(--warn-bg)}
.pill.good{color:var(--good); background:var(--good-bg)}
.pill.info{color:var(--blue); background:color-mix(in srgb,var(--blue) 15%,var(--card))}
.pill.bad{color:var(--coral-deep); background:var(--coral-bg)}
.pill .d{width:6px; height:6px; border-radius:50%; background:currentColor}
.btn-r{font:inherit; font-size:0.7812rem; font-weight:800; color:#fff; background:var(--good); border:0; border-radius:999px; padding:7px 15px; cursor:pointer; white-space:nowrap}
.btn-r:hover{filter:brightness(1.05)}
.btn-r.danger{background:var(--coral)}
.empty{color:var(--ink-soft); font-size:0.8125rem; text-align:center; padding:22px}

/* tiles */
.tiles{display:flex; gap:10px; margin-bottom:14px}
.tile{flex:1; background:var(--card2); border:1px solid var(--line-soft); border-radius:13px; padding:12px 14px}
.tile .num{font-size:1.625rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.tile .t{font-size:0.7188rem; color:var(--ink-soft); margin-top:5px; font-weight:700}
.tile.warn .num{color:var(--warn)} .tile.good .num{color:var(--good)}

/* admin table */
.tbl-wrap{overflow:auto; max-height:68vh; border:1px solid var(--line-soft); border-radius:12px; margin-bottom:16px}
.tbl{width:100%; border-collapse:collapse; font-size:0.8125rem; min-width:560px}
.tbl th{text-align:left; font-size:0.6875rem; letter-spacing:.03em; color:var(--ink-soft); font-weight:800; padding:10px 14px; background:var(--card2); border-bottom:1px solid var(--line-soft); white-space:nowrap; position:sticky; top:0; z-index:1}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink); white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl td.id{color:var(--ink-soft); font-variant-numeric:tabular-nums}
.rtag{font-size:0.7188rem; font-weight:800; padding:2px 10px; border-radius:999px; white-space:nowrap}
.rtag.send{color:var(--coral-deep); background:var(--coral-bg)}
.rtag.both{color:var(--good); background:var(--good-bg)}
.rtag.receive{color:var(--warn); background:var(--warn-bg)}
.rtag.admin{color:var(--blue); background:color-mix(in srgb,var(--blue) 16%,var(--card))}
.rtag.administrator{color:#fff; background:var(--accent)}
.set-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.set-tile{background:var(--card2); border:1px solid var(--line-soft); border-radius:13px; padding:14px 16px}
.set-tile .st-k{font-size:0.6875rem; font-weight:800; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase}
.set-tile .st-v{font-size:0.875rem; font-weight:700; color:var(--ink); margin-top:6px}
.set-tile .ok{color:var(--good); font-weight:800}
.set-tile .todo{color:var(--warn); font-weight:800}
.set-tile.link{text-decoration:none; color:inherit; display:block; transition:border-color .12s}
.set-tile.link:hover{border-color:var(--accent)}
.steps{margin:8px 0 0; padding-left:20px; font-size:0.8438rem; color:var(--ink); line-height:1.9}
.steps li{margin:2px 0}

/* history filter */
.hfilter{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:6px}
.hfilter input[type=search]{flex:1; min-width:200px}
.hfilter .tilde{color:var(--ink-soft)}
.btn-s{font:inherit; font-size:0.8125rem; font-weight:800; color:#fff; background:var(--accent); border:0; border-radius:10px; padding:8px 16px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn-s:hover{filter:brightness(1.04)}
.btn-s.csv{background:var(--good)}
.btn-ghost.sm{padding:7px 12px; font-size:0.8125rem}
.clogo.sm{width:20px; height:20px; vertical-align:middle; display:inline-block; padding:1px}

/* user list filter */
.ufilter{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.ufield{border:1.5px solid var(--line); background:var(--card2); border-radius:10px; padding:8px 12px; font:inherit; font-size:0.8125rem; color:var(--ink)}
.ufield:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
#uq{flex:1; min-width:180px}

/* admin actions */
.add-btn{font-size:0.8125rem; font-weight:800; color:#fff; background:var(--accent); text-decoration:none; padding:8px 14px; border-radius:999px; white-space:nowrap}
.add-btn:hover{filter:brightness(1.04)}
.tbl tr.off td{opacity:.5}
.tbl td.ops{display:flex; gap:6px; align-items:center}
.op{font:inherit; font-size:0.75rem; font-weight:700; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); background:var(--card); padding:5px 11px; border-radius:8px; cursor:pointer; white-space:nowrap}
.op:hover{background:var(--ground2); color:var(--ink)}
.op.danger{color:var(--coral-deep); border-color:color-mix(in srgb,var(--coral) 35%,var(--line))}

/* user form */
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
@media (max-width:520px){ .frow2{grid-template-columns:1fr} }
.chk{display:flex; align-items:center; gap:8px; font-size:0.875rem; color:var(--ink); padding:6px 0; cursor:pointer}
.chk input{width:17px; height:17px; accent-color:var(--accent)}
.chk .cname{color:var(--ink-soft); font-size:0.7812rem}
.chk.allco{margin-bottom:4px}
.co-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2px 14px; padding:10px 14px; background:var(--card2); border:1px solid var(--line-soft); border-radius:12px}
.hint{font-size:0.75rem; color:var(--ink-soft); margin-top:6px}
.form-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:22px}
.btn-ghost{font:inherit; font-size:0.875rem; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:11px 18px; border-radius:12px; border:1px solid var(--line)}
.btn-ghost:hover{background:var(--ground2); color:var(--ink)}

/* master editors (会社/拠点) */
.mlist{display:flex; flex-direction:column; gap:8px}
.mrow{display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--line-soft); border-radius:11px; padding:8px 12px}
.mrow.add{background:color-mix(in srgb,var(--accent) 6%,var(--card2)); border-style:dashed}
.mrow.head{background:transparent; border:0; padding:0 12px}
.mini{border:1.5px solid var(--line); background:var(--card); border-radius:9px; padding:8px 10px; font:inherit; font-size:0.8438rem; color:var(--ink)}
.mini:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.mini.key{width:96px; font-weight:700}
.mini.name{flex:1; min-width:120px}
.mini.sort{width:74px}
.mini.ghost{border:0; background:transparent; color:var(--ink-soft); font-size:0.6875rem; font-weight:800; letter-spacing:.04em; padding:0 10px; pointer-events:none}
.mrow .add-btn{margin-left:auto}
.delform{display:flex; margin:0 0 0 auto}
.addhint{margin-left:auto; font-size:0.6875rem; color:var(--ink-soft); align-self:center}

/* login screen */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:28px 18px}
.login-card{width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.login-body{padding:28px 30px 30px; text-align:center; display:flex; flex-direction:column; align-items:center}
.login-body .m{height:96px; width:auto; filter:drop-shadow(0 6px 10px rgba(120,84,44,.3))}
.login-body .brand-t{font-size:1.125rem; font-weight:800; margin:8px 0 12px}
.login-body .brand-t .fam{display:block; font-size:0.75rem; font-weight:700; color:var(--ink-soft); margin-bottom:2px}
.login-form{width:100%; text-align:left; margin-top:6px}
.login-form .lab{margin-top:12px}
/* パスワード表示トグル */
.pw-wrap{position:relative}
.pw-wrap .field{padding-right:46px}
.pw-toggle{position:absolute; right:7px; top:50%; transform:translateY(-50%); border:0; background:transparent; cursor:pointer;
  font-size:1.15rem; line-height:1; padding:6px 8px; border-radius:9px; color:var(--ink-soft)}
.pw-toggle:hover{background:var(--ground2)}
.pw-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.foot{margin-top:20px; text-align:center; font-size:0.75rem; color:var(--ink-soft)}

/* タイトルの両キャラ（左ちょこ・右ちっぷ／ちょこ気持ち大きい／重なりはちっぷ前） */
.mpair{display:inline-flex; align-items:flex-end; flex:0 0 auto}
.mpair img{width:auto; display:block; filter:drop-shadow(0 3px 5px rgba(120,84,44,.28))}
.mpair .choko{height:36px; position:relative; z-index:1}
.mpair .chip{height:32px; position:relative; z-index:2; margin-left:-10px}   /* ちっぷ=ちょこの約88% */
.login-body .mpair .choko{height:98px}
.login-body .mpair .chip{height:86px; margin-left:-18px}                     /* 約88%で統一 */