:root { color-scheme:light; --teal:#174f9b; --navy:#102f5f; --navy-deep:#0b2348; --gold:#c99a2e; --ink:#172a46; --paper:#f4f7fb; --line:#dce4ef; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next","Segoe UI",Arial,sans-serif; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.6; cursor:not-allowed; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Georgia,"Times New Roman",serif; } h1 { margin-bottom:.35rem; font-size:clamp(2rem,4vw,2.8rem); line-height:1.08; }
label { display:grid; gap:.4rem; color:#405a55; font-size:.82rem; font-weight:700; }
input,textarea,select { width:100%; border:1px solid #cedbd8; border-radius:.7rem; background:#fff; padding:.72rem .8rem; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgb(15 118 110 / 10%); }
[hidden] { display:none!important; }
.auth-shell { display:grid; min-height:100vh; place-items:center; padding:clamp(1rem,4vw,3rem); background:radial-gradient(circle at 15% 10%,#dbe7f7 0,transparent 35%),linear-gradient(145deg,#f8fafc,#e9eff7); }
.auth-frame { display:grid; width:min(100%,1040px); min-height:630px; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); overflow:hidden; border:1px solid rgb(255 255 255 / 70%); border-radius:1.6rem; background:#fff; box-shadow:0 35px 90px rgb(15 42 79 / 20%); }
.auth-brand-panel { display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; background:radial-gradient(circle at 80% 15%,rgb(60 113 183 / 70%),transparent 38%),linear-gradient(150deg,var(--navy-deep),#174f9b); padding:2.5rem; color:#fff; }
.auth-brand-panel::after { content:""; position:absolute; right:-130px; bottom:-180px; width:420px; height:420px; border:1px solid rgb(255 255 255 / 14%); border-radius:50%; box-shadow:0 0 0 70px rgb(255 255 255 / 4%),0 0 0 140px rgb(255 255 255 / 3%); }
.auth-brand-heading { display:flex; align-items:center; gap:1rem; position:relative; z-index:1; }
.auth-brand-heading p { margin:0 0 .2rem; font-family:Georgia,serif; font-size:1rem; font-weight:700; }
.auth-brand-heading span { color:#cddcf0; font-size:.76rem; }
.auth-message { position:relative; z-index:1; max-width:520px; }
.auth-message h1 { margin:.5rem 0 1rem; color:#fff; font-size:clamp(2.4rem,5vw,4rem); line-height:1.04; }
.auth-message > p:last-child { max-width:480px; color:#d9e4f3; font-size:1rem; line-height:1.7; }
.trust-row { display:flex; position:relative; z-index:1; gap:1.5rem; color:#e4edf8; font-size:.72rem; font-weight:700; }
.trust-row span::before { content:"✓"; display:inline-grid; width:1.25rem; height:1.25rem; margin-right:.45rem; place-items:center; border-radius:50%; background:rgb(255 255 255 / 14%); color:#f2cf78; }
.login-card { display:flex; flex-direction:column; justify-content:center; width:100%; background:#fff; padding:clamp(2rem,5vw,3.4rem); }
.login-card h2 { margin:.25rem 0 .55rem; font-size:2.1rem; }
.login-logo { display:block; width:92px; height:94px; margin:0; border:2px solid #e8ca7f; border-radius:.8rem; background:#fff; object-fit:contain; box-shadow:0 10px 26px rgb(5 24 52 / 25%); }
.login-submit { width:100%; margin-top:.2rem; padding:.85rem 1rem; }
.login-help { margin:1.3rem 0 0; border-top:1px solid var(--line); padding-top:1rem; color:#8190a2; font-size:.72rem; text-align:center; }
.brand-mark { display:grid; width:3rem; height:3rem; place-items:center; border-radius:.9rem; background:var(--teal); color:#fff; font-size:1.5rem; }
.brand-mark.small { width:2.5rem; height:2.5rem; border-radius:.75rem; font-size:1.1rem; }
.eyebrow { margin:0 0 .55rem; color:var(--teal); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; } .eyebrow.light { color:#edcf83; }
.subtle { color:#637773; line-height:1.5; } .stack { display:grid; gap:1rem; }
.primary,.secondary { border:0; border-radius:.65rem; padding:.7rem 1rem; font-weight:800; transition:transform .15s ease,box-shadow .15s ease; }
.primary { background:linear-gradient(135deg,#174f9b,#123d78); color:#fff; box-shadow:0 8px 20px rgb(23 79 155 / 20%); }
.primary:hover { transform:translateY(-1px); box-shadow:0 12px 25px rgb(23 79 155 / 25%); }
.secondary { border:1px solid var(--line); background:#fff; color:#48605b; }
.error { min-height:1.1rem; color:#b42318; font-size:.8rem; }
.topbar { display:flex; align-items:center; justify-content:space-between; position:sticky; z-index:10; top:0; gap:1rem; border-top:4px solid var(--gold); border-bottom:1px solid var(--line); background:rgb(255 255 255 / 96%); padding:.72rem clamp(1rem,4vw,2rem); box-shadow:0 4px 18px rgb(22 50 91 / 6%); backdrop-filter:blur(12px); }
.brand,.account { display:flex; align-items:center; gap:.75rem; } .brand strong,.brand small { display:block; } .brand small { margin-top:.2rem; color:#71817d; } .account { font-size:.82rem; color:#5b706b; }
.account-identity { display:grid; justify-items:end; gap:.15rem; } .account-identity > span { display:flex; align-items:center; gap:.35rem; }
.header-logo { width:58px; height:58px; border:1px solid #ecd69f; border-radius:.55rem; background:#fff; object-fit:contain; }
.layout { display:grid; max-width:1240px; margin:auto; padding:2rem clamp(1rem,4vw,2rem) 4rem; gap:2rem; }
nav { display:grid; align-content:start; position:sticky; top:104px; gap:.45rem; height:max-content; border:1px solid var(--line); border-radius:1rem; background:#fff; padding:.65rem; box-shadow:0 8px 28px rgb(24 51 89 / 5%); }
.nav-button { border:0; border-radius:.65rem; background:transparent; padding:.78rem .85rem; color:#52657c; font-weight:750; text-align:left; } .nav-button:hover { background:#f1f5fa; color:var(--navy); } .nav-button.active { background:linear-gradient(135deg,#174f9b,#113c76); color:#fff; box-shadow:0 6px 14px rgb(23 79 155 / 18%); }
.title-row,.panel-head,.actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dashboard-hero { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; overflow:hidden; position:relative; border-radius:1.25rem; background:radial-gradient(circle at 85% 10%,#386cab,transparent 34%),linear-gradient(135deg,var(--navy-deep),#164c92); padding:clamp(1.5rem,4vw,2.5rem); color:#fff; box-shadow:0 18px 42px rgb(16 47 95 / 18%); }
.dashboard-hero::after { content:""; position:absolute; right:-70px; bottom:-140px; width:300px; height:300px; border:1px solid rgb(255 255 255 / 12%); border-radius:50%; }
.dashboard-hero h1 { position:relative; z-index:1; margin:0 0 .65rem; color:#fff; }
.dashboard-hero p:not(.eyebrow) { position:relative; z-index:1; max-width:590px; margin-bottom:1.2rem; color:#d9e4f3; line-height:1.55; }
.hero-button { position:relative; z-index:1; border:0; border-radius:.65rem; background:var(--gold); color:#fff; padding:.78rem 1.05rem; font-weight:850; box-shadow:0 8px 20px rgb(0 0 0 / 14%); }
.hero-button span { margin-left:.45rem; }
.hero-seal { display:grid; position:relative; z-index:1; justify-items:center; gap:.55rem; min-width:130px; }
.hero-seal img { width:118px; height:122px; border:3px solid rgb(234 205 134 / 90%); border-radius:.85rem; background:#fff; object-fit:contain; box-shadow:0 12px 30px rgb(0 0 0 / 25%); }
.hero-seal span { color:#d9e4f3; font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.workflow-strip { display:grid; grid-template-columns:repeat(3,1fr); margin:1rem 0 1.35rem; overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 7px 22px rgb(24 51 89 / 4%); }
.workflow-strip > div { display:flex; align-items:center; gap:.75rem; padding:1rem; border-right:1px solid var(--line); }
.workflow-strip > div:last-child { border-right:0; }
.workflow-strip span { display:grid; width:2rem; height:2rem; flex:0 0 auto; place-items:center; border-radius:50%; background:#e8f0fb; color:var(--teal); font-size:.75rem; font-weight:900; }
.workflow-strip p { margin:0; color:#748397; font-size:.72rem; line-height:1.35; }
.workflow-strip strong { display:block; color:var(--ink); font-size:.82rem; }
.stats { display:grid; grid-template-columns:1fr; gap:1rem; margin:1.4rem 0; }
.stats article,.panel { border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 8px 26px rgb(15 45 39 / 4%); }
.stats article { position:relative; overflow:hidden; padding:1.15rem 1.25rem; } .stats article::before { content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--gold); } .stats strong,.stats span { display:block; } .stats strong { color:var(--navy); font-size:1.8rem; } .stats span { color:#718095; font-size:.75rem; font-weight:700; }
.panel-head { border-bottom:1px solid var(--line); padding:1rem; } .panel-head h2 { margin:0; font-family:inherit; font-size:1rem; } .panel-head input { max-width:240px; }
.record { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid #edf2f7; padding:1.05rem 1.15rem; transition:background .15s ease; } .record:hover { background:#f9fbfd; } .record:last-child { border-bottom:0; } .record p { margin:.35rem 0 0; color:#718095; font-size:.8rem; }
.record-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.print-button { color:#174f9b; text-decoration:none; white-space:nowrap; }
.record-title { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; } .badge { border-radius:999px; padding:.2rem .48rem; font-size:.67rem; font-weight:800; } .badge.green { background:#dcfce7; color:#166534; } .badge.amber { background:#fef3c7; color:#92400e; } .badge.gray { background:#e5e7eb; color:#4b5563; }
.empty { margin:0; padding:2rem; color:#71817d; text-align:center; } .section-stack { margin-top:1.5rem; } .form-section { padding:1.25rem; }
.choice-grid,.check-grid,.form-grid { display:grid; grid-template-columns:1fr; gap:.8rem; }
.choice { display:flex; align-items:flex-start; gap:.7rem; border:1px solid var(--line); border-radius:.8rem; padding:.85rem; } .choice input { width:auto; margin-top:.2rem; accent-color:var(--teal); } .choice strong,.choice small { display:block; } .choice small { margin-top:.2rem; color:#6c7e7a; font-weight:500; line-height:1.4; }
.check-grid label { display:flex; grid-template-columns:auto 1fr; align-items:flex-start; border:1px solid var(--line); border-radius:.75rem; padding:.75rem; } .check-grid input,.affirm input { width:auto; accent-color:var(--teal); }
.notice { margin:1rem 0 0; border-radius:.8rem; background:#fff7ed; padding:.9rem; color:#7c4213; font-size:.8rem; line-height:1.5; }
.form-intro,.privacy-note { color:#66768a; font-size:.8rem; line-height:1.55; }
.subsection-heading { margin:1.4rem 0 .75rem; border-top:1px solid var(--line); padding-top:1.15rem; }
.subsection-heading h3 { margin-bottom:.25rem; color:var(--navy); font-family:Georgia,serif; font-size:1.15rem; }
.subsection-heading p { margin:0; color:#718095; font-size:.78rem; line-height:1.5; }
.allergy-rows { display:grid; margin-bottom:1rem; overflow:hidden; border:1px solid var(--line); border-radius:.8rem; }
.allergy-row { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(120px,.55fr) minmax(210px,1fr); align-items:end; gap:.75rem; border-bottom:1px solid var(--line); padding:.75rem; }
.allergy-row:last-child { border-bottom:0; }
.allergy-row:nth-child(odd) { background:#f8fafc; }
.allergen-name { align-self:center; } .allergen-name strong,.allergen-name small { display:block; } .allergen-name small { margin-top:.18rem; color:#7a8899; font-size:.68rem; }
.consent-review-section { border-top:4px solid var(--gold); }
.consent-language { max-height:520px; overflow:auto; border:1px solid #cdd8e6; border-radius:.85rem; background:#fff; padding:1rem; box-shadow:inset 0 2px 8px rgb(20 48 87 / 4%); }
.consent-language:focus { outline:3px solid rgb(23 79 155 / 12%); border-color:var(--teal); }
.consent-language header { border-bottom:2px solid var(--gold); padding:.35rem .25rem .85rem; text-align:center; }
.consent-language header p { margin:0 0 .35rem; color:#67778a; font-size:.75rem; }
.consent-language header h3 { margin:0; color:var(--navy); font-family:Georgia,serif; font-size:1.2rem; }
.legal-section { margin:0; border-bottom:1px solid #e5eaf1; padding:1rem .25rem; }
.legal-section:last-child { border-bottom:0; }
.legal-section h4 { margin:0 0 .45rem; color:var(--navy); font-size:.82rem; text-transform:uppercase; }
.legal-section p,.legal-section li { color:#415166; font-size:.8rem; line-height:1.55; }
.legal-section p:last-child { margin-bottom:0; }
.legal-section ul { margin:.5rem 0 0; padding-left:1.25rem; }
.legal-section.warning { margin:.8rem 0; border:1px solid #f0c2bd; border-radius:.6rem; background:#fff5f3; padding:.85rem; }
.legal-section.warning h4 { color:#a82b20; }
.legal-section.selected-decision { margin:.8rem 0; border:2px solid #78ad91; border-radius:.6rem; background:#f1faf5; padding:.85rem; }
.legal-section.selected-decision h4 { color:#17633a; }
.legal-section.unselected-decision { opacity:.7; }
.read-confirmation { margin-top:1rem; border-color:#d4b568; background:#fffaf0; }
.read-consent-help { margin:.45rem 0 0; color:#6f7f92; font-size:.7rem; font-weight:700; }
.staff-section { background:#f8fafc; }
.affirm { display:flex; grid-template-columns:auto 1fr; align-items:flex-start; margin-top:1rem; border:1px solid var(--line); border-radius:.75rem; padding:.85rem; } .actions { justify-content:flex-end; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-heading > div { display:flex; align-items:center; gap:.8rem; }
.section-heading h2 { margin:0; }
.section-number { display:grid; width:2.2rem; height:2.2rem; place-items:center; border-radius:50%; background:#e7effa; color:#174f9b; font-weight:900; }
.section-kicker { margin:0 0 .15rem; color:#7a8798; font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.required-note { border-radius:999px; background:#fef3c7; color:#8a5a00; padding:.3rem .55rem; font-size:.66rem; font-weight:800; }
.signature-field { margin-top:1rem; border:1px solid #cbd7e7; border-radius:.85rem; background:#fdfefe; padding:.8rem; transition:.2s ease; }
.signature-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.signature-toolbar strong,.signature-toolbar small { display:block; }
.signature-toolbar small { margin-top:.12rem; color:#77869a; font-size:.72rem; }
.text-button { border:0; background:transparent; color:#174f9b; font-size:.76rem; font-weight:800; }
#signature-pad { display:block; width:100%; height:190px; border:1px dashed #9fb0c6; border-radius:.65rem; background:linear-gradient(#fff,#fbfcfe); cursor:crosshair; touch-action:none; }
.signature-line-label { margin:.45rem 0 0; color:#7a8798; font-size:.68rem; text-align:center; }
.validation-banner { border:1px solid #f3b5b5; border-left:4px solid #c81e1e; border-radius:.7rem; background:#fff3f3; padding:.85rem 1rem; color:#9b1c1c; font-size:.83rem; font-weight:700; }
.user-create-panel { margin:1.5rem 0; } .panel-head p { margin:.25rem 0 0; color:#71817d; font-size:.78rem; }
.user-form-grid { display:grid; grid-template-columns:1fr; gap:1rem; padding:1.2rem; }
.user-form-grid label small { color:#7a8798; font-size:.68rem; font-weight:500; }
.user-form-actions { display:flex; align-items:end; }
.success-message { margin:0; color:#167044; font-size:.8rem; font-weight:700; }
.users-panel { overflow:hidden; } .users-list { display:grid; }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid #edf2f1; padding:1rem 1.2rem; }
.user-row:last-child { border-bottom:0; }
.user-summary,.user-meta,.user-title { display:flex; align-items:center; gap:.65rem; }
.user-summary p { margin:.2rem 0 0; color:#71817d; font-size:.78rem; }
.user-avatar { display:grid; width:2.6rem; height:2.6rem; flex:0 0 auto; place-items:center; border-radius:50%; background:#e7effa; color:#174f9b; font-size:.78rem; font-weight:900; }
.role-badge { display:inline-block; border-radius:999px; background:#e7effa; color:#174f9b; padding:.2rem .48rem; font-size:.65rem; font-weight:850; white-space:nowrap; }
.status-pill { border-radius:999px; padding:.25rem .55rem; font-size:.68rem; font-weight:850; }
.status-pill.active { background:#dcfce7; color:#166534; } .status-pill.inactive { background:#fee2e2; color:#991b1b; }
.invalid-field input,.invalid-field textarea,.invalid-field select,input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"] { border-color:#dc2626; background:#fff7f7; box-shadow:0 0 0 3px rgb(220 38 38 / 10%); }
.choice.invalid-field,.affirm.invalid-field,.signature-field.invalid-field { border-color:#dc2626; background:#fff7f7; box-shadow:0 0 0 3px rgb(220 38 38 / 10%); }
@media (min-width:680px) { .layout { grid-template-columns:220px 1fr; } .stats { grid-template-columns:repeat(3,1fr); } .form-grid,.choice-grid,.check-grid { grid-template-columns:repeat(2,1fr); } .user-form-grid { grid-template-columns:repeat(2,1fr); } .wide { grid-column:1/-1; } }
@media (max-width:820px) { .auth-frame { min-height:0; grid-template-columns:1fr; } .auth-brand-panel { min-height:310px; padding:1.7rem; } .auth-message h1 { font-size:2.55rem; } .login-card { padding:2rem; } }
@media (max-width:679px) { .auth-shell { padding:0; } .auth-frame { min-height:100vh; border:0; border-radius:0; } .auth-brand-panel { min-height:270px; } .auth-message h1 { font-size:2.15rem; } .auth-message > p:last-child,.trust-row { font-size:.72rem; } .topbar,.account,.title-row,.panel-head,.record,.user-row { align-items:stretch; flex-direction:column; } .layout { grid-template-columns:1fr; padding-top:1rem; } nav { grid-template-columns:repeat(2,1fr); position:static; } .account { display:none; } .dashboard-hero { grid-template-columns:1fr; } .hero-seal { display:none; } .workflow-strip { grid-template-columns:1fr; } .workflow-strip > div { border-right:0; border-bottom:1px solid var(--line); } .workflow-strip > div:last-child { border-bottom:0; } .panel-head input { max-width:none; } .record-actions,.user-meta { justify-content:flex-start; flex-wrap:wrap; } .allergy-row { grid-template-columns:1fr; align-items:stretch; } .consent-language { max-height:65vh; } .signature-toolbar { align-items:flex-start; flex-direction:column; } #signature-pad { height:160px; } }