:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1d2633;
    background: #f4f6f8;
    line-height: 1.5;
}

* { box-sizing: border-box; }

body { margin: 0; }

.opening-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}

.opening-panel {
    width: min(30rem, 100%);
    border: 1px solid #d7dde5;
    border-radius: .75rem;
    background: #fff;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 .25rem 1.2rem rgb(28 39 53 / 7%);
}

.opening-panel h1 { margin: .4rem 0 .75rem; }
.opening-panel p:last-child { margin: 0; color: #59697a; }

.opening-spinner {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    border: .3rem solid #d7e4f2;
    border-top-color: #145ca8;
    border-radius: 50%;
    animation: opening-spin .9s linear infinite;
}

@keyframes opening-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .opening-spinner { animation: none; }
}

button, input { font: inherit; }

.app-shell {
    width: min(72rem, 100%);
    margin: 0 auto;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.eyebrow {
    margin: 0;
    color: #506276;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.2; }
h1 { margin: .2rem 0 0; font-size: clamp(1.7rem, 6vw, 2.6rem); }
h2 { margin-top: 0; }

.panel, .notice {
    border: 1px solid #d7dde5;
    border-radius: .75rem;
    background: #fff;
    padding: 1.25rem;
    box-shadow: 0 .25rem 1.2rem rgb(28 39 53 / 7%);
}

.panel { max-width: 30rem; }

.notice { margin: 1rem 0; }
.notice-error { border-color: #d89b9b; color: #7b1f1f; background: #fff8f8; }

form { display: grid; gap: .7rem; }
label { font-weight: 650; }
.login-help { margin: 1rem 0 0; }

input {
    width: 100%;
    min-height: 2.8rem;
    border: 1px solid #aeb8c4;
    border-radius: .45rem;
    padding: .6rem .75rem;
    background: #fff;
}

input:focus-visible, button:focus-visible {
    outline: .2rem solid #80b5ff;
    outline-offset: .15rem;
}

button {
    min-height: 2.75rem;
    border-radius: .45rem;
    border: 1px solid transparent;
    padding: .55rem 1rem;
    cursor: pointer;
    font-weight: 700;
}

button:disabled { cursor: wait; opacity: .7; }
.primary-button { color: #fff; background: #145ca8; }
.primary-button:hover:not(:disabled) { background: #0f4d8e; }
.secondary-button { color: #25364a; border-color: #aeb8c4; background: #fff; }

.edition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}

.edition-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d7dde5;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 .2rem .8rem rgb(28 39 53 / 7%);
}

.edition-card img {
    width: 100%;
    aspect-ratio: 7 / 10;
    object-fit: contain;
    background: #e9edf2;
}

.edition-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem;
}

.edition-content h3 { margin: 0 0 .5rem; }
.edition-content p { margin: 0 0 .75rem; }
.edition-actions { display: grid; gap: .5rem; margin-top: auto; }
.edition-actions button { width: 100%; }
.edition-date { color: #59697a; font-size: .9rem; }
.empty-message { padding: 2rem 0; color: #59697a; }

[hidden] { display: none !important; }

@media (max-width: 32rem) {
    .app-header { align-items: flex-start; }
    .edition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edition-content { padding: .75rem; }
}