@import url("../shared/app-base.css");

:root {
  --bg: #04100a;
  --text: #f6fff9;
  --muted: #9fb3a7;
  --accent: #4ee28b;
  --accent-strong: #a7f7c7;
  --timing: #f4d35e;
  --body-background:
    radial-gradient(circle at 78% 8%, rgba(78, 226, 139, 0.15), transparent 28rem),
    radial-gradient(circle at 12% 54%, rgba(38, 115, 78, 0.2), transparent 25rem),
    var(--bg);
  --header-background: rgba(4, 16, 10, 0.8);
  --brand-mark-border: 2px solid var(--accent);
  --brand-mark-background: transparent;
  --brand-mark-shadow: 0 0 24px rgba(78, 226, 139, 0.72);
  --button-primary-border: rgba(78, 226, 139, 0.7);
  --button-primary-text: #021207;
  --policy-content-color: #e0eee5;
  --policy-copy-color: #b6c5bc;
}

.preview-frame {
  display: flex;
  justify-content: center;
  margin: 0;
}

.preview-frame img {
  width: auto;
  max-height: 560px;
  height: auto;
  border: 1px solid rgba(78, 226, 139, 0.24);
  border-radius: var(--radius-large);
  background: #07150c;
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.5), 0 0 90px rgba(78, 226, 139, 0.1);
}

@media (max-width: 820px) {
  .preview-frame { order: -1; }
}

@media (max-width: 560px) {
  .preview-frame img { width: 100%; max-height: none; }
}