:root{
  --bg:#0f1720;
  --card:#0b1220;
  --accent:#ffb86b;
  --muted:#94a3b8;
  --surface:#071026;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:linear-gradient(180deg,var(--bg),#071026);color:#e6eef7;font-family:Inter,system-ui,Segoe UI,Roboto,Arial; -webkit-font-smoothing:antialiased}
.app{min-height:100vh;display:flex;flex-direction:column;padding:20px;gap:18px}
.topbar{display:flex;gap:10px}
.topbar input{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit;min-height:44px}
.topbar button{padding:12px 16px;border-radius:10px;border:none;background:var(--accent);color:#0b0b0b;font-weight:600;min-width:120px;cursor:pointer}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);max-width:1100px}
.hidden{display:none}
.name{margin:0;font-size:20px;color:var(--accent)}
.desc{margin:8px 0 12px;color:var(--muted)}
.row{display:flex;gap:20px}
.row > div{flex:1}
ul{margin:6px 0 12px 18px}
.mission{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px}
.actions{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.actions textarea{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);min-height:64px;background:transparent;color:inherit}
.actions button{padding:10px 14px;border-radius:8px;border:none;background:#1f2937;color:#eeffff;cursor:pointer}
.result{margin-top:12px;padding:12px;border-radius:8px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.02)}
.footer{color:var(--muted);font-size:13px}
@media (max-width:700px){
  .row{flex-direction:column}
  .topbar{flex-direction:column}
  .topbar button{width:100%}
}