:root {
  color-scheme: dark;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.app-shell {
  background:
    linear-gradient(120deg, rgba(255, 105, 180, 0.12), transparent 34%),
    linear-gradient(240deg, rgba(34, 211, 238, 0.12), transparent 34%),
    #10131f;
}

.nav-link {
  border-radius: 999px;
  color: rgb(203 213 225);
  padding: 0.5rem 0.75rem;
  transition: 160ms ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.brand-mark {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(244, 114, 182, 0.96) 52%, rgba(163, 230, 53, 0.92)),
    #f472b6;
  box-shadow: 0 16px 34px rgba(244, 114, 182, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.field,
.code-field {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 7, 18, 0.58);
  color: #f8fafc;
  outline: none;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

.field:focus,
.code-field:focus {
  border-color: rgba(103, 232, 249, 0.7);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.14);
}

.code-field {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  tab-size: 2;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-download {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.75rem;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

.btn-primary {
  background: linear-gradient(90deg, #22d3ee, #a3e635, #f472b6);
  color: #0f172a;
}

.btn-secondary {
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: rgba(34, 211, 238, 0.12);
  color: #cffafe;
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.btn-danger {
  border: 1px solid rgba(251, 113, 133, 0.3);
  background: rgba(244, 63, 94, 0.15);
  color: #fecdd3;
}

.btn-download {
  border: 1px solid rgba(163, 230, 53, 0.28);
  background: rgba(132, 204, 22, 0.13);
  color: #d9f99d;
  font-size: 0.875rem;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover,
.btn-download:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.anime-frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(16, 19, 31, 0.1), rgba(16, 19, 31, 0.86)),
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.86) 0 10%, transparent 11%),
    linear-gradient(135deg, #f472b6 0%, #22d3ee 50%, #2dd4bf 100%);
}

.anime-frame::before {
  content: "";
  position: absolute;
  inset: 10% 12% 18% auto;
  width: 26%;
  border-radius: 999px 999px 24px 24px;
  background: linear-gradient(#ffe4e6, #fda4af);
  box-shadow: -42px 24px 0 -12px #1f2937, 38px 22px 0 -16px #1f2937;
}

.anime-frame::after {
  content: "";
  position: absolute;
  left: 9%;
  top: 18%;
  width: 42%;
  height: 38%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  transform: rotate(-12deg);
}

.artifact-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.055);
  padding: 0.75rem;
}

.media-box {
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.24);
}