:root { --paper:#fdfdfc; --ink:#191817; --muted:#6d6965; --line:#dedbd7; --soft:#f5f3f0; --accent:#c83b12; --accent-dark:#9e2b0d; --accent-contrast:#fff; --header-bg:rgba(253,253,252,.96); --serif:Georgia,"Times New Roman",serif; --sans:"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; transition:background-color .22s ease,color .22s ease; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 14px; border-radius:6px; background:var(--ink); color:var(--paper); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { height:76px; padding:0 max(24px,calc((100vw - 1380px)/2)); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; background:var(--header-bg); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font:700 clamp(22px,2vw,30px)/1 var(--serif); }
.brand-mark { display:grid; place-items:center; width:32px; height:38px; color:var(--accent-contrast); background:var(--accent); font:700 21px/1 var(--serif); clip-path:polygon(50% 0,100% 22%,86% 78%,50% 100%,14% 78%,0 22%); }
nav { display:flex; height:100%; gap:26px; }
.nav-link { padding:2px 4px 0; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); cursor:pointer; }
.nav-link.active { color:var(--ink); border-bottom-color:var(--accent); }
.button { min-height:42px; padding:0 18px; border:1px solid var(--accent); border-radius:7px; cursor:pointer; font-weight:650; }
.button.primary { justify-self:end; background:var(--accent); color:var(--accent-contrast); }
.button.primary:hover { background:var(--accent-dark); }
.import-action { display:flex; align-items:center; justify-content:center; gap:8px; }
.import-action svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.header-actions { position:relative; justify-self:end; display:flex; align-items:center; gap:10px; }
.theme-trigger { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); cursor:pointer; }
.theme-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.theme-panel { position:absolute; top:54px; right:0; width:min(360px,calc(100vw - 28px)); padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); box-shadow:0 18px 55px rgba(0,0,0,.18); z-index:20; }
.theme-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.theme-panel-head h2 { margin:0 0 4px; font:400 23px/1.2 var(--serif); }
.theme-panel-head p { margin:0; color:var(--muted); font-size:13px; }
.theme-panel-head button { margin:-8px -8px 0 0; width:34px; height:34px; border:0; background:none; color:var(--muted); font-size:25px; cursor:pointer; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; margin:19px 0; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.mode-switch button { min-height:36px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; }
.mode-switch button.active { background:var(--paper); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.theme-panel fieldset { margin:0 0 18px; padding:0; border:0; }
.theme-panel legend { margin-bottom:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.color-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.color-swatch { min-width:0; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; text-align:center; }
.color-swatch span { display:block; height:34px; border:1px solid var(--line); border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.color-swatch small { display:block; margin-top:5px; font-size:10px; }
.color-swatch.active span { outline:2px solid var(--accent); outline-offset:2px; }
.custom-color { height:39px; margin-top:12px; padding:0 9px 0 12px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:12px; }
.custom-color input { width:34px; height:27px; padding:2px; border:0; border-radius:4px; background:transparent; cursor:pointer; }
.reset-theme { padding:0; border:0; background:none; color:var(--accent); cursor:pointer; font-size:12px; }
.button.secondary { background:var(--paper); color:var(--accent); }
.page { width:min(1380px,calc(100% - 48px)); margin:0 auto; padding:42px 0 70px; }
.hidden { display:none!important; }
.data-status { width:max-content; max-width:100%; margin:-18px 0 28px; padding:7px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--soft); font-size:12px; }
.data-status[data-source="local"] { color:var(--accent); border-color:var(--accent); }
.data-status[data-source="error"] { color:#b42318; border-color:#b42318; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); max-width:900px; margin-bottom:32px; }
.summary>div { padding:2px 40px; border-right:1px solid var(--line); }
.summary>div:first-child { padding-left:0; }
.summary>div:last-child { border:0; }
.summary span,.summary small { display:block; color:var(--muted); }
.summary span { font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.summary strong { display:block; margin:6px 0 4px; font:400 36px/1 var(--serif); }
.summary small { font-size:13px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:10px; }
.section-heading h1,.page-title h1 { margin:0; font:400 24px/1.2 var(--serif); }
.section-heading p,.page-title p { margin:0; color:var(--muted); font-size:13px; }
.last-read { display:grid; grid-template-columns:56px minmax(210px,1.25fr) minmax(230px,1.2fr) minmax(170px,.75fr) 170px; align-items:center; min-height:136px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.last-read>div { padding:20px 28px; }
.book-glyph { color:var(--accent); font:400 43px/1 var(--serif); padding-right:0!important; }
.last-title,.last-detail { border-right:1px solid var(--line); }
.last-title h2 { margin:0 0 9px; font:400 28px/1.15 var(--serif); }
.last-title p,.last-detail small { margin:0; color:var(--muted); }
.last-detail span { display:block; margin-bottom:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.last-detail strong { display:block; margin-bottom:8px; font-weight:500; }
.last-detail .accent { color:var(--accent); font:400 25px/1 var(--serif); }
.last-actions { display:grid; gap:14px; }
.last-actions a,.row-links a,.inline-links a { color:var(--accent); text-decoration:none; }
.last-actions a:hover,.row-links a:hover,.inline-links a:hover,.title-link:hover,.chapter-link:hover { text-decoration:underline; }
.library-section { margin-top:28px; }
.controls { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.search { width:min(420px,100%); height:44px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--line); border-radius:7px; }
.search span { color:var(--muted); font-size:23px; }
.search input { width:100%; border:0; outline:0; background:transparent; }
select { min-width:190px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); }
.table-wrap { border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; }
th { padding:11px 10px; color:var(--muted); font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.06em; }
td { padding:12px 10px; border-top:1px solid var(--line); vertical-align:middle; }
th:first-child,td:first-child { padding-left:8px; width:23%; }
.title-link { color:var(--ink); font:400 17px/1.3 var(--serif); text-decoration:none; }
.chapter-link { color:var(--ink); text-decoration:none; }
.date { display:block; margin-top:5px; color:var(--muted); }
.progress-cell { min-width:150px; }
.progress-cell>span { color:var(--accent); font-weight:600; }
.progress-cell i { display:inline-block; width:65px; height:3px; margin:0 8px 3px; background:var(--line); }
.progress-cell b { display:block; height:100%; background:var(--accent); }
.progress-cell small { color:var(--muted); }
.row-links { display:flex; flex-wrap:wrap; gap:8px 15px; font-size:13px; }
.empty { padding:52px 24px; text-align:center; }
.empty h2 { margin:0 0 10px; font:400 24px/1.2 var(--serif); }
.empty p { max-width:600px; margin:0 auto 20px; color:var(--muted); line-height:1.6; }
.empty.compact { text-align:left; padding:30px 0; }
.empty.compact p { margin:0; }
.page-title { margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.page-title h1 { margin-bottom:8px; font-size:34px; }
.import-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:64px; }
.timeline { max-width:900px; }
.timeline-item { position:relative; display:grid; grid-template-columns:180px 1fr; gap:30px; padding:0 0 30px 22px; border-left:1px solid var(--line); }
.timeline-item:before { content:""; position:absolute; width:9px; height:9px; left:-5px; top:5px; border-radius:50%; background:var(--paper); border:1px solid #aaa6a1; }
.timeline-item.current:before { border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--paper); background:var(--accent); }
.timeline-item time { color:var(--muted); font-size:13px; }
.timeline-item h2 { margin:0 0 7px; font:400 20px/1.2 var(--serif); }
.timeline-item p { margin:0; color:var(--muted); }
.inline-links { display:flex; gap:18px; margin-top:10px; font-size:13px; }
.drop-zone { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px dashed #bbb7b2; border-radius:8px; text-align:center; cursor:pointer; }
.drop-zone:hover,.drop-zone.dragover { border-color:var(--accent); background:var(--soft); }
.drop-zone span { color:var(--accent); }
.drop-zone small { margin-top:8px; color:var(--muted); }
.import-tools { display:grid; gap:14px; align-content:start; }
.publish-notice,.draft-actions { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.publish-notice strong,.draft-actions strong { display:block; margin-bottom:7px; font:400 18px/1.2 var(--serif); }
.publish-notice p,.draft-actions p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.draft-actions .button { width:100%; margin-top:15px; }
.text-button { width:100%; margin-top:11px; padding:7px; border:0; background:none; color:var(--accent); cursor:pointer; }
.toast { position:fixed; right:22px; bottom:22px; max-width:min(420px,calc(100% - 44px)); padding:13px 17px; border-radius:7px; background:var(--ink); color:var(--paper); box-shadow:0 10px 30px #0002; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s ease; z-index:20; }
.toast.show { opacity:1; transform:none; }
.toast.error { background:#8f2010; }
.site-footer { width:min(1380px,calc(100% - 48px)); margin:0 auto; padding:28px 0 34px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-items:start; gap:12px 30px; color:var(--muted); font-size:13px; }
.site-footer>div { display:grid; gap:4px; }
.site-footer strong { color:var(--ink); font:400 18px/1.2 var(--serif); }
.site-footer nav { height:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; }
.site-footer a,.legal-header>a:last-child,.legal-actions>a:not(.button) { color:var(--muted); text-underline-offset:3px; }
.site-footer a:hover,.legal-header>a:last-child:hover,.legal-actions>a:not(.button):hover { color:var(--accent); }
.site-footer small { grid-column:1/-1; font-size:11px; }
.legal-header { min-height:76px; width:min(980px,calc(100% - 48px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.legal-page { width:min(760px,calc(100% - 48px)); min-height:calc(100vh - 230px); margin:0 auto; padding:64px 0 80px; }
.legal-kicker { margin:0 0 15px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.legal-page h1 { max-width:700px; margin:0 0 20px; font:400 clamp(42px,7vw,68px)/.98 var(--serif); letter-spacing:-.025em; }
.legal-lead { margin:0 0 48px; color:var(--muted); font:400 clamp(19px,2.2vw,24px)/1.55 var(--serif); }
.legal-page h2 { margin:40px 0 10px; font:400 25px/1.2 var(--serif); }
.legal-page p,.legal-page li { line-height:1.75; }
.legal-page p { margin:0 0 16px; }
.legal-page ul { margin:10px 0 18px; padding-left:22px; }
.legal-page li+li { margin-top:7px; }
.legal-page code { padding:2px 5px; border:1px solid var(--line); border-radius:4px; background:var(--soft); font-size:.9em; }
.legal-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:34px; }
.legal-actions .button { display:inline-flex; align-items:center; color:var(--accent); text-decoration:none; }
.legal-actions .button.primary { color:var(--accent-contrast); }
.compact-footer { width:min(980px,calc(100% - 48px)); display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.compact-footer small { grid-column:auto; margin-left:auto; }
.not-found { min-height:100vh; width:min(620px,calc(100% - 48px)); margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.not-found>p:first-of-type { margin:28px 0 4px; color:var(--accent); font-weight:700; letter-spacing:.08em; }
.not-found h1 { margin:0 0 14px; font:400 clamp(42px,8vw,70px)/1 var(--serif); }
.not-found>p:last-of-type { margin:0 0 28px; color:var(--muted); font-size:18px; }
.not-found .button { display:inline-flex; align-items:center; color:var(--accent-contrast); text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,label:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:900px){.site-header{grid-template-columns:1fr auto;height:auto;min-height:68px;padding:12px 18px}.site-header nav{order:3;grid-column:1/-1;height:38px}.button.primary{font-size:13px}.page{width:min(100% - 28px,1380px);padding-top:26px}.last-read{grid-template-columns:52px 1fr}.last-read>div{padding:18px}.last-detail,.last-actions{grid-column:1/-1;border-top:1px solid var(--line);border-right:0}.book-glyph{grid-row:1}.last-title{border:0}.import-layout{grid-template-columns:1fr;gap:28px}.drop-zone{order:-1}table{min-width:850px}.table-wrap{overflow-x:auto}}
@media(max-width:620px){.theme-trigger span,.import-action span{display:none}.theme-trigger,.import-action{width:42px;padding:0}.theme-panel{position:fixed;top:72px;left:14px;right:14px;width:auto;max-height:calc(100vh - 86px);overflow-y:auto}.brand{font-size:21px}.brand-mark{width:27px;height:33px}.summary{grid-template-columns:1fr 1fr}.summary>div{padding:0 16px}.summary>div:nth-child(2){border:0}.summary>div:last-child{grid-column:1/-1;padding:20px 0 0;margin-top:20px;border-top:1px solid var(--line)}.controls{flex-direction:column}.search,select{width:100%;height:44px}.section-heading{align-items:flex-start;flex-direction:column}.timeline-item{grid-template-columns:1fr;gap:7px}.page-title h1{font-size:30px}.site-footer{width:calc(100% - 28px);grid-template-columns:1fr}.site-footer nav{justify-content:flex-start}.site-footer small{grid-column:1}.legal-header,.legal-page,.compact-footer{width:calc(100% - 32px)}.legal-page{padding:44px 0 60px}.legal-page h1{font-size:45px}.legal-lead{margin-bottom:38px}.compact-footer{display:flex}.compact-footer small{width:100%;margin-left:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}