/*
  Design tokens mirrored from gowebsmart.net's live stylesheet so this
  panel reads as part of the same product family.
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=EB+Garamond:ital@1&family=Crimson+Text:ital@1&display=swap');

:root {
  --cyan:   #00ccff;
  --amber:  #ff9900;
  --lime:   #aaff00;
  --violet: #7c5cff;
  --white:  #eef3fb;

  --ink-100: rgba(238, 243, 251, 1);
  --ink-80:  rgba(226, 235, 248, 0.82);
  --ink-60:  rgba(205, 218, 238, 0.60);
  --ink-40:  rgba(190, 205, 228, 0.40);
  --ink-25:  rgba(180, 196, 222, 0.25);

  --bg-gradient: linear-gradient(165deg, #05070f 0%, #071224 55%, #060916 100%);

  --glass-bg:     rgba(8, 13, 26, 0.52);
  --glass-bg-2:   rgba(10, 16, 32, 0.72);
  --glass-border: rgba(148, 190, 255, 0.14);
  --hairline: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--amber), transparent);
  --shadow-deep: 0 32px 80px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.35);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --font-brand:   'Orbitron', 'Space Grotesk', sans-serif;
  --font-display: 'Space Grotesk', 'Rajdhani', sans-serif;
  --font-ui:      'Space Grotesk', 'Rajdhani', sans-serif;
  --font-body:    'Inter', 'Rajdhani', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-crimson: 'Crimson Text', Georgia, serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --status-on: var(--lime);
  --status-off: var(--ink-40);
  --status-warn: var(--amber);
  --status-error: #ff3d5e;
}

:root[data-theme="light"] {
  --bg-gradient: linear-gradient(165deg, #eef3fb 0%, #dce6f5 55%, #eef3fb 100%);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-2: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(20, 40, 80, 0.14);
  --ink-100: rgba(10, 16, 32, 1);
  --ink-80: rgba(10, 16, 32, 0.82);
  --ink-60: rgba(10, 16, 32, 0.60);
  --ink-40: rgba(10, 16, 32, 0.40);
  --ink-25: rgba(10, 16, 32, 0.25);
  --shadow-deep: 0 24px 60px rgba(20,40,80,0.12), 0 8px 20px rgba(20,40,80,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-gradient);
  color: var(--ink-100);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-brand);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.hairline {
  height: 1px;
  width: 100%;
  background: var(--hairline);
  opacity: 0.6;
  margin: 20px 0;
  border: none;
}

.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mono { font-family: var(--font-mono); }

.text-muted { color: var(--ink-60); }
.text-dim { color: var(--ink-40); }