.ruyaLibraryStandaloneRoot{
  min-height:100vh;
  background:#f4f6f9;
}

.ruyaLibraryStandaloneApp{
  --lib-navy:#153d73;
  --lib-red:#ee3b4f;
  --lib-green:#16936a;
  --lib-orange:#e89a22;
  --lib-line:#e0e6ee;
  --lib-text:#213e67;
  --lib-muted:#8190a5;

  min-height:100vh;
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  background:#f4f6f9;
  color:var(--lib-text);
}

.ruyaLibV2Side{
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-right:1px solid #e2e7ee;
}

.ruyaLibV2SideBrand{
  min-height:91px;
  padding:17px 18px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #edf1f5;
}

.ruyaLibV2SideBrand img{
  width:184px;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.ruyaLibV2Side nav{
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.ruyaLibV2Side nav button{
  width:100%;
  min-height:43px;
  padding:0 11px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#667b97;
  text-align:left;
  cursor:pointer;
}

.ruyaLibV2Side nav button > span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#6e819a;
}

.ruyaLibV2Side nav button b{
  font-size:11px;
  font-weight:600;
}

.ruyaLibV2Side nav button em{
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff0f2;
  color:#cc3b4d;
  font-size:9px;
  font-style:normal;
  font-weight:700;
}

.ruyaLibV2Side nav button:hover{
  background:#f7f9fc;
}

.ruyaLibV2Side nav button.active{
  background:#edf3fa;
  color:#153d73;
}

.ruyaLibV2Side nav button.active > span{
  background:#dfeaf7;
  color:#153d73;
}

.ruyaLibV2SideFoot{
  margin-top:auto;
  padding:15px 17px 18px;
  border-top:1px solid #edf1f5;
}

.ruyaLibV2SideFoot span,
.ruyaLibV2SideFoot small{
  display:block;
}

.ruyaLibV2SideFoot span{
  color:#36577f;
  font-size:10px;
  font-weight:650;
}

.ruyaLibV2SideFoot small{
  margin-top:3px;
  color:#8a99ac;
  font-size:9px;
}

.ruyaLibV2Stage{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.ruyaLibV2Top{
  height:64px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
  border-bottom:1px solid #e2e7ee;
}

.ruyaLibV2PortalBack{
  min-height:36px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #dce3eb;
  border-radius:9px;
  background:#fff;
  color:#385b83;
  font-size:10px;
  font-weight:650;
  cursor:pointer;
}

.ruyaLibV2PortalBack span{
  font-size:17px;
  line-height:1;
}

.ruyaLibV2PortalBack:hover{
  background:#f7f9fc;
}

.ruyaLibV2TopRight{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}

.ruyaLibV2QuickSearch{
  width:255px;
  height:36px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #dfe5ec;
  border-radius:9px;
  background:#f9fafc;
  color:#7b8da4;
}

.ruyaLibV2QuickSearch input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#2e4c73;
  font-size:10px;
}

.ruyaLibV2Notify{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #dfe5ec;
  border-radius:9px;
  background:#fff;
  color:#536f91;
  cursor:pointer;
}

.ruyaLibV2User{
  min-width:155px;
  height:40px;
  padding:0 9px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #e0e6ed;
  border-radius:10px;
  background:#fff;
}

.ruyaLibV2User .avatar{
  width:28px;
  height:28px;
}

.ruyaLibV2User span{
  min-width:0;
}

.ruyaLibV2User b,
.ruyaLibV2User small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ruyaLibV2User b{
  color:#36577f;
  font-size:9px;
  font-weight:650;
}

.ruyaLibV2User small{
  margin-top:1px;
  color:#8a99ab;
  font-size:8px;
}

.ruyaLibV2Main{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:17px 20px 32px;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.ruyaLibV2PageHead{
  min-height:78px;
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border:1px solid var(--lib-line);
  border-radius:14px;
}

.ruyaLibV2PageHead small{
  display:block;
  margin-bottom:3px;
  color:var(--lib-red);
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
}

.ruyaLibV2PageHead h1{
  margin:0;
  color:#173e72;
  font-size:19px;
  line-height:1.1;
  font-weight:700;
}

.ruyaLibV2PageHead p{
  margin:4px 0 0;
  color:#8392a6;
  font-size:9px;
}

.ruyaLibV2HeadActions{
  display:flex;
  align-items:center;
  gap:7px;
}

.ruyaLibV2HeadActions button{
  height:35px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:9px;
  font-size:9px;
  font-weight:650;
  cursor:pointer;
}

.ruyaLibV2HeadActions .secondary{
  border:1px solid #dce4ed;
  background:#fff;
  color:#365f8b;
}

.ruyaLibV2HeadActions .primary{
  border:1px solid var(--lib-navy);
  background:var(--lib-navy);
  color:#fff;
}

.ruyaLibV2HeadActions strong{
  font-size:16px;
  line-height:1;
  font-weight:400;
}

.ruyaLibV2Notice{
  min-height:38px;
  padding:8px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d2e5dc;
  border-radius:10px;
  background:#f2faf6;
  color:#267253;
  font-size:9px;
}

.ruyaLibV2Notice button{
  margin-left:auto;
  border:0;
  background:transparent;
  color:inherit;
  font-size:17px;
  cursor:pointer;
}

.ruyaLibV2Stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.ruyaLibV2Stat{
  min-height:86px;
  padding:13px;
  display:flex;
  align-items:center;
  gap:11px;
  background:#fff;
  border:1px solid var(--lib-line);
  border-radius:13px;
}

.ruyaLibV2StatIcon{
  width:39px;
  height:39px;
  flex:0 0 39px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#edf4fc;
  color:#32639d;
}

.ruyaLibV2Stat.green .ruyaLibV2StatIcon{
  background:#eaf8f2;
  color:var(--lib-green);
}

.ruyaLibV2Stat.orange .ruyaLibV2StatIcon{
  background:#fff5e7;
  color:var(--lib-orange);
}

.ruyaLibV2Stat.red .ruyaLibV2StatIcon{
  background:#fff0f2;
  color:var(--lib-red);
}

.ruyaLibV2Stat small,
.ruyaLibV2Stat em{
  display:block;
  color:#8393a7;
  font-size:9px;
  font-style:normal;
  font-weight:500;
}

.ruyaLibV2Stat b{
  display:block;
  margin:1px 0;
  color:#163d71;
  font-size:21px;
  line-height:1.05;
  font-weight:700;
}

.ruyaLibV2DashboardGrid{
  display:grid;
  grid-template-columns:minmax(350px,.78fr) minmax(0,1.22fr);
  gap:11px;
}

.ruyaLibV2PanelCard{
  min-height:335px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--lib-line);
  border-radius:14px;
}

.ruyaLibV2PanelCard > header{
  min-height:59px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #edf1f5;
}

.ruyaLibV2PanelCard header h2{
  margin:0;
  color:#294b76;
  font-size:12px;
  font-weight:700;
}

.ruyaLibV2PanelCard header p{
  margin:3px 0 0;
  color:#8a99ab;
  font-size:8px;
}

.ruyaLibV2PanelCard header button{
  border:0;
  background:transparent;
  color:#315f93;
  font-size:8px;
  font-weight:650;
  cursor:pointer;
}

.ruyaLibV2Empty{
  min-height:255px;
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ruyaLibV2Empty > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:11px;
  border-radius:13px;
  background:#edf4fb;
  color:#37699f;
}

.ruyaLibV2Empty b{
  color:#355579;
  font-size:11px;
  font-weight:700;
}

.ruyaLibV2Empty p{
  max-width:460px;
  margin:5px 0 0;
  color:#8b99aa;
  font-size:9px;
  line-height:1.5;
}

.ruyaLibV2PreviewGrid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.ruyaLibV2Loading{
  min-height:250px;
  display:grid;
  place-items:center;
  color:#8291a4;
  font-size:10px;
}

.ruyaLibV2Loading.large{
  min-height:430px;
}

.ruyaLibBookCard{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #e1e7ee;
  border-radius:12px;
}

.ruyaLibBookCard.compact{
  border-radius:10px;
}

.ruyaLibBookCover{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#f1f3f6;
}

.ruyaLibBookCover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.ruyaLibBookCover > span{
  position:absolute;
  top:7px;
  right:7px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(235,249,242,.94);
  color:#158158;
  font-size:7px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(23,88,61,.08);
}

.ruyaLibBookBody{
  padding:9px;
}

.ruyaLibBookBody h3{
  min-height:31px;
  margin:0;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#294b76;
  font-size:9px;
  line-height:1.45;
  font-weight:700;
}

.ruyaLibBookBody p{
  min-height:25px;
  margin:4px 0 7px;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#8594a7;
  font-size:8px;
  line-height:1.45;
}

.ruyaLibBookMeta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.ruyaLibBookMeta span{
  padding:3px 5px;
  border-radius:6px;
  background:#f3f6fa;
  color:#617896;
  font-size:7px;
  font-weight:600;
}

.ruyaLibBookBody > small{
  display:block;
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8998aa;
  font-size:7px;
}

.ruyaLibBookCard.compact .ruyaLibBookBody{
  padding:6px;
}

.ruyaLibBookCard.compact .ruyaLibBookBody h3{
  min-height:26px;
  font-size:8px;
}

.ruyaLibBookCard.compact .ruyaLibBookBody p,
.ruyaLibBookCard.compact .ruyaLibBookMeta{
  display:none;
}

.ruyaLibV2CatalogTools{
  padding:11px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:9px;
  background:#fff;
  border:1px solid var(--lib-line);
  border-radius:12px;
}

.ruyaLibV2Search{
  height:39px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #dde5ee;
  border-radius:9px;
  background:#fafbfd;
  color:#7a8da6;
}

.ruyaLibV2Search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#2f4f77;
  font-size:9px;
}

.ruyaLibV2CatalogTools select{
  height:39px;
  padding:0 10px;
  border:1px solid #dde5ee;
  border-radius:9px;
  background:#fff;
  color:#466483;
  font-size:9px;
  outline:none;
}

.ruyaLibV2CatalogInfo{
  padding:0 3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#8897a9;
  font-size:8px;
}

.ruyaLibV2BookGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:10px;
}

.ruyaLibV2LoadMore{
  padding:8px 0 0;
  display:flex;
  justify-content:center;
}

.ruyaLibV2LoadMore button{
  min-height:35px;
  padding:0 15px;
  border:1px solid #d9e2ec;
  border-radius:9px;
  background:#fff;
  color:#315e91;
  font-size:9px;
  font-weight:650;
  cursor:pointer;
}

.ruyaLibV2Reports{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.ruyaLibV2Reports article{
  min-height:125px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  border:1px solid var(--lib-line);
  border-radius:13px;
}

.ruyaLibV2Reports small,
.ruyaLibV2Reports span{
  color:#8796a8;
  font-size:9px;
}

.ruyaLibV2Reports b{
  margin:5px 0;
  color:#173e72;
  font-size:26px;
}

@media(max-width:1200px){
  .ruyaLibraryStandaloneApp{
    grid-template-columns:205px minmax(0,1fr);
  }

  .ruyaLibV2PreviewGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .ruyaLibV2DashboardGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  .ruyaLibraryStandaloneApp{
    display:block;
  }

  .ruyaLibV2Side{
    display:none;
  }

  .ruyaLibV2Top{
    height:auto;
    min-height:58px;
    padding:9px 11px;
  }

  .ruyaLibV2QuickSearch{
    display:none;
  }

  .ruyaLibV2User{
    min-width:0;
  }

  .ruyaLibV2User span{
    display:none;
  }

  .ruyaLibV2Main{
    padding:11px;
  }

  .ruyaLibV2PageHead{
    align-items:flex-start;
    flex-direction:column;
  }

  .ruyaLibV2HeadActions{
    width:100%;
  }

  .ruyaLibV2HeadActions button{
    flex:1;
  }

  .ruyaLibV2Stats,
  .ruyaLibV2Reports{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ruyaLibV2CatalogTools{
    grid-template-columns:1fr;
  }

  .ruyaLibV2BookGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ruyaLibV2PreviewGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}