:root{color-scheme:light;--ink:#191919;--muted:#6f6d67;--line:#deded9;--surface:#f7f7f5;--ok:#1f5f3a;--ok-bg:#edf5ef;--warn:#8a4b0f;--warn-bg:#fbf3e9;--ng:#9b1c1c;--ng-bg:#fbeeee;--wait:#23456e;--wait-bg:#edf2f8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,"Hiragino Sans",Meiryo,sans-serif}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.4}
code{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);padding:1px 5px;border-radius:4px}
.page{max-width:960px;margin:auto;padding:0 40px;min-height:100vh;display:flex;flex-direction:column}
.demo-bar{margin:0 -40px;padding:8px 40px;background:var(--ink);color:#fff;font-size:12px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.demo-bar .link{color:#fff}
header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
.brand{min-height:44px;display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;text-decoration:none;white-space:nowrap}
.mark{width:28px;height:30px;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font:700 23px Georgia,serif;box-shadow:2px 2px 0 var(--ink);margin-right:4px}
.brand-sub{font-size:13px;font-weight:400;padding-left:11px;border-left:1px solid var(--line)}
.who{display:flex;align-items:center;gap:8px;font-size:13px;margin:0}
.switch{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.switch select{min-height:44px;font-size:16px;color:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:0 8px;background:#fff;max-width:56vw}
.link{background:none;border:0;padding:0 4px;min-height:44px;text-decoration:underline;font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs a{flex:0 0 auto;min-height:48px;display:flex;align-items:center;padding:0 14px;text-decoration:none;font-size:14px;color:var(--muted);border-bottom:2px solid transparent}
.tabs a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
main{flex:1;padding:24px 0 48px}
main.narrow{max-width:440px}
h1{font-size:26px;line-height:1.4;margin:0 0 16px;word-break:auto-phrase;text-wrap:balance}
h2{font-size:16px;margin:32px 0 10px}
.lead,.muted{color:var(--muted);font-size:14px}
.calm{color:var(--muted);font-size:14px;padding:14px 16px;background:var(--surface);border-radius:10px;margin:0}
.empty{color:var(--muted);font-size:14px;padding:16px 0}
.num{font-variant-numeric:tabular-nums}
footer{border-top:1px solid var(--line);padding:16px 0 28px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:10px;background:#fff;text-decoration:none;font-size:15px;font-weight:700;white-space:nowrap}
.btn.primary{background:var(--ink);color:#fff}
.btn.danger{border-color:var(--ng);color:var(--ng)}
.btn.small{min-height:44px;padding:0 12px;font-size:13px}
.btn:focus-visible,.tabs a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.list a:focus-visible,.card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.turn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--ink);border-radius:12px;text-decoration:none;min-height:72px}
.card b{font-size:30px;line-height:1}
.card span{font-weight:700;font-size:15px}
.card small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}
.row-head h2,.row-head p{margin:0}
.sum{font-size:14px}

.list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px;min-height:64px;text-decoration:none}
.list a:hover{background:var(--surface)}
.l-main{min-width:0;display:flex;flex-direction:column}
.l-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-main small{color:var(--muted);font-size:12px}
.l-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}

.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:1px 10px;border:1px solid var(--line);background:#fff;color:var(--muted);white-space:nowrap}
.badge.wait{border-color:var(--wait);color:var(--wait);background:var(--wait-bg)}
.badge.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.badge.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.badge.ng{border-color:var(--ng);color:var(--ng);background:var(--ng-bg)}
.badge.done{border-color:var(--ink);color:#fff;background:var(--ink)}

.alert{border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);padding:10px 14px;border-radius:10px;font-size:14px}
.form{display:flex;flex-direction:column;gap:16px;max-width:620px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.act label{font-size:14px;font-weight:700}
.field small{color:var(--muted);font-size:12px}
input:not([type=file]),select,textarea{width:100%;min-height:48px;font-size:16px;border:1px solid #9d9b94;border-radius:10px;padding:10px 12px;background:#fff}
textarea{resize:vertical;line-height:1.5}
input[type=file]{font-size:15px;padding:10px;border:1px dashed #9d9b94;border-radius:10px;width:100%;min-height:56px;background:var(--surface)}
input[type=file]::file-selector-button{min-height:40px;margin-right:10px;border:1px solid var(--ink);background:#fff;border-radius:8px;padding:0 12px;font-weight:700}
.suffix{display:flex;align-items:center;gap:8px}
.suffix span{color:var(--muted)}
.has-error input,.has-error select,.has-error textarea{border-color:var(--ng);border-width:2px}
.error{color:var(--ng);font-size:13px;margin:0}
.current{font-size:13px;color:var(--muted);margin:0}
details{border:1px solid var(--line);border-radius:10px;padding:0 14px}
details[open]{padding-bottom:14px}
summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-size:14px;font-weight:700}
details .grid2,details>.field{margin-top:8px}
.actions{display:flex;flex-wrap:wrap;gap:10px}

.state{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.state .badge{font-size:14px;padding:3px 14px}
.reason{font-size:14px}
.act{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--ink);border-radius:12px;margin-bottom:20px;max-width:620px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start}
.receipt img{display:block;width:100%;max-height:520px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv th{text-align:left;font-weight:400;color:var(--muted);width:7.5em;padding:9px 8px 9px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.kv td{padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.kv.small{margin-top:16px;font-size:13px;max-width:420px}
.history{margin:0;padding-left:20px;font-size:14px}
.history li{padding:3px 0}
.message{max-width:560px}

.checklist{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.checklist li.ok{border-color:var(--ok)}
.checklist li>span{font-weight:700;width:1.2em}
.checklist p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.linkbox{border:2px solid var(--ink);border-radius:12px;padding:14px 16px;margin:16px 0}
.linkbox p{margin:0 0 8px;font-size:14px}
.table-wrap{overflow-x:auto}
.members{width:100%;border-collapse:collapse;font-size:14px}
.members th,.members td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.members small{display:block;color:var(--muted);font-size:12px}
.members form{margin:0}

@media (max-width:640px){
  .page{padding:0 16px}
  .demo-bar{margin:0 -16px;padding:8px 16px}
  header{min-height:64px}
  .brand{font-size:17px}
  .brand-sub{padding-left:8px}
  .switch>span,.switch{font-size:0}
  .switch select{font-size:16px;max-width:52vw}
  h1{font-size:22px}
  .grid2,.detail{grid-template-columns:1fr}
  .actions .btn{flex:1 1 auto}
  .row-head{flex-wrap:wrap}
}