/* ═══════════════════════════════════════════════
   BOOKOWO — CSS 2026
   Dark editorial / literary luxury aesthetic
   ═══════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400&display=swap');

   /* ─── ROOT VARIABLES ─── */
   :root {
     --bg:          #09090f;
     --bg-2:        #111118;
     --bg-3:        #18181f;
     --bg-4:        #1f1f28;
     --bg-card:     rgba(255,255,255,0.03);
     --border:      rgba(255,255,255,0.07);
     --border-h:    rgba(255,255,255,0.14);
     --accent:      #c9923a;
     --accent-2:    #e8b96a;
     --accent-glow: rgba(201,146,58,0.18);
     --accent-dim:  rgba(201,146,58,0.08);
     --red:         #c0392b;
     --green:       #27ae60;
     --blue:        #2980b9;
     --text:        #ede8dc;
     --text-muted:  #7a7a8c;
     --text-dim:    #4a4a5c;
     --serif:       'Cormorant Garamond', Georgia, serif;
     --sans:        'Syne', system-ui, sans-serif;
     --mono:        'JetBrains Mono', monospace;
     --radius:      12px;
     --radius-lg:   20px;
     --shadow-card: 0 4px 40px rgba(0,0,0,0.5);
     --shadow-glow: 0 0 60px rgba(201,146,58,0.12);
     --transition:  0.3s cubic-bezier(0.4,0,0.2,1);
   }
   
   /* ─── RESET & BASE ─── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html {
     scroll-behavior: smooth;
     overflow-x: clip;
   }
   
   body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--sans);
     font-size: 15px;
     line-height: 1.7;
     overflow-x: hidden;
     cursor: none;
   }

   .site-main {
    flex: 1 0 auto; /* Zmusza main do rozciągnięcia się, zapobiega zapadaniu */
    width: 100%;
    
    /* Fallback: jeśli zmienna nie zadziała, użyje 68px. Razem da to 100px odsunięcia */
    padding-top: calc(var(--nav-height, 68px) + 32px);
    padding-bottom: 60px; 
  }
  
  /* Strona główna ma tło wjeżdżające POD przezroczysty navbar, więc resetujemy padding */
  .site-main.is-home {
    padding-top: 0;
  }
   
   ::selection {
     background: var(--accent);
     color: var(--bg);
   }
   
   img { display: block; max-width: 100%; }
   a { color: inherit; text-decoration: none; }
   button { cursor: none; border: none; background: none; font-family: var(--sans); }
   input, textarea { font-family: var(--sans); }
   
   /* ─── CUSTOM CURSOR ─── */
   #cursor-dot {
     position: fixed;
     top: 0; left: 0;
     width: 8px; height: 8px;
     background: var(--accent);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: width 0.2s, height 0.2s, opacity 0.2s;
   }
   
   #cursor-ring {
     position: fixed;
     top: 0; left: 0;
     width: 36px; height: 36px;
     border: 1.5px solid rgba(201,146,58,0.5);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease;
   }
   
   body:has(a:hover, button:hover) #cursor-dot {
     width: 12px; height: 12px;
   }
   body:has(a:hover, button:hover) #cursor-ring {
     width: 56px; height: 56px;
     border-color: var(--accent);
   }
   
   /* ─── NOISE OVERLAY ─── */
   .noise {
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 1;
     opacity: 0.6;
   }
   
   /* ─── SCROLLBAR ─── */
   ::-webkit-scrollbar { width: 4px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
   
   /* ─── UTILITY ─── */
   .container {
     max-width: 1360px;
     margin: 0 auto;
     padding: 0 32px;
   }
   
   .section-label {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.2em;
     color: var(--accent);
     text-transform: uppercase;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .section-label::before {
     content: '';
     display: block;
     width: 24px;
     height: 1px;
     background: var(--accent);
   }
   
   .section-title {
     font-family: var(--serif);
     font-size: clamp(28px, 3.5vw, 48px);
     font-weight: 600;
     line-height: 1.15;
     letter-spacing: -0.02em;
   }
   
   .section-title em {
     font-style: italic;
     color: var(--accent-2);
   }
   
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 22px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.04em;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
   }
   
   .btn::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255,255,255,0.06);
     opacity: 0;
     transition: opacity 0.2s;
   }
   
   .btn:hover::after { opacity: 1; }
   
   .btn-primary {
     background: var(--accent);
     color: var(--bg);
   }
   
   .btn-primary:hover {
     background: var(--accent-2);
     transform: translateY(-1px);
     box-shadow: 0 8px 32px rgba(201,146,58,0.35);
   }
   
   .btn-ghost {
     border: 1px solid var(--border-h);
     color: var(--text);
   }
   
   .btn-ghost:hover {
     border-color: var(--accent);
     color: var(--accent);
   }
   
   .tag {
     display: inline-flex;
     align-items: center;
     padding: 3px 10px;
     border-radius: 100px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }
   
   .tag-genre { background: rgba(41,128,185,0.15); color: #5ba3cc; }
   .tag-new { background: rgba(201,146,58,0.15); color: var(--accent-2); }
   .tag-hot { background: rgba(192,57,43,0.15); color: #e07060; }
   .tag-pro { background: rgba(39,174,96,0.12); color: #5dba7d; }
   
   /* ─── ANIMATED GRADIENT BG ─── */
   .hero-gradient {
     position: absolute;
     inset: 0;
     overflow: hidden;
   }
   
   .hero-gradient::before {
     content: '';
     position: absolute;
     width: 70vw;
     height: 70vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(201,146,58,0.12) 0%, transparent 70%);
     top: -20%;
     right: -10%;
     animation: drift1 18s ease-in-out infinite alternate;
   }
   
   .hero-gradient::after {
     content: '';
     position: absolute;
     width: 50vw;
     height: 50vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(41,128,185,0.08) 0%, transparent 70%);
     bottom: -20%;
     left: -5%;
     animation: drift2 22s ease-in-out infinite alternate;
   }
   
   @keyframes drift1 {
     0%   { transform: translate(0, 0) scale(1); }
     100% { transform: translate(-5%, 8%) scale(1.1); }
   }
   @keyframes drift2 {
     0%   { transform: translate(0, 0) scale(1); }
     100% { transform: translate(8%, -5%) scale(1.15); }
   }
   
   /* ─── NAVIGATION ─── */
   #navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     padding: 0 32px;
     height: 68px;
     display: flex;
     align-items: center;
     transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
   }
   
   #navbar.scrolled {
     background: rgba(9,9,15,0.88);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 4px 40px rgba(0,0,0,0.4);
   }
   
   .nav-inner {
     display: flex;
     align-items: center;
     width: 100%;
     max-width: 1360px;
     margin: 0 auto;
     gap: 0;
   }
   
   .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: var(--serif);
     font-size: 24px;
     font-weight: 600;
     letter-spacing: -0.03em;
     margin-right: 48px;
     flex-shrink: 0;
   }
   
   .nav-logo-icon {
     width: 34px;
     height: 34px;
     background: var(--accent);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: transform 0.3s;
   }
   
   .nav-logo:hover .nav-logo-icon { transform: rotate(-6deg); }
   
   .nav-logo span { color: var(--accent); }
   
   .nav-links {
     display: flex;
     align-items: center;
     gap: 4px;
     flex: 1;
   }
   
   .nav-link {
     padding: 6px 14px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 500;
     color: var(--text-muted);
     transition: color 0.2s, background 0.2s;
     position: relative;
   }
   
   .nav-link:hover, .nav-link.active {
     color: var(--text);
     background: var(--bg-card);
   }
   
   .nav-link.active::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     transform: translateX(-50%);
     width: 16px;
     height: 2px;
     background: var(--accent);
     border-radius: 1px;
   }
   
   .nav-badge {
     display: inline-block;
     background: var(--accent);
     color: var(--bg);
     font-size: 9px;
     font-weight: 700;
     padding: 2px 5px;
     border-radius: 4px;
     vertical-align: super;
     margin-left: 3px;
     letter-spacing: 0.03em;
   }
   
   .nav-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-left: auto;
   }
   
   .nav-search-mini {
     display: flex;
     align-items: center;
     gap: 8px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 7px 14px;
     width: 200px;
     transition: var(--transition);
   }
   
   .nav-search-mini:focus-within {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-dim);
     width: 260px;
   }
   
   .nav-search-mini input {
     background: none;
     border: none;
     outline: none;
     color: var(--text);
     font-size: 12px;
     width: 100%;
     font-family: var(--sans);
   }
   
   .nav-search-mini input::placeholder { color: var(--text-dim); }
   
   .nav-avatar {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     transition: var(--transition);
   }
   
   .nav-avatar:hover {
     border-color: var(--accent);
     color: var(--accent);
   }
   
   /* ─── HERO ─── */
   #hero {
     position: relative;
     min-height: 100svh;
     display: flex;
     align-items: center;
     padding-top: 68px;
     overflow: hidden;
   }
   
   .hero-bg-grid {
     position: absolute;
     inset: 0;
     background-image:
       linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
     background-size: 72px 72px;
     mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
   }
   
   .hero-content {
     position: relative;
     z-index: 2;
     padding: 80px 0 60px;
     max-width: 800px;
   }
   
   .hero-kicker {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 6px 14px;
     background: var(--accent-dim);
     border: 1px solid rgba(201,146,58,0.2);
     border-radius: 100px;
     font-size: 12px;
     font-weight: 600;
     color: var(--accent-2);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     margin-bottom: 28px;
     animation: fadeSlideUp 0.8s ease both;
   }
   
   .hero-kicker-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     animation: pulse 2s ease-in-out infinite;
   }
   
   @keyframes pulse {
     0%, 100% { opacity: 1; transform: scale(1); }
     50%       { opacity: 0.5; transform: scale(0.7); }
   }
   
   .hero-title {
     font-family: var(--serif);
     font-size: clamp(44px, 7vw, 92px);
     font-weight: 300;
     line-height: 1.06;
     letter-spacing: -0.04em;
     margin-bottom: 28px;
     animation: fadeSlideUp 0.8s ease 0.1s both;
   }
   
   .hero-title strong {
     font-weight: 600;
     display: block;
   }
   
   .hero-title em {
     font-style: italic;
     color: var(--accent-2);
     display: block;
   }
   
   .hero-sub {
     font-size: 16px;
     line-height: 1.75;
     color: var(--text-muted);
     max-width: 540px;
     margin-bottom: 44px;
     animation: fadeSlideUp 0.8s ease 0.2s both;
   }
   
   /* Hero Search */
   .hero-search {
     animation: fadeSlideUp 0.8s ease 0.3s both;
     margin-bottom: 32px;
     position: relative;
     z-index: 10;
   }
   
   .search-box {
     display: flex;
     align-items: stretch;
     background: var(--bg-3);
     border: 1px solid var(--border-h);
     border-radius: 14px;
     overflow: visible;
     transition: border-color 0.3s, box-shadow 0.3s;
     box-shadow: 0 8px 40px rgba(0,0,0,0.4);
     position: relative;
   }
   
   .search-box:focus-within {
     border-color: var(--accent);
     box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 4px var(--accent-dim);
   }
   
   .search-category {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 18px;
     border-right: 1px solid var(--border);
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
     white-space: nowrap;
     min-width: 140px;
     position: relative;
   }
   
   .search-category select {
     position: absolute;
     inset: 0;
     opacity: 0;
     cursor: none;
     width: 100%;
   }
   
   .search-category-icon { font-size: 16px; }
   
   .search-input-wrap {
     flex: 1;
     position: relative;
   }
   
   .search-input-wrap input {
     width: 100%;
     height: 58px;
     padding: 0 20px;
     background: none;
     border: none;
     outline: none;
     color: var(--text);
     font-size: 16px;
     font-family: var(--serif);
   }
   
   .search-input-wrap input::placeholder {
     color: var(--text-dim);
     font-style: italic;
   }
   
   .search-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 28px;
     background: var(--accent);
     color: var(--bg);
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.04em;
     transition: background 0.2s, padding 0.2s;
     white-space: nowrap;
     margin: 6px;
     border-radius: 10px;
     cursor: none;
   }
   
   .search-btn:hover { background: var(--accent-2); }
   
   .search-filters {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 12px;
   }
   
   .search-filter {
     padding: 4px 12px;
     border-radius: 100px;
     font-size: 12px;
     font-weight: 500;
     background: var(--bg-3);
     border: 1px solid var(--border);
     color: var(--text-muted);
     transition: var(--transition);
   }
   
   .search-filter:hover, .search-filter.active {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-dim);
   }
   
   .search-filters-label {
     font-size: 11px;
     color: var(--text-dim);
     letter-spacing: 0.05em;
   }
   
   /* Hero stats */
   .hero-stats {
     display: flex;
     align-items: center;
     gap: 32px;
     animation: fadeSlideUp 0.8s ease 0.4s both;
     padding-top: 20px;
     border-top: 1px solid var(--border);
     margin-top: 8px;
   }
   
   .hero-stat { text-align: left; }
   .hero-stat-value {
     font-family: var(--serif);
     font-size: 28px;
     font-weight: 600;
     letter-spacing: -0.04em;
     line-height: 1;
     color: var(--text);
   }
   
   .hero-stat-value em {
     color: var(--accent-2);
     font-style: normal;
   }
   
   .hero-stat-label {
     font-size: 11px;
     color: var(--text-dim);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     margin-top: 4px;
   }
   
   .hero-stat-sep {
     width: 1px;
     height: 36px;
     background: var(--border);
   }
   
   /* Hero floating books */
   .hero-books {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 480px;
     height: 500px;
     z-index: 1;
     pointer-events: none;
   }
   
   .hero-book {
     position: absolute;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0,0,0,0.6);
     animation: floatBook 6s ease-in-out infinite;
   }
   
   .hero-book img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .hero-book-1 { width: 130px; height: 190px; top: 30px;  right: 60px;  animation-delay: 0s; }
   .hero-book-2 { width: 110px; height: 160px; top: 160px; right: 220px; animation-delay: 1.5s; }
   .hero-book-3 { width: 120px; height: 175px; top: 200px; right: 60px;  animation-delay: 3s; }
   .hero-book-4 { width: 100px; height: 145px; top: 50px;  right: 210px; animation-delay: 4.5s; }
   
   @keyframes floatBook {
     0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
     50%       { transform: translateY(-12px) rotate(var(--r, 0deg)); }
   }
   
   .hero-book-1 { --r: -6deg; }
   .hero-book-2 { --r: 3deg; }
   .hero-book-3 { --r: 8deg; }
   .hero-book-4 { --r: -3deg; }
   
   /* Gradient fade for books */
   .hero-books::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 120px;
     background: linear-gradient(90deg, var(--bg), transparent);
     z-index: 2;
   }
   
   /* ─── SCROLL MARQUEE ─── */
   .marquee-strip {
     position: relative;
     overflow: hidden;
     padding: 16px 0;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     background: var(--bg-2);
   }
   
   .marquee-track {
     display: flex;
     gap: 0;
     animation: marquee 30s linear infinite;
     width: max-content;
   }
   
   .marquee-track:hover { animation-play-state: paused; }
   
   .marquee-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 0 32px;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-dim);
     white-space: nowrap;
     border-right: 1px solid var(--border);
     transition: color 0.2s;
   }
   
   .marquee-item:hover { color: var(--accent); }
   .marquee-item-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.5; }
   
   @keyframes marquee {
     0%   { transform: translateX(0); }
     100% { transform: translateX(-50%); }
   }
   
   /* ─── SECTION BASE ─── */
   .section {
     padding: 100px 0;
     position: relative;
   }
   
   .section-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 52px;
     gap: 24px;
   }
   
   .section-header-left { flex: 1; }
   
   .view-all {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text-muted);
     transition: color 0.2s;
     flex-shrink: 0;
     margin-bottom: 6px;
   }
   
   .view-all svg { transition: transform 0.2s; }
   .view-all:hover { color: var(--accent); }
   .view-all:hover svg { transform: translateX(4px); }
   
   /* ─── BOOK CARD ─── */
   .book-card {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     background: var(--bg-card);
     border: 1px solid var(--border);
     transition: var(--transition);
     group: true;
   }
   
   .book-card:hover {
     transform: translateY(-6px);
     border-color: var(--border-h);
     box-shadow: 0 24px 60px rgba(0,0,0,0.5);
   }
   
   .book-cover-wrap {
     position: relative;
     aspect-ratio: 2/3;
     overflow: hidden;
     background: var(--bg-3);
   }
   
   .book-cover-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
   }
   
   .book-card:hover .book-cover-wrap img { transform: scale(1.06); }
   
   .book-cover-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(9,9,15,0.95) 0%, rgba(9,9,15,0.2) 60%, transparent 100%);
     opacity: 0;
     transition: opacity 0.3s;
     display: flex;
     align-items: flex-end;
     padding: 16px;
   }
   
   .book-card:hover .book-cover-overlay { opacity: 1; }
   
   .book-quick-actions {
     display: flex;
     gap: 6px;
     width: 100%;
   }
   
   .book-quick-btn {
     flex: 1;
     padding: 8px;
     border-radius: 8px;
     background: rgba(255,255,255,0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255,255,255,0.15);
     font-size: 11px;
     font-weight: 600;
     color: var(--text);
     text-align: center;
     transition: background 0.2s;
   }
   
   .book-quick-btn:hover { background: var(--accent); color: var(--bg); }
   .book-quick-btn.primary { background: var(--accent); color: var(--bg); }
   
   .book-cover-badges {
     position: absolute;
     top: 10px;
     left: 10px;
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .book-rank {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 28px;
     height: 28px;
     border-radius: 6px;
     background: rgba(9,9,15,0.8);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--mono);
     font-size: 11px;
     font-weight: 400;
     color: var(--accent);
     border: 1px solid rgba(201,146,58,0.3);
   }
   
   .book-info {
     padding: 14px 16px 16px;
   }
   
   .book-title {
     font-family: var(--serif);
     font-size: 16px;
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.01em;
     margin-bottom: 4px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   
   .book-author {
     font-size: 12px;
     color: var(--text-muted);
     margin-bottom: 10px;
   }
   
   .book-rating {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 10px;
   }
   
   .stars {
     display: flex;
     gap: 2px;
   }
   
   .star {
     font-size: 11px;
     color: var(--accent);
   }
   
   .star.empty { color: var(--bg-4); }
   
   .rating-value {
     font-family: var(--mono);
     font-size: 12px;
     color: var(--text-muted);
   }
   
   .rating-count {
     font-size: 11px;
     color: var(--text-dim);
   }
   
   .book-meta {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   /* ─── BOOKS GRID ─── */
   .books-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 20px;
   }
   
   /* ─── BOOKS CAROUSEL ─── */
   .carousel-wrap {
     position: relative;
   }
   
   .carousel-track {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     padding-bottom: 4px;
   }
   
   .carousel-track::-webkit-scrollbar { display: none; }
   
   .carousel-track .book-card {
     flex: 0 0 185px;
     scroll-snap-align: start;
   }
   
   .carousel-controls {
     display: flex;
     gap: 8px;
     position: absolute;
     top: -72px;
     right: 0;
   }
   
   .carousel-btn {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     transition: var(--transition);
     font-size: 14px;
   }
   
   .carousel-btn:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-dim);
   }
   
   /* ─── RECENTLY RATED SECTION ─── */
   .rated-grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr;
     gap: 20px;
   }
   
   .rated-main {
     border-radius: var(--radius-lg);
     overflow: hidden;
     background: var(--bg-2);
     border: 1px solid var(--border);
     position: relative;
   }
   
   .rated-main-img {
     height: 340px;
     position: relative;
     overflow: hidden;
   }
   
   .rated-main-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
   }
   
   .rated-main:hover .rated-main-img img { transform: scale(1.04); }
   
   .rated-main-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, var(--bg-2) 20%, rgba(17,17,24,0.4) 70%, transparent 100%);
   }
   
   .rated-main-body {
     padding: 28px 32px 32px;
   }
   
   .rated-main-review {
     font-family: var(--serif);
     font-size: 18px;
     line-height: 1.6;
     font-style: italic;
     color: var(--text);
     margin: 16px 0;
     padding-left: 20px;
     border-left: 2px solid var(--accent);
   }
   
   .rated-reviewer {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 20px;
   }
   
   .reviewer-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--bg-4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 14px;
     color: var(--accent);
     border: 1px solid var(--border);
     flex-shrink: 0;
   }
   
   .reviewer-name {
     font-size: 13px;
     font-weight: 600;
   }
   
   .reviewer-handle {
     font-size: 11px;
     color: var(--text-dim);
   }
   
   .rated-list { display: flex; flex-direction: column; gap: 1px; }
   
   .rated-item {
     display: flex;
     gap: 14px;
     padding: 16px;
     border-radius: var(--radius);
     border: 1px solid var(--border);
     background: var(--bg-2);
     transition: var(--transition);
     cursor: none;
   }
   
   .rated-item:hover {
     border-color: var(--border-h);
     background: var(--bg-3);
     transform: translateX(4px);
   }
   
   .rated-item-cover {
     width: 52px;
     height: 76px;
     border-radius: 6px;
     overflow: hidden;
     flex-shrink: 0;
     background: var(--bg-4);
   }
   
   .rated-item-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .rated-item-info { flex: 1; min-width: 0; }
   
   .rated-item-title {
     font-family: var(--serif);
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 3px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .rated-item-author {
     font-size: 12px;
     color: var(--text-muted);
     margin-bottom: 8px;
   }
   
   .rated-item-user {
     font-size: 11px;
     color: var(--text-dim);
     margin-top: 6px;
   }
   
   /* ─── MARKETPLACE ─── */
   #marketplace {
     background: var(--bg-2);
     position: relative;
     overflow: hidden;
   }
   
   #marketplace::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(201,146,58,0.06) 0%, transparent 70%);
     right: -200px;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
   }
   
   .marketplace-intro {
     max-width: 620px;
   }
   
   .marketplace-intro .section-title { margin-bottom: 16px; }
   
   .marketplace-intro p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.75;
     margin-bottom: 28px;
   }
   
   .marketplace-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-top: 56px;
   }
   
   .mp-card {
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     border: 1px solid var(--border);
     background: var(--bg-3);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     cursor: none;
   }
   
   .mp-card::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--mp-color, var(--accent));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
   }
   
   .mp-card:hover {
     border-color: var(--border-h);
     transform: translateY(-4px);
     box-shadow: 0 20px 60px rgba(0,0,0,0.3);
   }
   
   .mp-card:hover::before { transform: scaleX(1); }
   
   .mp-icon {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     background: var(--accent-dim);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 20px;
     transition: transform 0.3s;
   }
   
   .mp-card:hover .mp-icon { transform: scale(1.1) rotate(-5deg); }
   
   .mp-title {
     font-family: var(--serif);
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin-bottom: 10px;
   }
   
   .mp-desc {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.7;
     margin-bottom: 24px;
   }
   
   .mp-stats {
     display: flex;
     gap: 16px;
     padding-top: 20px;
     border-top: 1px solid var(--border);
   }
   
   .mp-stat { }
   .mp-stat-val {
     font-family: var(--mono);
     font-size: 18px;
     font-weight: 400;
     color: var(--text);
   }
   .mp-stat-lbl { font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
   
   .mp-cta {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     color: var(--mp-color, var(--accent));
     margin-top: 20px;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     transition: gap 0.2s;
   }
   
   .mp-cta:hover { gap: 10px; }
   
   .mp-card-editor { --mp-color: #e07060; }
   .mp-card-redactor { --mp-color: #5ba3cc; }
   .mp-card-layout { --mp-color: #5dba7d; }
   .mp-card-cover { --mp-color: #b07acc; }
   
   /* ─── BETA READERS ─── */
   #beta-readers {
     position: relative;
     overflow: hidden;
   }
   
   .beta-hero-text {
     text-align: center;
     max-width: 700px;
     margin: 0 auto 64px;
   }
   
   .beta-hero-text .section-label { justify-content: center; }
   .beta-hero-text .section-label::before { display: none; }
   .beta-hero-text .section-label::after {
     content: '';
     display: block;
     width: 24px;
     height: 1px;
     background: var(--accent);
   }
   
   .beta-hero-text .section-title { margin-bottom: 16px; }
   .beta-hero-text p { color: var(--text-muted); font-size: 15px; line-height: 1.75; }
   
   .beta-layout {
     display: grid;
     grid-template-columns: 1fr 380px;
     gap: 32px;
     align-items: start;
   }
   
   .beta-books-list { display: flex; flex-direction: column; gap: 16px; }
   
   .beta-book-card {
     display: flex;
     gap: 20px;
     padding: 24px;
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     background: var(--bg-2);
     transition: var(--transition);
     cursor: none;
     position: relative;
     overflow: hidden;
   }
   
   .beta-book-card:hover {
     border-color: var(--border-h);
     background: var(--bg-3);
     transform: translateX(6px);
   }
   
   .beta-book-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     background: var(--accent);
     opacity: 0;
     transition: opacity 0.3s;
   }
   
   .beta-book-card:hover::before { opacity: 1; }
   
   .beta-cover {
     width: 72px;
     height: 105px;
     border-radius: 8px;
     overflow: hidden;
     flex-shrink: 0;
     background: var(--bg-4);
   }
   
   .beta-cover img { width: 100%; height: 100%; object-fit: cover; }
   
   .beta-book-info { flex: 1; min-width: 0; }
   
   .beta-book-title {
     font-family: var(--serif);
     font-size: 18px;
     font-weight: 600;
     letter-spacing: -0.01em;
     margin-bottom: 4px;
   }
   
   .beta-book-author {
     font-size: 13px;
     color: var(--text-muted);
     margin-bottom: 12px;
   }
   
   .beta-book-desc {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.65;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin-bottom: 16px;
   }
   
   .beta-progress-wrap { margin-bottom: 12px; }
   
   .beta-progress-label {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: var(--text-dim);
     margin-bottom: 6px;
     letter-spacing: 0.04em;
   }
   
   .beta-progress-bar {
     height: 4px;
     background: var(--bg-4);
     border-radius: 2px;
     overflow: hidden;
   }
   
   .beta-progress-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     border-radius: 2px;
     transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
   }
   
   .beta-book-foot {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .beta-readers-list {
     display: flex;
   }
   
   .beta-reader-avatar {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     border: 2px solid var(--bg-2);
     background: var(--bg-4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     font-weight: 700;
     color: var(--accent);
     margin-left: -6px;
     flex-shrink: 0;
   }
   
   .beta-readers-list .beta-reader-avatar:first-child { margin-left: 0; }
   
   .beta-slots {
     font-size: 11px;
     color: var(--text-dim);
   }
   
   .beta-slots strong { color: var(--accent-2); font-family: var(--mono); }
   
   .beta-apply-btn {
     margin-left: auto;
     padding: 7px 16px;
     border-radius: 8px;
     background: var(--accent-dim);
     border: 1px solid rgba(201,146,58,0.25);
     color: var(--accent-2);
     font-size: 12px;
     font-weight: 600;
     transition: var(--transition);
   }
   
   .beta-apply-btn:hover {
     background: var(--accent);
     color: var(--bg);
     border-color: var(--accent);
   }
   
   /* Beta Panel */
   .beta-panel {
     position: sticky;
     top: 90px;
   }
   
   .beta-panel-card {
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     background: var(--bg-2);
     overflow: hidden;
   }
   
   .beta-panel-header {
     padding: 28px 28px 0;
   }
   
   .beta-panel-title {
     font-family: var(--serif);
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin-bottom: 6px;
   }
   
   .beta-panel-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
   
   .beta-reader-cards { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 12px; }
   
   .beta-reader-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     border-radius: var(--radius);
     background: var(--bg-3);
     border: 1px solid var(--border);
     transition: var(--transition);
     cursor: none;
   }
   
   .beta-reader-card:hover { border-color: var(--accent); transform: translateX(4px); }
   
   .brc-avatar {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: var(--bg-4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 15px;
     color: var(--accent);
     flex-shrink: 0;
   }
   
   .brc-info { flex: 1; min-width: 0; }
   .brc-name { font-size: 13px; font-weight: 600; }
   .brc-genres { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   
   .brc-stats {
     text-align: right;
   }
   
   .brc-books { font-family: var(--mono); font-size: 15px; color: var(--accent-2); }
   .brc-label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
   
   .beta-cta-box {
     padding: 24px 28px;
     background: var(--bg-3);
     border-top: 1px solid var(--border);
   }
   
   .beta-cta-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
   
   /* ─── EVENTS ─── */
   #events {
     background: var(--bg-2);
   }
   
   .events-grid {
     display: grid;
     grid-template-columns: 1.6fr 1fr;
     gap: 20px;
   }
   
   .event-featured {
     border-radius: var(--radius-lg);
     overflow: hidden;
     border: 1px solid var(--border);
     position: relative;
     background: var(--bg-3);
     cursor: none;
     transition: var(--transition);
   }
   
   .event-featured:hover { border-color: var(--border-h); transform: translateY(-2px); box-shadow: var(--shadow-card); }
   
   .event-featured-img {
     height: 280px;
     overflow: hidden;
     position: relative;
     background: var(--bg-4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 72px;
   }
   
   .event-featured-img-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(201,146,58,0.15), transparent);
   }
   
   .event-featured-body { padding: 28px 32px 32px; }
   
   .event-date {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--mono);
     font-size: 11px;
     color: var(--accent);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 12px;
   }
   
   .event-title {
     font-family: var(--serif);
     font-size: 26px;
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: -0.02em;
     margin-bottom: 12px;
   }
   
   .event-desc {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.7;
     margin-bottom: 24px;
   }
   
   .event-meta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
   }
   
   .event-location {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     color: var(--text-muted);
   }
   
   .event-list { display: flex; flex-direction: column; gap: 12px; }
   
   .event-card {
     display: flex;
     gap: 16px;
     padding: 18px 20px;
     border-radius: var(--radius);
     background: var(--bg-3);
     border: 1px solid var(--border);
     transition: var(--transition);
     cursor: none;
   }
   
   .event-card:hover { border-color: var(--border-h); transform: translateX(4px); }
   
   .event-card-date {
     text-align: center;
     flex-shrink: 0;
     width: 48px;
   }
   
   .event-card-day {
     font-family: var(--serif);
     font-size: 28px;
     font-weight: 600;
     line-height: 1;
     color: var(--accent-2);
   }
   
   .event-card-month {
     font-family: var(--mono);
     font-size: 10px;
     color: var(--text-dim);
     text-transform: uppercase;
     letter-spacing: 0.1em;
   }
   
   .event-card-sep { width: 1px; background: var(--border); flex-shrink: 0; }
   
   .event-card-info { flex: 1; min-width: 0; }
   .event-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
   .event-card-place { font-size: 12px; color: var(--text-muted); }
   .event-card-type {
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin-top: 8px;
   }
   .event-online { background: rgba(39,174,96,0.12); color: #5dba7d; }
   .event-offline { background: rgba(41,128,185,0.12); color: #5ba3cc; }
   
   /* ─── NEWS ─── */
   .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .news-card {
     border-radius: var(--radius-lg);
     overflow: hidden;
     background: var(--bg-2);
     border: 1px solid var(--border);
     transition: var(--transition);
     cursor: none;
   }
   
   .news-card:hover { transform: translateY(-4px); border-color: var(--border-h); box-shadow: var(--shadow-card); }
   
   .news-card-img {
     height: 200px;
     overflow: hidden;
     position: relative;
     background: var(--bg-3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 56px;
   }
   
   .news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
   .news-card:hover .news-card-img img { transform: scale(1.05); }
   
   .news-card-body { padding: 24px 24px 28px; }
   
   .news-card-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
   }
   
   .news-category {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent);
   }
   
   .news-date { font-size: 11px; color: var(--text-dim); }
   
   .news-title {
     font-family: var(--serif);
     font-size: 20px;
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.01em;
     margin-bottom: 10px;
   }
   
   .news-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
   
   .news-card-foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 24px;
     border-top: 1px solid var(--border);
   }
   
   .news-author {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: var(--text-muted);
   }
   
   .news-author-dot {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--bg-4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     font-weight: 700;
     color: var(--accent);
   }
   
   .news-read-more {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-dim);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 4px;
     transition: color 0.2s;
   }
   
   .news-card:hover .news-read-more { color: var(--accent); }
   
   /* ─── NEWSLETTER BAND ─── */
   .newsletter-band {
     padding: 80px 0;
     position: relative;
     overflow: hidden;
     background: var(--bg-2);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
   }
   
   .newsletter-band::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(201,146,58,0.07) 0%, transparent 70%);
     pointer-events: none;
   }
   
   .newsletter-inner {
     display: flex;
     align-items: center;
     gap: 64px;
     position: relative;
   }
   
   .newsletter-text { flex: 1; }
   .newsletter-text .section-title { margin-bottom: 10px; }
   .newsletter-text p { color: var(--text-muted); font-size: 15px; }
   
   .newsletter-form {
     display: flex;
     gap: 8px;
     flex: 1;
     max-width: 520px;
   }
   
   .newsletter-input {
     flex: 1;
     height: 50px;
     padding: 0 20px;
     border-radius: 10px;
     background: var(--bg-3);
     border: 1px solid var(--border-h);
     color: var(--text);
     font-size: 14px;
     font-family: var(--sans);
     outline: none;
     transition: var(--transition);
   }
   
   .newsletter-input:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-dim);
   }
   
   .newsletter-input::placeholder { color: var(--text-dim); }
   
   /* ─── FOOTER ─── */
   footer {
     padding: 80px 0 40px;
     background: var(--bg);
     border-top: 1px solid var(--border);
   }
   
   .footer-grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr 1fr;
     gap: 48px;
     padding-bottom: 60px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 40px;
   }
   
   .footer-brand .nav-logo { margin-bottom: 16px; font-size: 22px; }
   .footer-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 260px; margin-bottom: 24px; }
   
   .footer-socials {
     display: flex;
     gap: 8px;
   }
   
   .footer-social {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     transition: var(--transition);
   }
   
   .footer-social:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-dim);
   }
   
   .footer-col-title {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-dim);
     margin-bottom: 20px;
   }
   
   .footer-links { display: flex; flex-direction: column; gap: 10px; }
   
   .footer-link {
     font-size: 13px;
     color: var(--text-muted);
     transition: color 0.2s;
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .footer-link:hover { color: var(--text); }
   .footer-link:hover::before { color: var(--accent); }
   
   .footer-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
   }
   
   .footer-copy {
     font-size: 12px;
     color: var(--text-dim);
   }
   
   .footer-copy span { color: var(--accent); }
   
   .footer-legal {
     display: flex;
     gap: 20px;
   }
   
   .footer-legal a { font-size: 12px; color: var(--text-dim); transition: color 0.2s; }
   .footer-legal a:hover { color: var(--text-muted); }
   
   /* ─── ANIMATIONS ─── */
   @keyframes fadeSlideUp {
     from { opacity: 0; transform: translateY(24px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.6s ease, transform 0.6s ease;
   }
   
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .reveal-delay-1 { transition-delay: 0.1s; }
   .reveal-delay-2 { transition-delay: 0.2s; }
   .reveal-delay-3 { transition-delay: 0.3s; }
   .reveal-delay-4 { transition-delay: 0.4s; }
   
   /* ─── RESPONSIVE ─── */
   @media (max-width: 1200px) {
     .books-grid { grid-template-columns: repeat(4, 1fr); }
     .marketplace-grid { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 960px) {
     .rated-grid { grid-template-columns: 1fr; }
     .beta-layout { grid-template-columns: 1fr; }
     .beta-panel { position: static; }
     .events-grid { grid-template-columns: 1fr; }
     .news-grid { grid-template-columns: repeat(2, 1fr); }
     .newsletter-inner { flex-direction: column; gap: 32px; }
     .newsletter-form { max-width: 100%; width: 100%; }
     .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
     .hero-books { display: none; }
   }
   
   @media (max-width: 768px) {
     .container { padding: 0 20px; }
     .section { padding: 64px 0; }
     .books-grid { grid-template-columns: repeat(2, 1fr); }
     .marketplace-grid { grid-template-columns: 1fr; }
     .news-grid { grid-template-columns: 1fr; }
     .footer-grid { grid-template-columns: 1fr; }
     .section-header { flex-direction: column; align-items: flex-start; }
     #navbar { padding: 0 20px; }
     .nav-links, .nav-search-mini { display: none; }
     .search-category { display: none; }
   }
   
   /* ═══════════════════════════════════════════════
      LIGHT THEME
      ═══════════════════════════════════════════════ */
   [data-theme="light"] {
     --bg:          #f4f1eb;
     --bg-2:        #ece8e0;
     --bg-3:        #e4dfd5;
     --bg-4:        #d8d2c6;
     --bg-card:     rgba(0,0,0,0.025);
     --border:      rgba(0,0,0,0.08);
     --border-h:    rgba(0,0,0,0.14);
     --accent:      #b87a28;
     --accent-2:    #c9923a;
     --accent-glow: rgba(184,122,40,0.15);
     --accent-dim:  rgba(184,122,40,0.09);
     --text:        #1c1a16;
     --text-muted:  #5a5650;
     --text-dim:    #8a8680;
   }
   
   [data-theme="light"] .noise { opacity: 0.2; }
   
   [data-theme="light"] .hero-gradient::before {
     background: radial-gradient(circle, rgba(184,122,40,0.09) 0%, transparent 70%);
   }
   [data-theme="light"] .hero-gradient::after {
     background: radial-gradient(circle, rgba(41,128,185,0.06) 0%, transparent 70%);
   }
   [data-theme="light"] .hero-bg-grid {
     background-image:
       linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
   }
   [data-theme="light"] #navbar.scrolled {
     background: rgba(244,241,235,0.88);
     box-shadow: 0 4px 40px rgba(0,0,0,0.1);
   }
   [data-theme="light"] .book-placeholder-text { color: rgba(0,0,0,0.07); }
   [data-theme="light"] .search-box { box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
   [data-theme="light"] .marquee-strip { background: var(--bg-2); }
   
   /* ─── THEME TOGGLE ─── */
   .theme-toggle {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: var(--bg-3);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     transition: var(--transition);
     cursor: none;
     flex-shrink: 0;
   }
   .theme-toggle:hover {
     border-color: var(--accent);
     color: var(--accent);
   }
   
   [data-theme="dark"]  .icon-sun  { display: none; }
   [data-theme="dark"]  .icon-moon { display: block; }
   [data-theme="light"] .icon-sun  { display: block; }
   [data-theme="light"] .icon-moon { display: none; }
   
   /* ─── CUSTOM DROPDOWN ─── */
   .search-category {
     position: relative;
     display: flex;
     align-items: stretch;
     border-right: 1px solid var(--border);
     flex-shrink: 0;
   }
   
   .sc-trigger {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 18px;
     background: none;
     border: none;
     color: var(--text-muted);
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 600;
     cursor: none;
     white-space: nowrap;
     min-width: 148px;
     transition: color 0.2s;
   }
   .sc-trigger:hover { color: var(--text); }
   
   .search-category.is-open .sc-trigger { color: var(--accent); }
   
   .sc-icon-wrap {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     color: var(--text-muted);
   }
   .search-category.is-open .sc-icon-wrap { color: var(--accent); }
   
   .sc-label { flex: 1; text-align: left; }
   
   .sc-chevron {
     flex-shrink: 0;
     transition: transform 0.25s ease;
     color: var(--text-dim);
   }
   .sc-chevron.rotated { transform: rotate(180deg); }
   
   .sc-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     min-width: 200px;
     background: var(--bg-3);
     border: 1px solid var(--border-h);
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 16px 48px rgba(0,0,0,0.45);
     z-index: 9000;
     padding: 6px;
   }
   
   [data-theme="light"] .sc-dropdown {
     box-shadow: 0 16px 48px rgba(0,0,0,0.18);
   }
   
   .sc-enter { transition: opacity 0.18s ease, transform 0.18s ease; }
   .sc-enter-start { opacity: 0; transform: translateY(-6px) scale(0.97); }
   .sc-enter-end   { opacity: 1; transform: translateY(0) scale(1); }
   
   .sc-option {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;
     padding: 9px 12px;
     border-radius: 8px;
     background: none;
     border: none;
     color: var(--text-muted);
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 500;
     cursor: none;
     text-align: left;
     transition: background 0.15s, color 0.15s;
   }
   .sc-option:hover { background: var(--bg-4); color: var(--text); }
   .sc-option.sc-option-active { color: var(--accent); }
   .sc-option.sc-option-active .sc-opt-icon { color: var(--accent); }
   
   .sc-opt-icon {
     display: flex;
     align-items: center;
     color: var(--text-dim);
     flex-shrink: 0;
   }
   .sc-check {
     margin-left: auto;
     color: var(--accent);
     flex-shrink: 0;
   }
   
   /* ─── BOOK PLACEHOLDER ─── */
   .book-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: flex-end;
     padding: 12px;
     position: relative;
     overflow: hidden;
   }
   .book-placeholder-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: var(--serif);
     font-size: 34px;
     font-weight: 700;
     color: rgba(255,255,255,0.055);
     white-space: nowrap;
     letter-spacing: -0.04em;
     pointer-events: none;
     user-select: none;
   }
   
   /* ─── SPEC CARD ─── */
   .spec-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 18px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     transition: var(--transition);
     flex-shrink: 0;
   }
   .spec-card:hover { border-color: var(--sc, var(--accent)); transform: translateY(-2px); }
   
   .spec-avatar {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     border: 1px solid transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 14px;
     flex-shrink: 0;
   }
   
   /* ─── MODAL ─── */
   [x-cloak] { display: none !important; }
   
   .modal-backdrop {
     position: fixed;
     inset: 0;
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   
   .modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.65);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   
   [data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45); }
   
   .modal-card {
     position: relative;
     z-index: 1;
     background: var(--bg-2);
     border: 1px solid var(--border-h);
     border-radius: 20px;
     padding: 36px 36px 32px;
     width: 100%;
     max-width: 440px;
     box-shadow: 0 32px 80px rgba(0,0,0,0.6);
     max-height: 90svh;
     overflow-y: auto;
     scrollbar-width: none;
   }
   .modal-card::-webkit-scrollbar { display: none; }
   
   [data-theme="light"] .modal-card { box-shadow: 0 32px 80px rgba(0,0,0,0.2); }
   
   .modal-t-enter { transition: opacity 0.25s ease, transform 0.25s ease; }
   .modal-t-start { opacity: 0; transform: scale(0.95) translateY(12px); }
   .modal-t-end   { opacity: 1; transform: scale(1) translateY(0); }
   
   .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     cursor: none;
     transition: var(--transition);
   }
   .modal-close:hover { border-color: var(--border-h); color: var(--text); }
   
   .modal-logo {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 24px;
   }
   .modal-logo-name {
     font-family: var(--serif);
     font-size: 20px;
     font-weight: 600;
     letter-spacing: -0.02em;
   }
   .modal-logo-sub { font-size: 12px; color: var(--text-dim); }
   
   .modal-tabs {
     display: flex;
     background: var(--bg-3);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 3px;
     margin-bottom: 24px;
   }
   .modal-tab {
     flex: 1;
     padding: 8px;
     border-radius: 8px;
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
     cursor: none;
     transition: var(--transition);
   }
   .modal-tab.active {
     background: var(--bg-2);
     color: var(--text);
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   }
   [data-theme="light"] .modal-tab.active { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
   
   .modal-form { display: flex; flex-direction: column; gap: 16px; }
   
   .form-group { display: flex; flex-direction: column; gap: 6px; }
   
   .form-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--text-muted);
     letter-spacing: 0.04em;
   }
   .form-label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .form-link {
     font-size: 12px;
     color: var(--accent);
     transition: color 0.2s;
   }
   .form-link:hover { color: var(--accent-2); }
   
   .form-input-wrap { position: relative; }
   
   .form-input {
     width: 100%;
     height: 44px;
     padding: 0 16px;
     border-radius: 10px;
     background: var(--bg-3);
     border: 1px solid var(--border-h);
     color: var(--text);
     font-size: 14px;
     font-family: var(--sans);
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
   .form-input-wrap .form-input { padding-right: 44px; }
   
   .form-input:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-dim);
   }
   .form-input::placeholder { color: var(--text-dim); }
   
   .form-eye {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-dim);
     cursor: none;
     transition: color 0.2s;
   }
   .form-eye:hover { color: var(--text-muted); }
   
   .form-check {
     display: flex;
     align-items: flex-start;
     gap: 8px;
   }
   .form-checkbox {
     width: 16px;
     height: 16px;
     border-radius: 4px;
     border: 1.5px solid var(--border-h);
     background: var(--bg-3);
     appearance: none;
     -webkit-appearance: none;
     cursor: none;
     flex-shrink: 0;
     margin-top: 1px;
     transition: var(--transition);
     position: relative;
   }
   .form-checkbox:checked {
     background: var(--accent);
     border-color: var(--accent);
   }
   .form-checkbox:checked::after {
     content: '';
     position: absolute;
     top: 2px; left: 4px;
     width: 5px; height: 8px;
     border: 2px solid var(--bg);
     border-top: none; border-left: none;
     transform: rotate(45deg);
   }
   .form-check-label { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
   
   .form-radio-group {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
   }
   .form-radio {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
     border-radius: 8px;
     background: var(--bg-3);
     border: 1px solid var(--border);
     font-size: 13px;
     color: var(--text-muted);
     cursor: none;
     transition: var(--transition);
   }
   .form-radio:has(input:checked) {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-dim);
   }
   .form-radio input { display: none; }
   
   .modal-divider {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 20px 0;
     font-size: 11px;
     color: var(--text-dim);
     letter-spacing: 0.06em;
   }
   .modal-divider::before,
   .modal-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border);
   }
   
   .modal-socials {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
   }
   .modal-social-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px;
     border-radius: 10px;
     background: var(--bg-3);
     border: 1px solid var(--border-h);
     color: var(--text-muted);
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 600;
     cursor: none;
     transition: var(--transition);
   }
   .modal-social-btn:hover { border-color: var(--border-h); color: var(--text); background: var(--bg-4); }



   /* =====================
   Autor 
   ===================== */

       /* Zredukowany CSS, bo bazowy już jest w głównej templatce */
       .breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); margin-bottom:40px; }
       .author-hero { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; margin-bottom: 80px; }
       .author-avatar-col { position: sticky; top: 88px; }
       .author-avatar-wrap { width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #1a1225 0%, #2d1b4e 60%, #1e1535 100%); position: relative; box-shadow: 0 32px 80px rgba(0,0,0,0.55); margin-bottom: 20px; }
       .author-avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 96px; font-weight: 600; color: rgba(255,255,255,0.08); user-select: none; }
       .author-sidebar-stats { display: flex; flex-direction: column; gap: 1px; }
       .author-sidebar-stat { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--border); transition: background .2s; }
       .ass-label { font-size:11px; color:var(--text-dim); letter-spacing:0.07em; text-transform:uppercase; }
       .ass-value { font-family:var(--mono); font-size:16px; color:var(--text); }
       .author-name { font-family: var(--serif); font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 8px; }
       .author-pseudo { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--text-muted); margin-bottom: 28px; }
       .author-bio { font-family: var(--serif); font-size: 17px; line-height: 1.8; color: var(--text-muted); margin-bottom: 12px; }
       .author-ratings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 80px; }
       .rating-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; text-align: center; position: relative; overflow: hidden; }
       .ring-wrap { position:relative; width:150px; height:150px; margin:0 auto 28px; }
       .ring-svg  { transform:rotate(-90deg); }
       .ring-track { fill:none; stroke:var(--bg-4); stroke-width:8; }
       .ring-fill  { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
       .ring-score { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
       .ring-score-val  { font-family:var(--serif); font-size:36px; font-weight:600; line-height:1; letter-spacing:-0.04em; }
       .publishers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom:80px;}
       .publisher-card { padding: 28px 24px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: var(--transition); cursor: none; }
       .author-books-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-bottom:80px;}
       @media(max-width:960px) { .author-hero { grid-template-columns:1fr; } .author-avatar-col { position:static; } }


/* =====================
   Ksiąka
===================== */


  /* ── LISTING PAGE STYLES ── */
  .breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin-bottom:32px}
  .breadcrumb a{color:var(--text-muted);transition:color .2s}.breadcrumb a:hover{color:var(--accent)}
  .listing-layout { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: start; }
  .filter-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; }
  .filter-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .filter-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: none; user-select: none; transition: background .15s; }
  .filter-panel-header:hover { background: var(--bg-3); }
  .filter-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
  .filter-panel-count { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--accent-dim); color: var(--accent-2); display: none; }
  .filter-panel-count.visible { display: inline-block; }
  .filter-chevron { color: var(--text-dim); transition: transform .25s ease; flex-shrink: 0; }
  .filter-chevron.open { transform: rotate(180deg); }
  .filter-panel-body { border-top: 1px solid var(--border); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
  .filter-option { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 7px; cursor: none; transition: background .15s; }
  .filter-option:hover { background: var(--bg-3); }
  .filter-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-h); background: var(--bg-3); appearance: none; -webkit-appearance: none; cursor: none; flex-shrink: 0; transition: var(--transition); position: relative; }
  .filter-checkbox:checked { background: var(--accent); border-color: var(--accent); }
  .filter-checkbox:checked::after { content: ''; position: absolute; top: 2px; left: 4px; width: 5px; height: 8px; border: 2px solid var(--bg); border-top: none; border-left: none; transform: rotate(45deg); }
  .filter-option-label { font-size: 13px; color: var(--text-muted); flex: 1; }
  .filter-option-count { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
  .filter-stars { display: flex; gap: 2px; }
  .filter-star { font-size: 11px; color: var(--accent); }
  .filter-star.e { color: var(--bg-4); }

  .listing-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
  .toolbar-left { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .toolbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px; width: 280px; transition: var(--transition); }
  .toolbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  .toolbar-search input { background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 13px; flex: 1; }
  .results-count { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
  .results-count strong { color: var(--text); font-family: var(--mono); }

  .sort-select-wrap { position: relative; display: flex; align-items: center; }
  .sort-select { appearance: none; -webkit-appearance: none; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 34px 8px 14px; font-size: 12px; font-family: var(--sans); color: var(--text-muted); cursor: none; outline: none; transition: var(--transition); }
  .sort-select:focus { border-color: var(--accent); }
  .sort-select-icon { position: absolute; right: 10px; pointer-events: none; color: var(--text-dim); }

  .view-toggle { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
  .view-btn { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: none; transition: var(--transition); background: none; border: none; }
  .view-btn.active { background: var(--bg-4); color: var(--text); }
  .view-btn:hover:not(.active) { color: var(--text-muted); }

  .active-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; min-height: 0; }
  .active-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-radius: 100px; background: var(--accent-dim); border: 1px solid rgba(201,146,58,0.25); font-size: 11px; font-weight: 600; color: var(--accent-2); cursor: none; }
  .active-tag-x { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(201,146,58,0.2); font-size: 10px; line-height: 1; }
  .clear-all-btn { font-size: 11px; font-weight: 600; color: var(--text-dim); background: none; border: none; cursor: none; font-family: var(--sans); padding: 4px 8px; border-radius: 6px; transition: color .2s; text-transform: uppercase; letter-spacing: 0.06em; }

  .listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .listing-list { display: flex; flex-direction: column; gap: 12px; }

  .list-book-card { display: flex; gap: 20px; padding: 20px 24px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: var(--transition); cursor: none; align-items: flex-start; }
  .list-book-card:hover { border-color: var(--border-h); transform: translateX(4px); }
  .list-book-cover { width: 66px; height: 96px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
  .list-book-cover-inner { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 5px; position: relative; }
  .list-cover-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.06); letter-spacing: -0.04em; }
  
  .list-book-info { flex: 1; min-width: 0; }
  .list-book-title { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 3px; line-height: 1.2; }
  .list-book-author { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
  .list-book-desc { font-family: var(--serif); font-size: 13px; line-height: 1.65; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
  .list-book-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .list-meta-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); padding: 3px 9px; background: var(--bg-3); border-radius: 6px; font-family: var(--mono); }

  .list-book-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; min-width: 120px; }
  .list-book-score { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--accent-2); text-align: right; }
  .list-book-score-lbl { font-size: 10px; color: var(--text-dim); font-family: var(--mono); text-align: right; margin-bottom: 8px; }

  @media(max-width:1100px) { .listing-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:900px)  { .listing-layout { grid-template-columns: 1fr; } .filter-sidebar  { display: none; } .listing-grid { grid-template-columns: repeat(2,1fr); } }

      /* ── PAGE-SPECIFIC STYLES ── */
      .breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); margin-bottom:40px; }
      .breadcrumb a { color:var(--text-muted); transition:color .2s; }
      .breadcrumb a:hover { color:var(--accent); }
      .breadcrumb-sep { color:var(--text-dim); }
  
      .book-hero { display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start; margin-bottom:80px; }
      .book-cover-lg { width:280px; height:420px; border-radius:16px; overflow:hidden; position:sticky; top:88px; box-shadow:0 32px 80px rgba(0,0,0,0.6), 4px 0 0 rgba(255,255,255,0.06); flex-shrink:0; }
      .book-cover-lg-inner { width:100%; height:100%; display:flex; align-items:flex-end; padding:24px; position:relative; overflow:hidden; }
      .book-cover-lg-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--serif); font-size:72px; font-weight:700; color:rgba(255,255,255,0.045); white-space:nowrap; letter-spacing:-0.04em; pointer-events:none; }
      .book-cover-genre-tag { font-family:var(--mono); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.22); position:relative; z-index:1; }
      
      /* Poprawione akcje okładki dla dużego widoku */
      .book-cover-actions { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
  
      .book-meta-block { display:flex; flex-direction:column; gap:0; }
      .book-genre-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
      .book-main-title { font-family:var(--serif); font-size:clamp(36px,5vw,62px); font-weight:600; line-height:1.05; letter-spacing:-0.04em; margin-bottom:10px; }
      .book-main-author { font-family:var(--serif); font-size:20px; font-weight:400; font-style:italic; color:var(--accent-2); margin-bottom:28px; }
      .book-main-author a { transition:color .2s; }
      .book-main-author a:hover { color:var(--accent); }
  
      .book-rating-summary { display:flex; align-items:center; gap:20px; padding:20px 24px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:28px; }
      .brs-score { font-family:var(--serif); font-size:52px; font-weight:600; letter-spacing:-0.04em; line-height:1; color:var(--text); }
      .brs-sep { width:1px; height:50px; background:var(--border); }
      .brs-detail { flex:1; }
      .brs-stars { display:flex; gap:3px; margin-bottom:4px; }
      .brs-star { font-size:18px; color:var(--accent); }
      .brs-star.e { color:var(--bg-4); }
      .brs-count { font-size:12px; color:var(--text-dim); }
      .brs-bars { display:flex; flex-direction:column; gap:4px; flex:1; }
      .brs-bar-row { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; color:var(--text-dim); }
      .brs-bar-track { flex:1; height:3px; background:var(--bg-4); border-radius:2px; overflow:hidden; }
      .brs-bar-fill { height:100%; background:var(--accent); border-radius:2px; }
  
      .book-info-table { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:28px; }
      .bit-cell { padding:12px 16px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
      .bit-cell:nth-child(even) { border-right:none; }
      .bit-cell:nth-last-child(-n+2) { border-bottom:none; }
      .bit-label { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:3px; }
      .bit-value { font-size:13px; color:var(--text); }
      .bit-value a { color:var(--accent); transition:color .2s; }
  
      .book-desc { font-family:var(--serif); font-size:17px; line-height:1.75; color:var(--text-muted); margin-bottom:28px; border-left:2px solid var(--accent); padding-left:20px; }
      .book-desc-full { display:none; }
      .book-desc-toggle { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); cursor:none; transition:color .2s; background:none; border:none; font-family:var(--sans); display:flex; align-items:center; gap:6px; padding:0; }
  
      .book-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
      .book-tag { padding:4px 12px; border-radius:100px; font-size:11px; font-weight:500; background:var(--bg-3); border:1px solid var(--border); color:var(--text-muted); cursor:none; transition:var(--transition); }
      .book-tag:hover { border-color:var(--accent); color:var(--accent); }
  
      .ratings-section { margin-bottom:80px; }
      .ratings-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
      .rating-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 32px; text-align:center; position:relative; overflow:hidden; }
      .rating-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--rc-color, var(--accent)); }
      .rating-card-title { font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-0.02em; margin-bottom:6px; }
      .rating-card-sub { font-size:12px; color:var(--text-dim); margin-bottom:32px; }
  
      .ring-wrap { position:relative; width:160px; height:160px; margin:0 auto 28px; }
      .ring-svg { transform:rotate(-90deg); }
      .ring-track { fill:none; stroke:var(--bg-4); stroke-width:8; }
      .ring-fill  { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
      .ring-score { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
      .ring-score-val { font-family:var(--serif); font-size:38px; font-weight:600; line-height:1; letter-spacing:-0.04em; }
      .ring-score-max { font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:3px; }
  
      @media(max-width:900px)  { .book-hero { grid-template-columns:1fr; } .book-cover-lg { width:100%; max-width:300px; height:360px; position:static; } .ratings-grid { grid-template-columns:1fr; } }
      @media(max-width:700px)  { .book-info-table { grid-template-columns:1fr; } .bit-cell { border-right:none; } }

   


/* =====================
   User
===================== */


/* CSS usera (częściowy transfer makiet) */
.profile-banner { height: 220px; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: linear-gradient(135deg, #120e1e, #1e1535, #0d1a2a); }
.profile-banner-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(201,146,58,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(201,146,58,0.06) 1px, transparent 1px); background-size: 48px 48px; }
.profile-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 4px; margin-top: -54px; margin-bottom: 32px; flex-wrap: wrap; }
.profile-row-left { display: flex; align-items: flex-end; gap: 24px; }
.profile-avatar-wrap { width: 108px; height: 108px; border-radius: 20px; background: linear-gradient(150deg, #1a1225, #2d1b4e); border: 4px solid var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--accent); position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.profile-name { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; margin-bottom:4px; }
.profile-handle { font-size: 13px; color: var(--text-dim); }
.profile-body { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.side-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom:16px;}
.side-card-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.side-card-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.bio-text { padding: 18px 20px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; }
.stat-cell { padding: 22px 20px; text-align: center; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-val { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; color: var(--text); }
.stat-lbl { font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 5px; }
@media(max-width:960px) { .profile-body { grid-template-columns: 1fr; } .stats-strip { grid-template-columns: repeat(3,1fr); } }