:root {
  /* Colors */
  --bg: #0c0e10;
  --surface: rgba(20,20,20,0.45);
  --surface-strong: rgba(20,20,20,0.65);
  --text: #e9eef5;
  --muted: rgba(233,238,245,0.65);
  --border: rgba(255,255,255,0.14);
  --accent: #5fb3ff;
  --accent-2: #8de3ff;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --h1: 28px; --h2: 22px; --h3: 18px; --body: 15px;

  /* Radius + spacing */
  --radius: 14px;
  --r-card: calc(var(--radius) + 8px);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;

  /* Shadows */
  --shadow: 0 8px 24px rgba(0,0,0,0.28);
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.22);
  --shadow-acc: 0 6px 20px rgba(95,179,255,.35);

  /* Layout */
  --container: 1160px;
}

/* Optional: light theme */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fb;
    --surface: rgba(255,255,255,0.8);
    --surface-strong: rgba(255,255,255,0.95);
    --text: #111317;
    --muted: rgba(17,19,23,0.65);
    --border: rgba(17,19,23,0.12);
  }
}

/* Base */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--body)/1.5 var(--font-sans);
}
body.login-bg {
  background: url("/static/background.jpg") no-repeat center center fixed;
  background-size: cover;
}
.container { max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--space-4) calc(var(--space-6) * 2); }

a { color: var(--accent); }

h1 { font-size: var(--h1); font-weight: 700; letter-spacing: .2px; }
h2 { font-size: var(--h2); font-weight: 600; letter-spacing: .2px; margin: var(--space-1) 0 var(--space-4); }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: .2px; }
.muted { color: var(--muted); }
.text-center { text-align: center; }
.center { display:flex; align-items:center; justify-content:center; }
.row { display:flex; gap: var(--space-3); align-items:center; }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }

/* Header */
header { position: sticky; top: 14px; z-index: 10; }
.glass-nav {
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
  padding: .6rem .9rem; border-radius: var(--r-card);
  background: var(--surface);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.brand { display:flex; align-items:center; gap: .7rem; }
.brand h1 { margin: 0; color: #fff; font-size: 1.15rem; letter-spacing:.2px; }
.badge {
  font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#000; font-weight:700;
}
.header-links { display:flex; align-items:center; gap: 1.25rem; }
.text-link {
  color: rgba(255,255,255,0.95);
  text-decoration:none; background:transparent; border:none; padding:0;
  font-weight:600; cursor:pointer; line-height:1; vertical-align:middle;
}
.text-link:hover { text-decoration: underline; }
.header-links form { display:inline; margin:0; padding:0; }

/* Cards/Tiles */
.card, .tile {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.card { padding: var(--space-5); }
.tile {
  padding: var(--space-4);
  display:flex; align-items:center; justify-content:center; min-height: 120px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(255,255,255,0.22); }
.tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }

/* RSW result tiles: centered title at top, content below, no bullets */
#result .tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
#result .tile h3 {
  margin: 0 0 .75rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.2;
}
#result .tile ul,
.tile ul,
#result ul { list-style: none !important; padding-left: 0 !important; margin: .25rem 0 0; }
#result .tile li,
.tile li,
#result li { margin: .2rem 0; }
/* Remove any list marker that Pico may inject */
#result .tile li::marker,
.tile li::marker,
#result li::marker { content: none; }
/* Common text blocks inside tiles */
#result .tile p { margin: .25rem 0; }

/* Buttons */
.button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#000; border:none; border-radius: var(--radius);
  padding: .6rem 1rem; font-weight:600; cursor: pointer; box-shadow: var(--shadow-acc);
  transition: transform .15s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  box-shadow: none;
}
/* Secondary dark button (used in contact modal) */
.button-secondary {
  background: rgba(255,255,255,0.1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .5rem 1rem;
  font-weight: 500;
  box-shadow: none;
}
.button-secondary:hover { background: rgba(255,255,255,0.14); }
.button-secondary:focus { outline: none; box-shadow: none; }
.button-secondary:active { transform: none; }
/* Utility: remove glow/animation from specific buttons */
.no-glow { box-shadow: none !important; }
.no-glow:hover, .no-glow:focus { box-shadow: none !important; transform: none !important; }
.no-glow:active { transform: none !important; }

/* Form controls */
.input, input[type=text], input[type=password], select, textarea {
  width:100%; height:44px; color: var(--text);
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  border-radius: 12px; padding: .5rem .75rem; outline: none; transition: all .2s ease;
}
.input:hover, input:hover, select:hover, textarea:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25);
}
.input:focus, input:focus, select:focus, textarea:focus {
  background: rgba(255,255,255,0.10); border-color: rgba(95,179,255,.8);
  box-shadow: 0 0 0 3px rgba(95,179,255,.12);
}
label { font-size: .9rem; color: var(--muted); display:block; margin-bottom: .5rem; font-weight: 500; }

/* Print overrides */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  body * { color: #000000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  header, .button { display: none !important; }
  .tile { background: transparent !important; border: none !important; box-shadow: none !important; }
  .logo-display { display: none !important; }
  .logo-print { display: block !important; }
}