:root {
  --ink: #102f4c;
  --ink-deep: #092641;
  --muted: #627489;
  --paper: #fbfcfc;
  --cream: #f5f4ef;
  --line: #dce3e7;
  --aqua: #e1f4f8;
  --aqua-strong: #bee9f1;
  --red: #ed1724;
  --red-dark: #cf101d;
  --green: #15a575;
  --shadow: 0 20px 45px rgba(8, 41, 64, .08);
  --radius: 18px;
}

@font-face {
  font-family: "Muli";
  src: url("./fonts/Muli-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("./fonts/Muli-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("./fonts/Muli-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("./fonts/Muli-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-deep);
  background: var(--cream);
  font-family: "Muli", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea {
  color: var(--ink-deep);
  border: 1px solid #ccd7dc;
  border-radius: 10px;
  background: white;
  min-height: 43px;
  padding: .65rem .75rem;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: #399cb4; box-shadow: 0 0 0 3px rgba(57, 156, 180, .14); }
input::placeholder, textarea::placeholder { color: #8b99a7; }

.site-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 5vw, 5.5rem);
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid #e1e7e9;
}
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); font-size: 1.07rem; text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.brand b { color: var(--red); font-weight: 800; }
.brand-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; position: relative; transform: rotate(-12deg); }
.brand-mark span { position: absolute; width: 19px; height: 19px; border-radius: 50%; }
.brand-mark span:first-child { background: var(--red); right: 0; top: 2px; }
.brand-mark span:last-child { background: #bfeaf2; left: 0; bottom: 2px; }
.header-actions { display: flex; align-items: center; gap: .85rem; }
.privacy-pill { color: #507080; font-size: .78rem; display: inline-flex; align-items: center; gap: .45rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(21, 165, 117, .13); }

main { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 3.5rem) 4.5rem; overflow-x: clip; }
.intro-shell { min-height: 275px; padding: clamp(2.5rem, 6vw, 5.2rem) clamp(.5rem, 1.5vw, 1.5rem) 2.3rem; display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.eyebrow, .section-label { margin: 0 0 .7rem; color: #5c7486; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 750px; margin-bottom: 1rem; color: var(--ink); font-size: clamp(2.3rem, 5vw, 4.65rem); line-height: .98; letter-spacing: -.067em; }
h1 em { font-family: "Muli", ui-sans-serif, sans-serif; font-style: italic; font-weight: 400; letter-spacing: -.06em; }
.intro-copy { max-width: 585px; margin-bottom: 0; color: #536a7c; font-size: 1.02rem; line-height: 1.6; }
.progress-card { flex: 0 0 min(320px, 100%); padding: 1.2rem 1.25rem; background: var(--ink); color: white; border-radius: 14px; box-shadow: var(--shadow); }
.progress-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: #d7e4eb; font-size: .78rem; }
.progress-topline strong { color: white; font-size: 1.25rem; }
.progress-track { height: 6px; margin: .85rem 0 .75rem; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.24); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #6bd1e2; transition: width .22s ease; }
.progress-card p { margin: 0; color: #bfd0da; font-size: .77rem; line-height: 1.45; }

.workspace { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.5rem; }
.side-rail { position: sticky; top: 1.4rem; align-self: start; display: grid; padding-top: .7rem; gap: .35rem; }
.rail-link { padding: .65rem .7rem; display: flex; gap: .6rem; align-items: center; color: #6b7d8b; text-decoration: none; font-size: .79rem; font-weight: 650; border-radius: 9px; }
.rail-link span { color: #a1afb8; font-size: .64rem; font-variant-numeric: tabular-nums; }
.rail-link:hover, .rail-link.active { color: var(--ink); background: #e9eef0; }
.rail-link.active span { color: var(--red); }
.content-stack { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 1.25rem; min-width: 0; }
.panel { min-width: 0; padding: clamp(1.15rem, 2.4vw, 1.8rem); background: var(--paper); border: 1px solid #e3e8e9; border-radius: var(--radius); box-shadow: 0 2px 0 rgba(5, 32, 51, .015); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 1.3rem; letter-spacing: -.035em; }
.panel-heading .section-label { margin-bottom: .45rem; }
.panel-note { color: #718390; font-size: .74rem; line-height: 1.35; text-align: right; }
.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.field, .field-set { display: grid; gap: .38rem; }
.field > span, .field-set > span { color: #455d6d; font-size: .76rem; font-weight: 700; }
.field i, th i { color: var(--red); font-style: normal; }
.field-wide { grid-column: span 2; }
.date-set, .time-set { grid-column: span 2; }
.daily-time-set { grid-column: 1 / -1; }
.compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.compact-fields label { display: grid; position: relative; }
.compact-fields small { position: absolute; z-index: 1; top: 50%; left: .7rem; transform: translateY(-50%); color: #7e8f9b; font-size: .68rem; pointer-events: none; }
.compact-fields input { padding-left: 2.5rem; min-width: 0; }
.field-help { margin: -.08rem 0 .1rem; color: #6f8390; font-size: .71rem; line-height: 1.45; }
.daily-times-container { display: grid; gap: .55rem; }
.daily-times-empty { margin: 0; padding: .8rem .9rem; color: #6f8390; border: 1px dashed #c4d5da; border-radius: 10px; background: rgba(255,255,255,.65); font-size: .75rem; line-height: 1.4; }
.daily-times-empty.error { color: #963544; border-color: #e1aab0; background: #fff7f7; }
.daily-time-row { display: grid; grid-template-columns: minmax(160px, .9fr) minmax(260px, 1.1fr) minmax(125px, .55fr); gap: .75rem; align-items: center; padding: .7rem .8rem; border: 1px solid #dce8eb; border-radius: 10px; background: white; }
.daily-date { display: grid; gap: .12rem; }
.daily-date strong { color: #284a5e; font-size: .75rem; font-weight: 800; }
.daily-date span { color: #748793; font-size: .68rem; }
.daily-time-row .compact-fields { min-width: 0; }
.daily-hours { color: #506a78; font-size: .7rem; font-weight: 700; line-height: 1.35; text-align: right; }
.daily-hours.is-valid { color: #167553; }
.daily-hours.is-invalid { color: #a33b46; }
.hours-summary { display: grid; grid-template-columns: 1fr auto; gap: .15rem .85rem; align-items: baseline; padding: .75rem .85rem; border-radius: 10px; color: #305d70; background: #e4f5f7; }
.hours-summary > span { color: #527484; font-size: .7rem; font-weight: 700; }
.hours-summary strong { color: #174e63; font-size: 1rem; font-weight: 800; }
.hours-summary small { grid-column: 1 / -1; color: #6f8590; font-size: .66rem; }
.hours-summary.is-incomplete { color: #8a5c36; background: #fff4e8; }
.hours-summary.is-incomplete strong { color: #8a5c36; }
.signer-block { grid-column: 1 / -1; padding: 1rem; border: 1px solid #dce9ec; border-radius: 13px; background: #f5fafb; }
.signer-block-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .72rem; }
.signer-block-heading > div > span { color: #35576b; font-size: .78rem; font-weight: 800; }
.signer-block-heading p { margin: .16rem 0 0; color: #6c8290; font-size: .69rem; line-height: 1.4; }
.session-note { padding: .25rem .45rem; color: #5a7a87; background: #e2f1f3; border-radius: 99px; font-size: .63rem; font-weight: 750; white-space: nowrap; }
.signature-drop-zone { display: grid; min-height: 82px; border: 1.5px dashed #8ab7c2; border-radius: 10px; background: white; outline: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.signature-drop-zone:hover, .signature-drop-zone:focus, .signature-drop-zone.is-dragging { border-color: #1690a8; background: #f3fbfc; box-shadow: 0 0 0 3px rgba(22, 144, 168, .12); }
.signature-drop-zone input { display: none; }
.signature-empty { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem .65rem; padding: .9rem; color: #4e6878; font-size: .73rem; }
.signature-empty strong { color: #315a70; font-size: .75rem; }
.signature-empty > span:last-child { color: #80919b; }
.signature-plus { width: 23px; height: 23px; display: grid; place-items: center; color: white; background: #47aebe; border-radius: 50%; font-size: 1rem; line-height: 1; }
.signature-preview { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; }
.signature-preview[hidden], .signature-empty[hidden] { display: none; }
.signature-preview img { width: 100px; height: 58px; object-fit: contain; object-position: center; background-image: linear-gradient(45deg, #eef2f3 25%, transparent 25%), linear-gradient(-45deg, #eef2f3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef2f3 75%), linear-gradient(-45deg, transparent 75%, #eef2f3 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; border-radius: 5px; }
.signature-preview div { display: grid; gap: .13rem; min-width: 0; }
.signature-preview strong { overflow: hidden; color: #254b61; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.signature-preview span { color: #6f8390; font-size: .68rem; line-height: 1.35; }
.remove-signature { margin-left: auto; padding: .4rem .55rem; color: #9d3038; border: 1px solid #f1c7ca; border-radius: 7px; background: #fff6f6; font-size: .69rem; font-weight: 750; }
.remove-signature:hover { color: #850e19; background: #ffe9e9; }
.signer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }

.template-strip { display: flex; align-items: center; gap: .9rem; margin-top: 1.35rem; padding: .85rem 1rem; border-radius: 12px; background: #edf6f8; }
.template-icon { width: 38px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--red); border-radius: 7px 7px 10px 7px; font-size: .64rem; font-weight: 850; letter-spacing: .04em; }
.template-strip strong { color: var(--ink); font-size: .8rem; }
.template-strip p { margin: .14rem 0 0; color: #617888; font-size: .72rem; }
.file-button { margin-left: auto; white-space: nowrap; }
.file-button input { display: none; }
.template-fixed { margin-left: auto; padding: .4rem .55rem; color: #456d7b; background: white; border: 1px solid #cfe0e4; border-radius: 7px; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.template-manager { margin-top: 1rem; padding: 1rem; border: 1px solid #dce9ec; border-radius: 13px; background: #f8fbfc; }
.template-manager-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.2rem; margin-bottom: .9rem; }
.template-manager-heading .section-label { margin-bottom: .38rem; }
.template-manager-heading h3 { margin: 0; color: var(--ink); font-size: .98rem; letter-spacing: -.025em; }
.template-manager-heading > p { max-width: 440px; margin: 0; color: #6b808d; font-size: .7rem; line-height: 1.45; text-align: right; }
.template-manager-grid { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(190px, .96fr) minmax(260px, 1.35fr); gap: .75rem; align-items: end; }
.field > span small { color: #738691; font-weight: 500; }
.pdf-drop-zone { min-height: 74px; display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; color: #4e6878; border: 1.5px dashed #8ab7c2; border-radius: 10px; background: white; outline: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.pdf-drop-zone:hover, .pdf-drop-zone:focus, .pdf-drop-zone.is-dragging { border-color: #1690a8; background: #f3fbfc; box-shadow: 0 0 0 3px rgba(22, 144, 168, .12); }
.pdf-drop-zone input { display: none; }
.pdf-drop-zone > div { display: grid; min-width: 0; gap: .12rem; }
.pdf-drop-zone strong { color: #315a70; font-size: .74rem; }
.pdf-drop-zone div span { color: #80919b; font-size: .67rem; line-height: 1.35; }
.template-manager-actions { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .75rem; }
.template-manager-actions span { color: #5c7483; font-size: .69rem; line-height: 1.35; }
.template-manager-help { margin: .55rem 0 0; color: #708390; font-size: .67rem; line-height: 1.48; }

.table-heading { margin-bottom: .95rem; }
.panel-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: .58rem .85rem; border: 1px solid transparent; border-radius: 9px; font-size: .74rem; font-weight: 750; text-decoration: none; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(13, 38, 58, .09); }
.button-quiet { color: #486170; background: transparent; border-color: transparent; }
.button-quiet:hover { background: #edf2f3; box-shadow: none; }
.button-outline { color: var(--ink); background: white; border-color: #c9d5d9; }
.button-outline:hover { border-color: #8caeba; }
.button-dark { color: white; background: var(--ink); border-color: var(--ink); }
.button-dark:hover { background: #174a71; }
.button-red { color: white; background: var(--red); border-color: var(--red); }
.button-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.selection-line { display: flex; align-items: center; gap: .7rem; min-height: 35px; padding: 0 .15rem .65rem; border-bottom: 1px solid #e2e8ea; color: #70828e; font-size: .73rem; }
.check-label { display: inline-flex; gap: .43rem; align-items: center; color: #3f5767; font-weight: 650; }
input[type="checkbox"] { accent-color: var(--red); width: 16px; min-height: 16px; margin: 0; }
.selection-line #selectionSummary { margin-right: auto; }
.text-button { padding: 0; color: #305f7a; font-size: .73rem; font-weight: 700; border: 0; background: transparent; }
.text-button:hover { text-decoration: underline; }
.table-wrap { max-width: 100%; overflow: auto; margin: 0 -.2rem; }
table { width: 100%; min-width: 865px; border-spacing: 0; border-collapse: collapse; }
th { padding: .8rem .5rem .6rem; color: #6c7f8e; text-align: left; font-size: .66rem; font-weight: 800; letter-spacing: .025em; white-space: nowrap; }
td { padding: .4rem .34rem; border-top: 1px solid #ebeff0; }
td input, td select { width: 100%; min-width: 74px; min-height: 37px; padding: .45rem .52rem; font-size: .78rem; }
.select-col { width: 35px; }
.action-col { width: 44px; }
.delete-row { width: 30px; height: 30px; display: grid; place-items: center; color: #9a5157; border: 0; border-radius: 7px; background: transparent; font-size: 1.15rem; line-height: 1; }
.delete-row:hover { color: #b70f1d; background: #fff0f0; }
.table-hint { margin: .85rem 0 0; color: #687b88; font-size: .71rem; line-height: 1.55; }
code { padding: .1rem .3rem; color: #22455e; background: #eaf0f2; border-radius: 4px; font-family: "Muli", ui-sans-serif, sans-serif; font-size: .92em; }

.output-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 1.25rem; }
.compact-heading { margin-bottom: .7rem; }
.count-badge, .mail-state { align-self: center; padding: .32rem .55rem; color: #176878; background: #e0f4f7; border-radius: 99px; font-size: .68rem; font-weight: 800; }
.mail-state { color: #6a6171; background: #efedf0; }
.panel-copy { margin: 0; color: #607481; font-size: .82rem; line-height: 1.55; }
.export-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.microcopy { margin: .85rem 0 0; color: #7c8c96; font-size: .67rem; line-height: 1.45; }
.mail-panel { display: flex; flex-direction: column; background: linear-gradient(140deg, #fbfcfc 0%, #f1f8f9 100%); }
.mail-open-button { width: max-content; margin-top: auto; gap: .85rem; }
.moderation-panel { background: linear-gradient(140deg, #fbfcfc 0%, #f1f8f9 100%); }
.moderation-layout { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(200px, .85fr); gap: .85rem; margin-top: 1rem; }
.moderation-drop-zone { min-height: 100px; }
.moderation-template-info { display: grid; align-content: center; gap: .24rem; padding: 1rem; color: #526d7b; border: 1px solid #dce8eb; border-radius: 11px; background: white; }
.moderation-template-info span { color: #77909b; font-size: .65rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.moderation-template-info strong { overflow: hidden; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.moderation-template-info small { color: #6f8390; font-size: .68rem; line-height: 1.4; }
.moderation-actions { align-items: center; }
.template-manager-actions .template-select { flex: 1; min-width: 0; }
.template-manager-actions .template-select > span { font-size: .72rem; }
.template-manager-actions .template-select small { color: #7a8a93; font-weight: 500; }
.template-manager-actions .button { flex: none; align-self: flex-end; }
.moderation-select-row { margin-top: .85rem; }
.moderation-text-editor { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(130px, .8fr) 90px auto; align-items: end; gap: .8rem; margin-top: 1rem; padding: 1rem; border: 1px solid #dce8eb; border-radius: 11px; background: white; }
.moderation-text-editor textarea { min-height: 72px; font-family: "Muli", sans-serif; font-weight: 600; resize: vertical; }
.moderation-text-editor input[type="color"] { width: 100%; height: 42px; padding: .2rem; cursor: pointer; }
.moderation-text-editor small { color: #7a8a93; font-weight: 500; }
.outlook-fields { display: grid; gap: .85rem; }
.outlook-fields[hidden] { display: none; }
@media (max-width: 760px) { .moderation-text-editor { grid-template-columns: 1fr; } }

dialog { width: min(860px, calc(100vw - 2rem)); padding: 0; color: var(--ink-deep); border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 26, 42, .34); }
dialog::backdrop { background: rgba(10, 34, 48, .58); backdrop-filter: blur(2px); }
.dialog-card { padding: clamp(1.25rem, 4vw, 2rem); background: var(--paper); }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.4rem; }
.dialog-heading h2 { margin: 0; color: var(--ink); font-size: 1.55rem; letter-spacing: -.04em; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; color: #566f7f; border: 0; border-radius: 50%; background: #eaf0f2; font-size: 1.35rem; line-height: 1; }
.icon-button:hover { color: var(--ink); background: #dfe8eb; }
.mail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 215px; gap: 1.5rem; }
.mail-form-fields { display: grid; gap: .9rem; }
.variable-help { margin: -.2rem 0 .1rem; color: #6e808b; font-size: .69rem; line-height: 1.55; }
.mode-note { padding: .85rem .9rem; color: #466171; background: #eaf5f7; border-left: 3px solid #54b4c6; border-radius: 0 9px 9px 0; font-size: .75rem; line-height: 1.5; }
.mode-note strong { color: #1e5469; }
.warning-note { margin-top: .2rem; color: #755641; background: #fff4e8; border-left-color: #e78a31; }
.warning-note strong { color: #965011; }
.webhook-fields { display: grid; gap: .85rem; }
.webhook-fields .field small { color: #7a8a93; font-weight: 500; }
.webhook-spec { color: #587180; font-size: .72rem; line-height: 1.5; }
.webhook-spec summary { color: #315e77; cursor: pointer; font-weight: 750; }
.webhook-spec p { margin: .6rem 0 0; }
.mail-summary { align-self: start; padding: 1.2rem; color: white; background: var(--ink); border-radius: 14px; }
.summary-number { margin-bottom: .1rem; font-size: 2.5rem; font-weight: 800; letter-spacing: -.07em; }
.mail-summary strong { display: block; font-size: .82rem; }
.mail-summary span { display: block; margin-top: .22rem; color: #bbccd6; font-size: .69rem; line-height: 1.4; }
.mail-summary hr { margin: 1rem 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); }
.mail-summary p { margin: 0; color: #bfd0da; font-size: .7rem; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.4rem; }
.queue-card { max-width: 540px; }
.queue-person { display: flex; align-items: center; gap: .8rem; padding: .8rem; margin: .2rem 0 1rem; background: #eaf5f7; border-radius: 11px; }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: var(--red); border-radius: 50%; font-weight: 800; }
.queue-person strong, .queue-person span { display: block; }
.queue-person span { margin-top: .14rem; color: #657a89; font-size: .76rem; }
.queue-card > p { color: #5d7382; font-size: .82rem; line-height: 1.55; }
.toast { position: fixed; z-index: 5; left: 50%; bottom: 1.4rem; max-width: min(540px, calc(100vw - 2rem)); padding: .8rem 1rem; color: white; background: #173e5d; border-radius: 10px; box-shadow: 0 12px 30px rgba(1, 30, 51, .23); font-size: .78rem; transform: translate(-50%, 150%); opacity: 0; transition: transform .23s ease, opacity .23s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: #ab1d2a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1180px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: span 2; }
  .date-set, .time-set { grid-column: span 1; }
  .daily-time-set { grid-column: 1 / -1; }
  .template-manager-grid { grid-template-columns: 1fr 1fr; }
  .template-manager-grid .pdf-drop-zone { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .field-wide, .date-set, .time-set { grid-column: span 1; }
  .daily-time-set { grid-column: 1 / -1; }
  .output-grid { grid-template-columns: 1fr; }
  .mail-layout { grid-template-columns: 1fr; }
  .mail-summary { display: flex; align-items: center; gap: .7rem; }
  .mail-summary hr, .mail-summary p { display: none; }
  .moderation-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 68px; padding-top: .8rem; padding-bottom: .8rem; }
  .privacy-pill { display: none; }
  .intro-shell { display: grid; }
  .progress-card { width: 100%; }
  .workspace { display: block; }
  .side-rail { display: none; }
  .panel-heading, .table-heading { display: grid; }
  .panel-note { text-align: left; }
  .panel-actions { justify-content: flex-start; }
  .file-button, .template-fixed { margin-left: 0; }
  .daily-time-row { grid-template-columns: 1fr; gap: .55rem; }
  .daily-hours { text-align: left; }
}
@media (max-width: 520px) {
  .site-header .button-quiet { padding-right: 0; }
  .brand { font-size: .95rem; }
  .header-actions { gap: .2rem; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide, .date-set, .time-set { grid-column: auto; }
  .compact-fields { grid-template-columns: 1fr; }
  .daily-time-row .compact-fields { grid-template-columns: 1fr 1fr; }
  .signer-block-heading { display: grid; }
  .session-note { width: max-content; }
  .signer-meta { grid-template-columns: 1fr; }
  .signature-preview { align-items: flex-start; flex-wrap: wrap; }
  .remove-signature { margin-left: 0; }
  .template-strip { align-items: flex-start; flex-wrap: wrap; }
  .template-manager-heading { display: grid; }
  .template-manager-heading > p { text-align: left; }
  .template-manager-grid { grid-template-columns: 1fr; }
  .template-manager-grid .pdf-drop-zone { grid-column: auto; }
  .template-manager-actions { align-items: flex-start; flex-direction: column; }
  .file-button { width: 100%; }
  .export-actions, .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .export-actions .button, .dialog-actions .button { width: 100%; }
  .moderation-actions .button:first-child { margin-right: 0; }
  .dialog-actions .button:first-child { grid-row: 2; }
}