/*
 * JLPT180 Shell CSS owner.
 * P4.1: moved global shell/sidebar/bottom-nav rules from includes/clean-styles.php.
 * Scope: html/body shell frame, view switching, desktop sidebar, mobile bottom nav.
 */

*,
*::before,
*::after{
box-sizing: border-box;
}

html,
body.jlpt180-clean-lobby{
width: 100%;
  min-width: 0;
  margin: 0 !important;
  color: var(--jlpt-ink);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  background: #40d9c0;
  overflow: hidden;
}

body.jlpt180-clean-lobby{
min-height: 100dvh;
  background-color: #12a9dc;
  background-image: linear-gradient(90deg, rgba(18, 167, 218, .10), rgba(255,255,255,.04) 48%, rgba(12, 130, 210, .08)), var(--jlpt-bg-pc);
  background-size: cover;
  background-position: center top;
}

body.jlpt180-clean-lobby #wpadminbar,
body.jlpt180-clean-lobby #bg,
body.jlpt180-clean-lobby .hud,
body.jlpt180-clean-lobby .header-search,
body.jlpt180-clean-lobby .site-header,
body.jlpt180-clean-lobby .entry-title,
body.jlpt180-clean-lobby .page-title{
display: none !important;
}

body.jlpt180-clean-lobby .shell{
width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

body.jlpt180-clean-lobby .main{
flex: 1 1 auto;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
}

body.jlpt180-clean-lobby .cw{
width: 100%;
  height: 100%;
  overflow: hidden;
}

body.jlpt180-clean-lobby .view{
display: none !important;
}

body.jlpt180-clean-lobby .view.active{
display: block !important;
}

body.jlpt180-clean-lobby .jlpt180-hocluc-view{
width: 100%;
  height: 100%;
  overflow: auto;
}

body.jlpt180-clean-lobby #view-hocluc .jlpt180-eh-v3{
width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.jlpt180-clean-lobby #view-hocluc .eh3-stage{
width: 100% !important;
  min-height: 100dvh !important;
}

body.jlpt180-clean-lobby .jlpt180-missing-exam-hall{
width: min(520px, calc(100% - 24px));
  margin: 24px auto;
  padding: 18px;
  border: 2px solid var(--jlpt-line);
  border-radius: 14px;
  background: rgba(245, 255, 255, .92);
  color: #073451;
  font-weight: 800;
  text-align: center;
  box-shadow: var(--jlpt-shadow);
}

body.jlpt180-clean-lobby .jlpt180-missing-exam-hall span{
display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}

body.jlpt180-clean-lobby .sidebar{
flex: 0 0 250px;
  width: 250px;
  height: 100dvh;
  padding: 18px 12px 22px;
  display: flex;
  flex-direction: column;
  border-right: 3px solid rgba(104, 248, 255, .95);
  box-shadow: 10px 0 30px rgba(3, 58, 82, .24), inset -1px 0 0 rgba(255,255,255,.72);
  background-image: linear-gradient(180deg, rgba(249,255,255,.94), rgba(222,255,250,.9)), var(--jlpt-bg-sidebar);
  background-size: cover;
  background-position: left center;
  z-index: 10;
}

body.jlpt180-clean-lobby .brand{
display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 16px;
  text-align: center;
}

body.jlpt180-clean-lobby .brand-ico{
width: 108px;
  height: 108px;
  background: var(--jlpt-crest) center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(11, 72, 104, .26));
}

body.jlpt180-clean-lobby .brand-ico img{
display: none !important;
}

body.jlpt180-clean-lobby .brand-txt{
font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  font-size: 27px;
  line-height: .76;
  color: #1a6792;
  text-shadow: 0 2px 0 rgba(255,255,255,.95);
}

body.jlpt180-clean-lobby .brand-sub{
display: inline-flex;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: #1a6591;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(104,248,255,.45), 0 4px 10px rgba(12,85,118,.16);
}

body.jlpt180-clean-lobby .nav-s{
display: grid;
  gap: 8px;
}

body.jlpt180-clean-lobby .nl{
--nl-accent: #31e9ff;
  --nl-accent-soft: rgba(219, 248, 255, .95);
  --nl-glow: rgba(49, 233, 255, .34);
  position: relative;
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 6px;
  border: 2px solid rgba(77, 231, 245, .95);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(238,255,255,.88), rgba(169,239,235,.82));
  color: #123b5a;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 5px 12px rgba(10,85,110,.12);
}

body.jlpt180-clean-lobby .nl[data-view="dashboard"]{
--nl-accent: #18c7ff; --nl-accent-soft: rgba(219, 248, 255, .95); --nl-glow: rgba(24, 199, 255, .34);
}

body.jlpt180-clean-lobby .nl[data-view="hocluc"]{
--nl-accent: #ffb347; --nl-accent-soft: rgba(255, 242, 214, .96); --nl-glow: rgba(255, 179, 71, .34);
}

body.jlpt180-clean-lobby .nl[data-view="nhiemvu"]{
--nl-accent: #8b5cf6; --nl-accent-soft: rgba(240, 230, 255, .96); --nl-glow: rgba(139, 92, 246, .34);
}

body.jlpt180-clean-lobby .nl[data-view="shop"]{
--nl-accent: #22c55e; --nl-accent-soft: rgba(226, 255, 236, .96); --nl-glow: rgba(34, 197, 94, .34);
}

body.jlpt180-clean-lobby .nl[data-view="tangkho"]{
--nl-accent: #06b6d4; --nl-accent-soft: rgba(220, 251, 255, .96); --nl-glow: rgba(6, 182, 212, .34);
}

body.jlpt180-clean-lobby .nl[data-view="profile"]{
--nl-accent: #ec4899; --nl-accent-soft: rgba(255, 228, 242, .96); --nl-glow: rgba(236, 72, 153, .34);
}

body.jlpt180-clean-lobby .nl::before{
content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 6px;
  border-radius: 999px;
  background: transparent;
  transition: background .16s ease, box-shadow .16s ease;
}

body.jlpt180-clean-lobby .nl.active,
body.jlpt180-clean-lobby .nl:hover{
background: linear-gradient(135deg, rgba(255,255,255,.98), var(--nl-accent-soft));
  border-color: var(--nl-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.96), 0 0 0 2px rgba(255,255,255,.42), 0 0 20px var(--nl-glow), 0 8px 16px rgba(10,85,110,.16);
}

body.jlpt180-clean-lobby .nl.active{
transform: translateX(3px);
}

body.jlpt180-clean-lobby .nl.active::before{
background: linear-gradient(180deg, var(--nl-accent), rgba(255,255,255,.7));
  box-shadow: 0 0 12px var(--nl-glow);
}

body.jlpt180-clean-lobby .nl > i{
width: 42px;
  height: 42px;
  display: block;
  background: var(--jlpt-nav-1) center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(2,44,62,.25));
}

body.jlpt180-clean-lobby .nl.active > i{
filter: none;
}

body.jlpt180-clean-lobby .nav-s .nl:nth-child(2) > i{
background-image: var(--jlpt-nav-2);
}

body.jlpt180-clean-lobby .nav-s .nl:nth-child(3) > i{
background-image: var(--jlpt-nav-3);
}

body.jlpt180-clean-lobby .nav-s .nl:nth-child(4) > i{
background-image: var(--jlpt-nav-4);
}

body.jlpt180-clean-lobby .nav-s .nl:nth-child(5) > i{
background-image: var(--jlpt-nav-5);
}

body.jlpt180-clean-lobby .nav-s .nl:nth-child(6) > i{
background-image: var(--jlpt-nav-6);
}

body.jlpt180-clean-lobby .nav-foot .nl > i{
background-image: var(--jlpt-nav-logout);
}

body.jlpt180-clean-lobby .nl .fa-solid,
body.jlpt180-clean-lobby .nl .fa-regular{
font-size: 0;
}

body.jlpt180-clean-lobby .nl-wrap{
min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

body.jlpt180-clean-lobby .nl-wrap > span:first-child,
body.jlpt180-clean-lobby .nl-logout > span{
font-size: 15px;
  line-height: 1.06;
}

body.jlpt180-clean-lobby .nl.active .nl-wrap > span:first-child{
color: var(--nl-accent);
  text-shadow: 0 0 10px rgba(255,255,255,.85);
}

body.jlpt180-clean-lobby .nl-sub{
justify-self: center;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: #276e93;
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}

body.jlpt180-clean-lobby .nl.active .nl-sub{
background: rgba(255,255,255,.9);
  color: #143f5e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}

body.jlpt180-clean-lobby .nav-foot{
margin-top: auto;
}

body.jlpt180-clean-lobby .nav-foot .nl{
grid-template-columns: 56px 1fr;
  min-height: 62px;
}

body.jlpt180-clean-lobby .bn{
display: none;
}

@media (max-width: 899px) {
  html,
body.jlpt180-clean-lobby{
overflow-x: hidden;
    overflow-y: auto;
    background-color: #10aee0;
    background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(46,204,219,.18)), var(--jlpt-bg-mobile);
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
  }

  body.jlpt180-clean-lobby .shell{
display: block;
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  body.jlpt180-clean-lobby .sidebar{
display: none;
  }

  body.jlpt180-clean-lobby .main,
body.jlpt180-clean-lobby .cw{
width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  body.jlpt180-clean-lobby .bn{
position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: 58px;
    padding: 6px 5px max(6px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    background: rgba(87, 218, 213, .86);
    border-top: 2px solid rgba(104,248,255,.9);
    
  }

  body.jlpt180-clean-lobby .bni{
min-width: 0;
    min-height: 44px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    border: 2px solid rgba(104,248,255,.82);
    border-radius: 8px;
    background: rgba(12, 92, 122, .52);
    color: #eaffff;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
  }

  body.jlpt180-clean-lobby .bni.active{
color: #ffe65b;
    background: rgba(28, 143, 136, .76);
    box-shadow: 0 0 12px rgba(104,248,255,.5);
  }
}

@media (min-width: 900px) {
  body.jlpt180-clean-lobby .brand{
gap: 3px;
    margin-bottom: 14px;
    place-items: center;
  }

  body.jlpt180-clean-lobby .brand-ico{
width: 124px;
    height: 124px;
    margin-bottom: -2px;
  }

  body.jlpt180-clean-lobby .brand-txt{
line-height: .74;
    margin-top: -2px;
  }

  body.jlpt180-clean-lobby .brand-sub{
margin-top: 3px;
    align-items: center;
    justify-content: center;
  }

  body.jlpt180-clean-lobby .nl{
grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px;
    align-items: center;
    padding-left: 8px;
  }

  body.jlpt180-clean-lobby .nl > i{
width: 40px;
    height: 40px;
    align-self: center;
  }

  body.jlpt180-clean-lobby .nl-wrap{
align-self: center;
    align-content: center;
    gap: 1px;
    text-align: left;
  }

  body.jlpt180-clean-lobby .nl-sub{
justify-self: start;
    text-align: center;
  }
}

@media (min-width: 900px) {
  body.jlpt180-clean-lobby .shell{
display: flex !important;
  }

  body.jlpt180-clean-lobby .sidebar{
display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 250px !important;
    width: 250px !important;
    position: relative !important;
    z-index: 20 !important;
  }

  body.jlpt180-clean-lobby .brand,
body.jlpt180-clean-lobby .nav-s,
body.jlpt180-clean-lobby .nav-foot{
display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.jlpt180-clean-lobby .nl{
display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.jlpt180-clean-lobby .main,
body.jlpt180-clean-lobby .cw{
min-width: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 899px) {
  html,
body.jlpt180-clean-lobby{
background-color: #e8f4ff !important;
    background-image: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 40%, #ecfdf5 100%) !important;
    background-attachment: fixed !important;
  }

  body.jlpt180-clean-lobby .bn{
background: rgba(255,255,255,.96) !important;
    border-top: 1.5px solid rgba(147,197,253,.55) !important;
    
    box-shadow: 0 -6px 24px rgba(14,165,233,.10) !important;
    height: 60px !important;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
  }

  body.jlpt180-clean-lobby .bni{
border: 1.5px solid rgba(147,197,253,.45) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f0f9ff, #e0f2fe) !important;
    color: #2563eb !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(14,165,233,.08) !important;
  }

  body.jlpt180-clean-lobby .bni.active{
background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37,99,235,.28) !important;
  }

  body.jlpt180-clean-lobby .bni > i,
body.jlpt180-clean-lobby .bni img{
filter: none !important;
  }
}

@media (max-width: 899px) {
  body.jlpt180-clean-lobby{
padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.jlpt180-clean-lobby .cw,
body.jlpt180-clean-lobby .main{
padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  body.jlpt180-clean-lobby .bn{
left: 8px !important;
    right: 8px !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    height: 62px !important;
    padding: 7px 7px 8px !important;
    gap: 5px !important;
    border: 1px solid rgba(255, 196, 220, .92) !important;
    border-radius: 22px 22px 26px 26px !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(255, 221, 235, .98), transparent 34%),
      radial-gradient(circle at 74% 0%, rgba(215, 236, 255, .9), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255, 244, 250, .9)) !important;
    box-shadow:
      0 -12px 28px rgba(236, 72, 153, .16),
      0 10px 22px rgba(27, 116, 158, .12),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    
    -webkit-
    overflow: visible !important;
  }

  body.jlpt180-clean-lobby .bn::before,
body.jlpt180-clean-lobby .bn::after{
content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }

  body.jlpt180-clean-lobby .bn::before{
left: 18px;
    right: 18px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 126, 179, .75), rgba(93, 213, 255, .58), transparent);
  }

  body.jlpt180-clean-lobby .bn::after{
inset: 8px 20px -10px;
    border-radius: 999px;
    background: rgba(255, 160, 199, .18);
    filter: none;
  }

  body.jlpt180-clean-lobby .bni{
--petal: #ec4899;
    --petal-soft: #ffe4f1;
    --petal-deep: #be185d;
    position: relative !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px 2px 4px !important;
    gap: 2px !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    border-radius: 20px 20px 16px 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.9), var(--petal-soft)) !important;
    color: color-mix(in srgb, var(--petal-deep) 80%, #14384f) !important;
    box-shadow:
      0 5px 12px rgba(45, 83, 114, .08),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    font-size: 10px !important;
    line-height: 1.02 !important;
    text-shadow: none !important;
    transform: translateY(0) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
  }

  body.jlpt180-clean-lobby .bni[data-view="dashboard"]{
--petal: #fb7185; --petal-soft: #fff1f2; --petal-deep: #e11d48;
  }

  body.jlpt180-clean-lobby .bni[data-view="hocluc"]{
--petal: #a855f7; --petal-soft: #f5edff; --petal-deep: #7e22ce;
  }

  body.jlpt180-clean-lobby .bni[data-view="tangkho"]{
--petal: #f472b6; --petal-soft: #fff0f7; --petal-deep: #db2777;
  }

  body.jlpt180-clean-lobby .bni[data-view="shop"]{
--petal: #f59e0b; --petal-soft: #fff7dd; --petal-deep: #b45309;
  }

  body.jlpt180-clean-lobby .bni[data-view="profile"]{
--petal: #38bdf8; --petal-soft: #e9f8ff; --petal-deep: #0284c7;
  }

  body.jlpt180-clean-lobby .bni::before{
content: "";
    position: absolute;
    inset: 4px 10px auto;
    height: 20px;
    border-radius: 999px 999px 12px 12px;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), transparent 70%);
    opacity: .78;
    pointer-events: none;
  }

  body.jlpt180-clean-lobby .bni::after{
content: "✿";
    position: absolute;
    right: 7px;
    top: 5px;
    color: var(--petal);
    font-size: 8px;
    line-height: 1;
    opacity: .42;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
    pointer-events: none;
  }

  body.jlpt180-clean-lobby .bni i{
position: relative;
    z-index: 1;
    width: 21px !important;
    height: 21px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.82) !important;
    color: var(--petal) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(25, 82, 120, .1) !important;
  }

  body.jlpt180-clean-lobby .bni span{
position: relative;
    z-index: 1;
    max-width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  body.jlpt180-clean-lobby .bni.active{
min-height: 60px !important;
    height: 60px !important;
    margin-top: -17px !important;
    border-color: rgba(255,255,255,.96) !important;
    border-radius: 28px 28px 18px 18px !important;
    background:
      radial-gradient(circle at 50% 14%, rgba(255,255,255,.9), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--petal) 82%, #fff), var(--petal)) !important;
    color: #fff !important;
    box-shadow:
      0 12px 22px color-mix(in srgb, var(--petal) 32%, transparent),
      0 5px 0 var(--petal-deep),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
    transform: translateY(-1px) !important;
  }

  body.jlpt180-clean-lobby .bni.active::before{
inset: -7px 7px auto;
    height: 28px;
    border-radius: 999px 999px 16px 16px;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), color-mix(in srgb, var(--petal) 48%, #fff) 55%, transparent 74%);
    opacity: .9;
  }

  body.jlpt180-clean-lobby .bni.active::after{
content: "✿";
    left: 50%;
    right: auto;
    top: -3px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--petal);
    font-size: 13px;
    opacity: 1;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--petal) 28%, transparent);
  }

  body.jlpt180-clean-lobby .bni.active i{
width: 25px !important;
    height: 25px !important;
    margin-top: 2px !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--petal-deep) !important;
    box-shadow: 0 4px 12px rgba(255,255,255,.34) !important;
  }

  body.jlpt180-clean-lobby .bni.active span{
color: #fff !important;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--petal-deep) 55%, transparent) !important;
  }
}

@media (min-width: 900px) {
  body.jlpt180-clean-lobby{
--sc-sky: #dff7ff;
    --sc-mint: #dffcf2;
    --sc-jade: #18b981;
    --sc-cyan: #25c7e8;
    --sc-sakura: #ff8fbd;
    --sc-sakura-soft: #ffe6f1;
    --sc-sakura-line: rgba(255, 143, 189, .38);
    --sc-cream: #fffaf3;
    --sc-text: #12324a;
    --sc-muted: #5d7388;
  }

  body.jlpt180-clean-lobby .main{
background:
      radial-gradient(circle at 18% 8%, rgba(255, 214, 232, .28), transparent 30%),
      radial-gradient(circle at 82% 4%, rgba(216, 250, 255, .42), transparent 32%),
      linear-gradient(135deg, rgba(225, 249, 255, .34), rgba(255, 248, 253, .28)) !important;
  }

  body.jlpt180-clean-lobby .sidebar{
background:
      radial-gradient(circle at 42% 8%, rgba(255, 226, 238, .34), transparent 30%),
      linear-gradient(180deg, rgba(240, 255, 252, .9), rgba(221, 249, 255, .82)) !important;
    border-right-color: rgba(255, 174, 205, .42) !important;
    box-shadow: 10px 0 28px rgba(41, 137, 163, .10) !important;
  }

  body.jlpt180-clean-lobby .brand-sub{
background: linear-gradient(90deg, rgba(255, 246, 251, .96), rgba(232, 255, 249, .96)) !important;
    color: #0b6f8c !important;
    border: 1px solid rgba(255, 160, 196, .42) !important;
    box-shadow: 0 7px 16px rgba(255, 143, 189, .10) !important;
  }

  body.jlpt180-clean-lobby .nl{
border-color: rgba(94, 210, 225, .68) !important;
    background: linear-gradient(180deg, rgba(247, 255, 253, .84), rgba(229, 251, 255, .76)) !important;
    box-shadow: 0 7px 16px rgba(10, 115, 151, .08), inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  body.jlpt180-clean-lobby .nl.active{
border-color: rgba(255, 143, 189, .84) !important;
    background:
      radial-gradient(circle at 14% 18%, rgba(255, 209, 229, .72), transparent 35%),
      linear-gradient(180deg, rgba(255, 252, 254, .95), rgba(231, 255, 249, .86)) !important;
    box-shadow: 0 9px 20px rgba(255, 143, 189, .18), inset 4px 0 0 rgba(255, 112, 171, .86) !important;
  }
}

@media (min-width: 900px) {
  body.jlpt180-clean-lobby{
--sc-depth-strong: 0 18px 42px rgba(13, 75, 116, .22), 0 0 0 1px rgba(255,255,255,.78) inset;
    --sc-depth-soft: 0 10px 24px rgba(13, 75, 116, .13), 0 0 0 1px rgba(255,255,255,.72) inset;
    --sc-border-main: rgba(255, 148, 190, .74);
    --sc-border-soft: rgba(99, 210, 230, .52);
  }

  body.jlpt180-clean-lobby .nl:not(.active){
border-color: rgba(42, 190, 215, .58) !important;
    opacity: .94 !important;
  }

  body.jlpt180-clean-lobby .nl.active{
border-width: 2px !important;
    box-shadow: 0 12px 24px rgba(255, 104, 170, .20), inset 5px 0 0 rgba(255, 112, 171, .95) !important;
  }
}

@media (max-width: 899px) {
  body.jlpt180-clean-lobby{
background:
      radial-gradient(circle at 12% 7%, rgba(255, 202, 226, .30), transparent 23%),
      radial-gradient(circle at 92% 14%, rgba(157, 232, 255, .28), transparent 24%),
      linear-gradient(180deg, rgba(245, 253, 255, .96), rgba(255, 246, 251, .92)) !important;
  }
}

@media (max-width: 899px) {
  body.jlpt180-clean-lobby .main,
body.jlpt180-clean-lobby .cw{
min-height: auto !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 899px) {
  body.jlpt180-clean-lobby .bn{
pointer-events: auto !important;
    z-index: 2147482600 !important;
  }

  body.jlpt180-clean-lobby .bni{
pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
}