/* Vialink — sci-fi terminal theme. Mobile-first, responsive, reduced-motion aware. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#04060D; --bg2:#070D1E; --panel:rgba(6,12,24,0.85); --card:rgba(29,40,58,0.45);
  --line:rgba(60,131,246,0.18); --line2:rgba(60,131,246,0.35);
  --txt:#CDE4FF; --dim:#5C7CA6; --bright:#EAF4FF;
  --blue:#3C83F6; --cyan:#22D3EE; --violet:#463BCB;
  --amber:#EF9F27; --green:#9FE1CB; --red:#F09595;
  --grad:linear-gradient(135deg,#463BCB,#3C83F6);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --r:8px; --r-lg:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--mono);
  font-size:14px; line-height:1.6; min-height:100vh; position:relative;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(60,131,246,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,131,246,0.05) 1px,transparent 1px);
  background-size:30px 30px;
}
/* scanlines overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.35;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.25) 0 1px,transparent 1px 3px);
}

a{color:var(--blue); text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- top bar ---- */
.vl-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px clamp(14px,4vw,26px); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(4,6,13,0.9); backdrop-filter:blur(6px); z-index:50;
}
.vl-brand{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:0.28em;
  color:var(--bright); text-shadow:0 0 14px rgba(60,131,246,0.6)}
.vl-brand b{color:var(--blue); font-weight:700}
.vl-nav{display:flex; gap:clamp(10px,3vw,18px); font-size:11px; letter-spacing:0.14em}
.vl-nav a{color:var(--dim)} .vl-nav a.on{color:var(--blue)}
.vl-status{font-size:11px; letter-spacing:0.1em; color:var(--dim); white-space:nowrap}
.vl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); margin-right:6px; vertical-align:middle}

/* ---- layout ---- */
.vl-wrap{max-width:1100px; margin:0 auto; padding:clamp(16px,4vw,28px)}
.vl-center{min-height:calc(100vh - 110px); display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,5vw,40px) 16px}

/* ---- eyebrow / headings ---- */
.vl-eyebrow{font-size:11px; letter-spacing:0.32em; color:var(--blue); text-transform:uppercase}
.vl-h1{font-family:var(--sans); font-weight:700; letter-spacing:-0.01em; color:var(--bright);
  font-size:clamp(28px,7vw,46px); line-height:1.05; margin:8px 0}
.vl-h1 .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.vl-sub{color:var(--dim); font-size:14px}

/* ---- panel with corner brackets ---- */
.vl-frame{position:relative; background:var(--panel); border:1px solid var(--line2);
  border-radius:var(--r-lg); padding:clamp(18px,5vw,26px)}
.vl-cnr{position:absolute; width:16px; height:16px}
.vl-cnr.tl{top:8px;left:8px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.vl-cnr.tr{top:8px;right:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue)}
.vl-cnr.bl{bottom:8px;left:8px;border-bottom:2px solid var(--blue);border-left:2px solid var(--blue)}
.vl-cnr.br{bottom:8px;right:8px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}

/* ---- terminal block ---- */
.vl-term{background:rgba(6,12,24,0.85); border:1px solid var(--line2); border-radius:var(--r);
  padding:14px 16px; font-size:12.5px; line-height:1.85; box-shadow:inset 0 0 30px rgba(60,131,246,0.08)}
.vl-cur{display:inline-block;width:8px;height:15px;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); vertical-align:-2px}

/* ---- fields ---- */
.vl-field{display:flex; align-items:center; gap:10px; background:#080F1E;
  border:1px solid var(--line2); border-radius:var(--r); padding:0 12px; margin-bottom:10px}
.vl-field input{flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--txt); font-family:var(--mono); font-size:13px; letter-spacing:0.12em; padding:13px 0}
.vl-field .tag{font-size:10px; letter-spacing:0.1em; color:var(--cyan)}

/* ---- buttons ---- */
.vl-btn{cursor:pointer; font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:0.18em; padding:13px 18px; border-radius:var(--r); border:1px solid var(--line2);
  background:transparent; color:var(--txt); transition:transform .08s}
.vl-btn:active{transform:scale(0.98)}
.vl-btn.primary{background:var(--grad); color:var(--bright); border-color:rgba(120,160,255,0.5);
  box-shadow:0 0 22px rgba(60,131,246,0.45)}
.vl-btn.block{width:100%}

/* ---- metrics ---- */
.vl-metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px}
.vl-metric{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.vl-metric .n{font-family:var(--sans); font-size:24px; font-weight:700; color:var(--blue)}
.vl-metric .l{font-size:11px; letter-spacing:0.1em; color:var(--dim); margin-top:2px}

.vl-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:10px; letter-spacing:0.12em; color:#3A567E; margin-top:18px;
  border-top:1px solid var(--line); padding-top:10px}

/* ---- mobile ---- */
@media (max-width:560px){
  .vl-top{justify-content:center; text-align:center}
  .vl-nav{order:3; width:100%; justify-content:center}
  .vl-status{order:2}
  body{background-size:24px 24px}
}

@media (prefers-reduced-motion:reduce){
  body::after{display:none}
  .vl-dot,.vl-cur{animation:none !important}
  *{transition:none !important}
}

/* ---- language toggle ---- */
.vl-lang{margin-right:12px}
.vl-lang a{color:var(--dim); font-size:11px; letter-spacing:0.08em}
.vl-lang a.on{color:var(--blue)}
.vl-lang .sep{color:#2A4060; margin:0 4px}

/* ---- dashboard ---- */
.vl-dash{display:grid; grid-template-columns:188px 1fr; align-items:start}
.vl-rail{border-right:1px solid var(--line); padding:14px 12px}
.vl-rail .h{font-size:10px; letter-spacing:0.18em; color:#41618F; margin-bottom:10px}
.vl-case{border:1px solid var(--line); border-radius:7px; padding:9px; margin-bottom:8px}
.vl-case.on{background:rgba(60,131,246,0.12); border-color:var(--line2)}
.vl-case .c{font-size:11px; color:#9FB8D8} .vl-case.on .c{color:var(--bright)}
.vl-case .s{font-size:10px; margin-top:3px}
.vl-main{padding:clamp(14px,4vw,22px); min-width:0}
.vl-risk{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:rgba(6,12,24,0.7);
  border:1px solid rgba(239,159,39,0.4); border-radius:8px; padding:12px 14px; margin-bottom:14px}
.vl-bar{flex:1; min-width:120px; height:8px; background:#0C1426; border-radius:4px; overflow:hidden}
.vl-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#3C83F6,#EF9F27); transition:width 1.2s ease-out}
.vl-event{display:flex; gap:12px; background:var(--bg2); border:1px solid var(--line2);
  border-radius:12px; padding:14px; margin-bottom:10px}
.vl-thumb{width:54px; height:68px; border-radius:6px; background:#1D283A; border:1px solid rgba(148,163,184,0.18);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--dim); font-size:22px}
.vl-event .ti-content{flex:1; min-width:0}
.vl-badge{font-size:11px; padding:1px 7px; border-radius:5px; border:1px solid}
.vl-badge.them{color:var(--red); background:rgba(162,45,45,0.25); border-color:rgba(240,149,149,0.3)}
.vl-badge.us{color:var(--green); background:rgba(15,110,86,0.3); border-color:rgba(159,225,203,0.3)}
.vl-tag{font-size:11px; color:#85B7EB; background:rgba(24,95,165,0.25);
  border:1px solid rgba(133,183,235,0.3); padding:2px 8px; border-radius:5px; display:inline-block}
.vl-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
@media(max-width:680px){
  .vl-dash{grid-template-columns:1fr}
  .vl-rail{border-right:none; border-bottom:1px solid var(--line)}
}

/* ---- intake / triage ---- */
.vl-drop{border:1.5px dashed var(--line2); border-radius:12px; padding:clamp(28px,8vw,56px) 20px;
  text-align:center; cursor:pointer; background:rgba(6,12,24,0.5); transition:border-color .15s,background .15s}
.vl-drop:hover,.vl-drop.over{border-color:var(--blue); background:rgba(60,131,246,0.08)}
.vl-drop i{font-size:34px; color:var(--blue)}
.vl-drop .big{font-size:15px; color:var(--bright); margin-top:10px}
.vl-drop .sm{font-size:12px; color:var(--dim); margin-top:6px}
.vl-row{background:var(--bg2); border:1px solid var(--line2); border-radius:10px; padding:12px 14px; margin-bottom:10px}
.vl-row .fn{font-family:var(--sans); font-weight:500; color:var(--bright); font-size:14px; word-break:break-all}
.vl-chip{display:inline-block; font-size:11px; padding:2px 8px; border-radius:5px;
  color:#85B7EB; background:rgba(24,95,165,0.25); border:1px solid rgba(133,183,235,0.3)}
.vl-st{font-size:11px; letter-spacing:0.08em}
.vl-st.new,.vl-st.extracting{color:var(--cyan)}
.vl-st.needs_review{color:var(--amber)}
.vl-st.failed{color:var(--red)}
.vl-st.accepted{color:var(--green)}
.vl-accept{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
.vl-accept select{background:#080F1E; color:var(--txt); border:1px solid var(--line2);
  border-radius:7px; padding:9px 10px; font-family:var(--mono); font-size:12px}