:root {
  --bg: #e8f2ff;
  --card: rgba(255, 255, 255, 0.72);
  --text: #112031;
  --muted: #5a6b7b;
  --accent: #0b6efd;
  --border: #d9e3ef;
  --surface: rgba(255, 255, 255, 0.52);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 172, 255, 0.2) 0%, rgba(121, 172, 255, 0) 32%),
    linear-gradient(180deg, #eef6ff 0%, #e8f2ff 38%, #e4efff 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.38;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(10px, 1.3vw, 18px) clamp(8px, 1vw, 16px) 10px;
  position: relative;
}

h1 {
  margin: 0;
  font-size: clamp(1.45rem, 1.5vw, 1.9rem);
  line-height: 1.1;
}

.subtitle {
  margin-top: 0;
  color: var(--muted);
}

.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(10px, 1.2vw, 14px);
  margin-bottom: 12px;
  box-shadow: none;
}