:root {
  --bg: #111319; --panel: #191c24; --text: #eeeae2; --muted: #92939a;
  --line: #30333b; --accent: #b68b69; --serif: 'Literata', Georgia, serif; --sans: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
header { height: 80px; padding: 0 12%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.logo { font-size: 14px; letter-spacing: 4px; font-weight: 600; }
.logo span { color: var(--accent); }
nav { display: flex; gap: 40px; font-size: 14px; color: var(--muted); font-weight: 500; }
nav a:hover { color: var(--accent); }
#admin-open { font-size: 13px !important; letter-spacing: 2px; font-weight: 600; }

.hero { min-height: 680px; padding: 90px 12%; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: 3px; font-weight: 600; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
.hero h1 { font-size: clamp(45px, 5vw, 72px); line-height: 1.15; margin: 30px 0; }
.hero h1 em, h2 em { color: var(--accent); font-style: normal; }
.description { max-width: 480px; color: #c8c4bd; line-height: 1.9; font-size: 16px; }
.button { display: inline-block; margin-top: 25px; padding: 16px 24px; background: var(--accent); color: #17171a; font-size: 13px; font-weight: 600; transition: .2s; cursor: pointer; border: 0; }
.button:hover { background: #c59b79; }

.cover {
  height: 490px; max-width: 390px; width: 100%; margin: auto; position: relative; overflow: hidden;
  background-image: url('../images/preview.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid #554a42;
  box-shadow: 20px 20px 0 #1b1e25;
}
.cover-title { display: none; }

.section { padding: 100px 12%; border-top: 1px solid var(--line); }
.section-label { color: var(--accent); font-size: 11px; letter-spacing: 3px; font-weight: 600; }
.about-grid { margin-top: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-grid h2 { font-size: 54px; line-height: 1.2; margin: 0; }
.about-grid p { color: #c8c4bd; font-family: var(--serif); font-size: 18px; line-height: 1.9; }
.chapter-list { margin-top: 35px; border-top: 1px solid var(--line); }
.chapter { display: grid; grid-template-columns: 65px 1fr auto; align-items: center; padding: 25px 5px; border-bottom: 1px solid var(--line); cursor: pointer; transition: .2s; }
.chapter:hover { background: #ffffff05; padding-left: 15px; }
.chapter-number { color: var(--accent); font-family: var(--serif); font-size: 23px; }
.chapter-title { font-family: var(--serif); font-size: 21px; }
.chapter-date { color: var(--muted); font-size: 12px; margin-top: 7px; }
.chapter-arrow { color: var(--accent); font-size: 18px; }
footer { padding: 35px 12%; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; letter-spacing: 2px; }

/* ЧИТАЛКА */
#reader-view { min-height: 100vh; background: #f1eee7; color: #292821; }
#reader-view.dark-reader { background: #111319 !important; color: #eeeae2 !important; }
.reader-header { padding: 22px 7%; border-bottom: 1px solid #ddd8cf; display: flex; justify-content: space-between; align-items: center; }
.reader-header button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; margin-left: 15px; }
.reader-content { max-width: 760px; margin: 75px auto; padding: 0 25px; }
.reader-kicker { color: #987655; font-size: 11px; letter-spacing: 3px; }
.reader-content h1 { font-size: 48px; line-height: 1.2; margin: 25px 0 12px; }
.reader-text { margin-top: 55px; font-family: var(--serif); font-size: 20px; line-height: 2; white-space: pre-line; }
.reader-text p { margin-bottom: 25px; }
.reader-navigation { display: flex; justify-content: space-between; margin-top: 65px; border-top: 1px solid #d9d3c9; padding-top: 25px; }
.reader-navigation button { border: 0; background: none; color: #987655; cursor: pointer; font-size: 14px; }
.dark-reader .reader-header, .dark-reader .reader-navigation { border-color: #30333b; }
.dark-reader .reader-text { color: #d6d0c5; }

/* ИСПРАВЛЕНИЕ ДЛЯ МОБИЛЬНЫХ */
@media(max-width: 750px) {
  header { padding: 0 5%; height: 60px; }
  nav { gap: 15px; font-size: 12px; } 
  #admin-open { font-size: 11px !important; }
  
  .hero { 
    grid-template-columns: 1fr; /* Одна колонка */
    padding: 50px 6% 70px; 
    gap: 40px;
    text-align: center; /* Центрируем текст */
  }
  
  .hero-content { display: flex; flex-direction: column; align-items: center; }
  .hero h1 { font-size: clamp(36px, 10vw, 50px); }
  .description { text-align: center; margin: 0 auto; font-size: 15px; }
  
  .cover { 
    height: 400px; 
    max-width: 280px;
    box-shadow: 10px 10px 0 #1b1e25;
  }
  
  .section { padding: 60px 6%; } 
  .about-grid { grid-template-columns: 1fr; gap: 25px; }
  .about-grid h2 { font-size: 38px; } 
  .about-grid p { font-size: 16px; }
  
  .chapter { grid-template-columns: 45px 1fr auto; padding: 20px 0; gap: 10px; }
  .chapter-title { font-size: 18px; }
  .chapter-number { font-size: 18px; }
  
  .reader-content { margin: 45px auto; }
  .reader-content h1 { font-size: 32px; } 
  .reader-text { font-size: 18px; }
  
  footer { gap: 15px; flex-wrap: wrap; padding: 25px 6%; }
}

/* =========================================
   СТИЛИ ДЛЯ АВТОРСКОЙ ПАНЕЛИ (STUDIO)
========================================= */
#admin-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    background-color: #f7f5f0; /* Теплый молочный фон */
    color: #333;
    font-family: var(--sans);
    overflow: hidden;
}

.studio-header {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e0dcd3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.studio-logo {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #222;
}
.studio-logo span { color: #b68b69; }

.studio-nav {
    display: flex;
    gap: 20px;
    font-size: 13px;
}
.studio-nav a {
    text-decoration: none;
    color: #888;
    padding: 5px 0;
}
.studio-nav a.active {
    color: #222;
    font-weight: 600;
    border-bottom: 2px solid #b68b69;
}

.studio-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Левая колонка */
.studio-sidebar {
    width: 280px;
    background: #f2efe9;
    border-right: 1px solid #e0dcd3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #b68b69;
    margin-bottom: 10px;
    font-weight: 600;
}

.studio-sidebar h3 {
    font-family: var(--serif);
    font-size: 20px;
    margin: 0 0 20px 0;
    font-weight: 500;
}

.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-item {
    display: flex;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.sidebar-item:hover { background: #e8e4dc; }
.sidebar-item.active { background: #e8e4dc; border-left: 3px solid #b68b69; }

.item-num {
    font-family: var(--serif);
    font-size: 16px;
    color: #999;
    margin-top: 2px;
}

.item-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
}

.item-status {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.add-chapter-btn {
    margin-top: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid #dcd7ce;
    border-radius: 6px;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}
.add-chapter-btn:hover { background: #f9f8f5; }

/* Центральная колонка (редактор) */
.studio-editor {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
    border-left: 1px solid #e0dcd3;
    border-right: 1px solid #e0dcd3;
    box-shadow: 0 0 30px rgba(0,0,0,0.02);
}

.editor-header {
    padding: 30px 50px 20px;
    border-bottom: 1px solid #f0ece4;
}

.editor-badge {
    display: inline-block;
    background: #f2efe9;
    color: #b68b69;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.editor-title-input {
    width: 100%;
    border: none;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    color: #222;
    outline: none;
    margin-bottom: 20px;
}

.editor-tools {
    display: flex;
    justify-content: flex-end;
}
.editor-tools button {
    background: #222;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    padding: 10px 50px;
    border-bottom: 1px solid #f0ece4;
    background: #faf9f7;
    gap: 10px;
}
.editor-toolbar select, .editor-toolbar button {
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}
.editor-toolbar button:hover, .editor-toolbar select:hover {
    background: #eee;
}

.editor-content {
    padding: 40px 50px;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    outline: none;
    overflow-y: auto;
    flex: 1;
}
.editor-content p { margin-top: 0; margin-bottom: 20px; }

/* Правая панель */
.studio-right-panel {
    width: 250px;
    background: #f9f8f5;
    border-left: 1px solid #e0dcd3;
}

@media(max-width: 1000px) {
    .studio-sidebar, .studio-right-panel { display: none; }
    .studio-editor { border: none; }
    .editor-header, .editor-toolbar, .editor-content { padding: 20px; }
    .editor-title-input { font-size: 28px; }
}

/* Исправляем шрифт внутри редактора Quill */
#editor-content {
    font-family: 'Literata', Georgia, serif !important;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

/* Делаем так, чтобы Quill не навязывал свой шрифт */
.ql-editor {
    font-family: 'Literata', Georgia, serif !important;
}

/* Убираем странный цвет при нажатии на курсив (исправление бага) */
.ql-snow .ql-picker-options {
    background-color: #fff !important;
}

/* Чуть увеличиваем отступы в редакторе, чтобы было удобно писать */
.ql-editor p {
    margin-bottom: 15px;
}

/* =========================================
   УЛУЧШЕНИЕ ЧИТАЛКИ И СТИЛИЗАЦИЯ СЕЛЕКТА
========================================= */

/* Красивая белая тема */
#reader-view.white-reader {
    background: #ffffff !important;
    color: #111111 !important;
}
#reader-view.white-reader .reader-header,
#reader-view.white-reader .reader-navigation {
    border-color: #e0e0e0;
}
#reader-view.white-reader .reader-text { color: #222; }
#reader-view.white-reader .reader-kicker { color: #888; }
#reader-view.white-reader #chapter-select { color: #111; border-color: #ccc; }


/* Выравниваем шапку читалки, чтобы ничего не съезжало */
.reader-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px;
}

.reader-header > a {
    white-space: nowrap !important;
    font-weight: 500;
}

/* Стилизация выпадающего списка под книжный дизайн */
#chapter-select {
    appearance: none; /* Убираем стандартную стрелку браузера */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent !important;
    border: 1px solid currentColor !important; /* Рамка цвета текста */
    color: inherit !important;
    padding: 8px 35px 8px 15px !important;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    
    /* Добавляем свою красивую стрелочку */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23987655%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px top 50% !important;
    background-size: 10px auto !important;
}

#chapter-select option {
    background: #fff;
    color: #333;
    padding: 10px;
}

/* Ограничиваем ширину селекта на мобилках */
@media (max-width: 600px) {
    #chapter-select {
        max-width: 150px;
        font-size: 13px;
        padding: 6px 25px 6px 10px !important;
    }
    .reader-header {
        padding: 15px 5% !important;
        flex-wrap: wrap !important;
    }
    .reader-header > div {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Стили для эпиграфов и посвящений */
.reader-text blockquote {
    margin: 30px 0;
    padding-left: 20px;
    border-left: 2px solid #b68b69;
    font-style: italic;
    color: #666;
}
.reader-text p {
    margin-bottom: 20px;
}
.ql-editor blockquote {
    border-left: 2px solid #b68b69;
    padding-left: 15px;
    color: #666;
    font-style: italic;
}

/* Красивое оформление цитат (эпиграфов) в читалке */
.reader-text blockquote {
    margin: 30px 0;
    padding: 10px 0 10px 20px;
    border-left: 2px solid #b68b69;
    font-style: italic;
    color: #666;
}
.reader-text blockquote p {
    margin-bottom: 10px;
}
/* Финальная полировка */
html{-webkit-font-smoothing:antialiased}h1,h2{text-wrap:balance}.description{text-wrap:pretty}.chapter{width:100%;background:transparent;color:inherit;border:0;border-bottom:1px solid var(--line);text-align:left;font:inherit}.chapter-number{font-variant-numeric:tabular-nums}.chapter:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.reader-header button{min-height:44px;min-width:44px;margin-left:0;padding:8px}.reader-header{position:sticky;top:0;background:inherit;z-index:2}.reader-navigation button{min-height:44px}.reader-navigation button:disabled{opacity:.35;cursor:default}.reader-text{white-space:normal;overflow-wrap:break-word}.reader-text img{max-width:100%}#reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:5;pointer-events:none}.login-panel{max-width:440px;margin:12vh auto;padding:24px}.login-panel h1{font-size:42px}.login-panel label{display:block;margin:24px 0}.login-panel input{display:block;width:100%;margin-top:10px;padding:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit}.login-panel [role=status]{color:#e9a18d}.studio-right-panel{display:none}.chapter:hover{transition:background-color .18s,padding-left .18s}button:disabled{cursor:wait}.reader-content{padding-bottom:60px}.dark-reader .reader-text blockquote{color:#b9afa2}
@media(max-width:600px){.reader-header>div{justify-content:flex-start!important;gap:4px!important}.reader-header{gap:8px}.reader-header button{font-size:13px}#close-reader{font-size:0}.reader-header #close-reader:after{content:'×';font-size:22px}.studio-body{flex-direction:column}.studio-sidebar{display:flex;width:100%;max-height:190px;flex-shrink:0}.sidebar-list{flex-direction:row;overflow:auto}.sidebar-item{min-width:160px}.studio-editor{width:100%;min-height:0}.editor-header{padding:16px}.hero{padding-top:48px}.cover{box-shadow:12px 12px 0 #1b1e25}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero h1{font-size:clamp(64px,8vw,112px);line-height:1.06;letter-spacing:-.035em}.author-caption{font-family:var(--sans)!important;font-size:14px!important;color:var(--muted)!important;margin-top:18px}.author-subtitle{font-family:var(--serif);font-size:27px;font-weight:400;margin:36px 0 12px}.about-grid p:first-child{margin-top:0}@media(max-width:750px){nav{gap:14px}.logo{letter-spacing:2px;font-size:12px}nav a{white-space:nowrap;font-size:11px}.hero h1{font-size:clamp(58px,15vw,88px)}}

.studio-notice{margin:0;padding:12px 20px;background:#f2efe9;font-size:13px;line-height:1.5;flex-shrink:0}.publish-option{font-size:13px;display:flex;align-items:center;gap:6px;margin-right:auto}.editor-tools{gap:12px;flex-wrap:wrap;align-items:center}.sidebar-item{border:0;background:transparent;font:inherit;text-align:left;color:inherit;width:100%;flex-shrink:0}.item-title,.item-status{display:block}#editor-status{margin:0;padding:10px 20px;font-size:13px;min-height:38px;background:#faf9f7}.studio-actions{display:flex;align-items:center;gap:16px}#author-logout{border:1px solid #dcd7ce;background:#fff;padding:8px 12px;cursor:pointer;color:#333}.login-hint{font-size:13px;color:var(--muted);line-height:1.6}.ql-editor{min-height:240px}.editor-tools button:disabled{opacity:.5}@media(max-width:600px){.studio-notice{padding:8px 14px;font-size:12px}.studio-sidebar{max-height:160px}.add-chapter-btn{margin-top:10px}.editor-header{padding:12px}.editor-title-input{margin-bottom:10px}.studio-header{padding:0 12px}.studio-nav{display:none}.studio-editor{flex:1}.sidebar-item{width:auto}.editor-tools{gap:8px}.publish-option{width:100%}}