* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Yu Gothic UI', 'Meiryo', sans-serif;
  background: #f1f5f9;
  color: #1e293b;
}
.container { max-width: 1000px; margin: 0 auto; padding: 16px; }

/* ヘッダー */
.navbar {
  background: #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.navbar .brand { font-weight: bold; margin-right: auto; }
.navbar a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.navbar a.active { background: #2563eb; color: #fff; }
.navbar a:hover { color: #fff; }

/* タブ */
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button {
  padding: 8px 20px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
}
.tabs button.active { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: bold; }

/* 検索・フィルター */
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters input[type="text"], .filters select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}
.filters label { font-size: 13px; color: #475569; display: flex; align-items: center; gap: 4px; }

/* 商品カード */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.card.closed { background: #f8fafc; color: #64748b; }
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card .info { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hide-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 4px 10px;
  background: #f1f5f9;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  color: #64748b;
  cursor: pointer;
}

/* バッジ */
.badge { display: inline-block; padding: 3px 12px; border-radius: 11px; font-size: 12px; margin-right: 6px; }
.badge.red { background: #fee2e2; color: #dc2626; }
.badge.yellow { background: #fef9c3; color: #a16207; }
.badge.green { background: #dcfce7; color: #16a34a; }
.badge.gray { background: #e2e8f0; color: #64748b; }
.badge.blue { background: #dbeafe; color: #2563eb; }
.badge.purple { background: #ede9fe; color: #7c3aed; }

/* ボタン */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-primary { background: #2563eb; color: #fff; font-weight: bold; }
.btn-success { background: #16a34a; color: #fff; font-weight: bold; }
.btn-outline { background: #fff; border-color: #2563eb; color: #2563eb; }
.btn-dark { background: #fff; border-color: #0f172a; color: #0f172a; }
.btn-danger { background: #fff; border-color: #dc2626; color: #dc2626; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* フォーム */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.panel h2 { font-size: 16px; margin-bottom: 14px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* テーブル */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
th { background: #e2e8f0; font-size: 12px; color: #475569; padding: 10px 8px; text-align: left; }
td { padding: 10px 8px; border-top: 1px solid #e2e8f0; font-size: 13px; }
td select, td input { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }

/* サマリー */
.summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.summary .box {
  flex: 1;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.summary .box:hover { border-color: #94a3b8; }
.summary .box.active { border: 2px solid #2563eb; background: #eff6ff; }
.summary .box .label { font-size: 12px; color: #64748b; }
.summary .box .num { font-size: 22px; font-weight: bold; }

/* ログイン */
.auth-box {
  max-width: 380px;
  margin: 60px auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px;
}
.auth-box h1 { font-size: 22px; text-align: center; margin-bottom: 4px; }
.auth-box .sub { font-size: 12px; color: #94a3b8; text-align: center; margin-bottom: 24px; }

.error { color: #dc2626; font-size: 13px; margin: 8px 0; }
.note { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.empty { text-align: center; color: #94a3b8; padding: 40px 0; font-size: 14px; }

/* アップロード */
.dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
}
.dropzone.drag { background: #dbeafe; border-color: #2563eb; }

@media (max-width: 600px) {
  .form-row { flex-direction: column; gap: 0; }
}