/* FundFixFlip — shared JARVIS/HUD theme
   Used by index.html, pro.html, and pro-portal.html so the look stays
   consistent across the whole site without copy-pasting one giant
   <style> block into every page. */

:root{
  --bg:#03050a;
  --panel:rgba(13,20,33,0.62);
  --panel-border:rgba(94,234,212,0.16);
  --cyan:#22d3ee;
  --cyan-soft:rgba(34,211,238,0.55);
  --emerald:#34d399;
  --amber:#fbbf24;
  --red:#fb7185;
  --ink:#e7edf5;
  --ink-dim:#8b9bb4;
}
*{box-sizing:border-box;}
html,body{background:var(--bg);}
body{
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  position:relative;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
#netCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.55;
}
.grid-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(34,211,238,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
}
.vignette{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 0%, rgba(3,5,10,0) 0%, rgba(3,5,10,0.85) 75%),
              linear-gradient(180deg, rgba(3,5,10,0.2) 0%, rgba(3,5,10,0.95) 100%);
}
.content{position:relative; z-index:1;}

/* HUD top bar */
.hud-bar{
  border-bottom:1px solid rgba(94,234,212,0.14);
  background:rgba(3,5,10,0.55);
  backdrop-filter:blur(10px);
}
.dot{
  width:8px;height:8px;border-radius:9999px;
  background:var(--emerald);
  box-shadow:0 0 8px 2px rgba(52,211,153,0.7);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:0.5; transform:scale(0.8);}
}

/* Glow text */
.glow-text{
  text-shadow:0 0 24px rgba(34,211,238,0.35), 0 0 60px rgba(52,211,153,0.12);
}
.eyebrow{
  letter-spacing:0.22em;
}

/* Typewriter caret */
.caret{
  display:inline-block;
  width:3px;
  background:var(--cyan);
  margin-left:4px;
  animation:blink 0.9s step-end infinite;
  box-shadow:0 0 8px var(--cyan);
}
@keyframes blink{50%{opacity:0;}}

/* Glass panel */
.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset, 0 30px 80px -20px rgba(0,0,0,0.7);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--emerald), transparent);
  animation:scan 5s linear infinite;
  box-shadow:0 0 12px 2px rgba(34,211,238,0.6);
}
@keyframes scan{
  0%{left:-100%;}
  100%{left:100%;}
}

.field-label{
  font-size:0.7rem;
  letter-spacing:0.12em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.field-input{
  width:100%;
  background:rgba(2,6,14,0.7);
  border:1px solid rgba(148,163,184,0.18);
  border-bottom:2px solid rgba(148,163,184,0.25);
  border-radius:0.5rem;
  padding:0.75rem 1rem;
  color:var(--ink);
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field-input::placeholder{color:#4b5a70;}
select.field-input{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322d3ee' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  color-scheme:dark;
}
select.field-input option{
  background:#0b1220;
  color:var(--ink);
}
.field-input:focus{
  outline:none;
  border-bottom-color:var(--cyan);
  box-shadow:0 6px 20px -6px rgba(34,211,238,0.45);
  background:rgba(2,6,14,0.92);
}

.btn-primary{
  position:relative;
  background:linear-gradient(90deg, var(--emerald), var(--cyan));
  color:#02150f;
  font-weight:700;
  letter-spacing:0.04em;
  box-shadow:0 0 30px -6px rgba(52,211,153,0.6);
  transition:transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 44px -4px rgba(52,211,153,0.85);
}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:0.6; cursor:not-allowed; transform:none;}

.btn-secondary{
  background:rgba(148,163,184,0.08);
  border:1px solid rgba(148,163,184,0.25);
  color:var(--ink);
  font-weight:600;
  transition:border-color 0.15s, background 0.15s;
}
.btn-secondary:hover{
  border-color:var(--cyan);
  background:rgba(34,211,238,0.08);
}

/* Gauges */
.gauge{
  --pct:0;
  width:86px; height:86px;
  border-radius:9999px;
  background:conic-gradient(var(--gauge-color, var(--emerald)) calc(var(--pct) * 1%), rgba(148,163,184,0.12) 0);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.4s ease;
  position:relative;
}
.gauge::after{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:9999px;
  background:#050810;
  box-shadow:inset 0 0 12px rgba(0,0,0,0.6);
}
.gauge-value{
  position:relative;
  z-index:1;
  font-weight:700;
}

.stat-tile{
  background:rgba(8,13,24,0.55);
  border:1px solid rgba(148,163,184,0.12);
  border-radius:0.85rem;
}

.term-line{
  opacity:0;
  transform:translateY(4px);
  animation:appear 0.35s ease forwards;
}
@keyframes appear{ to{opacity:1; transform:translateY(0);} }

/* File upload tiles (Pro Portal) */
.file-drop{
  border:1px dashed rgba(148,163,184,0.3);
  border-radius:0.75rem;
  background:rgba(2,6,14,0.5);
  transition:border-color 0.2s, background 0.2s;
}
.file-drop.has-file{
  border-style:solid;
  border-color:var(--emerald);
  background:rgba(52,211,153,0.06);
}
.file-drop input[type="file"]{
  color:var(--ink-dim);
}
.file-drop input[type="file"]::file-selector-button{
  margin-right:1rem;
  padding:0.5rem 1rem;
  border-radius:0.5rem;
  border:0;
  font-size:0.8rem;
  font-weight:600;
  background:rgba(34,211,238,0.12);
  color:var(--cyan);
  cursor:pointer;
}
.file-drop input[type="file"]::file-selector-button:hover{
  background:rgba(34,211,238,0.2);
}

::selection{background:rgba(34,211,238,0.35);}

/* Explicit show/hide for JS-toggled panels — do not rely on a CDN-injected
   utility class here, since classes added after page load are not
   guaranteed to be recompiled in time by the Tailwind runtime build. */
.js-hidden{display:none !important;}

@media (max-width: 767px){
  .gauge{width:72px;height:72px;}
}