:root{
  --green:#33ff66;
  --amber:#ffb000;
  --dim:#0a2f14;
  --bg:#000600;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:#020402;
  color:var(--green);
  font-family:'IBM Plex Mono',monospace;
  min-height:100vh;
}
.crt{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  min-height:100vh;
  background:radial-gradient(ellipse at center, #041008 0%, #000400 100%);
  border:2px solid var(--dim);
}
.scanlines{
  pointer-events:none;
  position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 4px);
  mix-blend-mode:multiply;
}
header{ text-align:center; margin-bottom:18px; }
.prompt-line{ font-size:15px; color:var(--green); text-align:left; opacity:.8; }
h1{
  font-family:'VT323',monospace;
  font-size:clamp(28px,6vw,56px);
  color:var(--green);
  text-shadow:0 0 8px rgba(51,255,102,.6);
  margin:6px 0 4px;
  letter-spacing:2px;
}
.tag{ color:var(--amber); font-size:14px; margin:0; text-shadow:0 0 6px rgba(255,176,0,.4); }
.cursor{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0;} }

main{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:820px){ main{ grid-template-columns:1fr; } }
.col{ display:flex; flex-direction:column; gap:16px; }

.panel{
  border:1px solid var(--green);
  background:rgba(3,20,8,.55);
  padding:12px;
  box-shadow:0 0 12px rgba(51,255,102,.08) inset;
}
.panel-title{
  font-family:'VT323',monospace;
  font-size:20px;
  color:var(--amber);
  margin-bottom:8px;
  letter-spacing:1px;
}

.dropzone{
  border:2px dashed var(--dim);
  padding:16px;
  text-align:center;
  transition:border-color .15s, background .15s;
}
.dropzone.over{ border-color:var(--green); background:rgba(51,255,102,.06); }
.dropzone p{ margin:4px 0; }
.dropzone .small{ opacity:.6; font-size:12px; }

.btn{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  background:#0a2a12;
  color:var(--green);
  border:2px solid;
  border-color:#4bff88 #093 #093 #4bff88; /* beveled */
  padding:7px 12px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.5px;
  transition:background .1s, transform .05s;
}
.btn:hover{ background:#12461f; color:#aaffcc; }
.btn:active{ border-color:#093 #4bff88 #4bff88 #093; transform:translateY(1px); }

.row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ai-row{ display:flex; gap:6px; margin-top:12px; }
.txt{
  flex:1;
  background:#010c04;
  border:1px solid var(--dim);
  color:var(--green);
  padding:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}
.txt:focus{ outline:1px solid var(--green); }

label{
  display:block;
  font-size:13px;
  margin:10px 0 4px;
  color:#9effc0;
}
label.chk{ display:flex; align-items:center; gap:8px; }
input[type=range]{ width:100%; accent-color:var(--green); }
select{
  width:100%;
  background:#010c04;
  color:var(--green);
  border:1px solid var(--dim);
  padding:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}

.preview-wrap{
  background:#000;
  border:1px solid var(--dim);
  padding:6px;
  overflow:auto;
  text-align:center;
}
#preview{ image-rendering:auto; max-width:100%; }
.dims{ font-size:12px; color:var(--amber); margin-top:6px; text-align:center; }

.tabs{ display:flex; gap:4px; margin-bottom:8px; }
.tab{
  background:#071c0c;
  color:#6fbf88;
  border:1px solid var(--dim);
  padding:5px 12px;
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
}
.tab.active{ background:#12461f; color:var(--green); border-color:var(--green); }

.code{
  background:#000;
  border:1px solid var(--dim);
  color:var(--green);
  padding:10px;
  font-size:12px;
  line-height:1.4;
  max-height:420px;
  overflow:auto;
  white-space:pre;
  text-shadow:0 0 3px rgba(51,255,102,.3);
}

.notice{ min-height:18px; margin-top:8px; font-size:13px; }
.notice.ok{ color:var(--green); }
.notice.err{ color:#ff5555; }

footer{
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--dim);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:#6fbf88;
}
footer a{ color:var(--amber); text-decoration:none; border-bottom:1px dotted var(--amber); }
footer a:hover{ color:#fff; }