/* SITE JULIO FANTASMA - FOLHA DE ESTILOS PRINCIPAL */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 32px 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 14px; border: 1px solid #795298; border-radius: 6px; background: #20132d; }
.pagination [aria-current="page"] { background: #693694; border-color: #d5b4fb; font-weight: 700; }
.pagination a:hover, .pagination a:focus-visible { background: #352045; outline: 2px solid #d5b4fb; outline-offset: 2px; }
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

body {
    margin: 0;
    background: url('../materiais/fundo_espelhado.svg?v=2') center top / 100% auto repeat-y;
    color: #f3edf8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-user-select: none;
    user-select: none;
}

/* Forms and the story editor remain editable. */
input, textarea, [contenteditable="true"], [contenteditable="true"] * { -webkit-user-select: text; user-select: text; }
.story-cover-media { position: relative; }
.story-share { padding: 12px 8px; text-align: center; }
.story-share-toggle { padding: 6px 10px; border: 1px solid #79548e; border-radius: 5px; background: transparent; color: #c6bccc; font-size: 11px; letter-spacing: 1px; }
.story-share-toggle:hover, .story-share-toggle[aria-expanded="true"] { background: #281934; color: #fff; }
.story-share-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.story-share-options[hidden] { display: none; }
.story-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border: 1px solid #79548e; border-radius: 6px; color: #e1c4ff; background: #20132d; }
.story-share-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.story-share-whatsapp { color: #1ed760; }
.story-share-status { flex-basis: 100%; font-size: 12px; color: #c6bccc; }

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

button, a, input, select, textarea, [contenteditable] {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible {
    outline: 2px solid #d5b4fb;
    outline-offset: 5px;
}

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

img {
    max-width: 100%;
}

/* Boxed com preto e opacidade de 50% */
.site-box {
    max-width: 1200px;
    min-height: 100vh;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.85);
}

/* ==================== CABEÇALHO & MENU ==================== */
.site-header {
    padding: 38px 48px 0;
    background: rgba(11, 9, 14, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand {
    display: block;
    width: min(470px, 100%);
    margin: 0 auto 30px;
}

.brand img {
    display: block;
    width: 100%;
    height: auto;
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
}

/* Animação intensa de tremer / vibrar para o menu */
@keyframes tremble {
    0% { transform: scale(1.08) rotate(0deg); }
    20% { transform: scale(1.1) rotate(-3.5deg); }
    40% { transform: scale(1.1) rotate(3.5deg); }
    60% { transform: scale(1.1) rotate(-2.5deg); }
    80% { transform: scale(1.1) rotate(2.5deg); }
    100% { transform: scale(1.08) rotate(0deg); }
}

/* Menu com fontes maiores, legíveis e efeito hover com cores distintas e animação de tremer */
.main-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.main-menu a {
    font-size: 17px;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 14px 20px;
    position: relative;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    color: #ede4f5;
    display: inline-block;
}

/* Item 1: INÍCIO - Laranja / Âmbar */
.main-menu a:nth-child(1):hover,
.main-menu a:nth-child(1):focus-visible {
    color: #ff9100;
    border-color: #ff9100;
    background: rgba(255, 145, 0, 0.12);
    box-shadow: 0 0 20px rgba(255, 145, 0, 0.45);
    animation: tremble 0.4s ease-in-out infinite;
}

/* Item 2: CONTOS DE TERROR - Vermelho Sangue */
.main-menu a:nth-child(2):hover,
.main-menu a:nth-child(2):focus-visible {
    color: #ff1744;
    border-color: #ff1744;
    background: rgba(255, 23, 68, 0.15);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.45);
    animation: tremble 0.4s ease-in-out infinite;
}

/* Item 3: NANDO E PEZÃO - Verde Neon */
.main-menu a:nth-child(3):hover,
.main-menu a:nth-child(3):focus-visible {
    color: #00e676;
    border-color: #00e676;
    background: rgba(0, 230, 118, 0.12);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.45);
    animation: tremble 0.4s ease-in-out infinite;
}

/* Item 4: VÍDEOS - Ciano Elétrico */
.main-menu a:nth-child(4):hover,
.main-menu a:nth-child(4):focus-visible {
    color: #00e5ff;
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.12);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
    animation: tremble 0.4s ease-in-out infinite;
}

.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.main-menu a.menu-printed:hover, .main-menu a.menu-printed:focus-visible, .main-menu a.menu-contact:hover, .main-menu a.menu-contact:focus-visible { color: #d5b4fb; border-color: #d5b4fb; background: rgba(213, 180, 251, .12); box-shadow: 0 0 20px rgba(213, 180, 251, .45); animation: tremble 0.4s ease-in-out infinite; }
.video-shelf h2 { color: #00e5ff; }
.video-network { position: absolute; bottom: 10px; right: 10px; z-index: 5; display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #17121d; border: 1px solid #ffffff70; box-shadow: 0 2px 8px #0009; }
.video-card .video-network .fa-icon { width: 24px; height: 24px; aspect-ratio: auto; object-fit: contain; filter: invert(1); transform: none; }
.video-network-youtube { background: #c90000; }
.video-network-facebook { background: #0866cc; }
.video-network-instagram { background: linear-gradient(35deg, #b14700, #b12668, #6638bd); }
.video-date { margin: 14px 0 4px; text-align: center; font-size: 15px; line-height: 1.4; color: #ede4f5; }
.admin-video-list { display: grid; gap: 16px; }
.admin-video-row { display: flex; align-items: center; gap: 20px; padding: 18px; border: 1px solid #634f73; border-radius: 8px; background: #100b16; }
.admin-video-cover { width: 72px; height: 128px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.admin-video-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin-video-info p { margin: 4px 0; font-size: 14px; }
.admin-video-info a { color: #d5b4fb; font-size: 14px; }
.admin-video-actions, .video-order-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-video-actions form { margin: 0; }
#videoForm :required { border-color: #ed5966; }
@media (max-width: 860px) {
    .admin-video-row { flex-wrap: wrap; gap: 12px; }
    .admin-video-actions { width: 100%; }
}

.social-links a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #f3edf8;
}

.social-links a:hover {
    background: #6b3a91;
    border-color: #c79eed;
    color: #fff;
    transform: scale(1.08);
}

.social-links svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.menu-toggle {
    display: none;
}

/* ==================== CONTEÚDO PRINCIPAL ==================== */
.main-content, .admin-content {
    padding: 44px 48px 60px;
    min-height: 50vh;
}

.intro {
    margin-bottom: 48px;
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 3px;
    color: #d1a5f5;
    text-transform: uppercase;
    font-weight: 700;
}

h1, h2, h3, p {
    margin-top: 0;
}

.intro h1 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.2;
    margin: 10px 0 12px;
    color: #ffffff;
}

.intro p {
    color: #c7bcd2;
    font-size: 18px;
    max-width: 720px;
    line-height: 1.6;
    margin: 0;
}

/* ==================== SEÇÕES DOS CARROSSÉIS ==================== */
/* Separação evidente entre seções: borda roxa e border-radius de 30px */
.shelf {
    margin-bottom: 50px;
    scroll-margin-top: 26px;
    border: 2px solid #8e44ad45;
    border-radius: 30px;
    padding: 32px 36px 26px;
    background: rgba(18, 10, 26, 0.65);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(142, 68, 173, 0.15);
}

.shelf-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 18px;
    margin-bottom: 26px;
}

.shelf-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Setas dos carrosséis: maiores, mais destacadas, em negrito e flechas da cor amarela */
.carousel-controls {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.carousel-controls button {
    padding: 0;
    flex-shrink: 0;
    height: 50px;
    width: 50px;
    background: rgba(22, 12, 34, 0.9);
    border: 2px solid rgba(255, 234, 0, 0.5);
    color: #ffea00;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.carousel-controls button:hover:not(:disabled) {
    background: #3e1b5c;
    border-color: #ffea00;
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 234, 0, 0.6);
}

.carousel-controls [data-direction="-1"] svg { transform: rotate(180deg); }

.carousel {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #8e44ad transparent;
    padding: 6px 4px 22px;
}

.story-card {
    flex: 0 0 220px;
    min-width: 0;
    scroll-snap-align: start;
}

.cover-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 12px 28px #0008;
    background: #241333;
}

.cover-wrap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.story-card a:hover img {
    transform: scale(1.05);
}

/* Selo CONTO INÉDITO na parte inferior da capa */
.badge-inedito {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #120919;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    padding: 6px 4px;
    text-transform: uppercase;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6);
    z-index: 3;
    pointer-events: none;
}

.badge-inedito-reading {
    border-radius: 0 0 6px 6px;
}

.cover-action {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(17, 9, 26, 0.85);
    padding: 14px;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #ffd700;
    z-index: 4;
}

.story-card a:hover .cover-action,
.story-card a:focus-visible .cover-action {
    opacity: 1;
}

.story-card h3 {
    text-transform: uppercase;
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    margin: 14px 0 4px;
    color: #ffffff;
    line-height: 1.3;
}

.empty-state {
    padding: 36px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #c3b5cc;
    font-size: 16px;
    text-align: center;
}

/* ==================== RODAPÉ ==================== */
.site-footer {
    margin: 0 48px;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: #b3a4be;
}

.site-footer a {
    color: #d1a5f5;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.site-footer a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ==================== LEITURA DO CONTO ==================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbb8dc;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 28px;
    transition: color 0.2s;
}

.back-link:hover {
    color: #ffffff;
}

.story-overview {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 44px;
    align-items: start;
}

.story-cover-wrap {
    position: relative;
    width: 220px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.story-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    object-fit: cover;
}

.story-details h1 {
    font-family: Georgia, serif;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 400;
    margin: 10px 0 12px;
    color: #ffffff;
}

.byline {
    font-size: 18px;
    color: #ded3e8;
    margin-bottom: 14px;
}

/* Redes sociais do autor na página de leitura */
.author-social-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.author-social-label {
    font-size: 14px;
    color: #d1a5f5;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.author-social-links a.no-link {
    opacity: 0.35;
    cursor: not-allowed;
}

.author-social-links a.has-link:hover {
    background: #8e44ad;
    border-color: #d19fff;
    transform: scale(1.12);
}

.story-details h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 24px 0 10px;
    color: #d1a5f5;
    font-weight: 700;
}

.synopsis {
    font-size: 18px;
    line-height: 1.65;
    color: #d9cee2;
    max-width: 680px;
    white-space: normal;
}

.read-button {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    background: #6a3a88;
    border: 1px solid #9f6fc0;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 6px;
    color: #ffffff;
    margin-top: 14px;
    transition: all 0.2s ease;
}

.read-button:hover {
    background: #8347a8;
    border-color: #b786db;
    box-shadow: 0 4px 16px rgba(131, 71, 168, 0.4);
    transform: translateY(-2px);
}

.reading-divider {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 3px;
    color: #b19bc0;
    margin: 52px 0 34px;
}

.reading-divider:before, .reading-divider:after {
    content: '';
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    flex: 1;
}

.story-content {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 44px;
    background: #f5f1e8;
    color: #211c26;
    padding: 44px 50px;
    border-radius: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 21px;
    line-height: 1.88;
    overflow-wrap: anywhere;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.story-content p {
    margin: 0 0 1.25em;
}

.story-content p:last-child {
    margin-bottom: 0;
}

.simple-page {
    min-height: 330px;
}

.simple-page h1 {
    font-family: Georgia, serif;
    font-size: 42px;
    margin: 12px 0 24px;
}

.simple-page > p {
    color: #cfc2d8;
    font-size: 18px;
}

/* ==================== ÁREA ADMINISTRATIVA ==================== */
.admin-content h1 {
    font-size: 30px;
    color: #ffffff;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
    padding: 14px 18px;
    background: rgba(22, 14, 30, 0.88);
    border: 1px solid rgba(175, 125, 230, 0.28);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.admin-nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #ede4f5;
    background: #281b35;
    border: 1px solid #5d3f78;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}

.admin-btn:hover {
    background: #42295a;
    border-color: #925dc0;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(110, 48, 160, 0.35);
}

.admin-btn.active {
    background: #60308c;
    border-color: #b273e8;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(178, 115, 232, 0.45);
}

.admin-btn-highlight {
    background: linear-gradient(135deg, #6c2ba0, #8c3bcc);
    border-color: #b475f4;
    color: #ffffff;
    font-weight: 700;
}

.admin-btn-highlight:hover {
    background: linear-gradient(135deg, #7c32b8, #9c44e6);
    border-color: #c792ff;
    box-shadow: 0 4px 16px rgba(140, 59, 204, 0.5);
}

.admin-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.22);
    color: #dad0e4;
}

.admin-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.admin-btn-logout {
    background: rgba(140, 30, 40, 0.35);
    border-color: rgba(200, 50, 70, 0.45);
    color: #f7d5da;
}

.admin-btn-logout:hover {
    background: rgba(190, 40, 50, 0.75);
    border-color: #e54d5d;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(220, 50, 70, 0.4);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.btn-lg {
    padding: 12px 22px;
    font-size: 16px;
}

.btn-primary {
    background: linear-gradient(135deg, #6c2ba0, #8c3bcc);
    border-color: #b475f4;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(108, 43, 160, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7c32b8, #9c44e6);
    border-color: #c792ff;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(140, 59, 204, 0.45);
}

.btn-secondary {
    background: #2e1d3d;
    border: 1px solid #624380;
    color: #f2e9f7;
}

.btn-secondary:hover {
    background: #462c5c;
    border-color: #9262ba;
    color: #ffffff;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ded3e8;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

.admin-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(26, 17, 36, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.stat-card-highlight {
    border-color: rgba(175, 115, 240, 0.45);
    background: rgba(48, 25, 70, 0.65);
    box-shadow: 0 4px 18px rgba(100, 45, 150, 0.25);
}

.stat-icon {
    font-size: 32px;
}

.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.stat-label {
    font-size: 14px;
    color: #c1b1cc;
}

.admin-filter-bar {
    margin-bottom: 22px;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #d1c5da;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.tab-btn.active {
    background: #60308c;
    border-color: #aa6fe0;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(170, 111, 224, 0.35);
}

.admin-content .row {
    margin-bottom: 22px;
}

.admin-content label {
    display: block;
    margin-bottom: 8px;
    color: #e5dbec;
    font-size: 15px;
    font-weight: 600;
}

.admin-content input:not([type=checkbox]):not([type=color]):not([type=file]),
.admin-content select,
.admin-content textarea {
    width: 100%;
    border: 1px solid #634f73;
    background: #120c1a;
    color: #f5f0f8;
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-content input:focus,
.admin-content select:focus,
.admin-content textarea:focus {
    border-color: #b783e8;
    box-shadow: 0 0 0 3px rgba(183, 131, 232, 0.2);
    outline: none;
}

.admin-content input[type=number] {
    max-width: 150px;
}

.admin-content input[type=file] {
    max-width: 100%;
    padding: 8px 0;
    font-size: 14px;
}

.actions, .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.toolbar {
    padding: 10px 14px;
    background: #1c1325;
    border: 1px solid #634f73;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    align-items: center;
}

.toolbar button {
    background: #2a1c38;
    border: 1px solid #654680;
    color: #ece2f5;
    border-radius: 4px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar button:hover {
    background: #462c5c;
    border-color: #9262ba;
    color: #ffffff;
}

.toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: #ece2f5;
}

.editor {
    min-height: 420px;
    max-height: 800px;
    overflow: auto;
    background: #ffffff;
    color: #1e1b24;
    border: 1px solid #634f73;
    padding: 24px;
    line-height: 1.8;
    border-radius: 0 0 6px 6px;
    font-family: Georgia, serif;
    font-size: 18px;
}

.muted {
    font-size: 14px;
    color: #b8a6c3;
    margin-top: 6px;
}

.msg {
    padding: 16px 20px;
    background: #392448;
    border: 1px solid #845a9e;
    margin: 22px 0;
    border-radius: 6px;
    color: #ffffff;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ==================== TABELAS ADMINISTRATIVAS & DRAG AND DROP ==================== */
.table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(20, 13, 28, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
}

.admin-table th {
    background: rgba(35, 22, 48, 0.85);
    color: #d8b8f2;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* Estilos de Drag and Drop */
.draggable-row {
    cursor: grab;
    transition: background 0.15s ease;
}

.draggable-row:active {
    cursor: grabbing;
}

.drag-handle {
    font-size: 20px;
    color: #a48ab7;
    cursor: grab;
    user-select: none;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}

.drag-handle:hover {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    transform: scale(1.15);
}

.draggable-row.is-dragging {
    opacity: 0.35;
    background: rgba(142, 68, 173, 0.4) !important;
}

.draggable-row.drag-over-above td {
    border-top: 3px solid #ffd700 !important;
}

.draggable-row.drag-over-below td {
    border-bottom: 3px solid #ffd700 !important;
}

.thumb-inedito-tag {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #ffd700;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

.table-thumb {
    display: block;
    width: 44px;
    height: 78px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #251435;
}

.table-title-link {
    color: #f1e6fc;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.table-title-link:hover {
    color: #d19fff;
    text-decoration: underline;
}

.table-synopsis-preview {
    font-size: 13px;
    color: #a898b3;
    margin-top: 4px;
    line-height: 1.4;
}

.genre-pill {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    background: rgba(140, 80, 200, 0.2);
    border: 1px solid rgba(180, 115, 240, 0.35);
    color: #dfc2fc;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
}

.badge-published {
    background: rgba(46, 125, 50, 0.28);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #9fe2a2;
}

.badge-draft {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid rgba(255, 183, 77, 0.4);
    color: #ffc46b;
}

.input-order {
    width: 65px !important;
    padding: 8px 6px !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 700;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}

.btn-edit {
    background: rgba(98, 48, 140, 0.5);
    border-color: rgba(170, 105, 225, 0.45);
    color: #ede2f7;
}

.btn-edit:hover {
    background: #6a2e9e;
    border-color: #bc7ef8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(106, 46, 158, 0.4);
}

.btn-duplicate {
    background: rgba(30, 95, 150, 0.45);
    border-color: rgba(60, 150, 225, 0.45);
    color: #d6eefa;
}

.btn-duplicate:hover {
    background: #1f72ae;
    border-color: #55bbf9;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(31, 114, 174, 0.4);
}

.btn-view {
    background: rgba(40, 120, 75, 0.45);
    border-color: rgba(70, 180, 120, 0.45);
    color: #daf8e6;
}

.btn-view:hover {
    background: #258752;
    border-color: #53e395;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(37, 135, 82, 0.4);
}

.btn-delete {
    background: rgba(150, 35, 45, 0.4);
    border-color: rgba(220, 65, 80, 0.4);
    color: #fcd9dc;
}

.btn-delete:hover {
    background: #a32230;
    border-color: #f15264;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(163, 34, 48, 0.4);
}

.cover-preview {
    display: block;
    width: 120px;
    aspect-ratio: 9/16;
    object-fit: cover;
    margin: 14px 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: #fff;
    color: #000;
    padding: 10px;
    z-index: 10;
}

.skip-link:focus {
    top: 10px;
}

h1, h3, .synopsis, td {
    overflow-wrap: anywhere;
}

/* ==================== RESPONSIVIDADE ==================== */
@media (max-width: 860px) {
    .site-header {
        padding: 26px 24px 0;
    }

    .brand {
        width: 340px;
        max-width: 100%;
        margin-bottom: 22px;
    }

    .header-bottom {
        position: relative;
        min-height: 64px;
        flex-wrap: wrap;
        gap: 0;
    }

    .menu-toggle {
        display: flex;
        gap: 10px;
        align-items: center;
        background: none;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 6px;
        color: #eee;
        letter-spacing: 1px;
        font-size: 15px;
        font-weight: 700;
        padding: 8px 14px;
    }

    .menu-toggle span {
        font-size: 22px;
    }

    .main-menu {
        display: none;
        order: 3;
        width: 100%;
        padding: 14px 0 20px;
    }

    .main-menu.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .main-menu a, .main-menu a:first-child {
        padding: 14px 16px;
        font-size: 18px;
    }

    .main-content, .admin-content {
        padding: 30px 24px 40px;
    }

    .intro {
        margin-bottom: 34px;
    }

    .intro h1 {
        font-size: 32px;
    }

    .intro p {
        font-size: 16px;
    }

    .shelf {
        padding: 24px 20px 20px;
        border-radius: 20px;
    }

    .shelf-heading {
        gap: 14px;
    }

    .shelf-heading h2 {
        font-size: 24px;
    }

    .carousel {
        gap: 18px;
    }

    .story-card {
        flex-basis: 180px;
    }

    .carousel-controls button {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .site-footer {
        margin: 0 24px;
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .story-overview {
        grid-template-columns: 160px 1fr;
        gap: 26px;
    }

    .story-cover-wrap {
        width: 160px;
    }

    .story-details h1 {
        font-size: 34px;
    }

    .story-content {
        padding: 32px 26px;
        font-size: 19px;
    }

    .admin-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-nav-group {
        justify-content: flex-start;
    }

    .admin-table td, .admin-table th {
        min-width: 100px;
    }
}

@media (max-width: 520px) {
    .story-overview {
        grid-template-columns: 1fr;
    }

    .story-cover-wrap {
        width: 190px;
        margin: auto;
    }

    .story-details h1 {
        font-size: 32px;
    }

    .story-content {
        padding: 24px 20px;
    }

    .shelf-heading h2 {
        max-width: calc(100% - 110px);
        font-size: 20px;
    }

    .intro h1 {
        font-size: 28px;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        transition: none !important;
        animation: none !important;
    }
}
/* Capítulos, leitura e formulário */
.admin-page .site-box { background: #000; }
.footer-social { padding: 12px 24px 30px; }
.footer-social .social-links { justify-content: center; }
.published-check { color: #58d879; font-size: 24px; line-height: 1; }
.form-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.cover-synopsis { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 24px; }
.cover-synopsis .cover-preview { width: 180px; height: 320px; margin: 0 0 12px; }
.cover-synopsis textarea { height: 320px; resize: vertical; }
.chapter-card { border: 1px solid #634f73; border-radius: 8px; margin: 12px 0; background: #100b16; }
.chapter-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; }
.chapter-name { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.admin-content .inedito-option { display: flex; align-items: center; gap: 6px; margin: 0; color: #ffe66d; }
.chapter-heading button, .reading-controls button { background: #251731; color: #fff; border: 1px solid #79548e; border-radius: 5px; padding: 6px 10px; }
.chapter-fields { padding: 18px; border-top: 1px solid #634f73; }
.chapter-fields[hidden] { display: none; }
.chapter-card.is-dragging { opacity: .45; }
.publication-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid #634f73; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 28px; }
.view-all-card { aspect-ratio: 9/16; border: 1px solid #79548e; border-radius: 12px; background: #160e20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-weight: 800; }
.view-all-card:hover { background: #31203f; }
.view-all-card span:last-child { font-size: 32px; }
.reading-controls { display: flex; justify-content: center; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 0; }
.reading-control-group { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border: 1px solid #79548e; border-radius: 8px; }
.reading-control-group output { min-width: 42px; text-align: center; }
.chapter-number-hint { display: block; color: #ffe66d; margin-top: 6px; }
#storyForm :is(input, select, textarea):required, #storyForm [aria-required="true"] { border: 1px solid #ed5966; }
.shelf-heading { display: grid; grid-template-columns: 1fr; justify-items: center; }
.shelf-heading h2 { text-align: center; text-transform: uppercase; max-width: 100%; }
.story-content::before, .story-content::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; opacity: .5; background: url('paper-edge.svg') repeat-x top left / 160px 12px; }
.story-content::before { top: 0; }
.story-content::after { bottom: 0; transform: rotate(180deg); }
.chapter-index { margin: 16px 0 28px; padding: 20px; border: 1px solid #634f73; border-radius: 8px; }
.chapter-index a { display: block; padding: 8px 0; }
.chapter-index a:hover { text-decoration: underline; }
.story-content { font-size: var(--reading-size,18px); line-height: var(--reading-spacing,1.4); }
.story-content p { line-height: inherit; }
.story-content h2 { font-size: 1.4em; }
.reading-chapter + .reading-chapter { margin-top: 3em; padding-top: 2em; border-top: 1px solid #ccc; }
.chapter-new { color: #805400; font: 700 .8em sans-serif; }
.publication-date { color: #c3afcf; font-size: 14px; }
.badge-inedito { white-space: normal; text-align: center; }
@media (max-width: 860px) {
    html { scroll-padding-top: 84px; }
    .story-content { width: calc(100% + 48px); max-width: none; margin-left: -24px; margin-right: -24px; border-radius: 0; padding: 28px 16px; font-size: var(--reading-size,16px); line-height: var(--reading-spacing,1.3); }
    .reading-control-label { display: none; }
    .reading-controls { gap: 8px; }
    .reading-control-group { gap: 5px; padding: 8px; }
    body { padding-top: 68px; }
    .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 68px; background: #000; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .site-header .brand { width: min(210px,calc(100% - 110px)); margin: 0; }
    .site-header .header-bottom { position: static; min-height: 0; }
    .site-header .menu-toggle { padding: 5px 9px; font-size: 12px; gap: 6px; }
    .site-header .main-menu { position: absolute; top: 68px; left: 0; right: 0; background: #000; padding: 10px 18px; max-height: calc(100dvh - 68px); overflow: auto; border-bottom: 1px solid #333; }
    .skip-link:focus { z-index: 110; position: fixed; }
    .form-pair, .cover-synopsis { grid-template-columns: minmax(0,1fr); gap: 0; }
    .chapter-fields { padding: 12px; }
    .story-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}

/* Áreas independentes do painel e navegação social. */
.settings-section { margin: 24px 0; padding: 24px; border: 1px solid #634f73; border-radius: 8px; }
.carousel-order-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.carousel-order-card { display: flex; align-items: center; gap: 16px; padding: 18px; background: #20132d; border: 1px solid #795298; border-radius: 8px; }
.carousel-order-card strong { text-transform: uppercase; }
.carousel-settings-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.carousel-settings-fields input[type=file] { max-width: 100%; }
.carousel-image-sizes { display: flex; flex-wrap: wrap; gap: 16px; }
.carousel-image-sizes > div { display: flex; flex-direction: column; gap: 6px; }
.carousel-image-preview { display: block; width: auto; height: auto; max-height: 60px; max-width: 100%; object-fit: contain; object-position: left; align-self: flex-start; }
.shelf-heading h2:has(.carousel-title-image) { width: 100%; }
.carousel-title-image { display: block; height: var(--title-height, 120px); width: auto; margin: 0 auto; }
@media (max-width: 860px) {
    .carousel-title-image { height: var(--title-height-mobile, 60px); width: auto; }
    .carousel-order-card { align-items: flex-start; gap: 10px; padding: 12px; }
}
[data-sort-handle] { touch-action: none; background: transparent; border: 1px solid #795298; border-radius: 6px; flex-shrink: 0; min-width: 44px; min-height: 44px; }
[data-sort-item].is-dragging { opacity: .55; outline: 2px solid #bb86fc; }
[data-sort-notice][hidden] { display: none; }
.header-bottom { flex-wrap: wrap; }
.header-social { margin-left: auto; flex-shrink: 0; }
.admin-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin: 32px 0; }
.dashboard-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 230px; padding: 28px; text-align: center; color: #f1e6fc; background: #20132d; border: 1px solid #795298; border-radius: 14px; }
.dashboard-card:hover, .dashboard-card:focus-visible { background: #352045; border-color: #d5b4fb; }
.dashboard-card > span { font-size: 40px; }
.dashboard-card strong { font-size: 20px; }
.dashboard-card small { color: #c1aecf; }
.stories-table .status-column { width: 68px; min-width: 68px; padding: 14px 8px; text-align: center; white-space: nowrap; }
.stories-table .actions-column { width: 1%; min-width: 390px; text-align: right; }
.stories-table .table-actions { flex-wrap: nowrap; white-space: nowrap; }
.video-management-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.video-management-layout > section { min-width: 0; }
.video-management-layout .admin-video-row { flex-wrap: wrap; gap: 14px; }
.video-management-layout .admin-video-actions { width: 100%; }
.video-category-sidebar { padding: 20px; border: 1px solid #634f73; background: #100b16; border-radius: 8px; }
.video-category-sidebar h2 { margin: 0 0 16px; font-size: 21px; }
.category-item { display: flex; align-items: center; gap: 4px; }
.category-item form { margin: 0; }
.category-link { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px; color: #eee0f7; border-radius: 6px; overflow-wrap: anywhere; }
.category-link.active, .category-link:hover { background: #352045; }
.category-link span { font-size: 13px; color: #c1aecf; }
.category-remove { cursor: pointer; background: transparent; border: 1px solid #794758; border-radius: 4px; color: #ffacac; font-size: 22px; padding: 2px 8px; }
.category-add { border-top: 1px solid #634f73; padding-top: 20px; margin-top: 20px; }
.video-category-sidebar .muted { font-size: 13px; line-height: 1.5; }
@media (max-width: 860px) {
    .admin-dashboard, .video-management-layout { grid-template-columns: 1fr; }
    .dashboard-card { min-height: 180px; }
    .header-social { display: none; }
}
.users-table-scroll { overflow-x: auto; margin: 24px 0; }
.users-table { width: 100%; border-collapse: collapse; text-align: left; }
.users-table th, .users-table td { padding: 14px; border-bottom: 1px solid #614477; vertical-align: middle; }
.users-table th { color: #d8b8f2; white-space: nowrap; }
.users-table td { overflow-wrap: normal; }
.users-table time { white-space: nowrap; }
.user-edit-form { max-width: 680px; }
.user-delete-panel { margin-top: 36px; padding: 20px; border: 1px solid #ab5363; border-radius: 8px; }
.user-delete-panel summary { color: #ffb1b1; cursor: pointer; }
.ranking-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.ranking-table th, .ranking-table td { padding: 9px 12px; font-size: .92rem; }

.ranking-table a { color: #e0bcff; text-decoration: underline; text-underline-offset: 3px; }
.ranking-table a:hover { color: #fff; }
.ranking-login { display: inline-block; margin-left: 10px; color: #b7a8c3; font-size: .8rem; }

/* Keep readable columns inside their own horizontal scrolling region. */
.table-wrap, .users-table-scroll { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
.admin-table, .users-table { min-width: 640px; table-layout: auto; }
.admin-table th, .users-table th { white-space: nowrap; }
.admin-table td, .users-table td { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.admin-table .table-synopsis-preview { white-space: normal; min-width: 280px; }
.admin-table .table-title-link { display: inline-block; min-width: 280px; white-space: normal; }
.users-table .text-column { min-width: 280px; white-space: normal; }

/* Desktop tables fit the content area; horizontal scrolling is mobile-only. */
@media (min-width: 861px) {
    .table-wrap, .users-table-scroll { overflow: visible; }
    .admin-table, .users-table { width: 100%; min-width: 0; table-layout: fixed; }
    .admin-table th, .admin-table td, .users-table th, .users-table td {
        min-width: 0; padding: 12px 10px; white-space: normal; overflow-wrap: anywhere;
    }
    .admin-table .table-title-link, .admin-table .table-synopsis-preview,
    .users-table .text-column { min-width: 0; max-width: 100%; }
    .users-table time { white-space: normal; }
    .admin-table td > div { flex-wrap: wrap; }
    .stories-table th:nth-child(4) { width: 120px; }
    .stories-table .status-column { width: 68px; min-width: 0; }
    .stories-table .actions-column { width: 244px; min-width: 0; }
    .stories-table .table-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; white-space: normal; }
    .stories-table .btn-action { justify-content: center; padding: 7px 8px; }
}

/* Optional audio action next to the reading action, including previews. */
.reader-entry-actions.story-audio-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; max-width: none; margin-top: 14px; }
.story-audio-actions .read-button, .story-audio-actions .reader-resume { margin-top: 0; width: auto; flex: 1 1 220px; justify-content: center; }
.spotify-button { display: inline-flex; flex: 1 1 190px; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid #1ed760; border-radius: 6px; background: #1db954; color: #071c0e; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.spotify-button:hover { background: #1ed760; }
.spotify-button svg { width: 26px; height: 26px; flex-shrink: 0; }
.spotify-button small { display: block; font-size: 12px; font-weight: 500; }
.story-audio-actions .reader-resume-progress { order: 3; flex-basis: 100%; margin-top: 0; }

.visits-badge { position: absolute; top: -8px; right: -9px; min-width: 20px; padding: 2px 5px; border-radius: 20px; background: #c84242; color: white; font-size: 11px; text-align: center; line-height: 16px; }
.visits-badge[hidden] { display: none; }
.statistics-summary { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0; }
.statistics-summary div { border: 1px solid #795298; border-radius: 8px; padding: 20px; flex: 1; }
.statistics-summary strong { display: block; font-size: 28px; }
.statistics-card-icon { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.statistics-table-wrap { overflow-x: auto; max-width: 100%; scrollbar-color: #be91dc #241333; }
.statistics-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.statistics-table th, .statistics-table td { padding: 16px 20px; min-width: 160px; border-bottom: 1px solid #50325e; text-align: left; white-space: nowrap; }
.statistics-table th:nth-child(2), .statistics-table td:nth-child(2) { min-width: 220px; }
.statistics-history th:nth-child(2), .statistics-history td:nth-child(2) { min-width: 320px; max-width: 440px; white-space: normal; overflow-wrap: anywhere; }
.statistics-pagination { display: flex; gap: 24px; margin: 24px 0; }
.statistics-nav { position: relative; }

/* Livros impressos: a capa inteira e a chamada dividem cada slide. */
.printed-shelf { background: radial-gradient(ellipse at 8% 65%, #522877 0, transparent 55%), #29113f; border-color: #8556a4; }
.printed-shelf .shelf-heading { margin-bottom: 16px; }
.printed-intro { text-align: center; color: #e4ceeF; font-size: 16px; line-height: 1.6; margin: 0 0 28px; }
.printed-carousel { gap: 36px; padding: 8px 0 22px; }
.printed-card { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 48px; scroll-snap-align: start; scroll-snap-stop: always; padding: 16px 42px 24px; }
.printed-cover { display: flex; justify-content: center; }
.printed-cover img { display: block; max-width: 100%; width: auto; height: 360px; object-fit: contain; filter: drop-shadow(12px 16px 12px #0008); }
.printed-copy { min-width: 0; }
.printed-eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #dbb7f5; }
.printed-copy h3 { font-family: Georgia, serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.13; margin: 16px 0 20px; color: #fff; text-wrap: balance; }
.printed-copy h4 { font-size: 16px; color: #f6e9ff; margin: 0 0 10px; line-height: 1.4; }
.printed-copy p { font-size: 15px; line-height: 1.75; color: #dfcde9; margin: 0 0 24px; overflow-wrap: anywhere; }
.printed-buy { position: relative; display: inline-flex; gap: 28px; align-items: center; background: #ffea00; color: #21102b; border-radius: 6px; padding: 15px 22px; font-size: 17px; font-weight: 900; letter-spacing: 1px; text-decoration: none; }
.printed-buy:hover, .printed-buy:focus-visible { color: #21102b; background: #fff17b; outline: 2px solid white; outline-offset: 4px; }
.printed-position { display: block; margin-top: 28px; color: #c09bd4; font-size: 12px; letter-spacing: 3px; }
.printed-admin-list { display: grid; gap: 20px; }
.printed-admin-card { display: flex; align-items: center; gap: 24px; padding: 24px; background: #20132d; border: 1px solid #795298; border-radius: 10px; }
.printed-admin-card > img { width: 80px; max-height: 125px; object-fit: contain; }
.printed-admin-card h2 { font-size: 20px; margin: 0; }
.printed-admin-card > div { min-width: 0; overflow-wrap: anywhere; }
.printed-cover-preview { display: block; max-width: 200px; max-height: 280px; object-fit: contain; margin-bottom: 16px; }
.printed-delete { border-top: 1px solid #795298; margin-top: 40px; padding-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
    .printed-shelf { scroll-margin-top: 88px; }
    .printed-card { grid-template-columns: 1fr; gap: 30px; padding: 8px 12px 16px; text-align: center; }
    .printed-cover img { height: 280px; }
    .printed-copy h3 { font-size: 28px; }
    .printed-copy p { text-align: left; }
    .printed-intro { font-size: 14px; }
    .printed-shelf .shelf-heading { flex-wrap: wrap; justify-content: center; gap: 12px; }
    .printed-shelf .shelf-heading h2 { flex: 0 0 100%; text-align: center; }
    .printed-admin-card { padding: 16px; gap: 16px; align-items: flex-start; }
}
@media (min-width: 861px) and (max-width: 1200px) {
    .main-menu { gap: 4px; }
    .main-menu a { font-size: 14px; letter-spacing: 1px; padding: 14px 10px; }
}

@media (min-width: 861px) {
    .public-page .main-menu .reader-menu { margin-left: auto; white-space: nowrap; }
}

@media (min-width: 861px) and (max-width: 960px) {
    .main-menu a { padding-left: 6px; padding-right: 6px; }
}