/* Zelos "Obsidian & Volt" — extras layered on top of the Tailwind CDN config. */

:root {
  --void-900: #04090c;
  --void-800: #0a1418;
  --void-600: #26323a;
  --volt-400: #22d3ee;
  --volt-300: #a5f3fc;
  --pebble-100: #ecefec;
  --pebble-200: #d8ddd9;
  --pebble-300: #bdc4be;
  --pebble-400: #9aa59e;
}

body {
  background-color: #080d0f;
}

/* Faint grid overlay used on the page background. */
.zd-grid {
  background-image:
    linear-gradient(rgba(165, 243, 252, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 243, 252, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
}

/* Card / panel surface with cyan border that brightens on hover. */
.zd-card {
  position: relative;
  background: var(--void-800);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zd-card:hover {
  border-color: var(--volt-400);
}

/* Decorative L-shaped corner brackets. */
.zd-corner::before,
.zd-corner::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.zd-corner::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--volt-400);
  border-left: 2px solid var(--volt-400);
}
.zd-corner::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--volt-400);
  border-right: 2px solid var(--volt-400);
}

.zd-glow {
  box-shadow: 0 0 30px rgba(165, 243, 252, 0.18), 0 0 60px rgba(165, 243, 252, 0.06);
}

/* Section label: short cyan rule + all-caps cyan text. */
.zd-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--volt-400);
  font-weight: 600;
}
.zd-label::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--volt-400);
  display: inline-block;
}

/* Outlined button, per the style guide. */
.btn {
  display: inline-block;
  border: 1px solid rgba(34, 211, 238, 0.30);
  padding: 0.7rem 1.4rem;
  border-radius: 0.375rem;
  color: var(--pebble-100);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.95rem;
}
.btn:hover {
  border-color: var(--volt-400);
  color: var(--volt-400);
}
.btn-volt {
  border-color: var(--volt-400);
  color: var(--volt-400);
}
.btn-volt:hover {
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

/* Form controls. */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  width: 100%;
  background: var(--void-800);
  border: 1px solid rgba(34, 211, 238, 0.30);
  color: var(--pebble-100);
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.95rem;
}
select[multiple] {
  min-height: 8rem;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--volt-400);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4);
}
label {
  color: var(--pebble-200);
  font-size: 0.85rem;
  font-weight: 600;
}
.helptext,
.helptext * {
  color: var(--pebble-400);
  font-size: 0.78rem;
  font-weight: 400;
}

.zd-link {
  color: var(--volt-400);
  text-decoration: none;
}
.zd-link:hover {
  text-decoration: underline;
}

/* A monospace, selectable URL chip. */
.zd-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--volt-300);
  background: var(--void-900);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 0.375rem;
  padding: 0.45rem 0.6rem;
  word-break: break-all;
  display: block;
}