:root {
  --app-width: 390px;
  --app-height: 732px;

  --top-space: 76px;

  --stage-gap: 28px;

  --side-panel-width: 260px;
  --side-panel-height: 132px;

  --stage-scale: 1;

  /*
    Background tuning:
    Higher = darker.
    Adjust in small +0.05 / -0.05 steps.
  */
  --bg-centre-dim: 0.22;
  --bg-mid-dim: 0.50;
  --bg-edge-dim: 0.74;
}

/* Base reset */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  background: #050505;
}

body {
  overflow: hidden;
  min-height: 100svh;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  background-image: url("https://albert.concordsystems.co/images/back-22.jpg?");
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;

  position: relative;
}

/* Dark image overlay */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(8, 10, 15, var(--bg-centre-dim)) 0%,
      rgba(8, 10, 15, var(--bg-mid-dim)) 52%,
      rgba(3, 4, 8, var(--bg-edge-dim)) 100%
    ),
    linear-gradient(
      135deg,
      rgba(4, 8, 16, 0.34),
      rgba(18, 24, 38, 0.24)
    );
}

/* Overall desktop layout */
.app-stage {
  position: relative;
  z-index: 1;

  min-height: 100svh;
  padding-top: var(--top-space);

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--stage-gap);

  transform: scale(var(--stage-scale));
  transform-origin: top center;
}

/* Shared glass treatment */
.brand-panel,
.app-frame {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;

  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);

  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Side logo panels */
.brand-panel {
  width: var(--side-panel-width);
  height: var(--side-panel-height);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 26px 30px;

  /*
    Places the logos roughly around the app login/logo zone,
    not halfway down the tall app.
  */
  margin-top: 88px;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;

  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}

.brand-logo-topmaq {
  max-height: 58px;
}

.brand-logo-concord {
  max-height: 54px;
}

/* Glass plate directly around app */
.app-frame {
  padding: 20px;
  border-radius: 4px;
}

/* Expo app pane */
#root {
  display: flex;
  flex: none;

  width: var(--app-width);
  height: var(--app-height);

  position: relative;
  overflow: hidden;

  background: #ffffff;

  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.62);

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.50),
    0 5px 14px rgba(0, 0, 0, 0.30);
}

/* Subtle inner app edge */
#root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Medium screens: keep the app central, shrink side panels */
@media (max-width: 1080px) {
  :root {
    --stage-gap: 18px;
    --side-panel-width: 210px;
    --side-panel-height: 112px;
  }

  .brand-panel {
    padding: 22px 24px;
  }

  .brand-logo-topmaq {
    max-height: 48px;
  }

  .brand-logo-concord {
    max-height: 44px;
  }
}

/* Small screens: side logos move above the app */
@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-stage {
    min-height: auto;
    padding: 28px 16px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: start;
    gap: 16px;
  }

  .brand-panel {
    width: 100%;
    max-width: 260px;
    height: 104px;
    margin-top: 0;
  }

  .app-frame {
    grid-column: 1 / -1;
    padding: 14px;
  }
}

/* Very small browser windows: scale down the app assembly */
@media (max-width: 520px), (max-height: 850px) {
  :root {
    --top-space: 24px;

    --stage-scale: min(
      calc((100vw - 28px) / 446),
      calc((100svh - 36px) / 768)
    );
  }

  body {
    overflow: hidden;
  }

  .app-stage {
    display: flex;
    padding-top: var(--top-space);
  }

  .brand-panel {
    display: none;
  }

  .app-frame {
    padding: 14px;
  }
}