@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root { color-scheme: light; --ink:#17231f; --ink-soft:#2a3934; --paper:#f4f1e9; --cream:#fffdf7; --line:#dcd7cc; --muted:#66736e; --accent:#c95735; --accent-dark:#994027; --sun:#e8b45d; --success:#22603b; --danger:#9d2e22; --font-display:"Fraunces","Iowan Old Style",Georgia,serif; --font-body:"DM Sans","Segoe UI",sans-serif; font-family:var(--font-body); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background:var(--cream); color:var(--ink); margin:0; min-width:0; }
button, input, select, textarea { font:inherit; }
button, a { touch-action:manipulation; }
a { color:var(--accent-dark); }
a:hover { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="-1"]:focus-visible { outline:3px solid #e26b42; outline-offset:3px; }
.skip-link { background:#fff; color:var(--ink); font-weight:800; left:1rem; padding:.8rem 1rem; position:fixed; top:-5rem; z-index:9999; }
.skip-link:focus { top:1rem; }
.visually-hidden-honeypot { height:0; overflow:hidden; position:absolute; width:0; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Identity and account views share the same studio-like visual language. */
.account-content > h1,
.account-content > .row,
.account-content > section { margin-left:auto; margin-right:auto; max-width:68rem; }
.account-content > h1 { font-family:var(--font-display); font-size:clamp(2.8rem,6vw,5.4rem); letter-spacing:-.045em; line-height:.95; margin-bottom:2rem; margin-top:clamp(2rem,6vw,5rem); padding:0 1.25rem; }
.account-content > .row { display:grid; gap:2rem; grid-template-columns:minmax(0,1.1fr) minmax(16rem,.7fr); padding:0 1.25rem 5rem; }
.account-content .row section { background:#fff; border:1px solid var(--line); border-radius:1.3rem; padding:clamp(1.25rem,4vw,2.5rem); }
.account-content .row h2,
.account-content .row h3 { font-family:var(--font-display); font-size:clamp(1.45rem,3vw,2rem); margin-top:0; }
.account-content .row hr { border:0; border-top:1px solid var(--line); margin:1.2rem 0; }
.form-floating,
.form-check,
.checkbox { display:grid; gap:.42rem; margin-bottom:1rem; }
.form-floating { position:relative; }
.form-floating label { font-size:.78rem; font-weight:800; order:-1; }
.form-control { background:#faf8f2; border:1px solid #aaa69d; border-radius:.72rem; color:var(--ink); min-height:3.25rem; padding:.8rem 1rem; width:100%; }
.form-check,
.checkbox { align-items:start; display:flex; gap:.65rem; }
.form-check-input { height:1.25rem; margin:.1rem 0 0; width:1.25rem; }
.btn { border:0; border-radius:999px; cursor:pointer; font-weight:800; min-height:3.2rem; padding:.8rem 1.35rem; }
.btn-primary { background:var(--ink); color:#fff; }
.w-100 { width:100%; }
.nav { list-style:none; margin:0; padding:0; }
.nav-link { display:block; }
.nav-pills .nav-link { border-radius:.6rem; color:var(--ink); font-weight:700; padding:.75rem; }
.nav-pills .nav-link.active { background:var(--ink); color:#fff; }
.app-content > h1 { font-family:var(--font-display); font-size:clamp(2.3rem,5vw,4rem); margin-top:0; }
.app-content > .row { display:grid; gap:2rem; grid-template-columns:minmax(12rem,.32fr) minmax(0,1fr); }
.app-content .form-control { background:#fff; }
.alert { border-left:4px solid currentColor; border-radius:.5rem; padding:1rem; }
.alert-success { background:#e5f0e7; color:var(--success); }
.alert-danger { background:#f9e2dc; color:var(--danger); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width:760px) {
    .account-content > .row,
    .app-content > .row { grid-template-columns:1fr; }
    .account-content > h1 { margin-top:2rem; }
}

/* EditForm renders a child component: style its root outside CSS isolation. */
.app-content .settings-form { background:var(--cream); border:1px solid var(--line); border-radius:1.1rem; margin:0 auto; max-width:1180px; overflow:hidden; box-shadow:0 1.2rem 3.5rem rgba(35,41,34,.05); }
.app-content .key-form { background:var(--cream); border:1px solid var(--line); border-radius:1rem; display:grid; gap:2rem; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); margin:0 auto; max-width:1080px; padding:clamp(1.5rem,4vw,3rem); }
.account-content > p, .account-content > h2 { margin-inline:1.25rem; line-height:1.6; }
.account-content > hr { border:0; border-top:1px solid var(--line); margin:1.5rem 1.25rem; }
@media(max-width:760px) { .app-content .key-form{grid-template-columns:minmax(0,1fr)} }

/* Account layout is explicitly scoped so it cannot resize landing-page sections. */
.account-content { width:min(100%, 72rem); margin-inline:auto; padding:1.25rem; overflow-wrap:anywhere; }
.account-content > .row { align-items:start; }
.account-content .row > div { min-width:0; }
.account-content .row > div > form { background:#fff; border:1px solid var(--line); border-radius:1.3rem; padding:clamp(1.25rem,4vw,2.5rem); }
.account-content .row > div > h2 { margin-top:0; }
.account-content .checkbox label { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; }
.account-content .form-check { flex-wrap:wrap; }
.account-content .form-check .validation-message { flex-basis:100%; }
.account-content .btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.account-content .btn-danger { background:var(--danger); color:white; }
.account-content .text-danger, .validation-message { color:var(--danger); }
@media(max-width:760px) { .account-content{padding:.75rem}.account-content > h1{font-size:clamp(2.3rem,8vw,3.4rem);line-height:1.07}.account-content > .row{padding-inline:0} }

/* Login and registration own their width and gutters explicitly. */
.auth-page { width:min(100%, 72rem); margin:0 auto; padding:clamp(2.25rem,6vw,5.5rem) clamp(1rem,4vw,2rem) 5rem; }
.auth-heading { margin-bottom:clamp(1.75rem,4vw,3rem); max-width:56rem; }
.auth-heading h1 { font-family:var(--font-display); font-size:clamp(2.75rem,6vw,5.4rem); letter-spacing:-.045em; line-height:.98; margin:.65rem 0 1rem; }
.auth-heading > p:last-child { color:var(--muted); font-size:1.02rem; line-height:1.6; margin:0; }
.auth-eyebrow { color:var(--accent-dark); font-size:.68rem; font-weight:800; letter-spacing:.14em; margin:0; text-transform:uppercase; }
.auth-grid { align-items:start; display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:minmax(0,1.15fr) minmax(17rem,.75fr); }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:1.25rem; min-width:0; padding:clamp(1.25rem,4vw,2.5rem); }
.auth-card h2 { font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.025em; margin-top:0; }
.auth-card hr { border:0; border-top:1px solid var(--line); margin:1.25rem 0; }
.auth-card form { background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; }
.auth-aside { position:sticky; top:1.5rem; }
@media(max-width:760px) {
    .auth-page { padding:2rem 1rem 3rem; }
    .auth-grid { grid-template-columns:minmax(0,1fr); }
    .auth-heading h1 { font-size:clamp(2.5rem,11vw,3.6rem); }
    .auth-aside { position:static; }
}

.preview-pagination { align-items:center; border-top:1px solid var(--line); display:flex; gap:1rem; justify-content:flex-end; padding:1rem 1.4rem; }
.preview-pagination button { background:#fff; border:1px solid #99948a; border-radius:999px; color:var(--ink); cursor:pointer; font-weight:800; min-height:2.75rem; padding:.6rem .9rem; }
.preview-pagination button:disabled { cursor:default; opacity:.45; }
.preview-pagination span { color:var(--muted); font-size:.75rem; font-weight:700; }
@media(max-width:520px) { .preview-pagination { align-items:stretch; flex-direction:column; } }
.catalog-report { background:#fff8e8; border:1px solid #e0c48a; border-radius:1rem; margin:1rem auto; max-width:1080px; padding:1rem 1.3rem; }
.catalog-report > div { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; }
.catalog-report span { color:var(--muted); font-size:.75rem; }
.catalog-report strong { color:var(--ink); display:block; font-family:var(--font-display); font-size:1.35rem; }