*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #FFFFFF;
      --text-primary: #1A1A1A;
      --text-secondary: #999999;
      --accent: #FF5C00;
      --sidebar-w: 300px;
      --border: rgba(0, 0, 0, 0.08);
      --card-bg: #F5F5F3;
      --font-main: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Inter", sans-serif;
    }

    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-main);
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
      font-size: 14px;
    }

    .layout-wrapper { display: flex; height: 100vh; width: 100vw; }

    /* ─── MAIN CONTENT ─── */
    .scroll-container {
      flex: 1;
      margin-left: var(--sidebar-w);
      height: 100vh;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    main { display: flex; justify-content: center; padding: 64px 40px 120px 40px; }
    .content-wrapper { max-width: 540px; width: 100%; display: flex; flex-direction: column; gap: 48px; }

    .back-btn-circular {
      width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.15s ease; background: transparent; color: var(--text-primary); text-decoration: none; border: none; cursor: pointer;
      align-self: flex-start;
    }
    .back-btn-circular:hover { background: transparent; color: var(--accent); }
    .back-btn-circular:active { transform: scale(0.97); }
    .back-btn-circular svg { width: 16px; height: 16px; }

    .page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #F0F0F0; }
    .page-title { font-size: 15px; font-weight: 500; }
    .page-title span { color: var(--text-secondary); margin-left: 8px; font-weight: 400; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

    /* ─── FILTER ─── */
    .filter-wrap { position: relative; }
    .filter-trigger { display: flex; align-items: center; gap: 8px; background: none; border: none; font-family: inherit; font-size: 13px; cursor: pointer; color: var(--text-secondary); }
    .filter-trigger-label { color: var(--text-primary); font-weight: 500; }
    .filter-menu {
      position: absolute; top: 100%; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
      padding: 6px 0; min-width: 120px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 50; display: none; margin-top: 8px;
    }
    .filter-wrap.open .filter-menu { display: block; }
    .filter-option { display: block; width: 100%; text-align: left; padding: 8px 16px; background: none; border: none; font-size: 13px; cursor: pointer; }
    .filter-option:hover { background: #F9F9F9; color: var(--accent); }
    .filter-option.is-active { color: var(--accent); }

    /* ─── BOOK GRID & TOOLTIP ─── */
    .book-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .book-card { position: relative; cursor: pointer; opacity: 0; transform: translateY(10px); animation: fadeIn 0.5s ease forwards; }
    
    @keyframes fadeIn {
      to { opacity: 1; transform: translateY(0); }
    }

    .book-cover-wrap {
      width: 100%; aspect-ratio: 2/3; border-radius: 4px; background: var(--card-bg);
      box-shadow: -2px 4px 12px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
      overflow: hidden; border: 1px solid rgba(0,0,0,0.03);
      position: relative;
    }
    
    .book-card:hover .book-cover-wrap { transform: translateY(-6px) rotate(-1.5deg); box-shadow: -4px 12px 24px rgba(0,0,0,0.12); }
    .book-cover { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
    .book-card:hover .book-cover { filter: brightness(0.4); }

    /* Tooltip Styling */
    .book-tooltip {
      position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
      opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 5;
    }
    .book-card:hover .book-tooltip { opacity: 1; }

    .book-tooltip-title { color: white; font-weight: 500; font-size: 12px; line-height: 1.3; margin-bottom: 2px; }
    .book-tooltip-author { color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 8px; }
    
    .star-rating { display: flex; gap: 2px; }
    .star { color: var(--accent); font-size: 10px; }
    .star.empty { color: rgba(255, 255, 255, 0.2); }

    .book-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 10px; color: var(--text-secondary); }
    .book-cover.is-hidden,
    .book-cover-placeholder.is-hidden { display: none; }