*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --wmp-bg-1: #e4edf5;
  --wmp-bg-2: #b9d0e7;
  --surface: rgba(255, 255, 255, 0.6);
  --surface2: linear-gradient(180deg, #ffffff 0%, #e1eaf3 49%, #c3d6e8 51%, #d7e5f0 100%);
  --surface-active: linear-gradient(180deg, #d0e0ef 0%, #a4bed9 49%, #8eaed0 51%, #a4c1db 100%);
  --border: #809ebb;
  --border-light: #ffffff;
  --accent: #1162c9;
  --accent-glow: rgba(17, 98, 201, 0.6);
  --text: #111111;
  --text-muted: #445566;
  --danger: #cc0000;
  --radius: 6px;
  --radius-sm: 4px;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  background: linear-gradient(180deg, var(--wmp-bg-1) 0%, var(--wmp-bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100dvh;
  overscroll-behavior: none;
}

#app {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}