/* Retro-industrial terminal theme — CRT phosphor + worn metal panels. */

:root{
  --bg:#070b0b;
  --steel:#1b2322;
  --steel-hi:#2c3736;
  --steel-lo:#101616;
  --panel:#0c1413;
  --panel-deep:#050908;
  --line:#3b6b62;
  --line-bright:#79b9a7;
  --text:#dbf3e7;
  --muted:#9dbdb2;
  --accent:#7ff0aa;
  --accent-strong:#c8ffdd;
  --amber:#f5c063;
  --amber-deep:#8a5f1c;
  --bone:#e6dfc8;
  --bone-shade:#7d7660;
  --danger:#ef8f7d;
  --shadow:rgba(0,0,0,.6);
  --rivet:
    radial-gradient(circle 3.5px at 11px 11px,#cfc7a8 0 45%,#4a4536 62%,transparent 66%),
    radial-gradient(circle 3.5px at calc(100% - 11px) 11px,#cfc7a8 0 45%,#4a4536 62%,transparent 66%),
    radial-gradient(circle 3.5px at 11px calc(100% - 11px),#cfc7a8 0 45%,#4a4536 62%,transparent 66%),
    radial-gradient(circle 3.5px at calc(100% - 11px) calc(100% - 11px),#cfc7a8 0 45%,#4a4536 62%,transparent 66%);
}

*{box-sizing:border-box}

html{
  overflow-x:hidden;
  background:var(--bg);
}

body{
  position:relative;
  isolation:isolate;
  max-width:1400px;
  min-height:100vh;
  margin:auto;
  padding:1rem clamp(.8rem,3vw,2rem) 2.5rem;
  color:var(--text);
  background:
    radial-gradient(ellipse at 50% -10%,rgba(52,124,102,.22),transparent 40rem),
    radial-gradient(ellipse at 50% 120%,rgba(140,96,24,.12),transparent 32rem),
    var(--bg);
  font-family:"Courier New",Consolas,Monaco,monospace;
  font-size:15px;
  line-height:1.55;
}

/* CRT scanlines */
body::before{
  position:fixed;
  z-index:-1;
  content:"";
  inset:0;
  opacity:.16;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(150,255,196,.14) 3px 4px
  );
  pointer-events:none;
}

/* tube vignette */
body::after{
  position:fixed;
  z-index:-1;
  content:"";
  inset:0;
  box-shadow:inset 0 0 9rem rgba(0,0,0,.72);
  pointer-events:none;
}

/* ---------- hazard stripes ---------- */

.hazard{
  height:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.45)),
    repeating-linear-gradient(45deg,#15130c 0 14px,var(--amber) 14px 28px);
  box-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(0,0,0,.7);
}

/* ---------- header: riveted metal panel ---------- */

header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
  padding:.9rem 2.2rem;
  border:1px solid #46514f;
  border-top-color:#66736f;
  border-bottom-color:#0a0f0e;
  background:
    var(--rivet),
    linear-gradient(180deg,rgba(255,255,255,.09) 0 2px,transparent 2px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,var(--steel-hi),var(--steel) 55%,var(--steel-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px var(--shadow);
}

/* left conduit pipe */
header::before{
  position:absolute;
  top:6px;
  bottom:6px;
  left:8px;
  width:9px;
  content:"";
  border-radius:4px;
  background:linear-gradient(90deg,#0a0f0e,#5d6b66 45%,#20302c);
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
  pointer-events:none;
}

/* right status LED strip */
header::after{
  position:absolute;
  top:50%;
  right:9px;
  width:8px;
  height:52px;
  content:"";
  transform:translateY(-50%);
  border-radius:3px;
  background:
    radial-gradient(circle 3px at 4px 8px,#a8ffc8 0 50%,rgba(127,240,170,.25) 55%,transparent 70%),
    radial-gradient(circle 3px at 4px 26px,var(--amber) 0 50%,rgba(245,192,99,.25) 55%,transparent 70%),
    radial-gradient(circle 3px at 4px 44px,#5f9c82 0 50%,transparent 60%),
    linear-gradient(180deg,#0d1413,#1d2725);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  pointer-events:none;
}

header>a{
  color:var(--accent-strong);
  font-size:1.15rem;
  font-weight:bold;
  letter-spacing:.14em;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(127,240,170,.6),0 2px 0 #000;
}

nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.35rem .6rem;
}

nav a{
  padding:.28rem .6rem;
  color:var(--accent);
  border:1px solid #3f4b49;
  background:linear-gradient(180deg,#202a29,#131b1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-size:.85rem;
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:uppercase;
}

nav a:hover,nav a:focus{
  color:#0a1410;
  border-color:var(--accent-strong);
  background:linear-gradient(180deg,var(--accent-strong),var(--accent));
}

nav a[aria-current="page"]{
  color:#1c1204;
  border-color:var(--amber);
  background:linear-gradient(180deg,#f0d49a,#c99a4c);
  box-shadow:inset 0 1px 0 #fff2d2;
}

a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

a:hover,a:focus{color:var(--amber)}

/* ---------- jaw: teeth motif under the header ---------- */

.jaw{
  position:relative;
  height:100px;
  margin:0 0 1.1rem;
  overflow:hidden;
  border:1px solid #2b3634;
  border-top:0;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(150,20,10,.22),transparent 60%),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.9),rgba(0,0,0,.55) 70%),
    linear-gradient(180deg,#161d1c,#050908 50%,#161d1c);
  box-shadow:inset 0 0 26px rgba(0,0,0,.95),0 4px 14px var(--shadow);
}

/* teeth (inline SVG, rendered by Layout::teethSvg) */
.jaw svg.tooth-row{
  position:absolute;
  left:0;
  width:100%;
  height:56%;
  display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.9));
  pointer-events:none;
}
.jaw svg.tooth-row path{fill:var(--bone);stroke:var(--bone-shade);stroke-width:2}
.jaw svg.tooth-row.upper{top:0}
.jaw svg.tooth-row.lower{bottom:0;transform:scaleY(-1)}

/* ---------- egg frame around the content panel ---------- */

.frame{position:relative}

.egg{display:none}

@media (min-width:1080px){
  .frame{padding:0 116px}

  .egg{
    position:absolute;
    z-index:1;
    display:block;
    width:112px;
    height:166px;
    border:1px solid #4e8674;
    border-radius:52% 48% 44% 56%/64% 62% 38% 36%;
    background:
      radial-gradient(ellipse at 34% 18%,rgba(200,255,224,.35),transparent 52%),
      radial-gradient(ellipse at 50% 94%,rgba(0,0,0,.8),transparent 62%),
      linear-gradient(158deg,#3a7361 0%,#20443b 42%,#0e201c 78%,#07110f);
    box-shadow:
      inset 0 0 26px rgba(0,0,0,.8),
      inset 0 8px 18px rgba(180,255,215,.16),
      inset 0 -10px 20px rgba(0,0,0,.7),
      0 12px 26px rgba(0,0,0,.75),
      0 0 34px rgba(90,200,155,.3);
    pointer-events:none;
  }

  /* glowing four-lobed opening */
  .egg::before{
    position:absolute;
    top:22%;
    left:50%;
    width:52%;
    height:40%;
    content:"";
    transform:translateX(-50%);
    background:radial-gradient(ellipse at 50% 50%,#eaffe9,#8bf3b4 38%,#1b6a48 72%,#07130f);
    clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
    filter:drop-shadow(0 0 7px rgba(127,240,170,.85));
  }

  /* shell ribbing */
  .egg::after{
    position:absolute;
    content:"";
    inset:0;
    overflow:hidden;
    border-radius:inherit;
    opacity:.55;
    background:
      repeating-linear-gradient(92deg,rgba(0,0,0,.45) 0 1px,transparent 1px 9px),
      repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px);
  }

  .egg-a{top:1.5rem;left:0}
  .egg-b{bottom:1.5rem;left:20px;width:82px;height:120px}
  .egg-c{top:1.5rem;right:0;transform:scaleX(-1)}
  .egg-d{bottom:1.5rem;right:20px;width:82px;height:120px}

  .egg-b::before,.egg-d::before{filter:drop-shadow(0 0 5px rgba(245,192,99,.6))}
}

@media (min-width:1080px) and (prefers-reduced-motion:no-preference){
  .egg::before{animation:hatchglow 5.5s ease-in-out infinite}
  .egg-b::before,.egg-d::before{animation-duration:7.5s;animation-delay:-2s}
  @keyframes hatchglow{
    0%,100%{opacity:.62;filter:drop-shadow(0 0 5px rgba(127,240,170,.5))}
    50%{opacity:1;filter:drop-shadow(0 0 13px rgba(127,240,170,.95))}
  }
}

/* ---------- main terminal panel ---------- */

main{
  position:relative;
  z-index:2;
  display:block;
  padding:clamp(1rem,3vw,1.9rem) clamp(1rem,3vw,2rem);
  border:1px solid #46514f;
  border-top-color:#66736f;
  background:
    var(--rivet),
    radial-gradient(ellipse at 12% 0%,rgba(70,150,118,.16),transparent 50%),
    radial-gradient(ellipse at 100% 100%,rgba(70,150,118,.12),transparent 55%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,#0e1817,var(--panel));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 34px rgba(0,0,0,.55),
    0 10px 26px var(--shadow);
}

/* ---------- typography ---------- */

h1,h2,h3{
  margin:0 0 1.15rem;
  color:var(--amber);
  font-weight:bold;
  letter-spacing:.11em;
  line-height:1.25;
  text-shadow:0 2px 0 #2a1c07,0 0 12px rgba(245,192,99,.28);
  text-transform:uppercase;
}

h1{font-size:1.5rem}
h2{font-size:1.2rem}
h3{font-size:1.05rem}

h1::before,h2::before,h3::before{
  margin-right:.4em;
  color:var(--accent);
  content:"\276F";
  text-shadow:0 0 9px rgba(127,240,170,.7);
}

h1::after,h2::after,h3::after{
  display:block;
  height:6px;
  margin-top:.6rem;
  content:"";
  border-bottom:1px solid #000;
  background:
    linear-gradient(90deg,var(--amber) 0 22%,rgba(245,192,99,.25) 22% 26%,var(--accent) 26% 28%,transparent 28%),
    repeating-linear-gradient(45deg,rgba(245,192,99,.25) 0 4px,transparent 4px 8px);
}

p{margin:0 0 1rem}

strong,b{color:var(--accent-strong)}

/* ---------- forms ---------- */

label{
  display:block;
  max-width:42rem;
  margin:0 0 1.1rem;
  color:var(--muted);
  font-size:.85rem;
  font-weight:bold;
  letter-spacing:.08em;
  text-transform:uppercase;
}

input,textarea,select,button{font:inherit;font-size:1rem}

input,textarea,select{
  display:block;
  width:100%;
  max-width:42rem;
  margin-top:.4rem;
  padding:.6rem .7rem;
  color:var(--accent-strong);
  border:2px solid #2f5a52;
  border-top-color:#050b0a;
  border-left-color:#050b0a;
  border-radius:0;
  outline:none;
  background:
    repeating-linear-gradient(to bottom,transparent 0 3px,rgba(140,255,195,.05) 3px 4px),
    var(--panel-deep);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.7),inset -1px -1px 0 rgba(145,212,190,.14);
  letter-spacing:.04em;
}

textarea{min-height:6rem;resize:vertical}
select{max-width:16rem}

input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,.7),
    0 0 0 2px rgba(127,240,170,.28),
    0 0 16px rgba(127,240,170,.28);
}

button{
  cursor:pointer;
  margin:.2rem .4rem .4rem 0;
  padding:.6rem 1.1rem;
  color:#1c1204;
  border:2px solid #ffe0a4;
  border-right-color:#8a5f1c;
  border-bottom-color:#8a5f1c;
  border-radius:0;
  background:linear-gradient(180deg,#ffd98c,var(--amber) 55%,#d59c3d);
  box-shadow:inset 0 1px 0 #fff2d2,3px 3px 0 #030706;
  font-weight:bold;
  letter-spacing:.1em;
  text-transform:uppercase;
}

button:hover,button:focus{
  background:linear-gradient(180deg,#ffe9b8,#ffcd76 55%,#e0a944);
  box-shadow:inset 0 1px 0 #fff2d2,3px 3px 0 #030706,0 0 18px rgba(245,192,99,.5);
}

button:active{
  transform:translate(2px,2px);
  border-top-color:#8a5f1c;
  border-left-color:#8a5f1c;
  border-right-color:#ffe0a4;
  border-bottom-color:#ffe0a4;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.25),1px 1px 0 #030706;
}

form:not(.inline) button{
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}

.inline{display:inline}

.inline button{
  margin:.1rem .3rem .1rem 0;
  padding:.28rem .55rem;
  color:var(--accent);
  border:1px solid #46514f;
  border-radius:0;
  background:linear-gradient(180deg,#212b2a,#131b1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-size:.8rem;
  letter-spacing:.06em;
}

.inline button:hover,.inline button:focus{
  color:#0a1410;
  border-color:var(--accent-strong);
  background:linear-gradient(180deg,var(--accent-strong),var(--accent));
  box-shadow:none;
}

.inline input{display:inline-block;width:auto;max-width:11rem;margin:0 .3rem 0 0;padding:.28rem .45rem;font-size:.85rem}

/* ---------- data readout ---------- */

table{
  width:100%;
  margin:1.3rem 0;
  border:1px solid #2f5a52;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel-deep);
  font-size:.92rem;
}

th,td{
  padding:.55rem .7rem;
  border-right:1px solid #22403a;
  border-bottom:1px solid #22403a;
  text-align:left;
  vertical-align:top;
}

th{
  position:relative;
  color:#1c1204;
  border-color:#8a5f1c;
  background:linear-gradient(180deg,#f0d49a,#c99a4c);
  font-size:.76rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

tr:last-child td{border-bottom:0}
th:last-child,td:last-child{border-right:0}
tbody tr:nth-child(even){background:rgba(70,150,118,.09)}
tbody tr:hover{background:rgba(127,240,170,.14)}
tbody td{color:var(--text)}

/* ---------- data plate ---------- */

.company{
  position:relative;
  margin:0 0 1.2rem;
  padding:.85rem 1.1rem .85rem 1.4rem;
  color:var(--muted);
  border:1px solid #3a4644;
  border-left:6px solid var(--amber);
  background:
    var(--rivet),
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#1a2221,#0d1413);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.5);
  line-height:1.65;
}

.company b{color:var(--accent-strong);letter-spacing:.06em}

/* ---------- system message ---------- */

.flash{
  position:relative;
  margin:0 0 1.3rem;
  padding:.75rem 1rem .75rem 1.2rem;
  color:var(--accent-strong);
  border:1px solid var(--accent);
  border-left:8px solid var(--amber);
  background:
    repeating-linear-gradient(45deg,rgba(127,240,170,.07) 0 8px,transparent 8px 16px),
    rgba(12,32,26,.95);
  box-shadow:inset 0 0 18px rgba(127,240,170,.12),0 3px 10px rgba(0,0,0,.5);
  font-weight:bold;
  letter-spacing:.04em;
}

.flash.error{
  color:var(--danger);
  border-color:var(--danger);
  border-left-color:var(--danger);
  background:
    repeating-linear-gradient(45deg,rgba(239,143,125,.07) 0 8px,transparent 8px 16px),
    rgba(18,8,6,.95);
  box-shadow:inset 0 0 18px rgba(239,143,125,.12),0 3px 10px rgba(0,0,0,.5);
}

/* ---------- responsive ---------- */

@media (max-width:760px){
  body{padding:.5rem .5rem 1.5rem;font-size:14px}
  header{align-items:flex-start;flex-direction:column;padding:.8rem 1.6rem .8rem 1.9rem}
  header::after{display:none}
  nav{justify-content:flex-start}
  nav a,nav button{min-height:44px;padding:.45rem .8rem;display:inline-flex;align-items:center}
  .jaw{height:56px}
  main{padding:.9rem .75rem}
  table{display:block;overflow-x:auto;white-space:nowrap}
  th,td{padding:.45rem .5rem}
  td a,td .inline button{min-height:44px;padding:.5rem .7rem;display:inline-flex;align-items:center}
}

/* ---------- print: strip all decoration ---------- */

@media print{
  html,body{overflow:visible;background:#fff!important}
  body{max-width:none;padding:0;color:#000;font-family:Arial,sans-serif;text-shadow:none}
  body::before,body::after,
  header::before,header::after,
  .hazard,.jaw,.egg{display:none!important}
  header{border:0;background:#fff;box-shadow:none}
  header>a{color:#000;text-shadow:none}
  .frame{padding:0}
  main{padding:0;border:0;background:#fff;box-shadow:none}
  h1,h2,h3{color:#000;text-shadow:none;text-transform:none}
  h1::before,h2::before,h3::before{content:""}
  h1::after,h2::after,h3::after{display:none}
  a{color:#000}
  input,textarea,select,button{color:#000;background:#fff;box-shadow:none;clip-path:none}
  table{border:1px solid #bbb}
  th,td{border:1px solid #bbb}
  th{color:#000;background:#eee}
  .company,.flash{color:#000;border:0;background:#fff;box-shadow:none}
  .no-print{display:none!important}
  nav{display:none!important}