/* Hyper Next v0.0.1 — base.css
   Mobile-first, dark-neon UI derived from logo tones (blue + purple)
   No external assets/fonts imported; uses system font stack.
*/

:root{
  /* Core dark surfaces */
  --bg-0:#07090c;
  --bg-1:#0b0f16;
  --bg-2:#101827;

  /* Neon palette (derived from logo) */
  --c-blue:#2fd7ff;
  --c-blue-2:#1aa7ff;
  --c-purple:#b14cff;
  --c-purple-2:#7a2cff;
  --c-magenta:#ff4fd8;

  /* Text */
  --tx-0:#eaf0ff;
  --tx-1:#b8c4e6;
  --tx-2:#7f8bb3;

  /* Lines / borders */
  --line: rgba(255,255,255,.10);
  --line-2: rgba(47,215,255,.22);

  /* Effects */
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.45);
  --glow-blue: 0 0 26px rgba(47,215,255,.18);
  --glow-purple: 0 0 28px rgba(177,76,255,.18);
  --glass: rgba(16,24,39,.55);
  --glass-2: rgba(11,15,22,.45);
  --blur: blur(14px);

  /* Radius / spacing */
  --r-1: 14px;
  --r-2: 18px;
  --r-3: 24px;

  --s-1: 10px;
  --s-2: 14px;
  --s-3: 18px;
  --s-4: 24px;
  --s-5: 32px;

  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--tx-0);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(47,215,255,.10), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(177,76,255,.12), transparent 55%),
    radial-gradient(800px 600px at 60% 90%, rgba(255,79,216,.06), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font: inherit; }
.container{
  width: min(var(--max), calc(100% - 2 * var(--s-4)));
  margin: 0 auto;
}

/* Subtle background pattern (sparks/energy) */
.energy-bg{
  position:relative;
  isolation:isolate;
}
.energy-bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(47,215,255,.25), transparent 60%),
    radial-gradient(2px 2px at 78% 28%, rgba(177,76,255,.28), transparent 60%),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 66% 74%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.16), transparent 60%);
  opacity:.55;
  filter: blur(.2px);
}

/* Glass card */
.card{
  background: linear-gradient(180deg, rgba(16,24,39,.62), rgba(11,15,22,.52));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur);
}
.card.pad{ padding: var(--s-4); }
.card.tight{ padding: var(--s-3); }

/* Typography */
.h1{
  font-size: clamp(26px, 3.5vw, 44px);
  letter-spacing: .2px;
  margin:0;
}
.h2{
  font-size: clamp(18px, 2.2vw, 26px);
  margin:0 0 10px;
  letter-spacing: .2px;
}
.p{
  margin:0;
  color:var(--tx-1);
}
.muted{ color: var(--tx-2); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--tx-0);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  user-select:none;
}
.btn:active{ transform: scale(.98); }
.btn-primary{
  border-color: rgba(47,215,255,.32);
  background: linear-gradient(90deg, rgba(47,215,255,.18), rgba(177,76,255,.18));
  box-shadow: var(--glow-blue), var(--glow-purple);
}
.btn-primary:hover{
  border-color: rgba(47,215,255,.45);
  background: linear-gradient(90deg, rgba(47,215,255,.22), rgba(177,76,255,.22));
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

/* Badges / chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--tx-1);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--c-blue), rgba(47,215,255,.2));
  box-shadow: 0 0 18px rgba(47,215,255,.25);
}

/* Inputs (hooks for future JS/backend) */
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  color: var(--tx-0);
  outline:none;
}
.input:focus{
  border-color: rgba(47,215,255,.35);
  box-shadow: var(--glow-blue);
}

/* Header / nav base */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(7,9,12,.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.brand img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(47,215,255,.25));
}
.brand .name{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand .name strong{
  font-size: 14px;
  letter-spacing: .6px;
}
.brand .name span{
  font-size: 12px;
  color: var(--tx-2);
}

.hr{
  height:1px;
  background: rgba(255,255,255,.08);
  border:0;
  margin: 18px 0;
}

/* Grid helpers */
.grid{
  display:grid;
  gap: 14px;
}
@media (min-width: 700px){
  .grid.g2{ grid-template-columns: repeat(2, 1fr); }
  .grid.g3{ grid-template-columns: repeat(3, 1fr); }
  .grid.g4{ grid-template-columns: repeat(4, 1fr); }
}

/* Footer */
.footer{
  padding: 26px 0 40px;
  color: var(--tx-2);
  font-size: 13px;
}


/* ===== Enhancements (v0.0.1+) ===== */

/* Better focus visibility */
:focus-visible{
  outline: 2px solid rgba(47,215,255,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Gradient text utility */
.grad-text{
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle animated glow line (pure CSS) */
.glow-line{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,215,255,.55), rgba(177,76,255,.55), transparent);
  opacity: .6;
  filter: blur(.2px);
}

/* Tag label */
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: var(--tx-1);
}
.tag .spark{
  width:10px;height:10px;border-radius:3px;
  background: linear-gradient(135deg, rgba(47,215,255,.8), rgba(177,76,255,.8));
  box-shadow: 0 0 18px rgba(177,76,255,.22);
}

/* Overlay/modal hooks (visual only) */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:none; /* JS will toggle later */
  z-index: 200;
}
.modal{
  width: min(520px, calc(100% - 2 * var(--s-4)));
  margin: 12vh auto 0;
}
.modal .card{ border-color: rgba(47,215,255,.18); }

/* Scrollbar (optional) */
@media (pointer:fine){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(47,215,255,.25), rgba(177,76,255,.25));
    border: 2px solid rgba(7,9,12,.9);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-track{ background: rgba(7,9,12,.6); }
}


/* ===== Motion utilities ===== */
@keyframes shimmer {
  0%{ transform: translateX(-140%); opacity: 0; }
  15%{ opacity: .9; }
  60%{ opacity: .8; }
  100%{ transform: translateX(140%); opacity: 0; }
}
@keyframes softPulse {
  0%,100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.05); opacity: 1; }
}
@keyframes neonFlicker {
  0%,100%{ opacity: 1; }
  50%{ opacity: .92; }
  70%{ opacity: .98; }
}
@keyframes drift {
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(10px,-10px,0) rotate(8deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes slideUp {
  from{ transform: translateY(14px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.reveal{ animation: slideUp .6s ease both; }
.reveal.d1{ animation-delay: .08s; }
.reveal.d2{ animation-delay: .16s; }
.reveal.d3{ animation-delay: .24s; }
.reveal.d4{ animation-delay: .32s; }

/* Icon wrapper */
.i{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(47,215,255,.14), rgba(177,76,255,.14));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--glow-blue);
  flex: 0 0 auto;
}
.i svg{
  width: 18px;
  height: 18px;
  opacity: .95;
  filter: drop-shadow(0 0 16px rgba(47,215,255,.18));
}



/* Tables */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px; /* enables horizontal scroll on small screens */
}
.table thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
}
.table tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
  font-size: 13px;
}
.table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
.table .muted{ color: rgba(255,255,255,.55); }


/* FX layer stacking */
.topbar, main, footer{
  position: relative;
  z-index: 2;
}


/* ===== Hotfix mobile: remove scroll horizontal ===== */
html, body{
  width: 100%;
  overflow-x: hidden;
}
*{
  max-width: 100%;
}
img, svg, video, canvas{
  max-width: 100%;
}