/* FreeBookLibrary — shared styles. Values match the approved design files. */
:root{--ink:#0B214D;--body:#465C80;--muted:#5A6F92;--sub:#41567A;--line:#EDF2F9;--border:#E6EDF7;--field:#DCE5F2;--soft:#F7FAFE;--blue:#0F68E6;--blue-h:#0B55C2;--blue-50:#EAF2FF;--audio:#7B45C9;--audio-50:#F7F0FF;--audio-b:#EBDDFF;--green:#0E8A5F;--green-50:#E8F8F1;--amber:#9A6200;--amber-50:#FFF4E0;--red:#C8374F;--red-50:#FDECEE;--star:#F0A92B}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:var(--f2-ui,ui-sans-serif,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-h)}
img{max-width:100%;display:block}
button{font-family:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.muted{color:var(--muted)}.sub{color:var(--sub)}
.h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.8px}
.h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.5px}
.h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.3px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px}
.card-pad{padding:20px 22px}
[hidden]{display:none!important}
img{max-width:100%}
img[width][height]{height:auto}
.hero-art{height:auto!important}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;border:1px solid var(--field);background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-h);color:#fff}
.btn-audio{background:var(--audio-50);border-color:var(--audio-b);color:var(--audio)}.btn-audio:hover{border-color:var(--audio);color:var(--audio)}
.btn-lg{height:44px;padding:0 22px;font-size:13.5px;border-radius:10px}
.btn-sm{height:30px;padding:0 12px;font-size:11.5px;border-radius:7px}
.btn-icon{width:34px;padding:0}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.site-header .container{height:56px;display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,24px)}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:16.5px;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);min-width:0}
.nav a{font-size:12.5px;font-weight:500;color:var(--sub);padding-top:5px;padding-bottom:5px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a.active{font-weight:600;color:var(--ink);border-bottom-color:var(--blue);padding-bottom:3px}
.avatar-chip{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border:1px solid var(--field);border-radius:999px;font-size:12px;font-weight:600;color:var(--ink)}
.avatar{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blue-50);color:var(--blue);font-size:10.5px;font-weight:700}

/* footer */
.site-footer{background:#0B1B36;color:#C6D3E8;margin-top:40px}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px;padding-top:44px;padding-bottom:30px}
.site-footer h4{margin:0;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#fff}
.site-footer ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{font-size:12.5px;font-weight:500;color:#A9BAD2}.site-footer a:hover{color:#fff}
.site-footer .bottom{border-top:1px solid #1B3158}
.site-footer .bottom .container{padding-top:16px;padding-bottom:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#8196B6}
.social{width:32px;height:32px;border-radius:8px;background:#132A4D;display:flex;align-items:center;justify-content:center}

/* book card */
.grid-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.book-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E9EFF8;border-radius:12px;padding:9px;box-shadow:0 6px 18px rgba(11,33,77,.04)}
.cover{position:relative;display:block;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#EEF2F8}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(11,33,77,.08);pointer-events:none}
.audio-badge{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:rgba(123,69,201,.94);font-size:10px;font-weight:700;color:#fff}
.book-title{margin-top:10px;display:block;font-size:12.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-author{margin-top:3px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-meta{margin-top:7px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--sub)}
.tags{margin-top:8px;display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden}
.tag{flex:0 0 auto;height:18px;padding:0 6px;border-radius:4px;display:flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.3px}
.tag-pdf{background:var(--red-50);color:var(--red)}.tag-epub{background:var(--blue-50);color:#1466D6}.tag-mobi{background:var(--amber-50);color:var(--amber)}.tag-txt{background:#EEF2F8;color:var(--sub)}.tag-audio{background:#F3ECFF;color:#6B3AB8}
.book-actions{margin-top:auto;padding-top:10px;display:flex;gap:6px}
.book-actions .btn-primary{flex:1 1 auto}

/* filters */
.layout-sidebar{display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px;align-items:start}
.filters{position:sticky;top:16px;display:flex;flex-direction:column;gap:18px}
.filter-group{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.filter-group h5{margin:0;font-size:11.5px;font-weight:700;color:var(--ink)}
.check{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:var(--sub);cursor:pointer}
.check input{width:14px;height:14px;margin:0;accent-color:var(--blue)}
.check .count{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted)}
.select{height:36px;padding:0 30px 0 12px;border:1px solid var(--field);border-radius:8px;background:#fff;font:500 12px var(--f2-ui,sans-serif);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid #CFE0FA;border-radius:999px;background:#F1F6FD;font-size:11.5px;font-weight:600;color:#1466D6}
.pill{display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:999px;border:1px solid var(--field);background:#fff;font-size:12px;font-weight:600;color:var(--sub)}
.pill.active{background:var(--blue);border-color:var(--blue);color:#fff}
.empty{margin-top:22px;padding:46px 20px;border:1px dashed var(--field);border-radius:14px;text-align:center}

/* pagination (Laravel ->links('partials.pagination')) */
.pagination{margin-top:26px;display:flex;justify-content:center;gap:7px}
.pagination a,.pagination span{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--field);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sub)}
.pagination .active{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .disabled{color:#B8C4D6}

/* forms */
.input,.textarea{width:100%;border:1px solid var(--field);border-radius:9px;background:#fff;font:500 12.5px var(--f2-ui,sans-serif);color:var(--ink);padding:0 12px;height:40px}
.textarea{height:auto;padding:10px 12px;line-height:1.55;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--blue)}
.field-error{margin-top:5px;font-size:11px;color:#D8465F}

/* toast */
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);padding:11px 16px;border-radius:10px;background:#0C1D3B;color:#fff;font-size:12.5px;font-weight:600;z-index:60;box-shadow:0 18px 40px rgba(10,31,62,.28)}

/* mini player */
.mini-player{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:calc(100% - 48px);max-width:960px;height:68px;background:#0C1D3B;border-radius:16px;box-shadow:0 20px 50px rgba(10,31,62,.25);display:flex;align-items:center;gap:14px;padding:10px 16px;z-index:40;color:#fff}
.mini-player[hidden]{display:none}
.mini-player .ghost{width:32px;height:32px;border:0;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#A9BAD2}
.mini-player .play{width:42px;height:42px;border:0;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mini-player .track{flex:1 1 auto;display:flex;align-items:center;gap:11px;font-size:10.5px;font-weight:600;color:#A9BAD2}
.mini-player .bar{flex:1 1 auto;height:4px;border-radius:99px;background:#38506F;overflow:hidden;cursor:pointer}
.mini-player .bar i{display:block;height:100%;background:#55A0FF;width:0}


/* mobile menu + tab bar */
.menu-toggle{display:none;border:0}
.menu-backdrop{position:fixed;inset:0;background:rgba(11,33,77,.4);z-index:70}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:71;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(11,33,77,.18);transform:translateX(100%);transition:transform .22s ease}
.mobile-menu.open{transform:none}
.mobile-menu[hidden],.menu-backdrop[hidden]{display:none}
.mobile-link{display:block;padding:12px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink)}
.mobile-link.sub{font-size:13px;font-weight:500;color:var(--sub);padding:10px}
.mobile-link.active{background:#F1F6FD;color:var(--blue)}
.tabbar{display:none}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mobile-menu{transition:none}}

/* header search box */
.header-searchbox{display:none;align-items:center;gap:8px;width:230px;height:36px;padding:0 12px;border:1px solid var(--field);border-radius:9px;background:#fff}
.header-searchbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 12.5px var(--f2-ui,sans-serif);color:var(--ink)}
.header-searchbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.header-searchbox .suggest{width:360px;left:auto;right:0}
@media (min-width:1240px){.header-searchbox{display:flex}.header-searchbox ~ .header-search{display:none}}

.search-submit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:-6px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.search-submit:hover{color:var(--blue);background:var(--blue-50)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cover-link{display:block;color:inherit}
.cover-link:hover .book-title{color:var(--blue)}
.cover-link .book-title{display:block}
.cover-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}

/* PDF reader */
.pdf-shell{display:flex;flex-direction:column;height:calc(100vh - 56px);min-height:520px}
.pdf-bar{display:flex;align-items:center;gap:14px;padding:10px clamp(12px,3vw,32px);border-bottom:1px solid var(--line);background:#fff}
.pdf-title{flex:1;min-width:0;display:flex;flex-direction:column}
.pdf-title strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-title .muted{font-size:11.5px}
.pdf-frame{position:relative;flex:1;background:#525659}
.pdf-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.pdf-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--soft)}
@media (max-width:760px){.pdf-frame iframe{display:none}.pdf-hide-sm{display:none}}

/* reader notes */
.reader-notes{margin-top:18px;padding:20px 22px;border-radius:16px}
.note-form{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#FBFCFE}
.note-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.note-list li{padding:12px 0;border-top:1px solid var(--line)}

[aria-invalid=true]{border-color:#C8374F!important}

/* search autocomplete */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(11,33,77,.16);padding:6px;z-index:80;max-height:70vh;overflow:auto}
.suggest[hidden]{display:none}
.suggest .label{padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.suggest a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:12.5px}
.suggest a[aria-selected=true],.suggest a:hover{background:#F1F6FD}
.suggest img{width:28px;height:40px;object-fit:cover;border-radius:4px}
.suggest mark{background:none;color:var(--blue);font-weight:700}
.suggest .all{justify-content:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;font-weight:600;color:var(--blue)}

/* accessibility + touch */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.skip-link:focus{top:10px;color:#fff}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.pill:focus-visible{box-shadow:0 0 0 3px var(--blue-50)}
button[disabled],.btn[aria-busy=true]{opacity:.65;cursor:progress}
.filters-toggle{display:none}

/* responsive */
@media (max-width:980px){
  .filters-toggle{display:inline-flex;align-self:flex-start;margin-bottom:12px}
  .filters{display:none!important}
  .filters.open{display:grid!important}
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .layout-sidebar{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-hero{grid-template-columns:minmax(0,1fr)!important}
  .two-col{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:980px){
  .stats-grid,.facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-art{justify-self:start!important;max-width:100%!important}
  .reader-paper{padding:26px 22px!important}
  .book-hero > div:first-child{flex-direction:row!important;flex-wrap:wrap;align-items:flex-start}
}
@media (max-width:560px){
  .btn,.btn-sm{min-height:44px}
  .btn-sm{height:44px}
  .btn-icon,.book-actions .btn-icon{width:44px!important;min-width:44px}
  .check{min-height:44px}
  .pill{height:44px}
  .tabbar a{min-height:44px}
  .hero-title{font-size:34px!important}
  .info-grid{grid-template-columns:minmax(0,1fr)!important}
  .dl-row{flex-wrap:wrap}.dl-row .btn{width:100%!important}
  .book-hero img{width:150px!important;height:222px!important}
  .container{padding:0 16px}
  .card-pad{padding:16px}
  .reader-paper{padding:20px 16px!important}
  .grid-books{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .filters{grid-template-columns:minmax(0,1fr)}
  .header-auth,.header-search{display:none!important}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:62px;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #E4EDF7;z-index:45}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:var(--muted)}
  .tabbar a.active{color:var(--blue)}
  body{padding-bottom:62px}
  .mini-player{bottom:72px!important}
  .toast{bottom:140px}
  .mini-player{bottom:10px;width:calc(100% - 20px);gap:8px}
  .mini-player .track,.mini-player .ghost{display:none}
}