/* visual utility you can add anywhere */
.glassy {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  /* helps avoid weird borders on translucent elements */
  background-clip: padding-box;
}

/* stronger variant if you want it */
.glassy--strong {
  --glass-bg: rgba(255,255,255,0.2);
  --glass-blur: 14px;
}

/* graceful fallback if blur isn’t supported */
@supports not (backdrop-filter: blur(1px)) {
  .glassy {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.05);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.surface-solid {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color, #dcdcdc); /* or any variable/value you want */
  opacity: 1; /* ensures browsers don’t fade it */
}