:root { --color-primary: #173e39; --color-bg: #f6f8fa; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: var(--rr-heading-color, var(--color-primary)); text-underline-offset: .2em; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--rr-heading-color, var(--color-primary)); outline-offset: 4px; }
.public-environment { padding: .15rem 1rem; color: white; background: var(--rr-button-color, var(--color-primary)); text-align: center; font-weight: bold; }
.public-main { min-height: 100svh; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.public-welcome { background-image: linear-gradient(#173e392b, #173e394d), var(--public-background, none); background-position: center; background-size: cover; background-attachment: fixed; }
.public-card { max-width: 48rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); border-radius: var(--rr-corner-radius); background: color-mix(in srgb, var(--color-surface) 96%, transparent); box-shadow: 0 .5rem 2rem #00000014; }
.public-brand { display: block; width: fit-content; margin: 0 auto 1.5rem; }
.public-welcome .public-card { padding-top: 1rem; }
.public-welcome .public-language { margin-bottom: 0; }
.public-welcome .public-brand { width: calc(94px * var(--rr-display-scale, 1)); }
.public-brand img { display: block; max-width: 100%; height: auto; }
body[data-page="install"] .public-language { float: right; }
body[data-page="install"] .public-brand { margin-left: 0; margin-right: 0; }
body[data-page="install"] .public-card > h1 { clear: both; }
h1, h2, h3 { color: var(--rr-heading-color, var(--color-primary)); line-height: 1.25; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h2 { margin-top: 1.8rem; font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
.public-intro { font-size: 1.15rem; }
.public-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; align-items: center; }
.public-button { display: inline-flex; justify-content: center; align-items: center; min-height: var(--rr-space-44); padding: .65rem 1rem; border: 2px solid var(--rr-heading-color, var(--color-primary)); border-radius: var(--rr-corner-radius); background: var(--rr-button-color, var(--color-primary)); color: white; text-align: center; text-decoration: none; font-weight: bold; cursor: pointer; }
.public-button-outline { color: var(--rr-heading-color, var(--color-primary)); background: var(--color-surface, #fff); }
.public-features { padding-inline-start: 1.3rem; padding-inline-end: 0; }
li { margin-block: .6rem; }
.public-notice { padding: 1rem; border-left: 4px solid var(--rr-heading-color, var(--color-primary)); background: var(--color-bg); border-radius: var(--rr-corner-radius); }
.public-help { font-size: .95rem; }
.install-selectors { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.install-selectors label { flex: 1 1 13rem; font-weight: bold; }
select, input { display: block; width: 100%; min-height: var(--rr-space-44); padding: .5rem; border: 1px solid var(--rr-heading-color, var(--color-primary)); border-radius: var(--rr-corner-radius); background: var(--color-bg); color: var(--color-text); }
.install-address { margin-block: 1.5rem; }
.install-address input { margin-block: .5rem; }
footer { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .9rem; }
.public-language { display: flex; justify-content: end; margin-bottom: 1rem; }
.language-selector { position: relative; }
.language-selector summary { cursor: pointer; padding: .5rem; min-height: var(--rr-space-44); color: var(--rr-heading-color, var(--color-primary)); }
.language-selector-menu { position: absolute; right: 0; z-index: 2; width: min(18rem, 75vw); max-height: 55vh; overflow-y: auto; border: 1px solid var(--rr-heading-color, var(--color-primary)); background: var(--color-surface, #fff); box-shadow: 0 .5rem 1rem #0002; }
.language-selector-option { display: block; width: 100%; min-height: var(--rr-space-44); border: 0; padding: .5rem 1rem; text-align: start; color: var(--rr-heading-color, var(--color-primary)); background: var(--color-surface, #fff); cursor: pointer; }
.language-selector-option:hover, .language-selector-option.is-current { background: var(--color-bg); }
.language-selector-english-name { display: block; font-size: .85rem; }
@media (max-width: 480px) { .public-actions { flex-direction: column; align-items: stretch; } .public-card { border-radius: var(--rr-corner-radius); } }



@media (display-mode: window-controls-overlay) {
    body { padding-top: var(--rr-window-titlebar-inset, var(--rr-space-32)); }
}

.install-return { margin: .5rem 0 1rem; font-size: .875rem; }

[data-install-switch-step] .install-address { display: block; margin-block: .5rem; }

.install-control-icon { display: inline-block; width: var(--rr-space-32); height: var(--rr-space-32); vertical-align: middle; margin-inline: .25rem; padding: var(--rr-space-4); border-radius: var(--rr-corner-radius); background: var(--color-surface, #fff); }

.install-instructions > [data-install-instructions] { margin-top: .75rem; }

.install-actions { display: flex; align-items: center; margin-bottom: 0; }
.install-help-toggle { margin: 0 0 0 var(--rr-space-24); padding: 0; border: 0; background: transparent; color: var(--rr-heading-color, var(--color-primary)); font: inherit; text-decoration: underline; cursor: pointer; }
.install-instructions { margin-bottom: 0; }

.invitation-recovery-actions { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 24px; }
.invitation-recovery-actions > .public-button { flex: 0 0 auto; width: auto; }

.invitation-acceptance-page .public-card.auth-screen { padding-bottom: 24px; }
.invitation-acceptance-page .auth-screen > :last-child,
.invitation-recovery-actions { margin-bottom: 0; padding-bottom: 0; }
.invitation-recovery-actions > .public-button { margin-bottom: 0; }

.invitation-acceptance-page .field-stack input[name="email"] { width: 100%; margin-bottom: 0; }

[data-auth-result-dialog] .dialog-actions { margin: 0; }
[data-auth-result-dialog] p { overflow-wrap: anywhere; }

#invitation-result-message { white-space: pre-line; }

body[data-page="welcome"] .welcome-content { display: grid; gap: 0; max-width: 48rem; margin: 0 auto; }
body[data-page="welcome"] .public-card { width: 100%; min-width: 0; margin: 0; padding: 24px; background: var(--welcome-card-surface, var(--color-surface, #fff)); overflow-wrap: anywhere; }
body[data-page="welcome"] .welcome-overview, body[data-page="welcome"] .welcome-getting-started-card { display: grid; gap: 16px; }
body[data-page="welcome"] .welcome-header { position: relative; z-index: 2; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body[data-page="welcome"] .public-brand, body[data-page="welcome"] .public-language { margin: 0; }
body[data-page="welcome"] .public-brand { flex-shrink: 0; }
body[data-page="welcome"] h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
body[data-page="welcome"] .public-intro { margin: 8px 0 0; font-size: 1rem; }
body[data-page="welcome"] .welcome-entry-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body[data-page="welcome"] .welcome-entry-paths > :only-child { grid-column: 1 / -1; }
body[data-page="welcome"] .welcome-entry-path { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--color-border, #dde3ea); border-radius: var(--rr-corner-radius); }
body[data-page="welcome"] .welcome-entry-path h2 { flex: 1; margin: 0; font-size: 1rem; }
body[data-page="welcome"] .public-button { min-height: max(44px, var(--rr-space-44, 44px)); }
body[data-page="welcome"] .welcome-login { margin: 0; text-align: center; }
body[data-page="welcome"] .welcome-login a { display: inline-flex; align-items: center; min-height: max(44px, var(--rr-space-44, 44px)); font-weight: bold; }
body[data-page="welcome"] .welcome-footer { justify-content: center; gap: 8px 16px; border-top: 0; }
body[data-page="welcome"] .welcome-footer a { display: inline-flex; align-items: center; min-height: max(44px, var(--rr-space-44, 44px)); }
body[data-page="welcome"] .public-notice { margin: 0; padding: 12px; font-size: .875rem; }
@media (max-width: 767px) {
    body[data-page="welcome"] .public-card { padding: 16px; }
    body[data-page="welcome"] .welcome-entry-paths { grid-template-columns: minmax(0, 1fr); }
}

body[data-page="welcome"] :is(.welcome-features, .welcome-benefits) h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
body[data-page="welcome"] :is(.welcome-features, .welcome-benefits) .public-features { margin-block: 0; }

body[data-page="welcome"] .welcome-features-toggle { display: flex; align-items: center; min-height: max(44px, var(--rr-space-44, 44px)); padding: 0; border: 0; background: transparent; color: var(--rr-heading-color, var(--color-primary)); font: inherit; text-decoration: underline; cursor: pointer; }

body[data-page="welcome"] .welcome-getting-started { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }

body[data-page="welcome"] { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body[data-page="welcome"] > .public-environment { flex-shrink: 0; }
body[data-page="welcome"] > .public-main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
body[data-page="welcome"] > .public-main::-webkit-scrollbar { display: none; }

body[data-page="welcome"] { background-image: linear-gradient(#173e392b, #173e394d), var(--public-background, none); background-position: center; background-size: cover; background-attachment: fixed; }
body[data-page="welcome"] > .public-welcome { background-image: none; }

body[data-page="welcome"] .welcome-static-card { position: relative; z-index: 2; max-width: 48rem; margin: 0 auto 24px; }
body[data-page="welcome"] .welcome-static-card .welcome-header { gap: 8px; }
body[data-page="welcome"] .welcome-static-card .public-brand { width: clamp(44px, 8vw, 94px); }
body[data-page="welcome"] .welcome-static-caption { margin: 16px 0 0; color: var(--rr-heading-color, var(--color-primary)); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; }
body[data-page="welcome"] .welcome-static-card .public-language { flex-shrink: 0; }
body[data-page="welcome"] .welcome-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
body[data-page="welcome"] .welcome-shortcuts > a { display: inline-flex; align-items: center; min-height: max(44px, var(--rr-space-44, 44px)); font-weight: bold; }
body[data-page="welcome"] .welcome-footer .public-notice { flex-basis: 100%; }
body[data-page="welcome"] .welcome-content > .public-card + .public-card { margin-top: 24px; }
body[data-page="welcome"][data-mobile-layout] .welcome-content > .public-card + .public-card { margin-top: 12px; }
body[data-page="welcome"][data-mobile-layout] .welcome-static-card { margin-bottom: 12px; }

body[data-page="welcome"] { --welcome-card-surface: rgb(242, 232, 216); }
body[data-page="welcome"] .public-card {
    padding: var(--rr-space-16);
    border: 1px solid color-mix(in srgb, var(--color-surface) 48%, transparent);
    border-radius: var(--rr-corner-radius);
    box-shadow: 0 18px 50px rgba(28, 36, 30, 0.22);
}
body[data-page="welcome"][data-mobile-layout] .public-card {
    padding: var(--rr-space-12);
}
@supports (background: color-mix(in srgb, white 90%, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body[data-page="welcome"] .public-card {
        background: rgba(242, 232, 216, 0.36);
        -webkit-backdrop-filter: blur(4px) saturate(1.12);
        backdrop-filter: blur(4px) saturate(1.12);
    }
}
@media (prefers-reduced-transparency: reduce) {
    body[data-page="welcome"] .public-card {
        background: var(--welcome-card-surface, var(--color-surface, #fff));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (forced-colors: active) {
    body[data-page="welcome"] .public-card {
        background: Canvas;
        color: CanvasText;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

body[data-page="welcome"] .language-selector-menu { right: auto; inset-inline-end: 0; }

body[data-page="welcome"] > .welcome-fixed-header {
    flex: 0 0 auto;
    width: min(48rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 16px 0;
    padding-top: max(16px, env(safe-area-inset-top));
    z-index: 3;
}

body[data-page="welcome"] .welcome-fixed-header .public-brand {
    position: relative;
    isolation: isolate;
    width: clamp(88px, 16vw, 188px);
}

body[data-page="welcome"] .welcome-fixed-header .public-brand img {
    width: 100%;
}

body[data-page="welcome"] .welcome-fixed-header .public-language {
    position: relative;
    isolation: isolate;
}

body[data-page="welcome"] .welcome-fixed-header :is(.public-brand, .public-language)::before {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 252, 238, 0.98) 0%, rgba(255, 248, 226, 0.86) 36%, rgba(255, 240, 205, 0.58) 62%, rgba(255, 232, 190, 0) 100%);
    filter: blur(14px);
    pointer-events: none;
}

body[data-page="welcome"] .welcome-fixed-header .public-brand::before {
    inset: -32px -64px;
}

body[data-page="welcome"] .welcome-fixed-header .public-language::before {
    inset: -6px -16px;
}

body[data-page="welcome"] > .public-main {
    width: min(48rem, calc(100% - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right))));
    margin: 16px auto 0;
    padding: 0 0 max(1rem, env(safe-area-inset-bottom));
    border-radius: var(--rr-corner-radius) var(--rr-corner-radius) 0 0;
    clip-path: inset(0 round var(--rr-corner-radius) var(--rr-corner-radius) 0 0);
}

body[data-page="welcome"] .public-card {
    position: relative;
    isolation: isolate;
}

body[data-page="welcome"] .public-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(255, 252, 238, 0.98) 0%, rgba(255, 248, 226, 0.86) 36%, rgba(255, 240, 205, 0.58) 62%, rgba(255, 232, 190, 0) 100%);
    filter: blur(14px);
    pointer-events: none;
}

html[data-appearance="dark"] body[data-page="welcome"] .public-card::before {
    background: radial-gradient(ellipse at center, #17211ff5, #17211fe0 45%, transparent 100%);
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    body[data-page="welcome"] .public-card::before {
        display: none;
    }
}
