/* CyberKaida Sample Portal — Soft Cyber theme
   Official palette: pink #F77AF8 · purple #9B6EDA · blue #4E44BD
   blue/black #333C50 · dragon red #D2583E (warnings/danger ONLY) */

:root {
  --pink: #F77AF8; --purple: #9B6EDA; --blue: #4E44BD;
  --ink: #333C50; --danger: #D2583E;
  --bg0: #1c2130; --bg1: #232838; --card: #1c2130dd; --text: #e8e6f0;
}

* { box-sizing: border-box; }

body {
  margin: 0; color: var(--text); font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg0), #2b3048) fixed; min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Chakra Petch', 'Inter', sans-serif; letter-spacing: .5px; }
code, .code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

a { color: var(--pink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }

.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

/* ---- header ---- */
header.site { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
header.site img {
  height: 56px;
  width: auto;            /* derive width from the 600×373 intrinsic ratio — no load-time reflow */
  filter: drop-shadow(0 0 12px #9B6EDA55);
  transition: filter .25s ease;
}
header.site a:hover img { filter: drop-shadow(0 0 16px #F77AF877); }
header.site .who { margin-left: auto; opacity: .8; font-size: .9em; }

/* ---- cards ---- */
.card {
  background: var(--card); border: 1px solid #9B6EDA44; border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 30px #0006, 0 0 0 1px #F77AF80a, 0 0 40px #4E44BD22;
  backdrop-filter: blur(6px);
  animation: rise .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---- halftone dot clusters ---- */
.dots {
  position: fixed; width: 220px; height: 220px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--pink) 1.5px, transparent 1.5px);
  background-size: 11px 11px; opacity: .15;
}
.dots.tr { top: -40px; right: -40px; }
.dots.bl { bottom: -60px; left: -30px; background-image: radial-gradient(circle, var(--purple) 1.5px, transparent 1.5px); }

/* ---- pill buttons ---- */
.btn {
  display: block; width: 100%; border: 0; border-radius: 999px; padding: 11px 18px;
  font-size: 1em; font-weight: 600; color: #fff; cursor: pointer; text-align: center;
  text-decoration: none; background: linear-gradient(90deg, var(--purple), var(--blue));
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 4px 18px #4E44BD66; }
.btn:active { transform: none; filter: brightness(.96); }
.btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.btn.primary { background: linear-gradient(90deg, var(--pink), var(--purple)); color: #1c2130; }
.btn.primary:hover { box-shadow: 0 4px 20px #F77AF855; }
.btn.twitch { background: #9146FF; }
.btn.twitch:hover { box-shadow: 0 4px 18px #9146FF66; }
.btn.discord { background: #5865F2; }
.btn.discord:hover { box-shadow: 0 4px 18px #5865F266; }
.btn.github { background: #24292e; }
.btn.github:hover { box-shadow: 0 4px 18px #00000088; }
.btn + .btn { margin-top: 8px; }

/* ---- forms ---- */
label { display: block; margin-top: 14px; font-size: .8em; text-transform: uppercase;
        letter-spacing: 1.5px; color: var(--purple); }
input[type=text], textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #9B6EDA44; background: #161a26; color: var(--text); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, textarea:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px #F77AF822;
}
.required { color: var(--pink); }
.muted { opacity: .65; font-size: .9em; }
/* Lighter than --danger (#D2583E) so small body text clears WCAG AA on dark bg */
.warn { color: #EE8E76; }

/* Visually hidden but still focusable and announced by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- upload dropzone ---- */
.dropzone {
  display: block;
  border: 2px dashed var(--purple); border-radius: 14px; padding: 28px;
  text-align: center; margin: 14px 0; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dropzone:hover { background: #9B6EDA11; }
.dropzone.drag { background: #9B6EDA22; border-color: var(--pink); box-shadow: 0 0 24px #F77AF833 inset; }
/* Keyboard focus lands on the hidden file input inside the label */
.dropzone:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px #F77AF822; }

.filelist div { background: #9B6EDA22; border-radius: 8px; padding: 6px 10px;
                margin: 4px 0; font-size: .9em; display: flex; justify-content: space-between; }

.bigcode { font-size: 2.2em; letter-spacing: 4px; text-align: center;
           color: var(--pink); font-family: ui-monospace, monospace;
           text-shadow: 0 0 22px #F77AF844; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: .92em; }
th { text-align: left; opacity: .6; font-weight: 600; padding: 8px 6px; }
td { padding: 8px 6px; border-top: 1px solid #9B6EDA22; }

/* ---- tabs ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs a { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--text);
          background: #16161a26; border: 1px solid #9B6EDA44;
          transition: background .15s ease, border-color .15s ease; }
.tabs a:hover { border-color: var(--pink); color: #fff; }
.tabs a.active { background: linear-gradient(90deg, var(--pink), var(--purple)); color: #1c2130; font-weight: 700; }

/* ---- pills & sparkles ---- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8em;
        background: #9B6EDA33; }
.pill.danger { background: #D2583E33; color: var(--danger); }

.sparkle::after { content: " ✦"; color: var(--pink); text-shadow: 0 0 10px #F77AF888; }