/* ── UI Tokens (Aurora Glass) ── */
    :root {
      --app-bg:      #0b0d17;
      --app-bg-glow: radial-gradient(circle at 15% 50%, rgba(109, 40, 217, 0.15), transparent 25%),
                     radial-gradient(circle at 85% 30%, rgba(56, 189, 248, 0.15), transparent 25%);
      --glass-bg:    rgba(17, 24, 39, 0.65);
      --glass-border:rgba(255, 255, 255, 0.08);
      --glass-blur:  blur(16px);
      
      --text-main:   #f8fafc;
      --text-muted:  #94a3b8;
      
      --accent-grad: linear-gradient(135deg, #8b5cf6, #3b82f6);
      --accent-glow: 0 0 20px rgba(139, 92, 246, 0.4);
      --accent-hover:linear-gradient(135deg, #a78bfa, #60a5fa);
      
      /* Base Book Themes */
      --book-bg:     #1e1e2e; /* Midnight fallback */
      --book-fg:     #cdd6f4;
      
      --header-h:    64px;
      --bar-h:       52px;
      --panel-w:     320px;
      --radius:      12px;
      --trans:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Advanced Theme Pool ── */
    [data-theme="light"] { --book-bg: #faf7f2; --book-fg: #1a1610; }
    [data-theme="sepia"] { --book-bg: #f4ecd8; --book-fg: #433422; }
    [data-theme="dark"]  { --book-bg: #1a1b26; --book-fg: #e2e8f0; }
    [data-theme="oled"]  { --book-bg: #000000; --book-fg: #d1d5db; }
    [data-theme="midnight"] { --book-bg: #1e1e2e; --book-fg: #cdd6f4; }
    [data-theme="dracula"]  { --book-bg: #282a36; --book-fg: #f8f8f2; }
    [data-theme="nord"]     { --book-bg: #2e3440; --book-fg: #d8dee9; }
    [data-theme="solarized-dark"] { --book-bg: #002b36; --book-fg: #839496; }

    /* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: 'Outfit', sans-serif;
      background-color: var(--app-bg);
      background-image: var(--app-bg-glow);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }

    /* Hide Scrollbars Globally but keep functionality */
    ::-webkit-scrollbar { display: none; width: 0; height: 0; }
    * { scrollbar-width: none; -ms-overflow-style: none; }

    /* ── Layout ── */
    #app {
      display: grid;
      grid-template-rows: var(--header-h) 1fr var(--bar-h);
      grid-template-columns: auto 1fr;
      height: 100vh;
      height: 100dvh;
    }

    .glass-panel {
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);
    }

    /* ── Header ── */
    #header {
      grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
      padding: 0 24px; border-bottom: 1px solid var(--glass-border); z-index: 100;
    }
    #logo {
      font-weight: 700; font-size: 1.4rem; background: var(--accent-grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px;
    }
    #logo svg { stroke: #a78bfa; -webkit-text-fill-color: initial; }

    .input-group { flex: 1; display: flex; gap: 12px; max-width: 700px; }
    #url-input {
      flex: 1; padding: 10px 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
      border-radius: var(--radius); color: var(--text-main); font-family: 'Fira Code', monospace;
      font-size: 0.85rem; outline: none; transition: all var(--trans);
    }
    #url-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); }
    #url-input::placeholder { color: var(--text-muted); }
    
    .btn-primary {
      padding: 10px 20px; background: var(--accent-grad); color: #fff; border: none;
      border-radius: var(--radius); font-family: 'Outfit', sans-serif; font-weight: 600;
      font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 8px;
      transition: all var(--trans); box-shadow: var(--accent-glow);
    }
    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
    .btn-primary:active { transform: scale(0.97); }

    .btn-secondary {
      padding: 10px 16px; background: rgba(255, 255, 255, 0.05); color: var(--text-main);
      border: 1px solid var(--glass-border); border-radius: var(--radius); font-family: 'Outfit', sans-serif;
      font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all var(--trans);
    }
    .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.2); }

    .hdr-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    .icon-btn {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-muted);
      cursor: pointer; transition: all var(--trans);
    }
    .icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-main); border-color: var(--glass-border); }
    .icon-btn.active { background: var(--accent-grad); color: #fff; box-shadow: var(--accent-glow); border-color: transparent;}

    #file-input { display: none; }

    /* ── Sidebar ── */
    #sidebar {
      grid-column: 1; grid-row: 2;
      width: var(--panel-w); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column;
      overflow: hidden; transition: width var(--trans), transform var(--trans); z-index: 110;
    }
    #sidebar.collapsed { width: 0; border-right: none; }
    .sidebar-tabs { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
    .stab {
      flex: 1; padding: 14px 0; background: none; border: none; border-bottom: 2px solid transparent;
      font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
      cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--trans);
    }
    .stab.active { color: #fff; border-bottom-color: #8b5cf6; }
    .sidebar-panel { display: none; flex: 1; overflow-y: auto; padding: 8px; }
    .sidebar-panel.active { display: flex; flex-direction: column; }

    #toc-list { list-style: none; }
    #toc-list li a {
      display: block; padding: 10px 16px 10px calc(16px + var(--depth,0) * 14px); color: var(--text-muted);
      text-decoration: none; font-size: 0.9rem; border-radius: 8px; transition: all 0.2s;
    }
    #toc-list li a:hover { color: #fff; background: rgba(255,255,255,0.05); }
    #toc-list li.active > a { color: #a78bfa; font-weight: 600; background: rgba(139, 92, 246, 0.1); }
    
    .bookmark-item {
      padding: 12px; border-radius: 10px; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border);
      margin-bottom: 8px; cursor: pointer; display: flex; align-items: flex-start; gap: 8px; transition: all 0.2s;
    }
    .bookmark-item:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.05); }
    .bookmark-item .bm-text { font-size: 0.85rem; color: var(--text-muted); flex: 1; }
    .bookmark-item .bm-del { color: var(--text-muted); background: none; border: none; cursor: pointer; font-size: 1.2rem; }
    .bookmark-item .bm-del:hover { color: #ef4444; }

    /* ── Reader Area ── */
    #reader-area {
      grid-column: 2; grid-row: 2;
      position: relative; background: var(--book-bg); transition: background var(--trans);
      display: block; min-width: 0;
      overflow: hidden;
    }
    #epub-viewer {
      position: absolute; inset: 0;
      width: 100%; height: 100%; max-width: 860px; margin: 0 auto;
    }
    #epub-viewer iframe { border: none !important; box-shadow: 0 0 40px rgba(0,0,0,0.1); }

    /* Landing screen */
    #landing {
      position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 24px; padding: 32px; text-align: center; background: transparent;
      z-index: 10;
    }
    .hero-icon {
      width: 100px; height: 100px; border-radius: 30px;
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
      border: 1px solid rgba(139, 92, 246, 0.3); display: flex; align-items: center; justify-content: center;
      color: #a78bfa; box-shadow: 0 0 40px rgba(139, 92, 246, 0.2);
    }
    
    #landing h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 4px; color: var(--book-fg); transition: color var(--trans); }
    #landing p { color: var(--book-fg); opacity: 0.7; font-size: 1.1rem; max-width: 500px; line-height: 1.6; transition: color var(--trans); margin-bottom: 8px;}

    #landing .btn-secondary {
      background: transparent; color: var(--book-fg); border: 2px solid var(--book-fg); opacity: 0.8;
    }
    #landing .btn-secondary:hover { background: var(--book-fg); color: var(--book-bg); opacity: 1; }

    .privacy-text {
      font-size: 0.85rem; color: var(--book-fg); opacity: 0.6; display: flex; align-items: center; gap: 6px; margin-top: 4px;
    }

    /* Overlays */
    .overlay-msg {
      position: absolute; inset: 0; background: rgba(11, 13, 23, 0.9); backdrop-filter: blur(8px);
      display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 50; text-align: center;
    }
    .overlay-msg.show { display: flex; }
    .spinner {
      width: 50px; height: 50px; border: 3px solid rgba(255,255,255,0.1);
      border-top-color: #a78bfa; border-radius: 50%; animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Nav Arrows */
    .page-arrow {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
      width: 56px; height: 56px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border); color: var(--text-main); cursor: pointer; transition: all 0.2s;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2); opacity: 0.7;
    }
    .page-arrow:hover { background: var(--accent-grad); opacity: 1; border-color: transparent; transform: translateY(-50%) scale(1.1); }
    #prev-btn { left: 16px; } #next-btn { right: 16px; }
    .page-arrow.hidden { opacity: 0; pointer-events: none; }

    /* ── Bottom Bar ── */
    #bottom-bar {
      grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-top: 1px solid var(--glass-border); z-index: 100;
    }
    #progress-track { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 99px; cursor: pointer; position: relative; }
    #progress-fill { height: 100%; background: var(--accent-grad); border-radius: 99px; width: 0%; box-shadow: var(--accent-glow); transition: width 0.3s; }
    #progress-thumb {
      position: absolute; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%;
      background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); left: 0%; display: none;
    }
    #progress-track:hover #progress-thumb { display: block; }
    #page-info { font-size: 0.85rem; color: var(--text-muted); font-family: 'Fira Code', monospace; min-width: 80px; text-align: right; }

    /* ── Popups ── */
    .popup {
      position: absolute; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--glass-border);
      border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 200; padding: 20px; opacity: 0; pointer-events: none;
      transform: translateY(10px); transition: all var(--trans);
    }
    .popup.open { opacity: 1; pointer-events: all; transform: translateY(0); }
    #font-popup { right: 80px; top: calc(var(--header-h) + 12px); width: 320px; }
    .popup-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }

    .control-row { display: flex; gap: 8px; margin-bottom: 20px; }
    .btn-control {
      flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03);
      color: var(--text-main); font-size: 0.9rem; cursor: pointer; transition: all 0.2s; text-align: center;
    }
    .btn-control:hover, .btn-control.active { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); color: #a78bfa; }
    
    /* 8-Theme Grid */
    .theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
    .t-swatch { height: 36px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; position: relative; }
    .t-swatch.active { border-color: #8b5cf6; transform: scale(1.1); z-index: 2; box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);}

    @media (max-width: 768px) {
      .input-group { display: none; }
      #sidebar { position: absolute; top: var(--header-h); left: 0; height: calc(100vh - var(--header-h) - var(--bar-h)); transform: translateX(-100%); z-index: 110;}
      #sidebar.mobile-open { transform: translateX(0); }
      #reader-area { grid-column: 1 / -1; } 
      .page-arrow { width: 44px; height: 44px; }
      #font-popup { right: 16px; width: 290px; }
    }