@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600&display=swap");
:root { --blue:#2457a6; --blue-dark:#183f7e; --ink:#182236; --muted:#687386; --line:#dbe1e9; --soft:#f4f7fb; --white:#fff; --green:#1f7a50; --shadow:0 14px 40px rgba(35,55,85,.08); }
* { box-sizing:border-box; } body { margin:0; background:#f7f8fa; color:var(--ink); font-family:"DM Sans",sans-serif; } button,input,select,textarea { font:inherit; } button { color:inherit; }
.app-header { height:72px; background:#fff; border-bottom:1px solid var(--line); padding:0 max(22px,5vw); display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:0; z-index:4; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:11px; }.brand-icon { width:39px;height:39px;border-radius:6px;background:var(--blue);color:white;display:grid;place-items:center;font:600 24px "Source Serif 4",serif; }.brand strong,.brand small { display:block; }.brand strong { font:600 21px "Source Serif 4",serif; }.brand small { color:var(--muted);font-size:10px;text-transform:uppercase; }
.header-actions { display:flex;align-items:center;gap:10px; }.privacy { color:var(--muted);font-size:12px; }.privacy i { display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:5px; }
.button { border-radius:5px;padding:10px 15px;border:1px solid transparent;font-weight:600;cursor:pointer; }.primary { background:var(--blue);color:white; }.primary:hover { background:var(--blue-dark); }.secondary { background:white;border-color:#bfc9d7; }.quiet { background:var(--soft);border-color:var(--line); }
.page { max-width:1280px;margin:auto;padding:44px 5vw 70px; }.intro { max-width:720px;margin-bottom:30px; }.eyebrow { margin:0 0 7px;color:var(--blue);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }.intro h1 { font:600 clamp(38px,5vw,58px)/1.05 "Source Serif 4",serif;margin:0;letter-spacing:0; }.intro>p:last-child { color:var(--muted);font-size:16px; }
.workspace { display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);overflow:hidden; }.composer { padding:30px;border-right:1px solid var(--line); }.section-block { border:0;border-bottom:1px solid var(--line);margin:0 0 24px;padding:0 0 24px; }.section-block legend { padding:0;margin-bottom:14px;font:600 19px "Source Serif 4",serif; }
.child-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.child-option input { position:absolute;opacity:0; }.child-option span { min-height:66px;border:1px solid var(--line);border-radius:5px;padding:12px;display:block;cursor:pointer; }.child-option b,.child-option small { display:block; }.child-option small { color:var(--muted);margin-top:3px; }.child-option input:checked+span { border:2px solid var(--blue);padding:11px;background:#f4f7fd; }.text-button { border:0;background:transparent;color:var(--blue);font-weight:600;padding:8px 0;cursor:pointer; }.child-choice .text-button { margin-top:8px; }
.date-grid { display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end; }.date-grid>span { padding-bottom:11px;color:var(--muted); }.date-grid label,.parent-label,.form-grid label { color:var(--muted);font-size:12px;font-weight:600; }.date-grid input,.parent-label input,.form-grid input,.custom-reason { display:block;width:100%;margin-top:6px;border:1px solid #bdc8d6;border-radius:5px;padding:11px;background:white;color:var(--ink); }.quick-dates { display:flex;gap:8px;margin-top:10px; }.quick-dates button { border:1px solid var(--line);background:var(--soft);border-radius:4px;padding:6px 10px;font-size:12px;cursor:pointer; }
.reason-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.reason-grid label input { position:absolute;opacity:0; }.reason-grid span { display:block;border:1px solid var(--line);border-radius:5px;padding:11px;cursor:pointer;font-size:13px; }.reason-grid input:checked+span { border-color:var(--blue);background:#eef3fc;color:var(--blue-dark);font-weight:600; }.custom-reason { margin-top:9px; }
.destination-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.destination-row label { display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:5px;padding:11px; }.destination-row input { width:18px;height:18px;accent-color:var(--blue); }.destination-row b,.destination-row small { display:block; }.destination-row small { color:var(--muted);font-size:11px;margin-top:2px; }.parent-label { display:block; }.generate { width:100%;margin-top:18px;display:flex;justify-content:space-between;align-items:center;padding:13px 16px; }
.preview-pane { background:#f1f4f8;padding:30px;min-height:620px; }.empty-preview { min-height:540px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted); }.empty-preview h2 { font:600 24px "Source Serif 4",serif;color:var(--ink);margin:14px 0 4px; }.empty-preview p { max-width:330px;line-height:1.5; }.paper-icon { width:62px;height:62px;border:1px solid #c7d2df;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:27px;background:white; }
.preview-heading h2 { font:600 29px "Source Serif 4",serif;margin:0 0 18px; }.message-card { background:white;border:1px solid var(--line);border-radius:6px;padding:17px;margin-bottom:14px; }.message-title { display:flex;align-items:center;gap:10px; }.message-title>span { width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#e8eef8;color:var(--blue);font-size:11px;font-weight:700; }.message-title h3,.message-title small { margin:0;display:block; }.message-title h3 { font-size:14px; }.message-title small { color:var(--muted);font-size:11px;margin-top:2px; }.message-card textarea { width:100%;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:14px 0;padding:13px 2px;resize:vertical;background:#fff;color:var(--ink);line-height:1.5; }.channel-row { display:flex;gap:7px;flex-wrap:wrap; }.channel,.copy-button { border:1px solid var(--line);background:white;border-radius:4px;padding:8px 10px;font-size:11px;font-weight:600;cursor:pointer; }.whatsapp { color:#18794e; }.email { color:var(--blue); }.copy-button { margin-left:auto;color:var(--muted); }
.history-section { margin-top:42px;display:grid;grid-template-columns:1fr auto; }.history-section h2 { font:600 29px "Source Serif 4",serif;margin:0; }.history-list { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px; }.history-item { background:white;border:1px solid var(--line);padding:14px;border-radius:5px; }.history-item strong,.history-item span { display:block; }.history-item span { color:var(--muted);font-size:11px;margin-top:4px; }
dialog { width:min(760px,calc(100% - 24px));border:0;border-radius:7px;padding:0;box-shadow:0 30px 90px rgba(10,25,50,.3); } dialog::backdrop { background:rgba(19,30,47,.56); }.dialog-shell { padding:26px; }.dialog-shell header { display:flex;justify-content:space-between; }.dialog-shell h2 { font:600 31px "Source Serif 4",serif;margin:0; }.dialog-close { border:0;background:transparent;font-size:30px;cursor:pointer; }.dialog-lead { color:var(--muted); }.profile-list { display:grid;gap:8px;margin:18px 0; }.profile-row { display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:12px;border-radius:5px; }.profile-row small { display:block;color:var(--muted); }.profile-row div:last-child { display:flex;gap:5px; }.profile-row button { border:1px solid var(--line);background:white;border-radius:4px;padding:6px 9px;cursor:pointer; }.dialog-shell fieldset { border:0;border-top:1px solid var(--line);padding:20px 0 0;margin-top:20px; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px; }.wide { grid-column:1/-1; }.editor-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:18px; }.dialog-shell footer { border-top:1px solid var(--line);display:flex;gap:20px;margin-top:24px;padding-top:14px; }.import-label { cursor:pointer; }
.toast { position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#182236;color:white;padding:11px 17px;border-radius:5px;opacity:0;pointer-events:none;transition:.2s;z-index:20; }.toast.show { opacity:1;transform:translate(-50%,0); }
@media(max-width:850px){.workspace{grid-template-columns:1fr}.composer{border-right:0;border-bottom:1px solid var(--line)}.preview-pane{min-height:0}.empty-preview{min-height:260px}.history-list{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.app-header{padding:0 13px}.privacy{display:none}.header-actions .button{font-size:12px;padding:8px}.page{padding:28px 12px 50px}.composer,.preview-pane{padding:19px}.child-options,.reason-grid,.destination-row,.form-grid{grid-template-columns:1fr}.date-grid{grid-template-columns:1fr}.date-grid>span{display:none}.history-list{grid-template-columns:1fr}.wide{grid-column:auto}.channel-row{gap:5px}.copy-button{margin-left:0}}
.family-auth{position:fixed;inset:0;z-index:50;background:#f7f8fa;display:grid;place-items:center;padding:20px}.family-auth[hidden]{display:none}.family-auth-panel{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:7px;padding:30px;box-shadow:var(--shadow)}.family-logo{width:45px;height:45px;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;font:600 26px "Source Serif 4",serif;margin-bottom:20px}.family-auth-panel h1{font:600 34px/1.08 "Source Serif 4",serif;margin:0}.family-auth-panel>p:not(.eyebrow):not(.auth-error){color:var(--muted);line-height:1.5}.family-auth-panel label{display:block;color:var(--muted);font-size:12px;font-weight:600;margin:12px 0}.family-auth-panel label[hidden]{display:none}.family-auth-panel input{display:block;width:100%;margin-top:6px;border:1px solid #bdc8d6;border-radius:5px;padding:11px}.family-auth-panel .primary{width:100%;margin-top:8px}.family-auth-panel .text-button{display:block;margin:10px auto 0}.auth-error{background:#fff0ed;color:#8b3025;padding:10px;border-radius:4px}.family-session{background:#173f31;color:#fff;padding:7px max(22px,5vw);display:flex;justify-content:flex-end;align-items:center;gap:10px;font-size:12px}.family-session button{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:4px;padding:5px 8px;cursor:pointer}.family-audit{border-top:1px solid var(--line);padding-top:35px}.audit-detail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audit-action{font-weight:700;color:var(--blue)}