:root{
  --bg:#f3f4ef;--surface:#fcfcfa;--ink:#262a20;--ink-2:#4b5043;--ink-3:#7a7f70;--line:#d4d7cb;--line-strong:#b9bdab;
  --accent:#667556;--accent-ink:#fcfcfa;
  --add-bg:#e1eedb;--add-fg:#4a7d4a;--del-bg:#f3e0dc;--del-fg:#a85a50;--chg-bg:#e6ead9;
  --add-text:rgba(74,125,74,.30);--del-text:rgba(168,90,80,.30);--active:rgba(102,117,86,.10);
  --mono:"Cascadia Mono","Consolas","BIZ UDGothic","MS Gothic","Noto Sans Mono CJK JP","Noto Sans JP",ui-monospace,monospace;
  --ui:"Yu Gothic UI","Meiryo UI","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1c1f19;--surface:#23271f;--ink:#e6e9de;--ink-2:#c5c9ba;--ink-3:#8f9484;--line:#383d31;--line-strong:#4d5344;
  --accent:#a3b38e;--accent-ink:#1c1f19;
  --add-bg:#26382a;--add-fg:#6fb078;--del-bg:#3b2926;--del-fg:#d08a80;--chg-bg:#2f3727;
  --add-text:rgba(111,176,120,.34);--del-text:rgba(208,138,128,.34);--active:rgba(163,179,142,.10);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1f19;--surface:#23271f;--ink:#e6e9de;--ink-2:#c5c9ba;--ink-3:#8f9484;--line:#383d31;--line-strong:#4d5344;
  --accent:#a3b38e;--accent-ink:#1c1f19;
  --add-bg:#26382a;--add-fg:#6fb078;--del-bg:#3b2926;--del-fg:#d08a80;--chg-bg:#2f3727;
  --add-text:rgba(111,176,120,.34);--del-text:rgba(208,138,128,.34);--active:rgba(163,179,142,.10);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--ui);display:flex;flex-direction:column;min-height:100dvh}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}

.hdr{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;margin:0;font-weight:600}
.logo{width:28px;height:28px;color:var(--ink);flex-shrink:0}
.brand-name{font-size:19px;letter-spacing:.04em}
.brand-sub{font-size:12px;font-weight:400;color:var(--ink-3)}
.privacy{margin:0 0 0 auto;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 10px}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:8px;width:34px;height:30px}
.icon-btn:hover{border-color:var(--line-strong)}

.toolbar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line)}
.grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.grp.opts{gap:4px 14px;margin-left:auto;font-size:13px;color:var(--ink-2)}
.opts label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.opts input{accent-color:var(--accent)}
.count{font-size:13px;color:var(--ink-2);margin-left:6px;min-width:6em}
button{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:4px 11px;line-height:1.4}
button:hover:not(:disabled){border-color:var(--line-strong)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.06)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.linklike{border:0;background:none;color:var(--accent);text-decoration:underline;padding:0 0 0 8px}

.heads{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);background:var(--surface)}
.head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:8px 14px;min-width:0}
.head+.head{border-left:1px solid var(--line)}
.fname{font-weight:600;min-width:0;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
select{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 4px;color:var(--ink)}
.head>#save-a,.head>#save-b{margin-left:auto}
.badge{font-size:11px;border:1px solid var(--line-strong);color:var(--ink-2);border-radius:999px;padding:0 8px}
.badge.warn{border-color:var(--del-fg);color:var(--del-fg)}
.notes{margin:0;padding:0 16px;min-height:0;font-size:12px;color:var(--del-fg)}
.notes:not(:empty){padding:5px 16px;border-bottom:1px solid var(--line)}

.stage{position:relative;flex:1;min-height:320px;display:flex;background:var(--surface);border-bottom:1px solid var(--line)}
.stage.dragging{outline:2px dashed var(--accent);outline-offset:-6px}
.view{flex:1;min-width:0;min-height:0;display:flex;position:absolute;inset:0}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px))}
.empty[hidden]{display:none}
.empty-box{pointer-events:auto;background:var(--surface);border:1px dashed var(--line-strong);border-radius:14px;padding:22px 28px;text-align:center;max-width:min(560px,90%)}
.empty-title{margin:0 0 6px;font-weight:600;font-size:16px}
.empty-sub{margin:0 0 14px;color:var(--ink-2);font-size:13px}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tips{margin:0;padding:8px 16px;font-size:12px;color:var(--ink-3)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(720px,92vw);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-size:13px;box-shadow:0 4px 18px #0004;z-index:20}
.toast[hidden]{display:none}
.toast[data-kind="error"]{background:#8d3d34;color:#fff}

.tz-foot{display:flex;justify-content:center;padding:22px 16px calc(28px + env(safe-area-inset-bottom))}
.tz-link{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:12px;line-height:1.4;--tz-gap:var(--surface);transition:border-color .15s,color .15s}
.tz-link:hover{border-color:var(--line-strong);color:var(--ink)}
.tz-mark{width:24px;height:24px;color:#8E5532;flex-shrink:0}
.tz-name{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.tz-sub{color:var(--ink-3)}
:root[data-theme="dark"] .tz-mark{color:#C9A063}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tz-mark{color:#C9A063}}

@media (max-width:760px){
  .brand-sub,.privacy{display:none}
  .grp.opts{margin-left:0}
  .heads{grid-template-columns:1fr}.head+.head{border-left:0;border-top:1px solid var(--line)}
}
@media print{.hdr,.toolbar,.heads,.tips,.tz-foot,.empty{display:none!important}}