*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:#0e0e0e;
  color:#e0e0e0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:2rem 1rem;
}

.container{
  width:100%;
  max-width:860px;
}

h1{font-size:1.8rem;color:#fff;margin-bottom:.2rem}
h2{font-size:1.3rem;margin-top:2rem;margin-bottom:.8rem;color:#fff}

.subtitle{color:#555;margin-bottom:2rem;font-size:.85rem}

/* ---- Form ---- */

label{display:block;margin-top:1rem;margin-bottom:.3rem;font-size:.82rem;color:#777}
.req{color:#e57373}

input[type="text"],textarea,select{
  width:100%;
  padding:.55rem .7rem;
  background:#161616;
  border:1px solid #2a2a2a;
  border-radius:5px;
  color:#e0e0e0;
  font-size:.92rem;
  outline:none;
  transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{border-color:#4a90d9}
textarea{resize:vertical}

.row{display:flex;gap:1rem;margin-top:.5rem}
.row .field{flex:1}

button[type="submit"],.btn-new{
  display:block;width:100%;margin-top:1.5rem;padding:.7rem;
  background:#1976d2;color:#fff;border:none;border-radius:5px;
  font-size:.95rem;cursor:pointer;transition:background .2s;
}
button[type="submit"]:hover,.btn-new:hover{background:#1565c0}

/* ---- Progress ---- */

.progress-bar-wrap{
  background:#1a1a1a;border-radius:5px;overflow:hidden;height:20px;margin-top:1rem;
}
.progress-bar{
  height:100%;width:0;background:#43a047;transition:width .4s ease;border-radius:5px;
}
#progress-text{margin-top:.4rem;font-size:.85rem;color:#666}

/* ---- Error ---- */

#error-box{
  margin-top:1.5rem;padding:.8rem 1rem;
  background:#1f1010;border:1px solid #3d1a1a;border-radius:5px;color:#ef9a9a;
}

/* ---- Step cards (pipeline view) ---- */

.step-card{
  margin-top:.8rem;
  background:#141414;
  border:1px solid #222;
  border-radius:6px;
  overflow:hidden;
}

.step-header{
  background:#1a1a1a;
  padding:.5rem .8rem;
  font-size:.82rem;
  font-weight:600;
  color:#8ab4f8;
  border-bottom:1px solid #222;
}

.step-body{
  padding:.6rem .8rem;
  font-size:.8rem;
  max-height:400px;
  overflow-y:auto;
}

/* Mini table */

.mini-table{
  width:100%;border-collapse:collapse;font-size:.78rem;
}
.mini-table th{
  text-align:left;padding:.3rem .4rem;color:#555;font-weight:500;
  border-bottom:1px solid #222;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.5px;
}
.mini-table td{
  padding:.3rem .4rem;border-bottom:1px solid #1a1a1a;color:#bbb;
  max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.mono{font-family:"Courier New",monospace;font-size:.75rem;color:#888}
.dim{color:#666}
.small{font-size:.75rem}

.tag-ok{color:#66bb6a;font-size:.72rem}
.tag-err{color:#ef5350;font-size:.72rem}
.tag-action{
  background:#2a2a2a;padding:1px 6px;border-radius:3px;
  color:#ffa726;font-size:.78rem;
}
.tag-style{
  background:#1a237e;padding:1px 6px;border-radius:3px;
  color:#90caf9;font-size:.78rem;
}

/* Aggregation sources */

.agg-source{
  padding:.4rem 0;border-bottom:1px solid #1a1a1a;
}
.agg-source:last-child{border-bottom:none}
.agg-title{color:#ccc;margin-top:.15rem;font-weight:500}
.agg-desc{color:#888;font-size:.75rem;margin-top:.1rem;line-height:1.4}

/* Translation pairs */

.trans-pair{
  display:flex;gap:.5rem;align-items:flex-start;
  padding:.4rem 0;border-bottom:1px solid #1a1a1a;
}
.trans-pair:last-child{border-bottom:none}
.trans-orig,.trans-result{flex:1;font-size:.78rem;color:#bbb}
.trans-arrow{color:#444;padding-top:.2rem;font-size:1rem}

/* Reconstruction block */

.recon-block{margin:.4rem 0}
.recon-block label{margin:0;color:#666;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px}
.recon-value{color:#ddd;margin-top:.15rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}

.warn{
  background:#2a1f00;border:1px solid #4a3500;border-radius:4px;
  padding:.3rem .6rem;margin-bottom:.4rem;color:#ffb74d;font-size:.78rem;
}

/* Compare grid (styled step) */

.compare-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
}
.compare-col{
  background:#111;border:1px solid #222;border-radius:5px;padding:.6rem;
}
.compare-col h4{font-size:.75rem;color:#666;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.5px}
.compare-col.highlight{border-color:#2e7d32;background:#0f1a0f}
.compare-title{color:#ddd;font-weight:500;margin-bottom:.3rem;font-size:.85rem}
.compare-desc{color:#999;font-size:.78rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}

/* ---- Final result ---- */

.result-card{
  background:#161616;border:1px solid #2a2a2a;border-radius:6px;
  padding:1rem;margin-top:.8rem;
}
.result-card label{margin-top:0;font-weight:600;color:#64b5f6}
.result-field{
  margin-top:.4rem;white-space:pre-wrap;word-break:break-word;
  font-size:.92rem;line-height:1.7;
}

.btn-copy{
  margin-top:.5rem;padding:.3rem .7rem;
  background:#2a2a2a;color:#aaa;border:none;border-radius:4px;
  font-size:.78rem;cursor:pointer;transition:background .2s;
}
.btn-copy:hover{background:#333}

/* ---- Utility ---- */

.hidden{display:none!important}

/* ---- Responsive ---- */

@media(max-width:600px){
  .row{flex-direction:column;gap:0}
  .compare-grid{grid-template-columns:1fr}
  .trans-pair{flex-direction:column}
  .trans-arrow{display:none}
  h1{font-size:1.4rem}
  .container{max-width:100%}
}