@import url("./tokens.css?v=20260602a");
@import url("./base.css?v=20260602a");
@import url("./site.css?v=20260602a");

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.kinetic-gradient {
  background: linear-gradient(135deg, #0f7bff 0%, #4f78ff 55%, #0fc8b4 100%);
}

.editorial-shadow {
  box-shadow: 0 24px 60px rgba(15, 35, 70, 0.12);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(199, 213, 231, 0.72);
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 42px rgba(15, 35, 70, 0.1);
}

.app-shell-backdrop {
  background:
    radial-gradient(circle at top left, rgba(15, 123, 255, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(15, 200, 180, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(238, 245, 255, 0.96));
}

.app-glass-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(199, 213, 231, 0.72);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(15, 35, 70, 0.12);
}

.app-soft-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 244, 255, 0.92)),
    radial-gradient(circle at top right, rgba(15, 123, 255, 0.08), transparent 36%);
  border: 1px solid rgba(199, 213, 231, 0.82);
  box-shadow: 0 20px 52px rgba(15, 35, 70, 0.1);
}

.app-primary-glow {
  position: relative;
  overflow: hidden;
}

.app-primary-glow::after {
  content: "";
  position: absolute;
  top: -28%;
  right: -18%;
  width: 15rem;
  height: 15rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(15, 123, 255, 0.18), transparent 68%);
  pointer-events: none;
}