:root {
    --font-ui: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-reading: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: "Cascadia Code", Consolas, "Courier New", monospace;

    --color-bg: #fcfbf8;
    --color-bg-elevated: #ffffff;
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-strong: #ffffff;
    --color-surface-muted: rgba(250, 248, 244, 0.9);
    --color-border: #e0d9cf;
    --color-border-strong: #c9c0b3;
    --color-text: #171411;
    --color-text-soft: #4e473f;
    --color-text-muted: #72685d;
    --color-text-faint: #91867a;

    --color-success: #2e6a45;
    --color-success-soft: rgba(54, 120, 78, 0.18);
    --color-warning: #8a6413;
    --color-warning-soft: rgba(173, 126, 24, 0.16);
    --color-error: #8d2f2f;
    --color-error-soft: rgba(141, 47, 47, 0.12);
    --color-selection: rgba(149, 120, 43, 0.14);
    --color-selection-strong: rgba(149, 120, 43, 0.22);
    --color-translation: rgba(46, 106, 69, 0.18);
    --color-translation-strong: rgba(46, 106, 69, 0.28);
    --color-original: rgba(138, 100, 19, 0.14);
    --color-original-strong: rgba(138, 100, 19, 0.22);

    --shadow-none: none;
    --shadow-sm: 0 8px 22px rgba(23, 20, 17, 0.04);
    --shadow-md: 0 18px 42px rgba(23, 20, 17, 0.08);
    --shadow-lg: 0 24px 60px rgba(23, 20, 17, 0.12);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 4rem;

    --text-display: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
    --text-page-title: 2rem;
    --text-section-title: 1.25rem;
    --text-subtitle: 1rem;
    --text-body: 1rem;
    --text-secondary: 0.95rem;
    --text-meta: 0.82rem;
    --text-caption: 0.72rem;
    
    --shell-max-width: 46rem;
    --shell-gutter: 1rem;

    --panel-padding: 1.15rem;
    --panel-padding-lg: 1.4rem;
    --section-gap: 1.25rem;

    --control-height-sm: 2.45rem;
    --control-height-md: 3rem;

    --icon-size-sm: 1rem;
    --icon-size-md: 1.2rem;

    --app-topbar-height: 66px;
    --app-bottomnav-height: 0rem;

    /* Safe areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Reader-specific offsets */
    --reader-header-offset: calc(var(--app-topbar-height) + var(--safe-top));
    --reader-bottom-offset: calc(var(--app-bottomnav-height) + var(--safe-bottom));

    --line-ui: 1.5;
    --line-reading: 1.72;
}

html,
body {
    min-height: 100%;
}

html {
    color-scheme: light;
    background: var(--color-bg);
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--line-ui);
    background: var(--color-bg);
    color: var(--color-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-layout {
    min-height: 100vh;
}

.app-layout__top,
.app-layout__bottom {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 60;
    pointer-events: none;
}

.app-layout__top {
    top: 0;
}

.app-layout__bottom {
    bottom: 0;
}

.app-layout__top-inner,
.app-layout__bottom-inner {
    width: min(100%, var(--shell-max-width));
    margin: 0 auto;
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
    pointer-events: auto;
}

.app-layout__content {
    min-height: 100vh;
    padding-top: var(--app-workspace-top);
    padding-bottom: var(--app-workspace-bottom);
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        "FILL" 0,
        "wght" 200,
        "GRAD" 0,
        "opsz" 24;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: 0;
}

h1 {
    font-family: var(--font-reading);
    font-size: var(--text-display);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

h2 {
    font-family: var(--font-ui);
    font-size: var(--text-page-title);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h3 {
    font-family: var(--font-ui);
    font-size: var(--text-section-title);
    line-height: 1.2;
    font-weight: 700;
}

p,
ul,
ol {
    margin: 0 0 var(--space-4);
}

a,
.btn-link {
    color: var(--color-text);
    text-decoration-color: rgba(23, 20, 17, 0.28);
    text-underline-offset: 0.18em;
}

a:hover,
.btn-link:hover {
    color: var(--color-text);
    text-decoration-color: rgba(23, 20, 17, 0.62);
}

code {
    font-family: var(--font-mono);
    color: var(--color-text);
    background: rgba(23, 20, 17, 0.05);
    padding: 0.08rem 0.28rem;
    border-radius: var(--radius-xs);
}

h1:focus {
    outline: none;
}

.content {
    width: min(100%, var(--shell-max-width));
    margin: 0 auto;
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
    padding-top: var(--space-5);
    padding-bottom: var(--space-7);
}

.form-panel {
    padding: var(--panel-padding-lg);
}

.text-danger {
    color: var(--color-error) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.loading-shell {
    padding: var(--space-6);
}

.app-inline-error,
.app-inline-success {
    margin: 0;
    font-size: var(--text-meta);
}

.app-inline-error {
    color: var(--color-error);
}

.app-inline-success {
    color: var(--color-success);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid rgba(46, 106, 69, 0.55);
}

.invalid,
.validation-message {
    color: var(--color-error);
    outline-color: var(--color-error);
}

#blazor-error-ui {
    color-scheme: light only;
    background: rgba(141, 47, 47, 0.12);
    border: 1px solid rgba(141, 47, 47, 0.24);
    border-radius: var(--radius-md);
    top: calc(var(--safe-top) + 0.85rem);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 50%;
    padding: 0.85rem 3.5rem 0.85rem 1rem;
    position: fixed;
    transform: translateX(-50%);
    width: min(calc(100% - 1.5rem), 42rem);
    z-index: 1000;
    color: var(--color-text);
    backdrop-filter: blur(10px);
}

#blazor-error-ui .blazor-error-ui__message {
    color: var(--color-text-soft);
    margin-left: 0.45rem;
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.9rem;
    top: 0.8rem;
    color: var(--color-text-soft);
    font-size: var(--text-meta);
}

.blazor-error-boundary {
    background: var(--color-error);
    padding: 1rem 1rem 1rem 3.2rem;
    color: #fff;
}

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #ddd5c8;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #2c2621;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

@media (max-width: 700px) {
    .content {
        padding-top: var(--space-4);
    }

    .form-panel,
    .app-panel {
        padding: var(--panel-padding);
    }
}

@media (min-width: 641px) {
    .content {
        padding-bottom: var(--space-7);
    }
}