/* AfexKidz — MATRIX: TRACKER (Fallout/Cosmos terminal)
   No external fonts (safe). Uses system monospace.
*/

.afexkidz-mt{
  --bg:#05070b;
  --panel:#0a0f18;
  --line:#10203b;
  --txt:#8fe7ff;
  --muted:#4aa5c7;
  --ok:#00ff66;
  --sys:#00a2ff;
  --err:#ff0033;
  --warn:#ffcc00;
  --accent:#2aa7ff;
  --accent2:#1ad6ff;
  --shadow: rgba(0,0,0,.55);
  --crtGlow: rgba(26,214,255,.10);
  --crtGreen: rgba(0,255,102,.55);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--txt);
  background: radial-gradient(1200px 700px at 50% 30%, rgba(40,120,220,.12), transparent 55%),
              radial-gradient(900px 500px at 25% 80%, rgba(0,255,102,.06), transparent 60%),
              linear-gradient(180deg, #020409, #070b12);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 60px var(--shadow);
  padding: 14px;
  overflow: hidden;
}

.afexkidz-mt-topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(10,15,24,.92), rgba(5,8,13,.92));
  border: 1px solid rgba(42,167,255,.20);
  border-radius: 12px;
}

.afexkidz-mt-btns{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.afexkidz-mt-btn{
  appearance:none; border:1px solid rgba(42,167,255,.28);
  background: linear-gradient(180deg, rgba(14,24,42,.9), rgba(7,12,20,.9));
  color: var(--txt);
  padding: 8px 10px;
  border-radius: 10px;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 12px;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.afexkidz-mt-btn:hover{border-color: rgba(26,214,255,.55);}
.afexkidz-mt-btn:active{transform: translateY(1px);}
.afexkidz-mt-btn.danger{border-color: rgba(255,0,51,.45); color:#ffd2da;}

.afexkidz-mt-leds{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.afexkidz-mt-led{
  display:inline-flex; gap:6px; align-items:center;
  padding: 6px 8px;
  border-radius: 10px;
  border:1px solid rgba(42,167,255,.20);
  background: rgba(7,12,20,.65);
  color: rgba(143,231,255,.85);
  font-size: 12px;
}
.afexkidz-mt-led i{
  width:10px; height:10px; border-radius: 999px;
  background: rgba(143,231,255,.14);
  box-shadow: inset 0 0 0 1px rgba(143,231,255,.18);
  display:inline-block;
}
.afexkidz-mt-led.is-on i{ background: var(--ok); box-shadow: 0 0 18px rgba(0,255,102,.55); }
.afexkidz-mt-led.is-panic i{ background: var(--err); box-shadow: 0 0 18px rgba(255,0,51,.55); }

.afexkidz-mt-status{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.afexkidz-mt-status-label{opacity:.7; font-size: 12px;}
.afexkidz-mt-status-val{font-weight:800; letter-spacing:.06em;}
.afexkidz-mt-status-val.ok{color: var(--ok);} 
.afexkidz-mt-status-val.err{color: var(--err);} 
.afexkidz-mt-status-val.warn{color: var(--warn);} 

.afexkidz-mt-screen{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(42,167,255,.22);
  background: radial-gradient(900px 420px at 50% 30%, rgba(26,214,255,.10), rgba(0,0,0,.85) 60%),
              linear-gradient(180deg, rgba(0,0,0,.82), rgba(4,6,10,.92));
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,255,102,.06), inset 0 0 110px rgba(0,0,0,.75);
}

/* CRT scanlines + haze */
.afexkidz-mt-screen:before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,.25) 4px
  );
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: multiply;
}
.afexkidz-mt-screen:after{
  content:"";
  position:absolute; inset:-10% -10% -10% -10%;
  background:
    radial-gradient(800px 320px at 50% 50%, rgba(26,214,255,.10), transparent 60%),
    radial-gradient(650px 260px at 40% 60%, rgba(0,255,102,.05), transparent 70%),
    radial-gradient(900px 420px at 60% 40%, rgba(255,255,255,.03), transparent 70%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}

.afexkidz-mt-spectrum{
  width:100%;
  height: 260px;
  display:block;
}

.afexkidz-mt-hud{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.afexkidz-mt-hud .line{
  pointer-events:none;
  font-size: 12px;
  padding: 10px 12px;
  text-shadow: 0 0 14px rgba(26,214,255,.22);
}
.afexkidz-mt-hud .line.chord{color: rgba(0,255,102,.92); text-shadow: 0 0 14px rgba(0,255,102,.28);}
.afexkidz-mt-hud .grid{
  margin-top:auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.42));
  border-top: 1px solid rgba(42,167,255,.14);
}
.afexkidz-mt-hud .pill{
  padding: 6px 8px;
  border:1px solid rgba(42,167,255,.16);
  border-radius: 10px;
  background: rgba(6,10,16,.50);
  color: rgba(143,231,255,.90);
  text-shadow: 0 0 12px rgba(26,214,255,.16);
}

.afexkidz-mt-main{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
}

@media (max-width: 980px){
  .afexkidz-mt-main{grid-template-columns:1fr;}
}

.afexkidz-mt-card{
  border:1px solid rgba(42,167,255,.20);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,15,24,.92), rgba(5,8,13,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.afexkidz-mt-card .head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(42,167,255,.16);
  background: rgba(0,0,0,.20);
}
.afexkidz-mt-card .head .title{font-weight:900; letter-spacing:.08em; font-size: 12px; color: rgba(143,231,255,.90);}

.afexkidz-mt-terminal{
  display:flex; flex-direction:column;
  height: 360px;
}
.afexkidz-mt-log{
  flex:1;
  overflow:auto;
  padding: 12px;
  font-size: 13px;
  line-height: 1.35;
}
.afexkidz-mt-log .mt-line{margin: 0 0 6px 0; white-space: pre-wrap;}
.afexkidz-mt-log .t{color: rgba(0,255,102,.92);} /* Trinity */
.afexkidz-mt-log .s{color: rgba(0,162,255,.95);} /* System */
.afexkidz-mt-log .e{color: rgba(255,0,51,.95);} /* Error */

.afexkidz-mt-cli{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(42,167,255,.16);
  background: rgba(0,0,0,.20);
}
.afexkidz-mt-prompt{color: rgba(0,255,102,.9); font-weight: 900;}
.afexkidz-mt-input{
  flex:1;
  border:1px solid rgba(42,167,255,.22);
  background: rgba(0,0,0,.55);
  color: rgba(143,231,255,.95);
  padding: 10px 10px;
  border-radius: 10px;
  outline:none;
  font-size: 13px;
}
.afexkidz-mt-input:focus{border-color: rgba(26,214,255,.55); box-shadow: 0 0 0 3px rgba(26,214,255,.14);}

.afexkidz-mt-suggest{font-size: 12px; opacity:.75; padding: 0 12px 10px 12px;}

.afexkidz-mt-tracker{
  padding: 10px 12px 12px 12px;
}
.afexkidz-mt-grid{
  overflow:auto;
  border:1px solid rgba(42,167,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.afexkidz-mt-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 640px;
}
.afexkidz-mt-table th,
.afexkidz-mt-table td{
  border-bottom: 1px solid rgba(42,167,255,.10);
  padding: 6px 8px;
}
.afexkidz-mt-table th{position:sticky; top:0; background: rgba(0,0,0,.55); z-index: 2; text-align:left;}
.afexkidz-mt-table td.row{color: rgba(143,231,255,.75); width: 52px;}
.afexkidz-mt-table td.cell{color: rgba(0,255,102,.92); font-weight: 800; letter-spacing:.08em;}
.afexkidz-mt-table tr.is-playhead td{background: rgba(26,214,255,.12);}
.afexkidz-mt-table tr.is-playhead td.cell{color: #bfffd6; text-shadow: 0 0 12px rgba(0,255,102,.18);}
.afexkidz-mt-table tr:hover td{background: rgba(26,214,255,.06);}

.afexkidz-mt-footer{
  margin-top: 10px;
  color: rgba(143,231,255,.75);
  font-size: 12px;
}



/* ===== layout fix v0.3 ===== */
.afexkidz-mt-stage{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .afexkidz-mt-stage{ grid-template-columns: 1fr; }
}

/* terminal */
.afexkidz-mt-terminal{
  min-height: 420px;
  height: min(72vh, 760px);
  display:flex;
  flex-direction:column;
}
.afexkidz-mt-output{
  flex:1 1 auto;
  overflow:auto;
  padding:12px 14px;
  scrollbar-width: thin;
}
.afexkidz-mt-cli{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-top:1px solid rgba(0,255,102,0.18);
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,255,102,0.04));
}

/* tracker */
.afexkidz-mt-tracker{
  height: min(72vh, 760px);
  overflow:auto;
}
.afexkidz-mt-grid{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.afexkidz-mt-grid th, .afexkidz-mt-grid td{
  padding:6px 8px;
  border-bottom:1px solid rgba(0,255,102,0.12);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
}
.afexkidz-mt-grid thead th{
  position:sticky;
  top:0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(4px);
  z-index: 2;
  border-bottom:1px solid rgba(0,255,102,0.25);
}
.afexkidz-mt-grid .is-playhead td{
  background: rgba(0,162,255,0.12);
}
.afexkidz-mt-grid .is-cursor td{
  outline:1px solid rgba(0,162,255,0.55);
  outline-offset:-1px;
}

/* crt haze */
.afexkidz-mt-terminal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(0,162,255,0.09), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity:0.55;
}
.afexkidz-mt-terminal{
  position:relative;
}
.afexkidz-mt-terminal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.12) 3px);
  opacity:0.35;
}