:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --r:16px;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#e11d48;
  --ok:#16a34a;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  background:var(--bg);
  color:var(--text);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.top{position:sticky;top:0;z-index:20;background:rgba(246,247,251,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__inner{max-width:980px;margin:0 auto;padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.title{font-weight:900;letter-spacing:.02em}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.top__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.top__actions .btn{padding:8px 12px;font-size:13px;min-width:112px;flex:0 0 auto;position:relative;z-index:21}
.toolbarPanel{position:relative;z-index:15;max-width:980px;margin:0 auto 10px;padding:12px;display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.toolbarPanel[hidden]{display:none!important}
.toolbarPanel--search{grid-template-columns:1fr 1fr}
.toolbarPanel--menu{grid-template-columns:1fr;max-width:420px}
.toolbarPanel .field{margin:0}
.devOnly{display:none}

.wrap{max-width:980px;margin:14px auto;padding:0 16px 60px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 16px 10px}
.card__hd h2{margin:0;font-size:16px}
.hint{font-size:12px;color:var(--muted)}

.form{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted)}

input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  padding:12px 12px;
  font-size:16px;
  background:#fff;
  outline:none;
}
textarea{resize:vertical;min-height:44px}
input:focus,select:focus,textarea:focus{border-color:rgba(37,99,235,.65);box-shadow:0 0 0 4px rgba(37,99,235,.12)}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn:hover{border-color:rgba(37,99,235,.4)}
.btn--primary{background:linear-gradient(180deg, var(--primary), var(--primary2));border-color:rgba(37,99,235,.5);color:#fff}
.btn--ghost{background:transparent}
.btn--danger{background:rgba(225,29,72,.06);border-color:rgba(225,29,72,.22);color:var(--danger)}
.btn--sm{padding:8px 10px;font-size:13px;font-weight:800}

.link{border:none;background:transparent;color:var(--primary);padding:0;font-weight:800;cursor:pointer}
.link:hover{text-decoration:underline}
.mini{margin-top:4px}

.toast{display:none;margin:0 16px 12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);font-size:13px}
.toast--ok{display:block;background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.20);color:var(--ok)}
.toast--warn{display:block;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.25);color:#8a5a00}
.toast--err{display:block;background:rgba(225,29,72,.08);border-color:rgba(225,29,72,.20);color:var(--danger)}

.labelRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.weights{display:flex;flex-direction:column;gap:10px}
.weightItem{display:flex;gap:10px;align-items:center}
.weightItem input{flex:1}

.total{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:12px;border-radius:14px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.18)}
.total__label{font-size:12px;color:var(--muted);font-weight:800}
.total__value{font-size:18px;font-weight:900}

.ocrPanel{
  margin:0 16px 16px;
  padding:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ocrPanel__preview{
  width:100%;
  min-height:180px;
  border-radius:14px;
  border:1px dashed rgba(15,23,42,.18);
  background:linear-gradient(180deg, rgba(37,99,235,.03), rgba(37,99,235,.01));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ocrPanel__preview img{
  width:100%;
  max-height:320px;
  object-fit:contain;
  display:block;
}
.ocrPanel__meta,.ocrPanel__results{display:flex;flex-direction:column;gap:10px}
.ocrCandidates{display:flex;flex-direction:column;gap:10px}
.ocrCandidate{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.ocrCandidate__info{display:flex;flex-direction:column;gap:6px}
.ocrCandidate__value input{width:100%}
.ocrCandidate input{margin:0}
.ocrCandidate__del{align-self:stretch}

.ocrBadge{font-size:12px;color:var(--muted);font-weight:800}

.filters{padding:0 16px 12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.summary{padding:0 16px 12px;color:var(--muted);font-size:13px}
.summaryGrid{display:grid;grid-template-columns:1fr;gap:10px}
.summaryCard{border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:12px;background:rgba(37,99,235,.03)}
.summaryCard--list{display:flex;flex-direction:column;gap:8px}
.summaryCard__label{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.summaryCard__value{font-size:16px;font-weight:900;margin-top:4px}
.summaryCard__meta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.summaryCard__list{display:flex;flex-direction:column;gap:8px}
.summaryLine{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(15,23,42,.08);font-size:13px;font-weight:800;color:var(--text)}
.summaryLine__count{color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.summaryEmpty{padding:10px 12px;border-radius:12px;background:#fff;border:1px dashed rgba(15,23,42,.16);font-size:13px;color:var(--muted);font-weight:700}

.list{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.item{border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;background:#fff}
.item--empty{color:var(--muted);font-weight:800;text-align:center;padding:18px 12px}
.item__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.item__body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.item__titleRow,.item__metaRow{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.item__title{font-weight:900;font-size:15px;line-height:1.35}
.item__pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(37,99,235,.08);color:var(--primary2);font-size:12px;font-weight:800}
.item__metaRow{font-size:12px;color:var(--muted);justify-content:space-between}
.item__total{font-size:18px;font-weight:900;color:var(--text)}
.item__memo{font-size:12px;color:var(--muted);line-height:1.5;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.item__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}

.dialog::backdrop{background:rgba(2,6,23,.45)}
.dialog{border:none;background:transparent;padding:0}
.dialog__panel{width:min(760px, calc(100vw - 24px));border-radius:18px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.dialog__hd{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.dialog__hd h3{margin:0;font-size:16px}
.dialog__bd{padding:12px 14px 0}
.dialog__ft{display:flex;justify-content:flex-end;gap:10px;padding:12px 14px 14px}
.iconBtn{border:1px solid rgba(15,23,42,.14);background:#fff;color:var(--text);border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:18px;line-height:1;font-weight:900}
.iconBtn:hover{border-color:rgba(37,99,235,.4)}

@media (max-width: 720px){
  .top__inner{flex-direction:column}
  .top__actions{justify-content:flex-start;width:100%}
  .top__actions .btn{flex:1 1 112px;min-width:0}
  .toolbarPanel--search,.toolbarPanel--menu{grid-template-columns:1fr}
  .toolbarPanel--menu{max-width:none}
  .row{grid-template-columns:1fr}
  .item__top{flex-direction:column}
  .item__metaRow{align-items:flex-start}
  .ocrCandidate{grid-template-columns:1fr}
}