:root{
  --bg:#0b1220; --card:#121a2b; --ink:#e6ecff; --muted:#a9b4d0; --accent:#2e7dff; --ok:#2ecc71; --bad:#ff5a5a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
html, body{height:100%; margin:0; font-family:var(--sans); background:var(--bg); color:var(--ink);}
.wrap{max-width:980px; margin:0 auto; padding:28px 16px 40px;}
header h1{font-size:22px; margin:0 0 6px;}
header .sub{color:var(--muted); font-size:14px;}
.card{background:var(--card); border:1px solid #1f2a42; border-radius:12px; padding:16px; margin:16px 0;}
.drop{border:1px dashed #2c395c; border-radius:12px; padding:26px; display:flex; gap:12px; align-items:center; justify-content:space-between; transition: border-color 0.2s;}
.row{display:flex; flex-wrap:wrap; gap:12px}
.row > * {
  flex: 1 1 160px; /* Hieman pienempi minimileveys, jotta 6 kenttää mahtuu paremmin */
}
.btn{background:var(--accent); color:#fff; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600}
.btn:disabled{opacity: 0.5; cursor: not-allowed;}
.btn.secondary{background:#2a3656; color:#d6e4ff}
.foot{color:#8391b8; font-size:12px; margin-top:10px}
label{display:block; font-size:12px; color:#c6d4f5; margin-bottom:4px}
input[type="text"]{width:100%; background:#0d1526; border:1px solid #1f2a42; border-radius:10px; padding:10px; color:#eaf2ff; font-family:var(--mono); box-sizing: border-box;}
textarea{width:100%; min-height:200px; font-family:var(--mono); font-size:12px; color:#eaf2ff; background:#0d1526; border:1px solid #1f2a42; border-radius:10px; padding:10px; box-sizing: border-box;}
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; font-size:12px;}
.pill.ok{background:#132a1b; color:#9be49f;}
.pill.bad{background:#331519; color:#ff99a6}
.preview-header {
  display: flex; 
  gap: 10px; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 10px;

/* Esikatseluotsikon asettelu (aiemmin inline-style) */
.preview-header {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Varmistetaan, että textarea vie tilaa kunnolla */
#preview {
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
}