:root {

  --moonbeam-sidebar: 130px;

  --moonbeam-accent: #6d5cce;

  --moonbeam-ink: #222831;

  --moonbeam-muted: #6c757d;

  --moonbeam-line: #e5e5e5;

  --moonbeam-canvas: #f3f4f6;

}



body {

  margin: 0;

  color: var(--moonbeam-ink);

  background: var(--moonbeam-canvas);

}



a {

  text-decoration: none;

}



.page-wrapper {

  min-height: 100vh;

}



.menu-sidebar {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: var(--moonbeam-sidebar);

  background: #fff;

  border-right: 1px solid var(--moonbeam-line);

  z-index: 1000;

  display: flex;

  flex-direction: column;

}



.menu-sidebar .logo {

  padding: 18px 8px 12px;

  text-align: center;

  border-bottom: 1px solid var(--moonbeam-line);

}



.menu-sidebar .logo a {

  color: var(--moonbeam-ink);

  font-weight: 700;

  letter-spacing: 0.06em;

  font-size: 0.82rem;

}



.studio-subtitle {

  margin: 6px 0 0;

  font-size: 0.75rem;

  color: var(--moonbeam-accent);

}



.menu-sidebar__content {

  position: relative;

  flex: 1;

  overflow: hidden;

}



.navbar__list li a.nav-icon-link,

.navbar-mobile__list li a.nav-icon-link {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  padding: 14px 6px;

  color: #555;

  font-size: 0.68rem;

  line-height: 1.2;

  text-align: center;

  border-left: 3px solid transparent;

}



.navbar__list li a.nav-icon-link i,

.navbar-mobile__list li a.nav-icon-link i {

  font-size: 1.15rem;

}



.navbar__list li a.nav-icon-link:hover,

.navbar__list li a.nav-icon-link.active {

  color: var(--moonbeam-accent);

  background: #f4f1ff;

  border-left-color: var(--moonbeam-accent);

}



.page-container {

  margin-left: var(--moonbeam-sidebar);

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.header-desktop {

  background: #fff;

  border-bottom: 1px solid var(--moonbeam-line);

  min-height: 70px;

  display: flex;

  align-items: center;

}



.header-desktop .section__content {

  width: 100%;

}



.section__content--p30 {

  padding: 15px 0;

}



.studio-password {

  background: #fff;

  border: 1px solid #e5e5e5;

  color: #222831;

}



.studio-password:hover {

  background: #f4f1ff;

  color: #6d5cce;

}



.moonbeam-password {

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 1.25rem;

  letter-spacing: 0.08em;

  margin-bottom: 0;

}



.studio-signout {

  background: #fee2e2;

  border: 1px solid #fca5a5;

  color: #991b1b;

}



.studio-signout:hover {

  background: #fecaca;

  color: #7f1d1d;

}



.studio-body-scroll {

  padding: 30px;

  flex: 1;

}



.header-mobile {

  background: #fff;

  border-bottom: 1px solid var(--moonbeam-line);

  position: relative;

  z-index: 1100;

}



.header-mobile__bar {

  padding: 12px 0;

}



.header-mobile-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.header-mobile .logo {

  letter-spacing: 0.06em;

}



.navbar-mobile {

  background: #fff;

  border-top: 1px solid var(--moonbeam-line);

}



.navbar-mobile__list li a {

  flex-direction: row;

  justify-content: flex-start;

  gap: 10px;

  padding: 12px 4px;

  font-size: 0.95rem;

  border-left: 0;

}



.navbar-mobile__list .nav-icon-link {

  color: var(--moonbeam-ink);

}



.hamburger {

  padding: 0;

  display: inline-flex;

  cursor: pointer;

  background: transparent;

  border: 0;

}



.hamburger-box {

  width: 24px;

  height: 16px;

  display: inline-block;

  position: relative;

}



.hamburger-inner,

.hamburger-inner::before,

.hamburger-inner::after {

  width: 24px;

  height: 2px;

  background-color: #333;

  position: absolute;

  left: 0;

  transition: transform 0.2s ease;

}



.hamburger-inner {

  top: 7px;

}



.hamburger-inner::before,

.hamburger-inner::after {

  content: "";

}



.hamburger-inner::before {

  top: -7px;

}



.hamburger-inner::after {

  top: 7px;

}



.moonbeam-card {

  background: #fff;

  border: 1px solid var(--moonbeam-line);

  border-radius: 6px;

  padding: 20px;

  height: 100%;

  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);

}



.moonbeam-card h2 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 12px;

}



.moonbeam-schedule td {

  min-width: 8.5rem;

  vertical-align: top;

}



.moonbeam-schedule input[type="time"] {

  min-width: 7.25rem;

}



.moonbeam-login {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: var(--moonbeam-canvas);

}



.moonbeam-login__panel {

  width: 100%;

  max-width: 420px;

  background: #fff;

  border: 1px solid var(--moonbeam-line);

  border-top: 6px solid var(--moonbeam-accent);

  border-radius: 6px;

  padding: 32px 28px;

  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);

}



@media (max-width: 991.98px) {

  .menu-sidebar {

    display: none !important;

  }



  .page-container {

    margin-left: 0;

  }



  .header-desktop {

    display: none;

  }

}