.glass-panel {
    position: relative;
    width: var(--panel-width);
    max-width: 100%;
    max-height: min(72vh, 42rem);
    max-height: min(72dvh, 42rem);
    overflow: auto;
    padding: var(--space-4);
    color: var(--color-text);
    background:
        radial-gradient(ellipse at 16% 8%, rgb(255 255 255 / 15%), transparent 34%),
        radial-gradient(ellipse at 92% 88%, rgb(96 56 66 / 5%), transparent 42%),
        linear-gradient(135deg, var(--glass-fill-strong), rgb(255 255 255 / 4%) 44%, rgb(240 232 232 / 6%));
    border: 1px solid var(--glass-border);
    border-radius: var(--panel-radius);
    box-shadow:
        0 2rem 4.4rem rgb(43 38 42 / 14%),
        0 0.35rem 1.1rem rgb(255 255 255 / 9%) inset,
        0 0 0 1px rgb(255 255 255 / 10%) inset,
        -0.08rem -0.08rem 0.38rem rgb(255 255 255 / 18%) inset,
        0.08rem 0.1rem 0.28rem var(--glass-border-shadow) inset;
    backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturation))
        brightness(1.03);
    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturation))
        brightness(1.03);
}

.glass-panel::before,
.glass-panel::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border-radius: inherit;
}

.glass-panel::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 0% 0%, var(--glass-highlight), transparent 42%),
        linear-gradient(128deg, rgb(255 255 255 / 12%), transparent 34% 76%, rgb(74 48 56 / 5%));
    box-shadow:
        1px 1px 0 rgb(255 255 255 / 20%) inset,
        -1px -1px 0 rgb(59 43 49 / 10%) inset;
    opacity: 0.72;
    mix-blend-mode: screen;
}

.glass-panel::after {
    inset: 0;
    z-index: 0;
    background:
        repeating-radial-gradient(circle at 24% 18%, rgb(255 255 255 / 20%) 0 0.7px, transparent 0.8px 2.6px),
        radial-gradient(ellipse at 20% 28%, rgb(255 255 255 / 20%), transparent 31%),
        radial-gradient(ellipse at 76% 72%, rgb(69 43 50 / 13%), transparent 36%);
    filter: url("#glass-refraction") opacity(var(--glass-noise-opacity));
    opacity: 1;
    mix-blend-mode: overlay;
}

.glass-panel > * {
    position: relative;
    z-index: 1;
}

@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
    .glass-panel,
    .poem-pager,
    .floating-menu,
    .system-status {
        background: rgb(255 255 255 / 66%);
    }
}

.panel-kicker {
    margin: 0 0 var(--space-2);
    color: var(--color-text-soft);
    text-shadow: 0 1px 0 rgb(255 255 255 / 42%);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.glass-panel h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: clamp(2.1rem, 5.6vw, 4.6rem);
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 0.16rem 0.4rem rgb(255 255 255 / 28%);
}

.poem-body {
    color: #55272f;
    font-family: var(--font-text);
    font-size: clamp(1.08rem, 1.9vw, 1.48rem);
    line-height: 1.74;
    white-space: normal;
    text-shadow: 0 1px 0 rgb(255 255 255 / 34%);
}

.section-list {
    display: grid;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
}

.section-list button,
.login-links button {
    width: 100%;
    padding: 0.8rem 0;
    color: var(--color-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-block-end: 1px solid rgb(80 38 47 / 18%);
    text-shadow: 0 1px 0 rgb(255 255 255 / 26%);
    cursor: pointer;
}

.section-list button:hover,
.section-list button:focus-visible,
.login-links button:hover,
.login-links button:focus-visible {
    color: #8b3343;
}

.social-panel-group {
    display: grid;
    width: min(100%, 32rem);
    grid-template-columns: repeat(2, minmax(7.4rem, 1fr));
    gap: clamp(0.7rem, 1.55vw, 1.15rem);
}

.social-tile {
    display: grid;
    width: auto;
    --glass-fill: rgb(255 255 255 / 6%);
    --glass-fill-strong: rgb(255 255 255 / 9%);
    --glass-noise-opacity: 0.052;
    min-height: 6.35rem;
    place-items: center;
    gap: 0.55rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background:
        radial-gradient(ellipse at 18% 12%, rgb(255 255 255 / 12%), transparent 36%),
        linear-gradient(136deg, var(--glass-fill-strong), rgb(255 255 255 / 4%) 48%, rgb(126 79 91 / 5%));
    box-shadow:
        0 1.45rem 3.2rem rgb(43 38 42 / 14%),
        0 0 0 1px rgb(255 255 255 / 12%) inset,
        inset 0 0 0.75rem rgb(255 255 255 / 12%);
    cursor: pointer;
    text-shadow: 0 1px 0 rgb(255 255 255 / 36%);
}

.social-tile:hover,
.social-tile:focus-visible {
    transform: translateY(-0.16rem);
}

.social-mark {
    display: grid;
    width: 2.35rem;
    aspect-ratio: 1;
    place-items: center;
    color: rgb(255 255 255 / 92%);
    background: rgb(80 38 47 / 56%);
    border-radius: 999rem;
    font-weight: 700;
}

.login-panel {
    width: min(100%, 40rem);
}

.login-form {
    display: grid;
    gap: var(--space-2);
}

.login-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 14%)),
        rgb(255 255 255 / 18%);
    border: 1px solid rgb(255 255 255 / 46%);
    border-radius: 0.35rem;
    box-shadow:
        0 0.65rem 1.4rem rgb(43 38 42 / 8%),
        inset 0 0 0.7rem rgb(255 255 255 / 20%);
    backdrop-filter: blur(0.8rem) saturate(80%);
    -webkit-backdrop-filter: blur(0.8rem) saturate(80%);
}

.check-row {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.submit-button {
    min-height: 2.9rem;
    color: var(--color-page-warm);
    background: #512832;
    border: 0;
    border-radius: 0.35rem;
    cursor: pointer;
}

.login-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
}

.rights-panel {
    width: min(75vw, 1120px);
    max-height: min(80vh, 80dvh);
    padding: clamp(1.25rem, 2.5vw, 2.2rem);
    overflow: hidden;
}

.rights-header {
    padding-block-end: var(--space-2);
    border-block-end: 1px solid rgb(255 255 255 / 28%);
}

.rights-panel h1 {
    margin-block-end: var(--space-1);
    font-size: clamp(2.1rem, 4.1vw, 4.2rem);
}

.rights-summary {
    margin: 0;
    color: var(--color-text-soft);
    font-size: clamp(0.86rem, 1.2vw, 1rem);
}

.rights-scroll {
    max-height: calc(min(80vh, 80dvh) - 10rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-start: var(--space-3);
    padding-inline-end: 0.45rem;
    scrollbar-color: rgb(80 38 47 / 38%) rgb(255 255 255 / 18%);
    scrollbar-width: thin;
}

.rights-scroll::-webkit-scrollbar {
    width: 0.55rem;
}

.rights-scroll::-webkit-scrollbar-thumb {
    background: rgb(80 38 47 / 34%);
    border-radius: 999rem;
}

.rights-scroll::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 16%);
    border-radius: 999rem;
}

.rights-section {
    display: grid;
    gap: 0.45rem;
    margin-block-end: var(--space-3);
}

.rights-section h2 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    font-weight: 650;
    line-height: 1.25;
}

.rights-section p,
.rights-contact {
    margin: 0;
    color: #4d3035;
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    line-height: 1.58;
}

.rights-contact {
    display: grid;
    gap: 0.35rem;
    padding-block-start: 0.2rem;
    font-style: normal;
}

.poem-meta {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    color: var(--color-text-soft);
    border-block-start: 1px solid rgb(80 38 47 / 16%);
    font-size: 0.86rem;
}

.poem-meta p {
    margin: 0;
}

.menu-button,
.pager-button {
    position: relative;
    display: grid;
    width: var(--control-size);
    min-width: 44px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--color-text);
    background:
        radial-gradient(circle at 50% 42%, rgb(255 255 255 / 92%), rgb(255 255 255 / 58%) 58%, rgb(255 255 255 / 34%)),
        var(--color-control);
    border: 1px solid rgb(255 255 255 / 88%);
    border-radius: 999rem;
    box-shadow:
        0 0.8rem 1.8rem var(--color-shadow-cool),
        0 0.25rem 0.7rem rgb(255 255 255 / 70%) inset,
        0 -0.35rem 0.75rem rgb(80 38 47 / 10%) inset;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        background 180ms ease;
}

.menu-button:hover,
.menu-button:focus-visible,
.pager-button:not(:disabled):hover,
.pager-button:not(:disabled):focus-visible {
    transform: translateY(-0.16rem) scale(1.025);
    filter: brightness(1.03);
    box-shadow:
        0 1.05rem 2.2rem rgb(80 38 47 / 20%),
        0 0.35rem 0.9rem rgb(255 255 255 / 84%) inset,
        0 -0.28rem 0.7rem rgb(80 38 47 / 12%) inset;
}

.menu-button:active,
.pager-button:not(:disabled):active {
    transform: translateY(0.08rem) scale(0.985);
    box-shadow:
        0 0.35rem 0.8rem rgb(80 38 47 / 12%),
        0 0.18rem 0.5rem rgb(255 255 255 / 58%) inset,
        0 0.22rem 0.8rem rgb(80 38 47 / 16%) inset;
}

.menu-button.is-active {
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgb(127 57 72), rgb(76 36 45) 70%),
        #512832;
}

.tooltip {
    position: absolute;
    inset-inline-start: calc(100% + 0.65rem);
    inset-block-start: 50%;
    translate: 0 -50%;
    min-width: max-content;
    padding: 0.4rem 0.55rem;
    color: white;
    background: rgb(61 32 37 / 88%);
    border-radius: 0.35rem;
    font-size: 0.76rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease;
}

.menu-button:hover .tooltip,
.menu-button:focus-visible .tooltip {
    opacity: 1;
    transform: translateX(0);
}

.pager-button:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.pager-count {
    display: grid;
    min-width: 3rem;
    place-items: center;
    padding: 0.35rem 0.25rem;
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.transition-fallback {
    position: absolute;
    inset: -16%;
    opacity: 0;
    background:
        radial-gradient(ellipse at 17% 28%, rgb(22 21 22 / 72%), transparent 19%),
        radial-gradient(ellipse at 74% 32%, rgb(36 34 35 / 66%), transparent 24%),
        radial-gradient(ellipse at 42% 76%, rgb(18 17 18 / 74%), transparent 27%),
        radial-gradient(ellipse at 84% 78%, rgb(65 61 62 / 48%), transparent 25%),
        rgb(36 34 35 / 12%);
    filter: blur(1.15rem) contrast(1.08);
    transform: scale(0.7) rotate(-3deg);
    transition:
        opacity 260ms ease,
        transform 900ms cubic-bezier(0.18, 0.86, 0.25, 1);
}

.transition-layer.is-fallback.is-active .transition-fallback {
    opacity: 0.92;
    transform: scale(1.16) rotate(2deg);
}

@media (max-width: 52rem) {
    .glass-panel {
        --panel-width: clamp(20rem, 72vw, 34rem);
        padding: var(--space-3);
    }
}

@media (max-width: 44rem) {
    .glass-panel {
        width: min(100%, 31rem);
        max-height: calc(100vh - 11rem);
        max-height: calc(100dvh - 11rem);
    }

    .rights-panel {
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--space-2));
        max-height: calc(100dvh - 13rem);
        padding: var(--space-3);
    }

    .rights-scroll {
        max-height: calc(100dvh - 21.5rem);
    }

    .glass-panel h1 {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }

    .poem-body {
        font-size: clamp(1rem, 4.5vw, 1.24rem);
        line-height: 1.62;
    }

    .social-panel-group {
        grid-template-columns: 1fr 1fr;
        width: min(100%, 30rem);
    }

    .social-tile {
        min-height: 6.2rem;
        padding: var(--space-2);
    }

    .tooltip {
        display: none;
    }
}

.admin-body {
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--scene-shell-bg, #f3f0ed);
    color: #251f22;
}

.admin-shell {
    min-height: 100dvh;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1120px, 100%);
    margin: 0 auto 18px;
}

.admin-brand,
.admin-header a {
    color: inherit;
    text-decoration: none;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-main {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.admin-card {
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 8%) 46%, rgb(238 230 232 / 12%));
    box-shadow: 0 28px 80px rgb(54 42 47 / 18%), inset 0 1px 0 rgb(255 255 255 / 42%);
    backdrop-filter: blur(18px) saturate(74%) brightness(1.03);
    -webkit-backdrop-filter: blur(18px) saturate(74%) brightness(1.03);
    padding: clamp(20px, 4vw, 42px);
}

.auth-card {
    max-width: 520px;
    margin: 10dvh auto 0;
}

.admin-form {
    display: grid;
    gap: 16px;
}

.admin-form label {
    display: grid;
    gap: 7px;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    border: 1px solid rgb(120 92 102 / 35%);
    border-radius: 8px;
    background: rgb(255 255 255 / 35%);
    color: inherit;
    padding: 11px 12px;
    font: inherit;
}

.admin-form input:focus-visible,
.admin-form textarea:focus-visible,
.admin-form select:focus-visible,
.admin-card a:focus-visible,
.admin-card button:focus-visible {
    outline: 2px solid rgb(96 38 58 / 82%);
    outline-offset: 3px;
}

.admin-form button,
.admin-user button {
    border: 1px solid rgb(96 38 58 / 35%);
    border-radius: 8px;
    background: rgb(96 38 58 / 88%);
    color: #fff;
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
}

.form-error,
.admin-warning {
    border-left: 3px solid rgb(125 47 67 / 80%);
    padding: 10px 12px;
    background: rgb(255 255 255 / 28%);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.admin-grid a,
.content-section-list a {
    color: #53233a;
}

.content-page {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
}

.content-card {
    width: min(880px, 100%);
}

.admin-toolbar,
.admin-filter,
.admin-actions,
.admin-actions-block,
.admin-inline-form,
.public-poem-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-toolbar {
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-button,
.admin-actions a,
.public-poem-nav a {
    border: 1px solid rgb(96 38 58 / 26%);
    border-radius: 8px;
    color: #53233a;
    padding: 9px 11px;
    text-decoration: none;
}

.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid rgb(80 54 65 / 16%);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

.admin-actions form {
    display: inline;
}

.admin-actions button {
    min-height: 36px;
    padding: 7px 9px;
}

.position-input {
    width: 4rem;
}

.admin-flash {
    border-left: 3px solid rgb(50 110 80 / 82%);
    padding: 10px 12px;
    background: rgb(255 255 255 / 30%);
}

.poem-body-editor {
    font-family: ui-serif, Georgia, serif;
    line-height: 1.6;
    white-space: pre-wrap;
}

.poem-preview-text,
.public-poem-body {
    white-space: pre-wrap;
    font-family: ui-serif, Georgia, serif;
    line-height: 1.75;
}

.poem-preview-text {
    overflow: auto;
    border: 1px solid rgb(80 54 65 / 16%);
    border-radius: 8px;
    padding: 14px;
    background: rgb(255 255 255 / 28%);
}

.public-poem {
    max-width: 760px;
}

.public-poem-nav {
    justify-content: space-between;
    margin-top: 24px;
}

.content-section-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

@media (max-width: 44rem) {
    .admin-shell {
        padding: 12px;
    }

    .admin-user,
    .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-form button,
    .admin-user button,
    .admin-button {
        min-height: 44px;
    }
}