:root{
  --bg:#0b0f14;
  --card:#111827;
  --panel:#020617;
  --border:#1f2937;

  --text:#f3f4f6;
  --muted:#cbd5e1;

  --key:#93c5fd;
  --val:#86efac;

  --accent:#22c55e;
  --gold:#f5c542;
  --seo:#fde047;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:18px;
  line-height:1.75;
}

/* LAYOUT */
.container{
  max-width:960px;
  margin:28px auto;
  padding:16px;
}

.card{
  background:linear-gradient(180deg,#0f172a,#020617);
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.brand img{
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:#fff;
}

.brand-title{
  font-size:1.6rem;
  font-weight:700;
}

/* BADGE */
.badge{
  display:inline-block;
  background:#052e16;
  color:#86efac;
  padding:6px 14px;
  border-radius:999px;
  font-size:.95rem;
  margin-bottom:10px;
}

/* FORM */
label{
  display:block;
  margin-top:12px;
  color:var(--muted);
}

input,textarea,button{
  width:100%;
  margin-top:6px;
  padding:16px;
  font-size:1.05rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
}

textarea{
  min-height:120px;
}

button{
  margin-top:18px;
  background:var(--accent);
  border:none;
  font-weight:700;
  cursor:pointer;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.btn-secondary{
  background:#020617;
  color:#cbd5e1;
  border:1px solid #334155;
}

/* YAML */
.yaml{
  margin-top:10px;
  background:var(--panel);
  border-radius:16px;
  padding:18px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:16px;
  line-height:1.9;
  max-height:380px;
  overflow:auto;
}

.yaml-line{
  display:grid;
  grid-template-columns:240px 20px 1fr;
  column-gap:6px;
  align-items:center;
  padding:2px 0;
}

.yaml-key{
  color:var(--key);
  white-space:nowrap;
}

.yaml-colon{
  color:var(--muted);
  text-align:center;
}

.yaml-val{
  color:var(--val);
  white-space:normal;
  word-break:break-word;
}

/* INJECT TARGET */
.yaml-inject{
  background:rgba(34,197,94,.20);
  border-left:4px solid var(--accent);
  padding-left:12px;
  margin-left:-12px;
}

/* SEO / AI READY */
.yaml-seo-key,
.yaml-seo-val{
  color:var(--seo);
  font-weight:700;
}

/* MOBILE */
@media(max-width:640px){

  .container{
    margin:10px auto;
    padding:10px;
  }

  .card{
    padding:16px;
    border-radius:16px;
  }

  .brand-title{
    font-size:1.35rem;
  }

  .row{
    grid-template-columns:1fr;
  }

  .yaml{
    font-size:15px;
    line-height:1.7;
    padding:14px;
  }

  .yaml-line{
    grid-template-columns:1fr;
    row-gap:2px;
  }

  .yaml-key{
    white-space:normal;
    font-weight:600;
  }

  .yaml-colon{
    display:none;
  }

  .yaml-val{
    padding-left:12px;
  }

  .yaml-inject{
    padding-left:10px;
    margin-left:0;
  }
}