/*
 * JLPT180 Dashboard Layout CSS owner.
 * P4.36: moved core dashboard layout selectors from dashboard.css.
 */
/*
 * JLPT180 Dashboard CSS owner.
 * P4.2: moved out of includes/clean-styles.php.
 * Scope: dashboard/sanh cards/mobile dashboard entry visuals.
 */
body.jlpt180-clean-lobby #jlpt-dash-container.dash,
body.jlpt180-clean-lobby #jlpt-dash-container.dash *{
letter-spacing: 0;
}


@media (min-width: 900px){
body.jlpt180-clean-lobby #jlpt-dash-container.dash{
width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(580px, 1.54fr) minmax(350px, .96fr);
    grid-template-rows: clamp(86px, 10.5vh, 104px) minmax(300px, 1.25fr) minmax(205px, .75fr);
    gap: 12px 14px;
    padding: 10px 12px 12px;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(13, 178, 164, .18), rgba(255,255,255,.02));
  }


  body.jlpt180-clean-lobby #jlpt-dash-container.dash::before,
body.jlpt180-clean-lobby #jlpt-dash-container.dash::after,
body.jlpt180-clean-lobby #view-dashboard::before,
body.jlpt180-clean-lobby #view-dashboard::after,
body.jlpt180-clean-lobby .mg::before,
body.jlpt180-clean-lobby .mg::after{
display: none; content: none;
  }


  body.jlpt180-clean-lobby #jlpt-dash-container > .mg,
body.jlpt180-clean-lobby #jlpt-dash-container > .mg > div{
display: contents;
  }
}


@media (min-width: 900px) and (max-height: 900px){
body.jlpt180-clean-lobby #jlpt-dash-container.dash{
grid-template-rows: clamp(74px, 9.2vh, 86px) minmax(255px, 1fr) minmax(198px, .72fr);
    gap: 9px 12px;
    padding: 8px 10px 10px;
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby #jlpt-dash-container.dash{
width: 100%;
    max-width: 410px;
    margin: 0 auto;
    padding: 8px 10px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    overflow: visible;
    min-height: 100dvh;
  }


  body.jlpt180-clean-lobby #jlpt-dash-container > .mg,
body.jlpt180-clean-lobby #jlpt-dash-container > .mg > div{
display: contents;
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby #jlpt-dash-container.dash{
padding-bottom: 94px;
  }
}


@media (min-width: 900px){
body.jlpt180-clean-lobby #jlpt-dash-container.dash{
background:
      radial-gradient(circle at 16% 8%, rgba(255, 196, 220, .22), transparent 27%),
      radial-gradient(circle at 88% 22%, rgba(209, 250, 255, .34), transparent 28%),
      linear-gradient(90deg, rgba(208, 247, 255, .16), rgba(255, 241, 248, .14), rgba(232, 255, 246, .12));
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .app,
body.jlpt180-clean-lobby .main,
body.jlpt180-clean-lobby .content{
background:
      radial-gradient(circle at 8% 20%, rgba(255, 181, 215, .16), transparent 24%),
      radial-gradient(circle at 95% 54%, rgba(121, 220, 236, .14), transparent 26%);
  }
}


@media (max-width: 899px){
html body.jlpt180-clean-lobby,
body.jlpt180-clean-lobby{
padding-bottom: 0;
  }


  body.jlpt180-clean-lobby #jlpt-dash-container.dash{
min-height: auto;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}