/* Future Space Vibe Coding - Pip-Boy inspired */
:root{
  --bg:#08110a;
  --bg2:#0b160d;
  --panel:#0e1b10;
  --panel2:#122114;
  --line:#2d5b31;
  --line2:#4b8d51;
  --glow:#8cff9a;
  --soft:rgba(140,255,154,.18);
  --text:#a7ffb3;
  --dim:#78c582;
  --faint:#4f8756;
  --warn:#d0ff8b;
}
@keyframes pipFlicker{0%{opacity:.985}8%{opacity:.965}14%{opacity:.992}22%{opacity:.975}100%{opacity:.985}}
@keyframes pipSweep{0%{transform:translateY(-14vh);opacity:0}10%{opacity:.11}80%{opacity:.08}100%{transform:translateY(110vh);opacity:0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 18px rgba(140,255,154,.08)}50%{box-shadow:0 0 28px rgba(140,255,154,.14)}}

html{background:#050a06}
body{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
  background:
    radial-gradient(circle at 50% 15%,rgba(140,255,154,.06),transparent 28%),
    linear-gradient(180deg,var(--bg2),var(--bg)) !important;
  color:var(--text) !important;
  text-shadow:0 0 6px rgba(140,255,154,.16);
  letter-spacing:.01em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:repeating-linear-gradient(to bottom,rgba(180,255,180,.09) 0,rgba(180,255,180,.09) 1px,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 4px);
  opacity:.26;
  mix-blend-mode:screen;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.18) 74%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.72),inset 0 0 30px rgba(140,255,154,.04);
}
.app::after,.wrap::after{
  content:"";
  position:fixed;
  left:0;right:0;top:0;height:10vh;
  pointer-events:none;
  z-index:9997;
  background:linear-gradient(to bottom,transparent,rgba(140,255,154,.06),transparent);
  animation:pipSweep 8.5s linear infinite;
}
.app{animation:pipFlicker .20s infinite alternate}

.head{
  background:linear-gradient(180deg,rgba(10,20,11,.96),rgba(8,16,9,.92)) !important;
  border-bottom:2px solid var(--line2) !important;
  box-shadow:0 0 0 1px rgba(140,255,154,.05) inset,0 0 16px rgba(140,255,154,.06);
}
.brand{
  color:var(--glow) !important;
  text-transform:uppercase;
  letter-spacing:.08em !important;
  font-weight:700;
  text-shadow:0 0 5px rgba(140,255,154,.6),0 0 18px rgba(140,255,154,.18);
}
.namebar,.limit,.sysdetail,.codehead,.muted{color:var(--dim) !important}

.panel,.systemcheck,.assignment,.card,.composer textarea,input,select,textarea{
  border-radius:4px !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg,rgba(14,27,16,.96),rgba(10,20,11,.94)) !important;
  color:var(--text) !important;
}
.panel,.systemcheck,.card{
  box-shadow:inset 0 0 0 1px rgba(140,255,154,.04),0 0 18px rgba(140,255,154,.05);
  animation:glowPulse 5.5s ease-in-out infinite;
}
.chat::before,.codepanel::before{
  display:block;
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
  margin:10px 12px 0;
  color:var(--faint);
  text-transform:uppercase;
}
.chat::before{content:"COMM"}
.codepanel::before{content:"CODE"}

.assignment{
  background:linear-gradient(180deg,rgba(23,38,18,.98),rgba(15,28,14,.96)) !important;
  border:1px solid var(--line2) !important;
  box-shadow:inset 0 0 0 1px rgba(140,255,154,.05),0 0 22px rgba(140,255,154,.08);
}
.assignment #assignmentLabel{
  color:var(--warn);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.assignment .txt{color:var(--glow) !important}

.msg{
  border-radius:4px !important;
  border:1px solid var(--line) !important;
}
.msg.assistant{
  background:linear-gradient(180deg,rgba(15,28,16,.97),rgba(12,22,13,.95)) !important;
  border-left:3px solid var(--line2) !important;
  color:var(--text) !important;
}
.msg.user{
  background:linear-gradient(180deg,rgba(24,44,26,.96),rgba(15,30,18,.94)) !important;
  border-left:3px solid var(--glow) !important;
  color:var(--glow) !important;
}

.codewrap{
  background:
    repeating-linear-gradient(to bottom,rgba(140,255,154,.05) 0,rgba(140,255,154,.05) 1px,transparent 2px,transparent 4px),
    linear-gradient(180deg,#061008,#050b06) !important;
  border:1px solid var(--line) !important;
}
.linenums{
  color:var(--faint) !important;
  background:rgba(10,18,10,.88);
  border-right:1px solid rgba(140,255,154,.12);
}
.code{
  color:var(--glow) !important;
  text-shadow:0 0 5px rgba(140,255,154,.25),0 0 12px rgba(140,255,154,.10);
}
.code.empty{color:var(--faint) !important}

.composer textarea,input,select,textarea{
  box-shadow:inset 0 0 0 1px rgba(140,255,154,.03),inset 0 0 18px rgba(140,255,154,.03);
}
.composer textarea::placeholder{color:#5f9a66}

.composer button,.btn,.mini,.assignment button{
  background:linear-gradient(180deg,#1b341e,#122315) !important;
  border:1px solid var(--line2) !important;
  border-radius:3px !important;
  color:var(--glow) !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px rgba(140,255,154,.05),0 0 8px rgba(140,255,154,.06);
}
.composer button:hover,.btn:hover,.mini:hover,.assignment button:hover{
  filter:brightness(1.06);
  box-shadow:inset 0 0 0 1px rgba(140,255,154,.08),0 0 14px rgba(140,255,154,.12);
}
.mini.primary{
  background:linear-gradient(180deg,#254d29,#19331c) !important;
  color:#d6ffd9 !important;
}

.systemcheck{
  position:relative;
  overflow:hidden;
  border-left:3px solid var(--line2) !important;
}
.systemcheck::after{
  content:"LINK";
  position:absolute;
  top:14px;
  right:14px;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--faint);
}
.sysdot.ok{box-shadow:0 0 10px rgba(140,255,154,.7)}
.sysdot.bad{box-shadow:0 0 10px rgba(255,180,100,.55)}

h1,h2,h3{
  color:var(--glow) !important;
  text-transform:uppercase;
  letter-spacing:.05em;
}
a{color:#c7ffb9}
code,pre,.code,.linenums{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#08110a}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#27442b,#456f49);
  border-radius:999px;
  border:2px solid #08110a;
}
@media(prefers-reduced-motion:reduce){
  .app,.app::after,.wrap::after,.panel,.card,.brand{animation:none !important}
}
/* ===== EXTREME PIP-BOY / ROBCO OVERRIDE ===== */
:root{
  --pip:#9cff8f;
  --pip2:#6eea63;
  --pip3:#3d8f3f;
  --pip4:#1f4c24;
  --pipbg:#061007;
  --pipbg2:#0a170b;
  --pipdark:#020603;
  --amber:#d6ff76;
}

html,body{
  background:#020503 !important;
}

body{
  color:var(--pip) !important;
  font-family: "Courier New", ui-monospace, monospace !important;
  text-transform:none;
  filter:saturate(.92) contrast(1.08);
  background:
    linear-gradient(rgba(80,255,90,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,255,90,.025) 1px,transparent 1px),
    radial-gradient(circle at 50% 8%,rgba(110,255,120,.07),transparent 25%),
    linear-gradient(180deg,#071109,#030704 100%) !important;
  background-size:100% 4px,32px 32px,100% 100%,100% 100% !important;
  text-shadow:
    0 0 2px rgba(160,255,150,.55),
    0 0 7px rgba(80,255,90,.18) !important;
}

/* MUCH stronger scanlines */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(180,255,180,.16) 0,
      rgba(180,255,180,.16) 1px,
      rgba(0,0,0,.12) 2px,
      rgba(0,0,0,.12) 4px
    ),
    repeating-linear-gradient(
      to right,
      rgba(120,255,130,.015) 0,
      rgba(120,255,130,.015) 1px,
      transparent 1px,
      transparent 3px
    ) !important;
  opacity:.42 !important;
  mix-blend-mode:screen;
}

/* heavy tube vignette / curvature feel */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      transparent 42%,
      rgba(0,0,0,.15) 67%,
      rgba(0,0,0,.52) 88%,
      rgba(0,0,0,.78) 100%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 8%,transparent 92%,rgba(0,0,0,.16));
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.72),
    inset 0 0 220px rgba(0,0,0,.40),
    inset 0 0 25px rgba(120,255,110,.04) !important;
}

/* thick device frame */
.app,
.wrap{
  position:relative;
}
.app::before,
.wrap::before{
  content:"";
  position:fixed;
  inset:6px;
  z-index:9996;
  pointer-events:none;
  border:2px solid rgba(130,255,120,.22);
  box-shadow:
    inset 0 0 0 1px rgba(130,255,120,.07),
    0 0 18px rgba(110,255,100,.08);
}

/* scanning bar */
.app::after,
.wrap::after{
  height:18vh !important;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(120,255,110,.03) 35%,
      rgba(170,255,160,.09) 50%,
      rgba(120,255,110,.03) 65%,
      transparent 100%) !important;
  animation:pipSweep 5.8s linear infinite !important;
}

/* top header becomes hardware/status strip */
.head{
  border-radius:0 !important;
  border:2px solid var(--pip3) !important;
  border-left-width:6px !important;
  border-right-width:6px !important;
  background:
    linear-gradient(180deg,#102313 0%,#09150b 100%) !important;
  box-shadow:
    inset 0 0 22px rgba(100,255,90,.05),
    0 0 20px rgba(100,255,90,.07) !important;
  margin:10px 14px 0 !important;
  padding:14px 18px !important;
}

.head::before{
  content:"ROBCO INDUSTRIES // FIELD TERMINAL";
  display:block;
  position:absolute;
  top:5px;
  right:18px;
  font-size:9px;
  letter-spacing:.20em;
  color:rgba(150,255,140,.35);
}

.brand{
  color:var(--pip) !important;
  font-size:22px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  text-shadow:
    0 0 4px rgba(170,255,160,.8),
    0 0 14px rgba(100,255,90,.28) !important;
}

.namebar::before{
  content:"> USER: ";
  color:var(--pip3);
}
.limit{
  border:1px solid var(--pip3);
  padding:6px 10px;
  background:#071109;
}
.limit::before{
  content:"REQ ";
  color:var(--pip3);
}

/* panels look like industrial HUD modules */
.panel,
.card,
.systemcheck,
.assignment{
  border-radius:0 !important;
  border:2px solid var(--pip3) !important;
  background:
    linear-gradient(rgba(100,255,90,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,255,90,.018) 1px,transparent 1px),
    linear-gradient(180deg,#0b180d,#071008) !important;
  background-size:16px 16px,16px 16px,100% 100% !important;
  box-shadow:
    inset 0 0 0 1px rgba(160,255,150,.04),
    inset 0 0 24px rgba(70,255,80,.025),
    0 0 16px rgba(80,255,90,.05) !important;
}

.panel{
  position:relative;
}
.panel::after{
  content:"";
  position:absolute;
  left:-2px;
  top:18px;
  width:8px;
  height:42px;
  background:var(--pip2);
  box-shadow:0 0 8px rgba(120,255,100,.35);
}

/* labels */
.chat::before,
.codepanel::before{
  display:block !important;
  margin:0 !important;
  padding:8px 12px !important;
  background:#0d1d10 !important;
  border-bottom:1px solid var(--pip3) !important;
  color:var(--pip) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.22em !important;
}
.chat::before{content:"COMMUNICATION // AI UPLINK" !important}
.codepanel::before{content:"PROGRAM MEMORY // ACTIVE BUFFER" !important}

.systemcheck{
  margin-top:8px !important;
  border-left:6px solid var(--pip2) !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.systemcheck::before{
  content:"SYSTEM STATUS" !important;
  color:var(--pip) !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
}
.systemcheck::after{
  content:"LINK // LOCAL DEVICE BUS" !important;
  color:var(--pip3) !important;
}

/* assignment becomes mission card */
.assignment{
  border:2px solid var(--pip2) !important;
  border-left:8px solid var(--pip2) !important;
  background:
    linear-gradient(90deg,rgba(70,120,55,.22),rgba(20,40,18,.96)),
    #0b160c !important;
  box-shadow:
    inset 0 0 18px rgba(120,255,100,.05),
    0 0 16px rgba(120,255,100,.10) !important;
}
.assignment::before{
  content:"ACTIVE OBJECTIVE";
  display:block;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--amber);
  margin-right:8px;
}
.assignment #assignmentLabel{
  color:var(--amber) !important;
  font-weight:900 !important;
}
.assignment .txt{
  color:var(--pip) !important;
  font-size:21px !important;
}

/* chat becomes terminal */
.messages{
  background:
    linear-gradient(rgba(80,255,90,.015) 1px,transparent 1px),
    #061008 !important;
  background-size:100% 22px !important;
}
.msg{
  border-radius:0 !important;
  border:1px solid var(--pip4) !important;
  padding:11px 13px !important;
  position:relative;
}
.msg::before{
  font-size:9px;
  letter-spacing:.16em;
  color:var(--pip3);
  display:block;
  margin-bottom:5px;
}
.msg.assistant::before{content:"AI://"}
.msg.user::before{content:"USR://"}
.msg.assistant{
  background:rgba(10,24,12,.88) !important;
  border-left:4px solid var(--pip3) !important;
}
.msg.user{
  background:rgba(16,36,18,.92) !important;
  border-right:4px solid var(--pip2) !important;
  border-left:1px solid var(--pip4) !important;
}

/* code terminal */
.codehead{
  background:#0c1a0e !important;
  border-bottom:1px solid var(--pip3) !important;
  color:var(--pip) !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.codewrap{
  background:
    repeating-linear-gradient(to bottom,rgba(130,255,120,.06) 0,rgba(130,255,120,.06) 1px,transparent 2px,transparent 4px),
    #020905 !important;
  border:none !important;
}
.code{
  color:#aaff9c !important;
  font-weight:700 !important;
  text-shadow:
    0 0 3px rgba(170,255,160,.65),
    0 0 8px rgba(100,255,90,.20) !important;
}
.linenums{
  background:#061008 !important;
  color:#4f9f50 !important;
  border-right:1px solid var(--pip3) !important;
}

/* inputs like terminal controls */
.composer{
  background:#030704 !important;
}
.composer textarea,
input,
select,
textarea{
  border-radius:0 !important;
  border:1px solid var(--pip3) !important;
  background:#061008 !important;
  color:var(--pip) !important;
  caret-color:var(--pip) !important;
  box-shadow:
    inset 0 0 16px rgba(100,255,90,.025),
    0 0 10px rgba(100,255,90,.03) !important;
}
.composer textarea{
  border-left:5px solid var(--pip2) !important;
}
.composer textarea::placeholder{
  color:#4b8d50 !important;
}

/* hard mechanical buttons */
.composer button,
.btn,
.mini,
.assignment button{
  border-radius:0 !important;
  background:#112514 !important;
  border:2px solid var(--pip3) !important;
  color:var(--pip) !important;
  font-family:"Courier New",monospace !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(170,255,160,.04) !important;
}
.composer button:hover,
.btn:hover,
.mini:hover,
.assignment button:hover{
  background:#18371b !important;
  border-color:var(--pip2) !important;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 0 14px rgba(120,255,110,.18) !important;
}
.mini.primary{
  background:#17341a !important;
  color:#d6ffcf !important;
  border-color:var(--pip2) !important;
}

/* indicator lamps */
.sysdot{
  border-radius:0 !important;
  width:12px !important;
  height:12px !important;
  background:#7fcf72 !important;
  border:1px solid #baffaf !important;
}
.sysdot.ok{
  background:#aaff94 !important;
  box-shadow:0 0 6px #aaff94,0 0 14px rgba(150,255,130,.45) !important;
}
.sysdot.bad{
  background:#d8d56e !important;
  box-shadow:0 0 6px #d8d56e !important;
}

/* admin */
.card h2::before{
  content:"[ ";
  color:var(--pip3);
}
.card h2::after{
  content:" ]";
  color:var(--pip3);
}
.live{
  border-radius:0 !important;
  border:1px solid var(--pip3) !important;
  background:#071109 !important;
  color:var(--pip) !important;
}
.badge{
  border-radius:0 !important;
  background:#0b180d !important;
  color:var(--pip) !important;
  border:1px solid var(--pip4) !important;
}

/* fake hardware corner brackets */
.main::before,
.main::after{
  content:"";
  position:fixed;
  width:34px;
  height:34px;
  pointer-events:none;
  z-index:9995;
}
.main::before{
  left:12px;
  top:12px;
  border-left:4px solid rgba(150,255,140,.35);
  border-top:4px solid rgba(150,255,140,.35);
}
.main::after{
  right:12px;
  bottom:12px;
  border-right:4px solid rgba(150,255,140,.35);
  border-bottom:4px solid rgba(150,255,140,.35);
}

*::-webkit-scrollbar{
  width:12px !important;
  height:12px !important;
}
*::-webkit-scrollbar-track{
  background:#020603 !important;
  border-left:1px solid var(--pip4);
}
*::-webkit-scrollbar-thumb{
  border-radius:0 !important;
  background:#29572e !important;
  border:2px solid #061008 !important;
}

@media(max-width:850px){
  .head{margin:6px 6px 0 !important}
  .head::before{display:none}
}