/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#000;
  --bg2:#050a08;
  --green:#00ff9c;
  --green-dim:#0a3;
  --red:#ff2b4a;
  --text:#cfead9;
  --muted:#6e8d80;
  --border:rgba(0,255,156,.25);
}
html,body{height:100%;}
body{
  background: radial-gradient(ellipse at center, #051208 0%, #000 70%);
  color:var(--text);
  font-family: "Courier New", ui-monospace, monospace;
  overflow-x:hidden;
  min-height:100vh;
}

/* Scanlines effect */
.scanlines{
  pointer-events:none;
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,156,0.03) 0px,
    rgba(0,255,156,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9999;
  mix-blend-mode: overlay;
}

.container{
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 48px;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== Screens ===== */
.screen{
  display:none;
  width:100%;
  opacity:0;
  transform: translateY(15px);
  transition: opacity .55s ease, transform .55s ease;
}
.screen.active{
  display:block;
  opacity:1;
  transform: translateY(0);
}

/* ===== Terminal Box ===== */
.terminal{
  background: linear-gradient(180deg, rgba(0,20,12,.85), rgba(0,8,5,.9));
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow:
    0 0 24px rgba(0,255,156,.08),
    inset 0 0 60px rgba(0,255,156,.04);
  position:relative;
}
.terminal::before{
  content:"● ● ●";
  letter-spacing:6px;
  color:#1a3;
  font-size:10px;
  position:absolute; top:10px; left:14px;
  opacity:.7;
}
.terminal.center{ text-align:center; }

.badge{
  display:inline-block;
  font-size:11px;
  letter-spacing:3px;
  color:var(--green);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:18px;
  background:rgba(0,255,156,.05);
}
.badge.ok{ color:#9fffd0; border-color:#0f8; }

h1,h2,h3{ color:#fff; letter-spacing:1.5px; font-weight:700; }
h1{ font-size: clamp(20px, 5vw, 32px); margin-bottom:18px; }
h2{ font-size: clamp(18px, 4vw, 24px); margin-bottom:14px; }
.sub{ color:var(--muted); margin-bottom:18px; font-size:14px; }
.title-found{ color: var(--green); text-shadow: 0 0 12px rgba(0,255,156,.6); }
.green{ color:var(--green); }
.red{ color:var(--red); }
.warn{ color:#ffae42; margin:14px 0; font-size:13px; }
.mt{ margin-top:14px; }

/* ===== Glitch ===== */
.glitch{
  position:relative;
  color:#fff;
  text-shadow: 0 0 8px rgba(0,255,156,.5);
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute; top:0; left:0; width:100%;
  overflow:hidden;
}
.glitch::before{ color:var(--red); clip-path: inset(0 0 60% 0); animation: glitch1 2.4s infinite linear; }
.glitch::after{ color:var(--green); clip-path: inset(60% 0 0 0); animation: glitch2 3s infinite linear; }
@keyframes glitch1{ 0%,100%{ transform:translate(0)} 20%{ transform:translate(-2px,1px)} 40%{ transform:translate(2px,-1px)} }
@keyframes glitch2{ 0%,100%{ transform:translate(0)} 30%{ transform:translate(2px,-1px)} 60%{ transform:translate(-2px,1px)} }

/* ===== Progress ===== */
.progress-wrap{ margin-top:22px; }
.progress-bar{
  height:14px;
  background:rgba(0,255,156,.08);
  border:1px solid var(--border);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.progress-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, #064, var(--green));
  box-shadow: 0 0 12px var(--green);
  transition: width .25s linear;
}
.progress-info{
  display:flex; justify-content:space-between;
  margin-top:8px; font-size:12px; color:var(--muted);
}
.log{
  margin-top:18px;
  font-size:12px;
  color:#7fbfa0;
  text-align:left;
  max-height: 130px;
  overflow:hidden;
  line-height:1.6;
  font-family: "Courier New", monospace;
}
.log div{ opacity:0; animation: typein .25s forwards; }
@keyframes typein{ to{ opacity:1 } }

.blink-dot{
  display:inline-block; width:10px; height:10px;
  background:var(--green); border-radius:50%;
  box-shadow:0 0 10px var(--green);
  margin-bottom:14px;
  animation: blink 1s infinite;
}
@keyframes blink{ 50%{ opacity:.2 } }

/* ===== Info Grid ===== */
.info-grid{
  display:flex; flex-direction:column; gap:8px;
  border:1px dashed var(--border);
  padding:14px; border-radius:6px;
  margin:18px 0;
  font-size:14px;
}
.info-grid span{ color:var(--muted); margin-right:6px; }

/* ===== Form ===== */
form label, .terminal > label{
  display:block; margin-bottom:14px;
  font-size:12px; color:var(--muted); letter-spacing:1px;
  text-transform:uppercase;
}
input[type=text], input[type=tel], input[type=number]{
  display:block; width:100%;
  margin-top:6px;
  background:#000;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--green);
  font-family: inherit; font-size:15px;
  padding: 12px 14px;
  outline:none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus{
  border-color:var(--green);
  box-shadow: 0 0 0 2px rgba(0,255,156,.15);
}

/* ===== Button ===== */
.btn{
  display:inline-block;
  margin-top:10px;
  background: linear-gradient(180deg, #023, #000);
  color:var(--green);
  border:1px solid var(--green);
  padding: 14px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius:4px;
  width:100%;
  transition: all .2s;
  box-shadow: 0 0 10px rgba(0,255,156,.15);
}
.btn:hover{
  background: var(--green);
  color:#000;
  box-shadow: 0 0 20px rgba(0,255,156,.6);
}
.btn:active{ transform: translateY(1px); }

/* ===== Options ===== */
.options{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin: 8px 0 18px;
}
.option{
  background:#000;
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 10px;
  font-family:inherit; font-size:13px;
  letter-spacing:1px;
  cursor:pointer;
  border-radius:4px;
  transition: all .2s;
}
.option:hover{ border-color:var(--green); color:var(--green); }
.option.selected{
  background:rgba(0,255,156,.1);
  border-color: var(--green);
  color:var(--green);
  box-shadow: 0 0 12px rgba(0,255,156,.3);
}

/* ===== Horários ===== */
.horarios{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin: 18px 0;
}
.horario{
  background:#000;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 6px;
  font-family:inherit; font-size:13px;
  cursor:pointer;
  border-radius:4px;
  transition: all .2s;
}
.horario:hover{ border-color:var(--green); color:var(--green); }
.horario.taken{ opacity:.3; cursor:not-allowed; text-decoration: line-through; }

.confirmacao{ margin-top:24px; }
.confirmacao .check{
  font-size: 56px; color:var(--green);
  text-shadow: 0 0 20px var(--green);
  margin-bottom:12px;
}
.hidden{ display:none !important; }

/* ===== Spinner ===== */
.spinner{
  width:50px; height:50px;
  border: 3px solid rgba(0,255,156,.2);
  border-top-color: var(--green);
  border-radius:50%;
  margin: 0 auto 18px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ===== Responsive ===== */
@media (max-width:480px){
  .terminal{ padding:24px 16px; }
  .options{ grid-template-columns: 1fr; }
  .horarios{ grid-template-columns: repeat(3, 1fr); }
  h1{ font-size: 22px; }
}