*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:    #2563eb;
  --blue-lt: #eff6ff;
  --green:   #16a34a;
  --red:     #dc2626;
  --yellow:  #d97706;
  --gray-50: #f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-400:#9ca3af;
  --gray-600:#4b5563;
  --gray-800:#1f2937;
  --radius:  6px;
  --shadow:  0 1px 3px rgba(0,0,0,.12);
}

body { font-family: "Meiryo UI", "メイリオ", sans-serif; font-size: 14px;
       background: var(--gray-50); color: var(--gray-800); }

/* ─── Header ─── */
header { background: var(--blue); color: #fff; padding: 0 20px;
         display: flex; align-items: center; gap: 24px; height: 52px;
         position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); }
header h1 { font-size: 16px; font-weight: 700; white-space: nowrap; }
nav { display: flex; gap: 2px; }
.tab-btn { background: transparent; border: none; color: rgba(255,255,255,.75);
           padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
           font-size: 13px; transition: background .15s; white-space: nowrap; }
.tab-btn:hover   { background: rgba(255,255,255,.15); color: #fff; }
.tab-btn.active  { background: rgba(255,255,255,.25); color: #fff; font-weight: 600; }

/* ─── Main ─── */
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }

/* ─── Cards ─── */
.card { background: #fff; border: 1px solid var(--gray-200);
        border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { padding: 14px 16px; border-bottom: 1px solid var(--gray-200);
               display: flex; align-items: center; gap: 10px; }
.card-header h2 { font-size: 15px; font-weight: 600; }
.card-body { padding: 16px; }

/* ─── Buttons ─── */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  border: none; border-radius: var(--radius); cursor: pointer; font-size: 13px;
  padding: 7px 16px; font-weight: 500; transition: opacity .15s; display: inline-flex;
  align-items: center; gap: 5px; white-space: nowrap; }
.btn-primary   { background: var(--blue);  color: #fff; }
.btn-secondary { background: var(--gray-200); color: var(--gray-800); }
.btn-danger    { background: var(--red);   color: #fff; }
.btn-ghost     { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
button:hover { opacity: .85; }
button:disabled { opacity: .45; cursor: default; }

/* ─── Forms ─── */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 12px; color: var(--gray-600); font-weight: 500; }
input, select, textarea {
  border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 6px 10px;
  font-size: 13px; font-family: inherit; color: var(--gray-800);
  background: #fff; outline: none; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
select { cursor: pointer; }

/* ─── Tables ─── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: var(--gray-50); color: var(--gray-600); font-weight: 600;
     padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--gray-200);
     white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--blue-lt); }
.tnum { font-variant-numeric: tabular-nums; text-align: right; }

/* ─── Badges ─── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px;
         font-size: 11px; font-weight: 600; }
.badge-exact  { background: #dcfce7; color: #166534; }
.badge-fuzzy  { background: #fef9c3; color: #854d0e; }
.badge-unknown{ background: #fee2e2; color: #991b1b; }

/* ─── Import ─── */
.drop-zone { display: block; border: 2px dashed var(--gray-200); border-radius: var(--radius);
             padding: 40px; text-align: center; cursor: pointer; transition: all .2s;
             color: var(--gray-400); }
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--blue); background: var(--blue-lt); color: var(--blue); }
.drop-zone input { display: none; }
.drop-zone p { margin-top: 8px; font-size: 13px; }

.import-row { border: 1px solid var(--gray-200); border-radius: var(--radius);
              padding: 12px 14px; margin-bottom: 8px; }
.import-row.excluded { opacity: .5; background: var(--gray-50); }
.import-row-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-summary { font-weight: 600; font-size: 14px; flex: 1; min-width: 150px; }
.import-date { color: var(--gray-600); font-size: 12px; }
.import-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.import-controls select { min-width: 200px; }

/* ─── Summary ─── */
.summary-table th { position: sticky; top: 52px; background: var(--gray-50); z-index: 10; }
.summary-table .total-row td { font-weight: 700; background: var(--blue-lt); }
.inner { color: var(--green); }
.outer { color: var(--blue); }

/* ─── Home stats ─── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--gray-200);
             border-radius: var(--radius); padding: 16px; }
.stat-card .val { font-size: 28px; font-weight: 700; color: var(--blue); }
.stat-card .lbl { font-size: 12px; color: var(--gray-600); margin-top: 2px; }

/* ─── Toast ─── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
         background: var(--gray-800); color: #fff; padding: 10px 20px;
         border-radius: 20px; font-size: 13px; opacity: 0;
         transition: opacity .3s; pointer-events: none; z-index: 9999; white-space: nowrap; }
#toast.show { opacity: 1; }

/* ─── Modal ─── */
#modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
                 display: flex; align-items: center; justify-content: center; }
#modal-overlay.hidden { display: none; }
#modal-box { background: #fff; border-radius: 8px; padding: 24px; min-width: 320px;
             max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
#modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ─── Misc ─── */
.text-sm    { font-size: 12px; color: var(--gray-600); }
.mt-4       { margin-top: 16px; }
.flex       { display: flex; }
.gap-2      { gap: 8px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden     { display: none !important; }
.empty-msg  { color: var(--gray-400); text-align: center; padding: 40px; }
.spinner    { border: 3px solid var(--gray-200); border-top-color: var(--blue);
              width: 24px; height: 24px; border-radius: 50%;
              animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }