* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--color-text);
  background-color: #08111f;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/images/background.webp") center/cover no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.hero {
  margin-bottom: var(--space-xl);
}

.hero__content {
  max-width: 720px;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.hero h1 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.hero__text,
.panel__header p,
.field-group label,
.card__meta,
.empty-state {
  color: var(--color-muted);
}

.main-layout {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(280px, 380px) 1fr;
}

.panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.panel__header {
  margin-bottom: var(--space-lg);
}

.panel__header h2 {
  margin: 0 0 var(--space-xs);
  font-size: 1.2rem;
}