:root {
  --blue: #2563eb;
  --blue-hover: #1d4ed8;
  --red: #c62828;
  --bg: #f4f7fb;
  --text: #172033;
  --muted: #667085;
  --line: #e4e7ec;
  --field: #d0d5dd;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; background: var(--bg); color: var(--text); }
h1 { margin: 0; font-size: 26px; }
h2 { margin: 0; font-size: 18px; }
.muted { color: var(--muted); margin: 5px 0 0; }
.product-name { margin: 0 0 3px; color: var(--muted); font-size: 13px; font-weight: 700; }
.page { width: min(980px, calc(100% - 32px)); margin: 36px auto 64px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.panel { background: #fff; border: 1px solid #edf0f4; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.add-panel h2 { margin-bottom: 20px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { color: #475467; font-size: 13px; font-weight: 700; }
input, select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 7px; background: #fff; color: var(--text); font: inherit; }
input:focus, select:focus { outline: 2px solid rgba(37, 99, 235, .18); border-color: var(--blue); }
select:disabled { background: #f7f8fa; color: #98a2b3; }
button, summary { font: inherit; }
button { min-height: 42px; padding: 9px 16px; border: 0; border-radius: 7px; font-weight: 700; cursor: pointer; }
.primary { background: var(--blue); color: #fff; }
.primary:hover { background: var(--blue-hover); }
.logout { background: #fff; color: #475467; border: 1px solid var(--field); }
.danger { background: transparent; color: var(--red); border: 1px solid #f4c7c7; }
.danger:hover { background: #fff1f1; }

.add-form { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; gap: 14px; align-items: end; }
.date-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-button { min-width: 88px; }

.section-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.count { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 13px; background: #f2f4f7; color: #475467; font-size: 13px; font-weight: 700; }
.birthday-list { display: flex; flex-direction: column; }
.birthday-item { position: relative; padding: 0; border-bottom: 1px solid var(--line); }
.birthday-item:last-child { border-bottom: 0; }
.birthday-summary { min-height: 68px; display: grid; grid-template-columns: minmax(180px, 1fr) 140px; align-items: center; gap: 16px; padding-right: 92px; }
.person-name { font-weight: 700; overflow-wrap: anywhere; }
.birthday-date { color: #344054; font-variant-numeric: tabular-nums; }

.editor > summary { position: absolute; top: 13px; right: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 42px; padding: 8px 13px; border: 1px solid var(--field); border-radius: 7px; color: #344054; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.editor > summary::-webkit-details-marker { display: none; }
.editor[open] > summary { color: var(--blue); border-color: #b9ccfb; background: #f5f8ff; }
.edit-box { margin: 0 0 16px; padding: 16px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
.edit-form { display: grid; grid-template-columns: minmax(220px, 1fr) 220px auto; gap: 12px; align-items: end; }
.save-button { min-width: 110px; }
.delete-area { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.flash { padding: 11px 14px; border-radius: 7px; margin-bottom: 12px; font-size: 14px; }
.success { background: #ecfdf3; color: #027a48; }
.error { background: #fef3f2; color: #b42318; }
.empty { color: var(--muted); text-align: center; padding: 36px 8px 20px; }
.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; }

.confirm-dialog { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 8px; color: var(--text); box-shadow: 0 24px 64px rgba(15, 23, 42, .24); }
.confirm-dialog::backdrop { background: rgba(15, 23, 42, .42); }
.dialog-body { padding: 24px 24px 20px; }
.dialog-body h2 { margin-bottom: 10px; }
.dialog-body p { margin: 0; color: #475467; line-height: 1.7; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: #fafbfc; }
.cancel-button { background: #fff; color: #344054; border: 1px solid var(--field); }
.delete-confirm { background: var(--red); color: #fff; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 12px 32px rgba(15, 23, 42, .08); }
.login-card label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 14px; }
.login-button { width: 100%; margin-top: 22px; }

@media (max-width: 700px) {
  .page { width: min(100% - 24px, 980px); margin-top: 22px; }
  header { align-items: flex-start; }
  h1 { font-size: 23px; }
  .panel { padding: 18px; }
  .add-form, .edit-form { grid-template-columns: 1fr; }
  .add-button, .save-button { width: 100%; }
  .birthday-summary { grid-template-columns: 1fr; gap: 2px; min-height: 76px; padding: 14px 84px 14px 0; }
  .birthday-date { font-size: 14px; }
  .editor > summary { top: 17px; }
  .edit-box { padding: 14px; }
  .delete-area, .delete-area form, .danger { width: 100%; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
}