/*
 * JLPT180 Dashboard Aux/Library CSS owner.
 * P4.34: moved aux/library selectors from dashboard.css.
 * Scope: .jlpt180-aux-* / .jlpt180-library-* only.
 */
body.jlpt180-clean-lobby .jlpt180-aux-view{
width: 100%;
  min-height: 100%;
  padding: 16px;
}


body.jlpt180-clean-lobby .jlpt180-aux-panel{
width: 100%;
  min-height: calc(100dvh - 32px);
  padding: 20px;
  border: 2px solid var(--jlpt-line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(242,255,255,.94), rgba(214,255,245,.9));
  box-shadow: var(--jlpt-shadow);
}


body.jlpt180-clean-lobby .jlpt180-aux-head{
display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #073451;
}


body.jlpt180-clean-lobby .jlpt180-aux-head span{
font-size: 26px;
  line-height: 1;
  font-weight: 900;
}


body.jlpt180-clean-lobby .jlpt180-aux-head strong{
color: #0c67bc;
  font-size: 14px;
}


body.jlpt180-clean-lobby .jlpt180-aux-grid{
display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 16px;
}


body.jlpt180-clean-lobby .jlpt180-aux-card,
body.jlpt180-clean-lobby .jlpt180-library-card{
border: 1px solid rgba(96, 207, 235, .75);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(235,255,253,.9));
  box-shadow: 0 8px 18px rgba(4,72,106,.12);
}


body.jlpt180-clean-lobby .jlpt180-aux-card{
min-height: 360px;
  padding: 14px;
  overflow: hidden;
}


body.jlpt180-clean-lobby .jlpt180-library-grid{
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


body.jlpt180-clean-lobby .jlpt180-library-card{
min-height: 150px;
  padding: 20px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  color: #073451;
  text-align: center;
  text-decoration: none;
}


body.jlpt180-clean-lobby .jlpt180-library-card i{
color: #0aa8d2;
  font-size: 34px;
}


body.jlpt180-clean-lobby .jlpt180-library-card span{
font-size: 19px;
  font-weight: 900;
}


body.jlpt180-clean-lobby .jlpt180-library-card small{
color: #246987;
  font-size: 13px;
  font-weight: 800;
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .jlpt180-aux-view{
padding: 8px 10px 72px;
  }


  body.jlpt180-clean-lobby .jlpt180-aux-panel{
min-height: calc(100dvh - 88px);
    padding: 14px;
    border-radius: 17px;
  }


  body.jlpt180-clean-lobby .jlpt180-aux-head{
display: grid;
    gap: 6px;
    margin-bottom: 12px;
  }


  body.jlpt180-clean-lobby .jlpt180-aux-head span{
font-size: 22px;
  }


  body.jlpt180-clean-lobby .jlpt180-aux-grid,
body.jlpt180-clean-lobby .jlpt180-library-grid{
grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }


  body.jlpt180-clean-lobby .jlpt180-aux-card{
min-height: 220px;
  }


  body.jlpt180-clean-lobby .jlpt180-library-card{
min-height: 112px;
  }
}


body.jlpt180-clean-lobby .jlpt180-aux-panel{
background: linear-gradient(180deg, rgba(246, 255, 255, .96), rgba(243, 238, 255, .92));
  border-color: rgba(124, 200, 255, .58);
}


body.jlpt180-clean-lobby .jlpt180-aux-card:nth-child(1){
background: linear-gradient(180deg, rgba(236, 250, 255, .96), rgba(246, 240, 255, .92));
  border-color: rgba(123, 214, 255, .62);
}


body.jlpt180-clean-lobby .jlpt180-aux-card:nth-child(2){
background: linear-gradient(180deg, rgba(246, 255, 240, .96), rgba(255, 246, 235, .92));
  border-color: rgba(158, 236, 130, .58);
}


body.jlpt180-clean-lobby .jlpt180-library-card:nth-child(1){
background: linear-gradient(180deg, rgba(236, 250, 255, .96), rgba(255,255,255,.94));
}


body.jlpt180-clean-lobby .jlpt180-library-card:nth-child(2){
background: linear-gradient(180deg, rgba(248, 242, 255, .96), rgba(255,255,255,.94));
}


body.jlpt180-clean-lobby .jlpt180-library-card:nth-child(3){
background: linear-gradient(180deg, rgba(255, 248, 229, .96), rgba(255,255,255,.94));
}


body.jlpt180-clean-lobby .jlpt180-library-card:nth-child(4){
background: linear-gradient(180deg, rgba(236, 255, 245, .96), rgba(255,255,255,.94));
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .jlpt180-aux-panel{
background: linear-gradient(180deg, rgba(246, 255, 255, .98), rgba(243, 238, 255, .94));
  }


  body.jlpt180-clean-lobby .jlpt180-aux-card:nth-child(1){
background: linear-gradient(180deg, rgba(236, 250, 255, .98), rgba(246, 240, 255, .94));
  }


  body.jlpt180-clean-lobby .jlpt180-aux-card:nth-child(2){
background: linear-gradient(180deg, rgba(246, 255, 240, .98), rgba(255, 246, 235, .94));
  }
}


@media (min-width: 900px){
body.jlpt180-clean-lobby .jlpt180-library-card span{
color: var(--sc-text);
  }
}