:root{
    --bg-0:#0A0E17;
    --bg-1:#111726;
    --bg-2:#171F33;
    --bg-3:#1D2440;
    --line:#232C46;
    --text-hi:#F2F3F8;
    --text-lo:#8B93AD;
    --accent:#5D6BF5;
    --accent-hi:#7B87FF;
    --gold:#D9A94E;
    --green:#4CAF7D;
    --red:#E5677A;
    --radius:14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-0);
    color:var(--text-hi);
    font-family:'Noto Sans Georgian', sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,.serif{
    font-family:'Noto Serif Georgian', serif;
    font-weight:600;
    letter-spacing:0.2px;
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;}
  button:active{transform:scale(0.96);}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  .hidden{display:none !important;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* reveal-on-scroll */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  /* view fade transition */
  .view-root{animation:viewIn .45s cubic-bezier(.2,.7,.2,1);}
  @keyframes viewIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,14,23,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
  .brand{display:flex; align-items:center; gap:10px; cursor:pointer; border:none; background:none; color:inherit;}
  .brand-mark{
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(155deg, var(--accent-hi), var(--accent));
    display:flex; align-items:center; justify-content:center;
    font-family:'Noto Serif Georgian',serif; font-weight:700; font-size:18px;
    transition:transform .3s ease;
  }
  .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
  .brand-text{text-align:left;}
  .brand-text b{font-size:17px; display:block; font-family:'Noto Serif Georgian',serif;}
  .brand-text span{font-size:11.5px; color:var(--text-lo);}
  .nav-links{display:flex; gap:34px; font-size:14.5px;}
  .nav-links button{color:var(--text-lo); position:relative; padding:0 0 4px; border:none; background:none; cursor:pointer; font-size:14.5px; font-family:inherit;}
  .nav-links button:hover{color:var(--text-hi);}
  .nav-links button.active{color:var(--text-hi);}
  .nav-links button.active::after{
    content:''; position:absolute; left:0; right:0; bottom:-19px; height:2px;
    background:var(--accent-hi); border-radius:2px;
    animation:underlineIn .3s ease;
  }
  @keyframes underlineIn{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
  .nav-right{display:flex; align-items:center; gap:18px;}
  .search-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:999px; padding:9px 16px; width:220px;
    color:var(--text-lo); font-size:13.5px;
  }
  .icon-btn{position:relative; color:var(--text-lo); display:flex; border:none; background:none; cursor:pointer; font-size:16px;}
  .icon-btn:hover{color:var(--text-hi);}
  .login-link{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-lo); border:none; background:none; cursor:pointer; font-family:inherit;}
  .login-link:hover{color:var(--text-hi);}
  .user-chip{display:flex; align-items:center; gap:9px; border:none; background:none; color:var(--text-hi); cursor:pointer; font-family:inherit; font-size:14px;}
  .user-avatar{
    width:30px; height:30px; border-radius:50%;
    background:linear-gradient(155deg, var(--accent-hi), var(--accent));
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
  }

  /* HERO */
  .hero{position:relative; overflow:hidden; min-height:480px; display:flex; align-items:center; border-bottom:1px solid var(--line);}
  .hero-bg{
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(10,14,23,0.97) 8%, rgba(10,14,23,0.55) 48%, rgba(10,14,23,0.2) 78%),
      radial-gradient(ellipse at 75% 30%, rgba(93,107,245,0.18), transparent 55%),
      linear-gradient(160deg, #1a2036 0%, #0c1420 60%, #05070c 100%);
  }
  .hero-bg::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 80% 20%, rgba(93,107,245,0.16), transparent 40%);
    animation:driftGlow 9s ease-in-out infinite alternate;
  }
  @keyframes driftGlow{ from{opacity:.5; transform:translate(0,0);} to{opacity:1; transform:translate(-30px,20px);} }
  .hero-inner{position:relative; z-index:2; padding:90px 0 80px;}
  .hero h1{font-size:46px; line-height:1.18; max-width:600px; font-weight:600; color:var(--text-hi); opacity:0; animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .1s forwards;}
  .hero p{margin-top:22px; max-width:460px; color:var(--text-lo); font-size:15.5px; line-height:1.7; opacity:0; animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .25s forwards;}
  .hero-ctas{opacity:0; animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .4s forwards;}
  @keyframes heroIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
  .cta-btn{
    margin-top:32px; display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#fff; font-size:15px; font-weight:500;
    padding:14px 26px; border-radius:10px; border:none; cursor:pointer;
  }
  .cta-btn:hover{background:var(--accent-hi); transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(93,107,245,0.55);}
  .cta-ghost{
    margin-top:32px; margin-left:12px; display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--text-hi); font-size:15px; font-weight:500;
    padding:14px 22px; border-radius:10px; border:1px solid var(--line); cursor:pointer;
  }
  .cta-ghost:hover{border-color:var(--accent-hi); color:var(--accent-hi);}

  /* SECTION HEAD */
  .section{padding:64px 0;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px;}
  .section-head h2{font-size:24px; color:var(--text-hi);}
  .section-head a, .section-head button.linklike{color:var(--accent-hi); font-size:14px; display:flex; align-items:center; gap:6px; border:none; background:none; cursor:pointer; font-family:inherit;}
  .section-head button.linklike:hover{gap:9px;}

  /* BOOK GRID */
  .book-row{display:grid; grid-template-columns:repeat(6, 1fr); gap:20px;}
  .book-card{
    background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease;
    display:flex; flex-direction:column;
  }
  .book-card:hover{transform:translateY(-6px); border-color:#33406b; box-shadow:0 16px 34px -18px rgba(0,0,0,0.6);}
  .book-cover{
    aspect-ratio:3/4; width:100%; display:flex; align-items:center; justify-content:center;
    color:#fff; text-align:center; font-family:'Noto Serif Georgian',serif;
    font-size:15px; font-weight:600; padding:18px; line-height:1.3; position:relative; overflow:hidden;
  }
  .book-cover::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,0.16), transparent 40%);
    transform:translateX(-120%); transition:transform .6s ease;
  }
  .book-card:hover .book-cover::after{transform:translateX(120%);}
  .book-cover.has-img{background-size:cover; background-position:center; align-items:flex-end; padding:0;}
  .book-cover.has-img .img-caption{
    width:100%; padding:26px 16px 14px; text-align:center;
    background:linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    font-size:14px;
  }
  .book-cover.has-img::before{content:none;}
  .book-info{padding:14px 16px 16px; display:flex; flex-direction:column; gap:2px; flex:1;}
  .book-info .t{font-size:14px; font-weight:500; margin-bottom:2px;}
  .book-info .a{font-size:12.5px; color:var(--text-lo); margin-bottom:8px;}
  .book-info .p{font-size:14px; color:var(--gold); font-weight:600; margin-bottom:10px;}
  .buy-btn{
    margin-top:auto; width:100%; padding:9px 0; border-radius:8px; border:1px solid var(--line);
    background:var(--bg-2); color:var(--text-hi); font-size:13px; cursor:pointer; font-family:inherit;
  }
  .buy-btn:hover{border-color:var(--accent-hi); background:var(--bg-3);}
  .buy-btn.owned{background:rgba(76,175,125,0.12); border-color:rgba(76,175,125,0.4); color:var(--green);}
  .buy-btn.primary{background:var(--accent); border-color:var(--accent);}
  .buy-btn.primary:hover{background:var(--accent-hi);}
  .buy-btn.pulse{animation:pulseBuy .5s ease;}
  @keyframes pulseBuy{ 0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);} }

  .c1{background:linear-gradient(155deg,#2b3a63,#0e1424);}
  .c2{background:linear-gradient(155deg,#5b1f2b,#1a0c12);}
  .c3{background:linear-gradient(155deg,#243449,#0b1119);}
  .c4{background:linear-gradient(155deg,#33302a,#0e0d0b);}
  .c5{background:linear-gradient(155deg,#4a2137,#150a12);}
  .c6{background:linear-gradient(155deg,#1f3a34,#0a1512);}
  .swatch{width:26px; height:26px; border-radius:7px; flex-shrink:0;}

  /* WHY */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .why-item{padding:6px 0; transition:transform .25s ease;}
  .why-item:hover{transform:translateY(-3px);}
  .why-item .ic{
    width:38px; height:38px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--accent-hi);
    transition:background .2s ease, transform .2s ease;
  }
  .why-item:hover .ic{background:var(--accent); color:#fff; transform:scale(1.08);}
  .why-item b{display:block; font-size:15px; margin-bottom:4px;}
  .why-item span{font-size:13px; color:var(--text-lo);}

  /* FOOTER */
  footer{border-top:1px solid var(--line); padding:44px 0 28px;}
  .foot-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .foot-brand{display:flex; align-items:center; gap:10px; color:var(--text-lo); font-size:13px;}
  .foot-links{display:flex; gap:16px; color:var(--text-lo); font-size:14px; align-items:center;}
  .foot-links a:hover, .foot-links button:hover{color:var(--text-hi);}
  .admin-link{border:none; background:none; color:var(--text-lo); font-size:12.5px; cursor:pointer; font-family:inherit;}
  .admin-link:hover{color:var(--accent-hi);}

  /* LIBRARY VIEW */
  .lib-header{padding:52px 0 8px;}
  .lib-header h1{font-size:32px;}
  .lib-header p{color:var(--text-lo); margin-top:10px; font-size:14.5px;}
  .empty-state{text-align:center; padding:80px 20px; color:var(--text-lo); border:1px dashed var(--line); border-radius:var(--radius); margin-top:20px;}
  .empty-state b{display:block; color:var(--text-hi); font-size:17px; margin-bottom:8px; font-family:'Noto Serif Georgian',serif;}
  .lib-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; padding:28px 0 70px;}
  .lib-card{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .lib-card:hover{transform:translateY(-6px); border-color:#33406b; box-shadow:0 16px 34px -18px rgba(0,0,0,0.6);}
  .lib-card .cov{aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Noto Serif Georgian',serif; font-size:14px; font-weight:600; text-align:center; padding:16px; background-size:cover; background-position:center;}
  .lib-card .cov.has-img{align-items:flex-end; padding:0;}
  .lib-card .cov.has-img .img-caption{width:100%; padding:20px 12px 12px; background:linear-gradient(to top, rgba(0,0,0,0.85), transparent); font-size:13px;}
  .lib-card .info{padding:13px 14px 16px;}
  .lib-card .info .t{font-size:13.5px; font-weight:500; margin-bottom:8px;}
  .prog-bar{height:5px; background:var(--bg-3); border-radius:99px; overflow:hidden;}
  .prog-bar i{display:block; height:100%; background:var(--accent-hi); transition:width .6s cubic-bezier(.2,.7,.2,1); width:0;}
  .prog-label{font-size:11px; color:var(--text-lo); margin-top:6px;}

  /* OVERLAY / MODAL */
  .overlay{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:rgba(6,8,14,0); backdrop-filter:blur(0px); padding:20px;
    transition:background .25s ease, backdrop-filter .25s ease;
  }
  .overlay.open{background:rgba(6,8,14,0.72); backdrop-filter:blur(4px);}
  .modal{
    background:var(--bg-1); border:1px solid var(--line); border-radius:16px;
    width:100%; max-width:380px; padding:32px; position:relative;
    transform:scale(.94) translateY(10px); opacity:0; transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .overlay.open .modal{transform:scale(1) translateY(0); opacity:1;}
  .modal.wide{max-width:560px; max-height:86vh; overflow-y:auto;}
  .modal-close{position:absolute; top:16px; right:16px; border:none; background:none; color:var(--text-lo); font-size:18px; cursor:pointer;}
  .modal-close:hover{color:var(--text-hi);}
  .tabs{display:flex; gap:6px; background:var(--bg-2); border-radius:10px; padding:4px; margin-bottom:24px;}
  .tabs button{flex:1; padding:9px 0; border:none; border-radius:8px; background:none; color:var(--text-lo); cursor:pointer; font-size:13.5px; font-family:inherit;}
  .tabs button.active{background:var(--accent); color:#fff;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; color:var(--text-lo); margin-bottom:7px;}
  .field input, .field textarea, .field select{
    width:100%; padding:11px 14px; border-radius:9px; border:1px solid var(--line);
    background:var(--bg-2); color:var(--text-hi); font-size:14px; font-family:inherit;
    transition:border-color .15s ease;
  }
  .field textarea{resize:vertical; min-height:80px;}
  .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent-hi);}
  .submit-btn{width:100%; padding:12px 0; border-radius:9px; border:none; background:var(--accent); color:#fff; font-size:14.5px; font-weight:500; cursor:pointer; margin-top:6px;}
  .submit-btn:hover{background:var(--accent-hi);}
  .auth-error{color:var(--red); font-size:13px; margin-bottom:12px; display:none;}
  .auth-hint{color:var(--text-lo); font-size:12px; margin-top:14px; text-align:center;}
  .modal h3{font-size:19px; margin-bottom:4px;}
  .modal .sub{color:var(--text-lo); font-size:13px; margin-bottom:22px;}
  .swatch-row{display:flex; gap:8px; flex-wrap:wrap;}
  .swatch-pick{width:34px; height:34px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0;}
  .swatch-pick.selected{border-color:var(--accent-hi);}

  .cover-uploader{display:flex; align-items:center; gap:14px;}
  .cover-preview{
    width:64px; height:86px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
    background-size:cover; background-position:center; color:var(--text-lo); font-size:11px; text-align:center;
  }
  .cover-uploader-actions{display:flex; flex-direction:column; gap:8px; flex:1;}
  .file-btn-row{display:flex; gap:8px;}
  .file-btn{
    border:1px solid var(--line); background:var(--bg-2); color:var(--text-hi); padding:8px 14px;
    border-radius:8px; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  }
  .file-btn:hover{background:var(--bg-3);}
  .file-btn.danger{color:var(--red);}
  .cover-uploader input[type=file]{display:none;}
  .or-sep{font-size:11px; color:var(--text-lo); margin:2px 0;}

  .chapter-count-row{display:flex; align-items:center; gap:12px;}
  .chapter-count-row input{max-width:90px;}
  .chapter-fields{display:flex; flex-direction:column; gap:14px; margin-top:14px; max-height:320px; overflow-y:auto; padding-right:4px;}
  .chapter-field-box{border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--bg-0);}
  .chapter-field-box .ch-num{font-size:11.5px; color:var(--accent-hi); font-weight:600; margin-bottom:8px;}
  .chapter-field-box input{margin-bottom:8px;}
  .chapter-field-box textarea{min-height:64px;}

  /* TOAST */
  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(30px) scale(.95);
    background:var(--bg-3); border:1px solid var(--line); padding:13px 22px; border-radius:10px;
    font-size:13.5px; z-index:300; opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.2,.7,.2,1);
    display:flex; align-items:center; gap:10px; box-shadow:0 14px 30px -14px rgba(0,0,0,0.7);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}
  .toast .dot2{width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0;}
  .toast.err .dot2{background:var(--red);}

  /* READER */
  .reader{position:fixed; inset:0; z-index:250; background:var(--bg-0); display:flex; flex-direction:column; opacity:0; transition:opacity .25s ease;}
  .reader.open{opacity:1;}
  .reader-top{display:flex; align-items:center; justify-content:space-between; padding:16px 26px; border-bottom:1px solid var(--line); flex-shrink:0;}
  .reader-top .left{display:flex; align-items:center; gap:16px;}
  .back-btn{border:none; background:var(--bg-2); color:var(--text-hi); width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:15px;}
  .back-btn:hover{background:var(--bg-3);}
  .reader-title{font-size:14.5px; font-weight:500;}
  .reader-progress{font-size:12px; color:var(--text-lo);}
  .reader-tools{display:flex; align-items:center; gap:10px;}
  .tool-btn{border:1px solid var(--line); background:var(--bg-2); color:var(--text-hi); width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:13px;}
  .tool-btn:hover{background:var(--bg-3);}
  .tool-btn.on{border-color:var(--accent-hi); color:var(--accent-hi);}
  .reader-body{flex:1; display:flex; overflow:hidden;}
  .chapter-list{width:230px; flex-shrink:0; border-right:1px solid var(--line); padding:20px 10px; overflow-y:auto;}
  .chapter-list button{display:block; width:100%; text-align:right; padding:10px 14px; border-radius:8px; border:none; background:none; color:var(--text-lo); cursor:pointer; font-size:13.5px; font-family:inherit; margin-bottom:2px;}
  .chapter-list button:hover{background:var(--bg-2); color:var(--text-hi);}
  .chapter-list button.active{background:var(--bg-2); color:var(--text-hi);}
  .reader-page-wrap{flex:1; overflow-y:auto; display:flex; justify-content:center; padding:50px 20px;}
  .reader-page{
    max-width:620px; width:100%; background:#EDE7D9; color:#241F18; border-radius:10px; padding:52px 56px;
    font-family:'Noto Serif Georgian', serif; font-size:17px; line-height:1.95; min-height:70vh;
    animation:pageIn .35s cubic-bezier(.2,.7,.2,1); transition:background .25s ease, color .25s ease;
  }
  @keyframes pageIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .reader-page.theme-dark{background:#12151F; color:#D8DAE4;}
  .reader-page.theme-sepia{background:#EDE2C9; color:#3A2E1A;}
  .reader-page h3{font-family:'Noto Serif Georgian', serif; font-size:22px; margin-bottom:18px;}
  .reader-page p{margin-bottom:16px;}
  .reader-nav{display:flex; justify-content:center; gap:20px; align-items:center; padding:18px; border-top:1px solid var(--line); flex-shrink:0;}
  .reader-nav button{border:1px solid var(--line); background:var(--bg-2); color:var(--text-hi); padding:8px 18px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:13.5px;}
  .reader-nav button:hover:not(:disabled){background:var(--bg-3);}
  .reader-nav button:disabled{opacity:0.35; cursor:default;}

  /* ADMIN */
  .admin-header{padding:52px 0 8px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  .admin-header h1{font-size:30px;}
  .admin-header p{color:var(--text-lo); margin-top:8px; font-size:14px;}
  .admin-toolbar{display:flex; gap:10px; padding:24px 0;}
  .admin-table{width:100%; border-collapse:collapse; margin-bottom:70px;}
  .admin-table th{text-align:right; font-size:12px; color:var(--text-lo); font-weight:500; padding:10px 14px; border-bottom:1px solid var(--line);}
  .admin-table td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  .admin-table tr{transition:background .15s ease;}
  .admin-table tr:hover{background:var(--bg-1);}
  .admin-row-cover{display:flex; align-items:center; gap:10px;}
  .row-actions{display:flex; gap:8px; justify-content:flex-end;}
  .row-actions button{border:1px solid var(--line); background:var(--bg-2); color:var(--text-hi); padding:6px 12px; border-radius:7px; font-size:12.5px; cursor:pointer;}
  .row-actions button:hover{background:var(--bg-3);}
  .row-actions button.danger{color:var(--red); border-color:rgba(229,103,122,0.35);}
  .row-actions button.danger:hover{background:rgba(229,103,122,0.12);}
  .admin-login-box{max-width:380px; margin:60px auto; text-align:left;}
  .stat-row{display:flex; gap:16px; margin-top:18px;}
  .stat-card{background:var(--bg-1); border:1px solid var(--line); border-radius:12px; padding:16px 20px; min-width:130px;}
  .stat-card b{display:block; font-size:22px; font-family:'Noto Serif Georgian',serif;}
  .stat-card span{font-size:12px; color:var(--text-lo);}

  @media (max-width:1000px){
    .nav-links, .search-pill{display:none;}
    .book-row, .lib-grid{grid-template-columns:repeat(3,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .hero h1{font-size:32px;}
    .chapter-list{display:none;}
    .admin-table{display:block; overflow-x:auto;}
  }
  @media (max-width:560px){
    .book-row, .lib-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr;}
    .wrap{padding:0 18px;}
    .reader-page{padding:32px 22px;}
  }