:root{
  --bg:#F3F5F7; --surface:#FFFFFF; --surface2:#EBEFF3;
  --ink:#1B2530; --muted:#5C6B7A; --line:#DCE2E9;
  --accent:#2C4E9E; --accent-ink:#FFFFFF; --accent-soft:#E4EAF7;
  --ok:#23795A; --ok-soft:#E1F0E9; --warn:#B4552D; --warn-soft:#F6E8E0;
  --code-bg:#EEF1F5;
  --shadow:0 1px 2px rgba(27,37,48,.06),0 4px 14px rgba(27,37,48,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161C; --surface:#1A212B; --surface2:#222B37;
    --ink:#E7ECF2; --muted:#93A1B2; --line:#2A3441;
    --accent:#7C9BE8; --accent-ink:#0F1725; --accent-soft:#243553;
    --ok:#5FBF98; --ok-soft:#1D3A30; --warn:#E09A76; --warn-soft:#3F281C;
    --code-bg:#232C38;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:15px; line-height:1.7; margin:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:920px; margin:0 auto; padding:24px 20px 80px}
header.app{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px}
h1{font-size:24px; font-weight:700; letter-spacing:.02em; margin:0}
.tagline{color:var(--muted); font-size:13px; margin:0 0 20px}
.spacer{flex:1}
.userbox{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:20px 22px; margin-bottom:18px;
}
.step-head{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.step-num{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  background:var(--accent); color:var(--accent-ink);
  border-radius:6px; padding:2px 8px; letter-spacing:.08em; flex:none;
}
h2{font-size:17px; font-weight:700; margin:0; letter-spacing:.02em}
.hint{color:var(--muted); font-size:13px; margin:2px 0 14px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
button{
  font:inherit; font-weight:500; cursor:pointer;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface2); color:var(--ink); padding:7px 14px;
  transition:filter .12s;
}
button:hover{filter:brightness(.96)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.dz:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
button.ghost{background:transparent}
button:disabled{opacity:.45; cursor:default}
input[type=text],input[type=password],input[type=date],select,textarea{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px;
}
textarea{width:100%; min-height:120px; resize:vertical}
label.fld{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted)}
.dz{
  border:1.5px dashed var(--line); border-radius:10px; background:var(--surface2);
  padding:22px; text-align:center; color:var(--muted); cursor:pointer;
  transition:border-color .12s, background .12s;
}
.dz.drag{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.dz strong{color:var(--ink)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto; margin-top:12px}
.chip{
  display:inline-block; font-size:12px; border-radius:999px; padding:2px 10px;
  background:var(--surface2); color:var(--muted); white-space:nowrap;
}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.accent{background:var(--accent-soft); color:var(--accent)}
code.name{
  font-family:"IBM Plex Mono",monospace; font-size:13px;
  background:var(--code-bg); border-radius:6px; padding:2px 8px;
  white-space:nowrap;
}
.newname{color:var(--accent); font-weight:500}
.empty{color:var(--muted); font-size:13px; padding:14px 4px; text-align:center}
.del{
  border:none; background:none; color:var(--muted); font-size:16px; line-height:1;
  padding:4px 6px; border-radius:6px;
}
.del:hover{color:var(--warn); background:var(--warn-soft); filter:none}
details{margin-top:12px}
summary{cursor:pointer; color:var(--muted); font-size:13px; font-weight:500}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:500;
  border-radius:8px; padding:9px 18px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s; max-width:90vw; z-index:50;
}
.toast.show{opacity:1}
.count{font-size:12px; color:var(--muted)}
.bar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
select.assign{max-width:260px}
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tabs button{border-radius:999px; padding:6px 16px}
.tabs button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.login-card{max-width:380px; margin:12vh auto 0}
.login-card h1{text-align:center; margin-bottom:4px}
.login-card .tagline{text-align:center}
.login-card form{display:flex; flex-direction:column; gap:12px}
.err{color:var(--warn); font-size:13px; min-height:1.2em; margin:0}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }