* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7f8; color: #1f2933; }
a { color: #155e75; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #0f1720; color: #fff; }
.brand { color: #fff; font-weight: 700; font-size: 18px; }
.topbar nav { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.topbar nav a { color: #dbeafe; }
.admin { color: #cbd5e1; font-size: 13px; }
.wrap { max-width: 1120px; margin: 20px auto; padding: 0 16px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.card, .panel { background: #fff; border: 1px solid #d8e0e7; border-radius: 8px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 32, 0.04); }
.panel + .panel { margin-top: 12px; }
.metric { font-size: 30px; font-weight: 700; margin-top: 8px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
h1 { margin: 0 0 14px; }
h2 { margin: 0 0 10px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d8e0e7; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5ebf0; vertical-align: top; }
th { background: #edf2f5; font-size: 13px; }
.data-table { background: #fff; border: 1px solid #d8e0e7; }
.data-row { border-bottom: 1px solid #e5ebf0; padding: 10px; }
.data-row:last-child { border-bottom: 0; }
.data-head { background: #edf2f5; font-size: 13px; font-weight: 700; padding: 8px 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
p { margin: 0 0 10px; }
label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid #b9c4cf; border-radius: 6px; font: inherit; background: #fff; }
textarea { min-height: 90px; resize: vertical; }
.password-field { align-items: stretch; display: flex; width: 100%; }
.password-field input { border-radius: 6px 0 0 6px; min-width: 0; }
.password-toggle { background: #edf2f5; border: 1px solid #b9c4cf; border-left: 0; border-radius: 0 6px 6px 0; color: #155e75; padding: 8px 10px; white-space: nowrap; }
.password-mask { color: #64748b; letter-spacing: 1px; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.checks input { width: auto; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.login-actions { gap: 12px; }
.forgot-link { color: #155e75; font-size: 13px; font-weight: 700; }
button, .button { border: 0; background: #155e75; color: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 700; cursor: pointer; display: inline-block; }
button.small, .button.small { padding: 6px 10px; font-size: 13px; }
button.secondary, .button.secondary { background: #475569; }
button.danger { background: #b42318; }
.inline-action { margin: 0; }
.manager-controls { align-items: center; display: flex; gap: 8px; }
.manager-button { background: transparent; border: 1px solid #b9c4cf; color: #155e75; }
.manager-button:hover { background: #edf7fa; text-decoration: none; }
.manage-cell { align-items: center; display: flex; gap: 8px; justify-content: flex-end; }
.row-select { display: inline-flex; margin: 0; }
.row-select input { width: auto; }
.reminders-list:not(.is-managing) .row-select { display: none; }
.manage-cell .row-select span { display: none; }
.manager-delete[hidden], .manager-done[hidden], .manager-button[hidden] { display: none; }
.flash { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; background: #e0f2fe; border: 1px solid #7dd3fc; }
.flash.error { background: #fee2e2; border-color: #fca5a5; }
.status { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: #e2e8f0; }
.status.sent { background: #dcfce7; }
.status.failed { background: #fee2e2; }
.status.pending { background: #fef3c7; }
.edit-panel summary { align-items: start; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; list-style: none; width: 100%; }
.edit-panel summary::marker { content: ""; }
.edit-panel summary::-webkit-details-marker { display: none; }
.edit-panel summary > span { min-width: 0; }
.edit-panel summary strong, .edit-panel summary .muted, .edit-panel summary span span { display: block; }
.edit-panel summary strong { margin-bottom: 2px; }
.edit-panel[open] summary { border-bottom: 1px solid #e5ebf0; margin-bottom: 12px; padding-bottom: 10px; }
.summary-grid { align-items: start; display: grid; gap: 12px 18px; width: 100%; }
.summary-grid > span { min-width: 0; overflow-wrap: break-word; }
.edit-panel summary.summary-grid { display: grid; }
.edit-panel summary.summary-grid > span:first-child { flex: none; }
.summary-game { grid-template-columns: minmax(0, 2fr) 190px 220px minmax(150px, 1fr) 64px; }
.summary-game > span:last-child { justify-self: end; }
.reminder-row { align-items: start; display: grid; gap: 18px; grid-template-columns: 155px minmax(0, 1fr) 165px 100px 115px 64px; width: 100%; }
.edit-panel summary.reminder-row { display: grid; gap: 18px; grid-template-columns: 155px minmax(0, 1fr) 165px 100px 115px 64px; }
.reminder-row > span { min-width: 0; overflow-wrap: break-word; }
.reminder-row > span:last-child { justify-self: end; }
.reminder-row > span:nth-child(2) { overflow: hidden; padding-right: 12px; }
.reminder-row > span:nth-child(2) strong { line-height: 1.2; white-space: normal; }
.edit-panel summary .button.small { align-self: center; background: transparent; border: 1px solid #b9c4cf; color: #155e75; justify-self: end; }
.edit-panel summary:hover .button.small { background: #edf7fa; text-decoration: none; }
.user-grid { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(180px, 1.3fr) 135px 150px minmax(170px, 1.1fr) 150px 90px 145px; }
.user-grid > * { min-width: 0; }
.user-grid label { margin: 0; }
.user-grid .actions { margin-top: 0; }
.user-password-help { grid-column: 1 / -1; margin: 4px 0 0; font-weight: 400; line-height: 1.5; }
.recipient-preview { background: #f8fafc; border: 1px solid #e5ebf0; border-radius: 6px; margin: 10px 0; padding: 10px 12px; }
.recipient-preview h3 { font-size: 14px; margin: 0 0 8px; }
.recipient-preview p { margin: 4px 0; }
.recipient-picker { margin: 10px 0; }
.import-list { border: 1px solid #d8e0e7; border-radius: 6px; margin-top: 10px; overflow: hidden; }
.import-row { align-items: start; border-bottom: 1px solid #e5ebf0; display: flex; gap: 10px; margin: 0; padding: 10px 12px; }
.import-row:last-child { border-bottom: 0; }
.import-row input { margin-top: 2px; width: auto; }
.import-row strong, .import-row .muted { display: block; }
.contact-checklist { border: 1px solid #d8e0e7; border-radius: 6px; display: grid; gap: 6px 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; max-height: 180px; overflow: auto; padding: 10px; }
.contact-checklist[hidden], .contact-checklist label[hidden] { display: none; }
.contact-checklist label { align-items: center; display: flex; gap: 6px; font-weight: 400; margin: 0; min-width: 0; }
.contact-checklist input { width: auto; }
.login { max-width: 420px; margin: 60px auto; }
.sign-in { max-width: 440px; margin: 32px auto; padding: 24px clamp(16px, 5vw, 32px) 32px; }
.sign-in-logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.sign-in h1 { text-align: center; font-size: 28px; margin-bottom: 8px; }
.sign-in-intro { color: #64748b; text-align: center; line-height: 1.5; margin-bottom: 24px; }
.sign-in form > p { margin-bottom: 16px; }
.sign-in .login-actions { flex-direction: column; gap: 16px; margin: 20px 0 0; }
.sign-in .login-actions button { width: 100%; padding: 11px 16px; }
.muted { color: #64748b; font-size: 13px; }
.policy { max-width: 800px; margin: 0 auto; line-height: 1.6; overflow-wrap: break-word; }
.policy h2 { margin-top: 24px; font-size: 20px; }
.policy a { text-decoration: underline; }
.policy li + li { margin-top: 8px; }
.site-footer { color: #64748b; font-size: 13px; }
.site-footer nav { display: flex; justify-content: center; gap: 16px; padding: 12px 0; border-top: 1px solid #d8e0e7; }
@media (max-width: 760px) {
    .topbar { align-items: flex-start; flex-direction: column; }
    .grid, .form-grid, .contact-checklist, .user-grid { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: 1fr; }
    table { display: block; overflow-x: auto; }
}