:root {
  color-scheme: light;
  --ink: #172536;
  --muted: #516475;
  --line: #dce5e8;
  --accent: #155e56;
  --paper: #f3f6f8;
  --white: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 system-ui, sans-serif; }
body > header { background: var(--white); border-bottom: 1px solid var(--line); }
.bar, main { max-width: 1200px; margin: auto; padding: 15px 28px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 750; line-height: 1.25; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.mark { display: grid; place-items: center; width: 40px; height: 40px; background: #165a52; color: #e4f7e9; border-radius: 12px; font-size: 22px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 256px;
  margin: 16px 0 20px; padding: clamp(26px, 5vw, 58px); border-radius: 24px; color: #fff;
  background: radial-gradient(ellipse at 89% 0%, #286c60, transparent 60%), linear-gradient(120deg,#12293d,#153e41);
  box-shadow: 0 16px 36px #1737471a;
}
.hero::before, .hero::after { content: ''; z-index: -1; position: absolute; width: 340px; aspect-ratio: 1; border: 1px solid #c3f0d54d; border-radius: 32%; transform: rotate(31deg); right: -50px; top: -75px; }
.hero::after { width: 290px; right: -8px; top: -42px; border-radius: 44%; }
.hero p { color: #dcf0eb; max-width: 530px; margin: 0; }
.eyebrow, .kicker { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; }
.eyebrow { color: #bbecd7; }
.kicker { color: var(--accent); }
h1 { font: 500 clamp(37px,6vw,67px)/1.01 Georgia, serif; letter-spacing: -.035em; margin: 12px 0 18px; }
h2 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.025em; }
h3 { margin: 0; }
p { margin: 8px 0 15px; }
.label { color: var(--muted); font-size: 13px; }
.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 3px 12px #17253608; }
.card { position: relative; }
.metric-icon { display: block; color: #24655e; font-size: 11px; letter-spacing: .13em; font-weight: 750; margin-bottom: 8px; }
.card strong { display: block; font: 500 37px Georgia, serif; margin-top: 3px; }
nav, .row, .tools, .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
nav { background: #e7eef1; padding: 6px; border-radius: 14px; margin-bottom: 14px; }
.row { justify-content: space-between; gap: 12px; }
.tools { margin: 16px 0; }
.logout { margin-left: auto; }
button { font: inherit; font-weight: 650; color: var(--accent); background: #fff; border: 1px solid var(--line); padding: 8px 13px; border-radius: 9px; cursor: pointer; }
button:hover { background: #e4f1ec; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #36796c; outline-offset: 2px; }
nav button { white-space: nowrap; border-color: transparent; background: transparent; }
.primary, nav .selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.primary:hover, nav .selected:hover { background: #10483f; }
.pill { display: inline-block; border-radius: 18px; background: #e5f3ec; color: #18554b; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.table { overflow: auto; margin: 12px 0 16px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; }
td, th { padding: 12px 9px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; color: var(--muted); background: #f3f7f8; }
td small { display: block; color: var(--muted); }
.table button { margin-right: 4px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid #adbec6; border-radius: 8px; background: #fff; color: var(--ink); max-width: 100%; }
label { display: grid; gap: 4px; margin: 10px 0; font-weight: 600; }
label:has(input[type=checkbox]) { display: flex; align-items: center; }
.fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
.auth { max-width: 480px; margin: 20px auto; padding: 25px; }
.auth input { width: 100%; }
.formPanel { max-width: 680px; }
.field-note { color: var(--muted); font-size: 13px; }
.help { background: var(--paper); border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
#status { margin: 0 0 12px; color: #185943; }
#status:empty, #dialogStatus:empty { display: none; }
#status.error, #dialogStatus { color: #943619; }
dialog { width: min(650px,calc(100% - 24px)); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 22px; color: var(--ink); }
dialog::backdrop { background: #142a297d; }
.section-intro { margin-bottom: 20px; }
.template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.template-item { background: #f5f8f9; padding: 14px; border: 1px solid var(--line); border-radius: 15px; }
.envelope { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.envelope strong { margin-right: 5px; color: var(--ink); }
footer { text-align: center; padding: 22px; color: var(--muted); }
[hidden] { display: none !important; }
@media (max-width: 720px) {
  .template-grid, .fields { grid-template-columns: 1fr; }
  .bar, main { padding: 12px; }
  .hero { min-height: auto; }
  .metrics { gap: 7px; }
  .card, .panel { padding: 13px; }
  .card strong { font-size: 29px; }
}

.template-grid .gc-card, #message .gc-card { white-space: normal; border-collapse: separate; }
.gc-card table { white-space: normal; border-collapse: separate; }
:where(.gc-card) td { border-bottom: 0; }
.gc-card .gc-cover, .gc-card .gc-frame, .gc-card .gc-ribbon, .gc-card .gc-seal { text-align: center; }
@media (max-width: 420px) {
  .gc-card .gc-heading { font-size: 29px; }
  .gc-card .gc-name { font-size: 26px; }
}

/* Administration workspace */
:root {
  --ink: #152e2c;
  --muted: #526864;
  --line: #dce6e0;
  --accent: #12594c;
  --paper: #f1f5f1;
  --gold: #d8b77a;
}
body { background: radial-gradient(ellipse at top right, #e5eee5, transparent 580px), var(--paper); }
body > header { background: #fbfdfb; }
.bar, main { max-width: 1440px; padding-inline: clamp(16px, 4vw, 52px); }
.bar { min-height: 72px; }
.brand { letter-spacing: -.025em; }
.brand small { font-weight: 700; letter-spacing: .12em; }
.mark { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); font-size: 0; background: #fff url("/bmsit-crest.jpg") center / auto 32px no-repeat; }
.header-pill { padding: 6px 12px; border: 1px solid #d1e5db; }
.hero {
  min-height: 0; padding: clamp(24px, 4vw, 44px); margin: 18px 0 22px;
  border: 1px solid #2b6458; border-radius: 22px;
  background: radial-gradient(ellipse at 88% 16%, #2f7062 0%, transparent 55%), linear-gradient(110deg, #102c33, #174940);
  box-shadow: 0 18px 34px #15352c20;
}
.hero::before { right: 5%; top: -54%; width: 330px; border: 1px solid #d8b77a65; border-radius: 48%; }
.hero::after { right: 3%; top: -48%; width: 330px; border: 1px solid #d8b77a45; border-radius: 46%; }
.hero .eyebrow { color: #f0d39c; }
.hero h1 { font-size: clamp(33px, 4vw, 56px); max-width: 20ch; margin-block: 12px; }
.hero p { max-width: 48ch; font-size: 14px; }

#dashboard { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 16px; }
.metrics { grid-column: 1 / -1; margin: 0; gap: 12px; }
.card, .panel { border-color: var(--line); box-shadow: 0 5px 16px #132f2409; }
.metrics .card { min-width: 0; padding: 17px 19px; overflow: hidden; }
.metrics .card::after { content: ""; position: absolute; top: -33px; right: -28px; width: 120px; height: 120px; border: 1px solid #b5d3c7; border-radius: 50%; pointer-events: none; }
.metrics .card:nth-child(2)::after { border-color: #e1c79e; }
.metrics .card:nth-child(3)::after { border-color: #c5ccdf; }
.metric-icon { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 5px; margin-bottom: 9px; border-radius: 7px; color: #14564b; background: #e8f4ed; }
.metrics .card:nth-child(2) .metric-icon { color: #704b21; background: #f7eedb; }
.metrics .card:nth-child(3) .metric-icon { color: #3a4c73; background: #eaf0f8; }
.metrics .label { display: block; font-weight: 650; }
.metrics strong { font: 700 32px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }

#dashboard nav {
  position: sticky; top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  margin: 0; padding: 10px; background: #fcfefc; border: 1px solid var(--line); border-radius: 16px;
}
#dashboard nav button { text-align: left; padding: 9px 11px; min-height: 42px; }
#dashboard nav .logout { margin: 8px 0 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: #7a443f; }
#view { min-width: 0; min-height: 320px; padding: clamp(16px, 2.4vw, 27px); }
#view > .row, #view > .section-intro { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
#view .actions button:first-child:not(:only-child) { background: #e7f2eb; border-color: #d6e6dc; color: #134e43; }
#view .actions .primary:first-child:not(:only-child) { background: var(--accent); border-color: var(--accent); color: #fff; }
#view .tools input[type="search"] { width: min(100%, 360px); }
.table { border: 1px solid var(--line); border-radius: 12px; }
.table th { background: #edf3ee; font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
.table td, .table th { padding-inline: 12px; }
.table tbody tr:nth-child(even) { background: #f8faf8; }
.table tbody tr:hover { background: #eef6f0; }
.table tbody tr:last-child td { border-bottom: 0; }
.auth { padding: clamp(20px, 4vw, 32px); border-top: 3px solid var(--accent); }
.auth button { min-height: 42px; }
#status:not(:empty) { border: 1px solid #cde4d6; border-radius: 10px; padding: 10px 13px; background: #ecf7ef; }
#status.error:not(:empty) { background: #fff4ed; border-color: #edccba; }
footer { font-size: 13px; }

@media (max-width: 860px) {
  #dashboard { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #dashboard nav { position: static; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  #dashboard nav button { text-align: center; }
  #dashboard nav .logout { margin: 0 0 0 auto; border: 1px solid var(--line); border-radius: 8px; }
  #view { min-height: 250px; }
}
@media (max-width: 480px) {
  .bar, main { padding-inline: 12px; }
  .hero { margin-block: 10px 14px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .metrics { gap: 6px; }
  .metrics .card { padding: 10px 8px; border-radius: 11px; }
  .metrics .label { font-size: 11px; line-height: 1.3; }
  .metrics strong { font-size: 24px; }
  #dashboard nav button { font-size: 13px; padding-inline: 8px; }
  #dashboard nav .logout { margin-left: 0; }
}

/* The signed-in workspace keeps the masthead compact. */
main:has(#dashboard:not([hidden])) .hero { padding-block: 20px; }
main:has(#dashboard:not([hidden])) .hero h1 { font-size: clamp(27px, 3.6vw, 43px); max-width: none; }
main:has(#dashboard:not([hidden])) .hero br { display: none; }
main:has(#dashboard:not([hidden])) .hero p { max-width: 70ch; }
.overview-heading, .overview-grid { display: grid; gap: 14px; }
.overview-heading { grid-template-columns: 1fr auto; align-items: center; padding-bottom: 12px; }
.overview-heading h2 { margin-top: 3px; font-size: clamp(24px, 3vw, 32px); }
.overview-heading p, .overview-block .row p { margin: 2px 0 0; }
.overview-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.overview-block { min-width: 0; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--line); border-radius: 15px; background: #f7faf7; }
.overview-block h3 { font-size: 16px; }
.overview-empty { padding: 15px 0; color: var(--muted); }
.milestone-list { list-style: none; padding: 0; margin: 8px 0 14px; }
.milestone-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.milestone-row time { color: var(--muted); font-weight: 650; font-size: 12px; }
.milestone-row strong, .milestone-row small { display: block; overflow-wrap: anywhere; }
.milestone-row small { color: var(--muted); }
.event-badge { border-radius: 20px; padding: 4px 8px; font-size: 11px; font-weight: 750; }
.event-birthday { background: #f7e6e8; color: #733b48; }
.event-anniversary { background: #e1f0e7; color: #245846; }
.overview-links { display: grid; gap: 7px; }
.overview-links button { text-align: left; }
@media (max-width: 680px) { .overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .overview-heading { grid-template-columns: 1fr; } .overview-heading button { justify-self: start; } }

.metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.metric-link { text-align: left; color: var(--ink); }
.metric-link:hover { background: #f5faf5; border-color: #a7c9b8; }
.metric-link::before { content: "↗"; position: absolute; right: 12px; top: 8px; color: var(--accent); }
.metrics .card:nth-child(4) .metric-icon { color: #684059; background: #f5e8f0; }
.metrics .card:nth-child(4)::after { border-color: #d7bfd2; }
#view .tools { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f6faf6; }
#view .tools select, #view .tools button { min-height: 40px; }
.result-count { margin: 8px 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.event-paused { background: #f0eeee; color: #5c4b50; }
.milestone-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.milestone-actions button { padding: 4px 8px; font-size: 12px; }
@media (max-width: 620px) {
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #view .tools > * { max-width: 100%; }
  .milestone-row { grid-template-columns: auto minmax(0,1fr); }
  .milestone-actions { grid-column: 2; justify-content: flex-start; }
}