* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; }
.container { max-width: 900px; margin: 0 auto; padding: 24px; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.header h1 { font-size: 22px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.db-count { font-size: 12px; color: #888; background: #f0f0f0; padding: 2px 10px; border-radius: 10px; }
.admin-link { font-size: 13px; color: #3b82f6; text-decoration: none; }
.admin-link:hover { text-decoration: underline; }

/* Search Form */
.search-form {
  background: #fff; border-radius: 8px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 24px;
}
.search-form h2 { font-size: 14px; color: #666; margin-bottom: 16px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.form-group label { font-size: 12px; color: #888; }
.form-group input, .form-group select {
  height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 15px; outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.age-input-wrap { display: flex; gap: 8px; align-items: center; height: 40px; }
.age-input-wrap input { width: 80px; height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; outline: none; }
.age-input-wrap input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.age-tolerance { font-size: 13px; color: #666; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.age-tolerance select { height: 32px; padding: 0 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; outline: none; }
.form-actions { margin-top: 16px; display: flex; gap: 8px; }
button.search-btn {
  height: 40px; padding: 0 28px; background: #3b82f6; color: #fff;
  border: none; border-radius: 6px; font-size: 15px; cursor: pointer;
}
button.search-btn:hover { background: #2563eb; }
button.clear-btn {
  height: 40px; padding: 0 20px; background: #fff; color: #666;
  border: 1px solid #ddd; border-radius: 6px; font-size: 14px; cursor: pointer;
}

/* Result Card (from demo-hit / demo-nohit) */
.result-card {
  background: #fff; border-radius: 8px; padding: 40px 24px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.result-card.hit { border-left: 5px solid #22c55e; }
.result-card.miss { border-left: 5px solid #ef4444; }
.result-card .icon, .result-card .result-icon { font-size: 48px; margin-bottom: 12px; }
.result-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.result-card.hit .result-title { color: #16a34a; }
.result-card.miss .result-title { color: #dc2626; }
.result-count { font-size: 14px; color: #666; margin-bottom: 4px; }
.result-condition { font-size: 13px; color: #999; margin-bottom: 8px; }
.result-note { font-size: 12px; color: #aaa; }

/* Loading */
.loading {
  text-align: center; padding: 40px; color: #888; font-size: 14px;
  background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* No Results */
.no-results { text-align: center; padding: 40px 20px; color: #999; font-size: 14px; }
.no-results .icon { font-size: 40px; margin-bottom: 12px; }

/* Hit List - detailed records */
.hit-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.hit-item {
  background: #fff; border-radius: 8px; padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-left: 3px solid #22c55e;
}
.hit-header {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.hit-name { font-size: 16px; font-weight: 600; }
.hit-name small { font-weight: 400; color: #888; font-size: 13px; }
.hit-furigana { font-size: 13px; color: #888; }
.hit-age { font-size: 12px; color: #aaa; }
.hit-body { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.hit-label { color: #888; white-space: nowrap; }
.hit-value { color: #333; word-break: break-all; }
.note { font-size: 12px; color: #aaa; text-align: center; margin-top: 12px; }

/* Admin Styles */
.login-section { display: flex; justify-content: center; padding-top: 60px; }
.login-card {
  background: #fff; border-radius: 8px; padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); width: 100%; max-width: 360px;
}
.login-card h2 { font-size: 18px; margin-bottom: 20px; text-align: center; }
.login-card .form-group { margin-bottom: 12px; min-width: auto; }
.login-card .form-group input { width: 100%; }
.error-text { color: #dc2626; font-size: 13px; margin-top: 12px; text-align: center; }

.admin-card {
  background: #fff; border-radius: 8px; padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 16px;
}
.admin-card h2 { font-size: 16px; margin-bottom: 16px; }
.admin-card.danger { border: 1px solid #fca5a5; }
.danger-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.danger-actions p { font-size: 13px; color: #666; }
.warning { color: #dc2626; font-size: 13px; }
.danger-btn {
  padding: 8px 20px; background: #dc2626; color: #fff; border: none;
  border-radius: 6px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.danger-btn:hover { background: #b91c1c; }

.import-info { font-size: 13px; color: #666; margin-bottom: 16px; }
.import-info p { margin-bottom: 4px; }
.import-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-label {
  display: inline-block; padding: 8px 16px; background: #f0f0f0;
  border: 1px solid #ddd; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.file-label input { display: none; }
.file-name { font-size: 13px; color: #888; }
.import-btn {
  padding: 8px 20px; background: #3b82f6; color: #fff; border: none;
  border-radius: 6px; font-size: 14px; cursor: pointer;
}
.import-btn:hover { background: #2563eb; }
.import-result { margin-top: 16px; }
.success { color: #16a34a; font-size: 14px; }
.error { color: #dc2626; font-size: 14px; }

.stats-cards { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-card {
  background: #fff; border-radius: 8px; padding: 16px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: center; flex: 1; min-width: 150px;
}
.stat-value { font-size: 24px; font-weight: 700; color: #3b82f6; }
.stat-label { font-size: 12px; color: #888; margin-top: 4px; }

/* Old table styles (kept for reference) */
.table-wrap { background: #fff; border-radius: 8px; overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { background: #f8fafc; position: sticky; top: 0; }
th { padding: 10px 12px; text-align: left; font-weight: 600; font-size: 12px; color: #555; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
tr:hover { background: #f8fafc; }
mark { background: #fef08a; padding: 0 2px; border-radius: 2px; }