@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root { --auth-ink: #17211f; --auth-muted: #63706d; --auth-paper: #f3f2ec; --auth-surface: #fff; --auth-line: #d7dad3; --auth-green: #287271; --auth-green-dark: #173f3e; --auth-coral: #d86f59; --auth-gold: #d5a53b; --auth-danger: #a83d39; }
* { box-sizing: border-box; }
body.auth-page { min-height: 100vh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; color: var(--auth-ink); background-color: var(--auth-paper); background-image: linear-gradient(rgba(40,114,113,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,114,113,.035) 1px, transparent 1px); background-size: 30px 30px; font: 16px/1.4 "Source Sans 3", sans-serif; }
.auth-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--auth-line); background: rgba(255,255,255,.82); backdrop-filter: blur(12px); }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.auth-brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--auth-green-dark); font: 700 14px "Sora", sans-serif; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font: 700 16px "Sora", sans-serif; }
.auth-brand small { color: var(--auth-muted); }
.install-app-button { min-height: 42px; padding: 8px 13px; border: 1px solid var(--auth-green); border-radius: 6px; color: var(--auth-green-dark); background: #fff; font-weight: 700; cursor: pointer; }
.install-app-button:hover { color: #fff; background: var(--auth-green); }
.auth-main { display: grid; align-items: center; width: 100%; max-width: 1440px; margin: auto; padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 56px); }
.auth-grid { display: grid; grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr); gap: clamp(28px, 6vw, 86px); align-items: center; }
.auth-form-panel { width: 100%; max-width: 480px; }
.auth-eyebrow { margin: 0 0 5px; color: var(--auth-green); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-form-panel h1 { max-width: 520px; margin: 0 0 10px; font: 700 clamp(29px, 4vw, 45px)/1.08 "Sora", sans-serif; letter-spacing: 0; }
.auth-intro { max-width: 500px; margin: 0 0 22px; color: var(--auth-muted); font-size: 17px; }
.auth-alert { margin-bottom: 14px; padding: 10px 12px; border-left: 4px solid var(--auth-danger); border-radius: 0 5px 5px 0; background: #fff0ee; }
.auth-alert-success { border-color: var(--auth-green); background: #e7f2ed; }
.auth-form { display: grid; gap: 13px; }
.auth-field label, .auth-label-row label { display: block; margin: 0 0 5px; font-weight: 700; }
.auth-label-row { display: flex; justify-content: space-between; gap: 12px; }
.auth-label-row a, .auth-switch a { color: var(--auth-green-dark); font-weight: 700; }
.auth-field input { width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid #c8cec6; border-radius: 6px; color: var(--auth-ink); background: var(--auth-surface); font: inherit; }
.auth-field input:focus { outline: 3px solid rgba(40,114,113,.17); border-color: var(--auth-green); }
.auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-check { min-height: 34px; display: flex; align-items: center; gap: 9px; color: var(--auth-muted); }
.auth-check input { width: 19px; height: 19px; accent-color: var(--auth-green); }
.auth-submit { min-height: 50px; border: 0; border-radius: 6px; color: #fff; background: var(--auth-green); font: 700 15px "Sora", sans-serif; cursor: pointer; }
.auth-submit:hover { background: var(--auth-green-dark); }
.auth-action-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.auth-register-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--auth-line); }
.auth-register-callout span { color: var(--auth-muted); }
.auth-register-callout strong { color: var(--auth-ink); }
.auth-register-callout a { flex: 0 0 auto; color: var(--auth-green-dark); font-weight: 700; }
.auth-preview { min-width: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--auth-line); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 28px 70px rgba(23,33,31,.11); }
.preview-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.preview-heading h2 { margin: 0; font: 600 clamp(20px, 2.4vw, 28px) "Sora", sans-serif; }
.preview-people { display: flex; padding-left: 12px; }
.preview-avatar { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -12px; border: 3px solid #fff; border-radius: 50%; color: #fff; font-weight: 700; }
.avatar-green { background: var(--auth-green); }.avatar-coral { background: var(--auth-coral); }.avatar-gold { background: var(--auth-gold); }
.preview-list { border-top: 1px solid var(--auth-line); }
.preview-event { min-height: 70px; display: grid; grid-template-columns: 58px 5px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #e8e9e4; }
.preview-event time { font-weight: 700; }.preview-event time small { display: block; color: var(--auth-muted); font-weight: 500; }
.preview-line { align-self: stretch; margin-block: 9px; border-radius: 3px; background: var(--event-color); }
.event-green { --event-color: var(--auth-green); }.event-coral { --event-color: var(--auth-coral); }.event-gold { --event-color: var(--auth-gold); }
.preview-event h3 { margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px "Sora", sans-serif; }
.preview-event p { margin: 0; color: var(--auth-muted); }
.repeat-badge { padding: 4px 7px; border-radius: 4px; color: var(--auth-green-dark); background: #e3f0eb; font-size: 12px; font-weight: 700; }
.preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 17px; }
.preview-summary div { padding-left: 10px; border-left: 3px solid var(--auth-line); }
.preview-summary strong, .preview-summary span { display: block; }
.preview-summary strong { font: 600 13px "Sora", sans-serif; }
.preview-summary span { margin-top: 3px; color: var(--auth-muted); font-size: 13px; }
.auth-footer { min-height: 50px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px clamp(18px, 4vw, 56px); border-top: 1px solid var(--auth-line); color: var(--auth-muted); background: rgba(255,255,255,.7); font-size: 14px; }
.auth-footer a { color: var(--auth-green-dark); font-weight: 700; }
.install-dialog { width: min(92vw, 460px); padding: 20px; border: 1px solid var(--auth-line); border-radius: 8px; color: var(--auth-ink); background: #fff; box-shadow: 0 24px 70px rgba(23,33,31,.22); }
.install-dialog::backdrop { background: rgba(17,27,25,.55); }
.install-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.install-dialog h2 { margin: 0; font: 600 20px "Sora", sans-serif; }
.install-dialog p { margin: 14px 0 0; color: var(--auth-muted); }
.install-dialog-header button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--auth-line); border-radius: 5px; color: var(--auth-ink); background: #fff; font-weight: 700; cursor: pointer; }
.register-shell { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(320px, .7fr); gap: clamp(36px, 8vw, 110px); align-items: center; max-width: 1100px; margin: auto; }
.register-panel { max-width: 570px; }
.auth-switch { margin: 15px 0 0; color: var(--auth-muted); text-align: center; }
.register-notes { padding: 24px; border-left: 4px solid var(--auth-green); background: rgba(255,255,255,.68); }
.register-notes h2 { margin: 0 0 18px; font: 600 25px "Sora", sans-serif; }
.register-notes ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.register-notes li { padding-bottom: 12px; border-bottom: 1px solid var(--auth-line); }
.register-notes strong, .register-notes span { display: block; }.register-notes span { margin-top: 2px; color: var(--auth-muted); }
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; gap: 24px; }.auth-form-panel { max-width: none; }.auth-preview { padding: 18px; }.register-shell { grid-template-columns: 1fr; gap: 24px; }.register-panel { max-width: none; }.register-notes { display: none; } }
@media (max-width: 600px) { .auth-header { min-height: 58px; }.auth-brand-mark { width: 38px; height: 38px; }.auth-main { align-items: start; padding-block: 20px; }.auth-form-panel h1 { font-size: 28px; }.auth-intro { margin-bottom: 16px; font-size: 16px; }.auth-preview { padding: 14px; }.preview-summary { grid-template-columns: 1fr; gap: 8px; }.preview-summary div { padding-block: 3px; }.preview-event { grid-template-columns: 52px 4px minmax(0,1fr); }.repeat-badge { display: none; }.auth-register-callout { align-items: flex-start; flex-direction: column; gap: 5px; }.auth-field-row { grid-template-columns: 1fr; gap: 13px; }.auth-footer { align-items: flex-start; flex-direction: column; gap: 2px; }.register-notes { display: none; } }