/* ================================================================
   TBooks Reader v2 — CSS
   ================================================================ */

/* ── Wrap ─────────────────────────────────────────────────────── */
.tbooks-wrap {
    --bg:        #faf8f3;
    --surface:   #ffffff;
    --border:    #e5ddd0;
    --text:      #2c2416;
    --muted:     #8c7b6a;
    --accent:    #b8692a;
    --accent-bg: #f5ede0;
    --radius:    10px;
    --top-h:     52px;
    --nav-h:     52px;

    display:        flex;
    flex-direction: column;
    background:     var(--bg);
    color:          var(--text);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    overflow:       hidden;
    box-shadow:     0 4px 24px rgba(0,0,0,.09);
    position:       relative;
    font-family:    'Georgia', serif;
    container-type: size;
}

/* ── Themes ───────────────────────────────────────────────────── */
.tbooks-wrap[data-theme="dark"] {
    --bg:        #141824;
    --surface:   #1a2035;
    --border:    #2a3355;
    --text:      #ddd5c5;
    --muted:     #8090b0;
    --accent:    #e8a84a;
    --accent-bg: #1c2845;
}
.tbooks-wrap[data-theme="sepia"] {
    --bg:        #f3ecd6;
    --surface:   #fdf8ee;
    --border:    #d8c9a8;
    --text:      #3b2f1e;
    --muted:     #7a6650;
    --accent:    #8b5e2f;
    --accent-bg: #eddfc4;
}

/* ── Topbar ───────────────────────────────────────────────────── */
.tbooks-topbar {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    height:         var(--top-h);
    padding:        0 12px;
    background:     var(--surface);
    border-bottom:  1px solid var(--border);
    flex-shrink:    0;
    gap:            6px;
}
.tbooks-topbar-left,
.tbooks-topbar-right { display: flex; align-items: center; gap: 4px; }

.tbooks-title {
    font-size:   13.5px;
    font-weight: 600;
    opacity:     .82;
    max-width:   210px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    margin-left: 4px;
}
.tbooks-progress { font-size: 12px; color: var(--muted); min-width: 36px; text-align:right; }
.tbooks-sep      { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }

/* ── Icon buttons ─────────────────────────────────────────────── */
.tbooks-icon-btn {
    all:          unset;
    cursor:       pointer;
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    width:        32px;
    height:       32px;
    border-radius:6px;
    color:        var(--text);
    font-size:    12px;
    font-weight:  700;
    transition:   background .15s, color .15s;
}
.tbooks-icon-btn svg { width: 16px; height: 16px; pointer-events: none; }
.tbooks-icon-btn:hover { background: var(--accent-bg); color: var(--accent); }
.tbooks-icon-btn:active { opacity: .7; }

/* ── Body ─────────────────────────────────────────────────────── */
.tbooks-body {
    flex:     1;
    display:  flex;
    overflow: hidden;
    position: relative;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.tbooks-sidebar {
    position:   absolute;
    top:        0; left: 0; bottom: 0;
    width:      0;
    overflow:   hidden;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index:    20;
    display:    flex;
    flex-direction: column;
    transition: width .25s ease, box-shadow .25s;
}
.tbooks-sidebar.open {
    width:      270px;
    box-shadow: 4px 0 20px rgba(0,0,0,.12);
    overflow-y: auto;
}
.tbooks-sidebar-head {
    padding:     12px 14px 10px;
    font-size:   12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:       var(--muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position:    sticky;
    top:         0;
    background:  var(--surface);
}
.tbooks-toc-item {
    padding:     9px 14px;
    font-size:   13px;
    cursor:      pointer;
    color:       var(--text);
    border-bottom: 1px solid var(--border);
    transition:  background .1s;
    line-height: 1.35;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.tbooks-toc-item:hover    { background: var(--accent-bg); color: var(--accent); }
.tbooks-toc-item.active   { color: var(--accent); font-weight: 600; }
.tbooks-toc-empty         { padding: 12px 14px; font-size: 12px; color: var(--muted); }

/* ── Viewer wrap ──────────────────────────────────────────────── */
.tbooks-viewer-wrap {
    flex:     1;
    overflow: hidden;
    position: relative;
}
.tbooks-foliate-host {
    width:    100%;
    height:   100%;
    display:  none;
}
simebv-foliate-view {
    display: block;
    width:   100%;
    height:  100%;
}

/* ── Loading ──────────────────────────────────────────────────── */
.tbooks-loading {
    position:     absolute;
    inset:        0;
    display:      flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
    gap:          14px;
    background:   var(--bg);
    color:        var(--muted);
    font-size:    14px;
    z-index:      5;
}
.tbooks-spinner {
    width:        38px;
    height:       38px;
    border:       3px solid var(--border);
    border-top-color: var(--accent);
    border-radius:50%;
    animation:    tbSpin .8s linear infinite;
}
@keyframes tbSpin { to { transform: rotate(360deg); } }

/* ── Error ────────────────────────────────────────────────────── */
.tbooks-error { text-align: center; padding: 20px; }
.tbooks-error p { margin: 6px 0; }
.tbooks-dl-btn {
    display:      inline-block;
    margin-top:   12px;
    padding:      8px 20px;
    background:   var(--accent);
    color:        #fff;
    border-radius:6px;
    text-decoration: none;
    font-size:    13px;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.tbooks-navbar {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    height:         var(--nav-h);
    padding:        0 14px;
    background:     var(--surface);
    border-top:     1px solid var(--border);
    flex-shrink:    0;
}
.tbooks-nav-btn {
    all:          unset;
    cursor:       pointer;
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    padding:      7px 14px;
    border-radius:7px;
    font-size:    13px;
    color:        var(--text);
    font-family:  inherit;
    transition:   background .12s, color .12s;
}
.tbooks-nav-btn:hover { background: var(--accent-bg); color: var(--accent); }
.tbooks-nav-btn:active { opacity: .7; }
.tbooks-page-info { font-size: 12px; color: var(--muted); text-align: center; flex: 1; }
.tbooks-loc { display: block; }

/* ── Toast ────────────────────────────────────────────────────── */
.tbooks-toast {
    position:     absolute;
    bottom:       65px;
    left:         50%;
    transform:    translateX(-50%) translateY(8px);
    background:   var(--text);
    color:        var(--bg);
    padding:      7px 18px;
    border-radius:20px;
    font-size:    13px;
    font-family:  sans-serif;
    opacity:      0;
    pointer-events: none;
    transition:   opacity .22s, transform .22s;
    white-space:  nowrap;
    z-index:      100;
}
.tbooks-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Library ──────────────────────────────────────────────────── */
.tbooks-library h3 { font-size: 20px; margin-bottom: 14px; }
.tbooks-library-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap:                   14px;
}
.tbooks-library-card {
    display:  flex;
    gap:      12px;
    padding:  14px;
    background: #fff;
    border:   1px solid #e5ddd0;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.tbooks-library-cover  { font-size: 32px; }
.tbooks-library-info   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tbooks-library-info strong { font-size: 14px; line-height: 1.3; }
.tbooks-progress-bar   { height: 4px; background: #e5ddd0; border-radius: 2px; overflow: hidden; }
.tbooks-progress-fill  { height: 100%; background: var(--accent, #b8692a); border-radius: 2px; }
.tbooks-library-info small { font-size: 11px; color: #8c7b6a; }
.tbooks-empty          { color: #8c7b6a; font-style: italic; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tbooks-wrap { border-radius: 0; }
    .tbooks-title { max-width: 110px; }
    .tbooks-sidebar.open { width: min(270px, 88vw); }
}

/* ── Fullscreen ───────────────────────────────────────────────── */
.tbooks-wrap:fullscreen {
    border-radius: 0 !important;
    width:  100vw  !important;
    height: 100vh  !important;
    max-height: 100vh !important;
}