/* Shared styles for support / legal / pricing pages */
:root {
  --bg: #050510;
  --surface: #0a0a1a;
  --surface-2: #0f0f24;
  --text: #f0f0ff;
  --muted: #8a8aa0;
  --accent: #8b5cf6;
  --accent2: #6366f1;
  --accent-light: #a78bfa;
  --cyan: #00E5FF;
  --pink: #FF6B9D;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 80% at 20% -20%, rgba(139, 92, 246, 0.04), transparent),
    radial-gradient(ellipse 80% 80% at 80% 120%, rgba(99, 102, 241, 0.03), transparent);
  min-height: 100vh;
}
.page-wrap { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem 5rem; position: relative; z-index: 2; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-light); text-decoration: none; font-size: 0.9rem; margin-bottom: 2rem; transition: color 0.2s; }
.back-link:hover { color: #fff; }
h1.page-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 0.5rem; background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
p.page-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 3rem; max-width: 640px; }
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 2rem; backdrop-filter: blur(12px); }
.form-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; color: #c4c4d8; margin-bottom: 6px; }
.field label .req { color: var(--pink); }
.field input, .field textarea, .field select {
  width: 100%; background: rgba(10, 10, 26, 0.8); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3); transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.status-msg { margin-top: 1rem; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; display: none; }
.status-msg.success { display: block; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; }
.status-msg.error { display: block; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.rating-stars { display: flex; gap: 8px; font-size: 2rem; }
.rating-stars span { cursor: pointer; color: #444; transition: color 0.2s, transform 0.1s; user-select: none; }
.rating-stars span.active, .rating-stars span:hover, .rating-stars span:hover ~ span.active { color: #FFD700; }
.rating-stars:hover span.active { color: #444; }
.rating-stars:hover span:hover, .rating-stars:hover span:hover ~ span { color: #FFD700; }
.rating-stars span:active { transform: scale(0.9); }
.footer-note { margin-top: 2rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
.footer-note a { color: var(--accent-light); text-decoration: none; }
</content>
</invoke>