:root {
  --tg-viewport-height: 100dvh;
  --tg-viewport-stable-height: 100dvh;
  --tg-app-height: 100dvh;
  --tg-app-width: 100vw;
  --tg-safe-inset-top: 0px;
  --tg-safe-inset-bottom: 0px;
  --tg-safe-inset-left: 0px;
  --tg-safe-inset-right: 0px;
}

html,
html body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

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

/* ——— Telegram Mini App (telefon / Telegram desktop) ——— */
html.tg-mini-app,
html.tg-mini-app body {
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  height: auto;
  max-height: none;
  overflow-x: hidden;
}

html.tg-mini-app .panel-body.app-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  max-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  overflow: hidden;
  padding-top: var(--tg-safe-inset-top);
  padding-left: var(--tg-safe-inset-left);
  padding-right: var(--tg-safe-inset-right);
}

html.tg-mini-app .panel-wrap {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

html.tg-mini-app .panel-wrap--user > .user-panel-scroll {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ——— Oddiy brauzer (kompyuter / telefon brauzer) ——— */
html.is-browser,
html.is-browser body {
  min-height: 100dvh;
  height: 100dvh;
  max-height: none;
  overflow-x: hidden;
}

html.is-browser .panel-body.app-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
}

html.is-browser .panel-wrap--admin,
html.is-browser .panel-wrap--user {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
}

/* ——— Keng ekran (kompyuter) ——— */
html.is-desktop.is-browser .panel-body.app-root,
html.is-desktop.mode-browser .panel-body.app-root {
  min-height: 100vh;
  height: 100vh;
}

html.is-desktop .admin-sidebar,
html.mode-desktop .admin-sidebar {
  width: 13rem;
}

html.is-desktop .admin-menu-btn,
html.mode-desktop .admin-menu-btn {
  font-size: 0.82rem;
}

html.is-desktop .panel-wrap--user .user-tabs--bottom,
html.mode-desktop .panel-wrap--user .user-tabs--bottom {
  max-width: 960px;
  left: 50%;
  right: auto;
  width: 100%;
  max-width: 960px;
  transform: translateX(-50%);
  border-radius: 12px 12px 0 0;
}

html.is-desktop .user-panel-scroll,
html.mode-desktop .user-panel-scroll {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

html.is-desktop .admin-main,
html.mode-desktop .admin-main {
  max-width: none;
}

/* ——— Telegram Desktop (tdesktop / macos) ——— */
html.tg-mini-app.platform-desktop .panel-body.app-root {
  min-height: var(--tg-app-height, 100dvh);
}

/* ——— Mobil Telegram ——— */
html.tg-mini-app.platform-mobile .user-tabs--bottom {
  padding-bottom: calc(0.35rem + var(--tg-safe-inset-bottom, 0px));
}

html.tg-mini-app.platform-android .panel-header--user,
html.tg-mini-app.platform-android .panel-header--admin {
  padding-top: calc(1rem + var(--tg-safe-inset-top, 0px));
}

.panel-loading,
.panel-error,
.browser-login {
  min-height: var(--tg-app-height, 100dvh);
}

html.is-browser .browser-login,
html.is-browser .panel-loading,
html.is-browser .panel-error {
  min-height: 100dvh;
  height: 100dvh;
}